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