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 :    Sélectionnez le schéma souhaité dans la liste déroulante.  un.    Entrez la valeur de couleur requise dans le champ indiqué comme couleur de base  deux.    Déterminez quelles couleurs correspondent à mes besoins. trois.    Transférez-les sur mon espace de travail, dans mon cas, en utilisant Figma. quatre.  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 :  Choisissez la couleur de votre en-tête (pas nécessairement noir).  Passez en mode HLS.  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    Entrez la valeur de la couleur souhaitée.  un.    Sélectionnez les nuances et le nombre d'étapes (j'en ai utilisé 5).  deux.    Choisissez les teintes et le nombre d'étapes.  trois.    . Du coup, pour une couleur, j'ai créé le tableau suivant quatre    = Primaire, P    = c'est notre couleur primaire, P 60    = ce sont les tons clairs que nous avons collectés dans Tints, de P 10 à P 50    = ce sont les nuances sombres que nous avons collectées dans le panneau Nuances.  de P 60 à P 100  Répétez le même processus pour d’autres couleurs, textes et états d’erreur !  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 (   ), 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. WCAG  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   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. directives IBM   États de survol  Si votre couleur principale se situe   , vous devriez monter d’un demi-ton vers des nuances plus claires.  entre le noir et le 70  Si votre couleur principale est   et blanc, vous devriez descendre d’un demi-ton vers des tons plus foncés.  comprise entre 60   Presse / États actifs  Pour les valeurs comprises entre   l'état actif devient plus léger de deux crans 100 et 70,  Pour les valeurs de   l'état actif devient plus sombre de deux crans  60 à 10,   É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.  N'oubliez pas que ce sont des conseils basés sur mon expérience, vous pouvez ajouter vos propres étapes, modifier la séquence, mais n'oubliez pas de faire des tests d'accessibilité afin que le contraste de votre texte et les différents états de l'interface puissent être bien lus par n'importe quel utilisateur.  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.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

The writer was physically present in relevant location(s) to this story. The location is also a prevalent aspect of this story be it news or otherwise.

Read my Articles 

Read My Stories

Coveted Careers: Mastering the Art of Securing Top UI/UX Design Roles in 2024

Cet audio est produit dans la langue originale de l'histoire !

Trop long; Pour lire

Boost your HackerNoon story @ $159.99! 🚀

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

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Boostez votre productivité avec ces 18 outils de développement 🚀🔥

Télégramme : le pont de Crypto Island vers le continent

Le guide complet pour réussir une migration vers le cloud : stratégies et bonnes pratiques

Boostez votre productivité avec ces 18 outils de développement 🚀🔥

Télégramme : le pont de Crypto Island vers le continent

Le guide complet pour réussir une migration vers le cloud : stratégies et bonnes pratiques

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps