Blog

La maquette graphique

La création d’une maquette graphique intervient après un certain nombre d’étapes de préparations : brief, zoning, wireframe, moodboard …. Voici la méthode 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 de la maquette (mise en place des masses sur un plan défini). Si le client c’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 cette étape 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.

La maquette
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. 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.

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’y passe pas des heures mais cela me permet de tester plusieurs idées assez rapidement sans perdre du temps sur des détails techniques.

Rought-Maquette-Graphique_685x360

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 » 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.

Préparer un argumentaire
Lorsque vous allez présenter votre maquette, il va falloir être capable de justifier vos choix créatifs. La rédaction d’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.