Ma recette pour un webdesign réussi

Envisager les webdesigners comme des artistes est un quiproquo récurrent dans le milieu du web. Je ne compte plus le nombre de fois où j’ai été confondue avec une illustratrice-starlette des arts numériques. Pourtant, rien à voir, je suis webdesigner donc je conçois et réalise des sites en suivant un processus précis et pas grâce à des coups de génie survenant lorsque je contemple les feuilles mortes.

Mais de vous à moi, la vérité c’est que si nous sommes frustrés de ne pas être reconnus en tant que designers mais plutôt en tant qu’artistes, nous avons aussi notre part de responsabilité. Ceux d’entre nous qui communiquent sur leur méthodologie sont rares. On ne peut donc pas s’étonner qu’on fantasme nos capacités puisqu’il est difficile de s’informer lorsqu’on n’est pas du métier. C’est pourquoi il est temps de révéler notre façon de procéder afin de mieux être compris par notre entourage.

Je vais donc vous décrire les différentes étapes composant mon propre process, celles qui me permettent d’aboutir à un webdesign robuste, de la conception jusqu’à la maquette graphique finale.

Tout d’abord, le mini-brief :

Pour démarrer, je griffonne sur une feuille les éléments principaux du brief client (aussi appelé cahier des charges, copie stratégie, …) histoire de les avoir rapidement sous la main. Globalement, ce résumé se compose :

• Du concept du site, pour savoir succinctement de quoi il retourne ;
• De l’objectif du site, qui va orienter un certain nombre de mes décisions (est-ce qu’on va mettre en valeur l’abonnement à une newsletter ou plutôt proposer une expérience de lecture agréable ?);
• Du ton, qui définit l’ambiance du design et est en adéquation avec l’identité que l’on veut mettre en place (complice, institutionnel, poétique, dynamique, solennel, engagé, ludique, éducatif, …);
• De la cible, afin de savoir pour qui on conçoit, si ces personnes ont des comportements particuliers, des habitudes d’utilisation, … C’est le moment de faire des personas si le besoin s’en fait ressentir ;)
• De la communication antérieure, pour tenir compte d’un éventuel design à respecter ;
• Des contraintes d’accessibilité et/ou techniques, car il reste important de connaître les contraintes auxquelles sont soumis les derniers maillons de la chaîne. Ils seront d’autant plus content (et feront plus de câlins) si je ne leur demande pas de réaliser l’impossible ou l’absurde à quelques jours de la deadline.

Une fois tout cela fait, j’enchaîne avec la liste des fonctionnalités (sortez votre framaboard ou votre bloc notes et c’est parti). Elle peut ne comporter que les fonctionnalités de base ou être une véritable lettre au père noël. Dans ce cas, il faudra prioriser pour privilégier la ou les fonctionnalités les plus importantes. Réserver un hôtel ? Lire un article ? Acheter des chaussettes ?  Accéder au programme télé ? Tout ça en même temps ? Si je me retrouve débordée, je me rappelle plus facilement par la suite de ce qui est prioritaire et de ce qui reste de l’ordre du bonus.

Contenu

Maintenant que le périmètre d’action est délimité, il est temps de rassembler le contenu du site. Pourquoi si tôt ? Tout simplement parce que c’est ce contenu qui fait venir les utilisateurs. Un bon design les invitera à rester, et un mauvais design les fera partir en courant.

Or, on ne peut pas bien designer sans contenu (pensez à l’espace qu’il faut laisser entre chaque bloc de texte pour que l’ensemble ne soit ni surchargé ni flottant par exemple). Et je ne veux pas faire fuir les utilisateurs, il y a bien assez de mauvais design qui le feront à ma place. Donc je m’assure de rassembler du contenu (de qualité) avant d’aller plus loin.

Le plus important c’est le contenu. Le design c’est le mastic qui maintient tout ensemble.

M.Monteiro

Benchmark

Une fois le mini-brief (notamment le ton) et les fonctionnalités en main, on peut commencer le benchmark. Cette étape me fait ressembler à un écureuil faisant ses provisions avant l’hiver. Je commence à agglomérer des visuels de toutes sortes pour mieux visualiser ce qui se fait et ce qui existe (gifs, magazines, screens de site Internet, UI design, …). Cela vaut pour les bonnes comme les mauvaises idées, aussi bien pour le graphisme que la navigation ou les interactions. J’observe ce qui se fait, comment une marque arrive à communiquer de façon appropriée pour un ton donné ou pourquoi elle tombe complètement à coté de la plaque. Le but est d’analyser les codes pour réutiliser les bons. Et aussi savoir ce qui fonctionne en terme d’utilisabilité (ou pas).

Le benchmark met à mal cette vision du designer créant spontanément depuis le néant. Cette personne n’existe pas. Il suffit de penser à la veille graphique quotidienne ou hebdomadaire qu’un webdesigner pratique. Elle correspond à un état de benchmark permanent qui nous pré-mâche le travail. Comme si nous récoltions nos noisettes tout au long de l’année pour que le mois de décembre soit moins pénible.

Architecture d’information

Maintenant que les fonctionnalités sont listées, il est temps de penser à l’arborescence du site. Que sera la page d’accueil et qu’y aura-t-il à l’intérieur ? Quelles pages mènent vers où ? Le moment est venu de faire un petit schéma définissant l’architecture de ce joyeux fatras. Au passage il est parfois utile, selon le site, de lister pour chaque page son contenu histoire de ne rien oublier au moment de la mise en forme.

Mobile first

Il est bientôt temps de commencer à faire du design tangible. Pour cela, je m’efforce de penser en priorité « mobile first » (c’est à dire à designer en priorité pour smartphone et ensuite adapter pour les écrans plus grands), ce qui me permet de ne pas avoir à retailler ultérieurement dans la version desktop afin de l’obliger à rentrer dans un écran mobile. Autant de cheveux qui resteront sur ma tête pour plus tard, plutôt que de me poser quinze fois la question du « où mettre ce bouton très important ».

Prototypage papier

Voilà enfin venu le temps de mettre les mains dans le cambouis ! Attention, on sort le matériel de pro : des feuilles de papier, une paire de ciseaux et un stylo.

C’est ici que se met en place l’aspect fonctionnel de mes maquettes.

Je commence par choisir un fond d’après la taille de mon smartphone (mais oui on pense mobile first souvenez-vous) et découpe mes éléments de façon modulaire (boutons, liens, bloc de contenu, images, …). Ensuite, je les agence ensemble et teste la façon de fonctionner de ce prototype. Le but est ici de vérifier l’utilisabilité afin de placer tout les éléments les uns en fonction des autres. Très vite, les premières problématiques émergent. Plutôt ce bouton ici ou là ? Vertical ou horizontal ? Plus voyant ou plus discret ?

J’enchaîne avec les menus cachés, les pop-up, la version desktop en pensant à comment le contenu évolue du petit écran à celui du PC. Il ne faut pas hésiter à faire des aller-retour jusqu’au benchmark, histoire de se souvenir de ce que j’ai pu voir ailleurs (on ne réinvente pas la roue !). Pour ma part, je vais jusqu’à lister les bonnes idées et celles que je veux laisser de coté.

Planche de tendance

Encore du bidouillage et de la découpe :)

C’est le moment où je commence à piocher dans mon benchmark et choisis ce qui va composer ma planche de tendance, qui sera ma planche d’inspirations pour réaliser le graphisme. Elle se compose de toutes sortes de choses, depuis les sites internet que je trouve judicieux jusqu’aux affiches, schémas, croquis d’intention, petits éléments d’application, … J’agglomère les bonnes idées et les sources inspirantes pour pouvoir en extraire le futur graphisme de mon site. Selon mon envie, je procède à cette étape via photoshop ou j’imprime et coupe/redécoupe les éléments (j’adore manipuler du papier !).

Attention, je ne prévois pas de copier tout un tas de sites, mais au contraire de réussir à me les approprier pour les réinvestir. Alors je m’inspire, me nourris et commence à créer un univers propre à mon projet !

Wireframe

Bon fini la rigolade (Non). C’est ici que je passe à l’ordi. Pour moi, les wireframes correspondent à un prototype papier avancé, histoire d’avoir les bonnes tailles que se soit pour les zones d’interactions (boutons sur mobile, je vous vois) ou pour le contenu que j’insère à cette étape. Je les réalise en niveaux de gris, afin de pouvoir visualiser les contrastes de la future réalisation. Ici pas de graphisme, je prends une typographie la plus neutre possible et simplifie les formes pour que rien ne détourne mon attention. C’est encore l’organisation et l’agencement des éléments qui prime, le but étant de faire des wireframes tellement fidèles qu’il ne me restera qu’une petite surcouche de graphisme à rajouter pour que le site soit prêt !

Graphisme

Voilà l’étape ULTIME ! L’instant où tout prend forme et qu’enfin votre site est agréable visuellement. C’est le moment de tester mes décisions graphiques. Heureusement, je peux compter sur des fondations solides et de ce fait, me concentrer sur mes choix de couleurs / motifs / typographies.

Cependant, aussi réalistes que soient faire mes wireframes, surviennent toujours des problématiques liées au graphisme qui me font changer la mise en forme préalable. L’important reste de se souvenir quelle est l’utilité de chaque élément afin que la reconstruction se fasse moins complexe.

Je n’oublie pas l’accessibilité, ne me transforme pas en artiste extravagante, mais je me fait plaisir !

C’est le moment où toutes les précédentes étapes se rejoignent pour former (enfin !) le projet auquel je me dévoue corps et âme depuis le début.

Au passage, notez bien que ces étapes se déroulent selon une suite logique mais restent interdépendantes, l’important étant de rester souple dans sa façon de penser. Si au moment du graphisme ça coince, il ne faut pas hésiter à remonter jusqu’au prototype papier pour débloquer rapidement la situation. Cela ira toujours plus vite que de stagner sur le problème.

En conclusion

Il y a autant de façon de créer un webdesign qu’il existe de webdesigners. Cet article vous raconte comment je fais naître un projet avec des étapes qui me conviennent, palient mon manque d’expérience dans certains domaines et m’aident à trouver de l’inspiration en me permettant de réaliser un projet cohérent.

N’hésitez pas à partager vos propres méthodes de design, car ce processus reste mouvant au fil du temps. Nous ne sommes pas à l’abri de rencontrer une personne qui aura des habitudes de création qui nous inspirerons, répondant à un besoin que nous n’avions même pas forcément décelé.

Que se soit à un étudiant, un développeur, un chef de projet, notre maman ou un confrère, on gagne tous à expliquer notre process. Tout cela contribue à agrandir et développer le cercle vertueux du partage.

Si vous partagez votre savoir, vous faites le bien en aidant les autres. Plus vous allez partager votre savoir avec les autres, plus ils vont pouvoir le partager à leur tour, plus ils vont pouvoir l’enrichir, et plus ce savoir va être utile.

C’est un cercle vertueux.

Marie Guillaumet, Design de soi