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

Introduction

La décision de créer un site web, qu’il s’agisse d’une association, d’une entreprise privée, d’une administration, d’un organisme est souvent motivé par le souci d’être présent sur la toile. Ne pas être présent sur internet, c’est risquer de renvoyer à ses utilisateurs, à ses clients une image un peu ringarde.

C’est pourquoi beaucoup de site web existent parce qu’il faut être présent sur internet mais dont le contenu laisse à désirer et ressemble à une juxtaposition d’informations sans liens ni objectifs bien définis.

Pour concevoir un site efficient, il faut passer du temps sur la définition, les objectifs, l’organisation et la rédaction de son contenu afin de répondre à un véritable besoin des utilisateurs.

Le contenu est roi et constitue la véritable richesse de votre site. Le site n’est qu’une enveloppe qui doit se mettre au service du contenu pour le mettre en valeur. Il serait donc absurde de construire un site sans savoir quel contenu on va y mettre.

Prenons une analogie. Imaginez une famille qui veut faire construire une maison pour y vivre de la façon la plus confortable possible. Cette famille est constitué d’un couple, des ses trois enfants et du grand-père. Avant de construire, la famille va réfléchir avec un architecte sur les plans de la maison. Ils prévoient à l’étage 3 chambres pour les enfants, et deux chambres en rez-de-chaussé pour le couple et le grand-père. Ainsi le grand-père n’aura pas d’escalier à monter et les parents seront à l’abri de l’agitation des enfants. Le garage est prévu suffisamment grand pour accueillir un atelier, un sellier et les deux voitures du couple. Au vu de la composition de la famille (par analogie le contenu) la maison (par analogie le site) est prévue pour rendre la vie de la famille la plus confortable possible avec une organisation spatiale adapté.

Imaginons maintenant que la maison soit construite sans réflexion préliminaire mais avec des chambres, un garage … Lorsque le couple veut s’y installer, il se rend compte que la deuxième voiture dépasse du garage, que la maison ne comporte que 4 chambres en étage et que les murs sont tapissés de moquette alors que le petit dernier est allergique à la poussière.
Bref c’est l’enfer, le grand-père tombe des escaliers en se rendant aux toilettes, les enfants réunies dans la même chambres se tapent dessus toute la journée et le père de famille perd son boulot suite à une dépression nerveuse.

Créer un site sans se préoccuper du contenu, c’est mettre la charrue avant les bœufs.

Quel contenu mettre dans son site ?

Pour déterminer la pertinence d’un contenu, il faut se concentrer sur ses objectifs et les besoins de l’utilisateur. Pour cela procédez par étapes.

(Ces étapes sont largement inspirées de la méthode proposée par Vincent Bénard sur le site Veblog dans l’article « Comment choisir les contenus de votre site web ?. Je vous propose ici une retranscription personnelle. N’hésitez pas à aller faire un tour sur les archives du site qui sont pleines d’enseignements malgrè l’arrêt du blog depuis plusieurs années « )

Étapes de réflexion pour définir son contenu :

1. Quels sont les objectifs du site auprès de vos utilisateurs ?

La première question à se poser est « A quoi va servir mon site, qu’est ce qu’il est censé proposer aux utilisateurs ? »

Amélie Boucher, consultante ergonome, parle dans son livre « Ergonomie Web » de l’utilité globale de votre site, c’est à dire de l’objectif principal du site qui est généralement déterminé par l’idée qui a sous tendu la création du site. Cela peut être : vendre ma production de fromages, trouver un gite en France, présenter le programme de formation de ma société, fournir des informations techniques pour les ingénieurs de mon service production …

Pour trouver les objectifs de votre site, ne pensez pas en terme de moyen mais en terme de finalité. Penser finalité c’est par exemple se dire: « Mon site doit me permettre de vendre mes produits, de fédérer une communauté autour d’un sujet, de collecter des adhésions pour mon association, de fournir des informations pratiques aux citoyens, d’améliorer le service après vente, me face économiser des frais d’impression de documentation … » penser moyen, c’est se dire: « Mon site doit être moderne pour plaire à mes utilisateurs technophiles, mon site doit être rapide pour répondre aux sollicitations d’un maximum d’internautes … »

Il peut y avoir plusieurs objectifs mais il existe toujours un objectif principale qui correspond à l’utilité générale du site. Si vous définissez plusieurs objectifs, énumérez les tous puis classez les par priorité. L’utilité globale du site doit se trouver en tête des priorités.

2. Quelles actions souhaiteriez-vous proposer à vos utilisateurs ?

La seconde étape consiste à réfléchir sur les actions que vous souhaiteriez que vos utilisateurs effectuent sur votre site. Pour cela il faut penser « verbes ». Je souhaiterais que l’utilisateur :

- Achète mes produits
- S’inscrive dans mes formations
- Lise les actualités de la commune
- Consulte les réalisations de mon portfolio
- Saisisse une demande de devis
- Télécharge les notices d’utilisations de mes produits
- S’abonne à notre magazine …

La aussi, pensez finalité et non moyen.

3. Quels sont les éléments qui vont favoriser ces actions ?

Il s’agit maintenant de déterminer quel petit plus (en terme d’utilité) vous allez pouvoir offrir à vos utilisateurs pour résoudre leurs problèmes, leur faciliter la tâche, leur fournir l’information dont il ont besoin… Vincent Bénard appel ce petit plus un « déclencheur ». C’est ce déclencheur qui va favoriser l’action souhaitée de la part de l’utilisateur.

Amélie Boucher, consultante ergonome, parle dans son livre « Ergonomie Web » de micro utilité. Les micro utilités viennent compléter l’utilité globale pour offrir à votre service une valeur ajouté. Il s’agit de ces petits bonus qui vont se mettre au service de votre utilité globale. Vous avez quelque chose à proposer, comment faire pour que votre offre soit la plus adaptée possible aux besoins de l’utilisateur. Quelle utilité complémentaire vais-je pouvoir proposer à mon utilisateur pour le satisfaire un maximum.

Cela peut être par exemple sur un site de e-commerce de produits alimentaires, la possibilité d’enregistrer des listes de courses personnalisées pour ne pas à refaire son panier à chaque commande. L’utilité globale du site est de permettre l’achat de ses courses alimentaires en ligne, une micro utilité est de pouvoir enregistrer sur son compte une liste de produit fréquemment achetée que l’on réactive à chaque nouvel achat pour remplir directement son panier des produits de bases que nous consommons à chaque commande.

Pour trouver des micro utilités (éléments déclencheurs des actions souhaités), il faut être capable de déterminer les profils et les caractéristiques de ses utilisateurs. Il faut arriver à se mettre à leur place et trouver les problèmes auxquels ils sont confrontés dans leur quotidien afin de trouver des solutions à travers ces micro utilité. L’ergonomie utilise pour cela la technique des « Personas » qui sont des profils types d’internautes pour qui on définie un scénario d’utilisation de votre site et des besoins précis.

Donc posez-vous la question, de quoi sont demandeur vos utilisateurs, quels sont leurs problèmes, leurs besoins, leurs habitudes ….

Attention réfléchissez ensuite au rapport utilité/cout de réalisation. Pour qu’une micro utilité soit retenue, il faut que celle-ci soit vraiment pertinente pour l’internaute par rapport à son cout de développement et de mise en place.

Ou trouver le contenu ?

Ces recommandations sont largement inspirées du livre « Ergonomie Web » d’Amélie Boucher :

Inspirez-vous de l’existant

Commencer par reprendre ce qui existe : site internet, plaquette commerciale, journal interne … et faite le tri. Certaines choses pourront être reprises, d’autres non. Vous devrez également penser à réecrire le texte pour l’adapter au média web.

Sollicitez tous les acteurs du projet

Plus vous serez nombreux à réfléchir, plus vous récolterez d’idées. N’hésitez pas à organiser un brainstorming avec l’ensemble des acteurs du projet.

Mettez-vous à la place de vos internautes

Utilisez la technique des personas pour imaginer des profils types d’utilisateur, leurs besoins, leurs habitudes de navigation.

Pour en savoir plus sur l’utilisation des personas :

- Personas: pas seulement pour une Vision partagée des Utilisateurs…
- Extending a technique group personas
- An introduction to personas and how to create them

Inspirez-vous des besoins exprimés par vos utilisateurs

Interrogez les personnes qui sont le plus en contact avec vos clients. Quelles sont les questions les plus posées ? Quelles sont les problèmes les plus fréquents ? Vous pouvez aussi initier une enquête pour récolter leurs besoins, leurs manques, leurs satisfactions-insatisfactions.

Étudier ce qui se fait ailleurs

Regardez ce qui se fait chez vos concurrents directs mais aussi chez ceux qui offrent les mêmes actions que vous. Vous vendez du fromage, chercher des sites concurrents vendeurs de fromages mais aussi des sites qui se positionnent sur des activités similaires aux vôtres: vendeurs de chocolats, de bricolage, de vêtements … Ce qui compte c’est d’observer ce qui se fait, de repérer les bonnes idées et de s’en inspirer.

Comment présenter, rédiger son contenu ?

Le média web utilise des écrans pour afficher les informations. Les écrans, qu’ils soient d’ordinateur, de téléphone mobile, de PDA ou d’autres machines électroniques sont du fait de leur taille très variable et de leur mode de fonctionnement, d’un confort de lecture moindre que le support papier. Pour cette raison, les utilisateurs ne lisent pas de la même manière les informations sur un média web et sur un média print.

Le média web est aussi une source infinie d’informations. Cette abondance nous oblige à parcourir plusieurs sources afin de choisir celles qui seront les plus proches de nos attentes. Les résultats de recherche dans les moteurs ne sont pas toujours pertinents et nous demande un travail de tri. De plus, nous consultons souvent internet pour gagner du temps et obtenir des informations sans avoir à se déplacer.

Toutes ces caractéristiques font qu’un internaute, lorsqu’il arrive sur une page web, ne lira pas en détails le contenu de la page mais scannera l’information pour évaluer rapidement si il est au bon endroit pour trouver ce qu’il cherche. Le scanne des pages existe aussi sur les supports print mais il est accentué sur le média web. L’internaute sera donc sensible aux indices visuels pour parcourir et évaluer la pertinence du message. Lorsqu’il aura trouvé l’information pertinente, il lira le texte en profondeur.

Recommandations pour rédiger du contenu web :

Utiliser un vocabulaire simple

L’internaute est pressé et veut obtenir ce dont il a besoin le plus rapidement possible. Rédigez donc votre texte en ne mettant que ce qui est nécessaire. Évitez les répétitions, les évidences ou les détails superflues.

Soyez simple et concis. Évitez les mots techniques, le langage spécialisé, les formules littéraires compliquées surtout si votre publique est généraliste. La lecture doit être facile et rapidement compréhensible.

Les internautes préfèrent également un ton direct et personnel plutôt qu’un langage trop formel.

Aller à l’essentiel

Essayez de dire le maximum de choses en un minimum de mots.

Allez droit au but et minimisez le discours marketing. Les internautes ne croient plus aux belles promesses publicitaires. Parlez vrai et simple et laissez l’internaute se faire sa propre idée.

Formater le texte pour le rendre plus lisible

Pour aider l’internaute à scanner vos pages, hiérarchisez l’information et structurez votre texte. Pour cela, utilisez les titres et sous-titres, les énumérations à l’aide de liste, aérez votre texte en faisant des paragraphes courts, faites des phrases courtes.

Pour une meilleure lisibilité, assurez-vous d’avoir suffisamment de contraste entre le texte et l’arrière plan, utilisez une police suffisamment grande, n’ayez pas des paragraphes trop longs horizontalement.

Utiliser la technique de la pyramide inversée

Jakob Nielsen, ergonome Américain, préconise de commencer ses textes par la conclusion puis de dévoiler les faits qui vont l’appuyer. Ainsi vous donnez au lecteur « l’essentiel » des les premières lignes. Si cela l’intéresse, il continuera sa lecture.

Conclusion

Lorsque vous voulez créer un site, portez un soin particulier au contenu. Ce n’est pas le site qui décide du contenu mais le contenu qui détermine la façon dont votre site sera construit.

Pour déterminer le bon contenu, pensez d’abord aux besoins de vos utilisateurs. Vous faite un site pour eux avant-tout. Réfléchissez à ce que vous allez proposer, est-ce que le discours du président du groupe intéressera l’internaute qui veut acheter un téléviseur ?

Pensez également à adapter la rédaction de votre contenu aux habitudes de lecture de vos internautes.

Enfin, ne prenez pas toutes ses règles au pied de la lettre. Chaque type de site a ses particularités et nécessite des adaptations.

Sources :

- Ouvrage « Ergonomie web » – Amélie Boucher – Eyrolles
- Ouvrage « Site web: priorité à la simplicité » – Jakob Nielsen et Hoa Loranger – Campus press
- Site Veblog de Vincent Bénard
- Site Ergologique

Introduction

Sur des projets de site web, il arrive que le client ait seulement qu’une vague idée de ce qu’il veut et ne vous fournisse pas de cahier des charges. Il n’est alors pas facile d’établir un devis car vous ne disposez pas assez d’éléments pour estimer la charge et le prix de votre prestation.

Dans ce cas, vous n’avez d’autre choix que d’envoyer au client un questionnaire ciblé et le plus exhaustif possible pour obtenir les informations qu’il vous manque.

Il est important de prévenir le client que la réalisation d’un site internet lui demandera un investissement en temps et en réflexion. En effet, son rôle sera de vous transmettre avec précision ses besoins, ses attentes, ses connaissances de l’entreprise, ses connaissances de la cible et de ses concurrents mais aussi de vous fournir tout le contenu (texte, images, vidéo, audio …) dont il dispose. Il devra également se rendre disponible pour vos questions et des réunions de travail/validation.

Il existe à mon avis deux types de questionnaire :

- Le questionnaire qui va vous permettre d’appréhender les contours du projet, c’est à dire qui va vous permettre d’estimer la quantité de travail à fournir. C’est ce questionnaire qui va vous aider à établir votre devis. Ce questionnaire est le premier document à envoyer à votre client juste après le premier contact téléphonique si celui ci n’a pas de cahier des charges à vous remettre ou si ce cahier des charges est incomplet.

- Le questionnaire créatif appelé aussi brief créatif qui va vous permettre de réaliser le design du site. Ce questionnaire intervient après signature du devis et versement de l’acompte. Il peut être complété lors d’une réunion de travail. J’ai déjà parlé de ce type de questionnaire dans l’article : « Le brief créatif« .

Pour aider le client à répondre à vos questions, accompagnez-les d’exemples concrets ou de liste de choix. Pensez également pour chaque liste de suggestions à laisser une case « Autres ? » pour qu’il puisse ajouter des éléments que vous n’avez pas cité.

Voici un exemple de questionnaire pour établir un devis. Ce questionnaire n’est pas une référence absolue. A vous de l’adapter ou de le compléter selon vos besoins.

Questionnaire pour établir un devis

1. Identité

a) Nom et coordonnées du client ?
b) Nom, prénom, fonction, coordonnées des différents intervenants sur le projet ?

2. État des lieux de l’existant

a) S’agit-il d’une refonte d’un site existant ?
b) Y a t’il des éléments d’autres supports de communication à reprendre ? lesquels ?
c) S’agit-il d’un projet complétement nouveau ?

3. Objectifs du site

a) Quel est l’objectif principal du site ?
(Ex : E-commerce, informer, présenter un service, présenter un produit, lancer une campagne de publicité, communiquer, offrir des services … autre ?)

b) Quels sont les objectifs secondaires du site ?

4. Actions

a) Quels sont les actions que vous souhaiteriez que votre cible puisse effectuer sur le site ?
(Ex : Acheter un produit, consulter des fiches d’informations, saisir une demande de devis, découvrir votre entreprise, trouver les coordonnées de collaborateurs, postuler à une annonce d’emploi … autre ?)

b) Parmi ces actions, quelles sont celles à mettre en avant ?

5. Contenu

a) Quels types de contenu souhaitez-vous afficher sur le site ?
(Ex : Texte, son, images, photos produits, vidéo … autre ?)

b) Combien de pages de contenu seront à prévoir ?
c) Quelles seront les grandes rubriques du site ?

6. Fonctionnalités

a) Quelles fonctions souhaitez-vous voir apparaitre sur le site ?
(Espace d’administration, news type blog, forum de discussion, galerie de photos, moteur de recherche, formulaire de contact, autres type de formulaires … autre ?)

7. La cible

a) Décrivez les caractéristiques de votre cible (age, genre, secteur d’activité, appartenance sociale …) ?

8. La concurrence

a) Connaissez vous vos concurrents ? Si oui, indiquez les URLs de leur site internet.
b) De quelle manière souhaitez-vous vous différencier de la concurrence ?

9. Technique

a) Avez-vous des exigences sur les technologies à utiliser ?
b) Avez-vous un compte d’hébergement prévu pour ce site ?
c) Avez-vous un nom de domaine réservé ?

10. Planning

a) Avez-vous une date limite de mise en production à respecter et si oui laquelle ?

11. Budget

a) Quel est le budget maximum à ne pas dépasser pour ce projet ?

12. Vos besoins en cession de droits d’exploitation

Décrivez les droits que vous souhaitez acquérir sur les créations d’auteur (graphisme, vidéo, son …)

- Que souhaitez-vous comme durée de cession ?
- Sur quel(s) support(s) souhaitez-vous diffuser les visuels (nombre et nature) ?
- Étendue géographique de la diffusion ?
- Souhaitez-vous acquérir le droit de modifier les sources ?
- Souhaitez-vous rétrocéder les droits d’exploitation ou de diffusion à de multiples clients ? Combien ?
- Souhaitez-vous négocier que le nom de l’auteur ne soit pas cité en légende des visuels ?
- Souhaitez-vous négocier avec l’auteur pour qu’il ne revendique pas la paternité des visuels en public ? (préciser les supports concernés) ?

Si vous voyez d’autres informations importantes à demander au client pour établir votre devis, n’hésitez pas à me les signaler dans les commentaires pour que je complète ce questionnaire.

Introduction

La partie design est une étape délicate à gérer dans le processus de création d’un site web car le client est toujours impatient de voir le résultat visuel de son futur site. Or, cette partie du processus réclame de nombreuses étapes de recherche, de tâtonnement, d’essais, d’ajustement avant d’arriver à un résultat aboutit et définitif.

Le client, ne connaissant par forcément les étapes du processus de création, aura tendance à croire que ce que vous lui montrez correspond à l’image du design finalisé. Il portera alors son attention sur des détails plutôt que d’évaluer et de réfléchir sur le concept général.

C’est donc au graphiste d’expliquer au client les points sur lesquels il est important de se focaliser. Pour lui faciliter la tâche, il est judicieux d’utiliser des documents de travail qui se concentrent davantage sur le fond que sur la forme. Parmi ces documents de travail, nous avons déjà parlé des zoning et des wireframe. Un autre document de travail dans le même esprit se trouve être le panneau d’humeur.

Qu’est ce qu’un panneau d’humeur

Un panneau d’humeur est le regroupement d’un ensemble d’éléments sélectionnés (images, couleurs, textures, typographies, textes, objets …) juxtaposés les uns à côté des autres comme on le ferait pour un collage, afin d’établir une ambiance, une atmosphère, un concept, une humeur, une expression, un ton, un ressentit, un style, sans avoir besoin de réaliser une création graphique aboutit et organisée.

Pour réaliser ce panneau, vous utiliserez généralement des coupures de magazines, de journaux, d’affiches, des photographies, des textes, des objets … Cela peut également être des ébauches faites rapidement à l’ordinateur, des palettes de couleurs, des morceaux de papier peints, des emballages, bref tout ce qui pourrait évoquer l’ambiance que vous voulez créer pour votre maquette graphique.

Pour un webdesign, votre panneau d’humeur peut également présenter une ébauche de l’aspect des boutons, des formulaires, des cadres de contenus, de la typographie des différents niveaux hiérarchiques, des icônes, du traitement des images …

Le tout doit vous aider à mettre en place l’aspect général et l’atmosphère du futur design. La démarche est assez similaire à celle que l’on utilise en dessin ou l’ébauche, le tâtonnement puis la construction précèdent l’affinement des détails et la finalisation du concept.

Exemple de panneau d’humeur :

Photographie de Maria Grzesiak sous licence CC

Utilité du panneau d’humeur

Le panneau d’humeur peut avoir plusieurs avantages :

Séparer le fond de la forme

Le panneau d’humeur étant un regroupement d’éléments, sans cohérence logique de mise en page, le client peut difficilement imaginer l’aspect final de son site à partir de ce genre de support. Cela vous permet de capter toute son attention sur le concept et non sur des détails qui sont pour vous sans importance à cette étape du processus.

Lorsque vous avez à faire à un groupe de décisionnaires, la validation du design peut s’avérer encore plus compliqué. En effet, si chacun exprime ses préférences personnelles, vous n’arriverez jamais à satisfaire tout le monde. Le panneau d’humeur ne présentant que le concept, il est plus facile de concentrer les réflexions sur le coeur du problème et éviter ainsi que chacun s’épanche sur ses propres goûts.

Impliquer davantage de personnes dans le processus

Le panneau d’humeur étant facile à comprendre et à réaliser, sans besoin de compétences graphiques ou informatiques particulières, vous pouvez impliquer plus de personnes pour vous aider à construire le panneau.

Gagner du temps

Les panneaux d’humeur sont rapides à mettre en place car facile à réaliser. Le designer à souvent tendance à vouloir peaufiner les détails avant même que le concept soit validé. Avec le panneau d’humeur, vous réalisez un prototype, vous n’avez donc pas besoin de perdre du temps dans les détails. Si le client souhaite modifier le concept, vous pouvez facilement et rapidement adapter et modifier le panneau.

Avec le panneau d’humeur, vous évitez également la perte de temps dans la prise en compte de considérations superflues.

Structurer votre processus créatif

Le panneau d’humeur permet de réfléchir en amont sur le design sans se perdre dans les détails. Il permet de libérer ses idées sans toucher à l’ordinateur et de les soumettre au client rapidement.

Une fois cette étape accomplie, vous avez une fois pour toute, toutes les orientations graphiques dont vous avez besoin pour créer votre design. Vous pouvez alors vous concentrer sur la mise en page et la communication graphique.

Différents types de panneau d’humeur

Le panneau d’humeur d’inspiration

Vous pouvez utiliser un panneau d’humeur pour regrouper un certain nombre d’éléments qui vous servira de référence d’inspiration. Il s’agit ici de réunir des idées intéressantes que vous auriez put trouver dans votre environnement (affiche publicitaire, photographie, journaux …) pour vous en inspirer par la suite dans vos créations.

Le panneau d’humeur tonalité

Le panneau d’humeur tonalité est plus précis et plus cohérent que le panneau d’humeur d’inspiration. Il rassemble des éléments qui groupés ensemble donnent une idée de la tonalité que vous souhaitez mettre en place dans le futur design.

La présentation de ces panneaux d’humeur peuvent être plus ou moins structurée : juxtaposition de type collage ou modèle de présentation des différents types d’éléments.

Pour voir un exemple de panneau d’humeur structuré, allez faire un tour sur blog « 404 creative » et lisez l’article « Website Mood Boards: A Successful Precursor to Visual Prototyping« . En fin d’article, vous trouverez des copies d’écran de panneau d’humeur structuré destinés à présenter des idées pour des design web.

Conclusion

Un webdesigner va utiliser un panneau d’humeur pour évoquer un concept, un ressentit et donner le ton du futur design.

Cette étape correspond au prototypage du design c’est à dire à la phase de recherche. L’absence de création aboutit vous permet de garder l’attention du client sur l’idée général du concept plutôt que sur des détails.

L’objectif est d’obtenir du client un maximum de validation sur la piste créative à suivre avec une idée assez précise du résultat, avant de passer à la phase de production qui est la plus couteuse en temps de réalisation.

En impliquant le client dans la phase de création, vous lui procurerez une certaine satisfaction. De plus, au moment de valider la maquette finale, il sera plus difficile pour lui de renier des idées auxquels il aura lui même participé.

Note du 17.10.2008 : Je viens de découvrir un article richement illustré sur le concept board plus aboutit que celui que je viens de vous présenter. Il s’agit de l’article « Le concept board webdesign » écrit par Frédéric Kalfon – Directeur de création chez SQLI Agency dont je vous recommande vivement la lecture.

Sources :

• - Article du blog Life Clever :5 reasons to design with mood boards
• - Article du blog Viget :Getting Moody: A Look at Inspiration and Style in Early Design Techniques
• - Article du blog 404 Créative : Website Mood Boards: A Successful Precursor to Visual Prototyping

Qu’est ce qu’une charte graphique ?

Une charte graphique est un document qui décrit les caractéristiques visuelles d’un support de communication. Vous devez y trouver l’ensemble des règles d’utilisation des différents signes graphiques qui constituent l’identité graphique d’une entité (organisation, entreprise, administration, club sportif, association …)

Je ne parlerai dans cet article que du cas de la charte graphique web.

A quoi sert-elle ?

La charte graphique sert de référentiel.

Elle permet aux différents acteurs susceptibles de travailler et/ou de modifier l’aspect graphique d’un support, de garder une cohérence visuelle sur l’ensemble de ce support. Cela garantie une identité graphique claire, homogène et sans ambigüité.

Cette cohérence graphique facilite :
- la reconnaissance de l’entité par le récepteur
- l’expérience de navigation de l’utilisateur au sein des pages d’un même support

Qui doit la rédiger ?

Le rédacteur de la charte graphique est généralement un créatif. Il est logique que la personne qui ait conçue le design d’un site web, rédige également la charte graphique. En effet, c’est à priori la personne la plus au courant des choix graphiques effectués dans la mise en place du design.

Notons, que dans le cadre d’un site internet, il est possible à partir des feuilles de style CSS, de retrouver une grande partie des informations nécessaires à l’élaboration de la charte graphique.

Comment la rédiger ?

Voici une proposition de plan pour rédiger une charte graphique :

I. Univers graphique

1. Objectif(s) et contexte

Quel est brièvement l’objectif du site ?
Dans quel contexte se fait cette création ?
Si il s’agit d’une refonte, quels sont les points à améliorer ?

2. Tonalité graphique

Quel doit être l’ambiance du site ?
Quelles caractéristiques graphiques doivent se dégager ?

3. Message(s) à véhiculer

Quel message le design devra-il transmettre ?

4. Valeur(s) à transmettre

Quelles valeurs de l’entreprise le design devra-il transmettre ?

II. Organisation structurelle des écrans

Comment les grands blocs de contenu s’organisent-ils dans la mise en page ?

Cette partie peut être reprise des documents de zoning établit par les responsables d’architecture de l’information, les ergonomes et les directeurs artistiques. Les documents de zoning indiquent également les niveaux de hiérarchie des différents éléments dans la page.

III. Organisation métrique des écrans

1. Description des côtes

Il s’agit de la taille en pixel des principaux blocs d’éléments de la page.

2. Description des marges

Il s’agit de la taille en pixel des marges qui séparent les principaux blocs d’éléments de la page.

A partir des gabarits des principaux écrans du site, placer des repères visuelles et des commentaires indiquant des informations sur la taille des éléments et les marges qui les séparent. Cette description doit permettre aux intégrateurs de construire les pages en respectant les proportions, les positionnements, les blancs tournant qui caractérisent la mise en page dessinée par le graphiste. Attention, ne négligez pas les petits éléments comme les boutons, les puces, les icônes … qui doivent également être placés de manière rigoureuse et homogène sur toutes les pages.

IV. Palette chromatique

Elle décrit l’ensemble des caractéristiques chromatiques utilisés dans le site.

Indiquer également si certaines couleurs sont à proscrire ou au contraire déjà utilisées dans d’autres supports de communication et donc à réutiliser.

Ne pas oublier les différentes couleurs des liens selon leur état (visité ou non, actif, rollover …).

V. Typographie

Il s’agit de la description de tous les paramètres liés au texte et blocs de texte : police, taille, graisse, soulignement ou pas, interlignage, interlettrage …

VI. Éléments graphiques

Il s’agit du logo, des icônes, des pictogrammes, des puces, des illustrations et des photographies.

Indiquer leurs tailles, leurs couleurs, leurs zones d’exclusion (logo), leurs marges, la présence d’un cadre ou non.

Pour les pictogrammes et icônes, indiquer leur signification et leur fonction.

Sources :

Charte graphique, Wikipédia.
Elaborer un document de charte graphique pour le web, livre blanc rédigé par Benoit Drouillat.

Qu’est ce qu’un cahier des charges ?

Un cahier des charges est un document écrit, structuré, qui décrit de façon exhaustive les spécifications d’un projet correspondant à un besoin. Un cahier des charges, outre les spécifications, peut aborder les modalités d’exécution du projet ainsi que les objectifs à atteindre.

Dans cet article, je m’attacherai à parler uniquement d’un besoin de création de site internet.

A quoi sert-il ?

A formaliser et communiquer ses besoins

Un document écrit force le rédacteur à exprimer l’ensemble de ses idées et à les structurer (l’écrit structure la pensée). Ce document constitue une trace réelle de vos besoins et une preuve tangible de leur existence.

Avoir une idée des ses besoins et espérer les transmettre par oral lors d’une réunion avec un prestataire est une démarche périlleuse qui manque de professionnalisme. En effet, vous risquez d’omettre des choses importantes, votre auditoire risque d’oublier ou d’interpréter certains aspects de vos explications, la transmission de vos besoins risque d’être décousue.

Il est beaucoup plus difficile de contester une information qui a été formalisée par écrit qu’une information transmise par oral.

Un cahier des charges écrit est donc l’outil de communication le plus fiable et le plus clair pour exprimer et transmettre vos besoins.

A contractualiser un devoir d’obligation d’information générale

Le cahier des charges n’est pas un document juridique cependant il constitue un document contractuel entre un client et un prestataire recensant les attentes et les besoins concrets du client. Il répond ainsi au devoir d’obligation juridique d’information général définit par le code de la consommation ( Livre Ier, titre Ier, chapitre Ier).

En contre partie, le prestataire, si il dispose d’un cahier des charges, pourra remplir ses devoirs de renseignements, de mise en garde et de conseils auprès du client.

A sélectionner un prestataire

Le cahier des charges permet de transmettre rapidement ses besoins aux prestataires afin que ceux ci puissent les étudier et proposer des solutions. De ces différentes réponses, découlera le choix du partenaire à qui sera confié le projet.

A servir de référentiel tout au long du projet

Le cahier des charges est un outil de communication et un référentiel pour le chef de projet tout au long du processus de création d’un site web. Il lui permet de vérifier que le prestataire suit bien les recommandations et ne s’écarte pas du cap. Pour le prestataire, ce document est un guide précieux pour s’assurer qu’il remplit les objectifs définit par le client.

Qui doit le rédiger ?

Le cahier des charges doit être fournit par l’émetteur du besoin c’est à dire le client.

Qui d’autre que le client peu le mieux expliquer la nature de ses besoins et connaitre le contexte de l’entreprise ? Il est fréquent de constater que c’est le prestataire qui rédige le cahier des charges à partir des informations transmises par oral par le client. Je le répète, c’est une mauvaise chose. Si le client est mal à l’aise pour rédiger son cahier des charges, il est préférable qu’il externalise ce travail auprès d’un consultant spécialisé.

Dans les entreprises d’une certaine taille, c’est généralement le chef de projet qui rédige le cahier des charges en collaboration avec les différents services concernés par le projet (service marketing, communication, informatique …).

Comment le rédiger ?

Le cahier des charges n’a pas besoin d’être une encyclopédie. Selon le projet, un document d’une vingtaines de pages peu suffire. Il n’a pas besoin d’être verbeux ou très technique. Un vocabulaire simple est préférable. Le principal est que le besoin soit clairement définie pour permettre aux prestataires une bonne compréhension.

Voici un exemple de plan décrivant les éléments à aborder dans un cahier des charges de création de site internet :

I. Présentation

1. Présenter l’entreprise

• Son historique
• Sa taille (CA et nombre de salariés)
• Ses activités principales
• Ses produits et/ou services
• Son organigramme

2. Présenter l’existant

• Support de communication
• Existant fonctionnel
• Existant technique

II. Description des besoins

1. Les objectifs du site

• Site de vente en ligne
• Site de lancement d’un produit, d’un service
• Site vitrine
• Site éditorial
• Site d’information
• Site de fidélisation …

2. La cible du site

• Nature (entreprise, particulier, collaborateur …)
• Genre
• Tranche d’age
• Appartenance sociale
• Attentes
• Style de vie …

3. Les contenus

• Quel type de contenus allez-vous fournir (texte, sons, vidéos, illustrations, photographies, logo …)
• Sous quel format (.doc, .pdf, .mp3, .jpg …)
• Nombre de pages, photos, fichiers …

4. L’architecture du site

• Nombre de rubriques et leur libellés
• Schéma d’arborescence de la navigation

Faite un inventaire exhaustif de toutes les informations et contenus qui seront diffusés sur votre site. Faites des regroupements par thème puis hiérarchisez l’information en rubriques, sous-rubriques.

5. Les besoins fonctionnels

• Besoins fonctionnels en « front office »
• - Moteur de recherche
• - Galerie d’images
• - Formulaire d’inscription à une newsletter
• - Présentation de news …
• Besoins fonctionnels en « back office »
• - Ajouter, effacer, modifier une news
• - Ajouter, effacer, classer des images
• - Gestion de la newsletter
• - Gérer les profils utilisateurs …

6. Les besoins techniques

• Architecture technique
• Configuration logicielle
• Configuration matérielle
• Hébergement
• Nom de domaine
• Reprise de l’existant
• Sécurité …

7. Les besoins en référencement

• Référencement naturel
• Référencement actif
• Mots clés de positionnement
• Annuaires ciblés …

8. Les besoins de suivis

• Statistiques de fréquentation
• Suivis du référencement
• Maintenance et mise à jour des applications
• Formations
• Assistance technique …

9. Les besoins en cessions de droits d’exploitations (patrimoniaux)

Décrivez les droits que vous souhaiter acquérir sur les créations d’auteur (graphisme, vidéo, son …)

• Que souhaitez-vous comme durée de cession ?
• Sur quel(s) support(s) souhaitez-vous diffuser les visuels (nombre et nature) ?
• Etendue géographique de la diffusion ?
• Souhaitez-vous acquérir le droit de modifier les sources ?
• Souhaitez-vous rétrocéder les droits d’exploitation ou de diffusion à de multiples clients ? Combien ?
• Souhaitez-vous négocier que le nom de l’auteur ne soit pas cité en légende des visuels ?
• Souhaitez-vous négocier avec l’auteur pour qu’il ne revendique pas la paternité des visuels en public ? (préciser les supports concernés) ?

III. Prestations attendues

Quels sont les livrables que vous souhaitez obtenir du prestataire pendant et à l’issu du projet ?

• Un planning de réalisation
• Une arborescence détaillée du site
• Une expertise et des recommandations ergonomiques
• Zoning, wireframes, maquettes
• Une documentation technique …

Conclusion

Comme nous venons de le voir, le cahier des charges est un document important qu’il ne faux pas négliger. Il vous permettra d’y voir plus clair dans vos idées, de mieux communiquer vos besoins et de faciliter le choix d’un prestataire.

Lorsque le choix de votre prestataire sera effectué, la partie graphique sera abordée au cours d’un brief créatif avec le directeur artistique de l’agence web.

Sources :

Cahier des charges – Wikipédia
Message de Laurent Desmontiers sur le forum 1DCafé (questions concernant la cession des droits d’auteur)

Cette étape de conception des pages est réalisée à l’aide, dans un premier temps, de la technique de « zoning ». Puis les choses s’affineront avec l’établissement d’une représentation des pages plus aboutie : les wireframes.

Le zoning

Le zoning est une technique simple qui consiste a représenter une page de votre site à l’aide de boites qui symbolisent les grandes fonctionnalités et les zones principales de contenu. Cette étape est primordiale pour décider le l’organisation générale de vos pages. On ne résonne ici qu’en terme de zones (boites), le détail des éléments qui rempliront ces zones ne sera abordé qu’à l’étape des wireframes.

Chaque boite (carrés, rectangles …) représente une entité majeure de votre site qui doit trouver sa place sur l’écran en fonction deux critères principaux :

• Son importance hiérarchique.
• Son encombrement spatial.

L’encombrement spatial est matérialisé par la forme des boites, l’importance hiérarchique par une valeur de gris par exemple.

Bien sure vous devez, lors de cette étape, avoir déjà une idée approximative de la taille qu’occuperont vos éléments sur la page. Cela suppose que vous ayez débroussaillé le travail lors de l’étape de rassemblement de votre contenu et de l’architecture de l’information.

Exemple de zoning de la page d’accueil du thème WordPress « Enjoy » (en cours de réalisation)

Cette étape tient généralement compte de la résolution cible de vos utilisateurs.

Il faut également tenir compte de la zone au dessus du « fold » (zone visible de l’écran sans avoir à scroller). Le fold représente une ligne virtuelle qui se situe en bas de votre écran et délimite la zone à partir de laquelle les informations sont accessibles uniquement par défilement. En effet, les éléments les plus importants devront se situer au dessus du fold où à cheval sur celui-ci pour suggérer leurs présences.

Il est important de comprendre (et de faire comprendre au client) que la réflexion se porte uniquement sur l’organisation générale des grandes zones d’influence du site et non sur le choix des couleurs où des icônes. Le client ne doit donc pas être frustré par le niveau d’abstraction élevé de représentation des pages de son site à cette étape.

Ce travail se concrétise par l’établissement d’un livrable qui servira de document de discussion avec le client pour correction puis validation.

Les wireframes

Une fois que l’organisation générale des pages a été validé à l’aide de la technique du zoning, nous pouvons commencer à affiner les choses en réalisant des wireframes.

Attention, le terme wireframe possède de nombreux synonymes que vous rencontrerez sûrement selon les personnes avec qui vous travaillerez :

• Maquette ergonomique
• Maquette fonctionnelle
• Prototype
• Storyboard
• Mockup
• Layout …

Les wireframes sont des maquettes dans lesquelles on détail le contenu des boites définies dans l’étape de zoning. Il s’agit de réfléchir non pas sur le graphisme mais sur les aspects fonctionnels et ergonomiques des éléments qui rempliront ces boites. C’est pourquoi il est conseillé de réaliser les wireframes en noire et blanc pour ne pas distraire le client des objectifs principaux de ce type de document. Vous pouvez tout de même représenter les liens hypertetxes en bleu. En aucun cas les aspects purement graphiques ne doivent être abordés lors de cette étape.

Le document qui va réunir l’ensemble des fonctionnalités d’un site sous forme de wireframes est appelé story-board.

Chacune des boites qui composent notre zoning contient par exemple du contenu texte, des éléments de navigation, des formulaires, des listes, des images … Ce sont ces éléments que vous devez maintenant décrire sur votre maquette. Vous devez connaître la taille précise en pixel de ces éléments, décrire visuellement et par écrit le fonctionnement et les différents états des éléments fonctionnels tel que les menus où les formulaires.

Une réflexion approfondie doit être entamée sur le vocabulaire des rubriques, des titres, des liens, des libellés de bouton, des champs de formulaire, des messages d’erreurs … Pour le corps du texte, si possible utilisez du vrai texte, celui qui sera utilisé pour le site, à défaut utilisez les « Lorem ipsum ».

Vous devez également être attentif à décrire l’apparence des objets dans leurs différents états :

Pour les éléments cliquables quel sera leur aspect à l’état nominal, survolé, activé.

Pour le workflow d’un panier d’achat quel sera l’apparence des différents boutons.

Toutes ces descriptions vont permettre de faciliter le travail des intégrateurs, des développeurs et des graphistes en levant les ambigüités.

Exemple de wireframes de la page d’accueil du thème WordPress « Enjoy » (en cours de réalisation)

Comme pour le zoning, l’établissement des wireframes se concrétise par la réalisation de livrables qui seront communiqués au client afin de débattre, corriger puis valider la conception des pages du site avant de passer au design graphique.

Conclusion

L’erreur classique est de vouloir se précipiter sur l’aspect graphique des pages du site sans porter attention à l’ergonomie et à la conception de la mise en page. Cette erreur se paye généralement en retours successifs qui couterons chère en temps et en argent. Les étapes de zoning et wireframe sont donc indispensables dans le process logique de la construction d’un site internet et il faut y porter une attention particulière. Cela sera d’autant plus vrai que le projet sera important.

Travailler avec le client et l’équipe projet à partir de ce type de documents (zoning, wireframe) permet de se concentrer sur le fond (fonctionnalités, interactions, contenus) sans se laisser distraire par la forme (design).

Sources :

Ouvrage : Ergonomie web, pour des sites efficaces – Amélie Boucher – Ed. Eyrolles

Je vous propose une traduction française de cet article avec l’aimable autorisation de l’auteur. N’ayant pas un anglais irréprochable, je renouvelle votre indulgence sur les éventuelles erreurs de traduction.

10 façons de faire approuver votre design

Une des choses les plus stimulantes dans le processus de webdesign est d’arriver à finaliser ce design. Cela peut s’avérer long, démoralisant et si vous n’êtes pas vigilant, cela peut conduire au mécontentement du client. De plus vous pouvez vous retrouver avec un design que vous aurez honte d’inclure dans votre portfolio.

Comment alors pouvez vous vous assurer que le design que vous produisez est celui qui sera construit ? Comment obtiendrez-vous du client qu’il valide votre design ? Voici 10 conseils appris suite à plusieurs années d’amères expériences.

1. Définir les rôles du client et du designer

La plupart des clients avec lesquels vous travaillerez n’auront jamais été impliqués dans un projet web. Même si ils l’ont été ils auront probablement travaillés d’une façon différente de celle à laquelle vous vous attendez. Prenez le temps au début du projet d’expliquer le rôle qu’ils jouerons dans la mise en place du design du site.

La meilleure approche et de mettre en avant que leur travail et de se concentrer sur les besoins de leur utilisateurs et sur leur marché. Ils doivent se concentrer sur ce vaste sujet, pendant que vous vous préoccupez des détails de la mise en page, de la typographie et des combinaisons de couleurs.

En précisant ce que vous attendez du client, vous l’aidez à fournir les bonnes informations tout au long du processus.

2. Comprendre le marché sur lequel se positionne le client

Avant d’ouvrir votre logiciel de graphisme ou de griffonner sur papier, prenez le temps de vous assurer votre propre compréhension non pas seulement du brief mais de l’entreprise qui se cache derrière le site. En comprenant les objectifs économiques, l’organisation structurelle et la stratégie marketing de l’entreprise, votre processus de création sera plus avisé.

Vous ne pouvez pas compter uniquement sur le brief pour vous fournir toutes les informations dont vous avez besoin. Il est important de creuser davantage et d’obtenir la meilleure compréhension possible du marché client. Cette information sera extrêmement précieuse pour justifier vos décisions de votre processus de création.

3. Comprendre quel sera la cible

Nous aimons tous penser à nous même, en tant que designer centré utilisateur, mais quel effort exactement faisons nous pour connaitre nos utilisateurs avant d’entamer notre processus de création ?

Prenez le temps de vraiment les comprendre le mieux que vous pouvez. Essayez de rencontrer de véritables utilisateurs potentiels et de connaître leurs besoins. Faute de quoi travailler avec le client pour comprendre la personnalité des utilisateurs et vous aider à trouver quel type de profil ils ont.

Comprendre vos utilisateurs améliore non seulement la qualité de votre travail, mais contribue également à déplacer le débat loin des préférences personnelles du client et plus proche des personnes dont l’opinion compte vraiment.

4. Eviter plusieurs concepts

Beaucoup de clients apprécient l’idée d’avoir la possibilité de choisir entre plusieurs concepts. Cependant, bien que se soit a priori une bonne idée cela peut devenir contre-productif pour la finalisation du design.

Dans un monde où les budgets sont limités, il n’est pas sage de gaspiller de l’argent à produire des modèles qui seront en fin de compte jetés. Les ressources seraient mieux dépensés dans l’affinement d’un design unique à travers de multiples itérations.

Qui plus est, plusieurs concepts sont souvent source de confusion plutôt que de clarté. Il est courant pour un client de demander un des éléments de la première conception et un élément de la seconde. Comme tout créateur le sait, cela fonctionne rarement.

5. Utiliser des panneaux d’ambiance

Les clients sont souvent meilleur pour exprimer ce qu’ils n’aiment pas que pour décrire ce qu’ils font. C’est une des raisons pour lesquelles ils aiment demander la production de plusieurs concepts. Une alternative moins coûteuse consiste à créer une série de panneaux d’ambiance. Ces panneaux contiennent une collection de couleurs, de typographie et d’images qui représentent différentes « humeurs » ou orientations vers lesquelles la conception pourrait tendre.

Les panneaux d’humeur sont rapides et faciles à produire, cela vous permet de tester différentes approches de conception avec le client sans avoir à investir le temps nécessaire pour produire des concepts de design complet. Cela signifie que, avant que vous développiez un concept, client et concepteur se sont déjà mis d’accord sur la direction que prendra la conception.

6. Dite ce que vous aimez

Il n’est pas rare qu’un client demande un design qui ressemble à celui d’un autre site qui lui plaît. Le problème est qu’il est souvent difficile de comprendre ce qui les attire exactement sur ce site. De plus, dans de nombreux cas, ils aiment des sites qui n’ont pas forcément un design qui vous motive.

Une meilleure approche que m’a suggérée Andy Budd est de leur montrer des sites qui, selon vous, sont de bon exemples à suivre. Conserver une collection de captures d’écran de sites bien conçus et choisissez en quelques uns qui soient pertinent pour ce client en particulier. Expliquez lui pourquoi vous pensez que ces modèles peuvent convenir à son projet et demander lui ses réactions. Si le client n’aime pas vos choix, alors présentez lui un plus large panel de votre collection de copie d’écran et voyez les designs qu’il préfère.

7. Elaborez un wireframe de la page d’accueil

Souvent, les clients ont du mal à faire la distinction entre la conception et le contenu et donc parfois refusent une conception sur la seule base que la mise en page du contenu n’est pas bonne. Cela est particulièrement vrai au moment de la validation de la page d’accueil.

Vous pouvez donc trouver utile de créer la structure de la mise en page du contenu de la page d’accueil avant de produire le design. De cette façon, lorsque les clients verront la conception de la page, ils ne seront pas distraits par la mise en page du contenu. Une des meilleures façon de le faire est de produire un squelette de base consistant en une série de boîtes de contenu (Ndlr : zoning et wireframe). Une fois que cela aura été approuvé, vous pourrez terminer le design beaucoup plus facilement.

8. Présentez votre design

S’il est vrai qu’un bon design doit parler de lui-même, il est aussi nécessaire de le présenter au client. Le client a besoin de comprendre pourquoi vous avez pris telle ou telle décision dans votre conception, sinon, ils la jugeront sur des critères de préférences purement personnelles.

Expliquez leurs comment votre design répond aux besoins des utilisateurs et aux objectifs de leurs business. Reportez-vous aux panneaux d’ambiance, aux sites sélectionnés par le client pour faire approuver votre conception et expliquer comment celle-ci est le prolongement des choix du client. N’envoyez jamais votre design dans un simple mail avec l’espoir que votre client interprète votre travail correctement.

9. Fournissez un support écrit de votre démarche

Malheureusement, peu importe la façon dont vous allez justifier la conception de votre design au client, il est presque certain qu’il va vouloir le montrer aux autres. Il a peut-être besoin de l’approbation de ses patrons ou d’une personne en interne. Au moins, il va vouloir obtenir une deuxième opinion d’un ami ou d’un collègue.

Le problème avec ceci est que vous n’allez pas être présent pour présenter à ces personnes, la justification de votre design, de la même manière que vous l’avez fait pour le client. Vous ne pouvez pas attendre du client qu’il présente vos idées aussi bien que vous l’avez fait. La réalité est que vous avez perdu le contrôle de la manière dont la conception va être perçu.

Une façon de minimiser ce problème est de fournir une documentation écrite qui explique et justifie votre conception graphique. Cela peut être un résumé de la présentation que vous avez donné au client, il pourra le distribuer avec la présentation du design. En mettant par écrit des explications qui accompagnent le design, vous vous assurez que tous ceux qui le lirons recevrons le même message.

10. Surveillez les remarques qui sont faites sur votre design

Mon dernier conseil concernant la gestion d’un projet graphique est de contrôler la façon dont vous allez recevoir les remarques sur votre conception. Une tendance naturelle des clients sera de vous donner son opinion personnelle sur la conception. Ceci est renforcé parce que vous leur demandez ce qu’ils pensent de votre conception, au lieu de leur demander ce que leurs utilisateurs vont penser de la conception. Encouragez-les à réfléchir à partir de la perception des utilisateurs plutôt que de la leur.

Il faut également encourager les clients de continuer à se focaliser sur le point « 1 : les besoins utilisateurs » dont j’ai parlé dans ma première astuce. Leur tendance est d’essayer d’améliorer la conception, cependant, cela devrait être votre problème pas le leur. Le rôle d’un client doit être de défendre les besoins de leurs utilisateurs et leur business, pas de s’occuper du design. Encourager le client à faire des commentaires tels que «je ne suis pas sûr que ma femme en tant qu’utilisateur appréciera des couleurs masculines » plutôt que « peut-on faire tout le design en rose. » C’est à eux d’identifier les problèmes et à vous, en tant que designer, de trouver la solution la plus appropriée.

Donc voilà, vous les avez. Mes 10 conseils pour améliorer la validation d’une conception graphique. Est-ce que cela va vous assurez l’approbation de votre conception à chaque fois ? Malheureusement non. Cependant, ces conseils devraient certainement vous aider à aplanir les difficultés.

Source :

10 ways to get design approval de Paul Boag

Un diagramme d’arborescence peut contenir de façons très schématique un nombre non négligeable d’informations. Pour réaliser cela, vous pouvez utiliser des outils comme Visio, PowerPoint, Photoshop ou Gimp, Illustrator ou Inkscape … Le choix de l’outil dépend de vos moyens et de vos préférences. Sur le sujet, je vous recommande la lecture des articles de Eric Di Pol sur son blog Super Fiction . Pour ma part j’utilise le logiciel vectoriel Inkscape avec lequel j’ai dessiné un certain nombre de symboles génériques que je réutilise maintenant sur différents projets. Pour réaliser ces symboles, je me suis largement inspiré de la méthode de Eric Di Pol décrit dans l’article « Méthodologie, focus sur l’arborescence. »

Voici par exemple le set de symboles que j’ai dessiné pour schématiser mes arborescences :

Thème Wordpress pixenjoy : arborescence.

Application concrète sur le thème Wordpress pixenjoy :

A la prochaine étape, je présenterai les dessins de zoning et de wireframes des différents gabarits du thème.

Définition d’un graphiste

Il y a souvent confusion entre graphiste et artiste. Quel est la frontière entre les deux ? Pour tenter de répondre à cette question, je vous propose une définition de Claude Caussette, professeur titulaire en publicité et image, Département de communication, Université de Laval, issu de son ouvrage « Petite histoire du nouveau graphisme québécois – Édition hors commerce »

« Un graphiste est une personne qui choisit ou organise les composantes visuelles d’un projet graphique. [...]

Par ailleurs, un projet graphismique répond toujours à la commande explicite d’un client; le graphiste joue le rôle d’un intermédiaire entre ce client (personne ou organisation) qui a un message à transmettre, et les destinataires du message. Une personne talentueuse qui fait des images pour se faire plaisir, comme exutoire à son imagination débordante ou pour exprimer son monde intérieur n’est pas un graphiste; c’est un artiste. Le graphiste, lui, agit comme un haut-parleur: il sait mettre en forme le message de son client de telle sorte qu’il soit parfaitement recevable et compréhensible par les destinataires visés. [...]« 

Pourquoi réaliser un brief créatif avant chaque projet

Le rôle du graphiste n’est pas de formuler le message et les besoins du client mais de les traduire visuellement. Pour réussir ce travail de communication, il est indispensable de réaliser un brief créatif.

Découvrir les besoins du client

Dans l’ordre des choses, un client qui a un besoin et qui recherche un prestataire pour répondre à ce besoin, rédige un cahier des charges pour formaliser par écrit sa demande. Ce cahier des charges permet au prestataire de prendre connaissance du besoin et d’estimer sa faisabilité. Selon l’expérience du client, ce cahier des charges est plus où moins exhaustif. Il se peut qu’il soit complètement absent.

Aider le client à formaliser son besoin

Si le client n’a pas l’habitude de cet exercice, un brief pourra l’aider à réfléchir et à formuler ses besoins à condition que vous l’aidiez à se poser les bonnes questions. Ce cas de figure se présentera généralement sur des petits projets comme la création d’un site vitrine avec des clients dont la culture et les connaissances sont éloignées de la communication et du marketing.

Eclaircir les zones d’ombres

Si le cahier des charges vous parait incomplet, si il vous semble que des zones d’ombres existent, si des informations vous manquent, le brief doit vous aider à combler ces manques.

Vous guider dans votre processus créatif

Pour transcrire visuellement le message d’un client, encore faut-il que celui-ci soit clairement énoncé. Le brief doit permettre au créatif de disposer de tous les éléments pour répondre le plus justement possible à la demande. Le brief permet au graphiste d’orienter sa démarche créative, de disposer d’un fil d’Arianne dans son processus de recherche et de rester sur les rails de la demande client.

Répondre à la demande

Plus le brief sera précis, clair et exhaustif, plus la réponse créative du graphiste sera juste et satisfaisante pour le client.

Constituer un document de référence

Lorsqu’il s’agit d’apprécier une proposition créative, il est facile de se perdre dans des considérations qui prennent en compte des préférences, des goûts et des sentiments personnels. C’est une erreur de rentrer dans l’affect quand il s’agit de valider ou invalider une proposition créative.

N’oublions pas qu’un design doit traduire un message, s’adresser à une cible, refléter des valeurs, orienter la lecture de l’utilisateur et non satisfaire les goûts de chacun. Chaque individu étant unique, ce qui plaira à l’un déplaira à l’autre et chercher le consensus sur un critère esthétique est utopique et incohérent.

Un design web ne doit donc pas être apprécié selon des préférences personnelles mais en terme d’efficacité dans sa capacité à traduire, communiquer un message à une cible précise.

Le brief doit donc servir de référence aussi bien au graphiste lorsqu’il recherche des pistes de travail qu’au client lorsqu’il doit apprécier la pertinence de la proposition créative. C’est un outil qui doit faciliter la prise de décision lorsqu’il s’agit de juger une création de façon objective (c’est à dire par rapport à des critères définis en amont et non des critères affectifs).

Gagner du temps et de l’argent

Plus le brief aura été réalisé avec soins, plus il y a de chance que le graphiste réponde précisément aux besoins du client, moins il sera nécessaire de faire et de défaire. Tout le monde y trouvera son compte. Le client ne paiera pas du temps de recherche et de réalisation supplémentaire. Le graphiste appréciera de comprendre et de satisfaire le besoin du client.

Description d’un brief créatif

Voici une piste pour réaliser un brief créatif. Je l’ai rédigé en compilant un certain nombre d’informations provenant de ma propre expérience et de documents récoltés sur le web. Ce n’est bien sur pas un document de référence mais une proposition que je vous laisse adapter à vos besoins.

Voici les points sur lesquels vous devez obtenir des informations lors d’un brief créatif :

Avant le brief créatif

Avant la date du brief créatif, le client vous aura généralement transmis son cahier des charges. Vous devez bien sur en prendre connaissance soigneusement et noter les informations qui vous manquent. C’est aussi un bon réflexe de récolter des informations sur l’entreprise en tapant son nom sur un moteur de recherche.

Si votre client ne vous a pas donné de cahier des charges, envoyez-lui un questionnaire précis qui reprend tous les points du brief pour qu’il commence à y réfléchir et à réunir les informations le concernant.

Envoyez également au client l’ordre du jour de la réunion afin qu’il anticipe sa préparation.

Présentation

- Des intervenants :

Le jour du brief créatif, si c’est votre première entrevue avec le client, présentez-vous brièvement. Ensuite, notez le nom, la fonction et les coordonnées de tous les intervenants présents (vous en aurez besoin pour envoyer le compte rendu). Profitez-en également pour demander quel est le rôle de chacun dans le projet et qui à le pouvoir décisionnel et de validation finale.

- De l’entreprise :

Quel est l’historique de l’entreprise ?
(Comment a démarré l’entreprise, quelles ont été les évolutions majeures)

Quels sont les projets de l’entreprise à 5-10 ans ?
(Savoir comment l’entreprise se positionne dans le futur permet de savoir comment elle doit se présenter aujourd’hui)

Quel est son organisation ?

Quel est la culture de l’entreprise ?
(Quelle est la personnalité de l’entreprise et comment la transmet-elle au client)

Quelles sont les valeurs de l’entreprise ?

- Éthique
- Engagement
- Orientation client
- Esprit d’équipe et primauté de l’intérêt collectif
- Justice
- Honnêteté
- Simplicité
- Convivialité
- Ouverture au débat démocratique
- Professionnalisme
- Compétences managériales
- Confiance
- Communication
- Autre …

Le client et son marché

Quel est son secteur d’activité ?
(Dans quel marché s’inscrit l’activité de l’entreprise, comment l’entreprise se singularise dans ce marché)

Quel est son positionnement sur le marché ?

Quel produit/service propose l’entreprise ?

Quelles sont les valeurs de vos clients ?
(Quelle est la principale préoccupation des clients, qu’est ce qui influence le plus leurs décisions)

Quelles caractéristiques spécifiques recherchent vos clients dans l’offre que vous leur proposez ?
(Quelle valeur ajouté recherchent-ils dans vos services/produits, quelle est la question la plus posée lorsqu’ils vous contactent, quelle préoccupation ont-ils avant d’acheter)

Quel est le processus décisionnel de vos clients, rationnel ou pas, lorsqu’ils achètent votre service/produit ?
(Prix, qualité, prestige, luxe, service, simplicité, practisité …)

De quelle manière vendez-vous ? Comment attirez-vous de nouveaux clients ?

Communication, positionnement de la marque

Quels sont les supports de communication existants ?

Y a t’il des interactions avec d’autres supports de communication ?

S’agit-il d’une refonte ou d’une création (pour un site web) ?

Que représente votre marque dans l’esprit de vos clients ?
(Comment vos clients vous perçoivent, qui êtes vous pour eux, un leader, un innovateur …, comment vous distinguent-ils de la concurrence)

Pourquoi se soucient-ils de vous ?
(Comment votre activité impacte leur activité, quelle est la valeur profonde qui fait qu’ils utilisent vos services/produits)

Quelles sont les caractéristiques principales qui vous distinguent de la concurrence ?
(Comment vous différenciez-vous sur votre marché)

Quel est votre principale devise de marque ?
(Quelle promesse proclame votre marque)

La concurrence

Quels sont les principaux concurrents de l’entreprise ?

Qu’est ce qui démarque l’entreprise de ses concurrents ?

Comment vos concurrents se distinguent-ils de votre entreprise ?

Pourquoi vos concurrents sont ils dans l’erreur et vous dans la bonne direction ?
(Quelle promesse proclame votre marque que ne promet pas les marques concurrentes)

Quels sont les points positifs/négatifs chez les concurrents (par exemple au niveau de leur site internet : ergonomie, fonctionnalités …) ?

La cible

Quel est le profil social de la cible ?

Quel est le genre (m/f) le plus représentatif de la cible ?

Quelle est la tranche d’âge de la cible ?

Quelle est la localisation géographique de la cible ?

Quelles sont les motivations de la cible ?

Quelles sont les attentes de la cible par rapport au site internet ?

Quel est le classement hiérarchique de la cible par ordre d’importance ?

Les objectifs

Quels sont les éléments stratégiques à traduire dans la réponse créative ?

- Institutionnel :
Diffusion d’informations. Lancement, valorisation, déploiement d’une marque. Recrutement. Dynamiser la réactivité éditoriale …

- Relationnel :
Mettre en place une relation privilégiée avec la cible. Fédérer un réseau. Rassembler des informations sur le visiteur. Gagner des abonnés. Fidéliser la cible …

- Promotionnel
Promouvoir un produit, un service, un évènement. Se donner une visibilité sur internet. Démarcher des prospects …

- Commercial
Générer des ventes. Générer des revenus par la publicité.

Le message

Quel est le message à faire passer sur le produit ou le service de l’entreprise client ?

Le message est toujours à destination de la cible. Il est donc indispensable de la connaître parfaitement. En fonction de la nature et des caractéristiques de la cible, le client définira le type de relation à mettre en place dans son message (humoristique, sérieux, branché, conventionnel, proximité, distance, familier, professionnel …).

Le client doit dans un premier temps identifier le problème que rencontre la cible (manque de disponibilité, délais de livraison trop long, mauvaise qualité, services après vente insuffisant, manque de conseils …) . Le message devra ensuite expliquer en quoi l’entreprise peut répondre efficacement à ce problème, quel bénéfice elle peut mettre en avant pour convaincre et impliquer sa cible.

Il est important de ne pas vouloir tout dire dans un message au risque de brouiller les pistes. Le client doit privilégier un axe (le prix, la qualité, la nouveauté, le service après vente …)

Enfin, justifiez si possible ce bénéfice par des faits concrets (témoignages de prescripteurs, de clients ou de consommateurs).

Le ton créatif

L’aspect visuel doit être en adéquation avec la nature de la cible, le message, les valeurs à transmettre et l’identité de l’entreprise.

Quels adjectifs décrivent le mieux votre entreprise, votre marque (tiré du questionnaire de « Apples To Oranges », cf. sources) ?

Conservateur – aucun – Progressiste
Froid – aucun – Chaud
Traditionnel – aucun – Innovant
Fun – aucun – Sérieux
Masculin – aucun – Féminin
Informel – aucun – Formel
Énergique – aucun – Décontracté
Tendance – aucun – Classique
Spontané – aucun – Ordonné
Exubérant – aucun – Discret
Solitaire – aucun – Populaire
Unique – aucun – Familier
Jeune – aucun – Mature
Nouveau – aucun – Etablie

Quelle atmosphère le design doit il dégager ?

- Elégance
- Luxe
- Drôle
- Moderne
- Formel
- Underground
- Autre …

Réfléchissez à l’impression que votre design doit laisser chez votre cible :

- Sécurité
- Curiosité
- Emotion
- Désir
- Détente
- Energie
- Calme
- Autre …

Vous pouvez vous aider d’exemples de design d’autres sites pour demander au client ceux qui lui plaisent et surtout POURQUOI ils lui plaisent ?

Il faut aussi déterminer si il y a une volonté de continuité ou de rupture avec la ligne graphique préexistante.

Autres informations sur lesquelles vous devez obtenir des réponses :

- L’existence d’une charte graphique.
- Les règles d’utilisation du logo.
- Y a t’il des couleurs à bannir.
- Y a t’il une photothèque utilisable.
- Y a t’il un budget pour les images, la typographie.
- Quel devra être la flexibilité de la mise en page (contenu statique, dynamique)
- Quel sera le type de fichiers à fournir pour le produit fini.
- Pour quel média est prévu le design (web, dvd, print …)
- Fixer le nombre de maquettes à présenter.

Les contraintes

Quelles sont les contraintes liées à l’accessibilité ?

Pour quelle résolution d’écran choisir la largeur du site. Mise en page fixe ou élastique. Validation du code (standards web du W3C, codage sémantique, accessibilité …). Traduction en plusieurs langues. Quel type de connexion dispose la cible (rtc, adsl, fibre optique …). Choix de la taille des polices. Choix des couleurs pour la lisibilité.

Quelles sont les contraintes liées à l’environnement technique ?

Compatibilité de la mise en page avec les différents navigateurs. Javascript non intrusif. Utilisation d’Ajax. Contenu statique ou dynamique. Présence d’un gestionnaire de contenu.

Processus de travail

Le planning

Planifiez le projet en étapes et essayez d’estimer le temps nécessaire pour chacune des étapes. Pensez aux aléas qui peuvent allonger le temps de réalisation et prenez les en compte dans votre estimation.

Chaque freelance possède son propre processus de travail, n’hésitez pas à l’expliquer à votre client pour le rassurer et le préparer à collaborer avec vous.

Expliquez bien au client le rôle qu’il aura à jouer dans le bon déroulement du projet (réactivité, validation, réflexions en amont, disponibilité de la matière brut …). Le respect des délais dépends aussi en grande partie de l’implication et de la réactivité du client. Pensez à demander si il y a des évènements prévisibles susceptibles de retarder le projets (RTT, congés, pont sur jours fériés, maladie, évènements exceptionnels …)

Les livrables :

Quels seront les livrables à fournir au client ?

Compte rendu de réunion, spécifications fonctionnelles, étude ergonomique, schéma d’arborescence, zoning, wireframes, gabarits ….

Quels seront les livrables qui devront être fournis par le client ?

Support de communication existant, charte graphique, cahier des charges, contenu texte, images et photothèque, liste des concurrents, benchmark de la concurrence, logo, valeurs & messages, mots clés pour le référencement …

Après le brief

Ne tardez pas à mettre au propre vos notes pendant que vos souvenirs sont encore frais. Envoyez ensuite un compte rendu de la réunion à tous les participants afin de faire valider votre compréhension de ce qui a été dit pendant le brief créatif.

Sources :

Brief créatif, comment formaliser les besoins créatifs d’un projet web de Benoit Drouillat

The Ultimate Design Brief – Shaun Crowley – Site FreelanceSwitch

Créatif brief – Wikipédia

Planning a Dynamic Site with Macromedia Studio MX 2004 – Tom Green, Jordan L. Chilcott, Chris Flick – Site Peachpit

Petite histoire du nouveau graphisme québécois – Claude Cossette, professeur titulaire en publicité et image, Département de communication, Université Laval – Édition hors commerce

Définir, concrétiser le message – Robert Haehnel – Site NetPME

The briefing de Sergio Ordonez

Culture d’entreprise – Wikipédia

Questionnaire de l’agence « Apples to Oranges »