Comment sélectionner les couleurs et déterminer les nuances pour différents états : Survol, Actif, Appuyez, Désactivez

Le processus de sélection des couleurs pour l’interface peut être complexe, en particulier si l’on prend en compte les différents états des boutons, polices et autres éléments de l’interface utilisateur. Dans cet article, je partagerai mes méthodes et principes qui vous aideront à réussir le choix d’une palette de couleurs pour votre projet.

1. Définir la couleur primaire

Lors de la conception d’un site Web, il est souvent nécessaire de choisir une palette de couleurs. Parfois, le client a déjà une couleur principale de la marque. Dans ce cas, votre tâche consiste à sélectionner des couleurs et des nuances supplémentaires qui complèteront la couleur primaire. Outre la couleur principale, des couleurs supplémentaires sont utilisées sur le site à diverses fins, telles que l'indication d'états d'erreur, de liens, d'illustrations, d'icônes ou pour une utilisation dans des graphiques et des tableaux de bord.

2. Utiliser l'harmonie des couleurs

Pour garantir une bonne harmonie des couleurs, il est avantageux d’utiliser différents schémas d’harmonie des couleurs tels que monochromes, complémentaires, triangulaires et autres. Ils peuvent aider à créer une palette de couleurs harmonieuse qui complète la couleur primaire du projet. Nous vivons actuellement dans un monde où la technologie progresse rapidement et où il existe des services spéciaux qui génèrent facilement une palette de couleurs. Par exemple, j'utilise color.adobe.com.

Voici comment je procède :

un. Sélectionnez le schéma souhaité dans la liste déroulante.

deux. Entrez la valeur de couleur requise dans le champ indiqué comme couleur de base

trois. Déterminez quelles couleurs correspondent à mes besoins.

quatre. Transférez-les sur mon espace de travail, dans mon cas, en utilisant Figma.

3. Sélection des tons

Ensuite, nous devons déterminer les nuances de chacune des couleurs sélectionnées. Pour sélectionner les nuances des couleurs choisies, vous pouvez faire appel à des services spécifiques qui peuvent vous aider dans ce processus. Il existe deux manières de déterminer les nuances de vos couleurs :

La première méthode implique une formule plus complexe :

1. Choisissez la couleur de votre en-tête (pas nécessairement noir).
2. Passez en mode HLS.
3. Ignorez la première cellule, diminuez la valeur de 2 pour la deuxième cellule et augmentez-la de 5 pour la troisième cellule.

La deuxième méthode consiste à utiliser le service (simple et rapide)

couleurs.dopely.top

un. Entrez la valeur de la couleur souhaitée.

deux. Sélectionnez les nuances et le nombre d'étapes (j'en ai utilisé 5).

trois. Choisissez les teintes et le nombre d'étapes.

quatre . Du coup, pour une couleur, j'ai créé le tableau suivant

P = Primaire,

P 60 = c'est notre couleur primaire,

de P 10 à P 50 = ce sont les tons clairs que nous avons collectés dans Tints,

de P 60 à P 100 = ce sont les nuances sombres que nous avons collectées dans le panneau Nuances.

4. Vérification de l'accessibilité des couleurs

Il est important de s'assurer que les couleurs choisies soient accessibles à tous les utilisateurs, y compris ceux ayant des capacités limitées. Il existe des directives, telles que les Directives pour l'accessibilité du contenu Web ( WCAG ), qui peuvent être suivies lors de la création d'une interface. Pour vérifier l'accessibilité de vos couleurs, vous pouvez utiliser des outils spécifiques tels que des plugins ou des services web qui vérifieront le contraste et l'accessibilité des couleurs sélectionnées.

Plugin Figma – Contraste

Service Web – Refroidisseurs

5. Définir des couleurs pour différents états d'interface

Lors de la dernière étape de la conception de la palette de couleurs de votre projet Web, il est nécessaire de déterminer le nombre d'étapes requises pour les états d'éléments spécifiques. Généralement, nous identifions quatre états clés :

• Activé (état calme et normal de l'élément)
• Survol (survol de la souris)
• Actif (clic sur un bouton ou un autre contrôle)
• Désactivé (élément bloqué)

Pour déterminer le nombre d'étapes, nous utilisons le panneau de couleurs, où nous fixons notre valeur de couleur principale (prime). Ensuite, nous comptons le nombre d’étapes pour les états de survol et actif. Après cela, nous testons l'accessibilité de différents états pour nous assurer que nos boutons et le texte qu'ils contiennent sont facilement lisibles.

Par exemple, les directives IBM décrivent l'approche suivante : l'état de survol est à un pas et demi de la couleur initiale, tandis que l'état actif est à deux pas de la couleur principale. De même, l’état sélectionné sera un peu plus éloigné de la couleur principale. Cette méthode nous permet de définir la palette de couleurs et d'assurer son accessibilité à un large public, y compris aux utilisateurs aux capacités limitées. La même approche est appliquée aux textes, où les états de survol et actifs sont identifiés.

États de survol

Si votre couleur principale se situe entre le noir et le 70 , vous devriez monter d’un demi-ton vers des nuances plus claires.

Si votre couleur principale est comprise entre 60 et blanc, vous devriez descendre d’un demi-ton vers des tons plus foncés.

Presse / États actifs

Pour les valeurs comprises entre 100 et 70, l'état actif devient plus léger de deux crans

Pour les valeurs de 60 à 10, l'état actif devient plus sombre de deux crans

États sélectionnés

Pour les valeurs de 100 à 70, l'état sélectionné devient un cran plus léger

Pour les valeurs de 60 à 10, l'état sélectionné devient un cran plus sombre

Il est également important de tester vos conceptions et vos textes pour vous assurer qu'ils sont lisibles et affichés correctement. Une fois le travail terminé, assurez-vous que les différents états et textes de l’interface se présentent et fonctionnent correctement.

Le bon choix d’une palette de couleurs joue un rôle clé dans la création d’une interface utilisateur conviviale et attrayante. En suivant ces étapes simples et en utilisant les outils disponibles, vous pourrez sélectionner et optimiser les couleurs pour votre projet.

J'espère que vous avez apprécié mon article. Si vous avez des questions ou avez besoin de renseignements complémentaires, n'hésitez pas à laisser un commentaire.