Formaliser un brief créatif pour le web

Formaliser un brief créatif pour le web
septembre 2003
www.directeurrtistique.net
[email protected]
01 42 62 91 52
1
Formaliser un brief créatif pour le web
à propos De l’auteur
Benoît 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 conquête et la fidélisation de clients comme Société Générale Espace Entreprise, 01net, Finama (Groupama),
l’Association Française des Investisseurs en Capital (AFIC), Astorg.
De formation initiale littéraire et médias, son approche conjugue design interactif, architecture de l’information, et méthodologies créatives.
Co-fondateur de directeurartistique.net, il dirige l’équipe éditoriale du site et écrit ou co-écrit la totalité des guides créatifs publiés.
Parmi ses références : Société Générale Espace Entreprise, Finama (Groupama), 01net, Association Française des Investisseurs, Voltimum, Antalis
(intranet). En collaboration avec d’autres D.A. : Shiseido (lead créatif : Hélène Mathieu; Charles Lacorne), Orange.fr (équipe Himalaya), OrangeLab (Emilie
Henry), Azzaro Parfums (lead créatif : Françoise Peslherbe), Intranet Lyonnaise des Eaux (Damien Mélich)
www.drouillat.com
Société Générale
Orange Lab
Make Up For Ever (LVMH)
Espace Entreprises
Communauté mobile d’Orange
Pitch
www.directeurrtistique.net
[email protected]
01 42 62 91 52
2
Formaliser un brief créatif pour le web
Sommaire
La précision du brief détermine la qualité de la réponse créative
4
Etape 1 / définir le contexte de communication
5
Etape 2 / définir les objectifs créatifs
6
Etape 3 / orienter le positionnement créatif
7
Etape 4 / anticiper les contraintes créatives
8
Etape 5 / architecture fonctionnelle et éditoriale
9
Enjeu : “plus d’intelligibilité et plus de pertinence”
10
www.directeurrtistique.net
[email protected]
01 42 62 91 52
3
Formaliser un brief créatif pour le web
La précision du brief détermine la qualité de la réponse créative
L’élaboration d’un projet de design interactif ne consiste pas en un
papier-peint qui recouvre des architectures techniques et
fonctionnelles. L’expression approximative d’habillage graphique a
remplacé parfois les véritables desseins du design interactif dans
certaines approches liées aux problématiques de gestion de contenu.
Il faut accorder de l’importance à la formulation des instructions
créatives car la précision et la clarté des besoins ne vont pas de soi, et
les missions d’un D.A. ne sont pas démiurgiques. La sélection des
critères pertinents à cet effet fait partie de l’orientation de toute
stratégie créative.
A l’opposé, Il faut aussi évacuer la tendance au design autoréférenciel,
même s’il est souvent source d’inspiration et conditionne les
tendances, car il n’est pas tributaire des mêmes contraintes ni orienté
vers des objectifs comme la traduction d’une problématique marketing.
La direction artistique web n’est pas une démarche de pur agrément
visuel mais recouvre des enjeux aussi différents que l’orientation,
l’identification, la hiérarchisation de l’information, la valorisation, la
circulation de l’information dans une interface rendue intelligible grâce
à son interactivité. La direction artistique d’un projet assure la
cohérence entre des objectifs de communication et une traduction
visuelle de ces objectifs.
Pour cela, il faut donner de la matière au directeur artistique afin qu’il
crée les conditions d’une expérience interactive riche et en phase avec
les objectifs de son annonceur : faire vendre, se faire connaître,
informer, générer de l’image de marque etc.
C’est pourquoi cette traduction doit construire sa signification sur
des renseignements objectifs et orientés dans un dialogue entre
l’annonceur et le directeur artistique. C’est une démarche
pleinement rationnelle.
Le directeur artistique propose des solutions visuelles pour remplir
ces objectifs. L’élaboration d’une charte graphique n’est pas un
processus automatique, ni une solution mathématique unique ; il est
fortement dépendant des contextes culturels, historiques, voire
émotionnels d’une société. Les solutions proposées seront toujours
des interprétations plus ou moins adéquates, mais la confiance est un
élément décisif de la réussite d’un projet de design interactif.
L’adéquation des réponses créatives aux besoins réel est tributaire
d’une bonne formulation de ce qu’on cherche à faire, de “qui le fait” et
“pour qui”. C’est cela qu’il convient de restituer à travers la formulation
d’un brief créatif, et qui est le gage d’une productivité satisfaisante.
Le contenu et sa traduction visuelle forment les deux faces
indissociables du message, qu’il soit institutionnel, promotionnel, ou
relationnel. L’interdépendance est forte entre fond et forme, l’un et
l’autre doivent être en mesure de se refléter pour produire un message
intelligible.
www.directeurrtistique.net
[email protected]
01 42 62 91 52
4
Formaliser un brief créatif pour le web
étape 1 / définir le contexte de communication
Le contexte concerne l’émetteur du message interactif, l’annonceur, et pour le directeur artistique, il ne va pas de soi...
Qui est l’annonceur ?
• Le secteur d’activité de la société
Qui sont les cibles ? Connaître les publics concernés par le
message
• L’organisation de la société (groupe, filiale)
• Données socio-démographiques (âge, sexe, etc.)
• La culture de la société (entreprise familiale ou multinationale ?)
• Quelles sont les cibles les plus importantes (notion de
hiérarchisation) ?
• Son historique
• Son positionnement marketing (haut de gamme etc.)
• La concurrence directe et indirecte (également utile pour
benchmarker les sites concurrents)
• 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
d’expérience, mémoire, perceptions, habitudes, compétences, âge,
attentes, etc.)
Axes de communication antérieurs
• Comment la société a-t-elle communiqué, tous supports confondus,
ces dernières années ?
Éléments essentiels à fournir
• Plaquettes, brochures, visuels publicitaires, tout support de communication, synthèse écrite de présentation de la société
• Logo au format .eps, charte graphique papier ou électronique, éléments iconographiques (.jpg ou .tiff)
www.directeurrtistique.net
[email protected]
01 42 62 91 52
5
Formaliser un brief créatif pour le web
étape 2 / définir les objectifs créatifs
Plusieurs objectifs peuvent se coordonner au sein d’un même site.
Pour une meilleure synergie entre les supports et initiatives de communication, une parfaite cohérence visuelle entre ces supports et le respect des
codes de communication sectoriels sont indispensables.
Objectifs institutionnels
S’agit-il de diffuser une information institutionnelle ? Valoriser une stratégie de marque, la lancer, la déployer ? (ou e-branding)
Stratégie de recrutement ? Dynamiser la réactivité éditoriale ?
Objectifs relationnels
S’agit-il de mettre en place une relation privilégiée avec la cible ? Fédérer une communauté, animer un réseau ? Rassembler des
informations sur les visiteurs ? Générer une base de contacts, fidéliser la cible ? Dynamiser la chaîne marketing (dans le cadre
d’une action multi-supports) ?
Objectifs promotionnels
Promotion : promouvoir un service, un produit, un événement ? Démarcher des prospects ? Mettre en place parallèlement une
opération d’e-mailing ? Quelle est la ligne de communication à respecter pour la création de tout nouveau support (cohérence
horizontale des supports) ?
Éléments essentiels à fournir
• Une synthèse écrite des éléments stratégiques à traduire dans la réponse créative : valeurs, objectifs du site.
www.directeurrtistique.net
[email protected]
01 42 62 91 52
6
Formaliser un brief créatif pour le web
étape 3 / orienter le positionnement créatif
Le ton créatif
Les éléments de continuité visuelle
Le choix d’une tonalité se fait en fonction du message à transmettre,
du destinateur et des destinataires.
Un site ne se borne pas à appliquer le système d’identité visuelle d’une
société, ni à mettre en ligne les pages d’une brochure. Un travail
d’appréciation beaucoup plus subtile est nécessaire pour proposer une
adaptation cohérente et satisfaisant aux critères visuels du web.
Il est important de s’assurer de la tonalité créative existant déjà sur
tous les autres supports de communication et de se les procurer
(brochures imprimés, documents électroniques, papier à en-tête,
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, sérieux », « Sophistiqué, haut de
gamme », « Pédagogique, simple, clair », « décalé », « Editorial,
informatif », « Très Graphique, élaboré », « Tendance, avantgardiste »...
Quelle est la ligne de communication à respecter pour la création de
tout nouveau support (cohérence horizontale des supports) ?
Pour cerner pleinement les attentes créatives envisageables dans le
cadre d’un projet web, s’informer des contraintes de lecture à l’écran et
d’intégration HTML est une première étape.
Les questions essentielles à poser pour transposer efficacement une
identité existante sur le web :
• Quelles devront être les possibilités d’évolution de la charte
graphique web (adaptation des gabarits, déclinaisons envisagées,
flexibilité de la mise en page…) ?
• Existe-t-il une charte graphique, des règles particulières d’utilisation
du logo ?
• Iconographie : la société dispose-t-elle d’une photothèque utilisable
pour le site ?
Éléments essentiels à fournir
• Une synthèse écrite de quelques lignes comprenant des mots-clés signifiants (éviter les mots galvaudés comme : “moderne”, “convivial”, “accrocheur”,
car la démarche doit être qualifiante et révéler ce qui est singulier dans l’identité et les objectifs du projet)
• Une synthèse écrite des impératifs concernant l’identité visuelle et les éventuels concepts créatifs à prolonger sur le web
www.directeurrtistique.net
[email protected]
01 42 62 91 52
7
Formaliser un brief créatif pour le web
étape 4 / Anticiper les contraintes créatives
Contraintes liées à la technologie de développement
• Fréquence des mises à jour ? (prévoir du texte éditable html)
• L’imbrication des tables HTML implique des choix créatifs spécifiques
à anticiper ( prévoir une structure au découpage aisé)
• L’utilisation d’un outil de gestion de contenu détermine également le
niveau de créativité (notamment, utilisation de texte image impossible
si les titres et rubriques deviennent éditables, mises en page
sophistiquées à éviter)
Résolutions d’écran et taille de l’interface du site
Dimension des écrans des internautes (important pour le scroll et
le calage dans l’espace du site) :
La part des ordinateurs portable a augmenté de 15% cette année en
France, cela signifie une part non-négligeable d’écrans inférieurs à 15
pouces et donc un souci éventuel sur la visualisation de pages très
longues. En la matière, il faut éviter de proposer des pages dont la
longueur totale excède la valeur de 2 écrans.
Les contraintes créatives liées à des interdits culturels (concepts
ou représentations à éviter)
Pour éviter une mauvaise anticipation du rendu visuel, un point/
explication sur les résolutions d’écran peut être utile :
• Une résolution 800x600 pix., équivaut à 780x440 pixels d’espace
utile pour l’interface du site, utilisée par convention pour les sites
vitrines, sites produits, et éventuellement sites institutionnels. Il faut
intégrer l’idée que 29,6 % des ordinateurs sont en résolution 800x600
(Source : Carsten Albrecht IT, avril 2002)
• Résolution 1024x768 : on préférera conserver une largeur de 780 pix
centrée ou ferrée à gauche. La hauteur du site peut atteindre 600
pixel sans scroller. Il est très fortement déconseillé de recourir à une
interface qui s’adapte en largeur à la taille de la fenêtre du navigateur,
car le design ne conserve pas ses propriétés et sa cohésion avec ce
type de configuration. La proportion d’utilisateurs configurés en
1024x768 est de 56,9%
• Résolution 1200x1024 : elle représente seulement 5% des
utilisateurs actuellement. Elle n’est donc pas envisageable, sauf
indication particulière.
www.directeurrtistique.net
[email protected]
01 42 62 91 52
8
Formaliser un brief créatif pour le web
étape 5 / Architecture fonctionnelle et éditoriale
Il est important de savoir également si la création du site fait écho à des initiatives off-line, si la société a déjà d’autres sites etc. pour correctement
implémenter le contenu dans l’interface.
Qui est l’annonceur ?
La conception s’effectue avant le design !
La typologie définit le type d’interface qui va être privilégiée pour la
construction visuelle du projet. Ces typologies ne sont pas figées et peuvent
se combiner, s’imbriquer :
Le cahier des charges graphique doit permettre d’établir le plus précisément
possible les spécifications fonctionnelles et l’arborescence du projet, car ils
sont les données de départ de l’interfaçage graphique.
• Mini site = adapté aux problématiques événementielles
En effet, la longueur des barres de navigation, le nombre de boutons, les
scénarios de navigation, la densité du contenu ont un impact visuel fort dans
la recherche de l’équilibre visuel général des pages. Compte tenu des
résolutions d’écran à respecter, l’espace utile est limité et il convient de
l’optimiser au mieux pour que chaque élément graphique conserve l’
« encombrement visuel», qui sied à son importance dans l’articulation du
message.
• Site portail = adapté aux problématiques éditoriales et communautaires
(fédérer)
• Site vitrine (format horizontal) = adapté aux problématiques
promotionnelles (sites produit), ou institutionnelles (courtes présentation,
volume de texte faible)
Voir le guide : « La direction artistique d’un projet web »
Densité éditoriale : trouver le juste milieu et calibrer
Critères ergonomiques
L’ergonomie des interfaces web est une réflexion sur la facilité de l’accès
aux contenus dans un contexte non-linéaire (car arborescent). L’organisation
des contenus doit absolument respecter les critères ergonomiques.
Il est important d’introduire cette dimension dans le cahier des charges
graphique car l’impact visuel final sera grand sur le site.
Voir le guide : « L’achitecture de l’information des sites web »
L’un des principaux défauts évoqués par les clients est la confusion qui
résulte d’une architecture de l’information trop dense : trop de contenu dans
l’interfaçage nuit à l’intelligibilité du site.
A l’inverse, une densité minimum d’information est nécessaire sur une page,
pour ne pas segmenter le contenu à l’excès.
C’est pourquoi il faut systématiquement introduire la notion de densité de
l’information et s’enquérir auprès du commanditaire du projet s’il souhaite
des pages dense ou diffuses. Cette densité est aussi tributaire de la
conception de l’arborescence, qui répartit sur plusieurs pages un contenu
parfois au départ linéaire, monolithique.
Éléments essentiels à fournir
• Un ordre d’idée du nombre de mots par page (à limiter), respecter les impératifs de concision pour les titres et le rubriquage
• Une liste de 5 adresses de sites dont l’architecture de l’information et le design se rapprochent du projet envisagé
www.directeurrtistique.net
[email protected]
01 42 62 91 52
9
Formaliser un brief créatif pour le web
Enjeu : “plus d’intelligibilité et plus de pertinence”
La nécessité de la pédagogie :
• Évitez le jargon, les termes techniques
• Oubliez, sauf demande spécifique, le conceptuel. Ce type de discours passe très mal auprès de publics qui n’ont pas une excellente connaissance de la
culture électronique.
L’ergonomie :
Briefez-le sur les principales contraintes en la matière, structurez ses demandes par une méthodologie rigoureuse pour ne pas vous laisser déborder par
les tendances non-professionnelles qu’il peut exprimer.
Les codes visuel du web
Faire prendre conscience que le web est un support qui a développé ses propres contraintes en terme de dispositif visuel est une étape souvent délicate.
Encore plus que dans la communication visuelle imprimée, l’effet 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, d’écoute, mais aussi de fermeté.
Adapter son discour à son interlocuteur
Les indications contenues dans ce guide n’ont pas de vocation strictement universelle et doivent pouvoir être adaptées aux différents types d’interlocuteurs
que vous rencontrerez :
• Les Directeurs du Système d’Information (DSI) et les techniciens
• Les directeurs de la communication
• Les chefs de projet internet ou e-business
• Les directeurs généraux pressés ;-)
• Les responsables marketing
...dont les préoccupations seront très variables, centrées ou pas sur le design.
www.directeurrtistique.net
[email protected]
01 42 62 91 52
10
Formaliser un brief créatif pour le web
Crédits
Coordination éditoriale :
Vos remarques :
Conception et rédaction :
Ce document n’a pas de vocation à l’exhaustivité. Il peut sans cesse être complété,
clarifié, réorienté.
• Benoît Drouillat
directeur artistique de l’agence Baobaz
www.directeurartistique.net
www.drouillat.com
Merci à Jean-Charles Baudot (Business Lab)
www.directeurrtistique.net
Faites-nous partager vos expériences et nous améliorerons la précision et l’efficacité de
cet outil méthodologique.
Des mises à jour seront publiées régulièrement.
Ecrivez à Benoît Drouillat : [email protected]
[email protected]
01 42 62 91 52
11