Réalisez une page simple avec
du texte et deux images prises au hasard
sur le web. Ajoutez un fond qui vous semble
joli.
Ici, la page réalisée avait
un fond gris et des images dans les teintes
de orange.
voir
la page |
|
| |
Voyez
les défauts de cette première
page toute simple : les images
n'ont pas la même taille (dans ce
cas-ci, verticalement, de façon
à reprendre l'alignement). Les
textes ne sont pas alignés non
plus.
Lorsque vous utilisez les tableaux, n'utilisez
les bordures que pour des cas précis.
Elles sont souvent peu esthétiques.
De plus, la lecture de cette page était
plutôt difficile, malgré
que le fond choisi était peu texturé.
Évitons donc les textures. Optons
pour une couleur unies. |
| |
Ici,
le fond est jaune, assez pâle, pour
permettre une bonne lecture. Nous avons
alignés les textes (grâce
aux tableaux) et fait en sorte que la
largeur des deux images soit identique.
Il ne faut pas se leurrer,
une écriture sur une couleur unie
est plus lisible que sur fond texturé,
mais n'oubliez pas que ce ne sera jamais
aussi lisible que noir sur blanc !
Nous avons déplacé
le titre vers la gauche de façon
à l'aligner avec le texte.
voir
la page |
|
| |
Cette
page contient encore plusieurs défauts.
Les textes ne sont pas encore alignés
correctement (voir la partie de droite
de l'image cette fois) et tout ceci manque
un peu de couleurs et d'esthétisme.
De plus, les textes utilisants
la majorité de l'écran sont
d'autant plus difficiles à lire
qu'il nous semble long et qu'il force
le lecteur à bouger la tête
en plus des yeux. Il vaut donc orienter le regard dans une partie
de l'écran. |
| |
Ici,
nous avons délimité le retard
dans la partie centrale de la page. Ceci
est un tableau centré dont le pourcentage
équivaut à 80 % de la page.
Nous avons ajouté
une couleur spécifique pour délimiter
les titres et les sous-titres de la pages.
Nous avons ajouté
les textes principaux dans une cellule
de tableau dont le fond est blanc afin
d'alléger la lecture.
voir
la page |
|
| |
| Les couleurs sont plus ou
moins efficaces. Ici, les images ont une
couleur chaude, orangée. Nous allons
donc miser sur cela pour poursuivre l'évolution
de la page. Néanmoins, les éléments
principaux sont présents : les rubriques
principales ont un sous-titres, ceux-ci
sont proches de leur texte, les alignements
sont identiques (titres centrés,
textes alignés à gauche),
etc. |
| |
Ici, les
couleurs sont plus vives, plus proches
des images afin de retrouver les teintes
et d'uniformiser le tout. Un contraste
de fond très accru force le lecteur
à regarder dans la partie lumineuse
(blanche) de la page, là où
le texte se trouve.
Le titre initial est plus gros que les
sous-titres. Les textes sont allégés
(seuls les éléments importants
sont présents, quitte à
faire une rubrique plus importante dans
une autre page), les mots-clefs du textes
sont mis en évidence (gras) de
façon à permettre au lecteur
de parcourir le document plus rapidement.
voir
la page |
|
| |
| |
| Ces éléments
ne sont pas exhaustifs, mais permettent
de voir comment une page peut être
transformées en appliquant quelques
règles simples. N'oubliez pas que
les visiteurs n'offrent pas beaucoup de
leur temps pour trouver l'information qu'ils
cherchent. Plus votre page est efficace
et esthétique, plus vos visiteurs
la consulteront et l'apprécieront... |
