Les fondamentaux pour concevoir des contenus au look professionnel Aujourd’hui, de même qu’on est tous des formateurs (pensez aux gazillions de tutoriels qu’on trouve sur internet), on est tous des designers. On a maintenant sous la main (souvent même gratuitement) des outils intuitifs pour publier du contenu de façon professionnelle. Mais, audelà de la simplicité d’utilisation de ces outils, on ne maîtrise pas forcément les fondamentaux du design pour y parvenir. Il n’est pas question ici de rivaliser avec les graphistes professionnels, mais simplement de connaître les règles de base qui apporteront un plus à votre contenu. Je me focalise ici sur la question des pages web, mais ces règles sont valables pour tous types de contenus : présentations PowerPoint, documents texte, etc. Pour faire court, l’essentiel de ce qu’il y a à savoir tient en quatre points :
● ● ● ●
Respecter quelques règles de base : le modèle CRAP Ne jamais déroger à la règle “Don’t make me think!” (Ne me faites pas chercher !) Savoir utiliser les images Savoir utiliser les couleurs
Vous constaterez peutêtre que ces règles vont parfois à l’encontre des idées reçues. Il vous faudra donc accepter de désapprendre. Précisons aussi que si les grands professionnels ou les artistes violent les règles (avec bonheur), le novice a tout intérêt à les suivre !
Sommaire 1. Les 4 principes de CRAP (ou CARP, si vous préférez) Contraste Répétition Alignement Proximité 2. Don’t make me think! Soyez évident Créez une hiérarchie visuelle... visible ! Ne réinventez pas la roue Evitez le bruit Soignez la navigation Faites tester ! 3. Les images A quoi sert l’image Quelles images choisir Où les trouver (sans finir en prison !) Résolution, Codage, formats... : Un peu de théorie Les cadrer correctement Les couleurs (Encore) un peu de théorie Des outils indispensables I. Nicot décembre 2012
1/10
Les fondamentaux pour concevoir des contenus au look professionnel 5. Eduquer son oeil
1. Les 4 principes de CRAP (ou CARP, si vous préférez) Contraste On peut jouer sur le contraste de multiples façons, à l’aide : ● De l’image ● Des couleurs ● De la typographie ● De la taille des éléments
Répétition Répétez certains aspects du design tout au long du site (de la page, de la présentation, etc.), à chaque fois que des éléments véhiculent un message similaire : même formatage des titres, même symbolique, même couleur, etc.
Alignement A retenir : ● Evitez les effets d’escalier ou de dents creuses ● Evitez le centrage (parce qu’il n’aligne sur rien ! Illisible à l’écran et peu esthétique) ● Evitez la justification (atroce à l’écran ou dans un document : effet de trous)
Proximité Ce qui va ensemble doit être groupé de façon évidente (un bon test : clignez des yeux pour voir si des blocs apparaissent).
Surtout, regardez maintenant des exemples pour bien comprendre : ●
4 Principles of Good Design : des exemples pour les 4 grands principes (si vous n’êtes pas à l’aise avec la langue du chat qui expire, pensez à utiliser Google Translate : il suffit de glisserdéposer l’adresse du site à traduire dans le champ pour obtenir une traduction (ça permet de comprendre le sens général)
●
Une présentation avec des “A faire / Ne pas faire”
●
Et une autre, dans le même esprit
●
Et même encore une autre : pensez à cliquer sur les liens exemples (à partir de la diapo 12) pour exercer votre oeil et repérer la bonne application du modèle CRAP sur les sites proposés
I. Nicot décembre 2012
2/10
Les fondamentaux pour concevoir des contenus au look professionnel Aller plus loin La bible absolue : le livre de Robin Williams (c’est elle qui a inventé le modèle CRAP, et elle écrit sur le design pour les “non designers”) : ● En anglais (édition 2008) ●
En français : à ma connaissance, il s’agit ici d’une édition datant de 2000, mais ça reste un investissement que vous ne regretterez pas !
I. Nicot décembre 2012
3/10
Les fondamentaux pour concevoir des contenus au look professionnel
2. Don’t make me think! Là encore, un ouvrage s’impose : Don’t make me think! (traduit en français sous le titre Zéro prise de tête) de Stephen Krug. Comme Robin Williams, il s’adresse aux nonprofessionnels (en bonus, son style est hilarant). En voici une critique en français, qui j’espère vous donnera envie de l’acheter !
A retenir Sachez qu’à l’écran vos pages sont parcourues plutôt que lues et concevezles en conséquence :
Soyez évident L’utilisateur ne doit pas se creuser la cervelle pour comprendre où il doit cliquer, etc. (mais ne dites pas “Cliquez ici...” !)
Créez une hiérarchie visuelle... visible ! Ne réinventez pas la roue Usez et abusez des conventions (un bouton doit ressembler à un bouton, un lien à un lien, etc.)
Evitez le bruit C’estàdire les surcharges visuelles ou de texte inutiles. Au plan rédactionnel : supprimez le blabla, les formules creuses, le style impersonnel. Préférez le style de la conversation (professionnelle, bien sûr)
Soignez la navigation Elle doit : donner des repères, indiquer où se trouve quoi, expliquer comment utiliser le site, donner confiance. Pour vous assurer que votre navigation est userfriendly, faites le test du coffre de voiture : imaginez qu’on vous a promené un certain temps dans le coffre d’une voiture et qu’on vous lâche sur une page. Pouvezvous répondre immédiatement aux questions suivantes : I. Nicot décembre 2012
4/10
Les fondamentaux pour concevoir des contenus au look professionnel ● ● ● ● ●
Quel est le nom du site ? Sur quelle page suisje ? Quelles sont les grandes catégories du site ? Quelles sont mes options de navigation à ce niveau ? Comment puisje rechercher ?
Faites tester ! Rappelezvous qu’il n’est jamais trop tôt pour faire tester votre site (un seul testeur très tôt vaut mieux que cinquante vers la fin) Lisez (en français) l’introduction du livre de Stephen Krug
I. Nicot décembre 2012
5/10
Les fondamentaux pour concevoir des contenus au look professionnel
3. Les images Si vous les choisissez bien, vos images renforceront votre message : elles permettent d’aller audelà de ce que peuvent les mots, elles provoqueront l’émotion, elles engageront le cerveau droit de votre cible, elles capteront son attention, elles aideront sa mémoire... A condition, redisonsle, de bien les choisir et de les utiliser correctement.
A quoi sert l’image Les spécialistes ont identifié jusqu’à 20 “rôles” de l’image. Voici les plus courants. Elle sert notamment : A décorer C’est l’usage le plus basique : il a peu d’intérêt : si l’on retire l’image, le message n’est pas altéré. Il ne faut pas en abuser, ou cela devient “du bruit” A donner le contexte Toujours basique, mais plus intéressant : elle permet d’ancrer un discours abstrait dans le concret. A fournir des exemples C’est le principe du “Show, don’t tell” (Ne racontez pas, montrez !). Ici l’image vient illustrer le texte et aider à sa compréhension. Si on la retire, le message est diminué. A faire des analogies Elles aident à la compréhension de nouveaux concepts en partant de concepts connus. Avec un peu de créativité, on peut trouver des analogies visuelles pour à peu près n’importe quoi !
Quelles images choisir ●
Surtout pas les cliparts : ceux qui sont gratuits sont usés jusqu’à la corde et carrément moches (regardez des sites professionnels : en voyezvous ?)
●
Les images trop “lisses” (professionnels souriants par exemple, qui sont autant de clichés)
Où les trouver (sans finir en prison !) Le respect du droit d’utilisation des images est extrêmement complexe. Faire le tour de la question est une tâche ambitieuse, qui n’a pas sa place ici. Voici simplement des pistes pour savoir l’essentiel et des sources pour en trouver. Légende : C’est pas comme si j’étais Walter White. C’est juste quelques cliparts. I. Nicot décembre 2012
6/10
Les fondamentaux pour concevoir des contenus au look professionnel
Des sources ●
Si vous n’avez pas le temps de lire ce qui suit, un conseil : servezvous notamment : ○ Chez Microsoft (qui a depuis quelques années des accords avec les grandes banques d’images). Tom Kuhlmann (rock star internationale du elearning) vous dit d’ailleurs tout sur les conditions du service et bien plus (en anglais, mais Google Traduction est votre ami) ○
Ou chez Flicker
●
Vous avez un peu plus de temps : Isabelle Dremeau vous aiguille vers des sites, avec deux diaporamas sur le sujet : ○ Partie 1 ○ Partie 2
●
En savoir plus : Thôt propose ces joursci un dossier exhaustif sur la photo numérique et notamment les banques d’images libres de droit et gratuites (attention, ça n’est pas forcément synonyme)
Résolution, Codage, formats... : Un peu de théorie Ne vous mettez pas martel en tête : parcourez ce site (en ligne depuis des années) proposé par le CRDP de Grenoble : il répondra clairement à vos questions.
En savoir plus La slideology (l’art de créer des présentations percutantes) vient aussi à votre secours avec ses bons conseils : Olivier Richard, par exemple, vous dit tout, notamment sur l’utilisation des images (incidemment, si la slideology vous intéresse, vous trouverez d’autres ressources ici et aussi ici).
Les cadrer correctement ● ● ●
10 conseils pour bien (re)cadrer vos images, un dossier de l’internaute.com S’entraîner au cadrage avec un jeu pédagogique (pas facile !) Des conseils pour réaliser votre trombinoscope
I. Nicot décembre 2012
7/10
Les fondamentaux pour concevoir des contenus au look professionnel
4. Les couleurs Elles jouent un rôle très important au plan des émotions et si, une fois de plus, il n’est pas question de devenir un expert, mieux vaut avoir des repères.
(Encore) un peu de théorie ●
Vous la connaissez sans doute déjà, au moins intuitivement, mais révisez la symbolique des couleurs avec cette animation bluffante (une fois lancée, je vous suggère de commencer votre visite par la porte du milieu : The Movies)
●
La roue des couleurs et les harmonies : ○ Ce diaporama de JeanFrançois Messier vous dit l’essentiel sur le cercle chromatique et les combinaisons de couleurs (analogues, complémentaires, triadiques, etc.)
●
○
Ne manquez pas l’article qui va avec (ciblé présentations, mais valable bien sûr dans tous les contextes)
○
Ou encore ce diaporama qui évoque aussi la symbolique des couleurs
Le codage des couleurs : ne vous obsédez pas làdessus. L’idée, c’est de savoir à quoi correspondent les acronymes et les mots obscurs comme code hexadécimal : vous trouverez de l’information sur le sile profilcouleur.com (très complet, mais technique)
Des outils indispensables Il existe pléthore d’outils pour travailler vos couleurs, dont beaucoup sont gratuits. Voici une petite sélection de mes indispensables : ●
Les outils pour créer des palettes de couleurs : ○ Kuler (jouer la démo en cliquant sur Explore) ○
●
Colour Scheme Designer : un outil en ligne (proposé par un artiste tchèque) pour obtenir, à partir d’une couleur, les couleurs contraires, complémentaires, etc. et voir l’effet produit sur une page de site (rapide topo ici sur l’utilisation)
Des color pickers : des pipettes à tremper dans une couleur pour en obtenir les valeurs RGB, RVB, code hexadécimal, etc. : ○ Pixie ○ ColorCop (regarder l’animation qui en montre l’utilisation)
En savoir plus ●
Un chapitre de l’ouvrage de Garr Reynolds, Presentation Design : Creating Harmony with Color (en anglais)
I. Nicot décembre 2012
8/10
Les fondamentaux pour concevoir des contenus au look professionnel
●
Voir comment Garr Rynolds se sert de Kuler
●
Le site de Janet Lynn. Il est en anglais, mais c’est surtout visuel : ne ratez pas les pages Color Wheel, Complimentary colors, Color Combinations
I. Nicot décembre 2012
9/10
Les fondamentaux pour concevoir des contenus au look professionnel
5. Eduquer son oeil C’est la meilleure façon d’apprendre ! Dorénavant, regardez les publications (multimédia ou papier) qui vous passent sous les yeux en prêtant attention à leur aspect visuel. Tout est source d’inspiration : les affiches dans la rue ou le métro, les journaux et les magazines que vous lisez, les sites web que vous visitez, les pubs ou les émissions de télévision, mais aussi les couleurs de la ville et de la nature. Certains, comme Frédéric Cavazza signalent régulièrement leurs sites “Coup de coeur” (faites une recherche dans Google avec la requête “fred cavazza coup coeur”). Pour finir, quelques mots de Steve Jobs, via Garr Rynolds : "Good artists copy, great artists steal." — Steve Jobs (Quoting Pablo Picasso) You need to watch the whole clip for the context. He was not referring to violating patent agreements, etc., but more in the general sense of looking everywhere for ideas and inspiration. Ce qui donne à peu près ceci : “Les bons artistes copient, les grands artistes volent” Steve Jobs (citant Picasso) Il faut bien sûr regarder toute la vidéo (le lien pointe seulement vers un très court extrait) pour comprendre le contexte. Steve Jobs ne parle pas ici de violer la loi, mais plutôt du fait qu’il faut chercher partout les idées et l’inspiration.
Isabelle Nicot - isabelle.nicot@campus.afpa.fr Ce document est mis à disposition selon les termes de la Licence Creative Commons Attribution Pas d’Utilisation Commerciale 3.0 non transposé.(ce qui signifie que vous pouvez le copier, le distribuer et l’adapter dès lors que vous en attribuez dûment la paternité et que vous n’en faites pas une utilisation commerciale).
I. Nicot décembre 2012
10/10