7 trendige Farbtipps für 2015-2016

So wie die Kunst Bewegungen und Perioden durchläuft, fällt auch das visuelle Webdesign in Trends. Der einzige Unterschied besteht darin, dass der Zyklus unserer Branche viel schneller ist und sich der Geschmack alle paar Jahre anstatt alle paar Jahrzehnte ändert.

Bild mit freundlicher Genehmigung von Cienne, http://cienneny.com

Bild mit freundlicher Genehmigung von Cienne, http://cienneny.com

Heutzutage sind helle und lebendige Farben der neue Barock, aber bevor Sie einige Pastellfarben auf Ihre Website setzen und sich als topaktuell bezeichnen, sollten Sie wissen, dass dies nicht so einfach ist.



In diesem Artikel werden sieben dieser aktuellen Farbtrends untersucht. Wir werden die Logik dahinter erklären und Beispiele für Websites zeigen, die es richtig machen.

01. Monochromatische Schemata

In Übereinstimmung mit minimalistischen Sensibilitäten steigt die Popularität von monochromatischen Schemata - Websites, die unterschiedliche Schattierungen derselben Farbe verwenden -.

Wie im kostenlosen eBook beschrieben Webdesign-Trends 2015-2016 Diese Schemata eignen sich für lebendige Farben: Mit weniger Ablenkung und Kontrast zwischen den Farben können Designer mutigere und experimentellere Farbwahlen treffen.

Bild mit freundlicher Genehmigung von Line Equality

Bild mit freundlicher Genehmigung von Line Equality

Das Liniengleichheit Das obige Beispiel zeigt dies, da Limonengrün eine Farbe ist, die normalerweise nicht gut mit anderen zusammenspielt. Durch die Verwendung derselben Farbe betont die Benutzeroberfläche das Hauptmotiv (eine vertraute Muppet), anstatt mit ihr zu konkurrieren.

In Verbindung mit anderen minimalistischen Stilen wie Fettdruck, weißer Schrift und Geisterschaltflächen steuert das monochromatische Schema die visuelle Dominanz der Seite, um sie benutzerfreundlich und ansprechend anzusehen.

Lebendige Farben sind von Natur aus auffällig und auffällig, was bedeutet, dass zu viele zusammen einen chaotischen Bildschirm erzeugen. Die monochromatische Behandlung löst dieses Problem, bevor es beginnt.

02. Kontrast zu stumpfen Farben

Selbst als ästhetische Wahl allein verhindert der extreme Kontrast, dass ein Bildschirm abgestanden erscheint - ein ständiges Anliegen bei minimalistischen Designs.

Bild mit freundlicher Genehmigung von Studio Stylistik

Bild mit freundlicher Genehmigung von Studio Stylistik

Die Designer für Studio Stylistik Verwenden Sie strategische Türkisstöße vor einem schwarzen Hintergrund, um ein sehr entscheidendes visuelles Muster zu erstellen (insbesondere ein Z-Muster, auf das wir in näher eingehen Web-UI-Design für das menschliche Auge ).

Die Wiederholung von Türkis in Buchstaben, Logos und Grafiken verstärkt jedes farbige Element vor dem ansonsten überwältigenden schwarzen Hintergrund.

03. Blockieren und schweben

Insbesondere mit kartenartige Schnittstellen , die Trends des Blockierens und Schwebens und beliebt nicht nur für ihr Aussehen, sondern auch für ihre Benutzerfreundlichkeit.

Blockieren bezieht sich auf ein gitterbasiertes Layout, bei dem die Blöcke und Karten mit dramatischen Farben unterschieden werden. Schweben bezieht sich auf ein Element - insbesondere Karten -, das beim Bewegen des Mauszeigers seine Farbe ändert. Während Blockieren und Schweben jeweils für sich verwendet werden können, werden sie häufig zusammen verwendet.

Bild mit freundlicher Genehmigung von PFD

Bild mit freundlicher Genehmigung von PFD

Auf der PFD Auf der obigen Seite heben sich die leuchtenden Farben einiger Karten von den weißen Hintergründen anderer ab. Wenn Sie mit der Maus darüber fahren, wird die Karte getönt (wie im Beispiel oben links) und zeigt die Anzahl der Herzen an. Dies fungiert als effektiver Bezeichner, da eine Änderung beim Schweben ein Hinweis darauf ist, dass das Objekt anklickbar ist.

Blockieren und Schweben einer praktischen und einer stilvollen Wahl. Die farbenfrohen Blöcke erstellen ein Layout, das zur Interaktion einlädt. Die schwebenden Anzeigen unterstützen dies, indem sie die Interaktion reibungslos gestalten.

04. Textur

Während Textur in neutralen Hintergründen am häufigsten vorkommt, kann sie unter den richtigen Umständen mit hellen Farben kombiniert werden, um außergewöhnliche Ergebnisse zu erzielen.

Bild mit freundlicher Genehmigung von Tacospillet

Bild mit freundlicher Genehmigung von Tacospillet

Der Standort Das Taco-Spiel Verwendet vollständige Hintergrund- und Vordergrundbilder mit Textur. Die Behandlung mildert die hellen Farben leicht. Die Textur verleiht den Grafiken auch eine einzigartige Ästhetik, die sich nicht übermäßig skeuomorph anfühlt.

Bild mit freundlicher Genehmigung von Joyride Taco House

Bild mit freundlicher Genehmigung von Joyride Taco House

Zufälligerweise eine andere Website im Zusammenhang mit Lebensmitteln, Joyride Taco House zeigt uns, wie Textur die Oberfläche betont. Der leichte Schatten unter der Hauptüberschrift sorgt für eine gewisse Trennung mit einer gewissen Tiefe, während die blaugrünen Linien im Logo die meiste anfängliche Aufmerksamkeit auf sich ziehen.

Die Verwendung von Texturen ist leicht und macht Spaß, was die Atmosphäre des Restaurants selbst widerspiegelt.

05. Text hervorheben

Die aufmerksamkeitsstarken Eigenschaften heller Farben machen sie nützlich, um bestimmte Wörter innerhalb eines Textblocks hervorzuheben - insbesondere im Gegensatz zu langweiligeren Hintergründen, wie oben erwähnt. Heller Text fügt eine natürliche Betonung hinzu und beeinflusst sogar, wie die Nachricht rüberkommt.

Bild mit freundlicher Genehmigung von For the Love of the Reef

Bild mit freundlicher Genehmigung von For the Love of the Reef

Aus Liebe zum Riff betont oben nur das Wort 'Liebe'. Es ist ein cleverer visueller Trick, da der Aufruf zum Handeln ebenfalls in Gold hervorgehoben ist, wodurch eine subtile Verbindung zwischen beiden hergestellt wird.

06. Schaltflächen / UI-Elemente

Genau wie bei Wörtern können helle Farben Schaltflächen oder andere Elemente der Benutzeroberfläche hervorheben, um die Aufmerksamkeit auf sich zu ziehen oder die Benutzerfreundlichkeit zu verbessern.

Bild mit freundlicher Genehmigung von Hega

Bild mit freundlicher Genehmigung von Hega

Wie in der Hega Beispiel (oben): Der rote Aufruf zum Handeln erregt die Aufmerksamkeit inmitten von Schwarzweiß auf dem Rest der Seite.

Bild mit freundlicher Genehmigung von Mijlo

Bild mit freundlicher Genehmigung von Mijlo

Ebenso der leuchtend orangefarbene Aufruf zum Handeln auf dem Mijlo Die Site (oben) hebt sich vom einfachen Hintergrund und dem ebenso einfachen Produktbild ab. Die Kombination aus gedeckten Farben im Hintergrund und dem Produkt wirkt zusammen, um den hellen Aufruf zum Handeln noch attraktiver zu machen.

07. Navigationshilfen

Der organisatorische Nutzen von Colour ist seit langem bekannt und zeigt sich in den farbigen Registerkarten von Büchern und Aktenschränken. Diese Anwendung zur Webnavigation scheint eine logische Folge zu sein, da die verschiedenen Farben die verschiedenen Abschnitte leicht voneinander trennen. Dies ist besonders nützlich für inhaltsintensive Websites, bei denen alle Anstrengungen unternommen werden müssen, um die Navigation zu vereinfachen.

Bild mit freundlicher Genehmigung von Coloured Lines

Bild mit freundlicher Genehmigung von Coloured Lines

Zum Beispiel, Farbige Linien oben verwendet das Regenbogenspektrum, um die acht separaten Seiten ihrer Site zu partitionieren. Es ist ein bisschen unorthodox, aber es spiegelt sicherlich die Markenidentität wider (unter Berücksichtigung des Firmennamens).

Die Site ist Desktop-Benutzern vielleicht weniger vertraut, aber für mobile Benutzer, die wahrscheinlich ein scrollbasiertes Navigationsmenü schätzen, ist es ziemlich flüssig.

Zusätzliches Wissen

Unser kostenloses eBook Webdesign-Trends 2015-2016 geht näher auf die neuesten Farbtrends sowie 9 weitere aktuelle Trends ein. Laden Sie es jetzt herunter und Sie finden 166 handverlesene Beispiele von Unternehmen wie Adidas, Intercom, Apple, Google, Versace und anderen. Um den Entwurfsprozess zu beschleunigen, gibt es auch eine kuratierte Liste mit 100 kostenlosen Ressourcen.

Wörter : Jerry Cao

Jerry Cao ist Content-Stratege bei UXPin - die Wireframing- und Prototyping-App.

So was? Lese das!