() translation by (you can also view the original English article)
Ich erinnere mich noch lebhaft an einen meiner frühesten Kunstkurse, als ich als kleines, eifriges Kind eine Reihe von leuchtend bunten Farben bekam. Ich erinnere mich an die Freude, Primäre Farben zum ersten Mal in Sekundärfarben mischen zu sehen, und ich folgerte, dass, wenn zwei Farben eine schöne neue Farbe ergeben, alle Farben zusammen etwas noch besser machen müssen! Es war absolut enttäuschend zu realisieren, dass ich, egal wie ich es gemacht habe, mit allen Farben, die mir zur Verfügung standen, unweigerlich zu einer kackigen Farbe kam, die man nur "BLECH" nennen kann.
Jahre später, als junger Webdesigner, erlebte ich immer wieder den gleichen Prozess. Während ich lernte, fiel ich in die unvermeidliche Falle, zu viele Farben zu verwenden oder sie auf die falsche Art zu kombinieren, nur um dann mit etwas "BLECH" zu enden.
Ich habe versucht, zu lernen, wie man Farbschemata für das Web erstellt, und ich habe eine Menge faszinierender Informationen über die Farbtheorie gefunden. Ich lese über Farbtöne, Farbtöne, Schattierungen, Töne, Sättigung und Helligkeit sowie über analoge, monochromatische, Dreiklangs-, Komplementär- und Mischfarben.
Aber ohne einen praktischen Rahmen, in den ich diese Informationen einbringen könnte, stellte ich fest, dass es mir zunächst nicht viel näher kam, gut gestaltetes Website-Design zu erstellen. In der Tat war es erst, nachdem ich begonnen hatte, durch reines Ausprobieren feste Farbschemata zu erstellen, dass alle Farbtheorien, die ich gelesen hatte, Sinn ergaben.
Dabei habe ich mir einige "Sicherheitsrichtlinien" für Farbschemas von Websites angeschaut, von denen ich mir gewünscht hätte, dass ich sie am Anfang kannte. Wenn Sie anfangen, ist die Vollfarbtheorie nicht unbedingt das, was Sie im Voraus brauchen. Oft muss man den Ball mit etwas weniger theoretischem und etwas mehr "Malen nach Zahlen" ins Rollen bringen.
In diesem Tutorial zeige ich Ihnen sechs sichere, "nicht irreführende" Richtlinien, die Sie befolgen können, um ein grundlegendes Verständnis für die Arbeit mit Farbe im Webdesign zu erhalten. Dies sind keine Regeln, da Sie in Ihrer Karriere viele Farbschemata erstellen, die in eine völlig andere Richtung gehen. Sie sind vielmehr ein Ausgangspunkt, ein Sicherheitsleitfaden, um Ihre ersten Ausflüge in der Webdesign-Welt zu überleben, ohne jemals auf "BLECH" zu stoßen.
1. Farbschema ist das Canvas, nicht das Gemälde
Eines der grundlegendsten Prinzipien im Webdesign ist, dass es egal ist, wie viel Zeit du damit verbringst, ein glorreiches Design zu kreieren. Seine ultimative Rolle ist es, die zweite Geige hinter dem echten Star der Show zu spielen. der Inhalt. Ihr Farbschema sollte das Website-Design niemals "lauter" machen als den Inhalt, den es präsentiert. Ihr Design sollte im Hintergrund liegen und den Inhalt der Website in den Vordergrund rücken.
Ein sehr verbreiteter Prozess im Webdesign besteht darin, das Design selbst relativ isoliert zu erstellen, oft in Software wie Photoshop oder Sketch. Wenn Sie keinen Beispielinhalt haben, kann es leicht sein, mit einem Design zu enden, das für sich selbst großartig aussehen könnte und das ein Kunde in der Mock-up-Form lieben mag, was aber in der Praxis für Besucher der Website zu ablenkend ist. In der Tat ist der Web-Design-Prozess so eng mit Inhalten verbunden, dass viele qualitativ hochwertige Web-Designs alles andere als leer erscheinen, ohne Inhalt an Ort und Stelle.
Es ist eine gute Idee, zunächst ein Muster des Inhaltstyps zu erstellen, der auf der Website erscheinen soll, entweder in Design-Software oder direkt in Code, und dann um ihn herum zu gestalten. Dies ist insbesondere dann der Fall, wenn Fotos oder Bilder eines bestimmten Stils einbezogen werden sollen. So können Sie sicherstellen, dass Ihr Design harmonisch mit ihnen zusammenpasst. Stellen Sie sich vor, dass der Inhalt der Website eine einzigartige Person ist, für die Sie einen perfekt passenden Anzug maßschneidern müssen.
2. Beginnen Sie mit einer einfachen Graustufenbasis
Es gibt unendlich viele Farbkombinationen, die Sie für Ihren Haupthintergrund und Ihre Textbasis auswählen können. Allerdings empfehle ich, mit dem einfachsten zu beginnen, und das ist im Hintergrund Weiß und / oder Hellgrau mit dunkelgrauem Text.
Wenn Sie sich eine Auswahl an beliebten Websites, Vorlagen oder Themen ansehen, ist es gut, dass die Mehrheit von ihnen genau diese Basis dunkelgrauen Textes auf weiß oder hellgrau hat, und das aus gutem Grund. Mit dieser Kombination können Sie praktisch die Lesbarkeit für Besucher gewährleisten und den text- und bildbasierten Inhalt in den Vordergrund rücken.
Mit einigen Beispielinhalten erstellen Sie ein einfaches Graustufenlayout, zum Beispiel:
Generell sollten Sie es vermeiden, tiefschwarz für Text zu verwenden, da Dunkelgrau etwas leichter zu lesen ist. Eine komfortable Auswahl ist überall zwischen #333333 und #666666.
Für Ihre Hintergrundfarben ist volles weißes #FFFFFF die sicherste Wette für Hintergründe direkt hinter einem Haupttext. Für andere Hintergrundelemente können Sie von #FFFFFF bis #CCCCCC gehen.
Auch dies sind keine Regeln für Farben, die Sie verwenden müssen, sondern nur Richtlinien, von denen Sie wissen, dass Sie mit Sicherheit anfangen können.
3. Wählen Sie Nur eine Farbe zum Hervorheben
Die am häufigsten verwendeten Farbschemata sind falsch, wenn verschiedene Farben gemischt werden. Je mehr Farben Sie verwenden, desto schwieriger wird es, sie unter Kontrolle zu halten. Fügen Sie also zunächst eine zusätzliche Farbe auf Ihrer Graustufenbasis hinzu, die zum Hervorheben von Dingen wie Links, Überschriften, Menüs, Schaltflächen usw. verwendet wird. Ihre Highlight-Farbe kann blau, grün, rot oder was auch immer Sie möchten.
Wählen Sie Ihre Highlight-Farbe, indem Sie zuerst eine Box über Ihrer Basis auslegen, um zu sehen, wie Ihre Farbe in Bezug auf alle Elemente aussieht. Öffnen Sie dann Ihren Farbwähler und klicken Sie in die Mitte des oberen rechten Viertels der Farbkarte.
Bewegen Sie den Schieberegler nach oben und unten und wählen Sie eine Farbe aus, von der Sie denken, dass sie für Ihr Design gut funktioniert.
An diesem Punkt arbeiten Sie jetzt mit drei Grundfarben; Ihr Hintergrund, Text und ein Highlight. Sie können und sollten in Zukunft mehr als eine Highlight-Farbe verwenden, aber denken Sie zunächst daran wie Jonglieren. Du arbeitest bereits mit drei Jongleur-Pins, also triff dich mit diesen drei und füge dann mehr in die Rotation ein, wenn du selbstsicher bist.
Du hast gerade gelernt:
Du hast gerade gelernt, wie man einen "hue" auswählt. Kurz gesagt, ein Farbton ist eine Grundfarbe. Wenn Sie den Schieberegler nach oben und unten bewegen, wird der Wert "H" in der Farbauswahl angezeigt.
"H" steht für Farbton, und sobald Sie Ihre Highlight-Farbe ausgewählt haben, ist die Zahl in diesem Feld der Farbton.
4. Wenn Sie Zweifel haben, verwenden Sie Blau
Wenn Sie überhaupt Zweifel haben, welche Hervorhebungsfarbe verwendet werden soll, wählen Sie Blau. Ernst. Blau ist oft die flexibelste Farbe, mit der gearbeitet werden kann und passt zu den meisten Arten von Websites. Farben wie Purpur und Gelb können sehr angenehm sein, können aber bei falscher Verwendung schnell grell werden.
Auf der anderen Seite können Sie fast alles mit Blau als Highlight-Farbe tun, und Sie können nicht zu weit falsch gehen. Wenn Sie nicht sicher sind, wo Sie mit dem Lernen beginnen oder welche Farbe Sie in einem Projekt verwenden sollen, greifen Sie einfach auf Blau zurück. Das besondere Blau, das du wählst, kann von einem Marineblau (Farbton 235) bis zu einem Aqua (Farbton 190) reichen und du bist in ziemlich sicherem Gebiet.
Für mein Beispiellayout habe ich einen Farbton von 205 gewählt. Wenn Sie sich für Ihre Highlight-Farbe entschieden haben, können Sie sie Ihrem Design hinzufügen, wo immer Sie es für erforderlich halten. Wenn Sie die Hervorhebungsfarbe auf Schaltflächen oder einem Bereich mit Text darüber verwenden, ändern Sie auch die Textfarbe. In diesem Fall habe ich den Text über die markierten Bereiche in Weiß geändert.
5. Fügen Sie Variationen zu Ihrer Highlight-Farbe hinzu
Sobald Sie Ihre Highlight-Farbe ausgewählt haben, lassen Sie den Schieberegler (Farbton), wo es von diesem Punkt an ist. Sie werden zusätzliche Farben für Ihr Design benötigen, aber sie werden alle Varianten dieser einen Highlight-Farbe sein, die Sie bereits gewählt haben, um die Dinge einfach zu halten.
Um Farbvariationen zu erzeugen, ziehen Sie im Kartenbereich des Farbwählers herum.
Verwenden Sie diese Arten von Farbvariationen für Dinge wie:
Schwebeflug-Effekte
Grenzen
Subtler Text über Highlight-Farbe
Farbverläufe
Licht- und Schatteneffekte
6. Bleiben Sie aus der oberen rechten Ecke
Die obere rechte Ecke der Farbkarte ist das Land der Farben mit hoher Oktanzahl. Farben in der oberen rechten Ecke sind wie Formel-1-Rennwagen; Sie können erstaunlich gut funktionieren und sind sehr verlockend, aber im Allgemeinen braucht es viel Erfahrung, um sie gut zu nutzen. Ohne diese Erfahrung können sie Unfälle verursachen, deshalb ist es am besten, die Zähne mit abgeschwächten Farben zu schneiden.
Deshalb habe ich Sie im dritten Abschnitt dieses Tutorials gebeten, auf die Farbkarte in der Mitte der oberen rechten Ecke zu klicken, bevor Sie Ihre Highlight-Farbe auswählen, um sicherzustellen, dass Sie mit einer relativ gedämpften Farbe starten.
Schau mal, was passiert, wenn ich nur den Farbton unseres Designs ändere, ohne die Farbkarte zu berühren.
Es sieht immer noch ziemlich gut aus, oder? Wenn ich jedoch die Farbkarte in die obere rechte Ecke ziehe, ist es plötzlich nicht so schön.
Aua, meine Augen!! Wenn Sie sicherstellen möchten, dass Sie die Netzhaut Ihrer Besucher nicht versengen, befolgen Sie eine allgemeine Richtlinie, indem Sie sich von der oberen rechten Ecke der Farbkarte fernhalten.
Du hast gerade gelernt:
In den letzten beiden Abschnitten haben Sie gelernt, einige verschiedene Aspekte der Farbtheorie anzuwenden. Du hast gelernt mit zu arbeiten:
Sättigung und Helligkeit.
Wenn Sie durch den Kartenbereich des Farbauswahlbereichs ziehen, werden die Werte für "S" und "B" angezeigt, die jeweils für "Sättigung" und "Helligkeit" stehen. Sie sehen auch, dass die Farbtonnummer gleich bleibt. Sie erstellen also Farbvariationen, indem Sie die Sättigung und Helligkeit Ihres ursprünglichen Farbtons ändern.
Sättigung und Tönung
Sättigung ist, wie lebendig Ihre Farbe ausgedrückt wird. Denken Sie zum Beispiel "Mein Hemd war mit verschüttetem Rotwein getränkt". Bei einer typischen Farbauswahl hängt die Sättigung davon ab, wie viel Weiß mit dem Grundton gemischt ist. Je weniger weiß, desto gesättigter.
Wenn Sie auf der Farbkarte nach rechts ziehen, reduzieren Sie die Menge an Weiß und erhöhen somit die Sättigung, so dass der "S" -Wert steigt. Wenn Sie nach links in Richtung der weißen Ecke ziehen, verringern Sie die Sättigung, so dass der "S" -Wert sinkt.
Dieses Mischen von Weiß mit Ihrem ursprünglichen Farbton wird auch als "tint" bezeichnet. Der Begriff kommt von der Farbmischung, wo eine weiße Farbe mit einer farbigen Farbe gemischt wird.
Helligkeit und Schattierungen
Die Helligkeit gibt an, wie viel Schwarz in Ihrer Farbe enthalten ist. Je weniger schwarz, desto mehr Helligkeit.
Wenn Sie auf der Karte nach oben ziehen, reduzieren Sie die Schwarzmenge, erhöhen die Helligkeit und der "B" -Wert des Farbwählers wird erhöht. Wenn Sie nach unten ziehen, erhöhen Sie das Schwarz und der "B" -Wert steigt.
Das Mischen von Schwarz mit Ihrem ursprünglichen Farbton wird auch als "shade" bezeichnet. Dies kommt auch aus der Farbmischung, wo eine schwarze Farbe mit einer farbigen Farbe gemischt wird.
Töne
Wenn Sie Grau in Ihre Farbe mischen, wird dies als "tone" bezeichnet. Wenn Sie sich wie oben von der oberen rechten Ecke entfernen, verringern Sie sowohl die Sättigung als auch die Helligkeit, wodurch sowohl Weiß als auch Schwarz (Grau) hinzugefügt wird und somit ein Ton entsteht. Also, zu jeder Zeit sowohl Ihre Sättigung als auch Ihre Helligkeit sind weniger als 100%, das ist ein Ton.
Wiederum kommt dieser Begriff aus der Farbmischung, wo eine graue Farbe erzeugt und dann mit einer farbigen Farbe gemischt wird. Hier kommt auch der Ausdruck "Dinge niederschlagen". Cool was?
Monochromatische Farbschemata
In einem "monochromatischen" Farbschema nehmen Sie einen Grundton und erweitern ihn um Farbtöne, Schattierungen und Töne. Sie haben gerade gelernt, was all diese Begriffe in einer praktischen Umgebung bedeuten. Indem Sie also eine Highlight-Farbe auswählen und Variationen erstellen, haben Sie tatsächlich ein monochromatisches Farbschema erstellt.
Was als nächstes?
Üben Sie Ihre monochromatischen Farbschemata auf einer Graustufenbasis, bis Sie sich wirklich sicher fühlen. Versuchen Sie, sie mit verschiedenen Farbtönen als Highlight-Farbe zu erstellen und experimentieren Sie, um zu sehen, wie sie die Einstellungen für Sättigung und Helligkeit ändert, die Sie verwenden können.
Wenn Sie sich wohl fühlen, können Sie eine zusätzliche Highlight-Farbe hinzufügen. Ich empfehle, Orange und Blau in Ihrem ersten Ausflug zu versuchen, da sie dazu neigen, das einfachste Duo zu sein, mit dem Sie arbeiten können. Dann versuche Grün und Blau, was meiner Erfahrung nach am einfachsten ist. Beide Kombinationen sind ein Hit bei Kunden und Kunden.
Das Beste, was Sie tun können, um Ihr Verständnis der Farbschemata für das Web zu verbessern, ist, sich eine Farb-Sampler-Browsererweiterung wie Colorzilla zu schnappen und damit zu beginnen, zu untersuchen, wie erfahrene Designer es tun. Wenn Sie im Internet surfen, wenn Sie ein Farbschema sehen, das gut aussieht, brechen Sie den Farb-Sampler aus und schauen Sie sich die Farben auf der Seite an. Stellen Sie für jeden Farbton, den Sie probieren, fest, welche Sättigungs- und Helligkeitsstufen damit am besten funktionieren. Achten Sie auch darauf, welche Farben in Kombination mit anderen funktionieren.
Im Zweifelsfall können Sie immer auf Ihre "Safety first" -Richtlinien zurückgreifen und von nun an vor der "BLECH" sicher sein.
