CHARTE

Site internetGRAPHIE
commercial d’apothicaire

SOMMAIRE
 Modèles de page
 Typographie
 Couleurs
 Dimensions et découpes
 Images

HIND AMRAOUI
I) Modèles de page :
1. Structure des pages :
Toutes les pages sont construites sur la base du modèle suivant :

Exemple : Home 
1

7
 1 En tête du site qui se compose de :
Icône home 🏡 : c’est un lien qui revient toujours à la page d’accueil.
Icône de recherche 🔎 : Grâce à lui, L’utilisateur peut facilement
accéder à ce qu’il veut sur le site.
Abonnez à notre newsletter : Grâce à ce lien, l’utilisateur peut
participer à la newsletter pour recevoir des notifications sur le site.
Icône Se connecter : Créer un compte sur le site, ce qui facilite la
commande de l’utilisateur.
Icône Panier : c’est un lien où l’utilisateur retrouve ses achats sur le
site, à travers lequel il complète les étapes de la commande.

2 Logo : permettant de revenir sur la page d'accueil, et il retrouve sur

toutes les pages.

3 Remarque afin d’attirer l’attention de l’utilisateur et de l’inciter

à acheter sur le site.

4 Les articles : le site se compose de trois branches ;1er est pour le

produit d’herbes et amène l’utilisateur à la page de ce produit, 2 ème est
pour le produit d’huiles naturelles, 3ème est pour le produit de fruits
secs.
5 Petite Introduction sur le site.

6 Menus secondaires de la page que l’on retrouve sur toutes les

pages du site ; Afin de faciliter l’accès de l’utilisateur au reste des
pages du site.

7 Pied de page : on le retrouve sur toutes les pages et se compose

de liens(icônes) pour contacter : Facebook, Twitter, Instagram,
télégramme et le numéro de téléphone WhatsApp.
II) Typographie :
1. Typographie de la page d’accueil :

Élément Principale caractéristique

Texte de navigateur Police : Arial
(En tête de page) Type : Niveau 2 (h2) 35px
Couleur : # 000000
Minuscule avec le 1erlettre du mots Majuscule
Titre niveau 1 Police : Arial
Taille :32px
Couleur : # 000000
Texte corps de la plage Police : Arial
(p) Taille :30px
Couleur : # 000000
En Minuscule
Texte menus secondaire Police : Arial
Taille :30px (a) 35px(h2)
Couleur : #FDF7ED
En Minuscule

Il y a de la couleur rouge dans certains mots pour attirer l’attention.

2. Typographie de la page de connexion :

Élément Principale caractéristique
Texte de navigateur
Comme la page d’accueil.
(En tête de page)
Titre niveau 1 Police : Arial
Taille :45px
Couleur : # FFCC33
Majuscule
Texte corps de la plage Police : Arial
(p) Taille :25px (bold)+sans bold 16px
Couleur : # 000000
En Minuscule
Texte menus secondaire Comme la page d’accueil.
III) Couleurs :
En tête supérieure, (menus principaux du
#FDF7ED
site), fond de l’introduction sur le site.

Menus secondaires du site (le menus de la

#271B01
contact ).

Pour les autres pages la 1er couleur #FDF7ED c’est pour le menus
principaux et le 2ème couleur #271B01 pour le menu de contact.

IV) Dimensions et découpage :

1033px

70px
201px

440px

339px

350px

300px

50px
Figure : Dimensions : modèle du page d'accueil
 Élément Commentaire Dimensions

La page (Accueil) Dimensions globales des pages du site. 1033* ? px

Logo Image : images/lo.png 270*104px

Arrière plan du Logo Image : images/logo arriere plan saec.png 1033*201px

Tableau : tableau démonstratif sur quelques objets des pages.

V) Images :
Afin de rendre le site attrayant, l'image tient une place prédominante : donc nous
allons montrer les dimensions des différents images utilisées.

Image arrière-plan du
logo sous forme PNG
1033*201px

Image logo sous forme

PNG 270*104px

Images animation sous forme JPG

1032.5*440px
 Image d’un produit Image d’un produit Image d’un produit
sous forme JPG sous forme JPG sous forme JPG
300*340px 350*340px 300*340px

Fin