Vous avez maintenant de véritables bases pour construire votre maquette haute-fidélité avec vos wireframes sur Figma, et votre univers visuel. Alors, au travail ! 💪
Intégrez la structure dans votre maquette
Nous avons entretemps eu le temps de valider nos wireframes avec notre client. Il nous a partagé le contenu texte du site dans des commentaires sur les wireframes que vous pourrez trouver dans le Figma juste ici.
Pour afficher le contenu des commentaires, il vous suffit de cliquer sur le bouton "commentaire" dans la barre d'outils du haut, et ils s'affichent directement dans vos wireframes et dans la colonne de droite.
On va maintenant pouvoir les intégrer directement dans nos maquettes haute-fidélité ! 🤩
Lançons-nous dans l'élaboration de la maquette !
Commençons par changer la couleur de background de notre frame.
Pour cela, on sélectionne notre frame, et dans la barre de droite, et on change la couleur comme on l'a vu dans le screencast du chapitre précédent. On indique donc #F3F3F3.
Commençons également à créer la navigation de notre site. On utilise notre police d'écriture pour les titres 1 en Bebas Neue. Ce qui nous donne :
Et au fait, comment on sait qu'on est sur la page d'accueil ?!
Eh bien, c'est simple, on va souligner la page sur laquelle on se situe. Pour ça, on fait une ligne de la largeur du texte, de 3 px d'épaisseur, positionnée à 4 px en dessous de "Accueil". Ce qui nous donne donc :
Puis on enchaîne avec le header de la page "Yummy Nouilles", et la promesse "Les nouilles les plus yummy de tout Paris" qu'on met juste en dessous. On peut même en profiter pour mettre en valeur le mot "yummy" en le mettant en “red-highlight”. Mais comme on l'a vu dans le chapitre précédent, gare aux espacements !
Profitons-en pour faire le call to action. Pour décider de sa taille, on utilise à nouveau notre échelle d'espacement et de taille basée sur des multiples de 8, et on crée un rectangle de 56 px de haut. Pour la largeur, mettons une valeur de 216 px, mais nous allons voir une manière un peu spécifique pour adapter la largeur de notre bouton dans quelques instants.
On crée par-dessus une zone de texte dans laquelle on écrit "Click & Collect" en Bebas Neue – 24 px, on centre notre shape, et le texte du bouton. Et voilà, on a un call to action qui ressemble à quelque chose !
Mais ce n'est pas fini ! Revenons à la largeur de notre bouton. Pour cela, j'aimerais vous montrer un autre outil dans Figma qui vous sera très utile pour votre maquettage : la création de composants. Dans le screencast juste en dessous, je vous montre comment créer un composant Figma, et comment adapter la largeur d'un bouton en fonction du texte qu'il contient. 👇
Optimisez votre gestion des images
On a nos liens "Accueil", "Menu" et "Contact", mais on le met quand notre logo ?!
Ne vous inquiétez pas, je ne vous avais pas oublié. Voyons voir comment gérer les images avec Figma.
Pour ajouter une nouvelle image dans Figma, plusieurs options s'offrent à vous :
1- Vous pouvez faire glisser votre fichier (JPEG, JPG, SVG ou PNG) directement dans la fenêtre de votre navigateur.
2- Vous pouvez également cliquer sur le premier bouton dans la barre horizontale avec le logo Figma, sélectionner "File" puis "Place Image", et sélectionner l'image à insérer.
Une fois l'image insérée, vous pouvez la redimensionner en faisant glisser les carrés dans les angles (comme pour la plupart des autres outils).
Vous pouvez également maintenir la touche maj pendant que vous effectuez votre redimension afin de garder les mêmes proportions.
Mais au fait, entre JPEG, JPG, SVG ou PNG, qu'est-ce qu'il faut privilégier ?
Déjà, tout dépend du fichier que vous avez à la base. Pour vous rappeler quelques spécificités, les fichiers JPEG et JPG seront probablement un peu plus légers que les fichiers PNG. Les fichiers PNG, quant à eux, permettent d'avoir un fond transparent.
Et enfin, si vous avez le choix, je vous conseille d'utiliser des fichiers SVG dans Figma dès que vous manipulez des icônes et logos. Les fichiers SVG étant vectoriels (un type de fichier qui ne correspond pas aux images qu'on utilise habituellement, qui sont basées sur les pixels), cela vous permettra de modifier le fichier autant que vous le souhaitez (l'agrandir, changer la couleur, etc.) sans que sa qualité en soit dégradée.
Insérons maintenant les images des restaurants. Si vous cliquez sur "Fill" dans la barre de droite, vous verrez qu'il est également possible de "cropper" l'image, de modifier son contraste, sa saturation, l'exporter en format PDF, etc.
Et voilà !
Économisez du temps
On continue avec la création de notre maquette depuis nos wireframes. Pour les titres de nos sections "Nos adresses", "Notre savoir-faire", etc., je vous propose qu'on utilise le soulignement comme on l'a fait pour le lien "Accueil" dans notre barre de navigation. Cela veut dire qu'on va reproduire cette mise en forme de nombreuses fois.
Dans ce cas-là, on fait des copier-coller ?
On pourrait. Mais des copier-coller signifient que vous devriez à chaque fois redimensionner la barre qui permet de souligner le texte, pour qu'elle corresponde bien à la largeur de la zone de texte.
À la place, je vous propose de repasser par la technique de la création de composant qu'on a vue en début de chapitre. On sélectionne le texte et la ligne juste en dessous, et on en fait un composant qu'on nomme "Title underlined". On le paramètre comme il le faut pour qu'il s'adapte à un nouveau texte exactement comme on en a besoin avec l'auto layout.
On va donc pouvoir l'utiliser pour la suite.
On enchaîne avec la section du CTA. Je vous propose qu'on ajoute une couleur de fond afin de bien mettre en valeur notre call to action et distinguer les différentes sections. Pour cela, on ajoute un rectangle coloré qui fait toute la largeur, comme ceci :👇
On met aussi une zone de texte, du type body, et on duplique notre CTA.
Vous voyez, on peut dès maintenant utiliser notre composant "Titre souligné", et modifier son texte par "Notre savoir-faire".
Ça commence à prendre forme, n'est-ce pas ? 😎
Je vous propose qu'on continue la création de notre maquette dans le screencast juste en dessous.
Il est tout à fait normal d'économiser du temps en réutilisant des éléments déjà créés, en faisant des copier-coller et des duplications, donc n'hésitez pas !
Exercez-vous
Votre mission est donc de le compléter afin de finir les écrans Menu et Contact sur les versions Desktop et Mobile. Encore une fois, n'hésitez pas à réutiliser des éléments déjà existants, alors à vous de jouer ! 💪
Voilà une proposition de correction dans le screencast juste ici.
Et vous trouverez sur ce lien la maquette finale.
En résumé
Les composants permettent de réutiliser une structure simplement dans Figma, plutôt que de faire des copier-coller sur lesquels on doit apporter de nombreuses modifications.
Pour ajouter une nouvelle image dans Figma, vous pouvez :
Faire glisser votre fichier (JPEG, JPG, SVG ou PNG) directement dans la fenêtre de votre navigateur.
Cliquer sur le premier bouton dans la barre horizontale avec le logo Figma, sélectionner "File" puis "Place Image", et sélectionner l'image à insérer.
Il est également possible de "cropper" l'image, de modifier son contraste, sa saturation, etc.
Vous avez maintenant toutes les cartes en main pour créer des wireframes papier, des wireframes sur Figma, et les transformer en maquettes haute-fidélité. Bravo à vous ! Dans le chapitre suivant, passons en revue ce que vous avez appris. Alors à tout de suite !
