Université Franche-Comté

A. Segault

Charte graphique multimédia
Web

Sophie ROYER

2013/2014
Charte graphique multimédia -Web
L’identification du site (logo, titre)
Charte graphique multimédia -Web
La zone de navigation / menu
Logo LamaH
Menu de navigation gauche

Menu de navigation hau...
Charte graphique multimédia -Web

Menu de navigation haut
Dans cette partie, on retrouve un menu latéral en haut de la pag...
Charte graphique multimédia -Web
Les typographies (titres, texte de labeur)
Titre
Les titres sont toujours directement sur...
Charte graphique multimédia -Web

Les liens (style, usage)

Excepté cette barre indicative du fonctionnement du site, qui ...
Charte graphique multimédia -Web
Les formulaires
Pour réaliser ce formulaire je me suis basé sur les critères étudiés préc...
Charte graphique multimédia -Web
Les éléments graphiques
Icones Générales

L’ensemble des icônes sont en aplat de couleur ...
Charte graphique multimédia -Web
Les images / photos (style, usage)
Les images et photographies ne doivent pas excéder un ...
Charte graphique multimédia -Web
Le pied de page
Il comporte la hiérarchie en termes de menu et de liens internes au site....
Charte graphique multimédia -Web
La grille de composition
En fonction des différentes résolutions, la taille du fond blanc...
Charte graphique multimédia -Web

Écrans d’une largeur de 1000px
985 px
57 px

287 px
57 px

57 px
Charte graphique multimédia -Web
Écrans d’une largeur de 600px
Pour cette résolution, la sidebar disparait pour gagner de ...
Prochain SlideShare
Chargement dans…5
×

Charte graphique multimédia - Web

714 vues

Publié le

Publié dans : Design, Business
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
714
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
22
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Charte graphique multimédia - Web

  1. 1. Université Franche-Comté A. Segault Charte graphique multimédia Web Sophie ROYER 2013/2014
  2. 2. Charte graphique multimédia -Web L’identification du site (logo, titre)
  3. 3. Charte graphique multimédia -Web La zone de navigation / menu Logo LamaH Menu de navigation gauche Menu de navigation haut Onglets espaces personnels Menu bas
  4. 4. Charte graphique multimédia -Web Menu de navigation haut Dans cette partie, on retrouve un menu latéral en haut de la page. Il comporte un accès direct et permanent à : - - L’accueil Annonces Origines Communauté Ils sont répartis par priorité et ordre d’importance quant à la navigation de l’utilisateur sur le site. L’élément le plus clair étant celui où l’utilisateur se trouve, ici : L’accueil. Au survol des différentes catégories du menu, une barre horizontale comme ci-dessous, viens glisser d’élément en élément. Au survol toujours, le sous-menu apparait horizontalement. Comme cidessous, l’élément le plus foncé étant celui survolé. Menu de navigation gauche Il se situe à gauche de la page de contenu. Et est présent comme un accompagnement au menu haut. il permet à l’utilisateur d’avoir rapidement accès aux annonces en passant par une action de tri. On y retrouve les principaux éléments du site de manière synthétique et en aperçu rapide comme par exemple, l’histoire du mois et les sélections de l’équipe. La sidebar comprend un fonctionnement général de parties et sous partie. En cas de sous partie, cela prendra l’apparence d’une liste retractable.
  5. 5. Charte graphique multimédia -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é droite Style normal Texte de labeur Le texte de labeur contient toujours un conteneur coloré, autre que le blanc. Il sera majoritairement blanc #ffffff New Cicle Mais parfois pour distinguer des liens ou marquer une différence avec deux textes pourra être rose #d83a77 ou marron #634e42. New Cicle Police et taille New Cicle 12px Justifié New Cicle Style normal Texte Spécifique Police et taille Style Brannboll Fet 12px normal Ce texte est réservé à certains éléments, afin de bien les distinguer. Comme par exemple les noms des utilisateurs ayant posté des annonces dans l’aperçu de l’annonce. Cette typographique peut-être reprise pour d’autres éléments graphiques, comme la création des images spécifiant les « sélections de l’équipe » par exemple. Exemples
  6. 6. Charte graphique multimédia -Web Les liens (style, usage) Excepté cette barre indicative du fonctionnement du site, qui comprend 3 liens. L’ensemble des liens sur le site possède un fond rose (#d83a77) En effet j’ai voulu créer un site à l’usage très rapide et très simple. Sur ma palette de couleurs, le rose est celui qui ressort le plus. J’ai aimé le placer sur des zones importantes qui attirent l’œil et qui permettent à l’utilisateur de savoir très vite où il veut aller. Cas particulier Dans le cas ci-dessous, nous nous trouvons dans la partie « ils se sont adoptés » et il s’agit des aperçus des articles rédigés par les utilisateurs. Au survol de l’image à la souris, un aperçu du texte apparaitra et sera cliquable. A gauche : l’image au survol et à droite sans survol.
  7. 7. Charte graphique multimédia -Web Les formulaires Pour réaliser ce formulaire je me suis basé sur les critères étudiés précédemment en TP, dont par exemple le feedback immédiat avec l’affichage direct d’erreur ou de validation des données entrées. Dans la maquette cidessous, j’ai illustré différents cas d’utilisation possibles. Zones de saisie H 25px L max 317 px Fond #ffffff + ombre interne Texte New Cicle 12px Zones de saisie non sélectionnée Texte #bfa772 Zones de saisie sélectionnée Contour #634e42 2px Texte #634e42 Zones de saisie erreur Contour # e01335 2px
  8. 8. Charte graphique multimédia -Web Les éléments graphiques Icones Générales L’ensemble des icônes sont en aplat de couleur blanche. Ils sont simples pour faciliter la compréhension de l’utilisateur. Seul le lama comporte une touche de couleur : rose, car il s’agit de l’icône « mon compte » dédié à l’utilisateur. Il s’agit d’une catégorie spécifique et personnelle. Le rose le différencie du reste. Ils mesurent 28x28cm maximum. Icones Partage & Contact Ces icones sont spécifiques étant donné qu’il s’agit en fait des logos des sites de partages. J’ai uniquement pris soin de les adapter au style graphique de la page. Le seul icône ici est l’enveloppe, travaillé comme les autres en aplat de couleur blanche. J’ai souhaité intégrer un fond rond de couleur beige derrière ces icônes car il s’agit avant tout de bouton censé être rapide et facile d’utilisation MAIS AUSSI redirigeant l’utilisateur vers une autre page. Ils se différencient ainsi assez facilement de tout autre icônes/lien. Ils mesurent 30x30cm maximum. Puces Générable en css3, j’ai réalisé des puces très simples : des triangles vers le bas / sur le côté afin d’indiquer l’ouverture ou non du sujet. Et les listes à puces, comprennent des puces simples rondes de 3px Filets Sidebar : 272 px de large sur 1px de haut Filets Contenu : Les titres seront toujours accompagné d’une barre de soulignement équivalent à la largeur du contenu soit : 545 px de large sur 1 px de haut Filets Séparateur Menu/Contenu 860px de large sur 1 px de haut
  9. 9. Charte graphique multimédia -Web Les images / photos (style, usage) Les images et photographies ne doivent pas excéder un poids de 50 Ko pour alléger 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 « L’histoire du mois » Cette image doit être rognée (ou mesurer) L 272x H 163 px Il s’agit d’une miniature servant d’aperçu pour l’originale pouvant mesurer n’importe quelle taille. On retrouve d’autres aperçus dans les catégories « annonces » et « ils se sont adoptés » L’aperçu est de taille L 176 x H 224 px Dans les aperçus des annonces sur la page d’accueil on retrouve une autre image : L 176 x H 161 Ci-dessous l’image du slider de la page d’accueil. Elle contient les dernières actualités du site. Elle possède un code graphique à elle-même puisqu’elle devra contenir obligatoirement un titre type « Sélection spéciale Rouquins » et devra être aux couleurs du site. Les polices appliquées sont les mêmes que pour l’ensemble du site, et l’utilisation de la police attribué au texte spécifique est de rigueur pour certains mots clés à mettre en avant : « Rouquins ».
  10. 10. Charte graphique multimédia -Web Le pied de page Il comporte la hiérarchie en termes de menu et de liens internes au site. J’ai repris les codes typographiques et graphiques avec les filets, la typo etc.
  11. 11. Charte graphique multimédia -Web La grille de composition En fonction des différentes résolutions, la taille du fond blanc de contenu change, mais les éléments internes eux ne changent pas. C’est pourquoi j’indiquerai par la suite uniquement les proportions autres que celles des éléments internes. Écrans d’une largeur de 1800px 1214 px 272 px 545 px 60px 534 px 35px 67px 175 px 280px 310px 10px 600px 10px 35px
  12. 12. Charte graphique multimédia -Web Écrans d’une largeur de 1000px 985 px 57 px 287 px 57 px 57 px
  13. 13. Charte graphique multimédia -Web Écrans d’une largeur de 600px Pour cette résolution, la sidebar disparait pour gagner de la place et faciliter l’utilisation de la page à l’utilisateur. 600 px 25 px 56 px 25 px

×