Sommaire

I.

INTRODUCTION..2

II.

LOGOTYPE..2
2.1 Dfinition..2
2.2 Conception.............2

III. Couleurs et polices utilises3

3.1 Couleurs utilises.3
3.2 Polices utilises.3
3.3 Titres et tailles4
IV. Modle des pages..4
4.1 Page daccueil.4
4.2 Pages courantes......5
V.

IMAGES .7
5.1 Dimensions conseilles des images .........8

I.

INTRODUCTION

Dans le cadre du projet portail web de Moon Optique, et aprs

avoir effectu la conception du portail, nous allons entamer la phase de la
charte graphique qui permet de prsenter lidentit graphique et visuelle du
portail et de donner une homognit lensemble des publications web.
Pour ce faire, nous allons commencer par la conception du
logotype, puis mettre en lumire les couleurs utilises, le fond des pages et
les diffrentes polices utilises pour finir avec les modles des pages.
II.

LOGOTYPE

2.1 Dfinition :
Un

logotype,

plus

couramment

appel

logo,

est

une

reprsentation typographique qui sert identifier de manire unique et

immdiate les socits, associations, institutions, produits, services ou toute
autre sorte dorganisation dans le but de diffrencier le propritaire du
logotype des autres entits.
2.2 Conception :
Notre quipe na pas concevoir un nouveau logo pour la socit,
cette dernire est dj titulaire dun logotype qui figure sur sa carte visite et
lentre du magasin.

III. Couleurs et polices utilises :

3.1 Couleurs utilises :

En se conformant aux couleurs prsentes sur le logo de la socit,
les palettes des couleurs adoptes par lquipe projet sont reprsentes
dans le tableau ci-aprs.
COULEUR

PALETTE

Bleu dgrad

#359CD4

Bleu fonc

#083570

Vert

#35F34B

Gris

#DEDEDD

Noir

#000000

Blanc

#FFFFFF

3.2 Les polices utilises :

Afin de garantir une homognit et une cohrence visuelle quant la
typographie du site, lcriture de tout le contenu du site a comme police
le Eras Demi ITC , lexception du titre de lcole que lon a insr
sur lentte des pages qui est crit en Comic Sans MS et celui en
arabe qui est crit avec la police Maghribi

Eras Demi ITC : A B C D E F G H I J K L

1234567890
abcdefghijkl
Comic Sans MS: MOON OPTIC

7654321

3.3. Titres et tailles

Niveau 1 : titre de la socit dans lentte

MOON OPTIC

22 pixels

Niveau 2 : titre des rubriques

Vous tes

16 pixels

Niveau 3 : titre du contenu

Mot de la grante

14 pixels

Niveau 4 : texte du contenu

MOON OPTIC vous offre

11 pixels

IV. Modles des pages :

Avant de traiter les modles des pages, il convient de mentionner

le contenu et la forme de lentte et du pied de pages vu quils vont figurer
sur toutes les pages du portail.
Entte des pages :
En haut de toutes les pages, il comprend le logo de MOON OPTIC,
le titre, le menu principal, la liste des langues et la barre de recherche.

MOON OPTIC
Lunettes de vue

Lunettes de soleil

lentilles

Vous tes

Pied des pages :

Lunettes de vue
Lunettes de soleil
Lentilles
Vous tes

plan du site

contacter nous

conditions lgales

4.1. Page daccueil :

Etant la page vitrine du portail et la premire visiter, la page
daccueil requiert une importance capitale dans le but de gagner la confiance
de linternaute et de linciter revenir au site.
Il est ncessaire ainsi quelle mettra en valeur le contenu gnral
du portail et facilite laccs linformation recherche.
La page daccueil est divise en 6 zones

- Zone 1 En-tte
- Zone 2 Slider: cette partie inclut un certain nombre de photos pour les
rubriques Actualits et Annonces .
- Zone 3 : La colonne gauche est divise en deux parties pour afficher la
carte qui permet de localiser la socit et en bas on affiche les
horaires de travail et les congs.
- Zone 4 : rserve au mot de la grante de MOON OPTIC.
- Zone 5 : Cette zone contient les nouveaux articles publis.
- Zone 6 Pied de page

Le format adopt par lquipe pour cette page est le suivant :

Dfilement de photos (SLIDER)

et

La carte

Marge

lhoraire de travail

En-tte de page (HEADER)

Mot de la grante
Marge

5
Les nouveaux articles
publis

Pied de page (FOOTER)

4.2. Pages courantes :

Il existe deux sortes de pages, une pour les produits et lautre pour
les espaces utilisateurs.
a) Page des produits :
- Zone 1 En-tte
- Zone 2 Colonne gauche : une colonne verticale gauche contient un
filtre pour afficher une slection par marque ou par
prix.
- Zone 3 Corps : la liste des produits (globale ou bien slectionne).
- Zone 4 Pied de page
Le format des pages courantes est reprsent comme suit :

Entte de la page En-tte

Marge

Filtre

Les produits

Marge

Pied de page

b) La page de lespace utilisateurs :

La diffrence avec celle de la page des produits rside dans 2 et 3 comme
suit :
La zone 2 : contient les tches spcifiques de lutilisateur connect.
La zone 3 : contient soit un formulaire, soit une liste dinformations selon la
tche choisie par lutilisateur.
V.

IMAGES :

Linsertion dimages est vitale afin de mettre en valeur les produits

mis en vente et de rendre notre portail plus expressif et parlant. Il fallait
ainsi que nous respections certaines rgles:
Utilisation des formats gratuits du type JPEG ou GIF
Eviter dutiliser des images de grand poids pour ne pas alourdir
le chargement des pages.
Modration de la taille et la qualit des illustrations utilises vu le
grand nombre des images inclure dans le portail.

Dimensions conseilles des images utilises dans le portail web de

MOON OPTIC
-

Pour les images qui vont dfiler dans le slider, on a choisi dutiliser
des images de taille : 500x270

Pour les images des produits seront de taille : 210x140

Pour les images qui vont figurer dans las diffrents articles du
portail, la taille des images va diffrer selon larticle et selon
limportance et linformation quapporte chaque image dans larticle.
La taille minimale est : 150x120
La taille maximale est : 500x270