La direction artistique dun projet web

septembre 2003

www.directeurrtistique.net

contact@directeurartistique.net

01 42 62 91 52

La direction artistique dun projet web

propos des auteurs

Damien Melich
De formation design produit, son approche pluridisciplinaire lui permet de sadapter rapidement et dintervenir sur des projets divers et varis tels que du design produit, du stand, de la PLV, du print, du cd-rom et des sites internet. En poste chez Himalaya depuis Dcembre 2000, en qualit de Directeur artistique,Damien Melich a gr et conu des projets comme : Fondation dentreprise Renault, La Halle aux vtements, Orange Distributeur,LDcom www.damienmelich.com

Fondation Renault

La Halle aux vtements

Callis Soft

www.directeurrtistique.net

contact@directeurartistique.net

01 42 62 91 52

La direction artistique dun projet web

propos des auteurs

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

contact@directeurartistique.net

01 42 62 91 52

La direction artistique dun projet web

propos des auteurs

Guillaume Brachon
Directeur artistique freelance, Guillaume Brachon collabore rgulirement avec des agences de communication interactive comme IconMediaLab, d'Arcy, Abeille Web, Altays, Illustra, Creapress. Il est le co-fondateur de www.directeurartistique.net, le site qui fdre les directeurs artistiques du web et est co-auteur de trois guides cratifs sur le brief cratif, l'architecture de l'information et l'intgration HTML Parmi ses rfrences : La Poste, Communaut Europenne, Rmy Cointreau, Witbe, SFR. www.brachon.com

Remy cointreau
Intranet

Virgin
Pitch

Galeries Lafayette
Pitch

www.directeurrtistique.net

contact@directeurartistique.net

01 42 62 91 52

La direction artistique dun projet web

Sommaire

Introduction Les missions du directeur artistique web Les tapes de conception Les typologies de sites web Les rgles et codes graphiques Les livrables

6 7 9 13 18 21

www.directeurrtistique.net

contact@directeurartistique.net

01 42 62 91 52

La direction artistique dun projet web

Introduction
Le directeur artistique, cest un regard neuf sur lentreprise ; il doit intervenir sur le projet ds sa gense. Les attributions dun D.A. web sont au coeur des enjeux de tout projet interactif communicant. Contrairement des lieux communs qui le dcrivent comme un professionnel qui ralise des habillages graphiques, sa fonction est beaucoup plus en phase avec le sens et les objectifs de la communication, du message. Le directeur artistique nest donc pas un styliste qui vient en fin de projet donner un coup de peinture ou enjoliver le projet. Il doit travailler en amont avec lquipe de projet et connatre ses intentions et ses finalits pour intervenir sur la logique interne du projet de communication et de relation quest un site web. Sil intervient sur le projet, il doit en connatre le mcanisme, participer la rflexion fonctionnelle, lergonomie Il doit sintresser aux donnes du march, anticiper les tendances Il lui faut comprendre la philosophie de lentreprise, ses valeurs, afin de proposer une traduction graphique en adquation. Cest pourquoi tous les lments utiles doivent lui tre communiqus. Cest grce son il extrieur quil saura tre le tmoin vigilant, le traducteur fidle et conscient, libre et cratif.

www.directeurrtistique.net

contact@directeurartistique.net

01 42 62 91 52

La direction artistique dun projet web

Les missions du directeur artistique web

Son rle auprs du client :
Il doit connatre au mieux lactivit du client et sa cible Il doit apprhender ses objectifs Il doit traduire graphiquement ses besoins et ses envies Il doit laccompagner dans la mise en place dun charte graphique cohrente

Son rle en agence ou en freelance :

Le directeur artistique prend en charge la conception graphique du site Il travaille en collaboration avec un consultant, les architectes de linformation et lquipe technique charge de la ralisation. Il dfinit le concept graphique Il ralise la maquette graphique qui dcrit les crans et scnarise la navigation Il coordonne la production et gre la relation client sur des projets Front-office Il sera linterlocuteur privilgi du client pendant toute la phase de crations graphiques

www.directeurrtistique.net

contact@directeurartistique.net

01 42 62 91 52

La direction artistique dun projet web

Les missions du directeur artistique web

Ses objectifs :
Travailler sur la traduction des objectifs stratgiques en axes graphiques pertinents Respecter la charte graphique et lidentit visuelle du client Rendre le site efficace et utilisable tre en adquation avec les besoins du client et plus particulirement les attentes de leurs cibles Accompagner le client dans la suite de son projet Le directeur artistique doit veiller la cohrence graphique du projet du dbut la fin de celui-ci. Conseiller et changer Recueillir les objectifs, orienter et dfinir la stratgie crative (brief cratif, panneaux de tendance). Proposer Une premire maquette graphique (page daccueil + page intrieure type), une recherche iconographique, un concept cratif. Expliquer et justifier Les choix graphiques et ergonomiques, ladquation entre les objectifs cratifs fixs avec le client et la cration, les contraintes techniques (HTML, dveloppement) et les contraintes culturelles lies aux codes visuels du web. Dcliner Lensemble des gabarits structurants, ventuellement avec laide dun webdesigner. Suivre La cohrence et la qualit du montage HTML par rapport la charte graphique valide.

www.directeurrtistique.net

contact@directeurartistique.net

01 42 62 91 52

La direction artistique dun projet web

Les tapes de conception

Matriser la qualit de chaque tape de la conception du design
Le positionnement Il permet de traduire de faon graphique, lambiance gnrale du site, le portrait de la cible. Il permet de mettre en place des dtails graphiques qui seront prsents dans le site. didentifier les objectifs de communication et les valeurs transmettre par le design

1
Positionnement cratif Dfinition des objectifs Brief cratif

2
Architecture de linformation Arborescence Scnario fonctionnel

3
Design du site Identit graphique (Home + page int.) Dclinaisons

4
Intgration HTML Dcoupage Optimisation Montage

5
Charte graphique Rdaction du document de charte graphique

Lidentit graphique Cest la cration de pistes cratives et de principes graphiques dfinis dans ltape prcdente sur les zonings produits par lquipe fonctionnelle. Elle permet de mettre en place une identit cohrente avec le positionnement.

Les dclinaisons Cest ladaptation des principes graphiques lensemble des pages structurantes du site.

Lintgration HTML Cest ltape de dcoupage et de montage des pages dans un format cod pour les navigateurs (internet explorer, safari, netscape) en langage HTML. La charte graphique La charte graphique est un document dfinit lensemble des rgles graphiques et typographiques respecter lors de lutilisation et/ou la dclinaison du site web. Elle reprend synthtiquement les indications de mise en forme du contenu, et des directives pour la mise en page (ctes, marges, dimensions, codes couleurs...) et les choix iconographiques.

www.directeurrtistique.net

contact@directeurartistique.net

01 42 62 91 52

La direction artistique dun projet web

Les tapes de conception

Exemple de zoning ou scnario fonctionnel

LE JOUR DU SEIGNEUR
Rechercher sur le site : OK Recevoir la newsletter : votre adresse email OK

LEGENDE A Zone utilitaire

Zone identitaire A B Zone utilitaire

A C

Zone rubriques principales Zone identitaire

ACTUALITES

NOS EMISSIONS

THEMATIQUES

CFRT

NOUS SOUTENIR

PLAN DU SITE

Canal de communication C D Zone Rubriques

principales

Nous sommes le jeudi 24 octobre, nous ftons Saint Florentin et saint Antoine-Marie Clavet

LE JOUR DU SEIGNEUR
De la tl Internet, il ny a quun pas que le Jour du Seigneur, lmission catholique sur France 2, franchit chaque semaine. Tout sur les programmes

COMITE FRANCAIS DE RADIO-TELEVISION NOUS CONNATRE EN TROIS CLICS

DEPECHES E
Actu 1 Lire la suite

D D

Zone D E Canal de de mise en avant communication

E Zone de mise en avant Commentaires :

Commentaires : de laccs Transversalit
aux rubriques Transversalit de Des zones de mise en laccs aux rubriques avant des diffrentes

THEMATIQUES

Actu 2 Lire la suite Voir toutes les dpches Voir les vnements

Repres sur la foi Participez au forum !

Croire en Dieu | Le baptme | Le mariage Les autres repres Toutes les thmatiques

Relisez lhomlie de la semaine Voir les archives des missions en vido

Des zones JDS activits de de mise en Des appels darticles avant des diffrentes qui incitent JDS activits de la lecture Des appels darticles qui incitent la lecture

Recevoir la newsletter | Nous soutenir | Plan du site | Contact | Liens |

www.directeurrtistique.net

contact@directeurartistique.net

01 42 62 91 52

10

La direction artistique dun projet web

Les tapes de conception

Exemple de cration ralise partir du scnario fonctionnel

www.directeurrtistique.net

contact@directeurartistique.net

01 42 62 91 52

11

La direction artistique dun projet web

Les tapes de conception

Interactions entre la conception et le design
Concepteur Internet Directeur Artistique

CONCEPT
Dfinition du concept central du site (ide principale)

Structuration de linformation, segmentation par rubriques, dfinition de menus Rpartition du contenu en zones sur la Home page et une page intrieure type selon la nature du contenu Reprsentation des crans illustrant les principes dergonomie et de navigation Zoning sur tous les diffrents types de pages intrieures

ARBORESCENCE ZONING

TREND BOARD

Planches tendances illustrant les inspirations graphiques

IDENTITE GRAPHIQUE

Cration de la Home page et dune page intrieure type

SCENARISATION DECLINAISON ZONING

DECLINAISON GRAPHIQUE INTEGRATION HTML CHARTE GRAPHIQUE

Dclinaison de gabarits structurants partir de lidentit visuelle Codage des pages en HTML Document papier et numrique tablissant les rgles graphiques du site

Passage en dveloppement

www.directeurrtistique.net

contact@directeurartistique.net

01 42 62 91 52

12

La direction artistique dun projet web

Les typologies de site

Le site plaquette
Le site plaquette est cens donner des informations institutionnelles sur lentreprise... Lapproche fonctionnelle permet de donner rapidement de linformation sur un certain nombre de rubriquescls : actualits, rsultats, activits Graphiquement, les contraintes sont donn par une charte graphique du groupe, trs prcise. Il est important de les respecter pour que lidentit du Groupe soit traduite et reconnaissable par tous les publics.
Exemple : AFIC (pitch)

www.directeurrtistique.net

contact@directeurartistique.net

01 42 62 91 52

13

La direction artistique dun projet web

Les typologies de site

Le site e-commerce
Le site e- commerce est un espace de vente part entire. La mise en place donglets trs priss par l e-acheteur permet de se reprer trs facilement et de passer dune rubrique une autre. Ce sont des rayons... Graphiquement, on doit signifier linternaute que certains espaces lui sont rservs. Les pictos laident se reprer. Il trouve ventuellement une ambiance colore diffrente derrire chaque rubrique.
Exemple : fnac.fr

www.directeurrtistique.net

contact@directeurartistique.net

01 42 62 91 52

14

La direction artistique dun projet web

Les typologies de site

Le site promotionnel
Le site promotionel ou vnementiel est un espace de communication et dinformation. La partie fonctionnelle est en retrait par rapport la partie graphique. Linternaute doit naviguer, dcouvrir, et au del de sa dimension ludique, le site doit inciter participer, acheter en magasin... Cest un projet vocation graphique. Lenjeu est de marquer les esprits, avant de convaincre dacqurir le produit.
Exemple : Helena Rubinstein (pitch)

www.directeurrtistique.net

contact@directeurartistique.net

01 42 62 91 52

15

La direction artistique dun projet web

Les typologies de site

Le site portail
Le site portail est une base documentaire. Logiquement sur ce type de projet la partie fonctionnelle va tre privilgie sur le graphisme. Lobjectif est de permettre linternaute de trouver rapidement linformation qui lintresse. Les lments graphiques ne doivent pas perturber cette recherche. Ce sont des lments significatifs qui lui permettent rapidement de se reconnatre comme la cible Le rubriquage par couleur est souvent utilis dans ce type de projet car il permet de crer une segmentation de linformation.
Exemple : orange.fr

www.directeurrtistique.net

contact@directeurartistique.net

01 42 62 91 52

16

La direction artistique dun projet web

Les typologies de site

Le site ditorial
Le site ditorial est avant toute chose un outil d information. Lapproche est purement fonctionnelle. Seul quelques lments graphiques et de couleurs sont prsents pour rendre lensemble du site homogne. Lespace dinformation est clairement privilgi. LeMonde.fr se doit de transposer sa version papier en respectant les contraintes de lecture lcran.
Exemple : lemonde.fr

www.directeurrtistique.net

contact@directeurartistique.net

01 42 62 91 52

17

La direction artistique dun projet web

Les rgles et codes graphiques

Positionnement de marque :
Le positionnement dune marque est primordial dans la communication visuelle, quel que soit le support de communication. Cest lexpression de lactivit de la marque, de lenseigne et le secteur dans lequel elle volue et se dveloppe. Idalement, ce positionnement doit se faire sans quivoque et la premire lecture. Ses supports visuels sont limage de marque (le logo), le choix iconographique, typographique et celui du code couleur.

Partis-pris graphiques :
Afin dasseoir une identit visuelle celle-ci doit sappuyer sur un partipris graphique fort et en adquation avec le positionnement de lenseigne. L aussi, les supports visuels utiliss sont le code couleur, les images gnriques et illustratives et la typographie, mais il sagit l dtre diffrenciant, esthtique et marquant.

www.directeurrtistique.net

contact@directeurartistique.net

01 42 62 91 52

18

La direction artistique dun projet web

Les rgles et codes graphiques

Cohrence et homognit :
Au cours de la consultation des diffrentes rubriques du site, laspect graphique des lments de la structure des pages doit conserver son intgrit. Les diffrents titres, les boutons, le traitement du texte dans sa hauteur de corps, ses espacements, sa graisse ainsi que les lments purement graphiques comme les filets, le aplats et les puces, tous ces lments doivent bien sr tre en adquation entre eux et ne pas varier au cours des pages.

www.directeurrtistique.net

contact@directeurartistique.net

01 42 62 91 52

19

La direction artistique dun projet web

Les rgles et codes graphiques

Quelques recommandations (dans le cadre dun projet interne) :
Code couleur : Le plus souvent, rutiliser les couleurs du logo. Choisir une dominante, lui ajouter une couleur complmentaire. Choix typographique : Utiliser une typo simple de type Arial qui na pas dimpact graphique fort mais une bonne lisibilit et jouer uniquement sur les tailles (gras, italique, soulign). La conserver sur toute les pages en appliquant toujours le mme principe. Choix iconographique : Utiliser des images en accord avec la marque (valeurs transmises, accords chromatiques). Montrer le produit, le contexte, la cible Choix graphique : Utiliser toujours les mmes boutons, les mmes lments graphiques (filet, aplats)

Quelques cueils viter :

Il faut viter de multiplier les couleurs (arc en ciel), qui rendent lambiance graphique incohrente. Eviter lemploi de typos trop types , et viter absolument lemploi du Times New Roman qui est un caractre dimprimerie. Eviter de changer de typo dune page une autre. Eviter galement lemploi abusif dicnes (peu significative). Les utiliser uniquement sur des liens communs du type, contact, plan du site, aide...

www.directeurrtistique.net

contact@directeurartistique.net

01 42 62 91 52

20

La direction artistique dun projet web

Les livrables
Les JPG (Photoshop)
Les crans jpg permettent de visualiser lensemble des crans maquetts.

Les fichiers HTML

Tous les fichiers sources HTML sont la proprit du client.

La charte graphique
Cest un document qui aide la mise en place de nouveaux lments graphiques de faon ne pas dnaturer le projet mis en ligne.

Les PSD* (Photoshop)

Ce sont les fichiers sources avant intgration html qui donnent laccs toute la base graphique. * L acquisition des fichiers psd fait lobjet dune prestation commerciale spciale.

www.directeurrtistique.net

contact@directeurartistique.net

01 42 62 91 52

21