Vous êtes sur la page 1sur 11

Formaliser un brief cratif pour le web

septembre 2003

www.directeurrtistique.net

GUIDES@directeurartistique.net

01 42 62 91 52

Formaliser un brief cratif pour le web

propos De lauteur
Benot Drouillat
Directeur artistique interactif, il a collabor avec des agences reconnues du march : Business Lab, CPP, Himalaya, et travaille actuellement, en tant que directeur artistique de Baobaz, la conqute et la dlisation de clients comme Socit Gnrale Espace Entreprise, 01net, Finama (Groupama), lAssociation Franaise des Investisseurs en Capital (AFIC), Astorg. De formation initiale littraire et mdias, son approche conjugue design interactif, architecture de linformation, et mthodologies cratives. Co-fondateur de directeurartistique.net, il dirige lquipe ditoriale du site et crit ou co-crit la totalit des guides cratifs publis. Parmi ses rfrences : Socit Gnrale Espace Entreprise, Finama (Groupama), 01net, Association Franaise des Investisseurs, Voltimum, Antalis (intranet). En collaboration avec dautres D.A. : Shiseido (lead cratif : Hlne Mathieu; Charles Lacorne), Orange.fr (quipe Himalaya), OrangeLab (Emilie Henry), Azzaro Parfums (lead cratif : Franoise Peslherbe), Intranet Lyonnaise des Eaux (Damien Mlich)

www.drouillat.com

Socit Gnrale
Espace Entreprises

Orange Lab
Communaut mobile dOrange

Make Up For Ever (LVMH)


Pitch

www.directeurrtistique.net

GUIDES@directeurartistique.net

01 42 62 91 52

Formaliser un brief cratif pour le web

Sommaire

La prcision du brief dtermine la qualit de la rponse crative Etape 1 / dnir le contexte de communication Etape 2 / dnir les objectifs cratifs Etape 3 / orienter le positionnement cratif Etape 4 / anticiper les contraintes cratives Etape 5 / architecture fonctionnelle et ditoriale Enjeu : plus dintelligibilit et plus de pertinence

4 5 6 7 8 9 10

www.directeurrtistique.net

GUIDES@directeurartistique.net

01 42 62 91 52

Formaliser un brief cratif pour le web

La prcision du brief dtermine la qualit de la rponse crative


Llaboration dun projet de design interactif ne consiste pas en un papier-peint qui recouvre des architectures techniques et fonctionnelles. Lexpression approximative dhabillage graphique a remplac parfois les vritables desseins du design interactif dans certaines approches lies aux problmatiques de gestion de contenu. A loppos, Il faut aussi vacuer la tendance au design autorfrenciel, mme sil est souvent source dinspiration et conditionne les tendances, car il nest pas tributaire des mmes contraintes ni orient vers des objectifs comme la traduction dune problmatique marketing. La direction artistique web nest pas une dmarche de pur agrment visuel mais recouvre des enjeux aussi diffrents que lorientation, lidentification, la hirarchisation de linformation, la valorisation, la circulation de linformation dans une interface rendue intelligible grce son interactivit. La direction artistique dun projet assure la cohrence entre des objectifs de communication et une traduction visuelle de ces objectifs. Cest pourquoi cette traduction doit construire sa signification sur des renseignements objectifs et orients dans un dialogue entre lannonceur et le directeur artistique. Cest une dmarche pleinement rationnelle. Le contenu et sa traduction visuelle forment les deux faces indissociables du message, quil soit institutionnel, promotionnel, ou relationnel. Linterdpendance est forte entre fond et forme, lun et lautre doivent tre en mesure de se reflter pour produire un message intelligible. Il faut accorder de limportance la formulation des instructions cratives car la prcision et la clart des besoins ne vont pas de soi, et les missions dun D.A. ne sont pas dmiurgiques. La slection des critres pertinents cet effet fait partie de lorientation de toute stratgie crative. Pour cela, il faut donner de la matire au directeur artistique afin quil cre les conditions dune exprience interactive riche et en phase avec les objectifs de son annonceur : faire vendre, se faire connatre, informer, gnrer de limage de marque etc. Le directeur artistique propose des solutions visuelles pour remplir ces objectifs. Llaboration dune charte graphique nest pas un processus automatique, ni une solution mathmatique unique ; il est fortement dpendant des contextes culturels, historiques, voire motionnels dune socit. Les solutions proposes seront toujours des interprtations plus ou moins adquates, mais la confiance est un lment dcisif de la russite dun projet de design interactif. Ladquation des rponses cratives aux besoins rel est tributaire dune bonne formulation de ce quon cherche faire, de qui le fait et pour qui. Cest cela quil convient de restituer travers la formulation dun brief cratif, et qui est le gage dune productivit satisfaisante.

www.directeurrtistique.net

GUIDES@directeurartistique.net

01 42 62 91 52

Formaliser un brief cratif pour le web

tape 1 / dfinir le contexte de communication


Le contexte concerne lmetteur du message interactif, lannonceur, et pour le directeur artistique, il ne va pas de soi...

Qui est lannonceur ? Le secteur dactivit de la socit Lorganisation de la socit (groupe, filiale) La culture de la socit (entreprise familiale ou multinationale ?) Son historique Son positionnement marketing (haut de gamme etc.) La concurrence directe et indirecte (galement utile pour benchmarker les sites concurrents) Axes de communication antrieurs Comment la socit a-t-elle communiqu, tous supports confondus, ces dernires annes ?

Qui sont les cibles ? Connatre les publics concerns par le message Donnes socio-dmographiques (ge, sexe, etc.) Quelles sont les cibles les plus importantes (notion de hirarchisation) ? Quelles sont les motivations des cibles : consommer le produit ou le service, venir sur le site ? Attitude de la cible par rapport internet (notion de niveau dexprience, mmoire, perceptions, habitudes, comptences, ge, attentes, etc.)

lments essentiels fournir


Plaquettes, brochures, visuels publicitaires, tout support de communication, synthse crite de prsentation de la socit Logo au format .eps, charte graphique papier ou lectronique, lments iconographiques (.jpg ou .tiff)

www.directeurrtistique.net

GUIDES@directeurartistique.net

01 42 62 91 52

Formaliser un brief cratif pour le web

tape 2 / dfinir les objectifs cratifs


Plusieurs objectifs peuvent se coordonner au sein dun mme site. Pour une meilleure synergie entre les supports et initiatives de communication, une parfaite cohrence visuelle entre ces supports et le respect des codes de communication sectoriels sont indispensables. Objectifs institutionnels Sagit-il de diffuser une information institutionnelle ? Valoriser une stratgie de marque, la lancer, la dployer ? (ou e-branding) Stratgie de recrutement ? Dynamiser la ractivit ditoriale ? Objectifs relationnels Sagit-il de mettre en place une relation privilgie avec la cible ? Fdrer une communaut, animer un rseau ? Rassembler des informations sur les visiteurs ? Gnrer une base de contacts, fidliser la cible ? Dynamiser la chane marketing (dans le cadre dune action multi-supports) ? Objectifs promotionnels Promotion : promouvoir un service, un produit, un vnement ? Dmarcher des prospects ? Mettre en place paralllement une opration de-mailing ? Quelle est la ligne de communication respecter pour la cration de tout nouveau support (cohrence horizontale des supports) ?

lments essentiels fournir


Une synthse crite des lments stratgiques traduire dans la rponse crative : valeurs, objectifs du site.

www.directeurrtistique.net

GUIDES@directeurartistique.net

01 42 62 91 52

Formaliser un brief cratif pour le web

tape 3 / orienter le positionnement cratif


Le ton cratif Le choix dune tonalit se fait en fonction du message transmettre, du destinateur et des destinataires. Il est important de sassurer de la tonalit crative existant dj sur tous les autres supports de communication et de se les procurer (brochures imprims, documents lectroniques, papier en-tte, charte graphique print et/ou web etc.) pour ne pas mettre des messages contradictoires ou dissonants. Quelques exemples de tonalit, combiner entre elles : Classique, sobre, institutionnel, srieux , Sophistiqu, haut de gamme , Pdagogique, simple, clair , dcal , Editorial, informatif , Trs Graphique, labor , Tendance, avantgardiste ... Quelle est la ligne de communication respecter pour la cration de tout nouveau support (cohrence horizontale des supports) ? Les lments de continuit visuelle Un site ne se borne pas appliquer le systme didentit visuelle dune socit, ni mettre en ligne les pages dune brochure. Un travail dapprciation beaucoup plus subtile est ncessaire pour proposer une adaptation cohrente et satisfaisant aux critres visuels du web. Pour cerner pleinement les attentes cratives envisageables dans le cadre dun projet web, sinformer des contraintes de lecture lcran et dintgration HTML est une premire tape. Les questions essentielles poser pour transposer efficacement une identit existante sur le web : Quelles devront tre les possibilits dvolution de la charte graphique web (adaptation des gabarits, dclinaisons envisages, flexibilit de la mise en page) ? Existe-t-il une charte graphique, des rgles particulires dutilisation du logo ? Iconographie : la socit dispose-t-elle dune photothque utilisable pour le site ?

lments essentiels fournir


Une synthse crite de quelques lignes comprenant des mots-cls signifiants (viter les mots galvauds comme : moderne, convivial, accrocheur,
car la dmarche doit tre qualifiante et rvler ce qui est singulier dans lidentit et les objectifs du projet) Une synthse crite des impratifs concernant lidentit visuelle et les ventuels concepts cratifs prolonger sur le web

www.directeurrtistique.net

GUIDES@directeurartistique.net

01 42 62 91 52

Formaliser un brief cratif pour le web

tape 4 / Anticiper les contraintes cratives


Contraintes lies la technologie de dveloppement Frquence des mises jour ? (prvoir du texte ditable html) Limbrication des tables HTML implique des choix cratifs spcifiques anticiper ( prvoir une structure au dcoupage ais) Lutilisation dun outil de gestion de contenu dtermine galement le niveau de crativit (notamment, utilisation de texte image impossible si les titres et rubriques deviennent ditables, mises en page sophistiques viter) Rsolutions dcran et taille de linterface du site Pour viter une mauvaise anticipation du rendu visuel, un point/ explication sur les rsolutions dcran peut tre utile : Une rsolution 800x600 pix., quivaut 780x440 pixels despace utile pour linterface du site, utilise par convention pour les sites vitrines, sites produits, et ventuellement sites institutionnels. Il faut intgrer lide que 29,6 % des ordinateurs sont en rsolution 800x600 (Source : Carsten Albrecht IT, avril 2002) Rsolution 1024x768 : on prfrera conserver une largeur de 780 pix centre ou ferre gauche. La hauteur du site peut atteindre 600 pixel sans scroller. Il est trs fortement dconseill de recourir une interface qui sadapte en largeur la taille de la fentre du navigateur, car le design ne conserve pas ses proprits et sa cohsion avec ce type de configuration. La proportion dutilisateurs configurs en 1024x768 est de 56,9% Rsolution 1200x1024 : elle reprsente seulement 5% des utilisateurs actuellement. Elle nest donc pas envisageable, sauf indication particulire. Dimension des crans des internautes (important pour le scroll et le calage dans lespace du site) : La part des ordinateurs portable a augment de 15% cette anne en France, cela signifie une part non-ngligeable dcrans infrieurs 15 pouces et donc un souci ventuel sur la visualisation de pages trs longues. En la matire, il faut viter de proposer des pages dont la longueur totale excde la valeur de 2 crans. Les contraintes cratives lies des interdits culturels (concepts ou reprsentations viter)

www.directeurrtistique.net

GUIDES@directeurartistique.net

01 42 62 91 52

Formaliser un brief cratif pour le web

tape 5 / Architecture fonctionnelle et ditoriale


Il est important de savoir galement si la cration du site fait cho des initiatives off-line, si la socit a dj dautres sites etc. pour correctement implmenter le contenu dans linterface. Qui est lannonceur ?
La typologie dfinit le type dinterface qui va tre privilgie pour la construction visuelle du projet. Ces typologies ne sont pas figes et peuvent se combiner, simbriquer : Mini site = adapt aux problmatiques vnementielles Site portail = adapt aux problmatiques ditoriales et communautaires (fdrer) Site vitrine (format horizontal) = adapt aux problmatiques promotionnelles (sites produit), ou institutionnelles (courtes prsentation, volume de texte faible)
Voir le guide : La direction artistique dun projet web

La conception seffectue avant le design !


Le cahier des charges graphique doit permettre dtablir le plus prcisment possible les spcifications fonctionnelles et larborescence du projet, car ils sont les donnes de dpart de linterfaage graphique. En effet, la longueur des barres de navigation, le nombre de boutons, les scnarios de navigation, la densit du contenu ont un impact visuel fort dans la recherche de lquilibre visuel gnral des pages. Compte tenu des rsolutions dcran respecter, lespace utile est limit et il convient de loptimiser au mieux pour que chaque lment graphique conserve l encombrement visuel, qui sied son importance dans larticulation du message.

Densit ditoriale : trouver le juste milieu et calibrer Critres ergonomiques


Lergonomie des interfaces web est une rflexion sur la facilit de laccs aux contenus dans un contexte non-linaire (car arborescent). Lorganisation des contenus doit absolument respecter les critres ergonomiques. Il est important dintroduire cette dimension dans le cahier des charges graphique car limpact visuel final sera grand sur le site.
Voir le guide : Lachitecture de linformation des sites web

Lun des principaux dfauts voqus par les clients est la confusion qui rsulte dune architecture de linformation trop dense : trop de contenu dans linterfaage nuit lintelligibilit du site. A linverse, une densit minimum dinformation est ncessaire sur une page, pour ne pas segmenter le contenu lexcs. Cest pourquoi il faut systmatiquement introduire la notion de densit de linformation et senqurir auprs du commanditaire du projet sil souhaite des pages dense ou diffuses. Cette densit est aussi tributaire de la conception de larborescence, qui rpartit sur plusieurs pages un contenu parfois au dpart linaire, monolithique.

lments essentiels fournir


Un ordre dide du nombre de mots par page ( limiter), respecter les impratifs de concision pour les titres et le rubriquage Une liste de 5 adresses de sites dont larchitecture de linformation et le design se rapprochent du projet envisag

www.directeurrtistique.net

GUIDES@directeurartistique.net

01 42 62 91 52

Formaliser un brief cratif pour le web

Enjeu : plus dintelligibilit et plus de pertinence


La ncessit de la pdagogie : vitez le jargon, les termes techniques Oubliez, sauf demande spcifique, le conceptuel. Ce type de discours passe trs mal auprs de publics qui nont pas une excellente connaissance de la culture lectronique. Lergonomie : Briefez-le sur les principales contraintes en la matire, structurez ses demandes par une mthodologie rigoureuse pour ne pas vous laisser dborder par les tendances non-professionnelles quil peut exprimer. Les codes visuel du web Faire prendre conscience que le web est un support qui a dvelopp ses propres contraintes en terme de dispositif visuel est une tape souvent dlicate. Encore plus que dans la communication visuelle imprime, leffet de mode peut jouer en la faveur de ou se retourner contre vous. Les demandes parfois farfelues des clients sont prendre avec beaucoup de patience, dcoute, mais aussi de fermet. Adapter son discour son interlocuteur Les indications contenues dans ce guide nont pas de vocation strictement universelle et doivent pouvoir tre adaptes aux diffrents types dinterlocuteurs que vous rencontrerez : Les Directeurs du Systme dInformation (DSI) et les techniciens Les directeurs de la communication Les chefs de projet internet ou e-business Les directeurs gnraux presss ;-) Les responsables marketing ...dont les proccupations seront trs variables, centres ou pas sur le design.

www.directeurrtistique.net

GUIDES@directeurartistique.net

01 42 62 91 52

10

Formaliser un brief cratif pour le web

Crdits
Coordination ditoriale : Conception et rdaction :
Benot Drouillat directeur artistique de lagence Baobaz www.directeurartistique.net www.drouillat.com Merci Jean-Charles Baudot (Business Lab)

Vos remarques :
Ce document na pas de vocation lexhaustivit. Il peut sans cesse tre complt, clarifi, rorient. Faites-nous partager vos expriences et nous amliorerons la prcision et lefficacit de cet outil mthodologique. Des mises jour seront publies rgulirement. Ecrivez Benot Drouillat : benoit@directeurartistique.net

www.directeurrtistique.net

GUIDES@directeurartistique.net

01 42 62 91 52

11