Par Guillaume, Webdesigner à l’Agence Dn’D
D’où vient la règle des tiers ?
Avant internet
Initialement la règle des tiers est utilisée en photographie, en peinture et en dessin. La règle est simple et consiste à diviser une zone de travail en 9 parties égales en utilisant 2 lignes horizontales et verticales.
Les intersections de ces droites mettent en avant 4 points d’attraction qui permettent d’attirer le regard et d’améliorer l’esthétique de l’image utilisée.
Sur l’exemple on peut facilement voir que Vincent Van Gogh utilisait la règle des tiers lorsqu’il a peint la « Nuit étoilée ». Aujourd’hui les utilisations restent les mêmes mais avec les tendances E-Commerce et les réseaux sociaux, elles sont de plus en plus variées.
Utilisation de la règle des tiers pour l’agencement d’un site E-Commerce
L’agencement d’une page d’un site E-Commerce
Même si globalement la règle des tiers est utilisée pour les images, elle peut aussi être utilisée pour l’agencement d’une page ou pour les proportions d’un élément par rapport à un autre. Concernant la disposition d’une page web, cela passera par plusieurs éléments :
- Largeur de sidebar ( ⅓ du corps de la page )
- Position du texte ou image sur une slide de carrousel
- Placement d’éléments sur une zone utilisant tout l’espace disponible de l’écran
C’est notamment pour cette raison que les pages catégories sont présentées de plus en plus sous forme de grilles à 3 colonnes pour une question d’esthétique mais aussi pour donner plus d’importance aux visuels des produits.
Les proportions des éléments sur votre page
La proportion des éléments qui composent une page web dépend essentiellement de la largeur de leur conteneur mais aussi de la taille des éléments voisins. On retrouve souvent le cas lorsqu’on redimensionne un pictogramme par rapport à un bouton ou encore lorsqu’il s’agit de faire une composition d’images en quinconce.
Étant donné qu’il n’est plus question de positionnement d’image mais de taille d’un ou de plusieurs éléments, la règle des tiers se traduit par des pourcentages. Une largeur ou hauteur de 33% du parent équivaut à un style minimaliste laissant suffisamment respirer le pictogramme. Comme on peut le voir avec l’exemple ci-dessous l’élément ayant 66% de l’espace disponible paraît grossier et trop proche de la limite du bouton.
L’avantage de l’utilisation de ces deux valeurs est que vous pouvez orienter l’ambiance globale de votre site ou tout simplement mettre en valeur un élément comme un pictogramme dans un call to action (CTA).
Une communication axée sur la communauté
Le E-Commerce comme tout secteur d’activité a évolué graphiquement en fonction des tendances web. Avec l’émergence des réseaux sociaux proposant des services de partage de photos et de vidéos comme sur Instagram, les sites E-Commerce ont dû adapter et diversifier le type de contenu proposé sur leur plateforme.
En effet, de plus en plus de sites E-Commerce mettent en avant leurs réseaux sociaux au sein même de leur site notamment sur leur page d’accueil afin d’immerger plus efficacement les internautes dans l’univers de la marque.
Lancaster a par exemple choisi d’exposer les dernières actualités de son compte Instagram en bas de page d’accueil de son site E-Commerce.
Enfreindre ces règles sur des pages clés de votre boutique en ligne
Comme toutes règles, celles-ci sont également faites pour être transgressées. Longtemps les templates de pages web ont été structurés par les grilles à 12 colonnes avec l’émergence des frameworks CSS comme Bootstrap ou encore Foundation. L’évolution des technologies front-end et l’utilisation de celles-ci par les marques phares du E-Commerce les ont petit à petit démocratisées.
Le parallax est maintenant utilisé pour un défilement en différé des zones de mise en avant de produits et non plus comme simple animation du fond du site. Comme on peut le voir avec l’exemple ci-dessus, la page d’accueil de Lancaster mélange les zones de mise en avant de produits et de catégories par le biais du parallax. Le défilement de la page devient donc dynamique et casse cette rigidité que l’on peut retrouver sur la plupart des sites E-Commerce.
Le plus important
Il faut garder en tête que ces règles servent à guider la composition d’une page et à harmoniser l’ensemble des éléments qui la compose. Ces règles ne doivent pas brider la phase de création lors de la réalisation des maquettes d’un site E-Commerce mais au contraire, faire en sorte que l’attention soit portée sur les zones clés de l’ensemble du site.