Comment faire le design d'un site

Ce qui suit est un résumé hyper condensé du livre Refactoring UI

Avant toute chose, je trouve important de noter qu'il est important de ne pas se perdre dans le design de son site, ce n'est vraiment pas la partie la plus importante pour le projet. Personnellement je trouve que le développement web est particulièrement chronophage et épuisant et c'est pour cela que je vous conseille vivement de faire le design avec l'aide de quelqu'un qui peut vous donner des idées, des feedbacks, vous soutenir, etc.

La base (fonctionalités, fonts, personalité, layout global, etc)

Pour commencer on peut d'abord lister les fonctionalités de la page que l'on veut designer par ordre d'importance.

Ensuite on peut prendre une feuille et un gros marqueur et faire le layout global de la page en mettant en avant les fonctionalités importantes. Les couleurs viendront bien après.

On peut ensuite considérer la personalité générale du site, ce qui mène déjà à certaines décisions au niveau du design :

Les couleurs (i.e bleu est plus tot neutre, rose est plus tot casuel et or est plus tot sophistiqué)
La rondeur (border-radius) des éléments (en général plus = plus casuel et moins = plus formel)
Les polices d'écritures (serif = pro, rond et sans serif = casuel, monoespacé = techy, sans = neutre)
Le ton de language utilisé dans les messages

Les couleurs

Ensuite on peut utiliser des sites comme Coolors pour avoir des idées de couleurs, mais il ne faut pas trop compter sur la palette générée car beaucoup plus de couleurs sont nécessaires :

Une échelle de gris (mais ça peut ne pas être du gris et être du brun très foncé par exemple) pour le texte, formulaires, lignes, certaines bordures, etc
Une échelle d'une autre couleur comme couleur principale qui va vraiment donner la personalité du site
Plusieurs autres échelles comme couleurs d'accents de certaines choses (exemple: jaune pour un avertissement, rouge pour un danger, vert pour quelque chose de positif, etc)

Mettre en place une hierarchie des éléments

Il ne faut pas confondre la hierarchie du code (body, main, h1, etc) et la hierarchie des éléments. Ce n'est pas par ce qu'un élément est un <h1> qu'il doit forcément être plus grand par exemple.

On peut donc reprendre la liste faite précédemment et définir quels éléments de la page doivent être le plus mis en avant. Pour mettre en avant un élément on peut:

Mettre une couleur de fond, un gradient, ou autre
Augmenter la taille (mais attention car cela peut vite devenir excessif)
Augmenter le contraste de l'élément ou bien le "poid" de la police (font weight)
Rendre les autres éléments autour moins important (réduire le contraste, ou le poid de la police par exemple)

Une autre chose importante est d'éviter les labels car la hierarchie des éléments peut rendre la chose à la fois plus claire, plus intuitive et plus belle. On peut donc remplacer un label tel que "nom: John Doe, Occupation: freelance" par

Utiliser des tailles et des importances différentes (par exemple remplacer "name: John Doe, Occupation: Freelance" par "John Doe" en titre et "Freelance" en sous titre)
Une phrase (par exemple remplacer "En stock: 12" par "12 en stock")
Quand le label ne peut pas être remplacé, on peut alors essayer de le rendre plus petit et mettre la valeur plus en avant.
Sinon on peut toujours utiliser un label si c'est vraiment indispensable (par exemple un tableau de spécifications d'un produit)

Une autre chose est que la sémantique des éléments (tel qu'associer une couleur à une action) vient après la hierarchie des éléments donc à la place de mettre un bouton "Supprimer" en rouge fluo, il est préférable de garder la couleur principale et d'après envoyer une popup de confirmation avec un bouton rouge pour confirmer l'action.

Gestion de l'espace sur la page

Designer et coder en "mobile first" pour s'assurer de d'abord faire fonctionner les choses sur mobile
Ajouter beaucoup de padding et de margin puis de suprimer l'espace en trop par après
Le contenu n'a pas besoin de prendre toute la place, on peut donc diminuer la largeur de la page et la centrer
On peut aussi diviser la page en colonnes pour mieux rentabiliser l'espace
Les tailles relatives ne fonctionnes pas toujours donc il faut faire attention et tester un peu plus
S'assurer que les éléments qui vont ensemble ont moins d'espace les séparant que les autres

Améliorer le texte sur la page

Utiliser des vraimnet bonne polices (voir au début de cette page dans la section sur les bases)
Eviter de faire des lignes trop longues (pas plus de 75 caractères de préférence)
Pour rendre le texte moins "dense" on peut changer le "line height" et le "letter spacing"
Ne pas centrer des textes trop long car cela nuit à la lisibilité
Eviter de mettre des couleurs sur tous les liens. On peut simplement mettre un peu plus de poid sur le texte et changer la couleur quand on passe la souris dessus par exemple
Utiliser des tirets pour diviser les lignes des textes "jusifiés" pour éviter d'avoir des gros trous dégeulasses dedans

Ajouter plus de profondeur à la page

On peut utiliser des gradient sur le fond et des ombres pour simuler l'action de la lumière et élever ou dessendre des éléments
On peut superposer des éléments pour ajouter une dimension supplémentaires (par exemple superposer un champ de texte sur une première et une deuxième section qui ont tous deux des couleurs différentes)

Gérer les images

Avoir des images de la meilleur qualité possible
Faire attention à ce que les images envoyées par les utilisateurs aient toute la même taille
Mettre une bordure ou une ombre derrières les images envoyées par des utilisateurs pour éviter qu'elles se fondent avec la couleur de fond de la page
Changer la luminosité d'une image quand du texte est écrit dessus

Les fonds de page

Utiliser des fonds différents pour différentes sections
Utiliser des fonds différents pour mettre des élémnets en avant plus tot que d'autres

Plusieurs solutions existe pour changer le fond

Utiliser une couleur unie
Utiliser une couleur unie avec du grain
Utiliser une image de fond
Utiliser un gradient
Utiliser un pattern qui se répète en fond
Utiliser quelques formes en fond

Quelques touches en plus

Eviter de mettre trop de bordures pour séparer les éléments et préférer ajouter de l'espace et changer la couleur quand on passe la souris dessus
Ajouter une bordure sur certains éléments pour ajouter de la couleur (accent border)
Les tableaux et les menus n'ont pas besoin d'être chiant. On peut donc ajouter plus de couleurs, de layouts, et d'autres éléments plus "riches" à l'intérieur
Un état vide ne doit pas vraiment être vide