Comprendre la notion de zones du design

Les zones de page de design sont des portions de page pour lesquelles il est possible d’appliquer des modifications graphiques sous 3 aspects : fonds, typographie et espacements. Voyons de façon précise quel est leur fonctionnement.

Zones extérieures et zones intérieures

Une page est composée de plusieurs rangées successives que nous appellerons zones ({{zones extérieures}}):

Dans ces zones, sont imbriquées des {{zones de contenu}} ({{zones intérieures}}):

{Note: C’est dans ces zones intérieures que nous ajoutons les blocs de contenu}

Pourquoi différencier des zones extérieures d’autres zones intérieures ?

Pour pouvoir avoir un accès faciliter au design de nos pages nous devons pouvoir appliquer un fond ou des images de fond sur toute la largeur de la page. Ce que nous ferons donc en appliquant ce style aux zones extérieures. Puis dans un second temps nous voulons aussi pouvoir attribuer des styles différents à nos zones de contenus. Nous utiliserons alors pour cela les zones intérieures.

Dans l’exemple ci-dessous, un motif a été appliqué sur une zone extérieure:

On se rend compte que l’application d’un tel motif rend la visibilité du contenu très difficile.

Dans l’exemple ci-dessous, nous appliquons donc un fond de couleur unie blanche pour que le contenu puisse être facilement visible:

Le contenu est alors à nouveau visible et bien mis en avant.