La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

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

Présentations similaires


Présentation au sujet: "1 & Charte graphique Outils graphique. 2 LO18 Charte graphique ? Définition Le but de la charte graphique est de conserver une cohérence graphique dans."— Transcription de la présentation:

1 1 & Charte graphique Outils graphique

2 2 LO18 Charte graphique ? Définition Le but de la charte graphique est de conserver une cohérence graphique dans les réalisations graphiques d'une même organisation, projet ou entreprise quels que soient les différents intervenants de la production

3 3 LO18 Les intérêts de la charte 1 L'identité graphique reste intacte quelles que soient les réalisations graphiques, afin que l'organisation, le projet ou l'entreprise (qui sont une somme d'individualités) parle « d'une seule voix ». Les anglophones parlent de corporate design (littéralement : dessin de l'entreprise). 2 La charte graphique permet au récepteur d'identifier facilement l'émetteur et, par habitude si la cohérence est respectée, de se repérer visuellement dans les différentes réalisations graphiques, et au sein même d'un même support graphique (ce qui facilite la lecture). Une charte graphique bien conçue doit laisser suffisamment de liberté en constituant des "méta-règles" souples, c'est-à-dire en évitant les interdictions, et en envisageant le maximum de contextes où des règles doivent s'appliquer pour l'utilisation des signes graphiques de l'identité graphique

4 4 LO18 La charte papier –Les polices de caractères utilisées dans les documents afin de permettre de créer différents 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'à créer une police de caractères spécifique. –Les jeux de couleurs déclinables sur les différents supports de communication : d'une manière générale la charte indique les valeurs Pantone, CMJN, RVB et hexadécimale de chaque couleurPantone –L'utilisation des élements graphiques tels que les filigranes, détail du logo agrandi, courbes et traits spécifique à l'entreprise. –Les principes du 'choix des images et des illustrations. Chaque signe graphique utilisé par l'organisation est classé par thème en précisant son sens et en effectuant une liste des concepts qui s'y rattachent. Il ne s'agit pas d'appliquer ces codes dans leur intégralité mais d'en sélectionner quelques-uns afin que tout nouveau document émis par la société participe à la construction de son image. L'essentiel est de rester dans l'univers graphique de l'entreprise, ou parfois de le créer. La charte graphique s'applique à définir : Le logotype : ses couleurs définies grâce aux Pantone, sa position dans la page sur tous les supports (papier à en-tête, documents officiels, plaquettes, dossier et chemises, camion, etc.), la zone d'exclusion (espace protégé minimum autour du logo), ses déclinaisons sur des fonds blancs et de couleurs. La charte peut également définir les interdits : par exemple, l'interdiction d'apposer le logo sur un fond noir, de redimensionner le logo sans garder un rapport d'homothétie …

5 5 LO18 Charte multimédia La charte graphique internet/intranet est un document papier ou un mini-site qui permet de définir la position des différents éléments qui constituent les principales pages d'un site avant la programmation de celles-ci. Le but, voisin du précédent, 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 éléments graphiques étant contingentés et présents dans le cache), participant à la bonne perception de l'entreprise par le visiteur.

6 6 LO18 Charte Graphique UTC LUTC sest doté dune véritable charte graphique (consultable sur lintranet > vie pratique. Pour compléter cette démarche lUTC a uniformisé ses documents papiers et les proposent au téléchargement > bureau électronique Le logo sest vu remanié –Couleurs conservées Jaune, pantone 116 Gris, cold grey 10C –Passage de « la porte » à « la passerelle » Charte multimédia « restylisé » mais une réelle refonte est en cours délaboration.

7 7 LO18 Charte formation multimédia 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 larrivée de la charte graphique institutionnelle définitive.

8 8 LO18 Les « Outils » dédiés à la création de site internet Médias Logiciels Démarches Recommandations Standards Ergonomie

9 9 LO18 Médias Aujourdhui et grâce au développement du haut- débit, nous assistons à une véritable monté en puissance de la musique ou de la vidéo sur internet. Pour le développement de certains site on parle de « cross-média » tant limbrication des différents médias est importante. ATTENTION : la vidéo et la musique sont des médias consmmateurs de bandes-passantes, cela doit rester une expérience pour linternaute pas une « torture ».

10 10 LO18 Les logiciels Il est toujours possible de réaliser un site internet avec un simple éditeur de texte (bloc-notes), mais la création de site est aujourdhui un véritable secteur qui sest structuré et une économie (fleurissante) sest développé, il faut donc faire vite et bien (1 année-web = 3 mois). le marché est dominé par le géant américain Adobe qui à absorbé son unique vrai concurrent Macromédia.

11 11 LO18 Editeurs html Outils permettant la création de page Internet, aujourdhui les plus performant sont wysiwyg, permettent décrire 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 macromédia/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 intégrant les principaux langages Internet (UltraEdit), leurs légèreté et leurs puissance en fait lallié préféré des développeurs

12 12 LO18 Retouche et création graphique Logiciels permettant la création de visuels mais aussi dinterface graphique. Leurs puissances et leurs possibilités ne semblent pas avoir de limites si ce nest celle de lutilisateur (imagination et compétences). Ces logiciels « amusants » et « ludique » nécessite un véritable investissement humain pour qui veut en maîtriser plus de 20 % Photoshop règne 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 Macromédia qui est conservé dans la gamme de produit mais soriente vers une niche

13 13 LO18 Dessin vectoriel Permet la réalisation dillustration utilisant des formes géométriques. Souvent intégré dans la création de visuels, car ses performances concernant le travail typographique et des formes le rend indispensable dans la réalisation dinterface ou dillustration moderne Illustrator est aujourdhui sans réel concurrence sur ce segment, il sagit ici dun logiciel aussi exigeant que Photoshop.

14 14 LO18 Animation vectoriel A leurs début ces logiciels était destinés à lanimation, aujourdhui ces logiciels permettent la création dinterface ou danimations évoluées capable dintégrer de la vidéo ou de récupérer et écrire dans la base de donnée dun site internet moderne Flash est aujourdhui un outil de développement et sest imposé comme un véritable standard étant aujourdhui présent sur plus de 96% des navigateurs et chacune des évolutions du plugin connaît un taux de pénétration toujours plus élevé. –Le format concurrent et libre est le SVG (scalable vector graphic) –Exemple Mini site Audi R8 Ikea Martini

15 15 LO18 Vidéo Impensable il y a peu la vidéo est arrivé sur internet et elle offre a linternaute une nouvelle expérience multimédia, les logiciels utilisés ne sont pas des logiciels dédiés, ils intègrent la possibilité dexporter à des formats reconnut sur internet afin de ne pas pénaliser linternaute. Adobe Première est lun des plus populaires concurrent de Final cut pro (Apple).

16 16 LO18 Démarche le BRIEFLa clef de voûte du succès dun votre projet Internet est comme dans tous les métiers de la communication : le BRIEF Sachez être à lécoute de votre « client » Identifiez votre cible (CSP, âge, sexe…) Ne surtout jamais commencer à créer votre avant validation des maquettes écran et du cahier des charges signé

17 17 LO18 Symbolique des couleurs Notion à prendre en compte dans le choix de couleurs est la luminosité matérielle. Veillez à toujours tester vos choix sur différents moniteurs, navigateurs et systèmes d'exploitation; Un choix judicieux sur une plateforme commune peut s'avérer catastrophique sur une autre...

18 18 LO18 Symbolique des couleurs Le jaune Symbolique générale: Joyeux, spirituel, dynamique, science, conscience, idéalisme, action, luminosité. Thème pour le web: Tourisme, diverstissement. Couleur de l'intuition, il symbolise la jeunesse et l'audace. C'est la couleur de la créativité et de l'intelligence lumineuse, un stimulateur de l'intellect. Le jaune est votre plus grand allié dès qu'il s'agit de rendre plus lumineuse une zone à mettre en valeur, un focus sur texte... le jaune favorise la concentration, la mémoire, le jugement et la prise de décision. C'est également une couleur qui favorise l'assimilation de nouvelles idées et la capacité à comprendre différents points de vue. De plus, il semble que le jaune aide les gens à être mieux organisés et à adopter une attitude optimiste.

19 19 LO18 Symbolique des couleurs Lorange Symbolique générale: Stimulant, énergie, ambition, enthousiasme, imagination. Thème pour le web: Nature, loisirs. Riche, forte et chaleureuse, la couleur orange est dotée de vertus stimulantes. Elle dessine une ambiance confortable et intime, cherchant la confiance et l'apaisement. Bien que lorange n'a pas réussi à acquérir un symbolisme fort (comparé au jaune et au rouge), il demeure que cette couleur occupe une place importante dans les domaines dépendant d'une bonne visibilité. L'orange est la couleur joyeuse par excellence. Cette couleur stimulante ravive la bonne humeur. Les teintes plus pâles, comme le pêche ou l'abricot, aident à rétablir l'énergie.

20 20 LO18 Symbolique des couleurs Le rouge Symbolique générale: Chaud, dynamique, stimulant, excitant, force, passion, puissance, interdiction, danger. Thème pour le web: Publicité, médias. 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 même agressives. Le rouge est la couleur qui a le plus d'impact sur nos sens. Le rouge est souvent considéré comme la couleur des couleurs. Le rouge est joyeux. Beaucoup de produits destinés aux enfants ou associés au plaisir sont rouges : ballons, jouets, vêtements, bonbons, etc. Il n'est pas nécessaire de placarder du rouge pour profiter des effets bénéfiques de cette couleur.

21 21 LO18 Symbolique des couleurs Le vert Symbolique générale: Calme, équilibre, repos, activité spirituelle, espérance, nature, immortalité, repos. Thème pour le web: Nature, loisirs. Le vert est symbole de vie, de croissance, et d'harmonie. C'est une couleur qui réconforte, qui détend. Le vert pomme et le vert lime ont un côté plus stimulant ; ils créent une ambiance joyeuse et légère, alors que les teintes plus sombres comme le vert bouteille et l'olive confèrent une touche de calme au décor.

22 22 LO18 Symbolique des couleurs Le violet Symbolique générale: Tristesse, mélancolie, dignité, politesse, jalousie, mystère, spiritualité. Thème pour le web: Art, culture. Couleur qui renferme une mélancolie certaine, mélancolie qui peut être source de création... Elle crée donc une atmosphère spirituelle ou méditative, emprunte de sensibilité et de créativité. Selon les psychologues de la couleur, le violet favorise le sens artistique. On attribue au violet des propriétés calmantes et apaisantes. Le violet contribue à l'équilibre et est lié au sens artistique et musical, aux grands idéaux, à l'intuition et à la spiritualité. Il favorise la créativité, la sensibilité et la compassion.

23 23 LO18 Symbolique des couleurs Le bleu Symbolique générale: Calme, sincèrité. Paix, immatérialité, méditation, sagesse, rêverie. Thème pour le web: Informatique, high-tech, médecine. Symbole d'équilibre, c'est la couleur du bien-être, de la sérénité, du contrôle de soi. Il pousse à la bonté et mène à l'intelligence : couleur du ciel, de l'esprit et de la pensée. Le bleu évoque de vastes espaces calmes et sereins. Le bleu est, depuis fort longtemps, la couleur préférée de la majorité des occidentaux. Le bleu pâle favorise la créativité, la sensibilité et l'imagination. L'idéal 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 créer des environnements tantôt reposants, tantôt inspirants, selon la fonction que vous désirez attribuer à un espace.

24 24 LO18 Symbolique des couleurs Le blanc Symbolique générale: Sobre, fidèle, propre, clair, pure, innocent. Thème pour le web: Cinéma, art, culture. Couleur de la pureté, il symbolise l'innocence et la franchise. Il est signe d'unité par sa neutralité, engendrant calme, détente et confiance. C'est aussi la couleur de la lumière, symbole de la joie et du faste.

25 25 LO18 Symbolique des couleurs Le noir Le noir est le symbole par excellence de l'élégance, de la modernité. On a qu'à penser au "smoking", aux tenues de cérémonie, aux objets de luxe ; il représente la richesse, le raffinement, voire même, le mystère. Le noir possède des caractéristiques paradoxales : il procure un sentiment de protection, de réconfort, de même qu'une sensation de mystère ; il est associé au silence, à l'infinité. Mais, le noir comporte aussi des connotations négatives : on l'attribue à l'austérité, et il est par tradition, associé au deuil. Le noir, utilisé avec modération, peut être inspirant et met même 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.

26 26 LO18 XHTML Lutilisation des feuilles de styles et dun web sémantique à été rendu possible dès 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

27 27 LO18 XHTML –Il offre une séparation complète du fond et de la forme, la page ne contenant que du contenu balisé de manière sémantique, 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 détections de navigateurs étant rendu inutiles (bien que des différences de comportements existent entre navigateurs) –Maintenance et refonte graphique facilité (www.csszengarden.com)www.csszengarden.com –Affichage des page plus rapide (certains allégement de page pouvant représenter 85%. –Meilleur référencement du site > plus de visite (clients potenciels) > Bénéfice ou Retour sur investissement accru) (site marchand XHTML)www.eyrolles.fr

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 manière de travailler, ce qui nest pas instantané tout comme le passage à des navigateurs standards du côté 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 despèrer faire un produit de qualité en retenant une cible qui a plus de 7 ans (Netscape 4)

29 29 LO18 Strict ou Transitionnel Transitionnel (suite) –XHTML valide pour le balisage (sémantique respectée), on peut aussi choisir le HTML 4.01) –CSS valide pour le contrôle de la typographie, de la couleur, des marges, etc... –Emploi limité des tableaux XHTML pour la mise en page, en évitant toute imbrication profonde.

30 30 LO18 XHTML Strict –Séparation complète de la structure, de la présentation et du comportement –CSS valide pour la mise en page, les tableaux ne sont utilisés que dans leurs but dorigine : la présentation de donnée 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.

31 31 LO18 Conseils généraux Si la structure de votre page nest pas relative, le W3C recommande de penser sa page pour une résolution é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 résolution suffisante pour laffichage de votre site. Ne jamais priver linternaute de ses repères, é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 événementiel), 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 précédente vous renvois au début du site. Autant de raison qui agaceront vos internautes et les enverront chez la concurrence. Ne jamais oublier que Flash doit permettre une meilleure compréhension de votre contenu et donc son utilisation doit pleinement se justifier –http://www.fullsail.com (école vidéo et multimédia)http://www.fullsail.com Ne tenter pas de réinventer la roue en terme de navigation, lergonomie des sites évolue mais nous pouvons capitalisé un certains nombres de codes (navigation horizontale, verticale, onglet, menu accordéon etc...)

32 32 LO18 Conseils généraux (suite) Le contenu est roi, si vous souhaitez assurer une visibilité optimale à votre site donner lui du contenu, intégrez vos mots clefs dans vos titres, faites des liens dessus, mettez les en valeurs. Aujourdhui votre site doit être impérativement compatible à Firefox car si il ne représente « que » 10%/15% des utilisateurs, dans certains secteur dactivité il peut représenter 80% des utilisateurs (secteur de linformatique) Proscrire les introductions flash, les pop-ups imposées (sauf si demande de linternaute), textes clignotants, téléchargement de polices etc... Proposez plusieurs façons daccéder au contenu, si votre internaute à besoin dun moteur de recherche dès la page daccueil vous pouvez revoir la structure de votre site. Dans le cadre dintégration de vidéo la guerre est gagné par Adobe, car lintégration de la vidéo dans le lecteur flash permet une diffusion multi plateforme intégrale, linternaute na pas à choisir entre différents formats et débits. –www.myscpace.frwww.myscpace.fr –http://video.google.frhttp://video.google.fr –www.youtube.comwww.youtube.com –www.dailymotion.frwww.dailymotion.fr

33 33 LO18 Conseils généraux C.R.A.P Contraste –Les éléments différents doivent se remarquer, ce qui donne un aspect structuré a votre page, ce qui empêche votre utilisateur dêtre noyé dans une masse de couleurs. Répétition –Lutilisation dune structure cohérente (couleurs et mise en page) tout au long de votre site permet à votre internaute de se repérer plus aisément et dy trouver ses marques

34 34 LO18 Conseils généraux C.R.A.P Alignement –Chaque éléments de la page à besoin dêtre visuellement connecté à quelques chose dautre. Proximité –Le regroupement déléments de mêmes nature permet lidentification de zones et donc lidentification des différents modules contenu dans la page (brèves, Contenu, liens relatifs ….

35 35 LO18 Reussir son design web 2.0 Simplicité Centrage du gabarit Limitation des colonnes Séparation 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 matière à vos surfaces Dégradés Effet miroir Utilisation dicônes de navigation Cocardes étoilés

36 36 LO18 Toutes ces normes, recommandations standards et conseils ne doivent pas limiter votre créativité, mais vous servir de base pour créer 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 création de sites à létat dart


Télécharger ppt "1 & Charte graphique Outils graphique. 2 LO18 Charte graphique ? Définition Le but de la charte graphique est de conserver une cohérence graphique dans."

Présentations similaires


Annonces Google