Wie man einen professionellen Look mit Farbe erhält
Was lässt ein Design koordiniert, geplant und professionell aussehen? Die Antwort ist: "Farbe" .
Nicht jedes Projekt braucht ein blasses Firmenblau, um professionell auszusehen. Planungsfarbe bedeutet, ein Framework zu erstellen, das beschreibt, welche Farben verwendet werden und wie sie verwendet werden.
Farbe ist das rutschigste Designelement. "Gute" Farbe ist so eng mit schwer fassbaren Dingen wie persönlichem Geschmack und Intuition verbunden, ebenso wie mit technischen Erwägungen wie Kontrast und Monitorkalibrierung.
Aber Farbe ist wichtig für den Inhalt . Wenn Sie eine Webseite für wichtig halten, die Zeit für die Verfeinerung benötigt, dann werden die Leser es wahrscheinlich für wichtig genug halten, Zeit mit Lesen zu verbringen. Gute Farbauswahl macht das möglich.
In diesem Artikel besprechen wir einige Techniken, um schöne Farbpaletten für Ihre Webdesigns zu erzielen .
Der beste Weg, um eine Website ungeplant aussehen zu lassen, ist die zufällige Auswahl der Farben.
Auch wenn Besucher zum ersten Mal die Homepage einer Website überfliegen, beeinflussen die Farben ihre Einstellung zum Inhalt . Ist diese Website aufregend? Beruhigend? Gewagt? Fade? Politisch? Formal?
Farbe beeinflusst, wie Menschen das, was sie sehen, genauso interpretieren wie die Typografie.
Die richtigen Farben zu finden ist nicht einfach, aber der Prozess kann systematisch sein.
Eine gute Entwurfsstrategie beinhaltet ein Farbschema (dh eine Auswahl von Farben, die ausgewählt sind, um eine Stimmung oder Nachricht zu kommunizieren) und eine Anordnung dieses Schemas.
Nehmen wir an, Sie wurden gebeten, eine professionelle Website zu gestalten. (Und dies könnte sehr gut zu einem Trinkspiel werden: Machen Sie eine Aufnahme jedes Mal, wenn der Kunde das Wort "professionell", "sauber" oder "modern" verwendet. Zwei Aufnahmen für "Ich mag diese andere Website. Kopieren Sie sie.").
Das Farbschema hängt von der besonderen Art der Website ab. Zum Beispiel können sowohl Banken als auch Floristen professionell aussehende Websites haben.
Aber die Leute könnten weniger geneigt sein, Blumen von einer Website zu kaufen, die korporativ blau und ozeangrau ist. Und stellen Sie sich die Website der Bank of America in lila und gelbgrün vor.
Ein "professionelles" Design sagt den Besuchern, dass sie eine Website gefunden haben, die ihr Thema ernst nimmt, auch wenn dieses Thema leichtherzig ist. Was auch immer die Farben und Werte sind, "professionell" bedeutet koordiniert, geplant und durchdacht .
Gehe zu Graustufen
Der beste Weg, mit Farbe zu arbeiten, ist, mit nichts zu beginnen.
Das Entfernen von Farbe aus einem Design zeigt grundlegende Probleme, die behoben werden sollten, bevor man sich darüber Gedanken machen muss, welcher Chartreuse-Farbton am besten funktioniert. Wenn sich das Design in Schwarz und Weiß nicht richtig anfühlt, dann ist es an der Zeit, Änderungen vorzunehmen.
Hat jede Seite einen klaren Zweck? Leitet das Design die Leser durch den Inhalt? Ist der Inhalt überzeugend, inspirierend oder informativ? Sind die Überschriften klar? Stehen die Links im Kontrast zum anderen Text? Farbe verbessert diese Effekte, aber Probleme in Layout, Typ und Organisation können nicht allein durch Farbe gelöst werden .
Um ein Redesign durchzuführen, saugen Sie zuerst die Farbe aus. Der einfache Akt des Auswaschens von übersättigten Primaries zeigt wirklich, wo eine Website steht. (Eigentlich sollten Sie wirklich ein Redesign beginnen, indem Sie Ihre Ziele und Inhalte neu bewerten, aber das ist eine andere Geschichte.)
Manchmal ist das Entfernen von Farbe eine Lösung für sich .
Ich habe einmal mit einer Webdesignfirma zusammengearbeitet, um ihre eigene Website neu zu gestalten. Die Besitzer waren persönlich über das Projekt und wollten es richtig machen. Aber wenn du denkst, dass es schwierig ist, selbst zu gestalten, versuche es mit einem Komitee. Am Ende starrten wir drei nach ein paar Stunden auf einen Screenshot des neunten Entwurfs.
Abrupt flachte ich die Photoshop-Ebenen ab und traf "Desaturate", wodurch das leuchtende Kupfer-Navy-Design in Grautöne umgewandelt wurde. Zu jedermanns Überraschung funktionierte es.
Am Ende der Woche hatten wir ein "warmes" graues Design mit roten Akzenten. Wir wussten, dass wir einen Gewinner hatten, wenn frühere Kunden sie zu dem neuen Look beglückwünschten und mehr Anrufe von potenziellen Kunden eingingen.
Analysieren Sie Ihr Farbschema mit dem Photoshop-Test "Schielen" :
- Machen Sie Screenshots von mindestens drei Seiten von Ihrer Website. Öffne sie in Photoshop.
- Dupliziere die Hintergrundebene in jedem Screenshot ( Ebene → Ebene duplizieren oder Befehl + J auf einem Mac oder Strg + J unter Windows).
- Wenden Sie eine Gaußsche Unschärfe von etwa 10 Pixeln auf die neuen Ebenen an.
- Gehen Sie zu Bild → Anpassungen → Posterize . Verwenden Sie 8 bis 12 Ebenen oder gehen Sie zu Filter → Pixelrate → Mosaik . Verwenden Sie 15 bis 30 Pixel.
Dies zeigt, welche Farben wirklich dominant sind. Je dominanter die Farben sind, desto stärker prägt sich das Schema dem Besucher ein.
Sobald das Layout und die Organisation der Website ohne Farbe funktionieren, ist es Zeit, eine Palette auszuwählen. Aber welcher? Und wie viel zu verwenden?
Richten Sie Ihre Farben aus
Farbe hat drei Eigenschaften: Farbton, Sättigung und Wert (manchmal auch als Helligkeit bezeichnet).
Sättigung ist, wie reich ein Farbton ist: Neonfarben sind sehr gesättigt, während Pastelle weniger gesättigt sind.
Wert gibt an, wie hell (dh wie nahe an Schwarz oder Weiß) eine Farbe ist.
Farbton bezieht sich auf den Teil des Regenbogens, zu dem eine Farbe gehört, z. B. rot oder grün; Es ist die Eigenschaft, auf die Leute stolpern.
Nichts tötet ein Farbschema wie widersprüchliche Farben. Ein Design kann hundert Farbtöne von Pastell bis Neon haben und immer noch geplant aussehen. Aber wenn die Farben falsch gemischt werden, fällt das Schema auseinander.
Eine Möglichkeit, Farbspritzer zu vermeiden, besteht darin, sie durch eine dritte Farbe zu trennen. Ein Puffer aus Schwarz, Grau oder Weiß ist am sichersten, da Graustufen farbneutral sind: Sie können jeden Teil des Regenbogens mit Schwarz, Weiß und Grau koordinieren.
Eine zweite Lösung besteht darin , die Farbtöne in unterschiedlichen Proportionen zu verwenden . Wenn ein Farbschema, zum Beispiel, violett und braun ist, dann könnte das Design viele Brauntöne mit ein paar hellen violetten Highlights haben.
Eine weitere Möglichkeit besteht darin, die Werte zu variieren. Reines Blau und helles Zyan ergeben eine sinnvolle Kombination, aber dunkelblau (marineblau) und hellcyan (hellblau) kontrastieren sich so stark, dass sie sich gegenseitig aussetzen. Rot und Violett können unterschiedlich genug sein, um nicht zu kollidieren, aber nahe genug, um nicht absichtlich zu wirken. Hellrot (pink) und ein dunkles Violett bringen Differenzierung.
Leider ist die Vermeidung einer schlechten Farbkombination nicht dasselbe wie die Auswahl eines guten. Ein Farbschema ist nicht erfolgreich, wenn Sie zufrieden sind, sondern wenn sich Ihr Publikum wohl fühlt.
Entdecke großartige Systeme
Woher kommen großartige Farbschemen? Mit Hunderten von Farben und Tausenden von Kombinationen, wie entscheidest du dich?
Designer von kleinen statischen Websites sollten Farbe aus dem Inhalt ziehen . Das bedeutet normalerweise Fotos.
Das Design einer achtseitigen Website, die ich kürzlich gebaut habe, wurde mit einem kunstvollen Metallgerüst gekrönt, das vor einem indigoblauen Himmel stand. Wenn ich das Pipette-Werkzeug von Photoshop auf einen 5 × 5-Durchschnitt einstellte, probierte ich die dunkelsten und hellsten Teile des Himmels und gab den Seitenleisten, Links, Überschriften und Fußzeilen diese wenigen Schattierungen.
Als der Kunde fragte, wie wir eine Website so gut und so schnell gestalten konnten, antworteten wir: "Das machen wir." Aber die Farbe war schon da. Ich musste nur danach suchen.
Während Stock-Fotos für schnelle Websites funktionieren, sollten Designer größerer und dynamischerer Websites sich von ihrem Publikum inspirieren lassen .
Ein ausgezeichneter Indikator, welche Farben für Ihr Publikum attraktiv sind, ist ihre tägliche Kleidung. Finden Sie heraus, was Ihre Besucher tragen, und Sie werden wissen, welche Farben sie angenehm machen. Wenn es auf Ihrer Website beispielsweise um Sport in der Liga geht, sollten Sie herausfinden, was die Leute an Spielen tragen, und nicht ihre täglichen Aufgaben.
Wenn Sie das Glück haben, Fotos von Ihrer Zielgruppe zu bekommen, sehen Sie sie in Massen an; Sie wollen einen Durchschnitt der Menge. Aber wenn Fotos nicht verfügbar sind, gehen Sie einkaufen.
Bekleidungsdesigner, die im Geschäft bleiben können, haben einen ausgezeichneten Farbsinn für jede Stimmung und jeden Lebensstil. Es muss nicht 5th Avenue Haute Couture sein. Eine Google-Suche nach "Camping-Läden", "Baby-Kleidung", "Ski-und Bademode" und "Casual Living" wird viele gute Farbkombinationen zeigen.
Die Leute tragen Kleidung nach ihrem Geschmack. Wenn Sie Farben verwenden, die sie mögen, werden sie sich auf Ihrer Website wohler fühlen.
Verwende Texturen
Leichte Variationen in Farbton, Sättigung oder Wert erzeugen Texturen .
Monochromatische Texturen (dh Texturen mit nur einem Farbton) und Muster bieten den meisten Websites eine subtile Dimension, ohne zu kollidieren.
Insbesondere einfache Texturhintergründe sind einfach zu erstellen:
- Machen Sie ein Foto von einer Innenwand oder etwas, das kahl ist, sich aber rau anfühlt.
- Öffne es in Photoshop.
- Dupliziere die Hintergrundebene und nenne sie "Textur 1".
- Füllen Sie die Hintergrundebene mit Farben aus Ihrem Farbschema.
- Stellen Sie den Mischmodus der "Textur 1" Ebene auf "Weiches Licht" und seine Deckkraft auf 30%.
- Probieren Sie es auf Ihrer Website aus. Wenn es nicht richtig aussieht, spielen Sie mit der Opazität des Layers.
Der Name der Ebene ist bewusst. Sie können mit mehr als einem Foto herumspielen, aber vermeiden Sie, den Layern Namen wie "Wandtextur" oder "Papierstruktur" zu geben. Sie möchten sich auf den Effekt auf Ihrer Website konzentrieren, nicht wo sie herkommt.
Ein gutes Schema erstellen
Ein gutes Farbschema hat bestimmte Eigenschaften. Stellen Sie es sich als einen Rahmen oder eine Reihe von Richtlinien vor, um ein Design konsistent zu halten. Die Regelung sollte
- Zählen Sie zwei bis fünf Farbtöne auf, die gut zusammenpassen,
- Beschreibe, wie weit ein Design von diesen Farben abweichen kann,
- Konto für Schattierungen von jedem Farbton,
- Arbeiten Sie gut gegen Schwarz und Weiß.
Hier ist ein Beispiel:
Der Designer wählte zunächst warme Farbtöne, die sich gut anfühlten. Es gab keine Logik, nur das vage Ziel von "Herbst" und ihre Intuition.
In Photoshop lieferten zwei Ebenen Schattierungen von Schwarz und Weiß. Der Mischmodus jeder Ebene wurde auf "Weiches Licht" eingestellt. Reines Schwarz war für die rechte Farbe zu dunkel, sodass die Deckkraft der schwarzen Ebene angepasst wurde.
Um die Farben zu vereinheitlichen, wurde eine neue Ebene erstellt und mit reinem Rot gefüllt. Sein Mischmodus wurde auf "Farbe" eingestellt und seine Opazität auf etwa 40% reduziert. (Hinweis: Die Reihenfolge der Ebenen ist sehr wichtig. Die Farben ändern sich, wenn der "Farbton" -Layer unterhalb der Schwarz-Weiß-Ebenen liegt.)
Dies gab dem Designer 15 Farben zur Auswahl. Sie wählte vier aus, die eine Reihe von Tönen und Farbtönen hatten. Hier sind die Farben gegen Weiß gesetzt.
Variationen sind wichtig, so experimentierte der Designer. Wie würden die Farben gegen Schwarz aussehen? Was passiert, wenn wir sie leicht beschatten?
Was wäre, wenn wir sie komplett ändern würden? Die Verwendung von Bild → Einstellungen → Farbton / Sättigung auf der Ebene "Farbton" erzeugt ein deutlich un-herbstliches Gefühl, aber die Farben sind immer noch koordiniert. Vielleicht kann diese Palette zu Ostern verwendet werden.
Das Endergebnis ist ein Farbschema: eine Referenz, die verschiedene (aber nicht zu unterschiedliche) Farbtöne und eine Reihe von Farbtönen liefert, die gut zusammenarbeiten. Laden Sie die Beispieldatei herunter.
Verwenden Sie das Framework
Werden die Grafiken, Fotos und Icons von morgen mit dem heutigen Farbschema funktionieren? Welche Bilder braucht eine Website in sechs Tagen, sechs Wochen oder sechs Monaten? Es ist schwer zu sagen, aber Inhalt ist ein Teil Ihres Farbschemas .
Sie können dieses Problem lösen, indem Sie entweder Ihre Bilder dem Farbschema folgen lassen oder das Farbschema Ihren Bildern folgen lassen.
Die Durchsetzung Ihres Farbschemas, sogar mit Fotos, ist eine großartige Möglichkeit, um ein einheitliches Erscheinungsbild auf allen Seiten zu erreichen .
Die einfachste Lösung ist es, Bilder zu finden, die zu Ihrem Schema passen. Denken Sie daran, dass ein Farbschema Spielraum bietet: Solange die Hauptfarbe eines Bildes passt, sollte das Bild funktionieren. Viele Stock Foto Websites können Sie nach Farbe suchen (Bedeutung Farbton: in der Regel Vorwahlen wie rot, grün und blau).
Wenn ein Bild nicht zu Ihrem Farbschema passt, geben Sie einen Farbton ein:
- Öffne das Bild in Photoshop.
- Erstelle eine neue Ebene. Stellen Sie den Mischmodus auf "Farbe".
- Füllen Sie diese Ebene mit einer der Farben aus Ihrer Palette, vorzugsweise diejenige, die dem Bild am nächsten kommt.
- Stellen Sie die Deckkraft der Farbebene auf 50% ein.
- Spielen Sie mit der Deckkraft, bis Sie ein gutes Gleichgewicht zwischen der Originalfarbe des Bildes und der Farbpalette Ihrer Website gefunden haben.
- Diese Technik funktioniert für Fotos, Illustrationen und Symbole - alles Pixel-basiert. (Wenn Sie das Bild nicht besitzen, stellen Sie sicher, dass Sie eine Genehmigung erhalten, bevor Sie es ändern. Möglicherweise verbessern Sie das Erscheinungsbild auf Ihrer Website, aber Sie nehmen immer noch Freiheiten mit der Kunst anderer Personen.)
Ich suche professionell
Kein Farbsatz sieht an sich "professionell" aus. Vielmehr müssen Sie einem Prozess folgen, um ein koordiniertes, geplantes Gefühl zu erreichen.
Egal, worum es auf der Website geht, das Publikum wird wissen, dass es sich ernst nimmt.
Tipps
- Wenn Sie denken, dass Sie ein gutes Farbschema haben, probieren Sie es für mindestens eine Woche aus. Die Beurteilung der Farbe erfordert eine Intuition, die sich im Laufe der Zeit entwickelt. Gib dir Zeit, um die Persönlichkeit des Schemas vollständig zu absorbieren.
- Wenn Sie denken, dass Sie ein gutes Farbschema haben, lassen Sie es nicht alt werden. Der Geschmack Ihrer Besucher verändert sich im Laufe der Zeit. Notieren Sie sich die Farben nach vier Monaten. Dann frage: Sind sie noch angemessen? Wenn nicht, was hat sich geändert? Welche Faktoren beeinflussen Ihre Anpassung?
- Verwenden Sie brillante Farben sparsam. Ein Spritzer von etwas Irisierendem zieht Besucher dorthin, aber wenn sie es überall sehen, werden sie ziellos umherwandern.
- Manche Leute denken, dass Farbschemas einen engen Bereich haben. Lassen Sie Ihrem Design eine gewisse Tiefe.
- Vermeiden Sie reine Primärfarben wie Rot, Grün, Blau und Gelb. Geben Sie ihnen einen Hauch von echtem Charakter: rot, aber leicht violett, blau mit einem Hauch von Grün, "warm" gelb mit einem orangefarbenen Farbton.
- Stellen Sie sicher, dass Ihre Farben funktionieren, wenn sie verblasst sind. Wenn Sie sich für Rot entscheiden, beachten Sie, dass hellrot weiblich und dunkelrot wie Rost oder Blut sein kann. Gelb läuft von verblasstem Sonnenlicht zu dunkelbraun. Dunkelblau ist mysteriös und hellblau ist ruhig - oder elektrisch, wenn Sie es überlagern.
- Mac-Benutzer, stellen Sie Ihren Bildschirm ein. Gehen Sie zu "Systemeinstellungen" und klicken Sie auf "Universal Access". Stellen Sie Ihre Anzeige auf "Graustufen verwenden". Dies ist auch praktisch, wenn Sie Lust auf Film Noir haben.
- Egal, wie aktiv Sie Ihre Website fühlen möchten, verwenden Sie einen neutralen Hintergrund. Schwarz, Weiß und Grau passen gut zu fast jedem Farbton.
- Wenn Sie möchten, dass kleiner Text (z. B. 14 Punkte oder weniger) einem großen Farbfeld entspricht, sollten Sie den Text ein paar Nuancen dunkler als normal machen. Dadurch werden die Lichtzähler in den Zeichen versetzt.
- Verwenden Sie mehr Schattierungen von weniger Farbtönen.
- Was "gut aussieht" ist intuitiv. Aber Intuition ist ein Kampf zwischen deinem Ego, der Zuvorkommenheit deines Publikums und der Autorität der Leute, die das Projekt finanzieren.
- Verwenden Sie gedämpfte Hintergründe, um Inhalte hervorzuheben:
Geschrieben exklusiv für WDD von Ben Gremillion . Er ist ein freiberuflicher Webdesigner, der gelernt hat, dass die Inflexibilität eines Termins umgekehrt proportional zur Anzahl der in der letzten Minute angeforderten Features ist.
Wie erstellen Sie erfolgreiche Farbschemata? Was funktioniert und was nicht für dich funktioniert?