Comprenez l’enjeu du découpage
“Par quoi est-ce que je vais bien pouvoir commencer ?”
C’est la question que je me suis posée la première fois que j’ai dû me baser sur le travail d’un designer pour intégrer un site.
J’ai commencé directement à mettre en place le code, mais après avoir passé un bon moment sur la homepage, je me suis rendu compte que ma structure était inadaptée pour le passage au responsive, et j’ai dû la recommencer quasiment de 0… Frustrant, n’est-ce pas ?
Heureusement, ce chapitre est là pour vous aider à démarrer sereinement votre intégration par une étape clé : le découpage.
Le découpage ? Je ne pensais vraiment pas commencer par de l’art plastique pour faire du Web ! On peut pas commencer à faire du HTML, plutôt ?
Eh non ! Ça n’est pas forcément évident à première vue, mais la première étape pour passer d’une maquette à un site, c’est d’en identifier la structure et de planifier son architecture.
Préparez votre découpage sur Figma
Découper une maquette, c’est identifier les éléments HTML (balises) qui composeront la page grâce à un système révolutionnaire de… rectangles de couleur.
Pour découper facilement la maquette, nous allons utiliser un outil que vous commencez à connaître : Figma.
Pour commencer, nous allons dupliquer la maquette, réadaptée pour les besoins pédagogiques de ce cours, grâce au bouton situé en haut de l’interface Figma :
Ouvrez le projet cloné depuis votre profil Figma. Prenez ensuite un screenshot de la partie supérieure de la homepage sur la maquette Yummy Nouilles.
Une fois que c’est fait, importez le screenshot tout frais dans une nouvelle page Figma (on la nomme Découpage), et vous pouvez commencer à travailler.
Vous allez maintenant créer des frames de couleur pour différencier les éléments de la page, en allant du plus général au plus spécifique.
Pour créer un frame de couleur, il faut cliquer sur le bouton frame dans les outils de la barre supérieure de Figma (ou utiliser le raccourci clavier F ).
Encadrez ensuite l'“AppBar” de la page d'accueil Yummy Nouilles.
Il est possible que le frame que vous venez de créer ait un fond blanc et cache le screenshot. Si c’est le cas, il vous suffit de désactiver l’option Fill dans le menu Design (à droite de l’interface Figma).
Dans le menu Design, activez l’option Stroke qui permet d’appliquer un cadre autour du frame que nous avons créé.
Vous pouvez modifier sa couleur et sa taille en pixels pour plus de lisibilité.
Découpez la homepage Yummy Nouilles
Maintenant que vous savez créer des frames en couleur comme un pro, nous allons nous occuper de découper ensemble la partie supérieure de l'Accueil.
Je ne sais pas par où commencer, qu’est-ce qui doit être encadré ?
Le découpage de la maquette se fait dans un sens bien précis : du plus général au plus spécifique.
C’est encore un peu flou ? Pas de panique, je vais vous montrer en découpant l'AppBar que nous venons d’encadrer.
Premièrement, il faut définir quelle balise HTML représentera le cadre que nous venons de faire.
La norme en matière de structuration de fichier veut que nous utilisions la balise <header> pour l'AppBar ; on renomme donc le frame en <header>.
Au sein du header, on distingue deux catégories d’éléments :
Un logo qui sera une balise <img>.
Des boutons de navigation qui seront contenus dans une balise <nav>.
C’est donc le moment de créer deux nouveaux cadres : l’un autour du logo, et l’autre englobant les 3 boutons de navigation.
On arrive maintenant au plus bas niveau de l'AppBar, et on peut encadrer individuellement les boutons de navigation qui seront des liens <a>.
De la même manière, découpez maintenant le Hero Header Yummy Nouilles.
Un Hero Header ?
Un Hero Header, c’est un bandeau qui s’étend horizontalement sur le haut de l’écran. C’est lui qui raconte votre histoire, et qui va donner envie aux internautes d’aller plus loin.
Il est possible que le frame de section ne s’affiche pas ; si c’est le cas, c’est sûrement qu’il est mal placé dans l’arborescence Figma à gauche de la page. Déplacez-le en haut de celle-ci pour résoudre le problème.
Comme vous avez pu vous en rendre compte dans le cours sur HTML / CSS, la structure d’un fichier HTML obéit à un ensemble de normes et de règles.
Elles sont utiles pour faciliter l’utilisation de CSS, mais également pour faciliter le travail des moteurs de recherche et améliorer l’indexation sur ceux-ci.
À vous de jouer !
Découpez le reste des pages de la maquette de la même façon que ce que nous venons de faire.
Pour éviter des incohérences entre les découpages mobile et Desktop, je vous conseille de découper le mobile en parallèle du Desktop.
De cette façon, vous pourrez efficacement anticiper les différences de structure entre les deux vues en amont.
En résumé
Le découpage permet d’avoir une vue d’ensemble du HTML avant même le début du développement.
Pour découper une maquette sur Figma, on utilise des frames.
Lorsque l’on découpe la maquette, il faut réfléchir aux balises HTML correspondant aux frames.
Nous avons vu comment découper la maquette, il est maintenant temps de mettre les mains dans le code au chapitre suivant !
