charte graphique multimédia - web

13
Sophie ROYER A. Segault 2013/2014 Université Franche-Comté Charte graphique multimédia - Web

Upload: royer-sophie

Post on 20-Jun-2015

370 views

Category:

Design


0 download

TRANSCRIPT

Page 1: Charte graphique multimédia - Web

Sophie ROYER

A. Segault

2013/2014

Université Franche-Comté

Charte graphique multimédia -

Web

Page 2: Charte graphique multimédia - Web

Charte graphique multimédia -Web

L’identification du site (logo, titre)

Page 3: Charte graphique multimédia - Web

Charte graphique multimédia -Web

La zone de navigation / menu

Menu de navigation gauche

Logo LamaH

Menu de navigation haut Onglets espaces personnels

Menu bas

Page 4: Charte graphique multimédia - Web

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 ci-dessous, 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.

Page 5: Charte graphique multimédia - Web

Charte graphique multimédia -Web

New Cicle

New Cicle

New Cicle

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 Style

New Cicle 16px Aligné droite

normal

Texte de labeur Le texte de labeur contient toujours un conteneur coloré, autre que le blanc. Il sera majoritairement blanc #ffffff Mais parfois pour distinguer des liens ou marquer une différence avec deux textes pourra être rose #d83a77 ou marron #634e42.

Police et taille Style

New Cicle 12px Justifié

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

Page 6: Charte graphique multimédia - Web

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.

Page 7: Charte graphique multimédia - Web

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 ci-dessous, 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

Page 8: Charte graphique multimédia - Web

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

Page 9: Charte graphique multimédia - Web

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 ».

Page 10: Charte graphique multimédia - Web

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.

Page 11: Charte graphique multimédia - Web

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

60px

1214 px

272 px 545 px

35px

67px

280px

310px

600px

10px

10px

35px

175 px

534 px

Page 12: Charte graphique multimédia - Web

Charte graphique multimédia -Web

Écrans d’une largeur de 1000px

985 px

57 px 57 px 57 px

287 px

Page 13: Charte graphique multimédia - Web

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.

25 px 25 px 56 px

600 px