"He ! Tu sais me créer ce site web ? Voici la maquette."
Peut-être que avez-vous déjà entendu cette phrase. Quand vous êtes développeur font-end c'est souvent ainsi que cela se passe, une personne, dont c'est le métier, se charge de créer le design du site, à vous ensuite de le coder pour qu'il ressemble le plus possible au design demandé.

Et si on vous demandait de créer d'un site web depuis une page blanche, "from scratch" comme diraient les connaisseurs, que faire pour que le site ne ressemble pas à un site des années 90' ? Dans cet article, je vais vous donner mes astuces pour améliorer le design de votre site.

Trouver l'inspiration

La première étape quand on me demande de créer un site depuis une page blanche c'est d'aller voir les sites web avec la même thématique. Cela me permet d'avoir un aperçu de la façon dont les pages sont organisées, quelles couleurs et polices ont été choisies (vous verrez que selon la thématique, certains types de couleurs et polices sont récurrents) et comment je peux me distinguer de ces sites.

De façon plus générale, je vous conseille vivement de rester au courant des tendances web design. Pour ce faire, suivez des designers et web designers sur vos réseaux sociaux. Personnellement, j'utilise énormément Pinterest pour trouver de l'inspiration et enregistrer des designs et idées qui me plaisent. Si vous êtes intéressé, voici un lien vers mon tableau Pinterest contenant une vingtaine de templates de sites inspirants : https://pin.it/g4l6b3n35hpmso.

Récemment j'ai découvert Dribbble, une plateforme sur laquelle des designers, web designers et graphistes postent leur travaille. Tout comme les autres réseaux sociaux, vous pouvez suivre des personnes et voir le contenu qu'ils partagent. L'avantage de cette plateforme, c'est qu'elle est principalement conçue pour les designers, web designers et graphistes. 3 types de profils sont possibles, soit vous proposez votre travail, soit vous cherchez de l'inspiration, soit vous cherchez des personnes à embaucher. L'algorithme de Dribbble va alors optimiser votre "fil d'actu" selon votre profil, de sorte à vous montrer ce qui est le plus susceptible de vous intéresser. Enfin, comme Pinterest, vous pouvez aussi créer des listes ("buckets") pour trier le contenu que vous avez enregistré.

Vous pouvez aussi aller voir du côté des youtubeurs, il existe quelques chaînes intéressantes qui vous donneront des astuces et techniques pour rendre vos sites plus modernes. Voici une petite liste de youtubeurs que je vous recommande :

Concevoir une maquette

Avant de coder quoique ce soit, vous savez sûrement qu'il est primordial de créer une maquette afin de mettre ses idées au clair quant au design du site mais il y a une autre raison à cela... Grâce à votre maquette vous pourrez rapidement avoir un retour de votre client et ainsi modifier rapidement et facilement le design jusqu'à avoir une version qui lui convienne parfaitement (bien qu'il vous demandera toujours quelques modifications).

Avant de vous lancer dans la maquette, je vous conseille de commencer par un wireframe à la main afin de clarifier la silhouette du site ainsi que la navigabilité de celui-ci. Ensuite vous pourrez vous lancer dans la maquette (mockup) du site et y inclure les couleurs, polices, images...

Personnellement, pour faire mes maquettes j'utilise Adobe XD , un logiciel super simple d'utilisation et très intuitif. Il permet de naviguer à travers les différentes pages du site et d'avoir plusieurs types de vues (desktop, mobile, ...). Cela donne la possibilité de faire tester le site à votre client ou votre entourage afin de vous assurer qu'ils comprennent bien le fonctionnement de celui-ci (et cela sans avoir écrit une seule ligne de code !).

Afin d'éviter des pertes de temps, commencez par faire valider la page d'accueil pour vous assurer que vous allez dans la bonne direction. Créez ensuite les pages suivantes en restant bien cohérent avec votre charte graphique.

Habiller son site

Couleurs, polices, font-size, images, icônes, ... il existe tellement de combinaisons possibles ! Comment faire les bons choix ? Je ne suis pas web designer, mais en tant que développeur font-end, je peux vous donner quelques astuces :

Penser ergonomie

Un site design n'est pas seulement un site qui est visuellement attirant, l'utilisateur doit aussi pouvoir naviguer dessus facilement. En d'autres mots, l'UI (user interface) doit être soignée et l'UX (user experience) doit être agréable et intuitive. Pour ce faire, il existe quelques techniques que j'ai reprises directement de mon cours d'ergonomie :

Pour plus de conseils et de bonnes pratiques, je vous recommande de jeter un œil aux toolkits des géants du web afin de vous familiariser avec ces règles de conceptions :