La création d’une maquette graphique intervient après un certain nombre d’étapes de préparations dont nous avons déjà parlé sur ce blog (brief, zoning, wireframe, moodboard …). Je vais vous décrire dans cet article le process que j’utilise pour établir ces maquettes graphiques.

Introduction

La maquette graphique est l’aboutissement d’un long travail de réflexion effectué en amont. Elle est généralement attendu comme le Messie par le client, car c’est l’élément qui va donner l’aperçu le plus fidèle du futur site.

Je crois qu’il est opportun d’essayer d’impliquer le client au processus de création. Par exemple, en travaillant avec lui sur l’élaboration du moodboard. Si le client s’est fortement impliqué dans la recherche d’idées, il y a plus de chances qu’il valide la maquette finale, ayant lui même participé à certains choix créatifs.

Attention cependant à rester maitre de la direction artistique car le graphiste professionnel c’est vous, c’est donc vous le plus compétant pour faire les choix créatifs définitifs. Ne laissez donc pas le client jouer au designer et vous transformer en simple exécutant.

Si l’étape du moodboard a été sérieusement préparée et que la proposition a été validée par le client, un certain nombre de choix créatifs ont déjà été décidés. Il vous reste encore pas mal de travail mais vous ne devriez pas avoir l’angoisse de la page blanche. Lorsque vous concrétisez votre création, n’oubliez pas de garder à l’esprit les lignes directrices qui ont été définies lors des réflexions préalables.

Le process

Le process de création que je vous propose ici n’est pas un modèle qui fait référence. C’est simplement une manière de faire parmi d’autres et inspirée de ma pratique personnelle.

Reprendre les éléments du brief créatif

Si vous avez bien travaillé sur le brief créatif, vous disposez déjà d’indices sérieux pour décider du chemin que va prendre votre design. Vous avez normalement définis avec le client un certain nombre d’objectifs auxquels le design va devoir répondre. Raisonner en terme d’objectifs permet de rationaliser les choix créatifs. Cela vous aidera à écarter les évaluations purement personnelles en vous raccrochant lors de vos justifications graphiques aux objectifs qui avaient été décidés.

Le moodboard

Une partie des choix créatifs peut se faire à l’étape du moodboard si vous décidez d’utiliser cette technique.

Pour trouver des idées, je commence par m’imprégner du brief créatif et de l’univers du client. Votre culture graphique et votre culture générale vous aidera également.

Ensuite, je fais une espèce de brainstorming en écrivant sur une feuille de papier tous les mots qui me viennent à l’esprit: verbes, adjectifs, couleurs, objets, références, images … Il est important de ne pas se censurer et d’écrire tout ce qui vous passe par la tête. Je laisse reposer quelques temps et je complète ma liste au fur et à mesure que les idées surgissent. Pour trouver d’autres mots, il m’arrive de consulter la définition du dictionnaire des mots que j’ai écrit ou de consulter un dictionnaire de synonymes.

Quand j’estime avoir fait le tour, je commence à trier ma liste. Je ne garde que les mots qui me semblent se rapprocher le plus du thème qui m’intéresse.

Une fois ma liste triée, je commence une recherche sur les couleurs, les textures, les motifs, les illustrations et les photos. Tous ces éléments doivent suggérer le thème de ma futur création graphique, les valeurs à mettre en avant, le message à faire passer, la tonalité graphique choisie. Pour cela, j’essaye de mettre les mots de ma liste en image ou en couleur. Par exemple, si j’ai noté la mot « vitesse » et que ce mot me parait coller au message graphique, je dessine ou je recherche des illustrations qui évoquent la vitesse.

Si je choisis d’utiliser une image d’arrière plan qui occupera une grande partie de mon design, j’établis généralement ma palette de couleurs en allant piocher des teintes à la pipette dans cette image.

Le croquis

Rester devant son écran peut, à mon avis, devenir vite improductif à cette étape du process. Je pense que sortir une feuille et commencer à gribouiller ses concepts sur le papier est plus productif. Je n’aime pas y passer des heures mais cela me permet de tester plusieurs idées assez rapidement sans perdre du temps sur des détails techniques.

L’inspiration graphique

Pour stimuler ma créativité, j’aime bien parcourir les galeries de site web sur internet ou dans des ouvrages spécialisés. Le risque c’est de proposer des choses qui se rapprochent de ce qui a déjà été fait. Pour être original, mieux vaut trouver ses idées ailleurs : magazines, affiches, packaging, notre environnement … Si je vois une idée qui me séduit, je la mets dans un coin de ma tête ou je prends une photo. Lors de la phase de création, j’essaye de reprendre cette idée et de l’interpréter à ma manière.

Travail sur écran

Je travaille sur un logiciel de traitement d’images bitmap. Certains préfèrent les logiciels vectoriels. A vous de voir.

Je me fixe une règle de nommage pour mes calques afin de m’y retrouver plus facilement par la suite.

Je regroupe mes calques par thème en fonction de leur emplacement sur la maquette : en-tête, menu, colonne latérale droite, pied de page … Si vous travaillez sur Photoshop vous pouvez regrouper vos calques dans des dossiers. Gimp par contre, ne possède pas encore cette fonctionnalité.

J’essaye de garder un maximum de calques car cela me donne plus de souplesse si je dois faire des modifications ultérieures. L’inconvénient c’est que le fichier s’alourdit et que passé un certain nombre de calque, la manipulation devient moins rapide et la recherche du bon calque fastidieuse. J’ai donc tendance à modulariser mes fichiers. Je fait un fichier par bloc ou entité significative. Ensuite, je fais une copie aplatie du bloc et je la colle dans un fichier qui assemble tous les blocs de ma page, donnant l’aspect final de la maquette.

Sur le calque supérieur, je garde toujours l’image d’une grille en mode « Multiplier » (Gimp) qui me sert de repère pour ma mise en page. Cette grille est constituée de colonnes, de gouttières et de modules dont je connais la taille en pixels. Cela me permet, par la suite, de facilement coter ma maquette pour aider les intégrateurs à positionner les éléments et paramétrer leurs feuilles de styles. En plaçant cette grille sur un calque à part, je peux rapidement la masquer ou modifier sa transparence.

Je garde toujours la version originale de mon fichier qui comporte les calques. Je peux en avoir besoin pour décliner les autres pages du site ou pour effectuer des modifications à la demande du client. Je fournis aux intégrateurs une version aplatie épurée des calques de texte et parfois une version avec les côtes en pixels et les codes couleurs.

Une fois la maquette terminée, je m’en éloigne quelques temps pour y revenir plus tard. Il arrive que des choses que je n’avais pas remarqué lors de la phase de création, me choquent lors d’un second regard. J’effectue alors quelques corrections.

Exemples de livrables (maquettes graphiques) pour l’intégration issus du projet jing-inteactive :

> Maquette graphique : aspect finale

> Maquette graphique sans le contenu dynamique

> Maquette graphique livrée avec des informations pour l’intégration (grille placée en transparence)

Préparer un argumentaire

Lorsque vous allez présenter votre maquette, il va falloir être capable de justifier vos choix créatifs.

Lorsque j’estime que ma maquette est terminée, je rédige un petit texte qui explique ma démarche et les raisons de mes choix créatifs. Pendant cette phase, je vérifie que mon discours est en accord avec les informations du brief créatif. Pour réussir cette étape il faut se poser la question : « En quoi mes choix graphiques répondent aux objectifs fixés lors du brief créatif ? »

Conclusion

Ce process correspond à ma façon de travailler lorsque les conditions (temps, budget) sont idéales (ce qui est rarement le cas, il faut bien l’avouer). Lorsque le temps manque, certaines étapes de ce process passent à la trappe. C’est dommage car c’est la qualité du travail qui en pâtit mais lorsque les budgets sont serrés vous n’avez pas beaucoup le choix.

Chacun doit trouver la méthode de travail qui lui correspond le mieux. Elle peut être très éloignée de celle que je viens de vous présenter mais cela n’a aucune importance du moment que vous vous y retrouvez.

Les étapes décrites ci-dessus sont réalisables dans de bonnes conditions si le délai dont vous disposez est raisonnable. Bien souvent, les clients, pour économiser de l’argent, réduisent ces délais. A vous de leurs faire comprendre avec diplomatie, que la qualité de la prestation ne sera pas la même selon la durée de l’échéance dont vous disposerez.

Pour résumer, présentez ces équations à votre client :

Bonne qualité + travail rapide = prix très élevé
Bonne qualité + prix bas = beaucoup, beaucoup de temps
Bonne qualité + prix correcte = temps raisonnable
Bonne qualité + prix bas + travail rapide = croire au Père Noël