Réaliser un design complet peut s’avérer plus ou moins complexe selon le degré d’expertise de chacun. Toutefois, utiliser une méthodologie adaptée peut s’avérer une bonne chose pour réaliser un design « propre », dans les meilleures conditions et dans un minimum de temps. Voilà la méthodologie que j’ai appliquée pour mon prochain design (en ligne bientôt) :

La recherche. La recherche est une phase importante qu’il ne faut pas négliger. Nous avons en général une idée globale, floue de ce à quoi on veut aboutir. La phase de recherche permet de trouver des sources d’inspiration supplémentaires et d’affiner l’idée de départ.

Je commence par  surfer dans les bases d’images libres de droit et j’enregistre tout ce qui me paraît utilisable. Je relève les associations de couleurs intéressantes et je note les codes couleurs. Je regarde comment sont réalisées les mises en pages originales (j’affiche les images, ce qui me permet de distinguer l’architecture  CSS du graphisme. Je recherche aussi les polices qui me plaisent et qui peuvent convenir (écritures minuscules, majuscules, avec ou sans accent). A ce stade, je ne rejette aucune idée, je ne fais aucun tri.

La conception. Dans un premier temps, laissez de côté vote ordinateur et revenez au papier et au crayon.

Le but de cette phase est de partir d’éléments grossiers pour arriver à une maquette.

Je réalise dans un premier temps une esquisse de la mise en page, en déterminant surtout la taille et l’alignement des éléments les uns par rapport aux autres. Petit à petit, j’affine en faisant un tri dans les images et en envisageant les couleurs de chaque partie. Quand chaque élément commence à prendre sa place, je réalise une maquette sous un logiciel de dessin. Les images sont grossières mais je peux visualiser le futur résultat sans passer des heures à modifier le CSS.

A ce stade là, il est important de faire un schéma reprenant les dimensions et la position en pixels de chaque élément, les codes couleurs associés, l’emplacement des images. Ce sera la feuille de route pour la suite.

La réalisation. Vous disposez d’une maquette de votre design, de vos codes couleurs et du positionnement des différents éléments. Il ne reste plus qu’à réaliser. C’est là que les étapes précédentes prennent leur sens.

Je réalise en deux phases parallèles (en fonction de l’humeur) : les images et le CSS.

Le CSS : je copie mon fichier CSS dans un fichier type Word. Je commencer par faire apparaître toutes les bordures (border : 1px solid #000000 😉 là où c’est possible. Je peux ainsi positionner chaque élément précisément  suivant ma maquette. Je modifie ensuite les couleurs. J’utilise la fonction « remplacer » de mon éditeur de texte pour remplacer les couleurs par défaut par les couleurs relevées précédemment de façon rapide. Les quelques ajustements restant se font facilement. Vous verrez combien il est utile d’avoir à portée de main les codes couleurs. Ensuite, je réalise mes images, aux dimensions adéquates. Je les nomme explicitement pour pouvoir mettre les adresses url facilement dans le fichier CSS. Enfin, je supprime toutes les bordures inutiles.

Voilà c’est terminé, j’importe mes images et en dernier lieu le fichier CSS. Le changement est transparent pour le visiteur. Fonctionner de la sorte peut paraître plus long. En fait c’est un énorme gain de temps. Cela évite de tâtonner, d’avoir une cohérence globale : cela facilite grandement les mises à jour et les modifications. Par ailleurs cela évite d’imposer des modifications visuelles fréquentes aux visiteurs, parfois même de rendre la page indisponible.