Comment utiliser la règle des tiers dans la conception de sites Web [Quick Tip]

Pour comprendre la “règle des tiers” en matière de conception de sites Web, commençons par un exemple.

Considérez cette image d’un taureau dans un champ :

Pas très intéressant, n’est-ce pas ? En tant que centre de l’image, l’image du taureau semble un peu molle et prévisible. Je suis prêt à parier que si vous voyiez cette image sur un site Web, vous ne vous y attarderez pas trop longtemps.

Considérons maintenant ce qui change lorsque nous utilisons la règle des tiers pour éloigner le tore du centre :

Un peu plus intéressant, non ?

La règle des tiers peut aider vos conceptions à se sentir moins prévisibles et plus intrigantes. Et en fin de compte, il a le pouvoir de retenir l’attention des téléspectateurs plus longtemps, ce qui est essentiel lorsque vous essayez de capturer de nouveaux publics et de convertir ces publics en prospects pour votre marque.

Bien sûr, il existe des exceptions à chaque règle. Vous pouvez décider que vos conceptions sont plus attrayantes lorsqu’elles sont symétriques. Pourtant, vous ne pouvez prendre la décision intentionnelle pour votre propre site Web qu’après avoir exploré vos options.

Ici, nous allons apprendre à utiliser la règle des tiers dans la mise en page et la conception de l’interface utilisateur pour faire passer vos images au niveau supérieur.

Comment utiliser la règle des tiers dans la conception

En termes simples, la règle des tiers postule que les conceptions sont les plus intéressantes et visuellement attrayantes lorsque vous placez les principaux objets de votre conception à l’une des quatre intersections d’une grille de la règle des tiers, ou dans l’une des sections des tiers.

Ce n’est un secret pour personne que l’art est plus qu’une conjecture. La géométrie, qui remonte à l’Antiquité romaine, a toujours eu une place dans les œuvres d’art importantes.

Pour comprendre la règle des tiers, regardons un exemple.

La règle des tiers trace deux lignes perpendiculaires à une page et deux lignes horizontales à une page, pour créer un grille à neuf cases.

Cela divise votre page en trois sections d’un tiers, que vous coupiez l’image horizontalement ou verticalement :

Ensuite, pour utiliser la règle des tiers dans la conception, vous aurez simplement envie de décentrer vos objets en les plaçant dans l’une des sections de tiers :

… Ou à l’un des points d’intersection :

Dans l’exemple ci-dessus, le point focal principal, le sommet de la montagne, se trouve sur le côté gauche du centre de l’image, dans le premier tiers de la photo.

Heureusement, il est assez facile d’utiliser la règle des tiers sur vos propres images avec un outil de conception comme Photoshop, qui propose une fonction de grille afin que vous puissiez vous assurer que vous utilisez avec précision la règle des tiers pour créer un design plus harmonieux et intéressant. .

Voyons ensuite comment créer la grille de la règle des tiers dans Photoshop en quatre étapes rapides.

Comment créer la règle des tiers dans Photoshop

1. Pour utiliser l’outil de règle des tiers de Photoshop, ouvrez simplement une page vierge dans Photoshop et cliquez sur « Affichage » → « Afficher » → « Réseau » :

4. Et voilà ! Vous avez maintenant une grille de règle des tiers. Pour ajouter votre image, faites simplement glisser et déposez l’image sur la grille en couches existante, développez-la pour remplir la grille, puis déplacez votre objet focal jusqu’à ce qu’il se trouve dans l’une des troisièmes sections ou l’un des quatre points d’intersection.

Exemples de règle des tiers dans la conception d’interface utilisateur

Pour considérer le pouvoir de la règle des tiers dans la conception de l’interface utilisateur, examinons quelques exemples de sites Web, en mettant particulièrement l’accent sur les sites Web qui utilisent la règle des tiers.

1. Soulful Vibes Co.

Ici, le designer met l’accent sur les pierres de verre et le bracelet de perles avec un éléphant, sur les tiers gauche et droit, en veillant à ce que le visiteur se concentre sur le texte central lui-même : « Ce n’est pas seulement un mouvement, c’est un style de vie. “

Le concepteur utilise la règle des tiers pour créer une esthétique calme, harmonieuse et informelle qui semble plus ouverte et invitante que si les deux objets étaient au premier plan et au centre de la page, ce qui serait probablement plus encombré et mouvementé.

2. Hubspot

HubSpot utilise la règle des tiers pour attirer immédiatement l’attention sur votre slogan et le CTA « Get HubSpot Free » sur la page d’accueil, car l’attention de la plupart des visiteurs commencera sur le côté gauche de votre site Web. Les images de dessins animés sont ensuite placées dans la section des tiers de droite pour équilibrer la page. Cela permet de créer un flux d’utilisateurs, de gauche à droite, qui serait plus difficile à réaliser avec une disposition symétrique.

3. Musée Frans Hals

Ce site Web du musée néerlandais utilise la règle des tiers pour attirer l’attention sur la photo de la femme, située dans la section des tiers de gauche. La page est unique, attrayante et cohérente, et utilise des contre-images pour équilibrer la structure asymétrique de la page ; par exemple, alors que la plus grande image de la femme est à gauche de l’écran, il y a des textes et des images supplémentaires à droite. pour l’équilibrer.

Quand enfreindre les règles (des tiers)

Il est important de noter : dans le design et l’art, il n’y a pas de règles strictes à suivre, et il y a des exceptions à chaque règle ou tendance de design.

Une fois que vous avez compris la règle des tiers et comment elle peut affecter l’expérience utilisateur, vous pouvez enfreindre cette règle quand bon vous semble.

Par exemple, vous trouverez peut-être plus attrayant de conserver vos images au centre de l’écran, comme indiqué sur la page d’accueil de Tone Dermatology :

Aquí, el enfoque central en la mujer es convincente y audaz, particularmente porque está mirando hacia la izquierda de la pantalla, por lo que sigue siendo una imagen asimétrica (solo ves sus ojos y nariz a la izquierda, y solo ves su cabello en el côté gauche). Droite).

Cette disposition fonctionne bien pour attirer l’attention du visiteur, et elle n’aurait probablement pas été aussi puissante si le concepteur avait utilisé la règle des tiers pour positionner la femme à gauche ou à droite de l’écran.

En fin de compte, vous voudrez choisir les éléments de conception qui répondent le mieux aux besoins de votre propre marque. En cas de doute, expérimentez la règle des conceptions les plus symétriques des troisièmes conceptions et envisagez des tests A / B pour déterminer celle qui convient le mieux à votre public.