Share
Heute lernen wir, wie wichtig Farbe im Webdesign ist und wie Sie ein ansprechendes Farbschema wählen. Dieser Artikel ist Teil unserer Basix-Serie, die praktische und prägnante Erklärungen der Gestaltungsprinzipien für Personen mit geringer Konstruktionserfahrung liefern soll.
Bevor wir loslegen, schauen Sie sich unsere Web Templates an, wenn Sie für Ihr nächstes Projekt ein Pro-Theme benötigen. Es gibt auch eine Reihe großartiger Beispiele für Website-Farbthemen.
Beginnen wir mit diesem Tutorial.
Dieser Artikel wurde für Menschen geschrieben, die gerade erst anfangen, formale Gestaltungsprinzipien zu erlernen. Es ist nicht als umfassende Studie zum Anwenden von Farbe auf ein Design gedacht (wir werden in Zukunft viele davon haben), es ist vielmehr eine Übersicht für diejenigen, die praktische Ratschläge suchen, die ihnen helfen, sich der Farbtheorie zu nähern den Kontext eines Webdesign-Projekts.
Ich schreibe das, weil es mir immer schwer fiel, sich für ein Farbschema zu entscheiden, das für ein Projekt gut funktioniert. Es ist wahrscheinlich eine der schwierigsten Entscheidungen, die ich als Designer treffen muss. Durch das Erlernen der Grundlagen der Farbtheorie und einiger hervorragender Werkzeuge, die im Internet verfügbar sind, konnte ich meine Designs stärken und diese Schwäche erklären.
Die Farbtheorie umfasst eigentlich eine Reihe von Dingen, aber auf der grundlegendsten Ebene ist es das Zusammenspiel von Farben in einem Design durch Komplementation, Kontrast und Lebendigkeit.
Das Zusammenspiel von Farben in einem Design durch Komplementation, Kontrast und Lebendigkeit.
Während der erste Teil dieser Definition unkompliziert (und zugegebenermaßen langweilig) ist, sind es die letzten drei Ausdrücke, die die grundlegende Farbtheorie definieren:
Komplementierung bezieht sich auf die Art und Weise, wie wir Farben in Bezug auf ihre Beziehung zu anderen Farben sehen. Wenn Farben entgegengesetzte Enden des Farbspektrums einnehmen, veranlassen sie die Menschen, ein Design als visuell ansprechend zu betrachten, indem sie ein glückliches Medium bilden, in dem sich das Auge befinden kann. Anstatt sich auf einen bestimmten Bereich des Farbspektrums zu konzentrieren, wird dem Auge ein Gleichgewicht geboten . Es gibt zwei häufige Verwendungen der Komplementierung: das Triadic- und das Compound-Farbschema, über das wir später sprechen werden. Komplementation kann Sie zu neuen Höhen der Design-Raffinesse führen, wenn Sie die Feinheiten von Farbkombinationen beherrschen.
Der Kontrast verringert die Belastung der Augen und fokussiert die Aufmerksamkeit des Benutzers, indem die Elemente auf einer Seite klar unterteilt werden. Das offensichtlichste Beispiel für Kontrast ist eine effektive Auswahl von Hintergrund- und Textfarbe (siehe unten):
Im Zweifelsfall empfiehlt es sich, für den Hintergrund eine sehr helle und für den Text selbst eine sehr dunkle Farbe zu wählen. Dies ist ein Bereich, in dem die Farbtheorie für die Verwendbarkeit eines Webdesigns entscheidend ist. In den meisten Projekten sind große Textbereiche kein Platz, um wirklich kreativ zu sein - halten Sie sie also einfach und lesbar.
Mit dem Festlegen von lesbarem Text kann Kontrast auch die Aufmerksamkeit des Betrachters auf bestimmte Elemente einer Seite lenken. Denken Sie an das Hervorheben eines Lehrbuchs: Wenn Sie Ihre Aufmerksamkeit auf einen bestimmten Teil der Seite lenken möchten, wird die Umgebung anders dargestellt als der Rest des Textes. Das gleiche Prinzip gilt für das Webdesign: Durch die Verwendung verschiedener Kontrastfarben kann die Aufmerksamkeit des Betrachters auf bestimmte Seitenelemente gelenkt werden.
Wenn Ihre Website einen dunklen Hintergrund hat, konzentrieren Sie sich auf den Hauptinhalt mit einer helleren Farbe.
Dieses Prinzip gilt auch für analoge Farben (die wir später besprechen werden):
Nicht dumm klingen, sondern Lebendigkeit bestimmt die Emotion Ihres Designs. Hellere Farben führen dazu, dass sich der Benutzer durch Ihr Design energetischer fühlt. Dies ist besonders effektiv, wenn Sie versuchen, ein Produkt zu bewerben oder eine emotionale Reaktion auszulösen. Dunklere Farbtöne entspannen den Benutzer, sodass sich der Geist auf andere Dinge konzentrieren kann. Ein gutes Beispiel dafür ist ein Vergleich zwischen CNN und Ars Technica:
Hier sind 3 der allgemein akzeptierten Strukturen für ein gutes Farbschema: Triadisch, zusammengesetzt und analog:
Bestehend aus 3 Farben an separaten Enden des Farbspektrums. Es gibt eine sehr einfache Möglichkeit, ein Triadic-Farbschema zu erstellen:
Durch die Verwendung eines gleichseitigen Dreiecks können Sie sicherstellen, dass die Farben gleich lebendig sind und sich richtig ergänzen.
Das Compound-Farbschema basiert auf der Bereitstellung einer Reihe von Komplementärfarben: Zwei Farben werden an entgegengesetzten Enden des Farbspektrums ausgewählt. Auf diese Weise wird dem Designer mehr Freiheit bei der Gestaltung eingeräumt und gleichzeitig vom optischen Reiz der Komplementärfarben profitiert.
Ein analoges Farbschema basiert auf einer sorgfältigen Auswahl von Farben in demselben Bereich des Farbspektrums. Normalerweise unterscheiden sich die Farben durch ihre Lebendigkeit und ihren Kontrast, wenn sie miteinander verglichen werden.
Zwei Beispiele für ein analoges Farbschema sind:
Das Schöne an unserer Geschichte ist, dass wir von Jahrhunderten wissenschaftlicher und künstlerischer Farbtheoretiker profitieren können. Es gibt ganze Bände, die über die Minutien der Farbtheorie geschrieben wurden. Daher möchte ich diejenigen unter Ihnen, die wirklich tief in das Thema eintauchen möchten, dazu auffordern, eines der zahlreichen verfügbaren akademischen Bücher zu finden, um einige der tieferen Konzepte zu nutzen. In Zukunft werden wir hier auf Webdesigntuts + auch tiefere Artikel über "Farbtheorie für Webdesigner" veröffentlichen :).
Sehen wir uns nun einige großartige Tools an, mit denen Sie selbst experimentieren können:
Glücklicherweise stehen uns einige Werkzeuge zur Verfügung, die die Farbauswahl bei sachgemäßer Anwendung extrem einfach machen. Und das Beste: Sie werden unser Verständnis der Farbtheorie verbessern.
Durch das Experimentieren in einer geführten Umgebung können wir lernen, diese Prinzipien anzuwenden, ohne frustriert zu sein, wenn die Dinge nicht perfekt funktionieren. Stellen Sie sich diese Tools als eine Art "farbtheoretisches Sicherheitsnetz" vor, mit dem Sie Ihre eigene Kreativität erkunden können, ohne sich von den festgelegten Regeln für angenehme Farbkombinationen zu entfernen.
Kuler ist ein von Adobe entwickeltes Tool, das auf intuitive Art und Weise eine Farbpalette erstellen soll. Jede Farbe auf der Palette kann mit wenigen Klicks individuell geändert oder als Grundfarbe ausgewählt werden. Paletten können gespeichert und veröffentlicht werden, und es gibt eine Reihe großartiger Community-Einträge auf ihrer Website. Unter jeder Farbe sind die Exportcodes angegeben (einschließlich Hexadezimalzahl). Die Schnittstelle kann jedoch zuweilen unhandlich sein. Durch das Anpassen der Lebendigkeit einer bestimmten Farbe kann die gesamte Palette verändert werden (ich wünschte, sie hätten eine Sperrfunktion, die das Verschieben anderer Farben verhinderte). Alles in allem würde ich dieses Tool allen empfehlen, die ein gutes Verständnis der Konzepte und der Geduld haben, wenn die Dinge nicht so reibungslos laufen, wie sie hoffen.
Dieses Tool wird schnell zu meiner bevorzugten Wahl für absolute Anfänger, für diejenigen, die wenig Geduld haben, oder für Leute, die eine Frist einhalten. Durch die Bereitstellung eines sehr einfachen und kontrollierten Wählers bietet Color Scheme Designer eine sehr niedrige Eintrittsbarriere, und die Wahl der Farbprinzipien bietet eine Vielzahl von Optionen. Während es den Benutzern nicht lehrt, warum die Farben gut zusammenarbeiten (Kulers dynamisches Farbrad ist in dieser Hinsicht viel effektiver), sind seine Ergebnisse als Ausgangspunkt oder als Abschluss eines Prototyps hervorragend geeignet.
Die erweiterten Optionen sind sehr nützlich: Funktionen wie die Einstellung der Sättigung und des Kontrasts einer gesamten Palette, blinde Overlays und Beispiel-Website-Vorschaubilder sind Dinge, die ich hoffe, die Kuler sehr bald implementiert. Ich bin jedoch der Meinung, dass dieses Werkzeug nicht das primäre Werkzeug für diejenigen sein sollte, die die Farbtheorie erlernen möchten - da dies für den Benutzer zu viel Arbeit bedeutet und es ihnen nicht erlaubt, intuitiv zu experimentieren, während die Grundlagen jedes Farbprinzips beibehalten werden.
Ja, es gibt viele andere Seiten, auf denen Sie großartige Farbschemas finden können… und wir werden diese Seiten in Kürze zusammenfassen und in naher Zukunft analysieren (suchen Sie die Website nach unseren Ressourcenrunden, wenn sie herauskommen)..
Lassen Sie uns zum Abschluss dieses Artikels eine Website anhand einiger der von uns besprochenen Prinzipien untersuchen. Gamers with Jobs ist eine Website, die sich mit Funktionen, Podcasts und Foren einer höheren Analyse von Videospielen widmet.
Einer der schwierigsten Aspekte bei der Arbeit mit Farben ist, dass manchmal, wenn Farben noch nicht in einem Design angeordnet wurden, diese nicht gut zusammenpassen. Sobald sie jedoch angewendet werden, wird ihre visuelle Harmonie gewöhnlich sichtbar. Ich habe mich ziemlich frustriert, indem ich die in Kuler ausgewählten Farben vor dem Anwenden auf ein Design korrigierte, nur um festzustellen, dass das Farbschema gerade so verändert wurde, dass es nicht ansprechend war.
Vertrauen Sie auf die Theorie! Übernehmen Sie die gewählten Farben nach einem Farbprinzip und dann nach Bedarf anpassen. Wenn Sie dies tun, sparen Sie viel Zeit und stärken Ihre Gestaltungsfähigkeiten, wenn Sie Farbe auf raffiniertere, künstlerischere und sogar wissenschaftliche Weise sehen!
Vielen Dank, dass Sie meinen ersten Artikel gelesen haben. Ich hatte eine Menge Spaß daran, ihn zu schreiben. Bitte geben Sie in den Kommentaren etwas Feedback, wenn Sie sich dazu neigen, diese Artikel so nützlich wie möglich zu gestalten.
Oh! Und wenn Sie mehr darüber erfahren möchten, lesen Sie einen weiteren großartigen theoretischen Artikel, der sich auf das bezieht, worüber wir gerade gesprochen haben: "Visual Hierarchy in Web Design".
Wenn Sie für Ihr nächstes Projekt ein Pro-Thema benötigen, stöbern Sie in unseren Web-Templates. Es gibt viele großartige Beispiele für Website-Farbthemen, die auch bei ThemeForest dekonstruiert werden können. Oder mieten Sie einen Designer bei Envato Studio.
Accentsconagua