Si vous déménagiez dans un autre pays (où l’on ne parle pas la même langue que vous), l’une des premières choses que vous feriez probablement serait de commencer à apprendre la langue. Vous pourriez même commencer bien avant de déménager pour vous préparer à pouvoir communiquer avec les personnes que vous appellerez bientôt vos voisins.

La communication est une partie essentielle de la vie et, en tant que concepteurs web, c’est ce que nous faisons avec chaque nouvelle conception.
Que se passe-t-il lorsque les mots ne suffisent pas ? Si vous voulez que quelqu’un regarde dans une certaine direction, vous pourriez pointer dans cette direction. Nous avons tous développé une grammaire pour communiquer avec des gestes physiques et nous communiquons autant, sinon plus, avec le langage corporel qu’avec le langage verbal.

Les webdesigners et les graphistes communiquent visuellement. Par exemple choisir un schéma de couleurs avec un bleu foncé comme dominant envoie un message très différent que si la couleur dominante est le rose vif. La couleur est l’une des façons dont nous communiquons visuellement. C’est l’un des blocs de construction de la grammaire visuelle, qui sont généralement définis pour inclure :

• lignes
• formes
• color
• texture
• valeur
• espace
• forme/volume/masse

Nous avons parlé de la théorie des couleurs et de leur signification par le passé, ainsi que de l’utilisation des espaces blancs dans le design. Aujourd’hui, je voulais me pencher sur les lignes. Quels types de lignes sont à notre disposition ? Que communiquent les différentes lignes ? La prochaine fois, nous parlerons des formes et nous poserons certaines des mêmes questions à leur sujet.

La grammaire des lignes

Une ligne est un point sorti pour une promenade.
-Paul Klee

Une ligne relie deux points. C’est aussi le chemin fait par un point en mouvement. Les lignes peuvent être épaisses ou fines. Elles peuvent être longues ou courtes. Elles peuvent être verticales, horizontales ou diagonales. Elles peuvent être pleines, pointillées ou en pointillés. Les lignes peuvent être courbes ou droites, ou encore combiner les deux. Il y a une variété infinie dans ce que nous considérons comme une ligne.

Les lignes peuvent être littérales ou implicites. Dessinez une série de 3, 4 ou 5 points et votre esprit remplira la ligne qui les sépare.

Chacune des différentes façons dont nous dessinons ou représentons une ligne lui donne des caractéristiques uniques. Les lignes épaisses transmettent un sens différent des lignes fines. Des lignes courbes envoient un message différent de celui d’une ligne droite nette.

Types de lignes

Il existe plusieurs types de lignes définies par leur utilisation.

• Les lignes de contour sont utilisées pour définir des bords. Elles créent des frontières autour ou à l’intérieur d’un objet. La plupart des lignes que vous rencontrez sont des lignes de contour. Dans la conception web, il peut s’agir des bordures que vous ajoutez autour d’un objet ou d’un groupe d’objets
• Les lignes de division peuvent également définir des bords, mais ce qui les distingue des lignes de contour est qu’elles divisent l’espace. Les lignes entre les colonnes de texte sont des lignes de division, tout comme les lignes séparant les éléments de menu.
• Les lignes de décoration sont utilisées pour embellir un objet. Les hachures sont un exemple d’utilisation des lignes de décoration pour ajouter de l’ombre et de la forme à un objet. La ligne sous le texte aimé est une ligne de décoration, tout comme les lignes utilisées pour créer une image de fond florale
• Les lignes de geste sont des lignes continues rapides et grossières utilisées pour capturer la forme et le mouvement. Elles sont généralement utilisées pour étudier la forme et le mouvement de la forme humaine. Vous n’utiliserez probablement pas de lignes de geste (d’après la définition technique) dans un design web, mais vous pourriez certainement créer des motifs de lignes pour signifier le mouvement ou construire une forme

La signification des différents types de lignes

Comme je l’ai mentionné ci-dessus, il y a beaucoup de façons différentes dont nous pouvons décrire une ligne donnée et chacune donne à une ligne des caractéristiques uniques. Que signifient ces caractéristiques et que communiquent-elles ? (.doc)

Les lignes fines sont fragiles. Elles semblent faciles à casser ou à renverser. Elles suggèrent la fragilité et transmettent une qualité élégante. Elles sont délicates et dégagent un air éphémère.

Les lignes épaisses, en revanche, semblent difficiles à briser. Elles suggèrent la force et donnent de l’importance aux éléments proches. Les lignes épaisses sont audacieuses et font une déclaration.

Les lignes horizontales sont parallèles à l’horizon (d’où leur nom). Elles donnent l’impression d’être couchées, au repos, endormies. Elles suggèrent le calme et la tranquillité, un confort détendu.

Les lignes horizontales ne peuvent pas tomber. Elles accentuent la largeur. Elles sont stables et sûres. Elles véhiculent une absence de conflit, une paix reposante. Les lignes horizontales par leur connexion à l’horizon sont associées aux choses et à l’idée de la terre.

Les lignes verticales sont perpendiculaires à l’horizon. Elles sont remplies d’énergie potentielle qui pourrait être libérée si elles venaient à tomber. Les lignes verticales sont fortes et rigides. Elles peuvent suggérer la stabilité, surtout lorsqu’elles sont plus épaisses. Les lignes verticales accentuent la hauteur et transmettent une absence de mouvement, ce qui est généralement perçu comme horizontal.

Elles s’étendent de la terre aux cieux et sont souvent liées à des sentiments religieux. Leur hauteur et leur formalité peuvent donner une impression de dignité.

Les lignes diagonales sont déséquilibrées. Elles sont remplies d’une énergie agitée et incontrôlée. Elles peuvent sembler monter ou descendre et véhiculer l’action et le mouvement. Leur énergie cinétique et leur mouvement apparent créent une tension et une excitation. Les lignes diagonales sont plus dramatiques que les lignes horizontales ou verticales.

Les lignes diagonales peuvent également sembler solides et immobiles si elles soutiennent quelque chose ou sont au repos contre une ligne ou un plan vertical.

Les lignes courbes sont plus douces que les lignes droites. Elles balaient et tournent gracieusement entre les points d’extrémité. Elles sont moins définies et prévisibles que les lignes droites. Elles se courbent, elles changent de direction. Les lignes courbes expriment un mouvement fluide. Elles peuvent être calmes ou dynamiques, selon leur degré de courbure. Moins la courbe est active, plus le sentiment est calme.

Les lignes en zigzag sont une combinaison de lignes diagonales qui se connectent en des points. Elles reprennent les caractéristiques dynamiques et très énergétiques des lignes diagonales. Elles créent de l’excitation et un mouvement intense. Elles véhiculent la confusion et la nervosité car elles changent de direction rapidement et fréquemment. Elles peuvent impliquer le danger et la destruction car elles se décomposent.

Les lignes longues et parfaitement régulières semblent artificielles. La nature n’est pas parfaitement droite. Lorsque l’on ajoute des variations à une ligne, elle devient moins artificielle et plus naturelle.

Les lignes en pointillés et en tirets sont des lignes implicites. Elles sont incomplètes et permettent aux objets de passer à travers elles. Une ligne pointillée ou en pointillés épaisse et verticale reste une ligne forte, bien qu’elle ne soit pas aussi forte si la ligne était complètement pleine.

Motifs de lignes

Une série de lignes forme un motif. Ces motifs de lignes transmettent un sens en plus de celui des lignes individuelles.

Les lignes parallèles de largeur et d’espacement uniformes créent un effet statique et ordonné. Peu importe que les lignes soient horizontales, verticales ou diagonales. Même dans les lignes courbes, la répétition crée un ordre, toutefois plus dynamique que les lignes droites. Pas trop comment la série de lignes courbes bien que la plupart du temps statique, crée encore un sentiment de mouvement.

En variant l’espacement entre des lignes d’épaisseur égale, nous pouvons transmettre le mouvement. Lorsque l’espacement entre les lignes de même épaisseur est aléatoire, nous obtenons un effet dynamique avec peu d’ordre. Lorsque nous faisons varier à la fois l’espacement et l’épaisseur, l’effet devient plus chaotique et désordonné.

Des motifs de lignes peuvent être construits pour créer des ombres et des textures. La valeur peut être contrôlée par l’utilisation de la ligne. Les lignes peuvent être combinées pour former des formes. Les lignes peuvent être composées de caractères ou de n’importe quelle forme placée l’une après l’autre.

Comment utiliser les lignes dans la conception Web

Nous utilisons les lignes pour organiser, connecter et séparer les informations et les éléments de conception. Vous pouvez utiliser les lignes pour transmettre le mouvement et créer une texture. Les lignes mettent l’accent et définissent la forme. Elles peuvent être utilisées pour transmettre une humeur et une émotion.

Pensez à n’importe quel site Web et à tous les endroits où les lignes sont ou pourraient être utilisées. Lorsque vous alignez les éléments d’un design, vous créez une ligne implicite qui organise et relie ces éléments. Vous pouvez souligner davantage cette relation avec une ligne réelle.

Vous ajoutez des bordures autour de divers éléments de votre conception pour les regrouper et les séparer clairement des autres éléments de la page.

Les lignes sont utilisées pour diviser l’en-tête du contenu et le contenu du pied de page. Elles sont utilisées pour diviser la page en colonnes et en rangées d’informations. Les lignes de la grille pourraient même être la colle structurelle qui maintient l’ensemble de votre design.

Le design contrôle l’espace et les lignes sont souvent utilisées pour définir cet espace. Nous pouvons utiliser des lignes réelles ou implicites en combinaison avec les principes de gestalt de continuité, de connexité uniforme, de proximité, de parallélisme, de région commune et même de fermeture.

Résumé

Les lignes sont un élément essentiel de notre vocabulaire visuel. Combinées avec les formes, la couleur, la valeur, la texture, l’espace et la forme, elles nous donnent une grammaire visuelle que nous pouvons utiliser pour communiquer.

Elles semblent simples. Vous n’aviez pas besoin que je vous dise ce qu’est une ligne lorsque vous avez commencé à lire ce billet et pourtant nous voici quelque 2 000 et quelques mots plus tard et nous avons à peine effleuré la surface de ce que les lignes peuvent faire. Si nous le voulions, les lignes pourraient créer la surface et représenter l’égratignure.

Quelque chose d’aussi simple qu’une ligne peut avoir une combinaison ou une variété infinie et à travers cette variété transmettre différentes significations, concepts, thèmes.

En outre, lorsque nous combinons les lignes en motifs, nous pouvons transmettre des informations et des significations supplémentaires. nous pouvons utiliser les lignes pour créer des textures et des formes, ce qui nous amène au prochain post.

La prochaine fois, nous continuerons à construire notre grammaire visuelle avec une discussion sur les formes.

Téléchargez un échantillon gratuit de mon livre, Design Fundamentals.