Gedeckte Farben: Definition und ihre Verwendung auf Websites und in Apps

Werbung

Das Konzept der Verwendung gedeckter Farben in Ihrem Design ist sicherlich nicht neu. Wenn man es mit dem Trend zu lebhaften Farben vergleicht, den wir fast überall haben, scheint es sicherlich etwas Neues zu sein.

Jeder moderne UX-Designer weiß, dass der minimalistische, flache Trend in den letzten Jahren an Fahrt aufgenommen hat.

Es gibt Unternehmen wie Microsoft, Apple und Twitter, die sich diesen neuen Stil bei der Gestaltung ihrer digitalen Produkte zunutze machen.

Das flache Design geht Hand in Hand mit dem minimalistischen Ansatz.

Das flache Design eliminiert die Tiefe durch den Verzicht auf Schattierungen und Farbverläufe und bevorzugt eindimensionale Geometrie.

FireShot-Capture-1789-BO Gedeckte Farben: Definition and How to Use Them In Websites and Apps

The minimalist design will eschew unnecessary features and content, replacing it with a clean, sleek monochromatic approach. Together, the two approaches will give you legibility and clarity, and reject ornamentation and excess.

FireShot-Capture-1790-Fut Muted Colors: Definition and How to Use Them In Websites and Apps

However, even though these two practices make the UI interface very simple, their intersection has created some usability issues for certain users.

Eine zu einfache Gestaltung hat genau das Gegenteil von dem bewirkt, was gewünscht war, und die Nutzer finden es schwieriger herauszufinden, wo sie klicken können und warum.

Glücklicherweise gibt es einen dritten Trend, der hier Abhilfe schafft. Gedeckte Farben sind ebenfalls im Kommen.

exploration-pastel-color-2- Gedeckte Farben: Definition und ihre Verwendung in Websites und Apps

exploration-pastell-color-2- Gedeckte Farben: Definition und Verwendung auf Websites und in Apps

Gedämpfte Farbschemata sind in der Printwerbung allgegenwärtig. In einer Printkampagne braucht man jedoch kein minimalistisches Design oder einen flachen Effekt, da der Nutzer nicht mit einem Blatt Papier interagiert, sondern nur schauen muss.

Allerdings hat die gedeckte Farbpalette neben ihrer primären Rolle in der funktionalen UX-Praxis eine neue Rolle übernommen.

FireShot-Capture-1776-Air Gedeckte Farben: Definition und wie man sie in Websites und Apps verwendet

Wenn Sie versuchen, eine Definition für gedeckte Farben zu finden, werden Sie feststellen, dass die beste Antwort auf die Frage „Was sind gedeckte Farben?“ darin liegt, dass diese Farben die Modernität, Effizienz und Fortschrittlichkeit repräsentieren.

Sie vermitteln dem Betrachter, dass der Inhalt, den er betrachtet, relevant und nicht veraltet ist. Zum Beispiel kann man gedeckte Farben in Drakes „Hotline Bling“ Video sehen.

FireShot-Capture-1778-Rot Gedeckte Farben: Definition und wie man sie auf Websites und in Apps verwendet

Diese Farben und gedämpften Pastelltöne waren durchaus beabsichtigt, und sie sprechen die moderne Kultur und die Massen an. Sie sind auch ein Zeichen für den aktuellen Zeitgeist. Da sie viel einfacher zu betrachten sind als grelle, scharfe Farben, sind sie auch konzeptionell sehr modern.

FireShot-Capture-1780-Vic Gedeckte Farben: Definition und Verwendung auf Websites und in Apps

Werbung

Heutzutage sollten UX-Designer wissen, dass ihre Farbwahl eigentlich eine Designwahl ist, und Farbe kann viel aussagen, genau wie Fluss, Inhalt, Benutzerfreundlichkeit und Funktion.

Die Wahl zwischen einem leuchtenden Grün oder gedämpften Grüntönen kann den Unterschied ausmachen, ob der Benutzer auf der Website bleibt oder sie sofort wieder verlässt. Genauso wie eine klobige Benutzeroberfläche ein wenig analog wirken kann, können diese hellen, lebhaften Farben wie eine Explosion aus der Vergangenheit aussehen.

Gedämpfte Farben erscheinen wie sie es tun wegen:

FireShot-Capture-1781-VR- Gedämpfte Farben: Definition und ihre Verwendung auf Websites und in Apps

  1. Niedrigerer Wert
  2. Niedrigere Sättigung
  3. Mischung mit benachbarten Farben
  4. Kombination aus einem der oben genannten Punkte

Es gibt Variationen der Palette der gedeckten Farben, die man schon tausendmal gesehen hat, und oft passen sie einfach nicht zu der angestrebten Designästhetik. Selbst wenn alles andere dazu passt.

Hier kann eine gedämpfte Farboption Wunder bewirken, denn wenn man sie mit einer flachen Ästhetik verwendet, ist es ein klassischer, ausgefeilter Look, der anders genug ist, um sich von allen anderen flachen Projekten abzuheben.

animal-800-x-600-large-1 Gedämpfte Farben: Definition und Verwendung in Websites und Apps

animal-800-x-600-large-1 Gedeckte Farben: Definition und wie man sie in Websites und Apps verwendet

Aber was ist eine gedeckte Farbpalette?

Für die Zwecke dieses Gesprächs handelt es sich um jeden Farbton, der stark gesättigt ist und dem ein Ton, eine Tönung oder eine Schattierung hinzugefügt wird, um ihn gedämpft und weniger hell zu machen. Das Ergebnis ist oft eine sanftere, ruhigere Farbe, mit der man leichter arbeiten kann und die besser zum Gesamtdesign passt.

FireShot-Capture-1784-AMA Gedeckte Farben: Definition und wie man sie in Websites und Apps verwendet

„Farbe“ ist eigentlich ein sehr ungenauer Begriff, den wir täglich verwenden. Er besteht aus drei Hauptkomponenten, nämlich Farbton, Sättigung und Wert.

Wenn man einen Ballon hat, bei dem der Äquator der Farbton auf 360 Grad, die vertikale Achse der Wert und die horizontale die Sättigung ist, können die Farben auf dem Innenvolumen visualisiert werden.

FireShot-Capture-1785-Des Gedämpfte Farben: Definition und wie man sie in Websites und Apps verwendet

Es gibt noch einige andere Konzepte, die bei dieser Frage helfen können, wie zum Beispiel „Schattierung“ und „Tönung“. Wenn man zum Beispiel eine beliebige Farbe mit Schwarz mischt, spricht man von „Schattierung“, was zu einer etwas gedämpfteren Farbe führt.

Wenn man hingegen Weiß zu einer Farbe hinzufügt, spricht man von „Tönung“, was zu einer helleren Farbe führt. Allerdings können nicht alle Farben heller oder dunkler werden, wie z. B. Gelb. Wenn man sie dunkler macht, wird sie braun.

Töne in gedeckten Farben

FireShot-Capture-1783-Tim Gedeckte Farben: Definition und Verwendung auf Websites und in Apps

Wenn man einer Farbe Weiß hinzufügt oder sie abtönt, erhält man eine Farbe, die deutlich heller ist als das Original und normalerweise als Pastell bezeichnet wird. Sie können von fast weiß bis zu etwas heller als die voll gesättigte Farbe reichen.

FireShot-Capture-1786-Kve Gedeckte Farben: Definition und ihre Verwendung auf Websites und in Apps

Sie wirken leichter, weicher und vermitteln eine beruhigende Ästhetik im Vergleich zu den kräftigeren, helleren Optionen.

Sie sind sehr beliebt bei Illustrationen und wirken auch auf Fotos wahre Wunder. Sie fallen von der Hauptästhetik ab und werden am häufigsten verwendet, wenn Sie einen anderen Schwerpunkt als die Hauptästhetik haben.

Töne in gedeckten Farben

FireShot-Capture-1787-Céd Gedeckte Farben: Definition und ihre Verwendung auf Websites und in Apps

Töne hingegen lassen die Farbe für das Auge schwerer erscheinen und reichen von einer fast schwarzen Farbe bis hin zu einem Hauch dunkler als das Original. Sie funktionieren gut in einer Vielzahl von Umgebungen, besonders wenn sie mit weniger Schwarz verwendet werden.

story-app-exploration-large Gedeckte Farben: Definition und wie man sie in Websites und Apps verwendet

Es gibt Projekte, die sehr dunkel sind und viel Schwarz enthalten, was zu Problemen bei der Lesbarkeit führt, wenn man sie nicht besonders gut ausführt. Die Leute gehen oft fälschlicherweise davon aus, dass Schattierungen schwarz aussehen müssen, aber wenn Sie eines der traditionellen Farbschemata des Flat Designs entwickeln, ist das nicht der Fall.

Töne in gedeckten Farben

FireShot-Capture-1782-Wha Gedeckte Farben: Definition und wie man sie auf Websites und in Apps verwendet

Wenn man Schwarz und Weiß mit einer Farbe kombiniert, um sie weicher erscheinen zu lassen, erhält man Töne. Die meisten Farben werden mit Hilfe von Tönen hergestellt, da es sich um komplexe Farben mit einer fast universellen Anziehungskraft handelt.

Das liegt daran, dass sie aus verschiedenen Teilen des Farbspektrums stammen, und deshalb sind Töne die erste Wahl von Künstlern und Designern für die meisten ihrer Projekte.

unsplash-app-exploration-la Gedeckte Farben: Definition und ihre Verwendung in Websites und Apps

unsplash-app-exploration-la Gedeckte Farben: Definition und wie man sie in Websites und Apps verwendet

Abschließende Gedanken zu gedeckten Farben

Unabhängig davon, ob Sie sich von den traditionellen Farben des flachen Designs abwenden, ist die Wahl einer der oben genannten Farbtechniken nicht Ihre einzige Wahl. Sie können Schattierungen, Tönungen und Töne kombinieren, um etwas zu schaffen, das anders und absolut fesselnd ist.

Die Lehre aus diesen einfachen Studien ist, dass Sie sich nicht darauf versteifen müssen, einen Trend „nach Vorschrift“ zu verwenden. Verwenden Sie eine andere Art von Technik, um Ihren eigenen Trend zu schaffen. Die Farbpalette und ihre Veränderung können wunderbar sein, und man kann immer noch ein flaches Design erhalten.

Wenn Ihnen dieser Artikel über gedeckte Farben gefallen hat, sollten Sie sich auch diese ansehen:

  • Fotografie-Website: Design, Ideen, wie man eine erstellt
  • Sport-Websites Design: Tipps, Inspirationen und bewährte Praktiken
  • Gastronomie-Websites: Tipps, Inspirationen und bewährte Praktiken

Unbegrenzte Downloads: 1,000,000+ Fonts, InDesign Templates, Photoshop Actions, Mockups & Design Assets via logo

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.