Les 10 secrets d’un web designer productif

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 vient de publier sur le blog de SEOmoz. Non content d’être un graphiste de grand talent, Matt est aussi développeur Web et responsable des technologies chez SEOmoz. 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…

* * *

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 insipration 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 ces deux dernières 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 artistique !

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 ?

Partagez cet article

Laisser un commentaire

Merci de taper les caractères de l'image Captcha dans le champ

5 commentaires

  1. Rester toujours super critique sur son travail, les internautes ont toujours la dent dure. Un “pas mal” du côté du webdesigner se termine toujours en “bof” côté internaute. Retravailler toujours sont désign pour obternir un “ça déchire !! grave de chez grave !!” du côté webdesigner et un “waw” côté internaute ;)

    Envoyé le 17 février, 2007 par Arnaud
  2. Je viens de tomber sur un article trippant dans le Design Observer ! Ça s’intitule The Top 10 Things They Never Taught Me in Design School, c’est malheureusement en anglais, et c’est bourré de conseils brillants, quoique basés sur une discipline de fer. L’hygiène du designer, quoi…

    Envoyé le 20 mars, 2007 par Olivier
  3. merci beaucoup , c’est trés instructifs et je me rend compte que malgrés moi je suis passé par tout ses stades notamment les blocages au niveau graphiques .
    c’est quand on arrive plus a prendre du recul sur son travail que les pb commence ^^.

    sinon j’ai remarqué que beaucoup de “credot” de mouvements artistiques sont adaptables au web design notamment celle du bahaus : ” la fonction détermine la forme ” . c’est ce genre de notions qui me trote dans la tete quand je code ca me permet de garder les pieds sur terres ;)

    Envoyé le 21 mai, 2007 par matou
  4. Bonjour, très intéressant.
    J’ai pas mal de secret aussi et je vous en partage un qui complémente le secret “7.Renouvelez-vous” :

    -Ne pas resté fermé aux techniques ou logiciels quotidiens, s’ouvrir à la créativité avec du dessin scanné et scanné pour donner un style crayon… idem pour la peinture, scanné ou photographier, se constituer une bibliothèque photos avec son propre appareil, faire des maquette papier, carton, jouers… les photographier pour faire des décords… utiliser des logiciels autres que les habituels photoshop et illustrator ou dreamweaver, qui n’ont pas forcement la même utilité mais qui pourrons servir à enrichir vos web design, comme un logiciel 3d, un logiciel de montage vidéo ou encore un logiciel artistique expérimental…

    Enjoy ;)

    Envoyé le 14 juin, 2011 par F4lco