2ème année GIRBD ENSEM

Mini-Projet en infographie
-Travail individuel-

Une charte graphique aboutit généralement à la

création de modèles de pages (en anglais Template)
servant comme des gabarits pour la création du site
web. Les Template sont des images créées sous forme
de calques Photoshop représentant le squelette
graphique des pages types dans un site web ou une
application mobile comme par exemple : la page
d’accueil, la page du contenu ou la page
administrateur …

Elle sera préalable à l’étape du développement et servira justement de guide pour développer
l’application web ou mobile et devrait permettre de créer une interface cohérente, pratique et
conviviale.
Sur la charte graphique web/mobile seront définis l’emplacement des symboles tels que le
logo, les éléments graphiques, les couleurs clés, les fontes de caractère et surtout et avant tout
permettre une identification rapide l’identité graphique de site web ou de l’application mobile.

Vous êtes amenés dans ce cadre à créer une charte graphique destinée à un canal au choix,
soit pour une application mobile ou un site web. Elle doit être inscrite dans une des deux
thématiques suivantes :
Un site web pour une entreprise opérante dans le secteur digital -ex: SSII-
Une plateforme de E-learning (apprentissage en ligne) destinée à votre école l’ENSEM.

Vous avez le libre choix du maquettage et des fonctionnalités à proposer dans la plateforme
cible sous forme de design graphique.

Les étapes à suivre pour l’élaboration de ce travail sont :

1. Déterminez le besoin en terme fonctionnel

À répondre à certaines questions concernant votre vision fonctionnelle de la plateforme cible;
par exemple : Vous avez votre nom du site/application ? Vous savez de quelles fonctionnalités
vous avez besoin ? Vous avez compté le nombre de pages qui figureront sur votre site ? Vous
avez identifié le contenu qui sera présent sur votre site ?
2ème année GIRBD ENSEM

2. Réaliser le maquettage
Eh bien, n’envisagez pas de créer un site
web/application mobile sans maquettes
fonctionnelles, souvent appelées wireframes. Il
s’agit tout simplement des “plans” de votre site
web, qui indiqueront où se trouvent par exemple
votre navigation, vos images, vos boutons, etc.
Commencer par les wireframes simplifieront le
reste du processus.
Faites ces maquettes pour les pages principales
de votre site/application mobile (par exemple
votre page d’accueil, votre page contenu, vos
articles, etc.).

3. Concevez le visuel et l’apparence

Le design à proposer est la vitrine en ligne de votre plateforme. En tant que telle, les choix
graphiques que vous faites (de la police aux couleurs) doivent être faits en fonction de l’identité
que vous allez choisir. Il s’agit de tout un guide de style pour votre choix graphique, il contient
par exemple les éléments suivants :
 Un logo
 Le choix couleurs marquants de votre plateforme (avec les codes hex exacts, si possible)
 Une liste de polices à utiliser
 Toute autre information concernant l’esthétique et le graphique de votre plateforme.
Le design choisi servira de modèle pour vos interfaces graphiques.

4. Créez des modèles pour toutes les pages/interfaces graphiques

Une fois que vous avez déterminé le look de votre page principale et en considérant que vous
avez bien réalisé tous les wireframes pour chaque type de page, la suite sera de réaliser chaque
proposition de page ou interface sous forme de modèle graphique. Deux modèles graphiques
est le minimum à fournir pour ce projet (interface d’accueil et une autre interface
représentant un certain contenu). Les fichiers graphiques des modèles à livrer doivent être au
format Adobe Photoshop (PSD) .
Normalement, ces modèles sont le point de démarrage pour le développement informatique de
votre plateforme cible.
Vous trouverez un exemple de modèles graphiques en jointure.

Livrable : A envoyer individuellement sur ENT ou par mail au : o.aoun@ensem.ac.ma

Un rapport présentant le travail réalisé
Fichier PSD de la charte graphique

Echéance : le Vendredi 18 juin 2021