Commençons par un exemple pour comprendre la «règle des tiers» en matière de conception Web.

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

Pas trop intéressant, non? En tant que centre de l’image, l’image du taureau semble un peu terne et prévisible. Je parie que si vous voyiez cette image sur un site Web, vous ne vous y attarderiez pas trop longtemps.

Maintenant, considérez ce qui change si nous utilisons la règle des tiers pour placer le taureau hors du centre:

taureau à droite du champ, asymétrique et un exemple de règle des tiers

Un peu plus intéressant, non?

La règle des tiers peut rendre vos conceptions moins prévisibles et moins intrigantes. Et finalement, il a le pouvoir de retenir l’attention du spectateur plus longtemps – ce qui est essentiel lorsque vous essayez d’attirer de nouveaux publics et de convertir ce public en prospects pour votre marque.

Bien sûr, il existe des exceptions à chaque règle. Vous pouvez décider que vos créations sont plus convaincantes si elles sont symétriques. Pourtant, vous ne pouvez pas prendre la décision consciente pour votre propre site Web tant que vous n’avez pas exploré vos options.

Ici, nous apprenons à utiliser la règle des tiers dans la conception et la conception de l’interface utilisateur pour faire passer vos graphiques au niveau supérieur.

Cliquez ici pour télécharger notre collection complète de modèles gratuits pour concevoir un contenu visuel époustouflant, y compris des infographies et plus encore.

Comment utiliser la règle des tiers dans la conception

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

Ce n’est un secret pour personne que l’art est plus que des suppositions. La géométrie remonte à l’époque romaine et a toujours eu une place dans les œuvres d’art importantes.

LIRE  L'Italie est à nouveau exposée au risque de nouvelles infections, les Italiens partant à l'étranger à Pâques

Jetons un coup d’œil à un exemple pour comprendre la règle des tiers.

La règle des tiers trace deux lignes perpendiculaires à une page et deux lignes horizontalement sur une page autour d’une grille de neuf cases.

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

exemple de grille de la règle des tiers

Ensuite, pour utiliser la règle des tiers dans la conception, il vous suffit de décaler votre (vos) objet (s) en les plaçant dans l’une des troisièmes sections:

la troisième section gauche et droite sur une ligne de troisième grille

… Ou à l’une des intersections:

les points d'intersection sur une ligne d'une troisième grille

Dans l’exemple ci-dessus, le point focal principal – le sommet de la montagne – est à gauche du centre de l’image, dans le premier tiers de la photo.

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

Voyons comment créer la ligne d’une troisième grille dans Photoshop en quatre étapes rapides.

Créer une 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» → «Affichage» → «Grille»:

grille en premier. « src = » https://blog.hubspot.com/hs-fs/hubfs/Google%20Drive%20Integration/how%20to%20use%20the%20rule%20of%20thirds%20in%20design-1.png? width = 624 & name = comment% 20to% 20use% 20the% 20rule% 20of% 20thirds% 20in% 20design-1.png « style = » margin-left: 0.00px; « title = » « width = » 624 « >

2. Allez ensuite dans « Préférences » → « Guides, grilles et segments »:

guides, grille et segments. « src = » https://blog.hubspot.com/hubfs/Google%20Drive%20Integration/how%20to%20use%20the%20rule%20of%20thirds%20in%20design-Apr-16 -2021-06-59- 03-02-PM.png « style = » margin-left: auto; marge droite: auto; bloc de visualisation; « title = » « >

LIRE  Pékin détrône New York en tant que capitale milliardaire du monde

3. Choisissez ensuite la couleur des lignes de la grille, ainsi que la ligne continue. Puis changez « Quadrillage tous les » en « 100 pour cent », avec des subdivisions de « 3 ». Lorsque vous avez terminé, cliquez sur « OK ».

guides, grilles, tranches dans Photoshop pour copier la règle des tiers4. Et voilà! Vous avez maintenant une ligne d’une troisième grille. Pour ajouter votre image, faites simplement glisser 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’une des quatre intersections. .

Une ligne complète d'une troisième grille dans Photoshop avec une image transposée dessus.

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

Pour voir la puissance de la règle des tiers dans la conception d’interface utilisateur, jetons un coup d’œil à quelques exemples de sites Web, avec un accent particulier sur les sites Web qui utilisent la règle des tiers.

1. Soulful Vibes Co.

Soulful Vibes Co.  page d'accueil, un exemple de la règle des tiers dans la conception web

Ici, le créateur met l’accent – sur les roches de cristal et le bracelet perlé avec un éléphant – sur les tiers gauche et droit, afin que l’attention du visiteur se porte sur le texte du milieu lui-même: «Ce n’est pas qu’un mouvement, c’est un art de vivre . «

Le concepteur utilise la règle des tiers pour créer une esthétique paisible, harmonieuse et décontractée qui semble plus ouverte et accueillante que si les deux objets étaient centrés sur la page, ce qui serait probablement plus encombré et agité.

2. HubSpot

La page d'accueil de HubSpot, un exemple de la règle des tiers dans la conception Web

HubSpot utilise la règle des tiers pour attirer immédiatement l’attention sur son slogan et sur le CTA « Get HubSpot Free » sur la page d’accueil, car l’attention de la plupart des visiteurs commence sur le côté gauche de votre site Web …