Share
Aujourd'hui, nous allons apprendre l'importance de la couleur dans la conception Web et comment choisir un jeu de couleurs agréable. Cet article fait partie de notre série Basix, qui vise à fournir des explications pratiques et concises sur les principes de conception aux personnes peu expérimentées en conception..
Avant de commencer, parcourez nos modèles Web si vous avez besoin d'un thème professionnel pour votre prochain projet. Il existe également un certain nombre d'excellents exemples de thèmes de couleurs de sites Web..
Maintenant, commençons ce tutoriel.
Cet article est destiné aux personnes qui commencent tout juste à apprendre les principes de conception formels. Il ne s'agit pas d'une étude exhaustive sur la manière d'appliquer la couleur à un dessin (nous en aurons beaucoup à l'avenir), mais plutôt d'un aperçu pour ceux qui recherchent des conseils pratiques qui les aideront à aborder la théorie des couleurs au sein de le contexte d'un projet de design web.
J'écris ceci parce que j'ai toujours trouvé difficile de choisir un schéma de couleurs qui fonctionne bien pour un projet; c'est probablement l'une des décisions les plus difficiles que je dois prendre en tant que designer. Cependant, en apprenant les bases de la théorie des couleurs et d'excellents outils disponibles sur le Web, j'ai pu renforcer mes conceptions et expliquer cette faiblesse..
La théorie des couleurs couvre en fait un certain nombre de choses, mais au niveau le plus élémentaire, il s'agit de l'interaction des couleurs dans un dessin grâce à la complémentation, au contraste et au dynamisme..
L'interaction des couleurs dans un dessin grâce à la complémentation, au contraste et au dynamisme.
Bien que la première partie de cette définition soit simple (et certes fade), ce sont les 3 derniers termes qui définissent la théorie de la couleur de base:
La complémentation fait référence à la façon dont nous percevons les couleurs en termes de relations avec d’autres couleurs. Lorsque les couleurs occupent des extrémités opposées du spectre de couleurs, elles amènent les gens à envisager un dessin attrayant en établissant un juste milieu dans lequel l'œil peut habiter. Plutôt que de forcer pour s'adapter à une zone particulière du spectre de couleurs, l'œil reçoit un équilibre . Il existe deux utilisations courantes de la complémentation: le jeu de couleurs Triadic et Compound dont nous discuterons plus tard. La complémentation peut vous amener à de nouveaux sommets en matière de design lorsque vous maîtrisez les subtilités des combinaisons de couleurs..
Le contraste réduit la fatigue oculaire et attire l'attention de l'utilisateur en divisant clairement les éléments d'une page. L'exemple le plus apparent de contraste est une sélection efficace de la couleur de fond et du texte, comme indiqué ci-dessous:
En cas de doute, la meilleure pratique consiste généralement à choisir une couleur très claire pour l'arrière-plan et une couleur très sombre pour le texte lui-même. C’est un domaine dans lequel la théorie des couleurs est essentielle à la convivialité d’une conception Web; Dans la plupart des projets, les zones de texte volumineuses ne sont pas un lieu propice à la créativité. Restez simple et lisible..
En plus d'établir un texte lisible, le contraste peut également attirer l'attention du spectateur sur des éléments spécifiques d'une page. Pensez à mettre en évidence un manuel: lorsque vous souhaitez attirer votre attention sur une partie spécifique de la page, vous donnez à la zone environnante un aspect différent de celui du reste du texte. Le même principe s'applique à la conception Web: L'utilisation d'une variété de couleurs contrastantes peut aider à attirer l'attention du spectateur sur des éléments de page spécifiques..
Si votre site Web a un arrière-plan sombre, concentrez-vous sur le contenu principal avec une couleur plus claire..
Ce principe s’applique également aux couleurs analogues (dont nous parlerons plus loin):
Sans vouloir paraître ridicule, le dynamisme dicte l’émotion de votre projet. Des couleurs plus vives amènent l'utilisateur à se sentir plus énergique à la suite de votre création, ce qui est particulièrement efficace lorsque vous essayez de faire la publicité d'un produit ou que vous invoquez une réaction émotionnelle. Les nuances plus sombres relaxent l'utilisateur, permettant à son esprit de se concentrer sur autre chose. Un bon exemple est une comparaison entre CNN et Ars Technica:
Voici 3 des structures communément acceptées pour un bon agencement de couleurs: triadique, composé et analogue:
Composé de 3 couleurs aux extrémités séparées du spectre de couleurs. Il existe un moyen très simple de créer un jeu de couleurs triadique:
En utilisant un triangle équilatéral, vous pouvez vous assurer que les couleurs ont le même dynamisme et se complètent correctement..
La palette de couleurs du composé est basée sur une gamme de couleurs complémentaires: deux couleurs sont choisies à partir des extrémités opposées du spectre de couleurs. Ce faisant, le concepteur dispose de plus de liberté dans la conception tout en bénéficiant de l’attrait visuel de couleurs complémentaires..
Un jeu de couleurs analogue est basé sur une sélection minutieuse de couleurs dans la même zone du spectre de couleurs. Habituellement, les couleurs sont différenciées par leur dynamisme et leur contraste par rapport aux autres.
Voici deux exemples de couleurs analogues:
La beauté de notre histoire actuelle est que nous pouvons bénéficier de siècles de théoriciens de la couleur scientifiques et artistiques. Des volumes entiers ont été écrits sur la minutie de la théorie des couleurs. J'encourage donc ceux d'entre vous qui souhaitent approfondir le sujet à chercher l'un des nombreux ouvrages scientifiques disponibles pour exploiter certains des concepts les plus profonds. Nous publierons également à l'avenir des articles plus approfondis sur "la théorie des couleurs pour les concepteurs Web", ici sur Webdesigntuts + :).
Voyons maintenant quelques excellents outils que vous pouvez utiliser pour expérimenter vous-même:
Heureusement, nous disposons de quelques outils qui rendent le choix des couleurs extrêmement facile lorsqu'il est utilisé correctement. Et le meilleur de tous, ils approfondiront notre compréhension de la théorie des couleurs.
En expérimentant dans un environnement guidé, nous pouvons apprendre à appliquer ces principes sans être frustrés lorsque les choses ne fonctionnent pas parfaitement. Pensez à ces outils comme une sorte de "filet de sécurité de la théorie des couleurs", pour vous aider à explorer votre propre créativité sans jamais avoir besoin de vous éloigner des règles établies pour des combinaisons de couleurs agréables..
Kuler, un outil développé par Adobe, vise à fournir un moyen intuitif de créer une palette de couleurs. Chaque couleur de la palette peut être modifiée individuellement ou choisie comme couleur de base en quelques clics. Les palettes peuvent être enregistrées et publiées, et un grand nombre d'entrées de communauté formidables sont disponibles sur leur site. Sous chaque couleur, les codes d’exportation sont fournis (y compris hexadécimal). Cependant, l’interface peut parfois être lourde, le réglage de la vivacité d’une couleur spécifique peut altérer toute la palette (j’aimerais avoir une fonction de "verrouillage" qui empêche les autres couleurs de se décaler). Globalement, je recommanderais cet outil à ceux qui ont une bonne compréhension des concepts et qui font preuve de patience lorsque les choses ne se passent pas aussi bien qu’ils le souhaiteraient..
Cet outil est rapidement en train de devenir mon choix préféré pour les débutants absolus, ceux qui ont peu de patience ou ceux qui ne respectent pas les délais. En fournissant un sélecteur très simple et contrôlé, Color Scheme Designer fournit une très faible barrière d’entrée et son choix de principes de couleur offre une grande variété d’options. Bien qu'il n'apprenne pas à ses utilisateurs pourquoi les couleurs fonctionnent bien ensemble (la roue chromatique dynamique de Kuler est beaucoup plus efficace à cet égard), ses résultats sont excellents comme point de départ ou pour terminer un prototype..
Ses options plus avancées sont très utiles: des fonctionnalités telles que la possibilité de régler la saturation et le contraste d'une palette entière, les superpositions daltoniens et les exemples de prévisualisations de sites Web sont des choses que j'espère que Kuler implémentera très bientôt. Cependant, j'estime que cet outil ne devrait pas être l'outil principal utilisé par ceux qui veulent apprendre la théorie des couleurs, car il fait trop de travail pour l'utilisateur et ne leur permet pas d'expérimenter de manière intuitive tout en conservant les bases de chaque principe de couleur..
Oui, il existe de nombreux autres sites où vous pouvez trouver d'excellents jeux de couleurs… et nous allons en fait les arrondir et les analyser dans un avenir proche (recherchez sur notre site les informations sur les ressources à sa parution).
Pour terminer cet article, examinons un site Web en appliquant certains des principes dont nous avons discuté. Gamers with Jobs est un site Web consacré à l'analyse approfondie des jeux vidéo, par le biais de ses fonctionnalités, de son podcast et de son forum..
L'un des aspects les plus difficiles du travail sur les couleurs est que parfois, lorsque les couleurs ne sont pas encore organisées dans un dessin, elles ne semblent pas bien fonctionner ensemble. Cependant, une fois appliqués, leur harmonie visuelle devient généralement apparente. Je me suis causé beaucoup de frustration en ajustant les couleurs choisies dans Kuler avant de les appliquer à un dessin, mais je me suis rendu compte que la palette de couleurs avait été modifiée juste assez pour ne pas plaire..
Faites confiance à la théorie! Appliquer les couleurs choisies selon un principe de couleur, et puis ajustez au besoin. Cela vous fera gagner beaucoup de temps et renforcera vos compétences en conception, car vous commencerez à voir les couleurs de manière plus raffinée, artistique et même scientifique.!
Merci d'avoir lu mon premier article, j'ai eu beaucoup de plaisir à l'écrire. Merci de nous faire part de vos commentaires dans la section commentaires si vous le souhaitez, je souhaite que ces articles soient aussi utiles que possible..
Oh! Et si vous êtes désireux de lire davantage, consultez un autre excellent article basé sur la théorie qui se rapporte à ce dont nous venons de parler: "Comprendre la hiérarchie visuelle dans la conception Web".
Si vous avez besoin d'un thème professionnel pour votre prochain projet, parcourez nos modèles Web. Il existe également de nombreux exemples de thèmes de couleurs de sites Web à déconstruire sur ThemeForest. Ou embauchez un designer sur Envato Studio.
Accentsconagua