Share
Eh bien, si vous avez lu les cinq premiers articles de cette série, vous vous demandez peut-être: "Comment tout cela est-il lié à la conception mobile?" Le but de cette série d'introduction est de vous permettre d'ajouter de nouveaux outils et idées à votre arsenal de conception mobile. Cet article n'est pas différent. Les couleurs peuvent donner à votre application une apparence professionnelle et belle, mais elles peuvent également donner l’impression que votre application a été créée par mon neveu de cinq ans..
Je ne cherche pas à faire de vous un concepteur professionnel dans ce cours, mais connaître les principes fondamentaux de la théorie des couleurs peut réellement aider à amener vos applications au niveau supérieur, même si vous avez l'intention de créer toute l'interface de l'application dans le code..
Pour comprendre la théorie des couleurs, voici la manière la plus simple de la décomposer pour vous..
Rouge, jaune, bleu. Ce sont les trois couleurs de base qui ne peuvent être créées par aucune combinaison d’autres couleurs. Toutes les autres couleurs sont le résultat du mélange de ces trois.
Vert, Orange, Violet. Ce sont les couleurs formées en mélangeant les couleurs primaires.
Jaune-orange, rouge-orange, rouge-violet, bleu-violet, bleu-vert et jaune-vert. Ce sont les couleurs formées en mélangeant une couleur primaire et une couleur secondaire. En d'autres termes, il remplit le reste de notre roue chromatique.
Toutes les trois couleurs qui sont côte à côte sur une roue de couleurs en 12 parties, telles que jaune vert, jaune et jaune orange. Habituellement, l’une des trois couleurs est la couleur dominante.
En ce qui concerne la roue chromatique, les couleurs complémentaires sont deux couleurs quelconques directement opposées, telles que le rouge et le vert. Les couleurs complémentaires créent un contraste maximal et une stabilité maximale. Faites attention lorsque vous travaillez avec des couleurs complémentaires totalement saturées pour les interfaces numériques: elles peuvent fatiguer les yeux..
Voici un autre de mes petits secrets que je vais vous révéler et où j'ai également récupéré les graphiques. C'est un excellent site qui vous aidera à mettre de l'harmonie dans votre application..
Les couleurs additives sont la composition du Web, de la télévision et des appareils mobiles. Dans Photoshop, nous créons toutes les captures d'écran, les arrière-plans et les graphiques de nos applications au format RVB. RVB signifie rouge, vert et bleu, et ces trois couleurs sont les couleurs primaires additives. Lorsque différentes combinaisons de ces trois sont mélangées, toutes les couleurs restantes sont créées. Dans Photoshop, vous pouvez gérer la couleur RVB en double-cliquant sur la palette de couleurs. Les deux méthodes les plus courantes pour ajuster les couleurs dans Photoshop consistent à saisir des valeurs RVB numériques directement dans des champs de texte ou à faire simplement glisser le sélecteur de couleur sur la palette de couleurs.
Sur une échelle de 0 à 255, chaque incrément numérique modifie la couleur de manière subtile. Juste pour comprendre, il n'y a rien de subtil dans les différences ci-dessous!
Une valeur RVB de 255, 255, 255 (saturation complète) revient au blanc, elle indique également la valeur hexadécimale de #ffffff.
Au contraire, si toutes les valeurs RVB sont définies à zéro, la couleur générée est le noir. Ceci montre la valeur hexadécimale correspondante # 000000.
Pour en savoir un peu plus, vous devriez être en mesure de prédire quelle couleur sera générée lorsque Rouge est défini sur une valeur de 255 et Vert et Bleu sur 0..
Néanmoins, je n'ai pas pu résister à une autre capture d'écran. Avec une valeur de 255 en point rouge et de 0 en vert et bleu, nous obtenons une couleur rouge complètement saturée. Vert et Bleu changent en conséquence avec les mêmes valeurs réarrangées.
Comme exemple de ce qui se passe lorsque nous commençons à jouer avec plusieurs valeurs différentes, avec une valeur de 255 en rouge et vert, nous créons une couleur jaune complètement saturée avec la valeur hexadécimale de # ffff00.
Ainsi, en changeant uniquement les valeurs de Rouge, Vert ou Bleu, nous pouvons créer la couleur exacte nécessaire au design actuel. Savoir comment les couleurs interagissent les unes avec les autres va vraiment aider vos applications et vos sites Web à montrer un peu plus d'harmonie et de cohésion..
Alors vient maintenant la partie amusante. Avec la théorie générale, comment savoir quelle couleur convient le mieux à votre application? Les couleurs peuvent avoir des effets différents sur les personnes et peuvent même avoir différentes significations culturelles au-delà de ce qui peut être naturellement intuitif. On sait que le rouge augmente la circulation sanguine et stimule notre corps et notre esprit. Pour ces raisons, il est donc souvent associé au sexe et à l'amour. Orange a été connu pour augmenter l'énergie globale. Le bleu peut être utilisé pour traiter la douleur et est connu comme un stimulant et peut souvent être attribué à l'insomnie. N'oubliez pas cela la prochaine fois que vous regarderez cette petite lumière bleue sur votre téléviseur!
Savoir comment les gens réagissent aux couleurs par nature peut être une information importante à conserver dans votre poche arrière. L'association des couleurs et la psychologie des couleurs vont de pair, et les deux méritent une recherche indépendante supplémentaire pour le concepteur sérieux.
Http://colorapi.com est un site que vous devriez apprécier et qui va accélérer les décisions de conception d’association de couleurs. Recherchez un mot, par exemple, pain, et vous obtiendrez une tonne d'options de couleur pour l'application de boulangerie sur laquelle vous travaillez. Prendre plaisir!
Je suis un grand partisan de l'accessibilité et la couleur joue un rôle majeur dans l'accessibilité globale des sites Web et des applications mobiles. En fournissant suffisamment de contraste entre la couleur d'arrière-plan et les éléments de page, vous garantissez que tout le monde pourra profiter de vos applications comme vous le souhaitez..
Pour voir à quoi votre site ou votre application Web ressemble aux malvoyants, visitez http://colorfilter.wickline.org/.
Voici quelques applications qui ont bien fonctionné. Examinez le site Web que vous verriez lors d’une visite à partir d’un ordinateur de bureau et comparez-le à celui de l’application mobile. Les deux ont une apparence, une sensation et une palette de couleurs cohérentes. La continuité entre site Web et application Web est tout aussi importante que la palette de couleurs (mais cette discussion est pour une autre fois).
L’utilisation d’une couleur bleue confère au site un site agréable et reposant. Pas cool comme dans l'argot de surfeur, mais froid comme la température, ainsi l'application du thermomètre. Fonctionne bien.
J'aime celui la. Cellar réalise un bel effet en utilisant des bruns pour donner au site et à l'application une sensation naturelle et réconfortante. Comme une vraie cave à vin avec éventuellement un sol en terre battue, des étagères et des murs en bois, le choix était évident ici..
À l'instar de l'application pour thermomètre, la version mobile de arctic.ru donne un joli look cool avec les blancs, les bleus et les gris. Représenter des couleurs froides sur un site avec des ours polaires est toujours une bonne idée. Inversement, un site pour Las Vegas ou l’Arizona ou des climats tropicaux chauds aurait plus de succès en utilisant des couleurs chaudes comme les rouges, les oranges et les jaunes..
La prochaine fois que nous rentrerons dans Photoshop, nous apprendrons à créer des formes et des boutons de base. Restez à l'écoute!
Accentsconagua