1 & Charte graphique Outils graphiques. Charte graphique ? Définition Le but de la charte...

Click here to load reader

download 1 & Charte graphique Outils graphiques. Charte graphique ? Définition Le but de la charte graphique est de conserver une cohérence graphique dans les

of 69

  • date post

    03-Apr-2015
  • Category

    Documents

  • view

    127
  • download

    3

Embed Size (px)

Transcript of 1 & Charte graphique Outils graphiques. Charte graphique ? Définition Le but de la charte...

  • Page 1
  • 1 & Charte graphique Outils graphiques
  • Page 2
  • Charte graphique ? Dfinition Le but de la charte graphique est de conserver une cohrence graphique dans les ralisations graphiques d'une mme organisation, projet ou entreprise quels que soient les diffrents intervenants de la production 2 LO18
  • Page 3
  • Les intrts de la charte 1 L'identit graphique reste intacte quelles que soient les ralisations graphiques, afin que l'organisation, le projet ou l'entreprise (qui sont une somme d'individualits) parle d'une seule voix . Les anglophones parlent de corporate design (littralement : dessin de l'entreprise). 2 La charte graphique permet au rcepteur d'identifier facilement l'metteur et, par habitude si la cohrence est respecte, de se reprer visuellement dans les diffrentes ralisations graphiques, et au sein mme d'un mme support graphique (ce qui facilite la lecture). Une charte graphique bien conue doit laisser suffisamment de libert en constituant des "mta-rgles" souples, c'est--dire en vitant les interdictions, et en envisageant le maximum de contextes o des rgles doivent s'appliquer pour l'utilisation des signes graphiques de l'identit graphique 3 LO18
  • Page 4
  • La charte papier Les polices de caractres utilises dans les documents afin de permettre de crer diffrents niveaux de textes et d'apporter un bon confort de lecture. La typographie est l'une des composantes essentielles de l'univers graphique d'une entreprise pour sa reconnaissance. Dans certains cas comme, on va jusqu' crer une police de caractres spcifique. Les jeux de couleurs dclinables sur les diffrents supports de communication : d'une manire gnrale la charte indique les valeurs Pantone, CMJN, RVB et hexadcimale de chaque couleurPantone L'utilisation des lements graphiques tels que les filigranes, dtail du logo agrandi, courbes et traits spcifique l'entreprise. Les principes du 'choix des images et des illustrations. 4 LO18 Chaque signe graphique utilis par l'organisation est class par thme en prcisant son sens et en effectuant une liste des concepts qui s'y rattachent. Il ne s'agit pas d'appliquer ces codes dans leur intgralit mais d'en slectionner quelques-uns afin que tout nouveau document mis par la socit participe la construction de son image. L'essentiel est de rester dans l'univers graphique de l'entreprise, ou parfois de le crer. La charte graphique s'applique dfinir : Le logotype : ses couleurs dfinies grce aux Pantone, sa position dans la page sur tous les supports (papier en-tte, documents officiels, plaquettes, dossier et chemises, camion, etc.), la zone d'exclusion (espace protg minimum autour du logo), ses dclinaisons sur des fonds blancs et de couleurs. La charte peut galement dfinir les interdits : par exemple, l'interdiction d'apposer le logo sur un fond noir, de redimensionner le logo sans garder un rapport d'homothtie
  • Page 5
  • Charte multimdia La charte graphique internet/intranet est un document papier ou un mini-site qui permet de dfinir la position des diffrents lments qui constituent les principales pages d'un site avant la programmation de celle-ci. Le but, voisin du prcdent, est de valider les principes de navigation entre les pages du futur site internet ou intranet. Il s'y ajoutera des temps de navigation plus courts (les lments graphiques tant contingents et prsents dans le cache), participant la bonne perception de l'entreprise par le visiteur. 5 LO18
  • Page 6
  • Charte Graphique UTC LUTC sest dot dune vritable charte graphique (consultable sur lintranet > vie pratique). Pour complter cette dmarche lUTC a uniformis ses documents papiers et les propose au tlchargement > bureau lectronique Le logo sest vu remani Couleurs conserves Jaune, pantone 116 Gris, cold grey 10C Passage de la porte la passerelle 6 LO18
  • Page 7
  • Charte formation multimdia 4 grandes couleurs ont t choisies pour symboliser, les secteurs de lUTC Formation : orange pantone 1655 Entreprises : Cyan Recherche : Vert Institutionnel : Jaune UTC 7 LO18
  • Page 8
  • Les Outils 8 LO18 ddis la cration de site internet Mdias Logiciels Dmarches Recommandations Standards Ergonomie
  • Page 9
  • Mdias Aujourdhui et grce au dveloppement du haut- dbit, le panorama des services internet se voit profondment modifi. Pour le dveloppement de certains sites, on parle de cross-mdia tant limbrication des diffrents mdias est importante. ATTENTION : la vido et la musique sont des mdias consommateurs de bandes-passantes, cela doit rester une exprience pour linternaute pas une torture . 9 LO18
  • Page 10
  • Les logiciels Il est toujours possible de raliser un site internet avec un simple diteur de texte (bloc-notes), mais la cration de site est aujourdhui un vritable secteur qui sest structur et une conomie (fleurissante) sest dveloppe, il faut donc faire vite et bien (1 anne-web = 3 mois). Le march est domin par le gant amricain Adobe qui a absorb son unique vrai concurrent Macromdia. Cependant Microsoft a dvelopp de puissants outils susceptible de gagner des parts de march. 10 LO18
  • Page 11
  • Editeurs html Outils permettant la cration de page Internet, aujourdhui les plus performant sont wysiwyg, permettent dcrire convenablement tout types de langages : asp, php, html, xml, css Le logiciel leader est Dreamweaver Ses concurrents sont : Golive (toujours au catalogue adobe mais se positionne sur un crneau lgrement diffrent) Expression Web (logiciel Microsoft, conforme au xhtml et autres standards) NVU (diteur puissant et gratuit issu de lopen source) Il existe aussi de nombreux diteurs de texte de type bloc- notes intgrant les principaux langages Internet (UltraEdit, notepad++...), leur lgret et leur puissance en fait lalli prfr des dveloppeurs 11 LO18
  • Page 12
  • Retouche et cration graphique Logiciels permettant la cration de visuels mais aussi dinterfaces graphiques. Leurs puissances et leurs possibilits ne semblent pas avoir de limites si ce nest celles de lutilisateur (imagination et comptences). Ces logiciels amusants et ludiques ncessitent un vritable investissement humain pour qui veut en matriser plus de 20 % Photoshop rgne sur ce secteur, historiquement utilis en imprimerie, aujourdhui on photoshop une photo de famille. Il a pour concurrent : The GIMP (gratuit issu de lopen-source) PaintShop Pro (plus orient grand public) Fireworks (produit trop mconnu) 12 LO18
  • Page 13
  • Dessin vectoriel Permet la ralisation dillustrations utilisant des formes gomtriques. Souvent intgr dans la cration de visuels, car ses performances concernant le travail typographique et des formes le rend indispensable dans la ralisation dinterfaces ou dillustrations modernes Illustrator est aujourdhui sans rel concurrence sur ce segment (peut tre un challenger avec l'arrive du logiciel Microsoft Expression Design ), il sagit ici dun logiciel aussi exigent que Photoshop. 13 LO18
  • Page 14
  • Animation vectorielle A leurs dbut ces logiciels taient destins lanimation. Aujourdhui ces logiciels permettent la cration dinterface ou danimations volues capables dintgrer de la vido ou de rcuprer et crire dans la base de donnes dun site internet moderne Flash est aujourdhui un outil de dveloppement et sest impos comme un vritable standard tant aujourdhui prsent sur plus de 96% des navigateurs et chacune des volutions du plugin connat un taux de pntration toujours plus lev. Le format concurrent et libre est le SVG (scalable vector graphic) Exemple Mini site Audi R8 Ikea 14 LO18
  • Page 15
  • Vido Impensable il y a encore quelques annes la vido est arrive sur internet et elle offre linternaute une nouvelle exprience multimdia, les logiciels utiliss ne sont pas des logiciels ddis. Ils intgrent la possibilit dexporter des formats reconnus sur internet afin de ne pas pnaliser linternaute. Adobe Premire est lun des plus populaires concurrents de Final cut pro (Apple). 15 LO18
  • Page 16
  • Dmarche le BRIEFLa clef de vote du succs dun votre projet Internet est comme dans tous les mtiers de la communication : le BRIEF Sachez tre lcoute de votre client Identifiez votre cible (CSP, ge, sexe) Ne surtout jamais commencer crer votre avant validation des maquettes cran et du cahier des charges sign. 16 LO18
  • Page 17
  • Symbolique des couleurs La notion prendre en compte dans le choix de couleurs est la luminosit matrielle. Veillez toujours tester vos choix sur diffrents moniteurs, navigateurs et systmes d'exploitation. Un choix judicieux sur une plateforme commune peut s'avrer catastrophique sur une autre... 17 LO18
  • Page 18
  • Symbolique des couleurs Le jaune 18 LO18 Symbolique gnrale: Joyeux, spirituel, dynamique, science, conscience, idalisme, action, luminosit. Thme pour le web: Tourisme, diverstissement. Couleur de l'intuition, il symbolise la jeunesse et l'audace. C'est la couleur de la crativit et de l'intelligence lumineuse, un stimulateur de l'intellect. Le jaune est votre plus grand alli ds qu'il s'agit de rendre plus lumineuse une zone mettre en valeur, un focus sur texte... le jaune favorise la concentration, la mmoire, le jugement et la prise de dcision. C'est galement une couleur qui favorise l'assimilation de nouvelles ides et la capacit comprendre diffrents points de vue. De plus, il semble que le jaune aide les gens tre mieux organiss et adopter une attitude optimiste.
  • Page 19
  • Symbolique des couleurs Lorange 19 LO18 Symbolique gnrale: Stimulant, nergie, ambition, enthousiasme, im