• 4 heures
  • Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 14/06/2023

Découpez la maquette Yummy Nouilles

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 :

Capture d'écran dans Figma : le bouton Maquette Yummy Nouilles est sélectionné. Un menu se déroule et Duplicate to your drafts est sélectionné.
Cliquez sur "Duplicate to your drafts"

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.

En haut à gauche on retrouve les menus Accueil, Menu et Contact. Au centre, le titre Yummy Nouilles, le sous-titre Les nouilles les plus yummy de tout Paris, le bouton Click & Collect et le logo Yummy Nouilles.
Screenshot du haut de votre maquette

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.

On retrouve le screenshot de la maquette avec les menus et fonctionnalités Figma.
Votre screenshot dans Figma

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>.

Dans le menu Pages, Découpage est sélectionné. En dessous, le frame est nommé header.
Renommez le frame en header.

Au sein du header, on distingue deux catégories d’éléments :

  1. Un logo qui sera une balise <img>.

  2. 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>.

Dans le header de la maquette, les boutons de navigation Accueil, Menu, Contact sont encadrés.
Encadrez les boutons de navigation.

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.

Dans la capture de la maquette, tous les éléments sont encadrés.
Affichage du frame se section

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 !

Et si vous obteniez un diplôme OpenClassrooms ?
  • Formations jusqu’à 100 % financées
  • Date de début flexible
  • Projets professionnalisants
  • Mentorat individuel
Trouvez la formation et le financement faits pour vous
Exemple de certificat de réussite
Exemple de certificat de réussite