Les sites Web sont l’un des outils de marketing les plus importants pour attirer des clients potentiels. Souvent nos clients souhaitent que nous reprenions leur site Web existant obsolète, sous-performant ou mal « responsive » et le transformions en un site Web visuellement bien conçu et convivial ciblant des utilisateurs souvent novices en interfaces web, pour les aider à se développer sur leur marché. Dans cet article, nous plongeons dans les détails de la conception des interfaces utilisateur et l’avant et l’après d’un projet de refonte de site Web.
Analyse et recherche du marché et des concurrents
Tant que nous analysons suffisamment le marché, nous collectons des éléments pour nous inspirer tels que la collecte d’images, de couleurs, d’animations tout ce qui nous inspire sur la base de la recherche et des informations du client pour définir le style de design voulu que nous appliquerons pour le projet. Avec toutes les inspirations que nous avons rassemblé, nous organisons plusieurs séances de brainstorming ensemble pour en ressortir des idées plus créatives et réduisons nos opinions à plusieurs idées partagées en commun.
Mettre en place les lignes directrices
Lorsque nous réduisons nos opinions sur le concept de design du projet, nous commençons à concevoir la page principale (homepage) pour voir l’atmosphère générale de la conception et, une fois terminée, nous la présentons aux clients. Au cours de cette phase, nous mettons en place la direction générale du design telles que les en-têtes, les thèmatiques de couleur et le style des composants tels que les boutons ou le menu, entre autres. Ce processus peut être effectué à partir de la conception de la version desktop ou mobile, ce qui signifie commencer par la version mobile responsive en fonction des données d’expérience utilisateur, si les utilisateurs sont plus susceptibles d’utiliser la plate-forme sur leurs appareils mobiles.
Ce processus « mobile en premeir » aide à mieux structurer l’architecture de l’information et permet également au développement de commencer avec une base de code moindre pour s’adapter lorsque la version desktop a besoin d’etre codée.
Une fois que nous avons obtenu l’approbation finale sur la homepage, nous avons mis en place une ligne directrice qui influencera le reste du design des composants du produit. Les directives au niveau design (style guidelines) aident les designers et les développeurs à suivre une trame pour s’assurer que chaque page du site Web sera toujours consistante et maintiendra une expérience cohérente. Sur la base du design des composants que nous avons appliqué à la homepage, nous concevons le reste des sous-pages.
Présentation du design aux clients
Lorsque le design est terminé, nous le présentons aux clients via une plate-forme le montrant comme un prototype dynamique telle que Invision ou Adobe Xd sur lesquelles nous recevons des commentaires directs avec allez-retours et discussion avec le client jusqu’à ce que nous soyons tous satisfaits du design. Après cette étape, notre design est développé par les développeurs de chez Outsourcify .
Quelle est notre solution?
Solution 1: utilisez des couleurs et des thèmes cohérents
Pour que le site Web se parcoure facilement et que le contenu soit facile à lire, nous devons faire le bon choix de polices et de couleurs. Nous choisissons généralement des tonalités de couleurs et des polices qui donnent une impression positive sur les utilisateurs du site Web.
Nous proposons à nos clients des couleurs qui restent à la mode et conviviales, accessibles à tous, quelque chose qui resort pour les utilisateurs non avertis en technologie et quelque chose qui représente toujours le côté «en ligne» du produit numérique. Les couleurs doivent également se démarquer des concurrents.
Solution 2: utilisez une typographie clairement lisible
Choisir la bonne police est aussi important que choisir le bon jeu de couleurs pour une meilleure expérience utilisateur et une meilleure identité de marque. Un système de lignes directrices pour la typographie, comme les titres, les sous-titres et les paragraphes, est important pour donner une impression de cohésion au produit numérique. Nous choisissons des styles de polices qui sont pertinents pour l’identité de la marque et reflètent la personnalité de la marque tout en permettant une bonne lisibilité.
Solution 3: utiliser des éléments d’interface utilisateur et de bonnes images reflétant l’identité de la marque
Une image est utilisée comme un atout pour transmettre l’histoire de la marque aux utilisateurs. Pour une image de marque réussie, nous nous concentrons sur l’utilisation d’images cohérentes et de bonne qualité sur tout le site Web. Il est généralement fortement conseillé d’avoir des images uniques et exclusives de l’équipe du client, des bureaux et des scènes qu’il souhaite mettre en valeur et éviter les photos provenant de banques d’images.
En outre, nous appliquons des techniques de conception pour les images et les textes afin de rester cohérents avec les autres éléments d’interface utilisateur tels que les polices, les couleurs et les icônes.
