Rot, Weiß und Blau – Sprungbrett

Mensch-computer-Interaktionen sind stark basierende grafische UI-Elemente und Farbe spielt eine entscheidende Rolle. Wie Pierre Bonnard, der einst sagte:, Wenn Sie entwerfen ein neues Produkt, ist es oft schwierig zu entscheiden…
wie, um die Farbe rot

Acht Regeln über Farbpaletten, die jeder (auch nicht-Designer) wissen sollten

Mensch-computer-Interaktionen sind stark basierende grafische UI-Elemente und Farbe spielt eine entscheidende Rolle. Wie Pierre Bonnard, der einst sagte:

Farbe nicht fügen Sie eine gute Qualität zu design — es verstärkt es.

Bei der Entwicklung eines neuen Produkts, ist es oft schwierig zu entscheiden, das Farbschema, das wegen der unendlichen Anzahl der möglichen Farbkombinationen. In diesem Artikel werden wir decken acht grundlegende Regeln, die Ihnen helfen können wählen Sie die richtige Farbpalette.

1. Begrenzen Sie die Anzahl der Farben

Anwenden von Farbe, um ein design-Projekt, hat viel zu tun mit balance. Je mehr Farben Sie verwenden, desto schwieriger ist es zu erreichen Gleichgewicht. Erhalten Sie bessere Ergebnisse, wenn Sie den stick zu einem maximum von 3 primären Farben in Ihrem Farbschema. Laut einer University of Toronto Studie, wie Menschen mit Adobe Color CC, die meisten Leute sagten, Sie bevorzugten einfache Farbkombinationen, die sich auf nur zwei oder drei Farben.

Wenn Sie zusätzliche Farben über die Sie definiert haben, in der palette, stellen Sie die Verwendung von Schattierungen und Tönungen.

Wie ein Schema Erstellen

So, wie Sie wählen, die zwei oder drei Farben? Das Farbrad kann Ihnen helfen.

Es gibt eine Reihe von vordefinierten Farbschema standards, die Schaffung neuer Regelungen einfacher, vor allem für Anfänger:

    Monochromatisch. Monochromatische Systeme sind die einfachsten zu erstellen, da Sie alle von der gleichen Farbe, aber Variationen in der Farbtöne, Schattierungen und Töne. Monochromen Farben passen gut zusammen, produzieren eine beruhigende Wirkung.

  • Analog. Analoge Farbschemata erstellt werden Verwandte Farben; eine Farbe wird als eine dominante Farbe, während andere verwendet werden, um bereichern das System. Dies ist zwar relativ leicht zu ziehen aus, der trick ist, bei der Entscheidung über die Lebendigkeit der Farben, die Sie verwenden, als das gesamte System wird übertrieben. Zum Beispiel, Klar, eine Geste-driven to-do-app, verwendet die markante analogen Farben visuell priorisieren Sie Ihre aktuellen Aufgaben. Während Ruhig, eine Meditations-app, verwendet die analogen Farben blau und grün, um Benutzern zu helfen, fühlen sich entspannt und friedlich.

  • Komplementäre. In Ihrer elementarsten form sind diese Systeme bestehen aus nur zwei Farben, der Kontrast stark. Dieses Schema wird verwendet, um zu locken die Zuschauer Aufmerksamkeit. Bei Verwendung einer ergänzenden Regelung, ist es wichtig, wählen Sie eine dominante Farbe und seine komplementäre Farbe für Akzente. Zum Beispiel, wenn das menschliche Auge sieht ein Objekt, voll von verschiedenen Arten von grün, ein bisschen rot wird, stehen sehr gut.
  • Custom. Erstellen eines benutzerdefinierten Farbschemas nicht so kompliziert wie viele Leute denken. Es gibt einen einfachen trick, die Sie verwenden können, um großartige Farbpalette: Einfach fügen Sie einen hellen Akzent-Farbe in einer ansonsten neutralen Farbpalette (z.B. eine traditionelle monochromatische Schema). Die neu erstellte Schema wird eine, die ist optisch sehr Auffällig.

2. Von der Natur Inspiriert werden

Die besten Farbkombinationen aus der Natur stammen. Warum? Da diese Regelungen scheinen, natürlich, das Auge. Um sich inspirieren zu lassen, brauchen wir nur einen Blick um uns herum. Wenn Sie eine besonders schöne oder auffallende Farbe in Ihrem täglichen Leben, versuchen Sie, erstellen ein Schema, um es. Nehmen Sie einfach ein Bild von einem schönen moment aus und erstellen Sie Ihr Farbschema aus.

3. Versuchen Sie zu Folgen, 60-30-10-Regel

Dies ist eine zeitlose Dekoration Regel, dass kann Ihnen helfen, ein Farbschema, das einfach zusammen. Die 60% + 30% + 10% – Anteil ist gedacht, um das Gleichgewicht zu geben, um die Farben in jeden Raum.

Dieses Konzept ist unglaublich einfach zu verwenden: 60% ist Ihre dominierende Farbton, die 30% ist die sekundäre Farbe und 10% ist die Akzentfarbe. Die Idee ist, dass die sekundäre Farbe unterstützt die Haupt-Farbe, aber es ist anders genug, um Sie auseinander zu halten. Ihre 10% ist Ihr Akzent Farbe. Es kann eine Farbe für die CTA-oder ein anderes element, das Sie wollen spotlight.

4. Design in Graustufen Ersten

Das Spiel mit Farbe macht Spaß. Das ist, warum die Wahl eines Farbschema ist eines der ersten Dinge, die wir tun, in neue Projekte. Es ist wirklich verlockend, zu führen, mit einem Farbschema, aber ich empfehlen, anstatt zwingen, sich selbst zu design in Graustufen ersten. Bauen einen Prototyp für Ihre app in einem graustufenverlauf, und verwenden Sie diese als Ihre Grundlinie. Gestaltung in Graustufen, bevor Sie das hinzufügen von Farbe, zwingt Sie, sich zu konzentrieren, über Abstände und Layout-Elemente.

Farbe hinzufügen, Letzte, und selbst dann nur mit einem Zweck.

5. Vermeiden Sie die Verwendung der Farbe Schwarz

Im wirklichen Leben, reines schwarz ist fast nie vorhanden ist. Alle „schwarzen“ Objekte, die uns umgeben, haben eine gewisse Menge von Licht abprallen von Ihnen, das heißt, Sie sind nicht wirklich schwarz, Sie sind dunkel-Grau. Straßen sind nicht schwarz. Schatten sind nicht schwarz.

Wenn Sie rein schwarz neben einer Reihe von sorgfältig ausgesucht Farben, die schwarz überdeckt alles andere. Es sticht heraus , weil es nicht natürlich ist. Viele der apps, die wir täglich verwenden, haben schwarze, die sind nicht wirklich schwarz, sondern dunkle Grautöne statt. Zum Beispiel, die dunkelste Farbe auf Asos top bar ist nicht #000000, es ist #242424. Also, immer daran denken, fügen Sie ein wenig Sättigung Ihrer Farbe.

6. Satz Bedeutung Mit Farbkontrast

Farbe ist ein Werkzeug, das helfen kann, führt das Auge. Umso mehr wollen Sie etwas heraus zu stehen, desto mehr sollten Sie sich auf kontrastierenden Farben. Im Allgemeinen, hohen Kontrast ist die beste Wahl für wichtige Inhalte oder die Schlüssel-Elemente. Wenn Sie möchten, dass Benutzer zu sehen, oder klicken Sie auf etwas, heben es heraus!

7. Verwenden Sie Farben, um Anwender Auswirken Emotionen

Es ist eine bekannte Tatsache, dass Farben inhärenten Bedeutungen und provozieren Emotionen. Diese Bedeutungen haben einen direkten Einfluss auf die Art und Weise Ihre Nutzer wahrnehmen, Ihr Produkt.

Wenn Sie die Wahl einer Farbpalette für Ihre app/Website, Sie können nicht nur denken darüber, wie die Dinge Aussehen — Sie haben zu denken, wie Sie fühlen Sie auch. Die Farben, die Sie wählen können, entweder für oder gegen die Marke, die Identität, die Sie versuchen zu erstellen. Um Ihnen den Einstieg, das ich zusammengestellt habe ein „quick reference guide“, deckt die grundlegenden Assoziationen, die mit jeder Farbe (in der westlichen Welt).

Rot, Orange, Gelb

  • Rot (Leidenschaftlich, Kraftvoll, Gefährlich, Wichtig): Rot ist eine sehr anregende Farbe. Es vermittelt den Eindruck von Geschwindigkeit und power. Es ist bekannt als die Farbe der Energie. Es hat sich bewährt, physiologische Effekte der Erhöhung der Durchblutung und Steigerung der Stoffwechsel. Das ist, warum, wenn Leute rot sehen, die Sie Lesen, stärker und schneller. Mit rot ist ein Weg, um schnappen Sie sich die Aufmerksamkeit der Benutzer oder markieren Sie ein einzelnes element, das Aufmerksamkeit erfordert.
  • Orange (Spielerisch, Energisch, Attraktiv, Billig): Orange ist eine warme und lebendige Farbe. Es hat eine energetische aura und ist in der Lage, schaffen eine warme einladende Atmosphäre für Ihre Benutzer. Einige Forscher finden, dass orange bezeichnet die Billigkeit.
  • Gelb (Fröhlich, Freundlich, Anregend, Aufmerksamkeit Suchende): Gelb ist eine extrem vielseitige Farbe, die je nach die Schatten, die Sie wählen. Licht gelb wird mit der Sonne verbunden ist und damit kommuniziert, Positivität und Wärme. Dunklen Schattierungen von gelb (gold) geben den Eindruck von Antike und Alter. Diese dunklere Farbtöne werden oft im Zusammenhang mit der Zeitlosigkeit und Weisheit.

Grün, Blau, Lila

  • Grün (natürlich, Sicher, Frisch): Grüner spiegelt ein Gefühl der Umweltschutz und die Nähe zur Natur. Es bedeutet auch Wachstum, und das ist, warum es oft im Zusammenhang mit business. Grün bedeutet, ein Gefühl von richtig oder falsch.
  • Blau (Beruhigend, Verantwortlich, Vertrauenswürdig, Zuverlässig): Die Farbe blau ist oft verbunden mit Ruhe und Entspannung Emotionen. Es ist auch verbunden mit Stärke und Zuverlässigkeit, und ein Gefühl von Vertrauen und Professionalität. Blau strahlt Gefühle der inneren Sicherheit. Das ist, warum Sie sehen können Banken und Technologie-Unternehmen mit der Farbe. Social-media-Giganten wie Facebook, Twitter und LinkedIn-alle nutzen die Farbe blau, die in Ihren Netzwerken.
  • Lila (Luxuriös, Geheimnisvoll, Romantisch, Spiritualität): Vergangenheit im Zusammenhang mit Lizenzgebühren, lila unterstellt, dass ein Produkt ist high-end.

Pink, Schwarz, Weiß, Grau

  • Rosa (Weiblichkeit, Unschuld, Jugend): Pink ist am meisten bekannt für seine Assoziationen mit Weiblichkeit.
  • Schwarz (Mächtige, Anspruchsvolle, Geheimnisvoll, Unruhig): Schwarz zieht die Aufmerksamkeit schneller als andere Farben, einschließlich rot. Das ist, warum es ist die am häufigsten verwendet für text und Akzenten.
  • Weiß (Reinheit, Gesundheit, Sauberkeit, Unschuldig): Weiße Akzente andere Farben um ihn herum, so dass es eine beliebte Wahl für eine sekundäre Farbe.
  • Grau (Neutral, Formal, Eleganz, Sterilität): Grau steht für Neutralität, es kann auf die Merkmale entweder schwarz oder weiß. Bei Verwendung als eine primäre Farbe, es vermittelt den Eindruck von Formalität.

Es ist wichtig zu erwähnen, dass die Bedeutung der Farben kann variieren je nach Kultur und Umständen. Für weitere Informationen, schauen Sie sich die Artikel Symbolik Von Farben Und Farb-Bedeutungen Rund um Die Welt.

8. Machen Sie Ihr Design Zugänglich

Barrierefreiheit ist eine wichtige überlegung bei der Gestaltung mit Farbe. Heutige Produkte müssen für alle zugänglich sein — unabhängig von einer person Fähigkeiten.

Vermeiden Sie die Verwendung von Farbe Allein Als Indikator

Etwa 8% der Männer und 0,5% der Frauen betroffen sind, durch irgendeine form von Farbenblindheit. Dass die 1 in 12 Männer und 1 200 Frauen. Zwar gibt es mehrere Formen der Erkrankung, rot/grün-Blindheit ist am häufigsten. Eine person leidet unter dieser form der Farbenblindheit wird in der Regel Schwierigkeiten haben, zu sehen, Variationen von rot und grün.

Da colorblindness nimmt unterschiedliche Formen (einschließlich rot-grün, blau-gelb, Monochrom), ist es wichtig, dass Sie mehrere visuelle Hinweise, um zu kommunizieren wichtige Staaten in Ihrem Produkt. Zusätzlich zu Farbe, verwenden Sie Elemente wie Striche, Indikatoren, Muster, textur oder text, um zu beschreiben, Aktionen und Inhalte.

Vermeiden Niedrigen Kontrast Für Text

Farbkontrast ist ein Bereich, in dem Farbe Theorie ist von entscheidender Bedeutung, um die Nutzbarkeit des design. Wenn Sie die Verwendung von Farben in text, bewusst sein, dass, wenn man zwei Farben mit niedrigem Wert hingegen neben einander, können Sie Ihre Kopie sehr schwer zu Lesen.

Überprüfen Sie, Kontraste,, um sicherzustellen, dass hintergrund und Vordergrund Farben mit ausreichend Kontrast, um eine Farbe blinde person oder eine Person mit geringem Sehvermögen. Es ist wirklich nicht so schwer — alles, was Sie tun müssen, ist zu prüfen, Kontrast-Verhältnis. Kontrastverhältnis darstellen, wie unterschiedlich eine Farbe von einer anderen Farbe (üblicherweise geschrieben als 1:1 oder 21:1). Je höher die Differenz zwischen den beiden zahlen in das Verhältnis, desto größer der Unterschied in relativer Luminanz zwischen den Farben. Das W3C empfiehlt die folgenden Kontrastverhältnis für text-und Bild-text:

  • Kleine text soll haben ein Kontrastverhältnis von mindestens 4.5:1 gegen seinen hintergrund.
  • Großer text (in 14 pt Fett/18 pt regular) sollte ein Kontrastverhältnis von mindestens 3:1 gegen seinen hintergrund.

Gute Nachrichten, die Sie nicht haben, um es zu überprüfen manuell. Mit dem tool Color Contrast Checker können Sie überprüfen Sie Ihre Farb-Kombinationen in nur wenigen Klicks.

Bonus: Essential Tools für UX Designer

Dinge einfacher zu machen, werde ich auch bieten einige der besten Werkzeuge für die Auswahl von Farbpaletten.

Adobe Color CC

Adobe Color CC (ehemals Kuler) ist ein großes Werkzeug für das Auffinden, modifizieren und erstellen von Farbschemata. Jede Farbe auf der palette individuell angepasst werden können, oder ausgewählt wie die Grundfarbe, mit ein paar einfachen Klicks. Farbpaletten können gespeichert werden und einer Bibliothek Hinzugefügt, und es gibt eine Reihe von großen Farbschemata erstellt von Gemeinschaft auf der Website zur Verfügung:

Dribbble Search-by-color

Wenn Sie wollen visual Forschung über die Verwendung einer bestimmten Farbe, die von anderen Designern, gehen Sie zu dribbble.com/colors und wählen Sie die gewünschte Farbe.

Material Design

Material-design-Richtlinien bieten eine fantastische Farbpalette, die verwendet werden kann für die Abbildung oder entwickeln Sie Ihre Marke-Farben. Alle Farben in dieser palette sind entworfen, um harmonisch mit einander.

Colorzilla

ColorZilla ist eine Erweiterung für Google Chrome und Mozilla Firefox, umfasst eine Reihe von Farbe-bezogene tools, darunter ein color picker, eine Pipette, einen CSS-gradient-generator, und eine palette browser.

Coolors.co

Coolors ist ein leistungsfähiges tool zum erstellen von bunten Schemen. Sie können einfach sperren Sie die ausgewählte Farbe ein, und drücken Sie die Leertaste zum generieren von neuen palette. Das tolle an diesem tool ist, dass Sie nicht beschränkt auf nur ein Ergebnis — es ist möglich, erhalten ein paar Farbschemata einfach durch ändern der Referenz.

Einer meiner persönlichen Lieblings-Möglichkeiten zum erstellen eines Farbschemas ist die Verwendung von einem Foto. Dieses tool macht es möglich, ein Bild hochladen und machen Sie eine Farbpalette aus.

Farbe Blindheit Simulation in Adobe Photoshop

Mit Photoshop, können Sie testen Sie die Erreichbarkeit Ihres Designs. Gehen Sie einfach auf Ansicht > Proof Einrichten“, und dann können Sie wählen zwischen zwei Arten (Protanopie oder Deuteranopie-Typ).

NoCoffee Vision Simulator für Chrome

Um zu verhindern, dass Fragen der Zugänglichkeit in der design, ist es eine gute Idee, um Erfahrung Farbenblindheit sich während der Gestaltung. NoCoffee Vision Simulator kann verwendet werden, um zu simulieren, Farbe vision Mängel und low-vision-Bedingungen auf jeden pager. Zum Beispiel mit dem „Color Deficiency“ Einstellung „Deuteranopie“ können Sie das anzeigen von Webseiten in Graustufen. Dies wird Ihnen helfen, Ihr design zugänglich für Benutzer mit visuellen Einschränkungen.

Farbe ist eines der mächtigsten Werkzeuge in einem designer ‚ s toolkit. Aber zur gleichen Zeit, es ist ein heikles Instrument zu beherrschen. Ich hoffe, dass die obigen Regeln legen ein gutes Fundament für zukünftige Designer. Jetzt ist es Zeit, sich zu üben, denn der beste Weg, um groß werden zu Farbschemata zu erstellen.

Sind Farbschemata Ihre Marmelade? Tun Sie Aussenseiter, die sich über usability-Tests und user research? Einschreiben in Sprungbrett die Einführung in die UX Design natürlich. Tausende von Studierenden haben es verwendet, um zu starten, sich in erfolgreiche design-Karriere.

Like this post? Please share to your friends:
Schreibe einen Kommentar

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: