Nous utilisons nos propres cookies ainsi que ceux de tiers pour améliorer votre expérience et analyser l'utilisation de notre site web.

Pour accepter notre utilisation des cookies, sélectionnez une option.

Daniel Orchanian
Retour

Utiliser le Zoning pour votre design

Ou l'art de penser en rectangles.

Utiliser le Zoning pour votre design

Il y a quelques jours, j'avais une session avec un étudiant chez OpenClassrooms pour un projet d'intégration de maquette, et je lui ai expliqué un concept essentiel en frontend : le "zoning".

"Cessons ces anglicismes ! Zonard On dit zoner !"
— Un galliciste remonté

...

Le concept

Le zoning consiste à délimiter des zones...

"D'où le nom."
— Un lecteur perspicace

... des zones donc, basées sur les différents composants visuels de votre design.

Je vous donne un exemple de ce que ça donne avec le design de LinkedIn.

Base Linkedin

Délimiter les blocs principaux

Procédons à un premier découpage des blocs principaux :

Découpage des blocs principaux

Le découpage est plutôt simple :

  • un header en haut avec une barre de recherche et des icones de navigation
  • un corps de page découpé verticalement avec
    • le fil d'actualité au centre
    • deux volets latéraux

Le zoning permet d'identifier les blocs similaires. Par exemple, header et corps de page semblent faire la même largeur. On serait tenté de les mettre dans un même conteneur.

Mais il y a un piège : la barre blanche derrière le header. À cause de cette barre, le header prend toute la largeur de l'écran.

"Ciel ! Mais que faire ?!"
— Un lecteur désemparé

Il suffit d'appliquer une même classe CSS qui se chargera de donner une largeur maximale et des marges automatiques au corps de la page ET à un conteneur invisible dans le header (pointillés rouges).

Conteneur invisible

Le code :

<header>
    <div class="inner-container"></div>
</header>

<main class="inner-container"></main>
.inner-container {
    max-width: 1128px;
    margin: 0 auto;
}

Le zoning permet d'identifier ce genre de difficultés avant que vous ne perdiez du temps dessus en codant.

Délimiter les blocs secondaires

Une fois que vous avez procédé au découpage des blocs principaux, vous pouvez aller à l'intérieur de chacun d'entre eux et procéder à un découpage plus détaillé.

Voici un exemple pour le header :

Découpage header

On peut y voir plusieurs zones et sous-zones :

  • Logo
  • Barre de recherche
  • Menu de navigation (1)
    • Icone + Texte
  • Menu de navigation (2)
    • Icone + Texte

On remarquera que bien qu'il y ait un séparateur, les éléments en violet et jaune contiennent des blocs similaires composés d'une icône et d'un texte.

On pourra peut-être décider d'en faire un seul bloc; avec un séparateur avant les deux items à droite ?

Une approche atomique

En plus de vous guider dans votre intégration du design, le zoning présente comme avantage de vous pousser à vous concentrer sur une zone et la terminer avant de passer aux suivantes.

Il m'arrive par exemple de faire le header et le footer avant d'insérer le corps de la page. Ou le corps avant le header et le footer.

Le zoning me permet dans ces cas de voir quels blocs peuvent être avancés indépendamment du reste (c'est souvent le cas pour le header ou le footer).

Aller plus loin

Le zoning s'applique aussi si vous faites du no-code. La plupart des outils no-code vous obligent à passer par des lignes et des colonnes. Il faut donc penser "blocs".

Un exercice très intéressant consiste à découper un site au hasard avec un schéma similaire à celui que j'ai fait, pour voir comment le design est pensé.

Vous pouvez ensuite inspecter chaque élément et voir les techniques CSS qui ont été appliquées pour tel ou tel effet.

Le zoning est un des fondamentaux du frontend. Que vous soyez junior ou backend secrètement intéressé par ces questions, le plus tôt vous l'adopterez, le plus vite vous progresserez.

"Mince ! On est repérés ! Replions-nous !"
— Des devs backend infiltrés

Je ferai prochainement un article sur le zoning et le design responsive.


Cet article est une version remaniée d'un de mes posts sur LinkedIn. Suivez-moi si ce type de contenu vous intéresse.

Crédits Photo : Lesly Juarez | Jonas Jacobsen

Daniel Orchanian
N'hésitez pas à me suivre sur LinkedIn pour recevoir des notifications sur le nouveau contenu.