Guide du concepteur sur la ponctuation visuelle

La ponctuation est plus que des points et des points d'exclamation. En termes de conception, la ponctuation peut être tout ce qui pousse le lecteur ou l'utilisateur à s'arrêter ou à faire une pause. Cela peut arriver lors de la lecture d'un texte ou lorsque l'œil passe d'un élément à un autre. Ces éléments de ponctuation visuelle sont omniprésents et constituent des éléments essentiels de tout concept de design.

Les éléments clés de la ponctuation visuelle comprennent les signes de ponctuation lisibles, l’espace, les lignes, les règles, les icônes et les couleurs.

Qu'est-ce que la ponctuation visuelle?

La ponctuation visuelle se présente sous deux formes principales: les marques qui vous empêchent de lire ou les éléments qui créent une pause lorsque vous regardez d'un objet à un autre. Les deux types de ponctuation sont d'égale importance et, bien que la ponctuation contextuelle soit assez connue et commune, tout le monde ne pense pas souvent à d'autres indices visuels.

La ponctuation visuelle est importante car elle peut permettre aux gens de regarder un dessin ou modèle et évite la fatigue en lisant ou en regardant un dessin. Les pauses naturelles font partie de la nature humaine et en les créant, vous créez des arrêts qui se produisent quand et où vous le souhaitez. Cela aide à ajouter du contexte et un flux visuel.

Cela facilite également la conception de votre conception pour un utilisateur / lecteur. Quand le? Travail? est fait pour eux, voir un dessin peut être plus facile et demander moins d’effort ou de réflexion. (Et nous savons tous que dans le monde occupé d'aujourd'hui, il est préférable de simplifier les choses pour ceux qui consultent nos modèles.)

En résumé, 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 dessin. Intentionnelle ou non, la ponctuation visuelle incitera quelqu'un à s'arrêter et à regarder une certaine partie de la toile.

Ponctuation lisible (texte)

Le type de ponctuation le plus connu est? bien? ponctuation réelle. Toutes les marques qui apparaissent dans le texte et qui vous empêchent de lire sont considérées comme des signes de ponctuation.

Les symboles communs incluent la période, le point d'interrogation, le point d'exclamation, l'astérisque, le tiret, le point-virgule, les crochets, les parenthèses, les points de suspension, les guillemets, les deux points, le trait d'union, 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 également souvent utilisées à des fins visuelles.

Parfois, ces caractères seront utilisés dans le cadre d’un logo ou dans l’art d’un dessin ou modèle pour transmettre un sens ou une importance. En raison de leur nature commune et de leurs significations souvent bien comprises, ces symboles sont faciles à utiliser de différentes manières.

Espace

L'utilisation de l'espace en tant que forme de ponctuation visuelle provient également du texte et de l'écriture. L'espace est utilisé pour ne pas commencer un nouveau paragraphe dans un bloc de texte, ni 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.

L’espace est également utilisé pour créer des départs et des arrêts visuels et pour donner à vos yeux une direction à suivre. La quantité d'espace utilisée entre les éléments peut représenter leur distance ou leur distance par rapport à l'autre contenu. L'espace peut également créer un 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 de regarder chaque élément et de le digérer lui-même, puis en tant qu'unité. L’espace sert de rappel pour ralentir et de connecter les éléments à l’écran.

Space apporte 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 rend? Sent? 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élimite l'endroit où une chose se termine et une autre commence; 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 proches les unes des autres ou manquant d'espacement peuvent contribuer à un sentiment de tension ou peuvent parfois relier des éléments de cette séparation.

Dans les exemples ci-dessus, les lignes sont utilisées de deux manières. Sur la page Square, plusieurs lignes sont utilisées pour former un imaginaire ou "fantôme". bouton. Les lignes distinguent la partie cliquable de la page. Sur la page Agra Culture Kitchen & Press, les lignes sont utilisées de deux manières: Pour que l'œil continue de se déplacer d'élément à l'autre et pour attirer l'attention sur un contenu important, tel que le logo, le texte principal et le bouton d'appel à l'action de la page d'accueil. .

Icônes et éléments de conception

Bien que l'utilisation d'icônes et d'autres éléments (et des outils d'interface utilisateur pour les projets numériques) résulte de la fonctionnalité, ils fournissent également une orientation de conception. Ces outils indiquent aux utilisateurs où aller dans la conception, comment interagir avec le contenu et aident à définir les actions globales qu'un utilisateur effectuera 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 en tant que lien cliquable vers ces sites ou permettant aux utilisateurs de partager des options au sein de ces sites de réseaux sociaux.

Les icônes et les éléments de conception peuvent également avoir d'autres utilisations. Ils servent de points de repère visuels dans le processus de narration et peuvent être utilisés pour attirer les lecteurs par le biais du texte ou d'un élément à un autre de la toile.(Pensez à eux presque comme des virgules, ce qui vous permet de faire une pause mais de ne pas arrêter de vous déplacer sur le chemin.) Octopus, par exemple, utilise de grandes icônes comme liens dans les cases colorées et comme éléments de navigation visuels dans les points en-dessous. Openbox utilise les icônes de la même manière, en modifiant la conception des 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 situés sous le texte principal, qui agissent comme un outil de règle et de navigation.

Couleur

La couleur peut ajouter une touche amusante lorsque vous souhaitez créer une séparation des éléments dans la conception. Et il y a beaucoup de façons de le faire. De la couleur au noir et blanc en passant par les contrastes marqués, en passant par les schémas de couleurs thématiques ou les panneaux de couleurs, l’utilisation de teintes variées est un moyen facile d’attirer l’attention sur des parties spécifiques du dessin de manière intéressante.

Les exemples ci-dessus montrent deux manières 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 arrière-plan monochrome. Il génère un impact visuel immédiat et une connexion. (Considérez cela comme un point d'exclamation.)

La page Australie du Sud utilise la couleur de manière très différente. Chaque section de contenu différente (et l'écran de coordination dans la structure de parallaxe) utilise un écran de couleur différent. Cela vous aide à savoir quelle section vous lisez et quel autre contenu est à venir. Ces visuels? Points-virgules? Donnez-vous le temps de finir une pensée en passant à la suivante.

Conclusion

La ponctuation visuelle est partout. Cela n’apparaît peut-être pas aussi évident au début 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 évite la fatigue du lecteur (et de l'utilisateur).

Cela aide à créer une harmonie et une harmonie visuelle. La grande question n'est pas de savoir si vous l'utilisez, mais si vous y réfléchissez 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.