Un blog qui parle de webdesign, graphisme, méthodologie ...
ARTICLES TROUVES
Article(s) de janvier 2009 :
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 correct = temps raisonnable
Bonne qualité + prix bas + travail rapide = croire au Père Noël
L’accès à l’information n’a jamais été aussi aisé. Cette abondance d’informations nous submerge.
Pour un designer qui cherche à transmettre un message, utiliser la simplicité peut être une bonne stratégie.
Introduction
Avant de parler de la simplicité comme mode de communication dans le design et en guise d’introduction, je souhaiterais rappeler quelques définitions issues du dictionnaire (Larousse 2003)
Simplicité
« Qui suffit à soi seul, qui n’a besoin de rien d’autre pour produire l’effet attendu. Qui est constitué d’un petit nombre d’éléments qui s’organisent de manière claire. »
La simplicité s’oppose à la complexité.
Simpliste
« D’une simplicité exagérée, qui ne considère qu’un aspect des choses. »
Quelque chose de simpliste est incomplet, il y a un manque, un oublie volontaire ou involontaire.
Minimalisme
« Recherche de solutions requérant le minimum de moyens. »
Le minimalisme est aussi un mouvement artistique où les formes sont simplifiés à l’extrême et les éléments orchestrés dans la simplicité la plus radicale.
Complexité
« Qui se compose d’éléments différents, combinés d’une manière qui n’est pas immédiatement saisissable. »
Ordre
« Ensemble d’éléments organisés, rangés, classés, disposés de manière logique. »
A l’ordre s’oppose le chaos.
Chaos
« Ensemble d’éléments désordonnés, confus. »
A la lumière des ces définitions, nous voyons qu’il ne faux pas confondre le terme « simple » qui exprime le dépouillement de tout superflu avec le terme « simpliste » qui exprime le fait de ne donner qu’une vision incomplète des choses. A la simplicité s’oppose la complexité mais qui n’a rien à voir avec le chaos. La complexité exprime une notion de quantité alors que le chaos exprime le désordre et la confusion.
Les questions auxquelles je vais essayer de répondre dans cet article sont : « Comment simplifier et pourquoi simplifier ? »
Comment simplifier
La simplicité n’est pas une formule magique qui répond à tous les problèmes de design. Un site web complexe peu sembler difficile à designer, la tentation de le simplifier pour résoudre nos problèmes de design est une fausse solution. Si un certain nombre de contenu (une certaine complexité) est nécessaire, la réponse graphique est davantage dans l’organisation de ce contenu plutôt que dans l’élimination d’éléments. Vous trouverez sur le site de Andy Rutledge , un article intitulé « Complex Order, Simple Chaos » qui décrit bien cette réflexion.
Pour organiser un contenu, je vous renvoie aux articles de ce blog consacrés aux « Grilles », à la « Gestalt », à la « Hiérarchisation de l’information » …
La simplicité est souvent préconisée par les ergonomes, les architectes d’information, certains designer. Cependant, elle ne s’applique pas systématiquement à tous les cas de figure.
Parfois, la complexité ou le chaos sont des effets recherchés. Par exemple pour exprimer certains affects, pour laisser le spectateur se perdre dans un arrangement ou il va explorer et examiner une multitude de sujets ou pour faire vivre une expérience particulière à l’utilisateur dans un contexte bien précis (publicité, expérimentation, innovation …).
Simplifier un design consiste essentiellement à réduire le nombre d’éléments mais aussi à organiser les éléments et utiliser des éléments connus.
Simplifier en réduisant
Comme nous l’avons vue en introduction, la simplification consiste à éliminer tout ce qui semble ne pas être absolument nécessaire. A première vue, cela peut sembler facile à faire mais il n’en ait rien, la simplicité n’est pas simple !
En effet, éliminer des éléments, que se soit des fonctionnalités ou des objets graphiques, se fait sur la base d’une décision subjective. Cette décision comporte un risque, celui de tomber dans une conception trop simpliste, c’est à dire où il manque finalement des éléments. On se rend donc compte que entre simplicité et simplisme, existe une frontière ténue difficile à percevoir mais facile à franchir.
Pour nous aider, Jacob Nielsen, ergonome Américain, préconise avant d’ajouter un élément conceptuel sur un site, de se poser deux questions :
1- « Cet élément simplifie t’il la tâche de l’utilisateur ? »
2- « Cet élément apporte t’il une valeur ajoutée ? »
… si la réponse est « non » éliminez le.
Donc si vous êtes dans une démarche de simplification par la réduction, avant d’ajouter un élément graphique dans votre design, demandez-vous si cet élément rempli un objectif ou participe à communiquer un message. Penser en terme d’objectifs est un bon moyen d’éviter de tomber dans le piège du simplisme.
Simplifier en organisant
Organiser les éléments d’une composition graphique ou d’une mise en page favorise la simplification. Souvenez-vous de notre définition de la simplicité : « Qui est constitué d’un petit nombre d’éléments qui s’organisent de manière claire. » , on y parle bien d’organisation.
Ce qui est organisé devient plus simple à percevoir et plus simple à comprendre parce que notre cerveau a besoin de cet ordre pour analyser plus rapidement son environnement.
Simplifier par la connaissance
Ce qui est connu devient plus simple. En effet, notre cerveau analyse sans cesse ce qu’il perçoit. Toute nouveauté lui demande un effort cognitif intense.
Lorsqu’une situation a déjà été rencontrée, analysée, pratiquée et enregistrée, le cerveau fournit beaucoup moins d’efforts que face à une situation nouvelle. C’est pourquoi les choses connus nous paraissent plus simples. Il est beaucoup plus simple pour un expert en physique quantique de vous expliquer la théorie du Big-Bang que pour un débutant.
Lorsque vous concevez le design d’une interface, vous rendrez la tâche de l’utilisateur beaucoup plus simple si vous faites appel à des références que celui-ci connait. Par exemple si vous utilisez une icône représentant un caddie pour symboliser le panier d’un site e-commerce, l’utilisateur le reconnaitra comme tel parce qu’il connait le sens associé à cette icône.
Pourquoi simplifier
J’ai cherché les raisons qui pourraient motiver un graphiste à se lancer dans une démarche de simplification de ses design. En voici quelques unes, mais il se peut que j’en ai oublié certaines. Si vous en trouvez d’autres, n’hésitez pas à en discuter dans les commentaires de cet article.
Parce que nous avons naturellement besoin de simplicité
La Gestalt (psychologie de la forme) a observé à travers la loi de Prägnanz que notre cerveau recherche toujours la simplicité. Lorsque des choses se présentent à nous de façon ambigüe de sorte qu’elles peuvent être interprétées de différentes manières, notre cerveau choisira toujours l’interprétation la plus simple.
L’exemple le plus évocateur est notre tendance à voir des visages humains partout. Prenez un smileys 
ce n’est qu’une succession de caractères spéciaux qui n’a aucun sens et ne fait référence à aucune règle (grammaire ou autre…). Ce groupement de caractères peut donc sembler ambigüe. Notre cerveau y cherche une logique, une interprétation, un sens. Il va regarder dans sa « base de données » (la mémoire) pour faire des comparaisons avec des informations connues. Et naturellement, il va identifier un visage et ne retenir que cela à notre attention plutôt que de se dire : « il s’agit d’un point virgule suivie d’un tiret lui même suivi d’une parenthèse fermante ». Pourquoi ? parce que c’est plus simple pour notre cerveau de voir le monde à notre image (chose que nous connaissons bien) que de le voir tel qu’il est dans sa réalité froide et dénuée de sens.
Cette aptitude naturelle à la simplification pourrait aussi s’expliquer par notre instinct de conservation. Dans un environnement hostile et nouveau, notre cerveau réptilien (qui gère notre instinct de survie) à besoin d’identifier le plus rapidement possible ce qui l’entoure pour y distinguer un éventuel danger et prendre la décision de fuir sans perdre de temps. En généralisant un ensemble complexe, nous gagnons du temps.
Imaginez le temps qu’il nous faudrait à identifier une pelouse si nous devions pour cela voir chaque brun d’herbe individuellement. Si un prédateur se trouve dans les parages, il n’attendra pas que vous ayez terminé d’observer tous ces bruns d’herbes.
Donc, lorsque vous simplifiez un design, vous soulagez l’effort cognitif de l’observateur, vous facilitez son travaille de réflexion. Car naturellement, le cerveau humain aime qu’on lui mâche le travaille. Attention cependant, tomber dans la facilité n’est pas toujours heureux car vous risquez de basculer dans l’ennui et le désintérêt.
Mettre en valeur
L’architecte Allemand Ludwig Mies van der Rohe (1886 – 1969) s’est rendu célèbre par ses réalisations mais également par ses formules choques sur le design. Il est l’auteur du fameux « Less is more », « Moins c’est plus ».
Cette formule signifie que moins vous mettez d’éléments, plus ceux qui restent sont mis en valeur. En effet, les éléments d’une composition rentrent en compétitions les uns par rapport aux autres et cela génère ce qu’on appel du « bruit visuel ». Moins il y a de compétiteurs en liste, plus ceux qui restent ont de chance de gagner… l’attention du spectateur.
Cela est également bien exprimé par le dessinateur de BD Scott McCloud, qui dans son livre « L’art de l’invisible » dit en parlant du dessin humoristique : » Quand [...] nous faisons tendre une image vers l’abstraction, nous éliminons des détails mais par contre nous en mettons d’autres en valeurs. En épurant une image pour n’en garder que sa signification essentielle, le dessinateur humoristique amplifie cette signification … »
Donc simplifier un design (par élimination) peut servir à mettre l’accent sur certains éléments considérés comme essentiels. Si on ne voit qu’eux par ce que les autres éléments sont tout simplement absents, notre attention n’a d’autre choix que de se focaliser sur ceux qui existent. Il s’agit donc ici de renforcer la portée d’un visuel en le dépouillant de détails accessoires.
L’attention de l’observateur peut également être obtenu en hiérarchisant le contenu par des procédés graphiques. Mais vous n’obtiendrez jamais l’efficacité qu’apporte la simplification. Si vous considérez que certains éléments sont superflus, éliminez les (simplification) dans le cas contraire, organisez-les (hiérarchisation, grille …).
Faire gagner du temps
Dans un monde où tout va plus vite, où de plus en plus de choses s’offrent à nous, où le temps disponible est précieux; gagner du temps devient appréciable.
Internet est un lieux d’abondance ou l’internaute doit trier et faire des choix parmi une multitude de sites web pour trouver ce qu’il cherche. Comme il manque de temps, l’internaute privilégie les sites claires qui lui permettent de trouver plus facilement l’objet de ses recherches.
Plus un site sera simple, plus il sera claire, plus son confort augmentera et plus rapidement l’internaute trouvera ce qu’il cherche.
Engager le spectateur
Dans l’art Zen, les Japonais pensent que si tout est exprimé, l’intérêt de l’observateur disparaît.
En décrivant les choses de manière la plus dépouillée possible, vous réduisez leur description à leur stricte minimum. Cela permet d’éveiller l’intérêt et l’imagination de l’observateur en lui laissant une marge d’interprétation.
En effet, en ne révélant pas tout, en permettant à l’observateur de se projeter dans votre univers, en lui laissant la liberté d’imaginer une histoire, vous engagez le spectateur dans votre design.
La simplicité en se concentrant sur l’essentiel fourni cette liberté d’interprétation à l’observateur.
Une forme d’esthétisme
La simplicité est une forme d’esthétisme très prisée par certaines cultures. L’art Zen Japonnais en ai le meilleur représentant. A l’opposé, d’autres cultures (Occidentales, Arabes …) ont, à certaines époques, plutôt privilégié l’abondance regorgeant de beautés (jardins à la Française, ornementations baroques, ornementations des mosquées …) saturant d’informations visuelles l’observateur. Cette abondance de beauté était certes un témoignage de richesse et de beauté mais trop de sollicitation ne nous fait il pas passer à côté de l’essentiel ?
Tout cela n’est qu’une histoire de gouts, d’objectifs et de mentalité, là n’est pas la question. Ce qui est intéressant, c’est de comprendre ce que la simplicité peut apporter à l’esthétisme.
La simplicité permet d’apporter le maximum d’impact avec un minimum de choses. C’est une manière d’atteindre une forme de grâce, d’élégance c’est à dire de beauté par la retenue. La simplicité est esthétique parce qu’elle apporte de la subtilité, du raffinement, de l’élégance, de la sérénité et de la suggestivité aux choses auxquelles elle s’applique.
Simplicité et webdesign
Je vais vous présenter quelques exemples de sites web ayant appliqués la simplicité dans leur design.
Voici le site de Almeter Design, une agence de design qui propose des identités visuelles pour les marques. J’ai rarement vue un design web où la simplicité a été poussée à ce point. Tout est réduit à sa plus simple expression, pas de textures, d’aplats, d’ornementations ou de couleurs ostentatoires. Même le logo de l’agence est d’une extrême simplicité.
Page d’accueil :
Page « Contact » :
Page « About » :
Page « Work » :
Prenons maintenant un site de commerce qui à priori est plus complexe qu’un site corporate. Le site Crate & Barrel est un bon exemple. Bien qu’un site e-commerce nécessite de nombreuses fonctionnalités, un catalogue, un système de caddie … vous pouvez, en organisant le design et en retirant les gadgets, aboutir à des pages simples et claires. En voici la preuve :
Page d’accueil :
Une des pages du catalogue :
La encore, rien d’ostentatoire. Les fonctionnalités sont réduites au strict minimum. Pas d’images ou d’effets graphiques gratuits, de l’espace, de l’organisation et de l’alignement.
Dernière exemple avec le site 3Rings. Voici un site au design un peu plus coloré et élaboré. On retrouve bien dans ce design une esthétique épurée, élégante et raffinée. De simples aplats de couleurs, un contenu bien hiérarchisé et aligné, des espaces qui laisse respirer la composition.
Conclusion
Nous avons vue dans cet article que la simplification consiste à réduire (voir masquer), organiser et utiliser des références connues.
La simplification améliore la clarté d’un message ou d’une mise en page et facilite l’effort cognitif de l’observateur tout en l’impliquant dans votre design. La simplicité a donc beaucoup d’avantages et répond a un besoin naturel chez l’observateur.
Simplifier n’est pas un acte aisé, il requiert de la pratique, de la réflexion et de la vigilance. Ce n’est pas une démarche a appliquer systématiquement, surtout si votre objectif n’est pas de clarifié un ensemble d’éléments et d’informations ou d’inciter l’observateur à imaginer ce qui n’est pas montré.
Réfléchissez toujours à vos objectifs et vous saurez alors si vous devez utiliser la simplification ou pas.
Sources :
– Ouvrage « Site web : priorité à la simplicité » de Jakob Nielsen et Hoa Loranger – CampusPress
– Ouvrage « Les mouvements dans le peinture » P. Fride R. -Carrassat et I. Marcadé – Larousse
– Ouvrage « Présentation zen de Garr Reynolds – Pearson
– Ouvrage « Loeil du photographe et l’art de la composition de Michael Freeman – Pearson