{"id":58496,"date":"2021-10-28T04:28:38","date_gmt":"2021-10-28T04:28:38","guid":{"rendered":"https:\/\/blogging-techies.com\/fr\/comment-utiliser-la-regle-des-tiers-dans-la-conception-de-sites-web-quick-tip\/"},"modified":"2021-10-28T04:28:38","modified_gmt":"2021-10-28T04:28:38","slug":"comment-utiliser-la-regle-des-tiers-dans-la-conception-de-sites-web-quick-tip","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/fr\/comment-utiliser-la-regle-des-tiers-dans-la-conception-de-sites-web-quick-tip\/","title":{"rendered":"Comment utiliser la r\u00e8gle des tiers dans la conception de sites Web [Quick Tip]"},"content":{"rendered":"

Pour comprendre la “r\u00e8gle des tiers” en mati\u00e8re de conception de sites Web, commen\u00e7ons par un exemple.<\/p>\n

Consid\u00e9rez cette image d’un taureau dans un champ\u00a0:<\/p>\n

Pas tr\u00e8s int\u00e9ressant, n’est-ce pas ? En tant que centre de l’image, l’image du taureau semble un peu molle et pr\u00e9visible. Je suis pr\u00eat \u00e0 parier que si vous voyiez cette image sur un site Web, vous ne vous y attarderez pas trop longtemps.<\/p>\n

Consid\u00e9rons maintenant ce qui change lorsque nous utilisons la r\u00e8gle des tiers pour \u00e9loigner le tore du centre\u00a0:<\/p>\n

\"taureau<\/p>\n

Un peu plus int\u00e9ressant, non ?<\/p>\n

La r\u00e8gle des tiers peut aider vos conceptions \u00e0 se sentir moins pr\u00e9visibles et plus intrigantes. Et en fin de compte, il a le pouvoir de retenir l’attention des t\u00e9l\u00e9spectateurs plus longtemps, ce qui est essentiel lorsque vous essayez de capturer de nouveaux publics et de convertir ces publics en prospects pour votre marque.<\/p>\n

Bien s\u00fbr, il existe des exceptions \u00e0 chaque r\u00e8gle. Vous pouvez d\u00e9cider que vos conceptions sont plus attrayantes lorsqu’elles sont sym\u00e9triques. Pourtant, vous ne pouvez prendre la d\u00e9cision intentionnelle pour votre propre site Web qu’apr\u00e8s avoir explor\u00e9 vos options.<\/p>\n

Ici, nous allons apprendre \u00e0 utiliser la r\u00e8gle des tiers dans la mise en page et la conception de l’interface utilisateur pour faire passer vos images au niveau sup\u00e9rieur.<\/p>\n

\"T\u00e9l\u00e9chargez<\/p>\n

<\/span>Comment utiliser la r\u00e8gle des tiers dans la conception <\/span><\/h2>\n

En termes simples, la r\u00e8gle des tiers postule que les conceptions sont les plus int\u00e9ressantes et visuellement attrayantes lorsque vous placez les principaux objets de votre conception \u00e0 l’une des quatre intersections d’une grille de la r\u00e8gle des tiers, ou dans l’une des sections des tiers.<\/p>\n

Ce n’est un secret pour personne que l’art est plus qu’une conjecture. La g\u00e9om\u00e9trie, qui remonte \u00e0 l’Antiquit\u00e9 romaine, a toujours eu une place dans les \u0153uvres d’art importantes.<\/p>\n

Pour comprendre la r\u00e8gle des tiers, regardons un exemple.<\/p>\n

La r\u00e8gle des tiers trace deux lignes perpendiculaires \u00e0 une page et deux lignes horizontales \u00e0 une page, pour cr\u00e9er un grille \u00e0 neuf cases<\/strong>.<\/p>\n

Cela divise votre page en trois sections d’un tiers, que vous coupiez l’image horizontalement ou verticalement\u00a0:<\/p>\n

\"exemple<\/p>\n

Ensuite, pour utiliser la r\u00e8gle des tiers dans la conception, vous aurez simplement envie de d\u00e9centrer vos objets en les pla\u00e7ant dans l’une des sections de tiers :<\/p>\n

\"la<\/p>\n

\u2026 Ou \u00e0 l’un des points d’intersection :<\/p>\n

\"les<\/p>\n

Dans l’exemple ci-dessus, le point focal principal, le sommet de la montagne, se trouve sur le c\u00f4t\u00e9 gauche du centre de l’image, dans le premier tiers de la photo.<\/p>\n

Heureusement, il est assez facile d’utiliser la r\u00e8gle 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\u00e9cision la r\u00e8gle des tiers pour cr\u00e9er un design plus harmonieux et int\u00e9ressant. .<\/p>\n

Voyons ensuite comment cr\u00e9er la grille de la r\u00e8gle des tiers dans Photoshop en quatre \u00e9tapes rapides. <\/p>\n

<\/span>Comment cr\u00e9er la r\u00e8gle des tiers dans Photoshop<\/span><\/h2>\n

1. Pour utiliser l’outil de r\u00e8gle des tiers de Photoshop, ouvrez simplement une page vierge dans Photoshop et cliquez sur \u00ab\u00a0Affichage\u00a0\u00bb \u2192 \u00ab\u00a0Afficher\u00a0\u00bb \u2192 \u00ab\u00a0R\u00e9seau\u00a0\u00bb\u00a0: <\/strong><\/p>\n

\"cr\u00e9er grille.” 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 =” marge de gauche\u00a0: 0.00px\u00a0; ” title = \u201d\u201d width = \u201d624 \u2033 loading =\u201d paresseux \u201dsrcset =\u201d https:\/\/blog.hubspot.com\/hs-fs\/hubfs\/Google%20Drive%20Integration\/how%20to%20use%20the%20rule%20of % 20thirds% 20in% 20design-1.png? Width = 312 & name = how% 20to% 20use% 20the% 20rule% 20of% 20thirds% 20in% 20design-1.png 312w, https:\/\/blog.hubspot.com\/ hs- fs \/ hubfs \/ Google% 20Drive% 20Integration \/ how% 20to% 20use% 20the% 20rule% 20of% 20thirds% 20in% 20design-1.png\u00a0? Largeur = 624 & nom = comment% 20to% 20use% 20the% 20rule% 20of% 20thirds% 20in% 20design-1.png 624w, https: \/\/blog.hubspot. com \/ hs-fs \/ hubfs \/ Google% 20Drive% 20Integration \/ how% 20to% 20use% 20the% 20rule% 20of% 20thirds% 20in% 20design-1.png\u00a0? width = 936 & name = how% 20to% 20use% 20the% 20rule% 20of% 20thirds% 20in% 20design-1.png 936w, https:\/\/blog.hubspot.com\/hs-fs\/hubfs\/Google%20Drive%20Integration \/ how% 20to% 20use% 20the% 20rule% 20of% 20thirds% 20in% 20design-1.png\u00a0? Largeur = 1248 & nom = comment% 20to% 20use% 20the% 20rule% 20of% 20thirds% 20in% 20design-1.png 1248w, https:\/\/blog.hubspot.com\/hs-fs\/hubfs\/ Google% 20Drive% 20Integration \/ how% 20to% 20use% 20the% 20rule% 20of% 20thirds% 20in% 20design-1.png\u00a0? Largeur = 1560 & nom = comment% 20to% 2 0use% 20the% 20rule% 20of% 20thirds% 20in% 20design-1.png 1560w, https:\/\/blog.hubspot.com\/hs-fs\/hubfs\/Google%20Drive% 20Int\u00e9gration\/comment% 20\u00e0% 20utilisation% 20le% 20r\u00e8gle% 20de% 20tiers% 20en% 20design-1.png\u00a0? Largeur = 1872 & name = how% 20to% 20use% 20the% 20rule% 20of% 20thirds% 20in% 20design-1.png 1872w “tailles =” (largeur maximale : 624px) 100vw, 624px “><\/p>\n

2. Ensuite, allez dans \u00ab\u00a0Pr\u00e9f\u00e9rences\u00a0\u00bb \u2192 \u00ab\u00a0Guides, grilles et tranches\u00a0\u00bb\u00a0:<\/strong><\/p>\n

\n

\"cr\u00e9er Guides, Grille et Tranches. ” src = “https:\/\/blog.hubspot.com\/hubfs\/Google%20Drive%20Integration\/how%20to%20use%20the%20rule%20of%20thirds%20in%20design-Apr-16-2021-06-59-02 -03- PM.png \u201dstyle =” marge gauche\u00a0: automatique\u00a0; marge de droite : automatique ; verrouillage d’\u00e9cran;” titre = “” chargement = “paresseux”><\/p>\n

3. Ensuite, choisissez la couleur des lignes de la grille, ainsi que la ligne continue. Alors, changez \u00ab\u00a0Grid Line Every\u00a0\u00bb en \u00ab\u00a0100\u00a0%\u00a0\u00bb, avec des subdivisions de \u00ab\u00a03\u00a0\u00bb. Lorsque vous avez termin\u00e9, cliquez sur “OK”.<\/strong><\/p>\n

4. Et voil\u00e0 ! Vous avez maintenant une grille de r\u00e8gle des tiers. Pour ajouter votre image, faites simplement glisser et d\u00e9posez l’image sur la grille en couches existante, d\u00e9veloppez-la pour remplir la grille, puis d\u00e9placez votre objet focal jusqu’\u00e0 ce qu’il se trouve dans l’une des troisi\u00e8mes sections ou l’un des quatre points d’intersection. <\/strong><\/p>\n

\"Une<\/p>\n

<\/span>Exemples de r\u00e8gle des tiers dans la conception d’interface utilisateur<\/span><\/h2>\n

Pour consid\u00e9rer le pouvoir de la r\u00e8gle des tiers dans la conception de l’interface utilisateur, examinons quelques exemples de sites Web, en mettant particuli\u00e8rement l’accent sur les sites Web qui utilisent la r\u00e8gle des tiers.<\/p>\n

<\/span>1. <\/strong>Soulful Vibes Co. <\/strong><\/span><\/h3>\n

\"La<\/p>\n

Ici, le designer met l’accent sur les pierres de verre et le bracelet de perles avec un \u00e9l\u00e9phant, sur les tiers gauche et droit, en veillant \u00e0 ce que le visiteur se concentre sur le texte central lui-m\u00eame : \u00ab Ce n’est pas seulement un mouvement, c’est un style de vie. “<\/p>\n

Le concepteur utilise la r\u00e8gle des tiers pour cr\u00e9er une esth\u00e9tique calme, harmonieuse et informelle qui semble plus ouverte et invitante que si les deux objets \u00e9taient au premier plan et au centre de la page, ce qui serait probablement plus encombr\u00e9 et mouvement\u00e9.<\/p>\n

<\/span>2. <\/strong>Hubspot<\/strong> <\/strong><\/span><\/h3>\n

\"La<\/p>\n

HubSpot utilise la r\u00e8gle des tiers pour attirer imm\u00e9diatement l’attention sur votre slogan et le CTA \u00ab\u00a0Get HubSpot Free\u00a0\u00bb sur la page d’accueil, car l’attention de la plupart des visiteurs commencera sur le c\u00f4t\u00e9 gauche de votre site Web. Les images de dessins anim\u00e9s sont ensuite plac\u00e9es dans la section des tiers de droite pour \u00e9quilibrer la page. Cela permet de cr\u00e9er un flux d’utilisateurs, de gauche \u00e0 droite, qui serait plus difficile \u00e0 r\u00e9aliser avec une disposition sym\u00e9trique.<\/p>\n

<\/span>3. <\/strong>Mus\u00e9e Frans Hals<\/strong><\/span><\/h3>\n

\"La<\/p>\n

Ce site Web du mus\u00e9e n\u00e9erlandais utilise la r\u00e8gle des tiers pour attirer l’attention sur la photo de la femme, situ\u00e9e dans la section des tiers de gauche. La page est unique, attrayante et coh\u00e9rente, et utilise des contre-images pour \u00e9quilibrer la structure asym\u00e9trique de la page\u00a0; par exemple, alors que la plus grande image de la femme est \u00e0 gauche de l’\u00e9cran, il y a des textes et des images suppl\u00e9mentaires \u00e0 droite. pour l’\u00e9quilibrer.<\/p>\n

<\/span>Quand enfreindre les r\u00e8gles (des tiers)<\/span><\/h2>\n

Il est important de noter : dans le design et l’art, il n’y a pas de r\u00e8gles strictes \u00e0 suivre, et il y a des exceptions \u00e0 chaque r\u00e8gle ou tendance de design.<\/p>\n

Une fois que vous avez compris la r\u00e8gle des tiers et comment elle peut affecter l’exp\u00e9rience utilisateur, vous pouvez enfreindre cette r\u00e8gle quand bon vous semble.<\/p>\n

Par exemple, vous trouverez peut-\u00eatre plus attrayant de conserver vos images au centre de l’\u00e9cran, comme indiqu\u00e9 sur la page d’accueil de Tone Dermatology\u00a0:<\/p>\n

\"La<\/p>\n

Aqu\u00ed, el enfoque central en la mujer es convincente y audaz, particularmente porque est\u00e1 mirando hacia la izquierda de la pantalla, por lo que sigue siendo una imagen asim\u00e9trica (solo ves sus ojos y nariz a la izquierda, y solo ves su cabello en el c\u00f4t\u00e9 gauche). Droite).<\/p>\n

Cette disposition fonctionne bien pour attirer l’attention du visiteur, et elle n’aurait probablement pas \u00e9t\u00e9 aussi puissante si le concepteur avait utilis\u00e9 la r\u00e8gle des tiers pour positionner la femme \u00e0 gauche ou \u00e0 droite de l’\u00e9cran.<\/p>\n

En fin de compte, vous voudrez choisir les \u00e9l\u00e9ments de conception qui r\u00e9pondent le mieux aux besoins de votre propre marque. En cas de doute, exp\u00e9rimentez la r\u00e8gle des conceptions les plus sym\u00e9triques des troisi\u00e8mes conceptions et envisagez des tests A \/ B pour d\u00e9terminer celle qui convient le mieux \u00e0 votre public.<\/p>\n

\"mod\u00e8les<\/p>\n

\n
\n

Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n