Guide du concepteur sur la ponctuation visuelle
La ponctuation est plus que des périodes et des points d'exclamation. En termes de conception, la ponctuation peut être tout ce qui provoque l'arrêt ou la pause d'un lecteur ou d'un utilisateur. Cela peut se produire lors de la lecture de texte ou lorsque l'œil se déplace d'un élément à un autre. Ces éléments de ponctuation visuelle sont partout et sont des éléments essentiels de tout concept de design.
Les éléments clés de la ponctuation visuelle comprennent les signes de ponctuation lisibles courants ainsi que l'espace, les lignes, les règles, les icônes et la couleur.
Explorez Envato Elements
Qu'est-ce que la ponctuation visuelle?
La ponctuation visuelle se présente sous deux formes principales - des marques qui vous obligent à vous arrêter dans le processus de lecture ou des éléments qui créent une pause lorsque vous regardez d'un objet à un autre. Les deux types de ponctuation sont également importants, et bien que la ponctuation contextuelle soit assez connue et courante, tout le monde ne pense pas souvent à d'autres indices visuels.
La ponctuation visuelle est importante car elle peut inciter les gens à regarder un dessin et éviter la fatigue lors de la lecture ou du regard d'un dessin. Les pauses naturelles font partie de la nature humaine et en les concevant, vous créez des arrêts qui se produisent quand et où vous le souhaitez. L'aide ajoute du contexte et un flux visuel.
Cela rend également votre conception plus facile à digérer pour un utilisateur / lecteur. Lorsque le «travail» est fait pour eux, la visualisation d'une conception peut être plus facile et nécessiter moins d'efforts ou de réflexion. (Et nous savons tous que dans le monde occupé d'aujourd'hui, il est préférable de faciliter les choses pour ceux qui regardent nos conceptions.)
En un mot, la ponctuation visuelle est tout ce que le concepteur utilise pour séparer, grouper ou mettre en valeur des éléments, des photos ou des mots dans un design. Intentionnelle ou non, la ponctuation visuelle amènera quelqu'un à s'arrêter et à regarder une certaine partie de la toile.
Ponctuation lisible (texte)
Le type de ponctuation le plus connu est… eh bien… la ponctuation réelle. Toutes les marques qui apparaissent dans le texte et qui vous obligent à vous arrêter pendant la lecture sont considérées comme de la ponctuation.
Les symboles courants incluent le point, le point d'interrogation, le point d'exclamation, l'astérisque, le tiret cadratin, le point-virgule, les crochets, les parenthèses, les points de suspension, les guillemets, les deux points, le tiret, l'apostrophe et la virgule. Les marques peuvent être utilisées dans le contexte de l'écriture ou de la formation de phrases, mais sont souvent utilisées à des fins visuelles également.
Parfois, ces personnages seront utilisés dans le cadre d'un logo ou dans l'art d'un design pour transmettre un sens ou une emphase. En raison de leur nature commune et de leurs significations souvent bien comprises, ces symboles sont faciles à utiliser de diverses manières.
Espace
L'utilisation de l'espace comme forme de ponctuation visuelle provient également du texte et de l'écriture. L'espace est utilisé pour ne pas le début d'un nouveau paragraphe dans un bloc de texte, ou même le début d'un nouveau chapitre dans un livre. L'espace peut fonctionner d'une manière distincte comme une période ou d'une manière plus fluide comme un tiret cadratin.
L'espace est également utilisé pour créer des démarrages et des arrêts visuels et créer une direction pour que vos yeux voyagent. La quantité d'espace utilisée entre les éléments peut représenter la distance ou la distance entre eux par rapport à l'autre contenu. L'espace peut également créer de l'espace pour que vous puissiez vous concentrer sur plusieurs éléments indépendamment.
Regardez l'image ci-dessus de United Strands. Il y a beaucoup d'espace entre la pile de chemises et le texte simple. L'espace donne à l'utilisateur le temps d'examiner chaque élément et de le digérer seul, puis en tant qu'unité. L'espace sert de rappel pour ralentir et de moyen de connecter les éléments à l'écran.
L'espace produit un résultat différent dans la page Nice and Serious ci-dessus. En raison de l'espacement constant entre quatre éléments similaires mais différents dans les cercles rouges, vous regroupez naturellement les éléments en une seule image. L'espace entre chaque élément est plutôt étroit et cohérent d'un élément à l'autre, ce qui les fait «se sentir» comme un seul élément.
Lignes et règles
Les lignes sont des règles qui créent une séparation distincte entre les objets. (Vous pouvez également obtenir le même effet avec des éléments de boxe.) La ligne définit où se termine une chose et où commence une autre; c'est un peu comme un point à la fin de chaque phrase d'un paragraphe.
Les lignes sont souvent utilisées en conjonction avec l'espace, mais ce n'est pas toujours le cas. Les lignes qui sont rapprochées ou qui manquent d'espacement peuvent contribuer à une sensation de tiraillement ou peuvent parfois relier des articles à travers cette séparation.
Dans les exemples ci-dessus, les lignes sont utilisées de deux manières. Sur la page Carré, plusieurs lignes sont utilisées pour former un bouton imaginaire ou «fantôme». Les lignes définissent la partie cliquable de la page en dehors du reste. Sur la page Agra Culture Kitchen & Press, les lignes sont utilisées de deux façons: pour garder l'œil en mouvement d'un élément à l'autre et pour attirer l'attention sur un contenu spécifique d'importance, comme le logo, le texte principal et le bouton d'appel à l'action sur la page d'accueil .
Icônes et éléments de conception
Bien que l'utilisation d'icônes et d'autres éléments (et d'outils d'interface utilisateur pour les projets numériques) soit le résultat de la fonction, ils fournissent également une direction de conception. Ces outils indiquent aux utilisateurs où aller dans la conception, comment interagir avec le contenu et aident à façonner les actions globales qu'un utilisateur entreprendra lorsqu'il interagira avec un élément spécifique.
Dans les projets imprimés, par exemple, les logos Facebook et Twitter sont souvent utilisés pour indiquer aux utilisateurs que les entreprises ont des pages qu'elles peuvent aimer ou suivre. Les icônes plutôt que les URL plus longues ou plus difficiles deviennent la norme. Ces mêmes icônes sont souvent utilisées dans les projets numériques comme lien cliquable vers ces sites ou qui amènent les utilisateurs à partager des options au sein de ces sites de médias sociaux.
Les icônes et les éléments de conception peuvent également avoir une autre utilité. Ils servent de repères visuels dans le processus de narration et peuvent être utilisés pour attirer les lecteurs à travers le texte ou d'un élément à l'autre sur la toile. (Pensez-y presque comme des virgules, qui vous permettent de faire une pause, mais pas de vous arrêter sur le chemin.) Octopus, par exemple, utilise de grandes icônes comme liens dans les cases colorées et comme éléments de navigation visuelle dans les puces ci-dessous. Openbox utilise des icônes de la même manière, en variant les conceptions de triangles pour aider les utilisateurs à parcourir le contenu du site. (Le + ou le x, selon l'orientation, fait la même chose.) Un autre élément à noter ici sont les points sous le texte principal, qui agissent comme une règle et un outil de navigation.
Couleur
La couleur peut ajouter une touche amusante lorsque vous cherchez à créer une séparation des éléments dans la conception. Et il existe de nombreuses façons d'y parvenir. De la couleur par rapport au noir et blanc aux contrastes nets en passant par les schémas de couleurs thématiques ou les panneaux de couleurs, l'utilisation de teintes variables est un moyen facile d'attirer l'attention sur des parties spécifiques du design de manière intéressante.
Les exemples ci-dessus montrent deux façons très différentes d'utiliser la couleur pour créer une pause. Sur la page P'unk Ave, une icône rouge vif nage dans l'espace sur un fond monochrome. Il génère un impact visuel immédiat et une connexion. (Considérez cela comme un point d'exclamation.)
La page Australie-Méridionale utilise la couleur de manière très différente. Chaque section de contenu différente (et écran de coordination dans le cadre de parallaxe) utilise un écran de couleur différente. Cela vous aide à savoir quelle section vous lisez et quel autre contenu est à venir. Ces «points-virgules» visuels vous donnent le temps de terminer une pensée tout en passant à la suivante.
Conclusion
La ponctuation visuelle est partout. Ce n'est peut-être pas aussi évident au premier abord que les petits caractères du même nom dans le texte, mais c'est tout aussi important. La ponctuation visuelle aide à créer un flux, une direction et empêche la fatigue du lecteur (et de l'utilisateur).
Il aide à créer l'harmonie et l'harmonie visuelle. La plus grande question n'est pas de savoir si vous l'utilisez, mais si vous y pensez dans le processus de conception. Avez-vous des signes de ponctuation visuels, ou les planifiez-vous? Nous aimerions en savoir plus sur votre processus de conception dans les commentaires.
