Design de l’interface

Le recueil des différents éléments lors des phases précédentes nous permet maintenant de designer l’interface du site web. À partir des livrables de l’étape 4 : Prototyper et tester, nous allons pouvoir passer à la conception graphique et au design de l’interface.
Chaque élément de vrai être identifié et désigner.
Afin de valider les premières tendances, on va créer ou faire créer des moodboards [1]

La création de moodboards

Exemple de moodboard

Un moodboard peut-être traduit en français en « tableau d’humeur ». Il permet de recenser toutes les idées et inspirations issues du projet.
Il peut être résumé en un collage d’éléments graphiques disparates qu’inspire le projet de site web. Il pourra être communiqué à toute l’équipe projet à tous moments pour avis. Il permet d’orienter efficacement le design graphique du site.

Il pourra regrouper les tendances visuelles actuelles sur le sujet, les polices inspirantes pour le projet, l’iconographie imaginée et les nuanciers de couleurs envisagés.

Le moodboar doit souvent être présenté en équipe de visuel en présentiel. Il nécessite d’être défendu, argumenté et débattu.

Une fois le moodboard validé, on pourra passer à l’étape de conception de la maquette du site web.

La conception de la maquette du site web

En se servant des wireframes, des prototypes et des Moodboards, le graphiste va pouvoir finaliser tout le travail précédent qui matérialisera l’interface graphique du site web.

Le graphiste aura la charge de designer les principales pages clés du site afin de fournir les éléments graphiques à intégrer.
Dans le cas de l’utilisation de Framework, type Boootstrap [2] , le graphiste aura aussi la charge de fournir le design des composants.

La rédaction du guide des styles

Exemple de guide de style pour le site CISCO

En complément aux maquettes fournies, le graphiste prendra soin de fournir le guide des styles applicables au site web. Cela permettre aux développeurs de pouvoir intégrer des éléments non prévus dans la maquette, apparaissant au fur et à mesure de la maintenance du site.
Ce guide de style comprend en général, les couleurs, les polices les intertitres et les icônes utilisés. Il est en quelque sorte la charte graphique du site web.

La liste des livrables de la phase de design de l’interface :

les livrables de la phase de design et de conception de l’interface sont :

  • Les moodboards
  • Les maquettes graphiques
  • Les guides de styles du site web

[1Voir la définition des moodboards dans Wikipédia : https://fr.wikipedia.org/wiki/Mood_board

[2En savoir plus sur le Framework Bootstrap sur Wikipédia : https://fr.wikipedia.org/wiki/Bootstrap_(framework)