Fermer

mai 7, 2022

Comment créer une palette de couleurs pour votre système de conception

Comment créer une palette de couleurs pour votre système de conception


Une palette de couleurs est l’un des aspects les plus importants d’un système de conception. Les concepteurs peuvent les utiliser pour créer une hiérarchie visuelle, définir des émotions et créer une apparence unifiée. Cet article traite de la création d’une palette de couleurs pour votre système de conception. Nous vous donnerons également quelques conseils pour choisir des couleurs qui vont bien ensemble. Commençons!

Qu’est-ce qu’une palette de couleurs ?

Une palette de couleurs est un ensemble de couleurs utilisées ensemble dans un dessin. Une palette de couleurs est un groupe de couleurs qui fonctionnent bien ensemble pour fournir une uniformité dans l’utilisation de la couleur dans vos conceptions et créer une cohérence dans la façon dont vous exploitez la couleur dans les produits.

La création d’une palette de couleurs aide à lier le tout et crée une harmonie dans les couleurs que vous utilisez. Les concepteurs utilisent des palettes de couleurs pour créer une hiérarchie visuelle, définir des émotions et créer une apparence unifiée. Une palette de couleurs se compose généralement de trois à cinq couleurs, bien qu’elle puisse en avoir plus.

Pourquoi avez-vous besoin de couleurs de système de conception?

Une palette de couleurs sonores doit :

  • Améliorez l’expérience utilisateur de vos clients
  • Vous démarquer de la concurrence
  • Créez de la cohérence, de la hiérarchie et du contraste dans votre conception
  • Améliorez l’efficacité de la conception en proposant un choix de couleurs organisées et standardisées

Il est crucial d’avoir une palette de couleurs pour votre système de conception, car cela aidera à créer une image de marque cohérente et un intérêt visuel. Une palette de couleurs peut également aider à créer une hiérarchie visuelle, à définir des émotions et à fournir une apparence unifiée.

Lorsque tous vos éléments de conception utilisent les bonnes couleurs, ils auront un aspect plus professionnel et soigné. Cette cohésion est le but ultime d’un système de conception, et une palette de couleurs de marque définies assure la cohérence.

Les palettes peuvent rendre votre travail plus attrayant sur le plan esthétique, mais elles vous aident également à être plus productif. Ne serait-ce pas plus simple si tous les membres de votre équipe s’accordaient sur le langage de conception ?

Il est utile d’avoir une palette de couleurs définie lorsque vous travaillez avec d’autres concepteurs ou développeurs. Ils peuvent facilement voir quelles couleurs utiliser lors de la création de nouveaux designs ou de l’ajout de ceux existants. Pensez à quel point votre conception sera plus évolutive avec une seule source de vérité pour les choix de couleurs.

11 étapes pour créer une palette de couleurs pour votre système de conception

Voyons comment créer une palette de couleurs pour votre système de conception. La création de palettes de couleurs ne doit pas être un processus intimidant. Choisissez le ton et l’ambiance que vous souhaitez pour votre design, et à partir de là, tout devient plus facile.

Cela dit, vous pourriez souvent vous retrouver à ne pas savoir par où commencer. Nous y avons tous été. Heureusement, nous avons créé ce guide en 11 étapes pour vous aider à naviguer dans la conception de la palette de couleurs.

1. Identifiez n’importe quelle couleur primaire dans votre inventaire de couleurs

Construire une palette de couleurs efficace exploite l’un des modèles mentaux les plus répandus: Utiliser ce que vous avez déjà (ou peut facilement obtenir) arriver à l’inconnu (ou ce que vous n’avez pas).

Dans ce cas, ce sont vos couleurs de base. Les couleurs de base font référence aux couleurs les plus fréquemment utilisées dans votre interface utilisateur et à celles qui distinguent votre produit.

Ces couleurs donnent le ton de la conception, transmettent un message ou suscitent une réponse émotionnelle ou psychologique de votre public.

Certaines des règles des couleurs primaires incluent:

  • N’allez jamais avec un noir ou un blanc absolu
  • Vous pouvez avoir une à trois couleurs primaires
  • Vous ne vous tromperez jamais avec le bleu

Vous trouverez souvent la plupart de ces couleurs dans les logos, le marketing et le langage de conception général de votre produit.

2. Concevoir un système pour construire des palettes étendues

Développer vos couleurs d’accent est beaucoup plus facile une fois que vous avez défini vos couleurs primaires. Vous pouvez définir une couleur d’accent comme une variation de la couleur de base.

Une pratique courante consiste à définir chaque couleur d’accent en trois nuances à utiliser dans différentes situations :

Vous utilisez des couleurs dans votre interface pour communiquer des choses discrètes à votre public. C’est ce que les concepteurs veulent dire lorsqu’ils parlent de couleurs sémantiques qui mettent en évidence des informations importantes. Par exemple, vous pouvez choisir :

  • Bleu (ou une autre couleur vive) pour mettre en évidence une nouvelle fonctionnalité, comme un message
  • Rouge pour la confirmation d’une action sérieuse (telle que la désactivation du compte)
  • Ou vert pour un message positif tel qu’une transaction réussie

Voici quelques-uns options de jeu de couleurs pour vous la prochaine fois que vous construirez des palettes étendues :

  • Adjacent ou analogue (sélectionnez une couleur primaire et choisissez les couleurs à côté)
  • Triade (dessinez un triangle équilatéral sur la roue chromatique)
  • Nuances (vous pouvez choisir une couleur primaire et ses variations avec différentes saturations)

3. Trouvez une convention de nommage

Une convention de nommage vous aidera à rassembler tous vos concepteurs et développeurs sur la même page et à vous assurer qu’ils parlent le même langage de conception.

Lorsque vous choisissez une convention de dénomination pour votre palette de couleurs, vous n’avez que l’embarras du choix.

Vous pouvez utiliser des noms abstraits tels que bx7300, mais certaines approches courantes consistent à choisir des noms de couleur réels (tels que le bleu) ou des noms numérotés tels que 07000.

Ce n’est pas parce que vous pouvez nommer vos couleurs n’importe quoi que vous devriez le faire. Il vaut mieux utiliser un système de nommage standardisé et facile à comprendre.

Certaines des règles des conventions de nommage sont :

  • N’utilisez pas la nomenclature des dégradés de couleurs comme le bleu foncé
  • Offrez un nom exact pour chaque couleur
  • Gardez votre convention de nommage simple

Vous ne vous tromperez jamais en choisissant un nom fonctionnel pour votre palette de couleurs. Ce sont des noms qui donnent le but de la couleur, comme le vert primaire.

4. Testez les palettes de couleurs par rapport aux couleurs de l’inventaire

Armé d’une idée de vos couleurs primaires et d’accent, vous pouvez ensuite procéder et tester l’accessibilité de ces couleurs.

Pendant que vous y êtes, assurez-vous que vos nouvelles couleurs correspondent et remplacez ou fusionnez avec les couleurs que vous utilisez dans votre interface utilisateur actuelle.

5. Définir la palette et les consignes d’utilisation

Ce que vous avez maintenant n’est qu’un ensemble de couleurs primaires et d’accent dans votre palette. Vous n’avez pas encore décidé de ce qui va où.

Votre prochaine étape logique consiste à attribuer chacun de ces aspects de vos palettes de couleurs à des éléments d’interface utilisateur globaux. Ceux-ci peuvent inclure :

  • Arrière-plan
  • Texte
  • Récipient
  • Boutons

6. Implémentez des palettes de couleurs dans votre système de couleurs CSS

Vous avez une palette de couleurs. Vous devez maintenant l’implémenter dans votre système de couleurs CSS. Cela vous aidera à vous assurer que vos couleurs sont appliquées de manière cohérente dans toute l’interface de votre produit.

La plupart des concepteurs utilisent aujourd’hui un mélange de valeurs hexadécimales, également appelées codes hexadécimauxpour définir des palettes de couleurs.

Vous pouvez rendre cela sans effort en utilisant votre liste de variables de couleur avec un préprocesseur CSS.

/*Variable names should be intuitive*/

$primary-color: #bada55;
$secondary-color: #c0ffee;

/*Usage*/

.some-class {
 color: $primary-color; /*This will make the element's text color equal to bada55 */  }

Après avoir configuré toutes vos couleurs en tant que variables, vous pouvez ensuite les utiliser dans vos fichiers CSS en appelant le nom de la variable. Cela a l’avantage supplémentaire de faciliter le changement global des couleurs en cas de besoin.

7. Testez l’effet des nouvelles palettes de couleurs sur l’interface

Quels effets les nouvelles couleurs que vous avez choisies ont-elles sur l’interface existante ?

Vous avez sans aucun doute essayé la palette pour la taille dans les maquettes de conception, mais rien ne vaut l’utilisation réelle pour trouver des points d’amélioration.

Vous êtes plus susceptible de déterminer où les couleurs sont trop illisibles ou trop lumineuses, ou lorsque le contraste de vos boutons n’est pas correct, lorsque vous ingérez des informations réelles et que vous ne passez pas sous silence Lorem Ipsum.

Il n’y a qu’une seule façon de le savoir, et c’est de tester l’effet des modifications que vous avez apportées à votre interface existante.

Lancez un environnement de développement et donnez à votre palette une utilisation solide dans le monde réel. Répondre aux questions suivantes vous aidera :

  • Cette nouvelle palette améliore-t-elle l’interface ?
  • Cette nouvelle palette détériore-t-elle l’interface ?
  • Dans quelle mesure ces changements s’intègrent-ils aux couleurs existantes ?

8. Confirmez le contraste entre les couleurs dans votre nouvelle interface

Après avoir introduit votre nouvelle palette de couleurs dans l’interface, assurez-vous que cette nouvelle palette de couleurs offre suffisamment de contraste pour l’accessibilité.

Nous pouvons le faire en vérifiant que les éléments de notre interface utilisateur ont des scores de contraste suffisants, comme régulé par le Directives pour l’accessibilité du contenu Web.

Le moyen le plus simple consiste à utiliser un plugin dans l’outil de conception d’interface utilisateur de votre choix. Contraste pour Figma est un exemple. Rigide est une plate-forme de conception d’accessibilité plus complète qui propose des plugins pour Figma, Adobe XD et Sketch. Il propose des contrôles de contraste sur le plan gratuit.

9. Présentez votre nouvelle palette et votre nouvelle interface utilisateur à tous les concepteurs de produits

Si vous avez travaillé seul sur ce projet, vous devrez le présenter à d’autres concepteurs de produits quelque part sur la route.

Cela peut se faire de plusieurs manières, mais le plus important est de communiquer vos décisions de conception tôt et souvent.

Une excellente façon de le faire est d’écrire un court article de blog ou de créer un screencast qui passe en revue les nouvelles couleurs, comment elles ont été choisies et comment elles doivent être utilisées.

À ce stade, votre palette de couleurs est mûre pour être présentée aux autres parties prenantes du processus de conception, telles que vos collègues, les membres de l’équipe, les partenaires ou les clients.

10. Invitez des critiques créatives, des commentaires et des suggestions de changement

Deux têtes valent mieux qu’une, et le design ne fait pas exception. N’ayez pas peur d’obtenir des idées et des suggestions des parties prenantes lorsque vous choisissez votre palette de couleurs.

Si vous avez conçu vous-même la palette de couleurs, assurez-vous de la présenter à votre équipe et de recevoir les suggestions de vos collègues.

11. Finaliser la palette

Félicitations, vous avez presque terminé. Cependant, avant de partir, vous devez apporter quelques touches finales avant que votre palette ne soit prête.

Tu devrais:

  • Ajoutez cette palette à la documentation de votre système de conception et à vos guides de style.
  • Documentez les variables de votre processeur CSS (natif ou non) dans le système de conception.

Une chose à retenir est que choisir une palette de couleurs n’est pas une science, et quiconque essaie de vous vendre une seule formule ment.

La plupart du temps, votre œil sera le juge, et lorsque vous ne pouvez pas lui faire confiance, vous avez les membres de votre équipe pour consultation.

Lors de la finalisation, recherchez les incohérences, les ajustements ou les améliorations que vous pouvez apporter.

Comprendre la théorie des couleurs : la clé pour de meilleures palettes

Concevoir des palettes de couleurs ne devrait pas donner de nuits blanches à quiconque.

Les principes d'une belle conception Web

Si vous souhaitez aller au-delà de la mise en œuvre et apprendre à concevoir des palettes de couleurs qui s’harmonisent magnifiquement et transmettent le ton émotionnel de votre marque, il est temps d’acquérir une théorie des couleurs.

Dans le deuxième section des principes d’une belle conception Web, nous enseignons une masterclass condensée en théorie des couleurs qui vous rendra rapidement dangereux avec un sélecteur de couleurs. Apprendre:

  • La psychologie de la couleur
  • Température de couleur
  • Valeur chromatique
  • Théorie des couleurs 101
  • Rouge, jaune et bleu ou CMJN
  • Le schéma des choses
  • Création d’une palette
  • Outils et ressources de couleur
  • L’application : choisir une palette de couleurs




Source link