Créez une maquette web avec Figma

C'est parti pour la dernière partie de ce cours. Vous l'attendiez sûrement avec impatience : nous allons maintenant ajouter une dimension esthétique à vos wireframes afin de construire des maquettes efficaces, et visuellement attirantes ! 😎

Pas de panique ! Nous allons voir ensemble le processus créatif. Vous pouvez commencer à votre rythme. Et je vous promets qu'avec les bonnes cartes en main, c'est tout à fait à votre portée de créer les bases d'un univers visuel. Alors, mettons-nous au travail ! 👩‍💻🧑‍💻

Cherchez de l’inspiration

Tout d'abord, j'aimerais vous parler d'une étape primordiale dans le processus créatif : la recherche d'inspiration. Même les designers expérimentés ne manqueraient cette étape pour rien au monde. Pour cela, il y a plusieurs manières de faire.

Pour ma part, la première chose que je fais quand je cherche de l'inspiration est de consulter Dribbble, une plateforme où les designers partagent leur travail avec le reste du monde. Ça nous permet de faire une sorte de moodboard pour notre projet, en créant une "collection" depuis son compte.

Un moodboard vient du monde du graphisme : il s'agit d'un collage d'images, de textes, voire d'objets qui permettent d'exprimer l'univers visuel dans lequel le graphiste souhaite inscrire son projet. Avec Dribbble, on ne fait pas de collage, mais on assemble les éléments de design qui nous plaisent, ça nous permet de les voir tous côte à côte.

Dans le cas de Yummy Nouilles, le restaurant s'adressant à de jeunes adultes, et servant de la nourriture asiatique, j'ai cherché un univers s'inscrivant dans le kawaii (ce qui veut dire "mignon" en japonais, et correspond à un univers bien particulier : je vous laisse chercher sur Google si vous voulez voir à quoi cela ressemble). Dans la barre de recherche de Dribbble, j'ai cherché "noodles", "kawaii food", etc.

Voilà un petit aperçu de ma collection Dribbble pour le projet Yummy Nouilles : 👇

Mais Dribbble n'est pas la seule manière de chercher l'inspiration. Il existe d'autres plateformes de partage de design telles que Behance, ou bien Awwwards qui décerne des prix pour les plus beaux sites Internet (avec différentes catégories). Vous pouvez aussi tout simplement aller voir les sites que vous aimez, chercher sur Google, vous abonner à des newsletters dédiées au design. Pour ma part, j'ai également ajouté l'extension Muzli qui me permet d'afficher les tendances design à chaque fois que j'ouvre un nouvel onglet. 

Choisissez les couleurs

Maintenant que les éléments que vous trouvez inspirants pour votre projet sont rassemblés, c'est encore plus simple pour vous d'en tirer le maximum. Vous pouvez repérer des couleurs qui vous plaisent dans les images que vous avez rassemblées. Pour ma part, j'ai tendance à voir une couleur rouge orangée qui ressort dans la collection Dribbble, mais sans arriver à trouver la bonne couleur pour mon interface.

C'est tout à fait normal de ne pas réussir à se décider. D'autant qu'il ne suffit pas de trouver une seule couleur, mais plusieurs ! Pour cela, il existe une multitude d'outils vous proposant des palettes de couleurs, qui s'accordent bien.

D'ailleurs, saviez-vous que les couleurs n'ont pas qu'une fonction esthétique ? En effet, les couleurs sont également un bon moyen de véhiculer des émotions, et de prioriser l'affichage de l'information.

Pour trouver la palette de couleurs parfaite pour votre site, vous pouvez aller sur Coolors, ou bien l'explorateur de tendances de couleurs d'Adobe, que vous trouverez juste ici. Pour Yummy Nouilles, cela nous donne les couleurs suivantes :

D'ailleurs, vous n'avez pas encore vu comment utiliser l'outil de couleurs dans Figma ! On voit ça tout de suite dans le screencast juste en dessous ! 👇

Choisissez vos polices d’écriture

Vous vous en doutez sûrement : si le choix des couleurs a toute son importance dans le design d'un site, c'est également le cas des polices d'écriture. En effet, elles font partie intégrante du design de votre site, et de votre identité visuelle.

Les possibilités de polices d'écriture sont sans limite. Vous pouvez choisir entre des polices serif ou sans serif, des polices cursives, etc.

Il est également recommandé de combiner deux polices différentes : une pour les titres, et l'autre pour les textes.

Vous pouvez par exemple combiner une police serif pour les titres, et une police sans serif pour les corps de texte, ou inversement.

En attendant, pour Yummy Nouilles, mieux vaut rester sobre avec des polices sans serif. Pour trouver ce duo, je me suis inspirée de ce que j'ai pu trouver sur cet article (en anglais), et ai choisi d'utiliser Bebas Neue, ainsi que Montserrat.

Harmonisez vos espacements et tailles

Définissez vos tailles

Vous vous en doutez, il n’y a pas de hasard dans le design. 😉

Pourtant, cette question est légitime. Pour pouvoir avoir des ensembles cohérents, il convient de se référer à une échelle de tailles : on part sur une taille de base, et toutes les tailles de nos éléments doivent être dimensionnées selon des multiples de cette taille de base.

Je vous propose qu’on choisisse l’échelle la plus couramment utilisée : l’échelle basée sur les multiples de 8. Je vous l’ai mise juste en dessous.👇

Cela signifie que lorsque vous devez créer un nouvel élément, lorsque vous importez le logo dans la barre de navigation de votre maquette, par exemple, vous pouvez vous y référer pour vous décider quant à sa taille.

Gardez des espacements cohérents

Enfin, un dernier élément qui n'est pas à négliger au moment de la création de l'identité visuelle : la définition des espacements.

En effet, les espacements sont un sujet à part entière dans le design. On se soucie des espacements car ils permettent de focaliser l'attention, de créer un lien entre des éléments, ou justement, une distance quand ils sont plus éloignés. Ils aident aussi à hiérarchiser l'information.

C'est pourquoi il est important de ne pas les créer au hasard. Cela permet de garder un ensemble cohérent dans les maquettes.

De la même manière que ce que vous avez vu juste avant avec les tailles, vous pouvez vous référer à l’échelle basée sur les multiples de 8.

Définissez vos tailles de police d'écriture

Nous en profitons en même temps pour décider des tailles de nos polices. On peut s'inspirer de l'échelle que vous trouverez juste en dessous pour nos font-sizes (tailles de police d'écriture). Vous vous en doutez, les éléments les plus importants auront les plus grandes tailles (votre header et vos titres, par exemple). Et vous pourrez également mettre en valeur certains éléments avec l'épaisseur du texte : bold (en gras).

Pour notre maquette, nous allons donc distinguer les différentes tailles de texte. Header correspondra au titre de chaque page (respectivement "Yummy Nouilles", "Menu" et "Nos adresses"). Nous aurons ensuite Title 1 pour les titres des différentes catégories, Title 2 pour les titres des sections. Body va correspondre au corps du texte, et Body Highlight sera pour les endroits à mettre en valeur dans le texte. Pour notre maquette desktop, on a :

• Header : Bebas Neue – 72px

• Title 1 : Bebas Neue – 24px

• Title 2: Montserrat – 24px

• Body Highlight : Montserrat – 20px – Semi bold

• Body : Montserrat – 20px

Et pour le mobile, on a :

• Header : Bebas Neue – 40px

• Title 1 : Bebas neue – 20px

• Title 2 : Montserrat – 20px

• Body Highlight : Montserrat – 16px  – Semi bold

• Body : Montserrat – 16px

Alignez vos éléments

Enfin, je voudrais revenir sur un élément qui contribue grandement à l’harmonie visuelle d’une maquette, et qui a déjà été mentionné précédemment : l’alignement. Comme vous l’avez vu dans la partie précédente, pour cela, vous pouvez utiliser les layout grids, ainsi que les outils d’espacement automatique.

Exercez-vous

Vous avez vu les bases pour mettre en place un univers visuel cohérent. C'est maintenant le moment de mettre en forme tous ces éléments dans votre fichier Figma. Pour cela, vous allez devoir :

• Créer une nouvelle page intitulée "Identité graphique".

• Créer une liste des couleurs qui seront utilisées (#D2483D, #000000, #F3F3F3 et #FFFFFF) en utilisant le système de color styles.

• Créer une liste des différents éléments de police d'écriture, avec les bonnes polices et les bonnes tailles. Vous pouvez également créer des text styles qui vous seront montrés en correction.

À chaque élément listé, vous pourrez créer une nouvelle frame permettant de regrouper vos formes et blocs de texte.

Comme pour les chapitres précédents, on se retrouve dans le screencast juste en dessous pour une proposition de correction. 👇

En résumé

• La création d'un univers visuel commence généralement par la recherche d'inspiration, notamment sur des plateformes de designers telles que Dribbble ou Behance.

• Il est possible de chercher des palettes de couleurs, ainsi que des duos de polices d'écriture qui s'accordent bien ensemble.

• Les couleurs véhiculent des émotions et permettent de faciliter la hiérarchisation de l'information.

• La cohérence des distances d'espacement ainsi que des tailles de police d'écriture est essentielle pour obtenir une maquette efficace.

Avec ce chapitre, vous avez maintenant quelques bases pour créer un univers visuel. Je tiens à rappeler qu'il s'agit ici uniquement d'une sorte de mise en bouche du sujet. Si ce sujet vous intéresse, n'hésitez pas à lire des articles, à regarder des vidéos à ce sujet, etc.

Dans tous les cas, vous êtes tout proche de la fin du cours. Alors on se retrouve tout de suite pour le dernier chapitre qui vous permettra de mettre en pratique tout ce que vous avez vu jusque-là, pour donner vie à votre maquette haute-fidélité ! 🚀