Je croyais avoir déjà coudifié... donc, un résumé:
1- La lumière vient d'en haut: donner un effet 3d subtil en creux ou en relief
- en creux: text input, boutons pressés, ascenseur, bouton radio, checkbox
- en relief: boutons non pressés, bouton d'ascenseur, dropdown, cards, boutons d'un radio selectionné, popups
2- Noir et blanc d'abord:
- réaliser l'ensemble en N&B puis au final ajouter la couleur mais toujours avec un objectif précis (ça, il faudra que je le retienne ^^)
- ajout de la couleur: une seule couleur et ses variations (saturation ou luminosité) pour conserver la pertinence de la couleur
3- Doubler les espaces vides: espace entre les lignes, entre les éléments, entre les groupes d'éléments... ex: entre les items d'un menu, 2x la hauteur du texte.
4- Placer du texte au-dessus d'une image:
- directement dessus avec une image sombre et un texte blanc, lisible dans toutes les dimensions d'écran
- ajouter un overlay pour pouvoir gérer l'assombrissement (marche aussi très bien avec les thumbnails)
- texte avec fond de couleur ou noir (semi transparent ou pas)
- fond flouté (div avec le même fond flou ou texte placé sur une partie floue de l'image)
- dégradé doux vers une couleur unique (en général en footer) : permet d'améliorer la lisibilité du texte sans altérer l'image (effet possible via css: un fond dégradé de noir rgba de 0% à 20% d'opacité par exemple)
- on peut mélanger le flou et le dégradé
5- Faire ressortir le texte:
- diviser le css du texte entre ce qui en accroît la visibilité (gras, grand, capitalisé, italique, plus de marge ou de contraste etc) et ce qui la décroît (petit, fin, moins contrasté, moins de marge etc).
- hover/selected: jouer sur la couleur du texte, la couleur du fond, l'ombre, le soulignage, relief/creux, le changement de contraste (blanc>coloré ou coloré>blanc avec un fond subtilement assombri)
6- Utiliser les bonnes polices:
- clair et simple
- peu de polices différentes
- icon fonts
7- Chercher l'inspiration: observer les UI qu'on trouve belles et chercher pourquoi pour s'en inspirer
(
Permalink)
