J’ai publié l’article original sur GOREF le 15 février 2007. Ce blogue ayant été récemment débranché, j’ai obtenu l’autorisation de remettre l’article en ligne ici même – en mettant à jour ce qui ne l’était plus.
Je précise d’emblée que ce webdesigner productif n’est pas moi! Ce qui suit est l’adaptation d’un article que Matthew Inman a publié sur le blog de MOZ. Non content d’être un graphiste de grand talent, Matt est aussi développeur web et responsable des technologies chez MOZ. Si j’ajoute qu’il est beau bonhomme et qu’il pratique le surf, vous admettrez avec moi que c’est injuste. Mais c’est comme ça. Et là n’est pas notre propos, d’ailleurs. Cette réflexion salutaire sur le design web est digne d’être livrée à la connaissance des lecteurs francophones, et comme j’aime les chiffres ronds, j’ai ajouté deux points à la fin de la liste de Matt…
Mise à jour : Ce Matt Inman vole désormais de ses propres ailes et peut se vanter d’être l’un des auteurs de comics en ligne les plus lus, sous le nom de The Oatmeal. Chapeau, l’artiste!
Le design Web fourmille de frustrations. On s’imagine que l’infinité des possibilités nous offre un champ de liberté totale, mais il faut admettre que nous nous sommes tous retrouvés coincés un jour ou l’autre devant une création qui ne veut pas marcher. Un cul-de-sac. Une page au style bancal, une cohérence graphique douteuse, et le compteur créatif à zéro.
Voici 10 trucs pour s’en sortir :
1. Partez du contenu
Beaucoup de graphistes commencent le travail de conception par l’entête (header) de la page. Pourtant, c’est souvent ce qui se trouve dans la page qui en fait la force, et dans ce cas, le header n’est qu’un «plus». Essayez d’oublier le haut de la page pour vous concentrer sur les éléments de contenu : vous serez surpris de voir à quel point le design global est simple quand le corps de la page est solide. La prochaine fois que vous passerez du temps à finaliser une entête sans avoir défini le contenu, imaginez-vous ajustant votre nœud de cravate devant le miroir… complètement nu!
2. Faites des croquis
Crayons, craies et marqueurs sont vos amis! Il existe paraît-il un célèbre webdesigner qui noircit des douzaines de pages de son petit carnet à spirales avant même d’ouvrir un logiciel graphique : une façon low-tech de définir l’emplacement de ses éléments. L’avantage de cette technique est la rapidité avec laquelle elle permet de tester des principes de mise en page. Griffonnez, griffonnez, et griffonnez encore : chaque croquis vous en apprend un peu plus sur l’aspect de votre future page. Il existe bien sûr des applications comme Axure pour cette étape de conception, mais on peut toujours préférer le doux parfum des marqueurs…
3. Cherchez votre inspiration dans le vrai monde
Si vous vous intéressez au design, vous avez sans doute remarqué les innombrables galeries de CSS et de design web qui ont fleuri, il y a quelques années. Ce sont bien sûr d’excellentes sources d’inspiration, mais un peu de veille artistique dans les médias hors-ligne vous permettra de collecter des idées fraîches. Ouvrez un journal, feuilletez un magazine, regardez les emballages en faisant votre épicerie, arrêtez-vous devant une affiche, scrutez les publicités à la télévision, et soyez attentif aux éléments de premier plan : la typographie, les couleurs, la structure. Qu’est-ce qui fait que cette pub ressort, sur ce magazine? Pourquoi cette boîte de biscuits est-elle si efficace? Il y a tant à apprendre du «monde réel»! Prenez, au hasard, un livre sur les affiches russes des années vingt. Observez comment, dans l’ère pré-web, on savait faire entrer un énorme volume d’information dans un espace restreint sans que ça paraisse saturé…
4. Remettez-vous en question
On a tous passé des heures à créer un super bouton… qui ne s’intègre pas à notre design! On veut tellement que ça marche qu’on finit par dénaturer notre travail à force de jouer avec les lois fondamentales de l’espace et du temps! Respirez. Enregistrez votre bouton dans un répertoire «à insérer» et passez à autre chose. Vous n’aurez pas travaillé en vain puisque ce merveilleux bouton sera prêt, le jour où un design «compatible» pointera son nez.
5. Laissez reposer
C’est bien connu, quand quelque chose vous donne du fil à retordre, le mieux est de le laisser de côté, le temps de prendre un peu de recul et de vous éclaircir les idées. Ne sous-estimez pas le pouvoir du temps, surtout pas en matière de graphisme web. On peut s’acharner sur un travail au point de finir par le détester et de l’enfouir au fond d’un dossier en essayant de l’oublier. Et souvent, quand notre création ressurgit devant nos yeux, on découvre que c’est un chef-d’œuvre! Inversement, il arrive qu’un design naisse dans le plaisir et qu’on réalise le matin suivant de quelle abomination on a accouché! La morale est la suivante : donnez du temps à votre création.
6. Soyez perméable
L’art ne naît pas du vide. Apprenez à mettre le doigt sur ce qui vous touche dans les créations d’autres designers, et nourrissez-en votre art. Ne copiez pas, mais ne vous privez pas de stimuli extérieurs. Soyez critique et affûté. Face à un «design d’enfer», passez le stade de l’admiration pour comprendre comment ça marche. Et comme chaque création est unique, cette opération plutôt agréable est renouvelable à l’infini!
7. Renouvelez-vous
Évitez de resservir les même plats, même si leur goût vous a plu. Prenez par exemple les rectangles avec un dégradé. Très «web 2.0». Ma page manque de corps? Hop, un rectangle avec un dégradé. Mon design est pourri? Tiens, voilà un rectangle avec un dégradé. Résultat : rien n’est vraiment laid, mais tout se ressemble. Pourquoi ne pas essayer de vous donner des contraintes arbitraires, telles que «pas de drop-shadow aujourd’hui» ou «des éléments 2D uniquement»? S’interdire certains réflexes vous obligera à en inventer de nouveaux, et l’épanouissement artistique réside en partie dans votre capacité à produire quelque chose qui ne ressemble à aucune de vos créations précédentes.
8. Soumettez votre travail à votre entourage
Attention : conseil dangereux! Il est très facile de ruiner un design en impliquant un trop grand nombre d’intervenants. Choisissez bien vos partenaires créatifs et assurez-vous de ne collecter que des critiques constructives. On sait ce que peut devenir un bon design d’entreprise entre les mains d’«experts» en graphisme dont le talent, autrefois célébré par leur maman, est resté bloqué au stade préscolaire… Si quelqu’un vous dit que votre création est «pas comme il faudrait» ou qu’il «ne l’aime juste pas», allez donc chercher des idées ailleurs. Exigez des commentaires précis : qu’est-ce qui ne fonctionne pas, quelles sont les pistes pour améliorer la chose? Et soyez humble : toute critique n’est pas nécessairement une atteinte à votre génie!
9. Réduisez votre création à 3 éléments
Quand une page web manque de force, c’est souvent qu’elle manque de structure. Une des solutions concrètes est de la revoir avec une optique de hiérarchisation : quels sont les éléments majeurs? En poussant à l’extrême, on arrive souvent au chiffre 3. Mettons : un logo, une phrase-clé et un visuel. En faisant abstraction de tout le reste, sous quelle forme ces éléments s’articulent-ils le mieux? La réponse à cette question pourrait bien fournir la structure de votre page.
10. Demandez son avis à votre mère
Ce conseil peut sembler en contradiction avec le point 8, il est à prendre avec un grain de sel. Il est instructif et parfois surprenant de demander un avis graphique à quelqu’un dont ce n’est ni le métier, ni la préoccupation. S’exposer ainsi aux commentaires graphiques de sa mère, de son petit neveu ou du plombier est une bonne façon de remettre en question ces petites choses qu’on considère acquises. «C’est quoi, ce truc rond», «pourquoi t’as mis du jaune» ou «c’est un chien ou une souris» sont autant de questions qui nous ramènent à l’aspect intuitif de la création. Savoir y répondre est un autre problème…
Et vous, quels sont vos trucs ?
