Bonjour et bienvenue dans un nouveau chapitre de la formation en webdesign.

Après avoir vu le sommaire de cette formation dans l’introduction la semaine passée (article disponible ICI). Nous allons désormais nous attaquer au dessin.

Tout d’abord, à travers cette formation, je vais vous présenter mon processus créatif pour créer une page à partir d’une idée et arriver à une page finalisée. Cette page sera le design de la page qui permet de s’inscrire dans mon projet principal ‘KMDC, Kelou Mediacenter’. (Je vous reparlerai de ce projet quand je jugerai le moment opportun).

C’est parti:

Le dessin est la base de tout design. Le dessin est la première approche concrète de votre page car c’est à ce moment que vous allez trouver la structure de la page. Par là j’entends que vous allez pouvoir tracer les grandes lignes et définir les axes importants. Aussi, je préfère personnellement dessiner sur papier avec un simple crayon gris et sans distraction (càd pas de téléphone, ordinateur) mais je sais que certains préfères passer par un logiciel de traitement d’image tel que GIMP, Photoshop, … Vous pouvez essayer les deux et trouver ce qui est le plus approprié dans votre cas. D’autre personnes, souvent plus expérimentées, préfèrent utiliser directement un logiciel de modélisation et de prototypage comme Adobe InDesign ou Adobe XD. Ces logiciels demandent déjà un certain apprentissage pour savoir les utiliser et ce n’est pas notre objectif car nous ne souhaitons pas produire de prototype de maquette vectorialisées.

Alors prenons une feuille A4 et commençons. Premièrement, il faut définir la forme que prendra le site : Si vous voulez un site où il n’y a pas de scroll alors pliez la feuille en deux puis dessiner un rectangle avec environ 2 cm de marge tout autour.

Ce rectangle représente ce que verra l’utilisateur, ce sera comme votre une représentation de ce que vous verrez à l’écran une fois le produit fini.

Si vous voulez un site plus ‘long’ alors faites ce même rectangle mais prolonger les barre de droite et gauche. De cette manière vous aurez une représentation de ce que verra l’utilisateur dès son arrivée sur le site, avant qu’il ne fasse une quelconque action, dans le rectangle noir. Cela permettra aussi d’avoir une échelle pour la suite. Les barres de droite et gauche permettent de délimiter la largeur de votre site. Elle sont extensibles autant que vous le souhaitez et vous n’êtes pas obligé de les fermer à la fin du footer.

Maintenant c’est un travail de recherche et d’imagination qu’il va falloir faire, dans cette partie je ne peux pas vraiment vous aider, si ce n’est vous dire de dessiner tout ce qui vous passe par la tête et surtout de ne rien effacer. L’avantage d’être sur du papier est qu’il est simple de recommencer un trait raté ou remplacer une partie par une autre. Si vous utilisez un papier A4 et que vous voulez un site sans scroll bar alors vous pouvez avec une seule feuille faire 4 fenetre différentes. Aussi, si vous n’êtes pas en manque de papier, et n’êtes pas à fond dans l’écologie alors dessinez uniquement au recto des feuilles. Ce sera plus simple de comparer vos différents modèles ensuite.

Lorsque vous dessiner, pensez à le faire uniquement au crayon gris. La couleur sera mise dans le prochain chapitre. Il est important d’avoir une bonne structure avant de la révéler par la couleur. Un design peut être très ‘moche’ avec des couleurs mal choisies mais beaucoup mieux avec des couleurs réfléchies et judicieusement sélectionnées.

Pour la page que je souhaite construire, je suis arrivé à cette structure :

Vous pouvez voir que cela est très minimaliste car je ne veux pas surcharger ce dernier. Les couleurs, la police de texte, etc. arriveront dans le prochain chapitre et cela devrait suffisamment charger la page pour lui donner une apparence agréable. Comme il est marqué, ce n’est qu’un prototype final résultant de 6 ébauches plus ou moins concluantes auparavant mais ayant toutes été utiles à la conception du modèle final.

Ce chapitre est terminé, vous avez désormais la structure de votre page. Ce processus est souvent le plus long car contrairement au futures étapes, il est difficile d’améliorer significativement et rapidement son imagination.

J’espère que ce chapitre vous aura plu, dimanche nous parlerons du choix des couleurs, de l’harmonisation de ces dernières, du choix des polices.

Si vous pensez que cet article peut intéresser d’autres personnes, n’hésitez pas à le partager sur les réseaux sociaux et à m’envoyer vos retour grâce à l’espace ‘contact’ présent en haut du site. Cela me motive à continuer et me pousse à m’encourager.