Einführung in die Farbtheorie

Nun, wenn Sie die ersten fünf Artikel dieser Serie gelesen haben, fragen Sie sich vielleicht: "In welcher Beziehung steht das alles zu Mobile Design?" Der Zweck dieser einführenden Serie besteht darin, dass Sie Ihrem mobilen Design-Arsenal einige neue Werkzeuge und Ideen hinzufügen. Dieser Artikel ist nicht anders. Farben können Ihre Anwendung professionell und schön aussehen lassen, aber auf der anderen Seite können sie auch so aussehen, als würde Ihre App von meinem fünfjährigen Neffen erstellt.

Es ist nicht meine Absicht, Sie in diesem Kurs zu einem professionellen Designer zu machen, aber wenn Sie die Grundlagen der Farbtheorie kennen, kann dies wirklich dazu beitragen, Ihre Apps auf die nächste Stufe zu bringen, selbst wenn Sie die gesamte App-Oberfläche in Code erstellen möchten.

Wenn es um das Verständnis der Farbtheorie geht, ist der einfachste Weg, den ich für Sie erklären könnte.

Grundfarben

Rot, Gelb, Blau. Dies sind die drei Grundfarben, die mit keiner Kombination anderer Farben erstellt werden können. Alle anderen Farben sind das Ergebnis des Mischens dieser drei Farben.

Sekundärfarben

Grün, orange, lila. Dies sind die Farben, die durch Mischen der Grundfarben entstehen.

Tertiärfarben

Gelb-orange, rot-orange, rot-lila, blau-lila, blau-grün und gelb-grün. Dies sind die Farben, die durch Mischen einer Primär- und einer Sekundärfarbe gebildet werden. Mit anderen Worten, es füllt den Rest unseres Farbkreises aus.

Analoge Farben

Alle drei Farben, die nebeneinander auf einem 12-teiligen Farbrad stehen, wie Gelb-Grün, Gelb und Gelb-Orange. Normalerweise ist eine der drei Farben die dominierende Farbe.

Komplementärfarben

In Bezug auf den Farbkreis sind Komplementärfarben zwei direkt gegenüberliegende Farben, wie Rot und Grün. Komplementärfarben sorgen für maximalen Kontrast und maximale Stabilität. Seien Sie vorsichtig, wenn Sie mit vollständig gesättigten Komplementärfarben für digitale Schnittstellen arbeiten: Sie können das Auge belasten.

Hier ist noch eines meiner kleinen Geheimnisse, auf die ich dich einlassen werde und wo ich auch die Grafiken herausgeholt habe. Dies ist eine großartige Website, die Ihnen dabei hilft, etwas Harmonie in Ihre App zu bringen.

Additive Farben

Additive Farben sind das, woraus Web, Fernsehen und mobile Geräte bestehen. In Photoshop erstellen wir alle unsere App-Screenshots, Hintergründe und Grafiken im RGB-Format. RGB steht für Rot, Grün und Blau, und diese drei sind die additiven Grundfarben. Wenn verschiedene Kombinationen dieser drei Farben gemischt werden, werden alle verbleibenden Farben erstellt. In Photoshop können Sie die RGB-Farbe verwalten, indem Sie auf die Farbpalette doppelklicken. In Photoshop können Sie die Farbe am häufigsten anpassen, indem Sie numerische RGB-Werte direkt in Textfelder eingeben oder den Farbwähler einfach über die Farbpalette ziehen.

Auf einer Skala von 0 bis 255 ändert jedes numerische Inkrement die Farbe auf subtile Weise. Nur um den Dreh raus zu haben, gibt es an den Unterschieden unten nichts Feines!

Ein RGB-Wert von 255, 255, 255 (volle Sättigung) ist das gleiche wie Weiß und zeigt auch den Hex-Wert von #ffffff.

Wenn alle RGB-Werte auf Null gesetzt sind, ist die Farbe schwarz. Dies zeigt den entsprechenden Hex-Wert # 000000.

Um ein wenig mehr hinein zu bekommen, sollten Sie in der Lage sein, vorherzusagen, welche Farbe erzeugt wird, wenn Rot auf einen Wert von 255 und Grün und Blau auf 0 gesetzt sind.

Trotzdem konnte ich einem weiteren Screenshot nicht widerstehen. Mit einem Wert von 255 im roten Punkt und 0 im grünen und blauen Bereich erhalten wir eine vollständig gesättigte rote Farbe. Grün und Blau ändern sich entsprechend, wobei die gleichen Werte geändert werden.

Als Beispiel für das, was passiert, wenn wir mit mehreren verschiedenen Werten anfangen, mit einem Wert von 255 in Rot und Grün, erstellen wir eine vollständig gesättigte gelbe Farbe mit dem Hex-Wert von # ffff00.

Indem Sie lediglich die Werte für Rot, Grün oder Blau ändern, können Sie genau die Farbe erstellen, die für das vorliegende Design erforderlich ist. Wenn Sie wissen, wie Farben miteinander interagieren, können Ihre Anwendungen und Websites ein wenig mehr Harmonie und Zusammenhalt zeigen.

Farbpsychologie

Jetzt kommt der lustige Teil. Woher wissen Sie, welche Farbe für Ihre App am besten geeignet ist? Farben können unterschiedliche Auswirkungen auf den Menschen haben und sogar andere kulturelle Bedeutungen haben, als es von Natur aus intuitiv sein kann. Es ist bekannt, dass Rot die Durchblutung erhöht und Körper und Geist stimuliert. Aus diesen Gründen wird es daher häufig mit Sex und Liebe in Verbindung gebracht. Es ist bekannt, dass Orange die Gesamtenergie erhöht. Blau kann zur Behandlung von Schmerzen verwendet werden und ist als Stimulans bekannt und kann häufig zu Schlaflosigkeit führen. Denken Sie daran, wenn Sie das nächste Mal das kleine blaue Licht auf Ihrem Fernseher anstarren!

Zu wissen, wie Menschen von Natur aus auf Farben reagieren, kann eine wichtige Information sein, die Sie in Ihrer Hosentasche aufbewahren können. Farbassoziation und Farbpsychologie gehen Hand in Hand, und beide sind eine weitere unabhängige Forschung für den seriösen Designer wert.

Http://colorapi.com ist eine Website, an der Sie Spaß haben sollten und die Farbentscheidungen beschleunigen sollte. Suchen Sie nach einem Wort, sagen Sie, Brot, und Sie werden mit einer Tonne Farboptionen für die Bäckerei-App, an der Sie gerade arbeiten, finden. Genießen!

Barrierefreiheit & Farbe

Ich bin ein großer Befürworter der Zugänglichkeit und Farbe spielt eine wichtige Rolle bei der allgemeinen Zugänglichkeit von Websites und mobilen Anwendungen. Durch ausreichenden Kontrast zwischen Hintergrundfarbe und Seitenelementen stellen Sie sicher, dass jeder Ihre Anwendungen so genießen kann, wie Sie es möchten.

Unter http://colorfilter.wickline.org/ erfahren Sie, wie Ihre Website oder Webanwendung für Sehbehinderte aussieht..

Farbe nach Beispiel

Hier sind ein paar Apps, die es richtig gemacht haben. Sehen Sie sich die Website an, die Sie beim Besuch von einem Desktop-Computer aus sehen würden, und vergleichen Sie diese mit der mobilen Anwendung. Beide haben ein einheitliches Aussehen, ein Gefühl und ein Farbschema. Die Kontinuität zwischen Website und Web-App ist genauso wichtig wie das Farbschema (diese Diskussion findet jedoch zu einem anderen Zeitpunkt statt)..

Mit einer blauen Farbe erhält die Site eine schöne, beruhigende und cool aussehende Site. Nicht cool wie im Surfer-Boy-Slang, sondern cool wie in der Temperatur, also die Thermometer-App. Funktioniert gut.

Ich mag diesen Keller erzeugt einen schönen Effekt, indem Braun verwendet wird, um dem Standort und der App ein natürliches und beruhigendes Gefühl zu verleihen. Wie ein echter Weinkeller möglicherweise mit Dreckböden und hölzernen Regalen und Wänden - braun war hier wirklich die naheliegende Wahl.

Wie die Thermometer-App bietet die mobile Version von arctic.ru einen schönen coolen Look mit Weiß, Blau und Grau. Es ist immer eine gute Idee, coole Farben auf einer Site mit Eisbären darzustellen. Umgekehrt hätte ein Standort in Las Vegas oder Arizona oder in wärmeren tropischen Klimazonen mit warmen Farben wie Rottönen, Orangen und Gelben mehr Erfolg.

Nächstes Mal?

Beim nächsten Mal werden wir uns wieder mit Photoshop beschäftigen und lernen, wie Sie grundlegende Formen und Schaltflächen erstellen. Bleib dran!