dossier direction art is ti que

8/6/2019 Dossier Direction Art is Ti Que

1/21

La direction artistique dun projet web

1www.directeurrtistique.net [email protected] 01 42 62 91 52

septembre 2003


2/21



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 dudesign 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


3/21



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 fidlisation 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 GnraleEspace Entreprises

Orange LabCommunaut mobile dOrange

Make Up For Ever (LVMH)Pitch

propos des auteurs


4/21



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 cointreauIntranet

VirginPitch

Galeries LafayettePitch


5/21



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


6/21



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 doittravailler en amont avec lquipe de projet et connatre ses intentions et ses finalits pour intervenir sur la logique interne du projetde 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 sintresseraux donnes du march, anticiper les tendances Il lui faut comprendre la philosophie de lentreprise, ses valeurs, afin de proposerune 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.


7/21



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 dusite

Il travaille en collaboration avec un consultant, les architectes delinformation 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 decrations graphiques



8/21



Ses objectifs :

Travailler sur la traduction des objectifs stratgiques en axesgraphiques 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 (briefcratif, panneaux de tendance).

Proposer

Une premire maquette graphique (page daccueil + page intrieuretype), une recherche iconographique, un concept cratif.

Expliquer et justifierLes choix graphiques et ergonomiques, ladquation entre les objectifscratifs fixs avec le client et la cration, les contraintes techniques(HTML, dveloppement) et les contraintes culturelles lies aux codesvisuels du web.

Dcliner

Lensemble des gabarits structurants, ventuellement avec laide dunwebdesigner.

Suivre

La cohrence et la qualit du montage HTML par rapport la chartegraphique valide.


9/21




Le positionnementIl permet de traduire de faon graphique, lambiance gnrale du site,le portrait de la cible. Il permet de mettre en place des dtailsgraphiques qui seront prsents dans le site. didentifier les objectifsde communication et les valeurs transmettre par le design

Lidentit graphique

Cest la cration de pistes cratives et de principes graphiques dfinisdans ltape prcdente sur les zonings produits par lquipefonctionnelle. Elle permet de mettre en place une identit cohrente

avec le positionnement.

Les dclinaisons

Cest ladaptation des principes graphiques lensemble des pagesstructurantes du site.

Lintgration HTML

Cest ltape de dcoupage et de montage des pages dans un formatcod pour les navigateurs (internet explorer, safari, netscape) en

langage HTML.

La charte graphique

La charte graphique est un document dfinit lensemble des rglesgraphiques et typographiques respecter lors de lutilisation et/ou ladclinaison du site web.Elle reprend synthtiquement les indications de mise en forme ducontenu, et des directives pour la mise en page (ctes, marges,dimensions, codes couleurs...) et les choix iconographiques.

1 2 3 4 5

Matriser la qualit de chaque tape de la conception du design

Positionnement

cratif

Architecture de

linformation

Design du si te Intgrat ion

HTML

Charte graphique

Dfinition desobjectifs

Brief cratif

Arborescence Scnario

fonctionnel

Identit graphique(Home + pageint.)

Dclinaisons

Dcoupage Optimisation Montage

Rdaction dudocument decharte graphique


10/21



Zone utilitaireA

B Zone identitaire

C Zone RubriquesprincipalesCanal decommunication

D

Zone de mise en avantE

LEGENDE

Rechercher sur le site : OK Recevoir la newsletter : votre adresse email OKA

B

DDEPECHES

Actu 1

Lire la suite

Actu 2

Lire la suite

Voir toutes les

dpches

Voir les

vnements

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

COMITE FRANCAIS DE RADIO-TELEVISION

NOUS CONNATRE EN TROIS CLICS

NOUS SOUTENIRCFRTTHEMATIQUESNOS EMISSIONSACTUALITES PLAN DU SITE

LE JOUR DU

SEIGNEUR

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

A

LE JOUR DU SEIGNEUR

De la tl Internet, il ny aquun pas que le Jour duSeigneur, lmission catholiquesur France 2, franchit chaquesemaine.

Tout sur les programmes

Relisez lhomlie de la semaine

Voir les archives desmissions en vido

Repres sur la foi

Croire en Dieu | Le baptme | Le mariage

Les autres repres

Toutes les thmatiques

Participez au forum !

0 THEMATIQUES

C

D DE Commentaires :Transversalit de

laccs aux rubriques

Des zones de mise enavant des diffrentesactivits de JDS

Des appels darticles qui incitent la lecture


Exemple de zoning ou scnario fonctionnel

Zone utilitaire

Zone identitaire

Zone rubriques principales

Canal de communication

Zone de mise en avant

Commentaires :

Transversalit de laccsaux rubriques

Des zones de mise enavant des diffrentesactivits de JDS

Des appels darticlesqui incitent la lecture

B

C

D

E

A

A

D

D

D

E

B

C

A


11/21




Exemple de cration ralise partir du scnario fonctionnel


12/21




Interactions entre la conception et le design

Concepteur Internet Directeur Artistique

Planches tendances illustrant les

inspirations graphiques

Cration de la Home page et dune page

intrieure type

DECLINAISON

GRAPHIQUE

Dclinaison de gabarits structurants

partir de lidentit visuelle

TREND BOARD

INTEGRATION HTML Codage des pages en HTML

CHARTE GRAPHIQUE Document papier et numriquetablissant les rgles graphiques du site

Structuration de linformation, segmentationpar rubriques, dfinition de menus

ZONINGRpartition du contenu en zones sur la Homepage et une page intrieure type selon la

nature du contenu

DECLINAISON

ZONING

Zoning sur tous les diffrents types de pages

intrieures

ARBORESCENCE

SCENARISATIONReprsentation des crans illustrant lesprincipes dergonomie et de navigation

Passage en dveloppement

Dfinition du concept central du site (ide principale)

CONCEPT

IDENTITE GRAPHIQUE


13/21



Les typologies de site

Le site plaquette

Le site plaquette est censdonner des informationsinstitutionnelles sur lentreprise...

Lapproche fonctionnelle permet dedonner rapidement de linformationsur un certain nombre de rubriques-cls : actualits, rsultats, activits

Graphiquement, les contraintes sontdonn par une charte graphique dugroupe, trs prcise.

Il est important de les respecterpour que lidentit du Groupe soittraduite et reconnaissable par tousles publics.

Exemple : AFIC (pitch)


14/21




Le site e-commerce

Le site e- commerce est unespace de vente part entire.

La mise en place donglets trspriss par l e-acheteur permetde se reprer trs facilement et depasser dune rubrique une autre.Ce sont des rayons...

Graphiquement, on doit signifier linternaute que certains espaces luisont rservs. Les pictos laident se reprer.

Il trouve ventuellement uneambiance colore diffrente derrirechaque rubrique.

Exemple : fnac.fr


15/21




Le site promotionnel

Le site promotionel ouvnementiel est un espace decommunication et dinformation.

La partie fonctionnelle est en retraitpar rapport la partie graphique.

Linternaute doit naviguer,

dcouvrir, et au del de sadimension ludique, le site doit inciter participer, acheter en magasin...

Cest un projet vocationgraphique. Lenjeu est de marquerles esprits, avant de convaincredacqurir le produit.

Exemple : Helena Rubinstein (pitch)


16/21




Le site portail

Le site portail est une basedocumentaire.Logiquement sur ce type de projetla partie fonctionnelle va treprivilgie sur le graphisme.

Lobjectif est de permettre linternaute de trouver rapidement

linformation qui lintresse.Les lments graphiques ne doiventpas perturber cette recherche.

Ce sont des lments significatifsqui lui permettent rapidement de sereconnatre comme la cible

Le rubriquage par couleur estsouvent utilis dans ce type deprojet car il permet de crer une

segmentation de linformation.

Exemple : orange.fr


17/21




Le site ditorial

Le site ditorial est avant toutechose un outil d information.

Lapproche est purementfonctionnelle.

Seul quelques lments graphiqueset de couleurs sont prsents pour

rendre lensemble du sitehomogne.

Lespace dinformation estclairement privilgi.LeMonde.fr se doit de transposer saversion papier en respectant lescontraintes de lecture lcran.

Exemple : lemonde.fr


18/21



Positionnement de marque :

Le positionnement dune marque est primordial dans la communicationvisuelle, quel que soit le support de communication.

Cest lexpression de lactivit de la marque, de lenseigne et le secteurdans lequel elle volue et se dveloppe.

Idalement, ce positionnement doit se faire sans quivoque et lapremire lecture.

Ses supports visuels sont limage de marque (le logo), le choixiconographique, typographique et celui du code couleur.

Partis-pris graphiques :

Afin dasseoir une identit visuelle celle-ci doit sappuyer sur un parti-pris graphique fort et en adquation avec le positionnement delenseigne.

L aussi, les supports visuels utiliss sont le code couleur, les imagesgnriques et illustratives et la typographie, mais il sagit l dtrediffrenciant, esthtique et marquant.



19/21



Cohrence et homognit :

Au cours de la consultation des diffrentes rubriques du site, laspect graphique des lments de la structure des pages doitconserver son intgrit.

Les diffrents titres, les boutons, le traitement du texte dans sa hauteur de corps, ses espacements, sa graisse ainsi que leslments purement graphiques comme les filets, le aplats et les puces, tous ces lments doivent bien sr tre enadquation entre eux et ne pas varier au cours des pages.



20/21



Quelques recommandations (dans le cadre dunprojet 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 dimpactgraphique fort mais une bonne lisibilit et jouer uniquement sur les

tailles (gras, italique, soulign). La conserver sur toute les pagesen 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 rendentlambiance graphique incohrente.

Eviter lemploi de typos trop types , et viter absolument lemploidu 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 utiliseruniquement sur des liens communs du type, contact, plan du site,aide...



21/21



Les livrables

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

Les fichiers HTMLTous les fichiers sources HTML sont la proprit du client.

La charte graphiqueCest 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.

dossier direction art is ti que

Documents