Charte Graphique - Web

download Charte Graphique - Web

of 13

  • date post

    27-Jan-2015
  • Category

    Design

  • view

    120
  • download

    3

Embed Size (px)

description

 

Transcript of Charte Graphique - Web

  • 1. Universit Franche-ComtA. SegaultCharte graphique multimdia WebSophie ROYER2013/2014

2. Charte graphique multimdia -Web Lidentification du site (logo, titre) 3. Charte graphique multimdia -Web La zone de navigation / menu Logo LamaH Menu de navigation gaucheMenu de navigation hautOnglets espaces personnelsMenu bas 4. Charte graphique multimdia -WebMenu de navigation haut Dans cette partie, on retrouve un menu latral en haut de la page. Il comporte un accs direct et permanent : --Laccueil Annonces Origines CommunautIls sont rpartis par priorit et ordre dimportance quant la navigation de lutilisateur sur le site. Llment le plus clair tant celui o lutilisateur se trouve, ici : Laccueil. Au survol des diffrentes catgories du menu, une barre horizontale comme ci-dessous, viens glisser dlment en lment.Au survol toujours, le sous-menu apparait horizontalement. Comme cidessous, llment le plus fonc tant celui survol.Menu de navigation gauche Il se situe gauche de la page de contenu. Et est prsent comme un accompagnement au menu haut. il permet lutilisateur davoir rapidement accs aux annonces en passant par une action de tri. On y retrouve les principaux lments du site de manire synthtique et en aperu rapide comme par exemple, lhistoire du mois et les slections de lquipe. La sidebar comprend un fonctionnement gnral de parties et sous partie. En cas de sous partie, cela prendra lapparence dune liste retractable. 5. Charte graphique multimdia -Web Les typographies (titres, texte de labeur) Titre Les titres sont toujours directement sur le fond du contenu qui est blanc. Les titres sont donc toujours de la couleur : #634e42 Police et taille New Cicle 16px Align droiteStyle normalTexte de labeur Le texte de labeur contient toujours un conteneur color, autre que le blanc. Il sera majoritairement blanc #ffffffNew CicleMais parfois pour distinguer des liens ou marquer une diffrence avec deux textes pourra tre rose #d83a77 ou marron #634e42.New CiclePolice et taille New Cicle 12px JustifiNew CicleStyle normalTexte Spcifique Police et tailleStyleBrannboll Fet 12pxnormalCe texte est rserv certains lments, afin de bien les distinguer. Comme par exemple les noms des utilisateurs ayant post des annonces dans laperu de lannonce. Cette typographique peut-tre reprise pour dautres lments graphiques, comme la cration des images spcifiant les slections de lquipe par exemple.Exemples 6. Charte graphique multimdia -WebLes liens (style, usage)Except cette barre indicative du fonctionnement du site, qui comprend 3 liens. Lensemble des liens sur le site possde un fond rose (#d83a77) En effet jai voulu crer un site lusage trs rapide et trs simple. Sur ma palette de couleurs, le rose est celui qui ressort le plus. Jai aim le placer sur des zones importantes qui attirent lil et qui permettent lutilisateur de savoir trs vite o il veut aller.Cas particulier Dans le cas ci-dessous, nous nous trouvons dans la partie ils se sont adopts et il sagit des aperus des articles rdigs par les utilisateurs. Au survol de limage la souris, un aperu du texte apparaitra et sera cliquable. A gauche : limage au survol et droite sans survol. 7. Charte graphique multimdia -Web Les formulaires Pour raliser ce formulaire je me suis bas sur les critres tudis prcdemment en TP, dont par exemple le feedback immdiat avec laffichage direct derreur ou de validation des donnes entres. Dans la maquette cidessous, jai illustr diffrents cas dutilisation possibles.Zones de saisie H 25px L max 317 pxFond #ffffff + ombre interneTexte New Cicle 12pxZones de saisie non slectionneTexte #bfa772Zones de saisie slectionneContour #634e42 2pxTexte #634e42Zones de saisie erreurContour # e01335 2px 8. Charte graphique multimdia -Web Les lments graphiques Icones GnralesLensemble des icnes sont en aplat de couleur blanche. Ils sont simples pour faciliter la comprhension de lutilisateur. Seul le lama comporte une touche de couleur : rose, car il sagit de licne mon compte ddi lutilisateur. Il sagit dune catgorie spcifique et personnelle. Le rose le diffrencie du reste. Ils mesurent 28x28cm maximum.Icones Partage & ContactCes icones sont spcifiques tant donn quil sagit en fait des logos des sites de partages. Jai uniquement pris soin de les adapter au style graphique de la page. Le seul icne ici est lenveloppe, travaill comme les autres en aplat de couleur blanche. Jai souhait intgrer un fond rond de couleur beige derrire ces icnes car il sagit avant tout de bouton cens tre rapide et facile dutilisation MAIS AUSSI redirigeant lutilisateur vers une autre page. Ils se diffrencient ainsi assez facilement de tout autre icnes/lien. Ils mesurent 30x30cm maximum.Puces Gnrable en css3, jai ralis des puces trs simples : des triangles vers le bas / sur le ct afin dindiquer louverture ou non du sujet. Et les listes puces, comprennent des puces simples rondes de 3pxFilets Sidebar : 272 px de large sur 1px de hautFilets Contenu : Les titres seront toujours accompagn dune barre de soulignement quivalent la largeur du contenu soit : 545 px de large sur 1 px de hautFilets Sparateur Menu/Contenu 860px de large sur 1 px de haut 9. Charte graphique multimdia -Web Les images / photos (style, usage) Les images et photographies ne doivent pas excder un poids de 50 Ko pour allger les temps de chargement des pages. Le logo est sur fond blanc et fait 140x140px et doit se trouver en haut gauche de la page web. Le slogan est align la moiti du logo.Image Lhistoire du mois Cette image doit tre rogne (ou mesurer) L 272x H 163 px Il sagit dune miniature servant daperu pour loriginale pouvant mesurer nimporte quelle taille. On retrouve dautres aperus dans les catgories annonces et ils se sont adopts Laperu est de taille L 176 x H 224 pxDans les aperus des annonces sur la page daccueil on retrouve une autre image : L 176 x H 161Ci-dessous limage du slider de la page daccueil. Elle contient les dernires actualits du site. Elle possde un code graphique elle-mme puisquelle devra contenir obligatoirement un titre type Slection spciale Rouquins et devra tre aux couleurs du site. Les polices appliques sont les mmes que pour lensemble du site, et lutilisation de la police attribu au texte spcifique est de rigueur pour certains mots cls mettre en avant : Rouquins . 10. Charte graphique multimdia -Web Le pied de page Il comporte la hirarchie en termes de menu et de liens internes au site. Jai repris les codes typographiques et graphiques avec les filets, la typo etc. 11. Charte graphique multimdia -Web La grille de composition En fonction des diffrentes rsolutions, la taille du fond blanc de contenu change, mais les lments internes eux ne changent pas. Cest pourquoi jindiquerai par la suite uniquement les proportions autres que celles des lments internes.crans dune largeur de 1800px 1214 px 272 px545 px 60px 534 px 35px 67px175 px280px310px 10px600px10px 35px 12. Charte graphique multimdia -Webcrans dune largeur de 1000px 985 px 57 px287 px 57 px57 px 13. Charte graphique multimdia -Web crans dune largeur de 600px Pour cette rsolution, la sidebar disparait pour gagner de la place et faciliter lutilisation de la page lutilisateur.600 px25 px56 px25 px