Couleur dans la conception web: comment faire l'utilisateur l'émotion désirée
Pourboires / / December 19, 2019
Tout au long de l'histoire humaine, les maîtres-artistes ont reçu une reconnaissance universelle en raison de la capacité de travailler avec la couleur. Dans le monde d'aujourd'hui ne reçoivent pas moins spécialistes de la reconnaissance, qui sont en mesure de combiner les couleurs dans les fins commerciales et d'affaires - dans la conception publicitaire et web.
La capacité à utiliser des couleurs peut être pompée jusqu'à l'infini. Il est une réelle profondeur des possibilités d'exposition humaine.
Nous allons vous dire sur les bases de la théorie des couleurs et de couleurs, puis parler de l'impact émotionnel de certaines couleurs.
théorie des couleurs
thème de la couleur, vous pouvez consacrer un livre entier, donc nous ne prendrons pas entièrement, et nous en tenir à des informations utiles, qui peuvent être utilisés dans le développement de la conception d'interface.
Il peut être divisé en théorie des couleurs en trois parties:
contraste
Chaque ombre est à l'opposé, pour ainsi dire, de son « ennemi juré », ce qui est le plus grand contraste avec cette couleur. Pour trouver une couleur, vous pouvez utiliser la roue chromatique. Il suffit de sélectionner la couleur sur le côté opposé du cercle.
addition
Ces couleurs ne sont pas toujours conflictuels entre eux. Les couleurs complémentaires mettent l'accent sur l'autre, à la différence du contraste. Dans la roue des couleurs, ces couleurs sont les unes aux autres, comme les couleurs complémentaires de violet - bleu et rose.
résonance
Chaque couleur est une certaine humeur. couleurs vives et chaudes (rouge, orange, jaune) rempli d'énergie humaine, réveiller, couleurs froides sombres (vert, bleu, violet), au contraire, se détendre et apaiser.
Par exemple, BBC Nouvelles Utilisez la barre de navigation rouge, pour réveiller le lecteur, pour renforcer son état excité. Compte tenu de la spécificité du site - une des nouvelles à sensation - rouge est une solution logique.
la théorie de la couleur dans la conception web - est plus que la décoration juste. La couleur peut changer la perception de votre site, et jouer un rôle crucial dans votre entreprise.
perception de la couleur émotionnelle
Personne ne niera l'interaction étroite de la couleur et de l'émotion. Et, bien sûr, tout concepteur Web veut utiliser cet effet pour créer une certaine atmosphère pour chaque site.
Sur la base de plusieurs études - analyse, publiée sur le site vandelay ConceptionEt poster sur les couleurs dans la Magazine Smash - nous expliquons comment les couleurs affectent les émotions et les aider à créer UX-design.
Il est important de se rappeler que les différentes cultures du monde entier ont des perceptions différentes de couleur. Nous allons décrire les associations émotionnelles qui sont propres à la culture occidentale.
rouge
Les émotions et les associations: le pouvoir, l'importance, la jeunesse.
La couleur la plus stimulante, si énergiquement chargée, elle peut même augmenter la pression artérielle. Le rouge représente la passion et de la puissance, plus que d'autres couleurs attirent l'attention, si souvent utilisés pour les avertissements importants et des annonces.
Par exemple, le rouge est le site très approprié No Way NSADont le but - pour prévenir les menaces alléguées.
Utilisez beaucoup de rouge dans le haut de la page - ce qui est une excellente solution, car il attire l'attention sur des informations importantes dans le message. En même temps, les gens ont tendance à quitter rapidement la « zone de danger » de couleur rouge et faites défiler vers le bas. Ceci, à son tour, permet à l'utilisateur de montrer plus de contenu.
Mais cette couleur peut travailler contre vous, car il peut provoquer de l'agressivité ou la surstimulation. Si vous voulez créer une atmosphère plus détendue, essayez d'utiliser modérément rouge et choisir des teintes plus claires de rouge.
orange
Les émotions et les associations: la convivialité, l'énergie et l'unicité.
Comme le plus silencieux des tons chauds, orange peut causer toute la gamme des émotions diverses. Comme la couleur de base, il peut être intéressant et l'accolade, et comme secondaire - préserver ces propriétés, mais d'une manière non intrusive.
De plus, Orange contribue à créer un sentiment de mouvement et de l'énergie. Par exemple, il semble grand sur le site de bande dessinée fantaCe qui est suggestif de la jeunesse et du mouvement. La couleur est associée à la créativité, tout en conservant un sens de la marque familière.
jaune
Les émotions et les associations: bonheur, enthousiasme, archaïsme (couleurs sombres).
Ceci est l'un des plus polyvalent couleurs et les émotions qu'il provoque, dépendent de l'ombre dans une mesure plus grande.
couleur jaune vif ajoute de l'énergie, mais sans la sévérité et dureté, qui est présent en rouge. nuances moyennes de couleurs jaunes évoquent un sentiment de confort, mais encore vigoureux. teintes sombres (y compris l'or) donnent une idée de l'antiquité, remplir l'intemporalité de l'espace, la sagesse et la curiosité.
Par exemple, sur la page principale de l'agence de web design flash Media plus sombre ton jaune Exude l'énergie, la curiosité et de l'autorité. Cette couleur est parfaite pour les entreprises qui gagnent leurs consultations et ils veulent mettre l'accent sur leur professionnalisme.
vert
Les émotions et les associations: la croissance, la stabilité, les sujets financiers autour du thème de l'environnement.
Vert - un pont entre les teintes chaudes et froides, mais se penche plus au froid. Cela signifie que le vert a une couleur bleu effet relaxant, mais a aussi un peu de vigueur du jaune.
En conséquence, il crée une atmosphère très stable et équilibré. teintes plus foncées de vert donnent l'impression de la richesse et de l'abondance, à la fois en ligne Ameritrade.
bleu
Les émotions et les associations: la paix de l'esprit, la sécurité, l'ouverture (des tons plus clairs), la fiabilité (des nuances plus sombres).
Comme dans le cas de la couleur jaune, l'effet dépend fortement de la teinte bleue. Toutes les nuances de bleu sont polyvalents en termes de détente et de sécurité, mais les couleurs vives associées à la convivialité, et sombre - avec tristesse.
Les réseaux sociaux comme Twitter et Facebook sont utilisés plus de lumière et des tons de bleu moyen, et les sites d'entreprise préfèrent les plus sombres nuances de la force et la fiabilité.
Un bon exemple - agence de design d'événements Van Vliet & Piège. En utilisant la couleur bleue comme l'arrière-plan, ils sont visuellement à leurs connaissances laissé entendre et les compétences dans la conception florale, mais aussi créé un sentiment de fiabilité et de confiance.
Ceci est d'une grande importance, car ils travaillent avec les événements, ce qui est important pour la partie visuelle, par exemple avec des mariages.
pourpre
Les émotions et les associations: luxe, romance (nuances de lumière), le mysticisme et de mystère (couleurs sombres).
couleur pourpre a toujours été associée à la grandeur royale, des notes de luxe. nuances pourpres reflètent la générosité et la richesse dans son ensemble, ce qui en fait un excellent choix pour les produits de mode et de luxe (même le chocolat, par exemple, cadburyQui a choisi la couleur de sa marque).
Les tons plus clairs tels que la lavande (rose pourpre avec plus) évoquent des pensées sur le romantisme, alors que les teintes sombres apparaissent plus élégant et mystérieux.
noir
Les émotions et les associations: le pouvoir, la sophistication, la nervosité.
Le plus puissant des couleurs neutres - noir - apparaît sur pratiquement tout site Web. Il peut provoquer des différentes associations en fonction de la couleur d'accompagnement ou les dominer, si elle est utilisée de façon excessive.
La force et la neutralité du noir en fait un excellent choix pour les gros blocs de texte, mais la couleur principale, il peut créer un sentiment de nervosité ou même être associé au mal.
Pour la plupart des sites, le noir est utilisé pour créer un sentiment d'élégance. La combinaison d'un design minimaliste en noir et blanc donne l'impression d'élégance et de style, à la fois sur place Rêve et portée Société BOSE.
blanc
Les émotions et les associations: la pureté, la simplicité, la bonté.
Dans la culture occidentale, le blanc est associé à la pureté, la bonté et l'innocence. Cette couleur est souvent utilisé pour l'arrière-plan des sites minimaliste et simple.
De plus, aucune des couleurs ne permettra pas d'attirer autant d'attention aux autres couleurs comme le blanc. Par exemple, dans site Web vainqueur Awwwards Kloina Toshev toutes ses œuvres sont disposées sur un fond blanc, qui ne consacre que des illustrations, et crée l'impression d'une élégante galerie.
gris
Les émotions et les associations: la neutralité, la formalité, la mélancolie.
En dépit du fait que, dans certaines situations, le gris peut créer une atmosphère sombre et mélancolique, il est encore souvent utilisé par des designers professionnels.
La chose dans les tons: les alternant, vous pouvez obtenir toutes les émotions causées par les deux en noir et blanc. En général, le gris - est un outil puissant dans la main droite.
Mais en combinaison avec des couleurs plus vives dans la conception de fond gris, il semble moderne mais pas sombre, comme Awwwards.
beige
Les émotions et les associations: il transmet le caractère des autres couleurs.
En soi, beige plutôt terne et inexpressif, mais il a une propriété remarquable: beige prend le caractère de couleurs qui l'entourent. Par conséquent, s'il est prévu de ne pas exprimer beige de retenue sert de fond ou la deuxième couleur.
teintes plus foncées de beige créent un sens de la tradition et banale, donner une idée de la texture du papier et des tons plus clairs semblent plus frais et plus moderne.
Par exemple, un restaurant sur place dishoom couleur beige clair autour des noms et sombres bords donnent l'impression que ce restaurant - une nouvelle perspective sur la cuisine traditionnelle.
ivoire
Les émotions et les associations: le confort, l'élégance, la simplicité.
Ivoire et la crème produisent presque les mêmes émotions que le blanc. Cependant chaud ivoire (ou moins stérile) que le blanc, ce qui crée un plus grand sentiment de confort, tout en maintenant le minimalisme.
Vous pouvez utiliser l'ivoire au lieu de blanc pour adoucir le contraste entre elle et les couleurs plus sombres. Par exemple, le site Art dans mon café éléments brun-orange sont placés sur un fond ivoire (qui ressemble grisâtre) qui conserve une sensation de chaleur.
spectre de couleur
Chaque site dispose d'une gamme de couleurs, dans lequel les couleurs primaires utilisées pour remplir un plus grand espace. Comme nous l'avons dit, l'utilisation de ces couleurs affecte surtout inconsciemment l'esprit et de l'humeur. Donc les choisir avec soin.
En dépit du fait qu'il ya beaucoup de façons de combiner les couleurs, nous allons nous concentrer sur les trois plus efficaces et couramment utilisés.
Triad (triple triangle d'harmonie)
Triad - le système principal et le plus équilibré de trois couleurs. Il utilise la résonance et l'ajout de couleurs, mais il y a un contraste complexe, en raison de ce que la triade est la gamme la plus fiable.
Sur une roue de couleur de 12 couleurs, choisissez trois quelconques, situé à 120 degrés par rapport à l'autre: une couleur pour l'arrière-plan principal et deux pour le contenu et la barre de navigation.
Double système complémentaire
Cette gamme est plus difficile à mettre en œuvre, mais il peut être une solution rentable. Il utilise quatre couleurs: deux contrastées et deux autres.
Voyez comment la page ressemble remarquablement Florida Flourish, sur la base d'un tel système. le contraste des couleurs rouge et vert des plantes et des blocs de texte, et fond bleu et désert d'orange complètent efficacement l'image.
Analogs (système séquentiel)
Gamma Couleurs similaires utilise principalement des couleurs complémentaires. Cela permet à souligner plus clairement certaines qualités et provoquer certaines émotions.
Par exemple, une combinaison de rouge, d'orange et de reflets jaunes la vigueur et la vitalité. L'utilisation d'une telle ampleur est très simple, mais il est difficile de choisir la couleur sera inclus dans la combinaison. Leur effet sera exagérée, donc il ne peut pas se tromper.
Par exemple, l'utilisation de couleurs bleu, turquoise et vert dans la conception du site Blinksale Il a créé une atmosphère de paix et de tranquillité. Remarquez que la couleur jaune utilisée pour souligner les points importants.
Ceci est juste les bases de la théorie des couleurs, ce qui peut aider à créer une impressionnante conception personnalisée, et il n'y a pas de limite à ce que vous pouvez aller en termes de couleurs sur votre site.
Outils aide pour sélectionner une couleur
Heureusement, il existe plusieurs outils qui aident à intégrer la théorie des couleurs en pratique. Essayez ces palettes de ne pas avoir à recommencer à zéro dans la création de son:
- Adobe Couleur CC, Anciennement connu sous le nom d'Adobe Kuler. Ceci est l'un des outils les plus fiables dans le choix des couleurs.
- Paletton. Si vous avez besoin d'un outil simple pour la sélection des couleurs rapide, Paletton est parfait.
- UI Flat Color Picker. L'outil parfait pour sélectionner les couleurs de l'interface utilisateur.
Et si ces instruments ne vous conviennent pas, voici une autre 28 sites avec palettes et les différents outils de sélection des couleurs.
Une relation directe entre la couleur et les émotions
Rappelez-vous, les utilisateurs rarement un avis et d'apprécier la couleur de l'arrière-plan, barre de navigation, des pièces individuelles, mais cela ne signifie pas que la couleur ne soit pas affectée par eux. Tout cela se produit inconsciemment.
L'expérience utilisateur toute émotion, est le lien avec le site ou la marque, il fait certaines actions: faire défiler vers le bas pour cliquer sur les boutons qui invite à l'action, ou, au contraire, non les remarquer. Et la couleur joue dans tout cela un rôle énorme.
Si vous avez vos conseils sur l'utilisation de la couleur dans la conception web, part s'il vous plaît dans les commentaires.