Maquettage du design

Maquettage du design

Je vois d'ici le tableau. Vous vous dites « Chouette, on va créer un site complet », vous ouvrez votre éditeur de texte (Notepad++ par exemple), et vous me regardez en me demandant « Bon, par quelle ligne de code on commence ? ».

Et là, je dois justement vous arrêter. Prenez un crayon et un papier : il faut d'abord réfléchir à ce que vous voulez créer comme site. De quoi va-t-il parler ? Avez-vous un thème, un objectif ?

Je sais, par expérience, que la plupart d'entre vous « cherche juste à apprendre » pour le moment. Vous n'avez donc peut-être pas encore d'idée précise en tête. Dans ce cas, je vous suggère de créer un site pour vous présenter, pour assurer votre présence sur le Web : ce site parlera de vous, il y aura votre CV, vos futures réalisations et pourquoi pas votre blog.

En ce qui me concerne, dans ce TP, je vais réaliser le site web de notre mascotte Zozor, le célèbre âne du Site du Zéro (figure suivante). Zozor a décidé de partir en voyage à travers le monde et sa première étape sera… San Francisco ! Il veut donc créer un site web pour qu'on le connaisse et pour qu'on suive son périple à travers le monde.

L'âne Zozor, la mascote du Site du Zéro

La première étape consiste à maquetter le design, pour avoir un objectif du site web à réaliser. À partir de là, deux possibilités :

• soit vous êtes des graphistes (ou vous en connaissez un) ayant l'habitude d'imaginer des designs, avec des logiciels comme Photoshop ;
• soit vous n'êtes pas très créatifs, vous manquez d'inspiration et, dans ce cas, vous allez chercher votre inspiration sur des sites web comme freehtml5templates.com, qui vous proposent des idées de design et qui peuvent même vous donner le code HTML / CSS tout prêt !

Pour ma part j'ai fait appel à Fan Jiyong, un graphiste, qui m'a proposé le design (qui me plaît beaucoup !) que vous pouvez voir à la figure suivante.

La maquette du site web que nous allons réaliser

Conception de la maquette : Fan Jiyong

Cette maquette est en fait une simple image du résultat qu'on veut obtenir. Je demande au graphiste de me fournir les éléments qui vont m'aider à construire le design, c'est-à-dire les codes couleurs utilisés, les images découpées (figure suivante) ainsi que les polices dont j'aurai besoin.

Télécharger les images et les polices

Quelques-unes des images « découpées » utilisées dans le design

Il ne nous reste plus qu'à réaliser ce site web ! Nous allons procéder en deux temps :

1. Nous allons construire le squelette HTML de la page.
2. Puis nous allons le mettre en forme et le mettre en page avec CSS.

Allez, au boulot !

Créé avec HelpNDoc Personal Edition: Créer des sites web d'aide facilement