Chut ! Ne partagez pas ce secret d'initié sur les principes de conception CRAP

L'utilisation des principes de conception CRAP est un moyen incroyable de créer une conception visuelle efficace.

« QUOI ? » vous avez tous dit, n'est-ce pas? Eh bien, c'était certainement une surprise pour vous si vous n'aviez jamais entendu parler de CRAP auparavant. Robin Patricia Williams, une formidable auteure américaine qui a écrit de nombreux livres sur l'informatique, a décrit un ensemble de principes de conception graphique dans son livre, The Non-Designer's InDesign Book. Elle l'appelait CRAP.

(Vous pouvez également lire une brève interview avec elle ici ).

Alors, qu'est-ce que le CRAP ? Pas celui que l'on connaît, bien sûr !

Eh bien, pour créer des designs efficaces et accrocheurs, nous devons être cohérents. La cohérence vient avec la mise en œuvre des bases et des principes fondamentaux qui sont toujours nécessaires. Ces bases sont les éléments essentiels que tout designer doit constamment prendre en compte.

En tant que graphiste, votre travail consiste à produire quelque chose qui hypnotise le spectateur d'une manière qu'il ne peut pas quitter le site Web. Les téléspectateurs doivent être collés à leurs sièges avec votre conception graphique captivante, et pour cela, vient CRAP.

CRAP est un acronyme qui signifie Contraste, Répétition, Alignement et Proximité.

1. Contraste

Le contraste est décrit comme « la juxtaposition d'éléments dissemblables (tels que la couleur, le ton ou l'émotion) dans une œuvre d'art". Le contraste est ce qui fait ressortir les éléments. Avant de vous lancer, il y a une astuce à considérer. Si vous utilisez trop souvent une fonction de contraste, vous réduisez simplement le contraste, vous ne l'augmentez pas. Pourquoi? Parce que le contraste signifie ce que cela signifie lorsque vous voulez que quelques éléments se démarquent. Si tout se démarque, rien ne se démarque ! En tant qu'élément important dans les principes de conception de merde, vous devez savoir comment bien l'utiliser. Alors, allons-y !

Couleur

Vous pouvez utiliser la différence de couleurs pour créer un contraste. Le World Wide Web Consortium (W3C) a créé des directives sur le contraste minimum requis entre le texte et son arrière-plan. Bien qu'un contraste élevé soit indispensable en matière de texte et d'arrière-plan, ce n'est pas le cas lorsque nous parlons de différents éléments. Avoir un contraste élevé entre différents éléments peut fatiguer les yeux des utilisateurs. Vous pouvez regarder une version en niveaux de gris de votre conception pour voir si un contraste optimal a été utilisé ou non.

En règle générale, l'utilisation de nuances de couleurs complémentaires qui ne créent pas de contraste élevé fatigant pour les yeux peut être une bonne pratique.

Taille

Les différences de taille des éléments, notamment lorsqu'il s'agit de texte, peuvent être une source de contraste. Garder la taille d'un élément beaucoup plus grande que les autres qui l'entourent le rendra accrocheur. Les boutons d'appel à l'action (CTA) peuvent également bénéficier de cette plus grande taille. Vos téléspectateurs les remarqueront davantage et ils vous aideront avec votre CRO. De plus, si vous avez besoin de plus d'aide avec vos stratégies CRO, consultez ce guide.

Forme

Avoir des formes différentes peut générer le contraste que vous recherchez. Vous pouvez voir efficacement le contraste de forme utilisé dans les infographies. L'utilisation de formes dissemblables les unes à côté des autres peut aider à engager l'esprit des lecteurs. L'ajout de coins arrondis aux formes quadrilatérales ou l'utilisation d'éléments carrés avec des éléments ronds et circulaires peuvent également être des exemples de contraste de forme.

Police de caractère

Nous pouvons classer les polices en différents groupes. Serif, Sans-serif, script, à espacement fixe et affichage sont les classifications de base dactylographiées. L'utilisation de différents groupes de polices peut créer un contraste pour le texte que nous voulons signifier. De plus, l'utilisation de différents poids de police (gras ou normal), styles de police (italique, opaque ou normal) et décorations de police (souligné, barré, etc.) peut faire passer votre jeu au niveau supérieur.

2. Répétition

En tant qu'êtres humains, nos esprits sont programmés selon des schémas de sympathie ; Nous les recherchons partout. Qu'est-ce qui crée des motifs ? Répétition! De plus, nous créons un sentiment d'identité lorsque nous rencontrons une répétition des choses. Pensez à un morceau de musique dont les thèmes principaux ne sont pas répétés. Vous vous sentiriez perdu.

Il se passe exactement la même chose dans la conception. Nous devons répéter les couleurs, les formes, les textures, les tailles et d'autres attributs dans notre conception pour la rendre cohérente et lui donner une sorte d'identité. En outre, les entreprises utilisent la répétition dans la conception pour renforcer la notoriété de la marque. Ils répètent un ensemble prédéfini de couleurs et de polices pour apporter de la cohérence à leurs différentes plates-formes et canaux.

La répétition dans la conception est un autre principe important dans les quatre principes de conception CRAP. L'utilisateur a besoin de se sentir en sécurité, pas perdu. Cela permet d'optimiser l'UX de votre site Web.

3. Alignement

L'alignement, en tant qu'autre facteur crucial dans les principes de conception CRAP, spécifie le positionnement d'un élément dans la conception. C'est ce qui donne de la cohésion et de l'ordre à un design. En termes d'éléments, vous pouvez les aligner en fonction de leurs bords ou de leurs centres. Cependant, les textes peuvent être alignés à gauche, à droite, au centre ou peuvent simplement être justifiés. Selon la langue de texte utilisée, les alignements gauche et droit, LTR ou RTL, sont les plus populaires. Nous pouvons utiliser l'alignement au centre pour de courtes périodes de texte (mais il est difficile à lire sur des textes plus longs). La justification est un bon choix lorsque la longueur de la ligne est longue, la taille de la police est petite et les mots sont plus courts (l'utiliser sur des lignes étroites composées de mots longs réduit la lisibilité).

Chaque dessin doit avoir des lignes verticales qui servent de guides d'alignement horizontaux. Le texte flottant partout sur la page ne fait que confondre votre spectateur. Vos téléspectateurs doivent simplement être en mesure de réaliser la relation entre chaque partie de la page.

4. Proximité

Enfin, la proximité est un autre principe qui joue un rôle essentiel dans la conception du CRAP. La proximité dans la conception stipule que nous devons mettre des éléments qui se rapportent les uns aux autres et qui sont étroitement associés les uns aux autres. C'est logique, n'est-ce pas ? Vous ne voulez pas rechercher un lien lié à l'article que vous lisez dans la barre de navigation, n'est-ce pas ? En outre, l'espacement régulier des éléments sur toute la page rend la conception plus difficile à suivre. Regroupez au maximum les éléments associés pour permettre à votre spectateur de trouver plus facilement les informations souhaitées.

La règle des 3 secondes

« Il ne faut que 3 secondes pour tomber amoureux. »

Ainsi, le dernier test que vous pouvez faire pour voir si votre design CRAP est impeccable est de vérifier s'il est efficace en 3 secondes. Vous pouvez le faire vous-même en faisant le vide dans votre esprit et en détournant le regard, puis en y revenant. Vous pouvez également demander leur avis à un ami ou à un parent après 3 secondes. Nous décidons si quelque chose nous attire et si nous voulons continuer ou non en seulement 3 secondes.

La relation

Nous ne devons pas utiliser ces principes isolément. La répétition et l'alignement fonctionnent ensemble pour fournir l'état « normal », qui vous permet de modifier la forme ou l'emplacement d'un morceau de texte pour générer un contraste. De plus, la répétition et la proximité fonctionnent ensemble pour produire des formats efficaces tels que des listes à puces – la répétition de la puce met l'accent sur la proximité des points.

Conclusion

Oscar Wilde, dans la préface de son livre le plus célèbre, « The Picture of Dorian Gray », déclare : « L'artiste est le créateur de belles choses. Révéler l'art et cacher l'artiste est le but de l'art.

Enfin, l'objectif est que l'effort que vous mettez dans la création d'un document disparaisse, devienne invisible, permettant à votre lecteur ou spectateur un accès illimité aux idées que vous essayez de communiquer - à la fois directement dans votre texte et de manière très subtile, via votre choix de composants de conception. À cet égard, c'est un travail ingrat car peu de gens remarqueront (ou même remarqueront) la qualité de la conception - mais ils remarqueront et agiront sur le message. N'est-ce pas de cela qu'il s'agit ?