1

CONCEVOIR SA MAQUETTE WEB

Concevoir un site web, c'est d'abord en définir le contenu, puis l'architecture de celui-
ci. L’établissement d’un projet web, c'est avant toute chose, un fichier texte.
Travaillez donc avec votre éditeur de texte favori, avant de vous lancer dans le
HTML.
Il convient de se poser d’abord quelques questions avant de passer à l'action. Un
site web, pour quoi faire ? Voulez-vous un site vitrine (pure " carte de visite ", de
présentation) ou un site d'information (plus dynamique, plus agitateur) ? Pour
satisfaire quel(s) public(s) ? Comment le web peut-il améliorer votre
communication ? A quelles questions des lecteurs votre site devra-t-il répondre ?
Quel message voulez-vous leur faire passer ? Quel type de contacts aurez-vous
avec lui ? (e-mail, liste d'annonces, forum de discussion, formulaires...). Comment
évoluera votre site ?

Notion d'ergonomie
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. L'ergonomie se caractérise généralement selon deux composantes :
L'efficacité, consistant à 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 ;

Appliquée au domaine du web, l'ergonomie d'un site web peut être définie par sa
capacité à répondre efficacement aux attentes des utilisateurs et à leur fournir un
confort de navigation.

La principale difficulté que tente de lever l'ergonomie est la diversité des profils des
visiteurs. Les critères suivants sont généralement 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.
● équipements : 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 : tous les visiteurs du site ne sont pas
nécessairement des as de l'informatique. L'ergonomie du site doit être
pensée pour l'utilisateur le moins expérimenté.
2

Critères d'ergonomie
Les principaux critères d'ergonomie d'un site web sont les suivants (liste non
exhaustive) :

Critère Sous-critère Description

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
animations doivent être privilégiées pour afficher
des messages forts car elles attirent le regard de
l'internaute.
Lisibilité Clarté Il convient de prendre en compte le fait que les
informations écrites sont moins faciles à lire sur
un écran que sur papier (25% de temps de lecture
supplémentaire). Ainsi, 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 Les éléments d'informations doivent être

hiérarchisé par niveau d'importance. Les
éléments les plus importants doivent figurer en
haut de page.
Utilisabilité Facilité de La « règle des 3 clics », globalement suivie,
navigation stipule que toute information doît être accessible
en moins de 3 clics
Repérage A tout moment le visiteur doit pouvoir être en
mesure de se repérer dans le site. Qui plus est, le
logo doit être présent sur toutes les pages, au
même emplacement, et une charte graphique
uniforme doit être appliquée à l'ensemble des
pages afin de permettre à l'usager de savoir qu'il
est toujours sur le même site. Un plan du site peut
constituer un excellent moyen de permettre au
visiteur de savoir où il est.

Liberté de Le site doit laisser la possibilité à l'utilisateur de

navigation revenir à la page d'accueil et aux principales
rubriques par un simple clic, quelle que soit la
page sur laquelle il se trouve (grâce à une barre
de navigation par exemple). Dans la mesure du
possible, l'utilisateur devra pouvoir naviguer dans
le contenu selon des chemins transversaux. Les
pages d'introduction ou pages interstitielles
(splash screen) sont à éviter car elles énerveront
la plupart des visiteurs.
3

Visibilité de L'URL de la page en cours doit être constamment

l'adresse visible et suffisamment explicite pour permettre à
l'utilisateur de se repérer afin de pouvoir revenir
facilement.

Tangibilité de Les informations présentes sur le site doivent être

l'information qualifiées, c'est-à-dire que des éléments
permettant d'en connaître la date de mise à jour
où l'auteur doivent être présents. D'autre part, il
est néfaste pour un site de proposer une façade
accrocheuse aboutissant sur des sections en
travaux.

Homogénéité de Les éléments de navigation doivent être situés au

la structure même endroit sur toutes les pages, si possible
avec une présentation uniforme d'une page à une
autre.
Rapidité Temps de Le temps d'affichage d'une page doit être le plus
chargement petit possible car la majorité des internautes ne
patientent pas plus de 15 secondes lors du
chargement d'une page. 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 Il convient d'optimiser au maximum la taille des
optimisées images, en choisissant un format adapté et un
nombre de couleurs le plus petit possible. Il est
recommandé de ne pas dépasser 30 à 40 ko
maximum par image, sauf action volontaire de
votre part (par exemple dans le cas d'une image
téléchargeable en haute résolution).

Images non Pour la même raison, les images doivent

redimensionnée préférentiellement être dans leur taille réelle, sans
s redimensionnement.
Interactivité Liens L'interactivité caractérise les interactions
hypertextes possibles entre l'utilisateur et le site web. Les
liens hypertextes offrent de vastes possibilités
dans ce domaine et permettent d'offrir au visiteur
des parcours multiples, au gré de ses envies. Il
est conseillé de mettre suffisamment de liens
entre les différentes pages. A l'inverse, trop de
liens peuvent rendre difficile la lecture.
Découpage de Afin de permettre au visiteur de mieux assimiler
l'information l'information et, dans certains cas de susciter sa
curiosité, il est préconisé de découper
l'information. Le découpage de l'information peut
notamment se traduire par un texte d'accroche et
un lien hypertexte conduisant à la suite de
l'article.
4

Facilitation des Il est souhaitable de tout mettre en place pour

échanges faciliter l'échange avec les visiteurs, notamment
afin de recueillir leurs impressions et leurs
demandes, en vue de faire évoluer le site. A
minima, le visiteur doit pouvoir trouver facilement
le moyen de contacter une personne, par courrier
électronique ou grâce à un formulaire de contact.
Adaptabilité L'adaptabilité caractérise la possibilité de
personnalisation du site web sur intervention de
l'utilisateur.
Redimensionne Les textes du site doivent préférentiellement
ment des polices 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.
Adaptativité L'adaptativité caractérise la possibilité de
personnalisation du site web à personnaliser
automatiquement le site web sans intervention de
l'usager.
Accessibilité Universalité de L'accessibilité est la capacité du site web à être
l'accès consulté universellement, c'est-à-dire par tout
type d'utilisateurs, y compris les malvoyants et
non voyants. Il existe un certain nombre de règles
d'accessibilité simples, à respecter afin de
permettre l'accès au site web au plus grand
nombre, quelle que soit leur configuration
logicielle et matérielle ou leur handicap.
Interopérabilité Le respect des standards, en particulier les
recommandations d'accessibilité du 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 Les formats utilisés doivent préférentiellement

des formats être transparents, c'est-à-dire consultable en
mode texte. Ainsi le HTML sera utilisé
préférentiellement au Flash. Par ailleurs, 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 donc uniquement être
utilisées en tant que complément visuel au texte.

Légende Une légende ou un texte de remplacement

doivent être prévu en lieu et place des images
(grâce à l'attribut alt), afin de permettre aux
déficients visuels de comprendre le sens de
l'image.

Choix des Les couleurs doivent être choisies afin de laisser

5

couleurs l'information lisible aux personnes ne distinguant

pas les couleurs correctement (daltoniens).

Usage sain des L'information doit pouvoir être accessible, y

feuilles de style compris sans feuille de style.

Contraste Le niveau de contraste entre la couleur d'arrière-

adapté plan et le texte en avant plan doit être suffisant
pour en permettre la lecture aux malvoyants.

Taille des La taille des polices doit être adaptable afin de

polices laisser la possibilité de grossir les textes si
modifiable 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.

Néanmoins il ne faut pas emprisonner le visiteur et le laisser libre de s'en aller

ou de changer de rubrique à tout moment.

Parcours visuel
Des études ont montré que l'oeil de l'internaute moyen parcourt généralement
la page web selon un cheminement global en « zigzag » commençant à
l'angle supérieur gauche, jusqu'à l'angle inférieur droit.
6

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

stratégique pour placer des informations.

Structuration du site web

La structuration du site web consiste à bâtir l'architecture globale du site web

en organisant les différentes informations.

Il s'agit dans un premier temps de faire l'inventaire des contenus du site web
et de les regrouper par thématique afin de constituer des rubriques, on parle
alors de rubriquage.

Dès lors que les principales rubriques sont identifiées (on veillera à ne pas
dépasser une dizaine de rubriques principales), il faut alors déterminer leur
organisation et leur découpage en sous-rubriques. La plupart du temps la
structuration du site peut se représenter sous la forme d'une arborescence
dont la racine est la page d'accueil :
7

Les classiques
Certaines caractéristiques se retrouvent généralement d'un site web à l'autre :
● 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.

Eléments de navigation
Les éléments de navigation sont des 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. Il existe plusieurs moyens de mettre en oeuvre des éléments de
navigation :
● Le fil d'ariane ;
● La navigation par onglets ;
● La carte du site.

Fil d'ariane
On appelle fil d'ariane (ou chemin de fer et en anglais breadcrumbs trail), un
outil de navigation constitué d'une suite de liens hiérarchisée. Le fil d'Arian
représente le chemin de navigation et permet à l'usager :
● de se repérer dans le site
● de remonter facilement aux rubriques principales.
8

Un fil d'Ariane se présente sous la forme suivante :

[Accueil] > Webmastering > Navigation

Un fil d'Ariane possède les caractéristiques suivantes :

● Liens séparés par le caractère « > », afin de symboliser la notion de
hiérarchie.
● Dernier lien non cliquable et en gras. Il représente la page sur laquelle
le visiteur se trouve.

Le terme anglais « breadcrumb » (littéralement « miette de pain ») fait

référence au conte de Grimm, « Hansel et Gretel », relatant l'histoire de deux
enfants perdus dans la forêt laissant tomber des morceaux de pain pour
retrouver leur chemin.

Le terme français « fil d'Ariane » se réfère à la mythologie grecque. Ariane,

amoureuse de Thésée, lui confie une pelote de laine lorsqu'il s'engouffre dans
le labyrithe pour tuer le Minotaure. En la déroulant, puis en l'enroulant à
nouveau, Thésée parvient à sortir du labyrinthe.

Navigation par onglets

Les onglets sont des outils de navigation utiles permettant de distinguer des
rubriques dans un site web et de passer facilement de l'une à l'autre. Des
codes couleurs peuvent également être utilisés afin de renforcer la
différenciation entre les rubriques.

Plan du site
Un plan du site (ou carte du site, en anglais site map) permet aux internautes
d'appréhender le site dans sa globalité en un seul coup d'oeil. Un item « vous
êtes ici » peut de plus permettre à l'internaute de se situer dans le site.

Flêches de navigation
La présence de flêches de navigation (suivant, précédent, retour au chapitre,
retour à la page d'accueil) permet de fournir une navigation intuitive à
l'utilisateur.
9

L’aspect graphique

Introduction au webdesign
Le terme « webdesign » désigne la discipline consistant à structurer les éléments
graphiques d'un site web afin de traduire, à travers une dimension esthétique,
l'identité visuelle de la société ou de l'organisation. Il s'agit ainsi d'une étape de
conception visuelle, par opposition à la conception fonctionnelle (ergonomie,
navigation).

L'objet du webdesign est de valoriser l'image de l'entreprise ou de l'organisation par

le biais d'éléments graphiques afin de renforcer son identité visuelle et de procurer
un sentiment de confiance à l'utilisateur. Néanmoins, en vertu des critères
d'ergonomie, un site web doit avant tout répondre aux attentes des utilisateurs et lui
permettre de trouver facilement l'information qu'il cherche.

Le webdesign est ainsi un compromis entre une présentation possédant un

graphisme époustouflant, permettant de donner une crédibilité et une image de
marque à l'entreprise et une navigation sobre (voire dépouillée) permettant à
l'utilisateur de trouver facilement ce qu'il cherche.

Par extension le terme webdesigner désigne le métier consistant à concevoir le

design d'un site web.

La nécessaire inspiration
Le design d'une page web est avant tout un acte artistique mettant en oeuvre
l'inventivité et la création. Le but de ce guide est de donner quelques éléments clés
permettant d'obtenir un design efficace, néanmoins une bonne source d'inspiration
peut consister à visiter des sites de référence, notamment des sites professionnels. Il
est notamment intéressant d'étudier comment chacun d'entre-eux dispose
l'information, comment les menus et les blocs d'information sont mis en avant et
d'une manière générale de déterminer ce qui fait qu'un site paraît pro.

Agencement de la page
Elle 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 ;
10

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

Il est essentiel de distinguer dans le template ce qui relève d'éléments invariables,

identiques sur toutes les pages, ou bien variables d'une page à l'autre.

On trouve une tendance générale à construire les pages de la façon suivante:

11

On trouvera de légères variantes avec le menu à droite ou en haut, ou encore deux

colonnes plutôt qu'une, mais la tendance générale est établie sur ce schéma.
Cette standardisation s'explique par le fait qu'il est plus facile pour l'internaute d'y
retrouver l'information.

Bien entendu, il n'est pas obligatoire de respecter ce type de mise en page et il

appartient à chacun de présenter le contenu de ses pages comme il le souhaite.
Certains secteurs d'activité ont même tout intérêt à jouer la carte de l'originalité.

Charte graphique
On appelle « charte graphique » (en anglais graphic charter) le document
synthétique récapitulant les règles de présentation des éléments graphiques d'un site
web, traduisant son identité visuelle.

La charte graphique définit l'habillement graphique de la page, notamment les tailles,

couleurs et apparences des textes, images et boutons du site ainsi que le
positionnement relatif des objets dans la page.

Maquette
Une maquette est un site web factice et sommaire (prototype) présentant le
graphisme du site et sa navigation. La maquette permet de formaliser la conception
du site et constitue généralement l'étape de validation de cette phase, pour passer à
la phase de réalisation.

La maquette représente les pages principales du site (sans contenu) à l'aide de

pages statiques et permet de simuler la navigation. Ainsi, les éléments dynamiques
tels que le moteur de recherche pourront par exemple conduire à une page
présentant des résultats factices.

Dimension des pages

La taille de la page web dépend essentiellement de la définition d'affichage (le terme
résolution est utilisée à tort) 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'ascenceur horizontal. Une page courte permet en effet au visiteur de
survoler facilement l'information pour repérer les éléments qui l'intéressent.

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

d'écran. En effet, les pages trop longues risquent de ne pas être lues en entier et
sont plus longues à charger.

Pour garantir un affichage optimal pour la majeure partie des visiteurs il existe
plusieurs stratégies :
● Choisir la plus petite largeur supportée par le plus grand nombre (entre
600 et 800 pixels de largeur par exemple) ;
12

● 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 (en javascript par
exemple), et rediriger le visiteur vers une page de la bonne largeur.
Cette méthode nécessite que les visiteurs aient un navigateur avec le
Javascript activé et demande de créer autant de pages que de largeurs
souhaitées .

Largeur fixe ou extensible ?

Après cette première réflexion pour déterminer la tendance de votre mise en page,
vous devrez vous poser la question de savoir si vous donnez à votre site une largeur
fixe ou extensible.

En effet, il y a ici un phénomène important à gérer lors de la conception d'un site, il

s'agit de la résolution d'écran.

En consultant les propriétés d'affichage de votre ordinateur (Clic droit sur le bureau +
propriétés), l'onglet Paramètres vous indique la résolution de votre écran comme le
montre l'image ci-dessous:

Ici, l'écran est réglé avec une résolution de 1440 x 900 pixels. Cela signifie que
l'écran affiche une fenêtre de 1440 pixels horizontalement et 900 verticalement. Il est
bien entendu possible de choisir la résolution qui correspond le mieux à ses
préférences mais c'est là qu'intervient le problème lors de la mise en page d'un site
web car on ne connaît pas la résolution que chaque internaute a choisi. Il est donc
nécessaire de construire des pages qui s'adaptent aussi bien à une résolution de
1024 x 768 qu'une autre de 1280 x 1024.

La tendance générale consiste alors à choisir entre un site de largeur fixe (exemple
960 pixels) centré horizontalement et un site à largeur variable s'adaptant à la largeur
de la fenêtre.
13

Exemple de largeur fixe:

La largeur du site reste la même quelque soit la résolution de l'écran mais les
bandes latérales sont plus ou moins larges.

Exemple de largeur extensible:

Le site s'adapte à la largeur de la fenêtre en variant la largeur de la colonne

centrale de texte.

Position des informations

Lors de la création des pages, la position des information a son importance. Etant
donné 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.
14

Quel que soit le choix des couleurs, il est recommandé d'établir 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.

Les couleurs possèdent une symbolique implicite. Il est donc important de les choisir
en connaissance de cause. En effet, les couleurs influent sur le comportement des
individus :
● physiquement : appétit, sommeil, température du corps, etc.
● émotionnellement : sentiment de peur, de sécurité, de joie, etc.
● psychologiquement : dynamisme, concentration, etc.

Le tableau ci-dessous récapitule la signification classiquement associée aux couleurs

:
Couleur Symbolique méliorative Symbolique Domaine
péjorative
Bleu Calme, confiance, autorisation, Froid, sommeil Voile, nouvelles
apaisement, sérénité, protection, technologies,
sérieux, mystique, bonté, eau, informatique,
espace, paix médecine
Violet Délicatesse, passion, discrétion, Mélancolie, Culture,
modestie, religion. tristesse, deuil, politique
insatisfaction
Rose Charme, intimité, femme, beauté Naïveté Journal
personnel,
femmes
Rouge Chaleur, force, courage, Violence, colère, Luxe, mode,
dynamisme, triomphe, amour, danger, urgence, sport,
enthousiasme. interdit, sang, marketing,
enfer. médias
Orange Tiédeur, confort, gloire, bonheur, Feu, alerte Divertissement,
richesse, honneur, plaisir, fruit, sport, voyage
odeur, tonus, vitalité.
Jaune Lumière, gaieté, soleil, vie, Tromperie, Tourisme
pouvoir, dignité, or, richesse, égoïsme,
immortalité. jalousie, orgueil,
alerte
Vert Nature, vie végétale, secours, Découverte,
équilibre, foi, apaisement, repos, nature, voyage,
confiance, tolérance, espoir, éducation
orgueil, jeunesse, charité.
Brun Calme, philosophie, terroir. Saleté Environnement
15

Blanc Pureté, innocence, neige, propreté, Mode, actualités

fraîcheur, richesse.
Gris Neutralité, respect. Design,
associations,
organisations à
but non lucratif
Noir Sobriété, luxe, nuit. Mort, obscurité, Cinéma, art,
tristesse, photographie et
monotonie. interdit

La composition des couleurs a également une influence sur la perception des

volumes. La composition des couleurs peut permettre de dégager une sensation de
bien être, aussi bien pour la décoration d'une maison, que pour le graphisme d'un
site web.

Le cercle chromatique est un bon outil permettant d'apréhender les interactions entre
les couleurs. Le cercle chromatique est 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 ;
● Les couleurs tertiaires, obtenues par mélange d'une couleur primaire et
d'une couleur secondaire.
16

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

Il existe des règles universelles régissant l'harmonie des couleurs, dûes à des
propriétés physiques de l'oeil. En effet, lorsqu'il contemple une couleur, l'oeil crée
automatiquement, sur son contour, un filtre de la couleur complémentaire. On parle
de « contraste simultané ». Avec ce mécanisme, la perception des couleurs dépend
des couleurs avoisinantes. Ainsi, le jaune paraîtra plus orangé lorsqu'il est associé à
du bleu et le bleu paraîtra plus violet. Un bleu à côté d'un rouge apparaîtra vert, etc.

Par ailleurs, des couleurs voisines sur le diagramme chromatique créent une
sensation d'équilibre pour l'oeil, en vertu de l'absence de contraste, on parle ainsi d'«
harmonie d'analogie ».

Il existe donc globalement deux façons principales de 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, etc.

Enfin, des éléments de couleur chaude paraîtront globalement plus grands que des
éléments de couleur froide.

Choix des images

Les images permettent d'agrémenter un site web et de le rendre plus gai. Néanmoins
l'abus d'image peut gêner le confort visuel, ainsi que le chargement des pages.

Les webmasters débutant aiment à égayer leur site avec des animations amusantes
glanées sur le web. Dans la mesure du possible il est préférable de s'en passer car
elles peuvent énerver le lecteur et car elles donnent un caractère amateur au site.
Lorsque l'on parle d'images sur un site web, on peut tout de suite distinguer deux
catégories: celles crées par le webdesigner, il s'agit de la bannière, le logo, le menu,
les boutons et autres éléments graphiques qui font partie intégrante du design du
site... et celles fournies par le client en vue d'illustrer l'information. Il s'agit bien
souvent de photos présentant un lieu, un objet ou une personne...

La qualité des images

La résolution des écrans n'étant pas supérieure à 72dpi pour la majorité, le web a
ses limites. En effet, la qualité d'une image étant étroitement liée à sa résolution,
celles des écrans nous apportent son lot de contraintes. Néanmoins, en partant
17

d'une bonne photo de départ, il est possible d'optimiser l'image en ayant un seuil de
qualité tout à fait acceptable pour une utilisation sur le web.
La taille des images
La taille des images se définit en pixels. A titre indicatif, l'image ci-dessus a une
largeur de 445px et une hauteur de 334px.
Outre le fait que chacun est libre de choisir la taille des images qu'il souhaite
présenter, il ne faut pas perdre de vue que le poids de l'image dépend en partie de la
taille choisie. Autant dire que plus les images seront lourdes, plus elle consommeront
de bande passante sur votre hébergeur. L'autre élément déterminant concernant la
qualité et le poids des images étant la compression. Plus une image est enregistrée
avec un taux de compression bas, plus légère elle sera mais plus elle perdra en
qualité.
Le format des images
Dans le domaine du web, on utilise principalement le format .jpg qui s'adapte très
bien à la présentation des photos. On utilise généralement un format de compression
supérieur ou égal à 70%. Les formats .png ou .gif sont également utilisés pour gérer
la transparence.

La notion de propriété
Notez qu'à partir du moment où vous diffusez des photos sur le web, aucun système
ne permet de les protéger efficacement contre la copie illégale.
La bannière d'un site web

On entend par bannière la partie supérieure d'une page web.

Il existe de nombreuses possibilités pour présenter un site mais très vite, telle
l'enseigne d'un magasin, la bannière est devenue un standard dans la mise en page
de la majorité des sites web.
18

Comment organiser une bannière?

De manière générale, on retrouve les éléments suivants dans la bannière: Le logo de
la société, une description de l'activité et les éléments graphiques. On peut
également y trouver un slogan, le menu du site ou encore un champ d'inscription ou
de recherche... Les possibilités sont nombreuses.
La bannière étant un élément présent sur chaque page du site, il faut s'assurer
qu'elle ne soit pas trop envahissante et qu'elle ne fatigue pas l'intérêt du visiteur.
D'un point de vue design, la bannière est souvent l'élément qui imprègne la touche
graphique du site. Il est donc important de la soigner pour qu'avec les autres
éléments graphiques du site, elle constitue un tout homogène qui donnera un cachet
visuel à votre image.

Couleur d'arrière-plan
Le choix de la couleur d'arrière-plan (en anglais background) est primordial, car un
arrière-plan mal choisi peut gêner la lisibilité. Un bon contraste entre la couleur
d'avant-plan et la couleur dominante de l'arrière plan est nécessaire. A ce titre, il est
fortement déconseillé d'opter pour un arrière-plan graphique car il peut gêner la
lecture et dégage généralement un sentiment d'amateurisme. L'arrière-plan devra
ainsi généralement être choisi très pâle.

Dans le domaine du web design, les couleurs jouent un très grand rôle sur la façon
dont les visiteurs vont percevoir l'état d'esprit d'un site.

Chaque tendance colorée aura un impact sur le visiteur. Ainsi, certaines couleurs
paraitront plus douces et d'autres plus agressives, certaines plus joyeuses et
d'autres plus tristes etc...

Il est important de mettre en relation le choix des couleurs avec la thématique du

site.
Ainsi, un thème lié à la nature se verra plutôt avec une tendance verte, un thème lié
à l'enfance aura plutôt une tendance de couleurs vives ou pastels.
Le blanc (ou couleurs claires) est intéressant pour la lisibilité.
Le noir (ou couleurs sombres) est intéressant pour présenter des oeuvres artistiques.

Si vous doutez de vos accords de couleurs, privilégiez l'utilisation de camaïeux

d'une même couleur (accord par analogie)

Typographie
Selon que la police a un caractère arrondi ou au contraire très angulaire, selon
qu'elle est fine ou épaisse, espacée ou serrée, tout cela donne une dimension
particulière au design des pages web.

Les trois polices ci-dessous, par exemple, ont chacune des particularités qui leur
sont propres et génèrent par conséquent des sensations bien différentes .
19

Il est fortement contre-indiqué d'utiliser plus de deux polices sur un site web. Les
polices stylisées doivent être utilisées avec parcimonie (pour le titre par exemple) et
l'essentiel de la page web devra être réalisée avec une police classique (Arial,
Verdana, Helvetica, etc.).

Pour une utilisation imprimée traditionnelle, les polices à empattement (serif)

facilitent généralement la lecture car les empattements permettent d'accompagner le
regard du lecteur.

Sur le web, l'utilisation de telles polices est déconseillée car selon la définition de
l'écran du visiteur, les empattements peuvent très vite devenir des pattes de mouche
gênantes pour la lecture. Ainsi, il est souhaitable d'opter pour des polices sans
empattement (sans serif), plus rondes.

Enfin, sachez que les textes utilisant des polices non standard risquent de ne pas
apparaître correctement sur les écrans des internautes. Pour créer des titres avec de
telles polices, il est néanmoins possible de contourner cette limitation en créant des
images transparentes comportant le texte.

Tout comme pour les couleurs, les polices d'écriture ont un impact important sur le
ressenti du visiteur lorsqu'il parcourt une page web.

Le choix de la police d’écriture

Là encore, il n'existe pas de règle absolue et il appartient à l'appréciation de chacun

de décider de la pertinence de telle ou telle typographie. Cependant, on peut
facilement affirmer qu'il est important de respecter des critères de lisibilité. Aussi il
est plus sage d'utiliser des polices traditionnelles pour les textes qui diffusent
l'information et de réserver les polices plus typées pour les titres, les menus ou les
logos.

Où trouver des polices d'écriture?

Il existe de nombreux sites sur le web qui proposent de télécharger des polices
d'écriture (.ttf, .otf ou .fon) également appelées Font.
Voici un petit échantillon:
●Fontcubes.com
●Dafont.com
●Myfonts.com
20

●Fonts.com

Comment installer de nouvelles polices?

Lorsque vous disposez de nouvelles Fonts, il suffit simplement d'en faire une copie
dans le répertoire destiné à cet effet:

Sous Windows: dans C:\WINDOWS\Fonts.

Sous Mac OS: dans /Library/Fonts.

Comment utiliser de nouvelles polices sur les pages web?

Lorsque vous avez installé de nouvelles Fonts, elles sont disponibles dans la plupart
de vos logiciels qui permettent d'écrire du texte. Ainsi, avec un logiciel de traitement
de texte ou de retouche d'image par exemple, il vous sera possible de choisir et
d'utiliser vos nouvelles polices d'écriture.
Malheureusement, il n'en va pas de même avec les pages web puisque tout texte
écrit dans le langage html est lu avec les polices installées sur l'ordinateur qui lit la
page et non pas celui qui l'a créée. Autrement dit, si je construis une page avec
une police de mon choix, vous ne pourrez la voir correctement que si cette
même police est installée sur votre ordinateur. Si non, votre navigateur choisira
une de vos polices par défaut.
Les possibilités sont plutôt restreintes, les polices dites « standards » sont les
suivantes :
● arial
● verdana
● tahoma
● trebuchet
● georgia
Si toutefois , vous souhaitiez vraiment utiliser une police bien particulière dans vos
textes, il existe des parades avec l'utilisation conjointe de Flash ou Javascript, mais
qui ont des faiblesses au point de vue accessibilité ou référencement.
Une bonne formule consiste à choisir une police universelle pour les textes et des
polices plus typées pour les images: logo, bannière, menu etc...

Symboles graphiques
Il est conseillé de faire usage de pictogrammes ou d'icônes afin d'établir une
signalisation visuelle. Attention tout de même au choix des symboles car le sens
perçu par l'utilisateur peut être différent de celui qu'on lui attribue, notamment si le
site web a une vocation internationale. Les pictogrammes suivants sont ainsi
communément utilisé :
● une loupe symbolise habituellement une fonction de recherche ;
● une enveloppe signale la possibilité de contacter le webmaster par
mail ;
● un point d’interrogation caractérise une aide en ligne ;
21

● une maison représente un lien vers la page d'accueil ;

● un drapeau signale la langue de la page en cours ou bien la possibilité
de changer de langue.

Une fois que vous aurez établi votre rubriquage, votre arborescence et votre
contenu, vous pourrez vous pencher sur l’aspect graphique de vos pages et préparer
une maquette.

« Le design d’un site web concerne à la fois son aspect visuel, son ergonomie
(système de navigation) et son architecture (arborescence des menus, liens
hypertextes…) »

On peut identifier trois principaux objectifs du webdesign :

● Navigation intuitive pour les visiteurs.
● Facilité d’administration (mise à jour, modifications…).
● Fidélité par rapport à l’image et à l’identité graphique de l’entreprise

Comme certains ont pu l’apprendre à leurs dépens, le beau ne suffit pas à la réussite
d’un site web. Pour l’internaute, la facilité d’utilisation et la qualité du contenu restent
prédéterminants.

A partir de ce constat, il est possible d’identifier certaines règles en matière de

design Internet :
● Ne pas surcharger les pages en multipliant les effets graphiques et les
animations. L’utilisation de ces éléments doit toujours répondre à un
objectif précis et non pas seulement servir à embellir le site.
● Conserver la cohérence avec la charte graphique dans l’emploi des
couleurs mais aussi des polices. L’utilisation répétée de plus de trois
couleurs sur un site ne facilite pas sa visualisation par l’internaute.
● Une attention particulière peut être apportée à certains éléments
comme le menu principal de navigation ou à des objets graphiques
comme le symbole du panier. Cela permettra une mise en valeur de
ces éléments qui sont récurrents sur le site et traduira un certain
professionnalisme.
● L’élaboration du design d’un site web doit se faire en gardant à l’esprit
que l’aspect graphique ne doit jamais prendre le pas sur la facilité
d’utilisation.

Le contenu

• Préparez vos textes et éventuellement vos documents à télécharger

(PDF ou RTF)
• Préparez vos images, optimisées et de taille réduites, au format gif,
jpeg, ou png.
• Rangez et classez tous ces éléments dans un répertoire de votre
disque dur

Sources morphemzero + commentcamarche.net