Améliorer ses supports avec le design « CRAP »


Ce billet, publié sur un blog de communicant, serait probablement considéré comme inutile ou simpliste. Mais, étant lus principalement par des managers, des organisateurs ou des informaticiens, nous considérons qu'il a ici sa place. Il vous concernera notamment si vous êtes amenés à produire du contenu pour diffuser vos idées. Il vous intéressera surtout si vous aimeriez améliorer la lisibilité de vos supports.

Le design, c'est pas que pour les designers

C'est à la suite d'une remarque en séance de validation sur la lisibilité de documents de spécifications techniques, que nous avons commencé à nous rappeler de ce que, communicants, nous faisions en terme de design. La dichotomie outils de communication / documents bureautique, qui sous-entend que le travail graphique demandé sur un support de communication (plaquette, rapport annuel, site Internet institutionnel) est superflu sur un document Word ou PowerPoint, ne se justifie que par le coût. Résultat, quand on parle de mise en page sous Word, on se RETROUVE la plupart du temps avec un usage abusif du gras, de l'italique, des couleurs et

des

sauts

de

paragraphe.

Or, ces documents sont tout autant des supports de communication que ceux imprimés sur du beau papier couché et disposés en éventail sur la table dans la salle d'attente de l'étage de la direction. Pourquoi ne pas essayer de leur appliquer les principes de base du design ?

Si l'on définit le design comme l'esthétisme au service de l'utilisabilité, nous sommes en effet tous des designers. Que ce soit pour produire un support de présentation, un texte, un site Web, une affiche, ou pour concevoir une interface utilisateur, nous avons besoin de notions de design. Mais nous manquons de formation dans ce domaine. Nous sommes capables de dire si quelque chose nous plaît visuellement ou pas, mais sans vraiment pouvoir dire pourquoi :  nous manquons de capacité critique, de connaissance technique en design. Cette lacune est un véritable handicap, car toute notre communication gagnerait en efficacité si avions ces notions basiques de design.

CRAP : l'appliquer c'est bien, le reconnaître c'est mieux

Design CRAPLes principes de base du design ont été synthétisés dans l'excellent livre de R. Williams, The Non-Designer's Design Book que tous les non-designers devraient lire : contraste, répétition, alignement et proximité.

Ces éléments sont faciles à mémoriser, mais pas forcément évidents à appliquer. En effet, le design ne permet pas l'à-peu-près : un support est conçu de façon réfléchie dans son intégralité, ou pas du tout. Il suffit d'une modification bâclée de dernière minute pour mettre en vrac le design le plus réfléchi, le plus soigné. D'où la crainte de tous les graphistes de la modification de dernière minute, du sticker à apposer sur une couverture, de la mention légale à rajouter au dernier moment.

Il faut donc appliquer ces principes sur un cas concret. Il s'agit ici d'une diapo, extraite d'un support PowerPoint que nous avions réalisé pour présenter une adaptation simplifiée du principe d'affinage en bacs proposé par Claude Aubry sur son blog et dans son livre.

CRAP ExempleCet exemple n'est pas parfait, aucun design ne l'est et celui-ci pas plus, et probablement moins, qu'un autre. Mais il montre ce qu'on peut faire avec un outil bureautique et la connaissance de quelques principes de base, accessibles à tous. Ou plutôt, la reconnaissance de ces principes. Car en design, une fois que l'on a bien les principes en tête, l'apprentissage consiste à les retrouver sur tous ce qu'on a sous les yeux dans le courant de la journée : journaux, sites web, documents, prospectus, affiches... Il faut apprendre à les reconnaître sur un design qui plaît, et détecter leur absence sur un moins heureux. Il devient ensuite facile de les appliquer sur ses propres supports.

Contraste

CRAP ContrasteLe contraste consiste à différencier les différents éléments d'un support (page Word, diapo PowerPoint, page Web, ou quoi que ce soit d'autre) de façon très marquée : taille, couleur, forme des objets. Il ne faut pas que l'on puisse confondre les objets, ou glisser de l'un à l'autre sans remarquer qu'il y a césure logique entre eux. La plupart du temps, les documents réalisés par des "non-designers" pêchent par excès de timidité en matière de contraste.

Sur l'exemple ci-contre, les deux blocs d'éléments contrastent entre eux par leur taille, leur couleur et leur police (Franklin pour l'élément du haut, Bauhaus pour ceux du bas). Mais ils contrastent également avec le fond.

Répétition

CRAP RepetitionLa répétition, appelée aussi cohérence ou consistance, est l'idée de répéter les mêmes principes de maquette sur tout le support, afin d'améliorer la lisibilité par la régularité. Par exemple, sur un document Word, cela consiste à mettre tous les titres de niveau 1 dans le même format. Ce conseil est facile à suivre pour les plus hauts niveaux de titre, il est très vite moins bien respecté pour les aspects de corps de texte comme les listes à puces, qui se balladent souvent à plusieurs niveaux de tabulation.

Pour la répétition, le meilleur ami du non-designer est le copier/coller : de la sorte, on est assuré de répéter les mêmes principes, sur une page ou sur une succession de pages. Sur la diapo en exemple, on peut voir la façon dont les éléments du bas se répondent, dans leur forme et leur disposition. Pour cela, nous avons créé une forme, nous l'avons copié et collé deux fois, puis nous avons modifié légèrement les deux couleurs. Comme nous ne voulions pas de contraste, puisque tous appartiennent à la même "famille", nous avons choisi un bleu, un vert et un jaune.

Alignement

CRAP AlignerL'alignement est sûrement le principe le plus facile à repérer, surtout quand il n'est pas respecté. Plus exactement, surtout quand il est presque respecté. Il vaut mieux pas d'alignement du tout, qu'un alignement presque parfait. L'oeil accrochera plus sur un léger décalage qu'une disposition fantaisiste. L'alignement concerne donc TOUS les objets d'un support, mais il est possible d'aligner selon des principes différents. Pour bien aligner, il ne faut pas hésiter à sortir des textes centrés ou justifiés, qui créent une impression de monotonie et de symétrie artificielle.

Sur l'exemple, on peut voir que les blocs du haut et du bas sont alignés sur leur milieu, et disposés à égale distance de l'axe horizontal de la diapositive. Ils ont été placé résolument sur un côté pour s'aligner grossièrement sur la grille du nombre d'or appliqué aux images. Pour réussir cela dans un outil bureautique, rien de plus facile : les règles d'alignement de texte, d'alignement de blocs, et les repères vous permettront en un tour de main de produire des documents à l'aspect léché sans y avoir passé plus de quelques minutes.

Proximité

CRAP ProximiteEnfin, le dernier principe, le plus simple, découle presque des autres : il faut regrouper les éléments qui se parlent entre eux. D'où la proximité des bacs en bas de la diapo, et la relative proximité des deux éléments entre eux. Si vous avez appliqué les trois autres principes, il est en fait presque impossible de ne pas respecter celui-ci. Et si en l'appliquant vous vous retrouvez avec de l'espace, tant mieux. Le vide crée une respiration, permet à l'oeil de se reposer, et d'accrocher plus facilement les éléments que vous avez choisi de mettre en valeur. Quand le design est conçu en comité (une horreur, mais il est souvent difficile d'y échapper), il est très dur d'expliquer que le vide n'est pas un gaspillage de place. C'est même presque impossible quand le support doit être imprimé à de nombreux exemplaires, et que tasser le texte paraît être une bonne idée pour réduire les coûts. Mais les graphistes et directeurs artistiques sont mieux armés que nous pour défendre ce point de vue, et puisque l'on parle d'économie, abordons le cinquième principe.

Economie (oui, ça fait CRAPE)

CRAP est un moyen mnémotechnique pour retenir des principes de base de design graphique, mais le connaître ne vous mettra pas à égalité avec un dipômé en arts décos. C'est un outil pédagogique, et ces principes auraient pu être présentés ou résumés d'une autre façon. On pourrait également choisir d'en ajouter, comme vous aurez certainement envie de le faire si vous les appliquer régulièrement.

Un cinquième principe pourrait être l'économie, ou la contrainte : essayer de fonctionner avec le moins d'éléments graphiques possibles. Cette idée de se restreindre est illustrée, entre autres, par la règle des 5 Points de Marissa Mayer :

"This page is too busy. What you need to do is look at every font on the page, every font size. And every time you see a new color or a new font size, you add up a point. I want this page below five points."

Sur notre exemple, l'utilisation de couleurs différentes pour les trois bacs est coûteuse, puisque l'on a : 2 polices (Bauhaus et Franklin : 2 points), 2 tailles (2 points), 4 couleurs (sans compter le fond : 4 points). Mais c'est un choix assumé, pour différencier les bacs entre eux, et cela montre bien que ces principes, dès lors qu'ils sont connus, peuvent aussi être ignorés. L'approche esthétique se nourrit d'expérience : n'hésitez pas à aller faire un tour sur Slideshare, un excellent moyen de voir la mise en pratique du CRAP sur des slideshows; mais prenez également le temps d'aller au musée, dans des expos, ou de regarder des livres d'art. Votre regard critique s'en trouvera amélioré, et vous trouverez plus facilement le design qui fonctionne le mieux pour votre support.

Contactez-nous

42 rue de Maubeuge
75009 Paris

Suivez-nous

Tous textes sous licence Creatice Commons CC-BY - Mentions légales Licence Creative Commons