Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

Utilisation de l’alignement pour améliorer vos créations

by
Length:MediumLanguages:
This post is part of a series called Design School for Developers.
Choosing a Grid System
An Introduction to Composition

French (Français) translation by Henri Lotin (you can also view the original English article)

L’alignement est une de ces choses qui vient main dans la main lorsque vous travaillez avec des systèmes de grille. Le sujet de l’alignement n’est pas simplement une question de choisir si oui ou non vous souhaitez aligner le texte ou les images à gauche ou à droite d’un design (bien que ces décisions soient toujours évidentes), au lieu de cela, nous employons l’alignement afin d’améliorer nos designs. Un alignement correct dans vos designs les rendront plus attrayants et les rendront aussi plus facile à scanner par les utilisateurs sur une page, inconsciemment en offrant une expérience de lecture plus calme.

Tous les éléments dans votre design devront être alignés en quelque sorte, s’il s’agit juste du texte brut sur votre page, images mélangées au texte (ou même les images d'en-tête ou hero), vidéos, boutons et appel-à-actions, liens (dans le texte ou dans les modules tels qu’une section de navigation) ou tout autre élément que vous pourriez avoir.

Les grilles contribueront à vous aider à résoudre les problèmes d’alignement ou de décisions dans votre design, mais ce sur quoi nous devons mettre l’accent c'est comment les différents éléments, groupes d’éléments ou modules particuliers dans votre design travaillent ensemble. J’ai souligné dès le début l’importance d’une expérience utilisateur cohérente et bien gérer l’alignement est l'une de ces choses vraiment importantes qui peuvent aider à améliorer l’expérience de l’utilisateur.

L’alignement permet également de prendre des décisions conscientes concernant où sont placés les éléments et comment ils interagissent entre eux. La création d'un bon alignement comble l’écart visuel entre tous les éléments de votre design, en nous aidant à créer des relations entre les éléments dont nous disposons. Sinon, nous aurions un design qui a des blocs de texte et des images dans tous les sens, faisant peu de sens sans aucun sens de la structure.


Tous les éléments devraient-ils être alignés ?

Comme expliqué dans les articles précédents sur la grille, il semble que beaucoup de gens n’aiment pas les grilles parce qu’ils les trouvent trop restrictives ; qu’elles écrasent souvent toutes chances de la créativité au sein d’un design.

C’est tout à fait compréhensible. Grilles sont un groupe de colonnes et de lignes qui essentiellement nous aident à créer des blocs ; le CSS met en pages généralement un élément dans une boîte. Toutefois, reconnaître le moment approprié pour rompre avec notre grille peut être difficile.


Amalgame d’alignements dans vos créations

Tout n'a pas à être aligné sur le design de votre site web. Parfois, selon votre design ou la façon dont vous travaillez, cela peut vraiment étouffer la créativité. Au lieu de cela, pensez à comment vous pouvez amalgamer vos alignements. De cette façon, vous veillez à ce qu’il existe un modèle pour chaque élément ou module sur votre site Internet, mais mélanger les alignements assure que vous créiez toujours quelque chose ayant un intérêt visuel qui encouragera vos utilisateurs à continuer à explorer le site web.

L'amalgame d'alignements signifie également que vous pouvez jouer avec des mises en page et grilles un peu plus - au lieu d’utiliser une grille de 6 colonnes, pourquoi ne pas également introduire une autre grille que vous pouvez lui superposer - telle qu’une grille de 4 colonnes.

An example of grid overlay - 6 columns with 4 column layout overlaid. Built in Gridset App.
Un exemple de superposition de grille - six colonnes avec quatre colonnes superposées. Construit avec Gridset App.

Alors que vous ne rompez pas strictement votre grille complètement, vous présentez plutôt une nouvelle grille à partir de laquelle vous pouvez travailler, offrant encore plus d’alignement et d'options de mise en pages dans vos créations.

Amalgamer les alignements ne signifie pas seulement que vous introduisez de nouvelles grilles, colonnes ou options à votre structure. Utilisez plutôt votre grille actuelle pour mixer quels éléments s’alignent sur quelles colonnes. Par exemple, vous pouvez avoir vos éléments d’en-tête alignés sur les bords de la première et de la dernière colonne - mais vous pouvez ensuite décider d’aligner votre corps de texte principal sur la première et l'avant dernière colonne. L'avantage est qu’une grille vous offre un nombre presque infini d’options d’alignement, même avec quelque chose d’aussi petit qu’une grille de 4-6 colonnes.

Amalgamer les alignements est une façon de garder vos utilisateurs intéressés et alertes pendant qu'ils naviguent sur un site web. Au lieu de garder les éléments similaires, elle introduit un autre niveau de concentration pour les éléments de votre design, tout aussi inconsciemment peut cela puisse être.


Aligner les principaux éléments de design

Texte

Les options principales d’alignement que vous avez pour votre texte sont très similaires aux options disponibles dans le CSS : gauche, droite, centré ou justifié. Tout à fait explicite vraiment ; si vous alignez votre texte à gauche alors il va dériver vers la gauche, si vous alignez à droite votre texte il gravitera vers la droite.

Justified text is always questionable; it can have an adverse effect on the readability of the content www.awwwards.com
Un texte justifié est toujours sujet à caution ; Il peut avoir un effet négatif sur la lisibilité du contenu sur www.awwwards.com

Au lieu de cela, ce sur quoi vous devez réfléchir, c’est comment ces alignements sont adaptés à votre texte, et comment ils reposent dans votre design. Par exemple, de petites quantités de texte peuvent bien fonctionner dans un alignement centré, bien que ce sera plus embrouillant et difficile à lire pour des quantités plus conséquentes de texte. De même, avec les rubriques cela pourrait fonctionner bien dans votre design de les aligner au centre, bien que cela dépende de la taille du texte et où il est placé. Par exemple, un titre aligné au centre ne fonctionne pas bien quand il a un grosse proportion de texte alignée à gauche immédiatement en dessous.

The unusual centrally aligned forms inputs of wearemovingthings.com
Les champs de formulaire inhabituellement centrés de wearemovingthings.com

Vous devez également penser à des cultures qui peuvent être exposés à votre design et site web. Dans certaines cultures, on lit de droite à gauche (RTL), alors que dans les cultures occidentales, c'est de gauche à droite (LTR) et de haut en bas.

En raison de la lecture de gauche à droite de la culture occidentale, il sera probablement difficile d’avoir une grande quantité de texte alignée​ à droite. Utilisez plutôt ces alignements qui peuvent être plus difficiles à lire en très petites quantités, et plus sur un élément du design comme un pied de page pour l’info d'adresse ou le contact, ou dans un en-tête avec une liste de liens de navigation.

Images

Aligner les images peut être difficile, car l’alignement que vous devez utiliser pour chaque image est proportionnel à la taille de l’image. Les images plus petites sont naturellement plus faciles à placer dans votre contenu d’une manière qui ne perturbe pas le contenu, alors que les grandes images tendent plus à perturber le flux de lecture et sont donc plus difficiles à placer dans votre contenu.

Vous avez deux options ; soit vous placez vos images en dehors du flux de contenu (par exemple, entre les paragraphes ou au début ou à la fin de votre contenu), ou vous pouvez travailler sur un moyen de classer vos images dans votre grille.

La première option est assez facile à mettre en œuvre. Sans interrompre le flux de texte, vous pouvez placer des images à pleine largeur ou sur une largeur personnalisée et centrée dans la zone de texte dans laquelle elle se trouve normalement. C’est assez simple et présente toujours bien, tout en fonctionnant correctement quand nous réduisons un site web s'il est responsive.

mixed-alignment

La deuxième option peut devenir un peu plus compliquée, selon comment vous décidez de placer les images dans votre contenu. Vous disposez de plusieurs options. Vous pouvez tout d’abord avoir les images qui s'alignent parfaitement (à gauche ou à droite) avec votre texte, ou vous pouvez avoir les images légèrement saillantes au bord du contenu.

De cette façon, vos images pourraient être placées sur une largeur de colonne complète dans le contenu, le contenu s’écoulant autour de l’image. Ceci ne perturbe pas beaucoup le flux de lecture comme quand l’image avait été entièrement placée à l’intérieur de la zone de contenu, mais elle ajoute également de l'intérêt à votre design - vous créez une autre zone d’alignement pour vos éléments qui garderont votre design visuellement plus frais et plus attrayant.

Images d'arrière-plan

Aligner les images d’arrière-plan est l’un des ces petits durs - et encore une fois, il a tout rapport à votre design et sujet, ainsi qu'à la taille l’image d’arrière-plan elle-même.

Comme pour les alignements du texte, l’alignement de vos images d’arrière-plan peut très bien correspondre à vos règles CSS ; fixed, absolute, to the top or to the bottom, to the left or to the right ? Vraiment, cela dépend de votre design et comment l’image d’arrière-plan s'y intègre. Si votre design a un motif, pensez à comment ce motif s’aligne avec vos éléments - vous voulez vous assurer qu’il s’aligne bien avec vos éléments ou bien il pourrait faire s'écrouler complètement tout le design.

Pensez également à quoi il ressemble si vous avez une grande image de fond de focale et comment elle s’inscrit dans votre design. Si elles sont grandes et ont assez de focus, pensez peut-être à comment vos autres éléments et modules peuvent s’intégrer dans ce design. Par exemple, votre corps de texte principal pourrait s'aligner avec les bords du design ? C’est tout au sujet de vous questionner sur comment vos images fonctionnent avec les autres parties de votre design et comment vous pouvez travailler avec elles afin de rendre votre design plus brillant et fonctionnant beaucoup mieux ensemble.

Groupes d’éléments

Lorsque je décris un groupe d’éléments, j'y pense comme très différent de ce que je décrirais comme un module.

Lorsque vous pensez en termes de modules — à la fois lors du design et du développement de site web — j'y pense comme étant un groupe d’éléments liés les uns aux autres, qui sont très proches les uns aux autres. Pour moi, des exemples de modules sont un groupe de liens, une image de héros et du texte ou un titre qui vient se superposer ; tout ce qui peut être regroupé, est un motif répétable ou module autonome.

Cependant, un groupe élément est un groupe d’éléments dans votre design, qui n’ont pas nécessairement à être proches l’un de l’autre. Par exemple, un groupe élément pourrait être à la fois vos éléments d’en-tête (logo et navigation liens, par exemple) ainsi que vos éléments de pied de page (peut-être une autre série de liens, aux côtés d’une notice de copyright). Ce sont des groupes élément et vous pouvez ensuite aligner ensemble ces groupes élément dans votre design. Bien que l’en-tête et le pied de page peuvent ne pas apparaître sur le même espace à l’écran, ces utilisations subtiles de l’alignement permettront un design plus fort et plus attrayant visuellement, et beaucoup plus cohérent.

D’autres exemples de groupes élément sont simplement à la fois le texte et les images de votre texte principal sur une page, ou même peuvent être aussi simples qu’un ensemble de liens de navigation ou d’éléments. Par exemple, dans une navigation plus complexe, vous pouvez avoir les liens de texte principal, mais aussi un « sous-titre » au lien plus petit. En plus de cela, vous pourriez avoir un icone au-dessus ou en dessous du texte du lien. Alors que ce sont toutes des pièces individuelles et celles des trois morceaux composent un lien, tous ces liens individuels peuvent former un module de navigation complexe, mais peuvent également être mis en place comme un groupe élément, vous pouvez l'aligner ensuite avec d’autres groupes dans le design.


Devoirs

Maintenant vous savez tout sur l’alignement dans vos créations (et avec vos grilles) je veux que vous commenciez à regarder vos design en cherchant à comprendre comment tous les éléments s’alignent. Essayez de regrouper les différents éléments, groupes élément et cherchez à aligner le texte et les images dans vos créations.

Voyez ce que vous pouvez faire pour créer un meilleur design grâce à l'alignement correct de tous les éléments dans votre design. En utilisant le système de grille de votre dernier devoir, travaillez à aligner tous les éléments dans votre design en utilisant les conseils donnés dans le post d’aujourd'hui.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.