Université de Monastir

Institut supérieur des Etudes Technologiques de Mahdia ISET

Design Graphique
Cours 2: Création des sites
web

Réalisé par : Chebbi Ikram

Chebbi_ikram@yahoo.fr

2009/2010
AGENDA

1. Intérêts d’un site web

2. Les phases de création d’un site web
3. La conception détaillée
4. Ergonomie d’un site web
5. Conception du système de navigation
AGENDA

5. Agencement de la page
6. Position des informations
7. Choix des couleurs
8. Choix des images
9. Charte Graphique
10. Contenu rédactionnel
Intérêts d’un site web

Notion de site web :

Un site web est un ensemble de fichiers HTML, liés par des liens hypertextes,
stockés sur un serveur web, c'est-à-dire un ordinateur connecté en permanence
à internet, hébergeant les pages web.

Intérêts d’un site web :

 Le besoin de visibilité
 L'amélioration de la notoriété
 La collecte de données
 La vente en ligne
 La mise en place d'un support aux utilisateurs
Catégories des sites web

Catégories des sites web :

Les sites vitrine (appelés également sites plaquette ou site identité) :
des sites dont l'objectif est de mettre en avant l'image de marque de la
société, en présentant par exemple ses produits ou ses services ;
Les sites catalogue: visant à présenter l'offre de l'entreprise ;
Les sites d'information sont des sites fournissant une information
particulière à un type d'internautes ;
Les sites marchands: des sites vendant directement des produits aux
internautes et permettant éventuellement de payer en ligne ;
Catégories des sites web

Les sites institutionnels sont des sites présentant l'organisation et ses

valeurs.
Les sites personnels sont des sites réalisés par des particuliers à titre de loisir,
le plus souvent par passion pour un sujet ou une discipline ;
Les sites communautaires sont des sites réunissant des internautes autour
d'un intérêt commun.
Les sites intranet sont des sites accessibles de l'intérieur d'une entreprise
ou d'une direction, ayant pour objet la mise à disposition et le partage
d'informations professionnelles.
Les phases de création d’un site web

La vie d'un site web possède deux principales facettes, chacune

décomposables en phases spécifiques :
La création:
 correspondant à la concrétisation d'une idée en un site en ligne,
référencé et visité ;
 comprend un grand nombre de phases :
• Conception, représentant la formalisation de l'idée ;
• Réalisation, correspondant au développement du site web ;
• Hébergement, se rapportant à la mise en ligne du site, de manière
permanente.
Les phases de création d’un site web

L'exploitation: correspondant à la gestion quotidienne du site, son

évolution et sa mise à jour.
 englobe notamment les activités suivantes :
• Veille, afin d'assurer un suivi des technologies, du positionnement
du site et de celui des concurrents ;
• Promotion et référencement, permettant de développer son
audience ;
• Maintenance et mise à jour, représentant l'animation quotidienne du
site et le maintien de son bon fonctionnement.
Les phases de création d’un site web

La Conception
une phase essentielle du projet, dans laquelle une réflexion globale est
menée, dans un premier temps, sur les objectifs du site et la cible
potentielle et, dans un second temps, sur la structure, l'ergonomie et la
navigation.
La réalisation
 La réalisation du site concerne la création des pages web et des
éléments graphiques.
 La création des pages web consiste à créer des fichiers HTML. Il existe
deux façons de créer ce type de fichier :
• En éditant les fichiers HTML « à la main »
• En Utilisant un éditeur HTML WYSIWYG (What You See Is What You
Get)
Les phases de création d’un site web

L’hébergement:
Hébergeur: Une société mettant à disposition un serveur web connecté en
permanence à internet.
Deux principales catégories d'hébergeurs :
 les hébergeurs gratuits. Ils prêtent gratuitement un espace disque sur un
serveur pour créer vos pages web. Ce type de service est généralement
totalement gratuit. Ils gagnent de l'argent avec un espace publicitaire
sur votre site
 les hébergeurs professionnels. Ce type d'hébergement garantit un
service de qualité et de sécurité.
Conception détaillée

 La conception d'un site web doit être une démarche participative,

orientée utilisateurs.
 L'objet principal de la phase de conception est d'analyser l'ensemble
des besoins, puis d'imaginer des contextes d'utilisation.
 L'analyse des besoins comporte ainsi deux volets :
• Les besoins de l'organisation, correspondant à une stratégie d'objectifs ;
• Les besoins des utilisateurs, correspondant à une stratégie de cibles.
Conception détaillée

Stratégie d’objectifs:

 Récapituler les objectifs du site web

 Dans le cas d'une société ou d'une organisation: en quoi le site web va
permettre à l'organisation de remplir ses propres objectifs stratégiques.
 Associer des critères opérationnels, quantifiables, qui permettront de mesurer
si l'objectif visé a bien été atteint.

Stratégie de cibles
 Ciblage précis du type d'utilisateurs concerné
 Etablir un profil type et ainsi de focaliser le contenu sur tel ou tel type
d'information.
 Interview des clients de l'entreprise ou des bénéficiaires de l'organisation, ou,
dans le cas d'un site personnel, d'entretiens avec les personnes de l'entourage.
Conception détaillée

Veille concurrentielle:
 Déterminer les principaux concurrents du site web
 Analyser comment ils répondent à leur clientèle et quelles sont
éventuellement leurs lacunes
 Proposer un service qui les comble.
Scénarios
 Se projeter dans la peau de l'utilisateur et d'imaginer les différents cas
d'utilisation possibles du site web.
Cahier des charges
document contractuel synthétique permettant au maître d'ouvrage (client) de
définir ses besoin auprès du maître d'oeuvre (prestataire).
Conception détaillée

Planification
 Répertorier les personnes travaillant sur le projet de site web
 Répartir les tâches selon les compétences
 Etablir un planning pour chacune d'entre elle
 Chiffrer globalement le projet en calculant le temps passé par
chaque personne et en le multipliant par leur coût horaire.
Conception détaillée

 Le site web doit être réfléchi en termes de budget et de temps

 Il doit être pensé sur le long terme, c'est-à-dire que des moyens
doivent être pré visionnés pour créer le site mais aussi pour le
maintenir et l'actualiser.
 Si le site n'est pas mis à jour régulièrement il risque de ternir
l'image de marque de la société plutôt que de la valoriser.

 Les ambitions initiales peuvent être revues et prioritaires afin de

ne choisir que les plus prioritaires en fonction du budget et des

délais.
Ergonomie

Définition

L'ergonomie est l'utilisation de connaissances scientifiques relatives

à l'homme (psychologie, physiologie, médecine) dans le but d'améliorer
son environnement de travail.
Ergonomie

 L'ergonomie se caractérise généralement selon deux composantes :

 L'efficacité: adopter des solutions appropriées d'utilisation d'un
produit,
au-delà
du bon sens du concepteur ;
 L'utilisabilité, marquant l'adéquation aux capacités de l'utilisateur.
Elle se décline en :
• confort d'utilisation, consistant à réduire au maximum la fatigue
physique
et nerveuse.
• sécurité, consistant à choisir des solutions adéquates pour
protéger l'utilisateur ;
Ergonomie

Ergonomie appliquée au domaine du web

 ergonomie d'un site web: capacité à répondre efficacement aux
attentes des utilisateurs et à leur fournir un confort de navigation.
 Principale difficulté :la diversité des profils des visiteurs.
 Les critères déterminants pour un site web :
• attentes de l'utilisateur : tous les visiteurs du site ne recherchent pas
nécessairement la même information ou n'ont pas nécessairement les
mêmes exigences en terme de graphisme.
• habitudes de l'utilisateur : elles correspondent à des comportements
acquis.
• âge de l'utilisateur : il caractérise en général la capacité d'adaptation
de l'utilisateur et sa rapidité de navigation.
Ergonomie

• Equipements : il s'agit d'une des difficultés majeures. En effet,

l'affichage du site pourra varier d'un équipement à l'autre, en
particulier selon le navigateur et la résolution d'affichage.
• Niveau de connaissances : L'ergonomie du site doit être pensée
pour l'utilisateur le moins expérimenté.
Ergonomie

Caractéristiques humaines

 Etudes psychologiques menées sur l'Homme ont montré certaines

aptitudes ainsi qu'un certain nombre de limites.
 Objet de l'ergonomie : tirer profit de ces éléments psychologiques afin
de mettre en oeuvre une interface efficace et confortable à utiliser.

 Être humain, selon le modèle du « processeur humain »:

 perçoit son environnement à l'aide de son système sensoriel (5 sens :
toucher, vue, ouïe, odorat, goût),
 mémorise et planifie des actions à l'aide de son système cognitif
(cerveau)
 et enfin agit grâce à son système moteur et grâce au langage.
Ergonomie

La vue est le sens le plus développé

On considère que la perception visuelle peut représenter près

de 50% de l'activité du cerveau, il s'agit du mode privilégié
pour les interfaces utilisateurs.
Ergonomie

Les théories de psychologie distinguent trois types de mémoires :

 La mémoire sensorielle: permettent de stocker l'information
sensorielle pendant une durée de l'ordre du quart de seconde
 La mémoire à court terme (ou mémoire de travail): capable de
stocker un nombre restreint de mnèmes (en anglais « chunks » soit
« unités d'information », c'est-à-dire des motifs visuels ou sonores
telle qu'un mot, etc.) pendant plusieurs minutes. Un être humain
est capable de traiter simultanément 7 mnèmes
 La mémoire à long terme: stocker un nombre infini d'informations
de manière permanente.
Ergonomie

 Les trois types de mémoire sont fortement liés.

 Un environnement faisant fortement intervenir les sens (musique,
vidéo, endroit agréable) facilite l'apprentissage à court terme.
 L'apprentissage par l'action est très efficace. Les environnements
multimédias permettent par exemple aux enfants de s'approprier très
rapidement l'interface et d'apprendre « sans s'en rendre compte ».
Ergonomie

Critères d'ergonomie pour un site web

1. Sobriété:
 Simplicité: un site web très épuré renforcera la crédibilité de
l'organisation.
 Peu Chargé: Les images animées sont déconseillées. Les animation
doivent être privilégiées pour afficher des messages forts car elles
attirent le regard de l'internaute.
2. Lisibilité:
 Clarté: les informations écrites sont moins faciles à lire sur un écran
que sur papier (25% de temps de lecture supplémentaire).
le texte devra être suffisamment aéré.
 Structuration: Le texte devra être structuré à l'aide de paragraphes et
de titres de différents niveaux, afin d'en faciliter la lecture
 Organisation: éléments d'informations hiérarchisé par niveau
d'importance. Les éléments les plus importants doivent figurer en
haut de page.
Ergonomie

3. Utilisabilité
 Facilité de navigation: La « règle des 3 clics », globalement suivie, A
tout moment le visiteur doit pouvoir être en mesure de se repérer
dans le site.
 Repérage:
• le logo :présent sur toutes les pages, au même emplacement
• une charte graphique uniforme doit être appliquée à l'ensemble des
pages
• Un plan du site : un excellent moyen de permettre au visiteur de
savoir où il est.
Ergonomie

 Liberté de navigation: laisser la possibilité à l'utilisateur de revenir à la page

d'accueil et aux principales rubriques par un simple clic
 Visibilité de l'adresse: L'URL de la page en cours doit être constamment
visible et suffisamment explicite pour permettre à l'utilisateur de se repérer
afin de pouvoir revenir facilement.
 Tangibilité de l'information:
• Les informations présentes sur le site doivent être qualifiées: des éléments
permettant d'en connaître la date de mise à jour
• il est néfaste pour un site de proposer une façade accrocheuse aboutissant sur
des sections en travaux.
Ergonomie

 Homogénéité de la structure: Les éléments de navigation doivent être

situés au même endroit sur toutes les pages, si possible avec une
présentation uniforme d'une page à une autre.
4. Rapidité:

 Temps de chargement: temps d'affichage d'une page le plus petit possible .

• Ce facteur dépend notamment de la connexion du visiteur, de la taille de la
page et de ses images, ainsi que des capacités du serveur web.
 Images optimisées: optimiser au maximum la taille des images, en
choisissant un format adapté et un nombre de couleurs le plus petit
possible.
 Images non redimenssionnées: Pour la même raison, les images doivent
préférentiellement être dans leur taille réelle, sans redimensionnement.
Ergonomie

5. Interactivité:
 Liens hypertextes: L'interactivité caractérise les interactions possibles entre
l'utilisateur et le site web.
• Utilisation des liens hypertextes
 Découpage de l'information:
• Permettre au visiteur de mieux assimiler l'information
 Facilitation des échanges: le visiteur doit pouvoir trouver facilement le
moyen de contacter une personne, par courrier électronique ou grâce à un
formulaire de contact.
Ergonomie

6. Adaptabilité: L'adaptabilité caractérise la possibilité de personnalisation du

site web sur intervention de l'utilisateur.
 Redimensionnement des polices: Les textes du site doivent
préférentiellement utiliser des polices dont la taille n'est pas exprimée en
valeur absolue, afin de laisser la possibilité de les redimensionner aux
personnes le souhaitant.

7. Adaptativité : L'adaptativité caractérise la possibilité de personnalisation

du site web
Ergonomie

8. Accessibilité

 Universalité de l'accès: L'accessibilité est la capacité du site web à être

consulté universellement.
 Interopérabilité: Le respect des standards, en particulier les
recommandation d’accessibilité de W3C permet de garantir un bon
niveau d'interopérabilité, c'est-à-dire la capacité du site web à être
consultable par différents clients logiciels.
 Transparence des formats:
• Les formats utilisés doivent préférentiellement être transparents
(consultable en mode texte: HTML mieux que Flash).
• Les images ou animation ne doivent pas se soustraire aux informations
textuelles ou provoquer une gêne pour les non-voyants.
• Les illustrations graphiques doivent uniquement être utilisées en tant
que complément visuel au texte.
Ergonomie

 Légende: Une légende ou un texte de remplacement doivent être prévu en

lieu et place des images afin de permettre la compréhension de sens de
l'image.
 Choix des couleurs: Les couleurs doivent être choisies afin de laisser
l'information lisible aux personnes ne distinguant pas les couleurs
correctement (daltoniens).
 Usage sain des feuilles de style: L'information doit pouvoir être accessible, y
compris sans feuille de style.
Ergonomie

 Contraste adapté: Le niveau de contraste entre la couleur d'arrière-plan

et le texte en avant plan doit être suffisant pour en permettre la lecture
aux malvoyants.
 Taille des polices modifiable: La taille des polices doit être adaptable
afin de laisser la possibilité de grossir les textes si nécessaire.
Les polices utilisées ne doivent également pas être trop petites, au
risque de fatiguer la vue des lecteurs ou d'être illisibles.
Conception du système de navigation

 La structure d'un site web doit être le reflet d'une stratégie.

 Des scénarios de navigation doivent être élaborés afin de pousser
l'utilisateur à suivre un chemin dans le site web.
Mais il ne faut pas emprisonner le visiteur et le laisser libre de s'en aller
ou de changer de rubrique à tout moment.
Conception du système de navigation

Parcours visuel

La zone centrale supérieure représente ainsi un endroit particulièrement stratégique

pour placer des informations.
Conception du système de navigation

Structuration du site web

 bâtir l'architecture globale du site web en organisant les différentes informations.

 constituer des rubriques, on parle alors de rubriquage.
 découpage en sous-rubriques.
 la structuration du site peut se représenter sous la forme d'une arborescence dont
la racine est la page d'accueil :
Conception du système de navigation

Les classiques:

 Logo du site web en haut à gauche. Un clic sur ce logo conduit

directement à la page d'accueil du site ;
 Lien vers la page d'accueil présent sur chaque page du site ;
 Eléments de navigation présents sur chaque page afin de permettre à
l'utilisateur de se situer dans le site et de revenir facilement à la rubrique
principale.
Conception du système de navigation

Eléments de navigation
 outils permettant au visiteur de savoir où il se situe dans le
site, de revenir d'où il vient et de se déplacer dans les
rubriques.
 plusieurs moyens:
Le fil d'ariane;
La navigation par onglets ;
La carte du site.
Agencement de la page

 Aboutit généralement à la création de modèles de pages (en

anglais templates), servant de gabarits pour la création du site
web.
 Les templates sont des images, créées sous forme de calques, ou
bien des pages web représentant le squelette graphique d'une
page type.
 La structure traditionnelle d'une page web est la suivante :
 un logo situé en haut à gauche. La plupart du temps le logo est
cliquable et mène à la page d'accueil ;
 une zone de navigation (menu), située à gauche et/ou à droite ;
Agencement de la page

 Un en-tête contenant le nom du site, un bandeau de navigation

et une zone prévue pour une bannière (publicitaire ou non) ;
 Un corps de page, contenant l'essentiel de l'information ;
 Un pied de page regroupant des informations utiles telles que la
date de mise à jour, un lien vers un formulaire de contact, un
plan d'accès, etc.
Dimension des pages

 La taille de la page web dépend essentiellement de la définition

d'affichage des internautes:
 En terme de largeur, l'idéal est d'opter pour une valeur inférieure à la
définition horizontale de la majorité des visiteurs, afin de ne pas les
contraindre à faire défiler l'écran avec l'ascenseur horizontal.
Survoler facilement l'information pour repérer les éléments intéressant

 Concernant la longueur, il est souhaitable de ne pas dépasser trois à

cinq hauteurs d'écran.
les pages trop longues risquent de ne pas être lues en entier et sont plus
longues à charger.
Dimension des pages

 Plusieurs stratégies Pour garantir un affichage optimal pour la

majeure partie des visiteurs  :
 Choisir la plus petite largeur supportée par le plus grand
nombre (entre 600 et 800 pixels de largeur par exemple) ;
 Choisir une page comportant des tableaux invisibles de largeurs
variables (définies en pourcentages) ;
 Détecter la résolution des visiteurs à l'aide d'un script, et
rediriger le visiteur vers une page de la bonne largeur.
Position des informations

Le sens de lecture des informations: en diagonale du coin supérieur

gauche au coin inférieur droit

l'information située en haut de page aura plus de chances d'être lue par
les internautes.
Choix des couleurs

 Il est conseillé de ne pas utiliser plus de trois couleurs différentes dans

un site web afin de respecter le critère de sobriété.
 Le choix des couleurs devra correspondre, le cas échéant, aux couleurs
de l'organisation (notamment aux couleurs du logo) et exprimer une
ambiance particulière.
 Etablir une couleur prédominante, représentant la majeure partie de la
page web, et une ou plusieurs couleurs secondaires plus dynamiques
(plus vives), en moindres proportions , afin de mettre des éléments en
exergue.
Choix des couleurs

 Les couleurs influent sur le comportement des individus :

 physiquement : appétit, sommeil,…
 émotionnellement : sentiment de peur, de sécurité, de joie,...
 psychologiquement : dynamisme, concentration,...

Tableau résumant la signification des couleurs

Choix des couleurs

 Le cercle chromatique est un bon outil permettant d'appréhender les

interactions entre les couleurs.
 Une représentation circulaire des couleurs, sur laquelle figurent les
couleurs suivantes :
 Les couleurs primaires (rouge, jaune, vert), couleurs « pures », ne
pouvant être obtenues par mélange d'autres couleurs ;
 Les couleurs secondaires (cyan, magenta, jaune), obtenues par
mélange à parts égales de deux couleurs primaires adjacentes. Les
couleurs secondaires sont diamétralement opposées à leur couleur
complémentaire (soustractive) sur le cercle chromatique ;
Choix des couleurs

 Les couleurs tertiaires, obtenues par mélange d'une couleur

primaire et d'une couleur secondaire.
 Les couleurs sont également catégorises en couleurs « chaudes »
(dont le ton est proche du rouge) et « froides » (dont le ton est
proche du bleu).
Choix des couleurs

 Des couleurs voisines sur le diagramme chromatique créent une

sensation d'équilibre pour l'oeil, en vertu de l'absence de contraste
harmonie d'analogie .

 Deux principales façons pour choisir des couleurs harmonieuses :

 en choisissant des nuances d'une même couleur, soit des couleurs de
même teinte dont les tons sont proches,
 en mêlant des couleurs complémentaires (chaudes et froides), c'est-
à-dire des couleurs éloignées sur le diagramme chromatique. Pour
deux couleurs, il suffit de choisir des couleurs complémentaires,
diamétralement opposées ; pour trois couleurs, les couleurs choisies
doivent former un triangle équilatéral.