1 & charte graphique outils graphique. 2 lo18 charte graphique ? définition le but de la charte...

Click here to load reader

Post on 03-Apr-2015

120 views

Category:

Documents

5 download

Embed Size (px)

TRANSCRIPT

  • Page 1
  • 1 & Charte graphique Outils graphique
  • Page 2
  • 2 LO18 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
  • Page 3
  • 3 LO18 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
  • Page 4
  • 4 LO18 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. 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
  • 5 LO18 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 celles-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.
  • Page 6
  • 6 LO18 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 proposent au tlchargement > bureau lectronique Le logo sest vu remani Couleurs conserves Jaune, pantone 116 Gris, cold grey 10C Passage de la porte la passerelle Charte multimdia restylis mais une relle refonte est en cours dlaboration.
  • Page 7
  • 7 LO18 Charte formation multimdia 4 grandes couleurs ont t choisit pour symboliser, les secteurs de lUTC Formation : Fuchsia pantone 200 Entreprises : Cyan Recherche : Vert Institutionnel : Jaune UTC La charte graphique utilis au cours du semestre devra sinspir de lesprit UTC mais sera revue avec larrive de la charte graphique institutionnelle dfinitive.
  • Page 8
  • 8 LO18 Les Outils ddis la cration de site internet Mdias Logiciels Dmarches Recommandations Standards Ergonomie
  • Page 9
  • 9 LO18 Mdias Aujourdhui et grce au dveloppement du haut- dbit, nous assistons une vritable mont en puissance de la musique ou de la vido sur internet. Pour le dveloppement de certains site on parle de cross-mdia tant limbrication des diffrents mdias est importante. ATTENTION : la vido et la musique sont des mdias consmmateurs de bandes-passantes, cela doit rester une exprience pour linternaute pas une torture .
  • Page 10
  • 10 LO18 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 dvelopp, il faut donc faire vite et bien (1 anne-web = 3 mois). le march est domin par le gant amricain Adobe qui absorb son unique vrai concurrent Macromdia.
  • Page 11
  • 11 LO18 Editeurs html Outils permettant la cration de page Internet, aujourdhui les plus performant sont wysiwyg, permettent dcrire convenablement tout types de languages : asp, php, html, xml, css Le logiciel leader est Dreamweaver Ses concurrents sont : Golive (qui ne survivra pas a la fusion macromdia/Adobe FrontPage (logiciel Microsoft) 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), leurs lgret et leurs puissance en fait lalli prfr des dveloppeurs
  • Page 12
  • 12 LO18 Retouche et cration graphique Logiciels permettant la cration de visuels mais aussi dinterface graphique. Leurs puissances et leurs possibilits ne semblent pas avoir de limites si ce nest celle de lutilisateur (imagination et comptences). Ces logiciels amusants et ludique ncessite un vritable investissement humain pour qui veut en matriser plus de 20 % Photoshop rgne sur ce secteur, historiquement utiliser 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 publique) Fireworks (alternative Macromdia qui est conserv dans la gamme de produit mais soriente vers une niche
  • Page 13
  • 13 LO18 Dessin vectoriel Permet la ralisation dillustration 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 dinterface ou dillustration moderne Illustrator est aujourdhui sans rel concurrence sur ce segment, il sagit ici dun logiciel aussi exigeant que Photoshop.
  • Page 14
  • 14 LO18 Animation vectoriel A leurs dbut ces logiciels tait destins lanimation, aujourdhui ces logiciels permettent la cration dinterface ou danimations volues capable dintgrer de la vido ou de rcuprer et crire dans la base de donne 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 Martini
  • Page 15
  • 15 LO18 Vido Impensable il y a peu la vido est arriv sur internet et elle offre a linternaute une nouvelle exprience multimdia, les logiciels utiliss ne sont pas des logiciels ddis, ils intgrent la possibilit dexporter des formats reconnut sur internet afin de ne pas pnaliser linternaute. Adobe Premire est lun des plus populaires concurrent de Final cut pro (Apple).
  • Page 16
  • 16 LO18 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
  • Page 17
  • 17 LO18 Symbolique des couleurs 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...
  • Page 18
  • 18 LO18 Symbolique des couleurs Le jaune 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
  • 19 LO18 Symbolique des couleurs Lorange Symbolique gnrale: Stimulant, nergie, ambition, enthousiasme, imagination. Thme pour le web: Nature, loisirs. Riche, forte et chaleureuse, la couleur orange est dote de vertus stimulantes. Elle dessine une ambiance confortable et intime, cherchant la confiance et l'apaisement. Bien que lorange n'a pas russi acqurir un symbolisme fort (compar au jaune et au rouge), il demeure que cette couleur occupe une place importante dans les domaines dpendant d'une bonne visibilit. L'orange est la couleur joyeuse par excellence. Cette couleur stimulante ravive la bonne humeur. Les teintes plus ples, comme le pche ou l'abricot, aident rtablir l'nergie.
  • Page 20
  • 20 LO18 Symbolique des couleurs Le rouge Symbolique gnrale: Chaud, dynamique, stimulant, excitant, force, passion, puissance, interdiction, danger. Thme pour le web: Publicit, mdias. Le rouge est la couleur de l'action, de la vigueur, de la joie de vivre, Dans son instinct combatif, elle a des tendances fortes et mme agressives. Le rouge est la couleur qui a le plus d'impact sur nos sens. Le rouge est souvent considr comme la couleur des couleurs. Le rouge est joyeux. Beaucoup de produits destins aux enfants ou associs au plaisir sont rouges : ballons, jouets, vtements, bonbons, etc. Il n'est pas ncessaire de placarder du rouge pour profiter des effets bnfiques de cette couleur.
  • Page 21
  • 21 LO18 Symbolique des couleurs Le vert Symbolique gnrale: Calme, quilibre, repos, activit spirituelle, esprance, nature, immortalit, repos. Thme pour le web: Nature, loisirs. Le vert est symbole de vie, de croissance, et d'harmonie. C'est une couleur qui rconforte, qui dtend. Le vert pomme et le vert lime ont un ct plus stimulant ; ils crent une ambiance joyeuse et lgre, alors que les teintes plus sombres comme le vert bouteille et l'olive confrent une touche de calme au dcor.
  • Page 22
  • 22 LO18 Symbolique des couleurs Le violet Symbolique gnrale: Tristesse, mlancolie, dignit, politesse, jalousie, mystre, spiritualit. Thme pour le web: Art, culture. Couleur qui renferme une mlancolie certaine, mlancolie qui peut tre source de cration... Elle cre donc une atmosphre spirituelle ou mditative, emprunte de sensibilit et de crativit. Selon les psychologues de la couleur, le violet favorise le sens artistique. On attribue au violet des proprits calmantes et apaisantes. Le violet contribue l'quilibre et est li au sens artistique et musical, aux grands idaux, l'intuition et la spiritualit. Il favorise la crativit, la sensibilit et la compassion.
  • Page 23
  • 23 LO18 Symbolique des couleurs Le bleu Symbolique gnrale: Calme, sincrit. Paix, immatrialit, mditation, sagesse, rverie. Thme pour le web: Informatique, high-tech, mdecine. Symbole d'quilibre, c'est la couleur du bien-tre, de la srnit, du contrle de soi. Il pousse la bont et mne l'intelligence : couleur du ciel, de l'esprit et de la pense. Le bleu voque de vastes espaces calmes et sereins. Le bleu est, depuis fort longtemps, la couleur prfre de la majorit des occidentaux. Le bleu ple favorise la crativit, la sensibilit et l'imagination. L'idal serait de l'associer une couleur comme le jaune, qui stimule l'esprit et augmente la concentration et la capacit d'organisation. Le turquoise semble quant lui faciliter la communication. les nombreuses variantes de bleu permettent de crer des environnements tantt reposants, tantt inspirants, selon la fonction que vous dsirez attribuer un espace.
  • Page 24
  • 24 LO18 Symbolique des couleurs Le blanc Symbolique gnrale: Sobre, fidle, propre, clair, pure, innocent. Thme pour le web: Cinma, art, culture. Couleur de la puret, il symbolise l'innocence et la franchise. Il est signe d'unit par sa neutralit, engendrant calme, dtente et confiance. C'est aussi la couleur de la lumire, symbole de la joie et du faste.
  • Page 25
  • 25 LO18 Symbolique des couleurs Le noir Le noir est le symbole par excellence de l'lgance, de la modernit. On a qu' penser au "smoking", aux tenues de crmonie, aux objets de luxe ; il reprsente la richesse, le raffinement, voire mme, le mystre. Le noir possde des caractristiques paradoxales : il procure un sentiment de protection, de rconfort, de mme qu'une sensation de mystre ; il est associ au silence, l'infinit. Mais, le noir comporte aussi des connotations ngatives : on l'attribue l'austrit, et il est par tradition, associ au deuil. Le noir, utilis avec modration, peut tre inspirant et met mme en valeur les effets des autres couleurs auxquelles il est juxtapos. Il est cependant mieux de ne pas faire une utilisation abusive du noir, car il pourrait devenir difficile lire.
  • Page 26
  • 26 LO18 XHTML Lutilisation des feuilles de styles et dun web smantique t rendu possible ds lors que les diteurs (Microsoft, Netscape, Mozilla) se sont mis daccord sur lutilisation de technologies communes dans leurs produit. Le HTML 4 laisser sa place au XHTML 1.0
  • Page 27
  • 27 LO18 XHTML Il offre une sparation complte du fond et de la forme, la page ne contenant que du contenu balis de manire smantique, ces zones et balises tant mises en pages page une feuille de style (css). Disparition des version propres un navigateur, dans de nombreux cas disparition des versions WAP, mais aussi de versions imprimables et les dtections de navigateurs tant rendu inutiles (bien que des diffrences de comportements existent entre navigateurs) Maintenance et refonte graphique facilit (www.csszengarden.com)www.csszengarden.com Affichage des page plus rapide (certains allgement de page pouvant reprsenter 85%. Meilleur rfrencement du site > plus de visite (clients potenciels) > Bnfice ou Retour sur investissement accru) www.eyrolles.fr (site marchand XHTML)www.eyrolles.fr
  • Page 28
  • 28 LO18 Strict ou Transitionnel XHTML transitionnel Adapt au navigateur non-conforme Transition dhabitude de conception de page (la mise en page xhtml impose au concepteur de revoir sa manire de travailler, ce qui nest pas instantan tout comme le passage des navigateurs standards du ct de lutilisateur final. Les navigateurs tant gratuit, les versions les plus anciennes nont plus tre pris en compte quand la compatibilit daffichage du site. Il est impossible desprer faire un produit de qualit en retenant une cible qui a plus de 7 ans (Netscape 4)
  • Page 29
  • 29 LO18 Strict ou Transitionnel Transitionnel (suite) XHTML valide pour le balisage (smantique respecte), on peut aussi choisir le HTML 4.01) CSS valide pour le contrle de la typographie, de la couleur, des marges, etc... Emploi limit des tableaux XHTML pour la mise en page, en vitant toute imbrication profonde.
  • Page 30
  • 30 LO18 XHTML Strict Sparation complte de la structure, de la prsentation et du comportement CSS valide pour la mise en page, les tableaux ne sont utiliss que dans leurs but dorigine : la prsentation de donne tabulaire. Accent mis sur la structure, aucun arrangement avec le balisage Attention, certaines mises en pages sont rendues difficile (voire impossible) il faudra repenser le design.
  • Page 31
  • 31 LO18 Conseils gnraux Si la structure de votre page nest pas relative, le W3C recommande de penser sa page pour une rsolution cran 800*600 (~780px de large), moins que la demande ne vienne de votre client ou quune analyse prouve que plus de 80~85% de vos visiteurs utilise une rsolution suffisante pour laffichage de votre site. Ne jamais priver linternaute de ses repres, viter les sites pleines pages , ou ne pas retailler la page comme bon vous semble. Flash version html version sont proscrire (sauf dans le cas dagence de communication ou mini-site vnementiel), tout comme la page de chargement qui ouvre une seconde page avec votre site anim (full-flash) Ne pas faire de site full-flash , il ne permettent pas lindexation de page, un clic sur le bouton page prcdente vous renvois au dbut du site. Autant de raison qui agaceront vos internautes et les enverront chez la concurrence. Ne jamais oublier que Flash doit permettre une meilleure comprhension de votre contenu et donc son utilisation doit pleinement se justifier http://www.fullsail.com (cole vido et multimdia)http://www.fullsail.com Ne tenter pas de rinventer la roue en terme de navigation, lergonomie des sites volue mais nous pouvons capitalis un certains nombres de codes (navigation horizontale, verticale, onglet, menu accordon etc...)
  • Page 32
  • 32 LO18 Conseils gnraux (suite) Le contenu est roi, si vous souhaitez assurer une visibilit optimale votre site donner lui du contenu, intgrez vos mots clefs dans vos titres, faites des liens dessus, mettez les en valeurs. Aujourdhui votre site doit tre imprativement compatible Firefox car si il ne reprsente que 10%/15% des utilisateurs, dans certains secteur dactivit il peut reprsenter 80% des utilisateurs (secteur de linformatique) Proscrire les introductions flash, les pop-ups imposes (sauf si demande de linternaute), textes clignotants, tlchargement de polices etc... Proposez plusieurs faons daccder au contenu, si votre internaute besoin dun moteur de recherche ds la page daccueil vous pouvez revoir la structure de votre site. Dans le cadre dintgration de vido la guerre est gagn par Adobe, car lintgration de la vido dans le lecteur flash permet une diffusion multi plateforme intgrale, linternaute na pas choisir entre diffrents formats et dbits. www.myscpace.frwww.myscpace.fr http://video.google.frhttp://video.google.fr www.youtube.comwww.youtube.com www.dailymotion.frwww.dailymotion.fr
  • Page 33
  • 33 LO18 Conseils gnraux C.R.A.P Contraste Les lments diffrents doivent se remarquer, ce qui donne un aspect structur a votre page, ce qui empche votre utilisateur dtre noy dans une masse de couleurs. Rptition Lutilisation dune structure cohrente (couleurs et mise en page) tout au long de votre site permet votre internaute de se reprer plus aisment et dy trouver ses marques
  • Page 34
  • 34 LO18 Conseils gnraux C.R.A.P Alignement Chaque lments de la page besoin dtre visuellement connect quelques chose dautre. Proximit Le regroupement dlments de mmes nature permet lidentification de zones et donc lidentification des diffrents modules contenu dans la page (brves, Contenu, liens relatifs .
  • Page 35
  • 35 LO18 Reussir son design web 2.0 Simplicit Centrage du gabarit Limitation des colonnes Sparation du bandeau Identification ais des zones Navigation simple Logo gras Mise en valeur du texte Emphase du texte dintroduction Utilisation de couleurs vives Donner de la matire vos surfaces Dgrads Effet miroir Utilisation dicnes de navigation Cocardes toils
  • Page 36
  • 36 LO18 Toutes ces normes, recommandations standards et conseils ne doivent pas limiter votre crativit, mais vous servir de base pour crer un produit de qualit car on assiste aussi a une certaine uniformisation des sites, la difficult tant de capitalis sur ces principes et ne jamais oublier de maintenir la cration de sites ltat dart