Méthodologie de création de site web, étape 3 : design (maquettage)

Je vais donc continuer mon cycle d’articles consacré à la méthodologie de création d’un site internet. Nous avons déjà bien démarrés, avec le story-board en main et prêts à plonger dans la phase la plus alléchante du travail, la conception graphique.
A mon avis c’est une partie de site aussi importante que son contenu ! Il ne faut pas oublier que même si le contenu est riche et innovant, étant conditionné dans un emballage répugnant il risque de rester ignoré des internautes qui vont se sauver aussi tôt qu’ils vont découvrir la première page de site !
D’un autre côté il faut savoir que le design de votre site web est soumis à des contraintes spécifiques propres à Internet : il doit être ergonomique et fonctionnel. A partir de là on commence notre boulot.
Le design d'un site se présente sous forme de maquette fonctionnelle et de spécifications techniques. Prenons l’exemple de mon site web.
Voici sa maquette fonctionnelle (légèrement simplifiée pour ce billet) :

La maquette fonctionnelle

Comme vous voyez, la page peut être divisée en 3 parties :

1. partie supérieure avec l’entête ;
2. partie gauche avec le menu ;
3. partie centrale qui contient elle-même plusieurs blocs.

La largeur des pages
1. Si vous décidez tout comme moi fixer la taille de votre page (ma page ne change pas de largeur en fonction de la taille de fenêtre de navigateur que j’utilise) vous devez commencer par choisir la largeur de votre site.
Comment ?
Moi j’ai raisonné par rapport à deux résolutions d’écran les plus usuelles (800x600 px et 1024x728 px) en me disant que si j’adapte le site pour la deuxième, les gens qui utilisent 800x600 serrons bien importunés de ne pas pouvoir visualiser le site en entier et de devoir servir constamment de leur barre de défilement afin d’accéder au contenu. Tandis que l’adaptation pour 800x600 rendre mon site accessible sans tracas à tout le monde !
2. Vous pouvez aussi bien sûr décider que la largeur de votre site sera dynamique (il s’élargira en même temps que la fenêtre de navigateur dans lequel il est affiché) mais cela pose d’autres contraintes : les images qui habilleront le fond de votre site doivent pouvoir s’agrandir.
Soit elles se répéteront (un même motif) soit elles seront unies (pas de soucis dans ce cas).
3. Il est techniquement possible aussi d’empêcher un fond de bouger (vous obtenez une image fixe au fond de vos pages, et c’est seulement le contenu qui va défiler soit horizontalement, soit verticalement) mais je déconseille cette technique car elle provoque un scintillement désagréable pour la lecture et ne permet pas une structuration visuelle de l’information que vous présentez.
Il ne sera, par exemple, pas immédiat d’identifier un menu, étant donné qu’il ne s’inscrira probablement pas dans un détail de votre fond. Ceci nuira immanquablement à l’ergonomie.
La longueur des pages
Plus judicieux à mon avis est ne pas fixer la longueur des pages : suivant le contenu les pages vont s’allonger sans limites.
Veillez toute fois à contrôler la répétition verticale de l’image de fond dans ce cas précis.
Mon conseil : utilisez une image de fond qui s’inscrit dans une couleur unie.
L’image sera alors affichée une seule fois en haut en dessous des autres éléments, le navigateur remplissant l’espace restant en bas avec la même couleur que la base de votre fond (c’est le cas sur mon site).
La mise en page
Pour une mise en page efficace et assez facilement maintenable je recommande d’utiliser des tableaux (au sens HTML du terme).
J’empiète ici un peu sur un futur billet plus technique, mais c’est parce que ce choix a des répercutions aussi sur le design graphique des pages.
On s’en rend compte sur le schéma que je propose plus haut : les éléments sont disposés les uns contre les autres à la façon d’un puzzle simpliste.
Vous créez donc une image (l’aspect graphique des pages de votre site) mais sans aucun autre élément : pas de libellés, de champs de saisie, ni boutons, ni aucun élément qui ne se retrouve pas toujours sur toutes les pages.
Regardez maintenant la maquette fonctionnelle : pour vous donner une idée j’ai placé les éléments en couleurs. Vous veillerez à les éliminer du rendu final de votre graphique.
Comme ceci : le rendu final (la page remplie), puis la page vidée.

Celle-ci sera ensuite découpée en morceaux rectangulaires correspondants (dans mon exemple, aux cases noires). Ce sont les pièces de votre puzzle.
Toutes vos pages ne présenteront pas le même type d’information, et par conséquent, n’auront pas la même forme de partie centrale.
Je vous recommande donc de créer aussi le design des différents types de parties centrales (avec les mêmes recommandations que précédemment) : vous reprenez les parties supérieures gauches (il y a fort à parier que le look ne change pas d’une page à l’autre) et vous travaillez la partie variable.
Vous obtenez donc un jeu de maquettes !
A ce stade la quasi-totalité des visuels de vos pages doit être formalisée : profitez de ce que vous créez vos maquettes pour faire vos choix de couleurs / polices / taille / style de boutons, etc.
Votre travail n’en sera que plus facile et structuré pour la suite !