Share
Willkommen zur zehnten Lektion unserer Web Design for Kids-Serie, die sich mit Farbe befasst.
In diesem Tutorial werden wir uns mit der Farbtheorie beschäftigen, verschiedene Arten der Verwendung von Farben in unserem CSS, die Bedeutung bestimmter Farben und die Auswahl der perfekten Farben für unsere Websites. Am Ende finden Sie einige Tipps zum Verwenden von Farbe im Web.
Vergessen Sie nicht, Fragen in den Kommentaren am Ende dieser Seite zu stellen!
Farben Lehre beinhaltet viele Dinge, aber das Hauptaugenmerk liegt darauf, wie Farben sich in einem Design verhalten. Wir nennen eine Gruppe von Farben, die für die Verwendung als a ausgewählt werden Farbpalette. Eine gut gestaltete Farbpalette wird Farben haben ergänzen einander und haben gut Kontrast und Lebhaftigkeit. Wir werden gleich darüber sprechen, was diese Worte bedeuten.
Die Wahl der richtigen Farben und das Wissen, warum bestimmte Farben funktionieren und andere nicht entscheiden können, ob unser Design funktioniert oder nicht. Eine schlechte Farbauswahl kann die Verwendung unserer Website erschweren, oder der Text kann nicht gelesen werden und der Benutzer verlässt unsere Website.
Bevor wir zu weit in unser Tutorial einsteigen, wollen wir über einige grundlegende Farbterminologie sprechen, die wir viel erwähnen werden. Wir werden diese Begriffe verwenden, um besser zu verstehen, was jede Farbe so einzigartig macht.
EIN Farbton ist(mehr oder weniger) die Farbe eines Objekts. Wenn wir Dinge als „rot“ oder „gelb“ bezeichnen, sprechen wir über ihren Farbton.
Farbe Sättigung bezieht sich darauf, wie lebendig oder stark eine Farbe ist. Eine niedrige Sättigung erzeugt eine Farbe, die ausgewaschen erscheint, während eine hohe Sättigung eine sehr lebhafte Farbe erzeugt.
Helligkeit bezieht sich auf die Helligkeit oder Dunkelheit einer Farbe. Dies geht von Schwarz (keine Helligkeit) bis Weiß (volle Helligkeit)..
Das Farbrad basiert auf Rot, Gelb und Blau und ist unter Künstlern sehr bekannt. Wenn wir verstehen, wie Farben entstehen, können wir als Designer eine bessere Vorstellung davon bekommen, welche Farben verwendet werden ergänzen einander und warum.
Das linke Rad am unteren Auto zeigt die drei Grundfarben. Mit diesen drei Farben können wir alle anderen Farben erstellen.
Das Rad rechts oben am Auto zeigt Sekundärfarben Auch: Farben, die durch Mischen der Grundfarben erstellt wurden. Beispielsweise machen Blau und Gelb Grün, während Blau und Rot violett sind.
Das linke Farbrad am unteren Auto zeigt eine weitere Ebene: Tertiärfarben. Dies sind Farben, die durch Mischen von a erstellt werden primär und sekundär Farbe. Wenn Sie beispielsweise Blau mit Lila mischen, wird ein dunkles Blau-Lila erzeugt.
Es gibt eine Reihe von Farbsystemen (Möglichkeiten zur Beschreibung von Farben), aber nur bestimmte Systeme sind für das Web geeignet.
RGB steht für „Red Green Blue“ und beschreibt, wie wir Farben auf elektronischen Displays betrachten. Diese drei Farben können zu vielen anderen Farben kombiniert werden. Die drei Werte sind in der Reihenfolge aufgeführt und reichen von 0 bis 255.
Körper Hintergrund: RGB (138.138.226);
Das obige CSS erzeugt einen gelb-orangen Hintergrund auf einer Seite. In den Klammern können Sie verschiedene Werte für Rot, Grün und Blau sehen.
Wir haben nur eine Farbe verwendet hexadezimal Wert in dieser Serie bisher, aber wir können eine Farbe in unserem CSS auf viele verschiedene Arten verwenden.
Auf dieser Website finden Sie eine kurze Liste der Hex- und RGB-Werte für 500 bestimmte Farben.
HSL steht für "Hue Saturation Lightness" und der Wert setzt sich aus drei Zahlen in dieser Reihenfolge zusammen.
Wir können dasselbe Gelb-Orange im Hauptteil einer Seite mit einem HSL-Wert anstelle der Hex- oder RGB-Werte der Farbe angeben:
Körper Hintergrund: HSL (43,100%, 57%);
Der erste Wert 43 repräsentiert einen Winkel auf einem Farbkreis. Das gibt uns das Farbton. Rot ist 0 oder 360 Grad, während Grün 120 Grad und Blau 240 Grad beträgt.
Der zweite Wert gibt uns einen Prozentsatz von Sättigung für die Farbe, wobei hier 100% vollständige Sättigung sind.
Der endgültige Wert, Leichtigkeit, Legt fest, wie hell oder dunkel der Farbton ist. 100% ist weiß, 0% ist schwarz und alles dazwischen setzt eine Kombination aus beiden.
Welchen Wert wir in unserem CSS verwenden, liegt ganz bei uns, aber HSL-Werte sind einfacher zu erraten, indem Sie einen Winkelwert auswählen, der sich von Rot (0) gegen den Uhrzeigersinn bewegt und dann den gewünschten Sättigungsprozentsatz und die gewünschte Helligkeit addieren.
Es gibt eine begrenzte Anzahl von Farben, deren Namen wir in unserem CSS verwenden können. Es sind keine Zahlen erforderlich.
Körper Hintergrund: Grün;
Eine vollständige Liste dieser Farbnamen finden Sie hier.
Wenn wir jemals einen Hex-Wert haben und den RGB- oder HSL-Wert dieser Farbe benötigen (oder umgekehrt!), Gibt es einige nette Werkzeuge, die diese Arbeit für uns erledigen werden, wie rgb.to und Colorrrs.
Farben haben viel Bedeutung. Je nachdem, in welchem Land Sie leben, kann eine bestimmte Farbe verwendet werden, um Gefahr, Liebe, Glück oder Böse zu bedeuten. Farben können Benutzer dazu bringen, mit bestimmten Gefühlen zu reagieren, daher ist es wichtig, dies zu verstehen, um unsere Botschaft an den Benutzer zu übermitteln.
Werfen Sie einen Blick auf dieses Diagramm, das zeigt, wie verschiedene Farben in verschiedenen Kulturen unterschiedliche Dinge bedeuten.
Lassen Sie uns kurz einige Bedeutungen hinter den drei Grundfarben besprechen: Gelb, Rot und Blau.
Gelb zieht die Aufmerksamkeit eines Benutzers stärker an als jede andere Farbe und meistens steht für Glück und Sonnenschein. Auf der anderen Seite kann Gelb auch „Vorsicht“ bedeuten, wie viele Verkehrsschilder zeigen.
Die Verwendung von Gelb im Web kann sehr auffällig sein. Daher sollten Sie es nicht übermäßig nutzen und sicherstellen, dass nur wichtige Informationen hervorgehoben werden.
Je nachdem, in welchem Land Sie leben, kann Rot alles bedeuten, von Gefahr über Ärger über Energie bis hin zu Liebe und Glück. Was auch immer es bedeuten mag, Rot wird immer verwendet, um einen darzustellen extrem Gefühl oder Handlung.
Im Webdesign wird Rot häufig verwendet, um Löschungen oder Fehler zu melden. Es ist eine mutige Farbe, die die Aufmerksamkeit des Benutzers auf sich zieht, so dass es auch als Akzentfarbe gut funktionieren kann. Zu viel Rot auf einer Website kann überwältigend sein und es kann schwierig sein zu sagen, was besonders wichtig ist.
Blau steht zum größten Teil für Ruhe und Traurigkeit und ist eine sehr beliebte Farbe im Web.
Das durch die Verwendung von Blau in Designs erzeugte Feeling hängt stark davon ab, welchen Farbton und Farbton wir wählen. Während ein dunkles Blau Stärke und Zuverlässigkeit vermittelt, macht ein helleres Blau mehr Spaß und Freundlichkeit.
Die meisten Websites verfügen über eine Reihe von Farben, die der Hierarchie und dem Festlegen der Farbe dienen Gefühl eines Designs. Unsere Farbauswahl kann genauso wichtig sein wie alle anderen Designentscheidungen, die wir bisher treffen mussten. Daher müssen wir ein Auge darauf haben, welche Farben zusammenarbeiten, ob wir einen guten Kontrast auf der Seite erzielt haben oder nicht wenn die Farben das gleiche Gefühl oder die gleiche Bedeutung haben wie unser Inhalt.
Hier ist ein weiterer Blick auf die Hauptfarbpalette, die in der Tuts + Town-Lernreihe verwendet wird:
Die helleren Farben werden als Hintergrund verwendet, während die dunkleren Farben für Text oder zum Hervorheben bestimmter Abschnitte verwendet werden.
Im Allgemeinen sind Farben vorhanden über voneinander auf dem Farbkreis gelten als für das Auge angenehm. Diese sind komplementär Farben - wenn sie kombiniert werden, erzeugen sie einen Graustich. Es ist möglich, dass Farben, die sich nebeneinander auf dem Farbrad befinden, gut zusammenarbeiten, es kann jedoch ein wenig Sättigung und Helligkeitseinstellung erforderlich sein, um die richtige Paarung zu erhalten.
Wir haben auch ein bisschen angerissen Kontrast im vorherigen Tutorial zu Design-Grundlagen, aber werfen wir einen kurzen Blick darauf.
Der richtige Kontrast reduziert die Augenbelastung und macht die visuelle Hierarchie klar. Das beste Beispiel für einen guten oder einen schlechten Vertrag ist der Vergleich bestimmter Hintergrund- und Textfarbkombinationen.
Das Bild oben zeigt einen schlechten Kontrast links und einen besseren Kontrast rechts. Der kontrastarme Text ist schwer zu lesen und schadet unseren Augen, wodurch ein verschwommener Effekt entsteht.
Es gibt Tools, die uns eine Auswahl an schönen Farbpaletten zur Verfügung stellen, die eine echte Zeitersparnis darstellen und als Inspiration dienen können.
Coolors.co ist einer der am einfachsten zu verwendenden Farbwähler, die derzeit verfügbar sind.
Es liefert uns schöne Farbpaletten, die wir durch Drücken der Leertaste anpassen und ändern können.
Adobe Color ist ein weiteres Tool zur Farbauswahl, das dieses erstaunliche Farbrad, von dem wir zuvor gesprochen haben, gut nutzt.
Wir können Änderungen am Farbkreis vornehmen, unsere Palette bestimmen und dann weitere Anpassungen an jeder einzelnen Farbe vornehmen.
Mit Adobe Color können wir auch unsere bevorzugten Paletten speichern und beliebte, vorab ausgewählte auswählen.
Wenn Sie Farben für das Web auswählen und auf Elemente auf der Seite anwenden, sollten Sie einige Punkte beachten, um sicherzustellen, dass diese Farben die Benutzererfahrung verbessern.
Der Kontrast ist so wichtig, dass im Zweifelsfall die sicherste Option gewählt wird. auch wenn es etwas "langweilig" erscheint! Einige der wichtigsten Aufgaben, die wir als Designer haben, stellen sicher, dass die Dinge funktional, einfach zu bedienen und lesbar sind. Schlechte Kontraste hindern unsere Benutzer daran, unsere wundervollen Inhalte zu lesen.
Es ist also in Ordnung, mit Ihrer Farbauswahl abenteuerlustig zu sein. Diese Auswahl sollte jedoch niemals den gesamten Betrieb der Website beeinträchtigen oder vom Inhalt ablenken.
Werkzeuge zur Farbpalettenauswahl, wie zum Beispiel Coolors, liefern uns häufig fünf Farben. Fünf Farben ermöglichen es uns, eine oder zwei dominierende Farben und einige weniger dominante Farben für Schaltflächen und Verknüpfungen zu verwenden.
Mit mehr als fünf verschiedenen Farben besteht die Gefahr, dass unsere Designs inkonsistent und schwer zu folgen sind. obwohl Weiß, Schwarz und Grautöne hier nicht gezählt werden sollten.
Es ist wirklich wichtig, nicht vom Farbgebrauch abzuweichen, der von vielen Menschen allgemein akzeptiert wird. Zum Beispiel sind die meisten Menschen daran gewöhnt, grün zu bedeuten, "hinzufügen" und rot, "löschen". Eine Umkehrung auf unserer Website wäre eine schlechte Designentscheidung, da dies nicht das ist, was erwartet wird und die Benutzer wahrscheinlich verwirren wird.
In diesem Lernprogramm haben wir die Theorien und Regeln der Farbe sowie deren korrekte Auswahl und Verwendung im Web erläutert. Jede Farbe trägt ihre eigene Botschaft. Wir müssen sicherstellen, dass diese Nachricht durch sorgfältige Auswahl der Palette mit dem Inhalt unseres Inhalts übereinstimmt.
Als nächstes beenden wir unsere Serie mit einigen abschließenden Gedanken und verschiedenen Möglichkeiten, wie wir unsere harte Arbeit online mit Freunden und Familie teilen können.
Wir sehen uns in der Stadt!
Accentsconagua