Nous avons vu dans un précédent article l'importance de réfléchir à votre besoin avant de concevoir votre site web. A l'issue de cette phase de réflexion, et grâce à l'établissement du cahier des charges, nous pouvons commencer à entrer dans la première étape de réalisation, celle où le designer web fait parler sa créativité et ses connaissances ! Cette étape de conception graphique consiste à mettre en forme vos exigences, et vous permettra de visualiser avant même que le site soit construit le résultat. C'est également dans cette phase qu'il faut penser à rendre votre site agréable et facile à utiliser, en proposant une navigation fluide à vos visiteurs.

Vous pouvez vous dire qu'il n'est pas nécessaire de faire une maquette de votre site car vous savez ce que vous voulez, vous avez une idée des pages dont vous avez besoin, vous avez réfléchi à l'arborescence, vous avez quelques photos, et vous avez rédiger un texte. Il n'y a plus qu'à intégrer tout ça dans un site ! Mais la réflexion doit être bien plus poussée que ça si vous voulez que vos visiteurs apprécient votre site et reviennent, sans oublier le fait que la structure d'un site est primordiale pour le référencement naturel.

Pour comprendre l'intérêt de la conception de maquettes, il est important d'aborder deux notions, qui sont également des métiers à part entière : l'UX et l'UI design.

L'UX design consiste à faire le lien entre les besoins du client et les attentes des internautes. Il faut apporter des solutions aux problématiques des visiteurs, faire en sorte que la navigation soit fluide, et que l'internaute puisse concrétiser son action sans trop d'effort. Le but est de concevoir une interface accessible et facile à prendre en main. On parle ici d'ergonomie, de relation entre l'humain et la machine. Il faut analyser le ressenti des utilisateurs lorsqu'ils navigueront sur votre site.

Pour y arriver, il faut réfléchir à un certain nombre d'éléments :

• le site doit être accessible sur tous les écrans (responsive)
• le design doit donner envie de rester sur le site
• le site doit inspirer confiance
• le site doit être suffisamment intuitif pour que l'internaute se repère facilement
• le visiteur doit pouvoir trouver les réponses à ses questions rapidement

Même si certains disent que l'UI design est une composante de l'UX design, il est plus juste de parler de complémentarité entre ces deux disciplines. Pour l'UI design, il s'agit de rendre la navigation la plus intuitive possible grâce un design fonctionnel. La responsabilité de l'UI design est centrée sur l'identité visuelle. Ici, la réflexion porte sur :

• quelles typographies utiliser
• quelles couleurs choisir
• comment organiser le contenu
• comment rendre les boutons de navigation esthétiques et intuitifs
• l'intégration d'animations au bon endroit

Pour résumer, l'UX porte sur la réflexion de l'ergonomie du site et la satisfaction utilisateur, tandis que l'UI se focalise sur le design et la conception d'interfaces. L'UX se fait en amont de l'UI.  

A travers ces deux notions, vous pouvez constater que la réalisation d'un site internet ne consiste pas à positionner des éléments au hasard sur une page web mais demande une véritable réflexion sur tout le processus de création. C'est pourquoi il faut passer par une phase de maquettage.

La première maquette à créer pour votre site est la maquette fonctionnelle. On parle de wireframe, où d'architecture de site. Le but de cette maquette est de définir la mise en page et l'organisation des différents éléments du site. A cette étape, on fait complètement abstraction du design afin de se focaliser sur les fonctionnalités : on reste en noir et blanc, on utilise une typographie classique et on ne met pas ou peu d'images. Les contenus sont schématisés par des blocs.

Pour concevoir cette maquette, il est possible d'utiliser notre bon vieux duo papier / stylo. Mais afin d'avoir une meilleure représentation, il existe certains logiciels qui permettent de faire une maquette à l'échelle, avec la possibilité d'ajouter des liens entre les pages pour simuler la navigation sur le site. Elle se présentera sous la forme d'un fichier pdf regroupant les différentes pages.

Une fois la maquette réalisée, elle est proposée au client qui doit prendre le temps de valider la disposition des éléments. Des correctifs peuvent être apportés afin d'obtenir la meilleure expérience utilisateur possible.

Il est possible d'ajouter une étape préalable avant la conception d'une maquette fonctionnelle, qu'on appelle zoning. Il s'agit de schématiser uniquement avec des blocs vides la disposition des éléments sur les pages de votre site. A7A Communication a fait le choix de regrouper le zoning avec la maquette fonctionnelle.

Avant de créer une maquette graphique, il est important de réfléchir à l'identité du site, quel univers souhaitez-vous avoir. Là encore, il ne s'agit pas de choisir des couleurs et des typographies au hasard, mais bien de penser à l'image que l'on désire véhiculer à travers son site. Si une charte graphique a été réalisée, il faut l'utiliser afin d'avoir une image cohérente sur tous les supports de communication. A7A Communication propose cette prestation, donc si vous souhaitez être accompagné dans la conception de votre charte graphique, n'hésitez pas à nous contacter.

Une fois la structure du site validée grâce à la maquette fonctionnelle, il faut réaliser un prototype du site. Il s'agit d'intégrer au wireframe tout ce qui concerne l'identité du site : couleurs, typographie, photos, logo, taille des caractères, aspect des boutons... Cela donnera une représentation précise des différentes pages web et de leur design : il s'agit de concevoir l'interface utilisateur. Avant même que le site soit réalisé, le client aura connaissance du résultat et il n'y aura pas de mauvaise surprise à la livraison.

La maquette sera présentée au client sous forme de vidéo simulant une visite sur toutes les pages du site. Un logiciel comme Adobe Xd permet d'obtenir un prototype très précis, il est possible de passer d'une page à l'autre, de cliquer sur les liens et de "scroller" ou faire défiler la page de haut en bas. Vous pouvez voir sur cette vidéo la maquette du site A7A Communication :

La maquette graphique génère des pages statiques, donc certaines animations réalisables sur une page web ne pourront pas être visibles. Avec l'importance d'avoir un site lisible sur tous les écrans, il est souvent préférable de réaliser 2 maquettes : une pour l'ordinateur, l'autre pour le mobile.

Voilà, vous êtes maintenant imbattable sur la conception graphique de site internet !  L'UX et l'UI design n'ont plus de secrets pour vous, et vous comprenez l'importance de ces deux notions lors du processus de réalisation des maquettes fonctionnelle et graphique.

La prochaine étape : Développer votre site web !