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

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 :

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:

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

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

Améliorer le texte sur la page

Ajouter plus de profondeur à la page

Gérer les images

Les fonds de page

Plusieurs solutions existe pour changer le fond

Quelques touches en plus


Revision #1
Created 26 April 2023 12:40:05 by SnowCode
Updated 26 April 2023 12:42:14 by SnowCode