Table des matières

Introduction

Cette page va regrouper les méthodes de design employées.

Les sites internet peuvent se décomposer en quelques grands groupes de propriétaires:

Le but d'un site internet est de publier de l'information et de communiquer avec les internautes (visiteurs, amis, prospects ou clients)

Pour avoir une liste complète: http://fr.wikipedia.org/wiki/Liste_des_m%C3%A9tiers

Résolutions d'Ecran

Un site internet doit fournir une bonne expérience au visiteur. Visuellement, on doit s'adapter à de nombreux supports de diffusion:

320×240

640×480 (VGA)

800×600

1024×600

1024×768

1280×720 (HD)

1280×800

1280×1024

1600×1050

1600×1200

1920×1080 (Full HD)

Le standard actuel est 1024×768. Les portables actuels proposent du 1280×800. La HD s'installe petit à petit sur les téléviseurs. Et de manière assez surprenante, les micro-books connaissent un franc succès, avec souvent une résolution en 1024×600.

Le nombre de pages

Le minimum de pages pour un site:

On aura aussi souvent une version en anglais pour chaque page. Ce qui va doubler le nombre de pages!

Le concept du 16x10

La vision humaine préfère le format 16×9, c'est le format des films au cinéma. Et c'est celui du HD et Full HD.

Les écrans d'ordinateur et les industriels ont tendance à préférer le 16×10! (plus pratique et moins cher à construire)

Layout

Le tableau suivant est de dimension 960×600

Cela revient à un carré de 6×6 rectangles en 16×10

Si on se souvient des standards d'écrans présentés auparavant, on obtient une sorte de “carré magique” (qui est plutôt rectangulaire).

Ce format va bien convenir au 1024×768 qui est le standard actuel. En effet, le navigateur internet et la barre de tâche Windows grignotent facilement plus 100 pixels en hauteur.

L'écran 800×600 ne verra pas la dernière colonne, mais la partie visible sera homogène. Souvent, pour les écrans en 1024×768 ou 1280×1024, les utilisateurs affichent une colonne à gauche pour les favoris internet ou autre widget.

# # # # # #
# # # # # #
# # # # # #
# # # # # #
# # # # # #
# # # # # #

Ergonomie

Nous venons de voir que le format 960×600 constitue un bon compromis pour afficher le contenu d'un site internet standard.

Nous allons maintenant avancer sur des notions d'ergonomie pour décider où afficher notre contenu.

Dans la culture occidentale, on lit de gauche à droite et de haut en bas.

Sur internet, comme la majorité des sites sont en anglais, ce sens de lecture est respecté.

(Avec la Chine et le Japon qui deviennent de plus en importants sur internet, il va falloir inverser !)

Le sens de lecture crée une hiérarchie dans les espaces d'affichage de la page.

Pour exemple, il y a un enjeu économique important à figurer dans les premiers résultats de recherche des moteurs comme Google ou Yahoo. Les visiteurs essaient les 3 premiers résultats, rarement plus. Le résultats en 2ème page restent pratiquement inconnus à la plupart des gens.

Pour bien communiquer sur votre site internet, vous devez tenir compte de cette hiérarchie dans les espaces d'affichage.

On remplit avec des couleurs “chaudes” ou “froides” le design en 960×600 pour mieux montrer les zones importantes.

Les sites internet standards respectent cette disposition “naturelle”

# # # # # #
# # # # # #
# # # # # #
# # # # # #
# # # # # #
# # # # # #

Vous trouverez plus d'exemples sur cette page

Design

Nous venons de faire un tour des différentes contraintes d'ergonomie pour que le visiteur puisse profiter d'une bonne expérience sur votre site.

Maintenant, passons à la liberté du design qui fera de votre site un site unique, pour bien le différencier des autres. C'est ce qui fera que le visiteur parlera de vous et pas d'un autre. Et pour encore améliorer l'expérience du visiteur: il doit passer le plus de temps possible sur votre site… et revenir régulièrement!

Pour le moment, le format 960×600 est simplement un carré de 6×6… vide!

Quand le visiteur vient pour la première fois sur votre site, il va suivre le cheminement “standard”: de gauche à droite et de haut en bas.

Le Design va justement ajouter des éléments graphiques et audiovisuels pour créer une identité à votre site et le différencier d'un site “standard”.

Variations

On peut déplacer le “hotspot” (“zone chaude”!) pour focaliser la première attention.

On va parler du mode “Découverte”, “Repère” et “Adhérent” pour séparer les étapes de l'expérience du visiteur.

Exceptions

Pour rendre unique votre site, il faut aussi savoir surprendre et sortir des sentiers battus. Etonner le visiteur vous aidera aussi à le fidéliser! Les internautes sont curieux et ouverts à de nouvelles expériences.

Couleurs

Les écran d'ordinateur utilisent le principe du RGB: Red Green Blue. Chaque pixel de l'écran est composé de 3 parties: une rouge (Red), une vert (Green) et une bleue (Blue) dont la luminosité varie entre 0 et 255 (8 bits). En combinant toutes les possibilités, on arrive à plus de 16 millions de nuances de couleurs différentes (255 x 255 x 255 = 16 581 375).

Pour les nécessités du design, c'est une palette largement suffisante! L'oeil humain moyen aurait du mal à vraiment discerner toutes ces subtilités.

RGB

Avec le RGB, on utilise souvent la notation hexadécimale, c'est le cas pour les pages web, avec le CSS. 

En hexadécimal:
0 = 0
1 = 1
etc...
9 = 9
A = 10
B = 11
C = 12
D = 13
E = 14
F = 15

Quelques couleurs simples en RGB hexadécimal:

HSV et HSL

Le RGB convient très bien aux machines, puisque c'est comme ça qu'elles fonctionnent.

Par contre, pour un humain, c'est loin d'être naturel.

http://en.wikipedia.org/wiki/HSL_color_space

Il est plus naturel d'utiliser la notation en HSV (et il existe aussi HSL, pour le moment peu répandu… il fera parler de lui quand les navigateurs utiliseront tous le CSS3).

HSV veut dire Hue Saturation Value (Teinte Saturation Valeur)

HSL veut dire Hue Saturation Luminosity (Teinte Saturation Luminosité)

On ne détaillera pas ici le HSL car encore peu répandu pour le monde internet.

HSV est utilisé et disponible pour plus d'outils. De plus, pour un être humain, il est plus naturel que le RGB.

On va donc commencer à travailler avec le HSV.

HSV

Les couleurs en HSV peuvent tenir dans un cylindre:

Les couleurs se répartissent autour du disque dans le cylindre. Les couleurs sont représentées par la value Hue qui va de 0 à 360 degrés.

C'est donc très simple pour changer la palette de couleurs! Il suffit de changer la valeur de H.

La Saturation va permetttre de nuancer la couleur avec le blanc. Saturation varie de 0 à 1 (ou plus simplement de 0 à 100%).

La Valeur va permetttre de nuancer la couleur avec le noir. Value varie de 0 à 1 (ou plus simplement de 0 à 100%).

Calques et Lisibilité

Un bon contraste doit être respecté pour que le texte soit lisible. Si le texte est d'une couleur, il faut que la ou les couleurs en dessous de ce texte soit assez contrasté pour qu'il soit acceptable pour le visiteur.

En ne prenant pas -pour le moment- d'éléments graphiques complexes comme les images, on peut limiter la palette des couleurs d'un site à 10 couleurs différentes.

Souvent le noir, le blanc et une nuance de gris feront partie de la palette, il reste donc 7 couleurs à sélectionner. Ces couleurs de base peuvent être nuancées, cela revient à avoir dans sa palette une lumière, une ombre et un neutre.

  1. couleur 0
  2. couleur 1
  3. couleur 2
  4. couleur 3
  5. couleur 4
  6. couleur 5
  7. couleur 6
  8. couleur 7
  9. couleur 8
  10. couleur 9

Elements HTML

Le différents éléments HTML qui peuvent avoir une palette sont assez nombreux.

Pour les couleurs, il y a la couleur du texte, la couleur du cadre et la couleur du fond.

Dans les textes, il y a

  1. le corps de texte,
  2. l'hyperlien,
  3. les titres,
  4. les informations annexes,
  5. les actions possibles des visiteurs.

Dans la structure de la page, il y a

  1. la bannière d'entête,
  2. le contenu principal,
  3. les informations des barres latérales (et en dessus ou en dessous),
  4. les informations en pied de page,
  5. etc…

Photos

Les photos représentent des compositions complexes de couleurs. Pour pouvoir les marier harmonieusement avec des couleurs de fond plus simples, il faut pouvoir accéder à l'histogramme des couleurs de ces photos.

Comme les photos sont maintenant autour des 10Mp, cela représente une charge non négligeable pour calculer l'histogramme des couleurs. Pour rappel, l'histogramme des couleurs consiste à prendre chaque pixel de l'image et puis de comptabiliser les couleurs RGB présentes dans la photo. 10 millions de pixels donne un comptage de 10 millions de couleurs RGB.

Mais nous ne sommes pas intéressés par toutes les couleurs de la photo, simplement les principales couleurs pour pouvoir construire une palette associée.

Pour accélérer le processus, il est plus simple de travailler sur une miniature de l'image.

100×100 = 10.000 pixels cela représente un équivalent assez satisfaisant pour déterminer les couleurs dominantes.

Il est possible de mieux intégrer la photo dans le fond avec un travail sur plusieurs couleurs et une transparence radiale progressive de la photo.