Concevoir le design d’un site Web n’est pas mince affaire, surtout quand on veut le rendre à la fois beau (subjectivité bonjour), simple à naviguer, accessible (autant que possible, même s’il y a toujours moyen de faire mieux) et mettre un message en valeur.
Utiliser un logiciel adapté
Finie l’époque de Photoshop avec un design fixe de 1024px de large (voire moins pour les plus anciens d’entre vous) !
Maintenant que le responsive design existe et que les techniques se développent, plusieurs outils spécialisés dans le design d’interfaces Web et/ou mobile font surface.
J’ai ici choisi d’utiliser Adobe XD, que j’ai déjà manipulé plusieurs fois ces dernières années et maitrise donc assez pour être efficace. Mais il existe également (entre autres) Figma et Sketch qui sont très populaires dans la communauté UI/UX !
Libre à vous de choisir l’outil qui vous convient le mieux : celui avec lequel vous arrivez à avancer sans trop de frustrations fera l’affaire.
Le contenu d’abord
L’objectif du site étant d’abord de partager du contenu (mes compétences, les témoignages de mes clients, quelques moyens de contact… et des articles), j’ai commencé par sélectionner ce que je voulais mettre en valeur :
- Un court descriptif pour me présenter et expliquer ma philosophie
- Une liste de mes principales compétences (ou services)
- Des témoignages forts de mes clients et collègues (un grand merci à vous pour votre confiance depuis 2011 !)
- Des noms et logos de quelques clients récents (il paraît que ça fait bien sur le CV)
- Un formulaire de contact simple, avec des méthodes alternatives au cas où
Un peu de rédaction plus tard… et c’est parti pour organiser tout ça !
La mise en page
Place donc au placement de ces informations sur l’écran !
Je suis parti sur un design desktop de 1920 pixels de large, avec une grille centrée de 12 colonnes (Adobe XD propose cette option de base, qui s’affiche via Cmd + 3 sur macOS).
Une fois les principaux éléments placés grossièrement par blocs alignés dans des colonnes, j’ai vérifié que l’ordre fait sens : si je lis la page dans l’ordre, est-ce que je comprends le message principal ?
Enfin un peu de couleurs !
Le moment fatidique est arrivé : il faut rendre la page un peu plus jolie avec des couleurs. Mais le choix des couleurs et moi… c’est pas une grande histoire d’amour.
C’est d’ailleurs un gros facteur dans mon souhait de changer de design : les anciennes couleurs étaient ternes, je n’avais même pas envie d’aller sur mon propre site !
Mais j’ai trouvé une technique qui a l’air de fonctionner, au hasard d’une vidéo YouTube (que je ne retrouve plus) : commencer avec une seule couleur, en laissant le reste blanc ou noir.
J’ai donc choisi un bleu plus clair que l’ancien : ça donne un air plus dynamique, tout en restant une couleur pas trop violente (bien qu’avec du recul ça manque un peu de contraste).
L’application s’est faite petit à petit, pour ne pas surcharger la page : un bandeau par ici, un bouton par là…
Et si je rendais tout le fond d’une partie de la page bleu ⁈ Parfait pour les logos de mes clients : le contraste n’est pas critique et ça crée un ensemble coloré.
Tiens, l’entête est un gros pavé blanc… et si je mettais un peu de bleu aussi ? Mais toute la largeur c’est trop… peut-être la moitié ? C’est mieux, mais un simple rectangle c’est rigide… un triangle pour la transition ?
Et si j’arrondissais un peu tout ça ? L’outil Plume à la rescousse ! Quelques points bien placés, des poignées tirées pour tracer la courbe et le tour est joué !
Il reste toujours des blocs blancs assez grands qui mériteraient d’être différenciés… peut-être avec un fond gris très clair ? Très bien !
Quelques bonus pour faire joli
Pour donner encore plus de vie à la page, quelques illustrations pourraient aussi être utiles !
Je me suis donc servi sur unDraw qui propose un tas d’illustrations vectorielles (au format SVG) et propose surtout de choisir la couleur dominante : parfait pour avoir des dessins prêts à être intégrés à mon design !
Full cycle again
Comme disait le grand poète JCVD :
J’ai eu un full cycle, et maintenant je recommence le cycle.
Maintenant que la page commence à ressembler à quelque chose, on peut ajuster quelques détails en recommençant dans l’ordre (le contenu, la disposition, les couleurs, etc.) jusqu’à avoir un résultat satisfaisant.
La page étant bien remplie par exemple, le formulaire de contact est loin, tout en bas de la page, sans moyen d’accès direct ! Et si j’ajoutais un petit bloc en plein milieu de la page pour inviter à s’y rendre directement ? Tant qu’à faire, je le distingue un peu du reste de la page en lui appliquant la couleur principale en fond, avec une couleur de texte inversée (du blanc).
Puis on recommence pour les autres pages ! L’avantage cette fois est que beaucoup de choix ont déjà été faits, les composants graphiques principaux sont prêts à être réutilisés (en les adaptant si besoin).
Et voilà !
Bilan de l’expérience
Je ne suis toujours pas webdesigner, mais j’ai réussi à produire un design complet. 
C’est une chouette expérience, plein d’enrichissements, qui m’a donné l’occasion à la fois de revenir à mes racines (je voulais devenir webdesigner en début de lycée) tout en apprenant de nouvelles compétences (que je pourrai, j’espère, mettre au services de mes clients un jour) !
Mon dernier conseil sera surtout de ne pas hésiter à demander des conseils, des avis ou de l’aide tout au long de ce processus : il y a probablement quelqu’un de compétent pas loin de vous, ou des inconnus sur Internet (sur des forums ou sur Twitter par exemple) qui prendront quelques minutes de leur temps pour vous aider !
Vous avez des questions ? Des suggestions pour améliorer ce processus ou mon design ? N’hésitez pas à commenter !