Farbe ist vielleicht einer der wichtigsten Aspekte des UX-Designs.
Untersuchungen zeigen, dass 90 % des ersten Eindrucks von einem Produkt auf der Farbe basieren.
Die richtigen Farben können Emotionen wecken, den Benutzer zum Handeln anregen oder sogar seine Überzeugungen ändern. Leider gilt auch das Gegenteil – der falsche Einsatz einer Farbpalette kann Ihre UX ruinieren.
Die Auswahl einer Farbe für Ihre App mag trivial erscheinen. Es gibt jedoch viele Überlegungen, die in diese Entscheidung einfließen.
Von der Berücksichtigung der kulturellen Überzeugungen Ihrer Zielgruppe bis hin zur richtigen Verwendung von Farbschema-Generatoren – hier erfahren Sie, wie Sie die beste Farbpalette für Ihr mobiles App-Design auswählen.
Table of Contents
Recherchieren Sie Ihre Zielgruppe
Der erste Schritt bei der Festlegung Ihrer Farbpalette besteht darin, Ihre Zielgruppe zu recherchieren und herauszufinden, wie sie verschiedene Farben wahrnimmt, damit Sie die passenden Farben für Ihre App verwenden können.
Zwar hat jeder Mensch seine Lieblingsfarben, aber Sie werden überrascht sein, wie universell manche Entscheidungen sind.
Mehrere Studien haben zum Beispiel gezeigt, dass Menschen gleichen Alters ähnliche Farbvorlieben haben.
Hier sind die Ergebnisse einer Umfrage, die seit 2011 durchgeführt wird:
Sie werden auch feststellen, dass sich die Farbvorlieben mit zunehmendem Alter verändern.
Beachten Sie, dass die meisten Menschen Blau als ihre Lieblingsfarbe angeben, aber plötzlich zu Rot wechseln, wenn sie ein fortgeschrittenes Alter (über 70 Jahre) erreichen.
Aber das Alter ist nur ein Faktor. Auch das Geschlecht spielt eine Rolle. Hier ist eine Studie von Joe Hallock, die dies veranschaulicht:
Aus den beiden obigen Studien geht hervor, dass Blau eine allgemein beliebte Farbe ist, weshalb sie bei der Gestaltung Ihrer Anwendungen eine sichere Wahl darstellt.
Der Grund dafür ist, dass Blau gemeinhin mit Sicherheit und Ruhe assoziiert wird – wünschenswerte Eigenschaften in jedem Alter und bei jedem Geschlecht.
Aber die Farbe (ob blau, rot usw.) ist nur ein Aspekt der Farbe. Es gibt noch andere Aspekte wie Farbtöne, Schattierungen und Lebendigkeit, die ebenfalls die Wahrnehmung beeinflussen.
Eine Folgestudie aus dem Jahr 2007 ergab beispielsweise, dass Männer hellere Farben bevorzugen, während Frauen sanftere Farben bevorzugen.
Wenn Sie also eine App entwickeln, die sich hauptsächlich an Frauen richtet, ist es ideal, sanftere Farben zu verwenden.
Interessant an diesen Studien ist, dass die Befragten aus verschiedenen Ländern stammten, was bedeutet, dass die Farbwahl in der Regel weltweit einheitlich ist.
Das bedeutet jedoch nicht, dass man die Auswirkungen der Kultur auf die Farbwahl außer Acht lassen sollte, denn sie können erheblich sein.
So wird beispielsweise die Farbe Rot im UI-Design häufig verwendet, um Gefahr oder eine Warnung zu signalisieren. Aber in asiatischen Kulturen ist es oft ein Symbol für Glück und Feierlichkeiten.
In lateinamerikanischen Kulturen hingegen kann Rot in Kombination mit Schwarz einen Konflikt bedeuten.
Es ist daher wichtig, die kulturelle Bedeutung Ihres Farbschemas zu überprüfen, um zu vermeiden, dass einige Ihrer Benutzer beleidigt werden.
Letztlich sind diese Erkenntnisse nur Richtlinien. Es ist immer noch am besten, die genauen Farbpräferenzen Ihrer Zielgruppe durch Marktforschungsmethoden wie Umfragen und Interviews zu ermitteln.
Eine einfachere Alternative ist es, sich die Farben anzusehen, die Ihre Konkurrenten verwenden.
Studieren Sie Ihre Konkurrenten
Die Beobachtung Ihrer Konkurrenten ist ein Muss bei der Marktforschung. Sie können nicht nur Ideen für die Verfeinerung Ihrer App-Idee sammeln, sondern auch Erkenntnisse über die Farbverwendung gewinnen.
Mit anderen Worten: Sie können sich die erfolgreichen Apps in Ihrer Nische ansehen und prüfen, welche Farben bei ihnen funktionieren.
Sie können dies ganz einfach tun, indem Sie den Apple App Store oder den Google Play Store aufrufen und die Top-Charts in der von Ihnen gewählten Kategorie überprüfen.
Alternativ können Sie auch mit relevanten Schlüsselwörtern nach Apps suchen.
Icons sind eine gute Abkürzung, um die Farbschemata verschiedener Apps auf einmal zu vergleichen, da die Farbe der Icons in der Regel die gleiche ist wie die Farbe der Benutzeroberfläche.
Nehmen wir diese Auflistung der besten Fitness-Apps im Jahr 2020 als Beispiel:
Sie werden feststellen, dass die große Mehrheit der Fitness-Apps das rote und orange Farbschema verwendet. Das ist keine Überraschung, denn sie vermitteln den Eindruck von Energie und Aktivität.
Es ist also eine gute Idee, die gleichen Farben zu verwenden, wenn Sie Ihre eigene Fitness-App entwickeln.
Allerdings ist es nicht immer der beste Ansatz, diese Farben zu übernehmen. Manchmal möchte man wissen, was alle anderen verwenden, damit man sich abheben kann.
Das UI-Design wandte sich von den typischen blauen oder weißen Farbschemata von Finanz-Apps ab. Stattdessen entschied man sich für eine helle und farbenfrohe Farbpalette.
Das war eine bewusste Entscheidung, um die frische und respektlose Art von Cleo zu unterstreichen.
Wenn Sie also mit Ihrer App das gleiche Ziel verfolgen wollen, haben Sie bereits den Beweis für Ihr Konzept erbracht.
Das ist letztlich der Vorteil, wenn Sie Ihre Konkurrenten überprüfen. So können Sie beurteilen, ob Ihr Farbschema für Ihren Zielmarkt geeignet ist – ohne es selbst zu tun.
Streben Sie nach Minimalismus
Minimalismus ist ein wichtiges Prinzip, das Sie berücksichtigen sollten, wenn Sie die beste Farbpalette für Ihre App erreichen wollen. Denn so können Sie verhindern, dass Ihr UI-Design zu einem bunten Durcheinander wie diesem wird:
Die wichtigste Methode, um einen minimalistischen Ansatz zu erreichen und diesen Schandfleck zu vermeiden, ist die Verwendung einer visuellen Hierarchie.
Bei der visuellen Hierarchie werden die Elemente der Benutzeroberfläche nach ihrer Wichtigkeit geordnet, indem wichtige Bereiche wie die Überschrift hervorgehoben werden. Eine der wichtigsten Methoden hierfür ist die Farbe.
Beachten Sie zum Beispiel, dass die meisten CTA-Schaltflächen (Call-to-Action) eine helle Farbe wie Rot oder Grün verwenden, um hervorzustechen.
Dies kann jedoch nur erreicht werden, wenn keine anderen umgebenden UI-Elemente die gleichen Farbtöne verwenden, wie die folgende Abbildung zeigt.
Daher sollten Sie die Farbpalette Ihres UI-Designs auf maximal vier Farben beschränken und sich für alles andere auf Weißraum oder einfarbige Farbtöne verlassen.
Eine davon wäre die primäre oder dominante Farbe, die Sie in Ihrem App-Design am häufigsten verwenden werden. Beispiele hierfür wären die Titelleiste oder die Menüsymbole.
Die Primärfarbe wird oft von den Farben Ihrer Marke abgeleitet und ist eine gute Möglichkeit, Ihr Branding in der gesamten App durchzusetzen.
Sie können auch verschiedene Schattierungen Ihrer Grundfarbe verwenden, um mehr Optionen in Ihrem Design zu haben.
Beachten Sie z. B., wie das folgende UI-Design verschiedene Schattierungen einer einzigen Grundfarbe verwendet. Auf diese Weise können Sie sich an eine Farbpalette halten und dennoch genügend Kontrast zwischen den Elementen schaffen.
Die anderen Farben sind sekundär und werden verwendet, um bestimmte Elemente wie Schaltflächen, Schalter oder Textmarkierungen hervorzuheben.
Da sie nur als Akzente verwendet werden, sollten Sekundärfarben nur sparsam eingesetzt werden.
Denken Sie daran, dass sie nicht mit Ihrer Primärfarbe konkurrieren sollten, da sonst die visuelle Hierarchie durchbrochen würde.
Natürlich gibt es Ausnahmen.
Für Fließtext wird aufgrund der guten Lesbarkeit fast immer Schwarz oder Weiß verwendet. Und einige Farben sind universell einsetzbar, wie z. B. Rot, um Fehler zu kennzeichnen.
Farbpsychologie nutzen
Untersuchungen haben ergeben, dass Menschen innerhalb der ersten 90 Sekunden, in denen sie ein Produkt sehen, ein erstes Urteil über dieses Produkt fällen.
Und viele dieser blitzschnellen Entscheidungen beruhen auf der Farbpsychologie.
Farbpsychologie ist die emotionale Wirkung, die Farben auf Menschen haben. Für einen UI-Designer ist dies von großem Nutzen, da man den Zustand und die Stimmung eines Benutzers durch die Verwendung der richtigen Farben verändern kann.
Der Kern der Farbpsychologie ist die Vorstellung von Wärme und Kühle.
Warme Farben werden im Allgemeinen als dynamischer und aktiver angesehen. Sie können jedoch entweder Glück und Leidenschaft oder Gefahr und Feindseligkeit hervorrufen.
Kühle Farben hingegen sind ruhiger und beruhigender. Sie können aber auch für Traurigkeit stehen.
Aber das sind nur grobe Anhaltspunkte.
Bestimmte Farben haben auch ihre eigenen Emotionen und Stimmungen. Sehen Sie sich diese Tabelle an:
Wenn Sie die Farbpsychologie kennen, werden Sie verstehen, warum manche Anwendungen eine bestimmte Farbe einer anderen vorziehen.
Beachten Sie zum Beispiel, dass viele Finanz-Apps Blau als Hauptfarbe verwenden. Das liegt daran, dass Blau ein Gefühl von Vertrauen und Zuverlässigkeit vermittelt, was wichtig ist, wenn man mit dem Geld anderer Leute umgeht.
Auf der anderen Seite verwenden Spaß-Apps wie Spiele oft eine rote oder orangefarbene Palette. Das liegt daran, dass beides warme Farben sind, was bedeutet, dass sie dynamisch sind.
Und nicht nur das: Sie wecken beim Benutzer auch Gefühle wie Aufregung, Freundlichkeit und Vertrauen.
Die Farbpsychologie kann sogar die Handlungen der Nutzer beeinflussen, um die Konversionsrate zu erhöhen.
Diese Studie zeigt zum Beispiel, dass Rot die effektivste Farbe für eine Kaufschaltfläche ist, weil sie ein Gefühl der Dringlichkeit hervorruft.
Aber wie bei allem anderen sind auch diese Ergebnisse keine unumstößlichen Wahrheiten.
Als die Forscher zum Beispiel die oben genannte Studie in der Unterhaltungselektronikbranche durchführten, führte eine grüne Kaufschaltfläche zu den höchsten Umsätzen.
Letztendlich wird die Kombination von Farbpsychologie und solider Marktforschung die besten Ergebnisse liefern.
Nutzen Sie die Farben der App-Kategorien
In den meisten Fällen neigen Apps derselben Kategorie dazu, ähnliche Farbpaletten zu verwenden. Daher ist es eine gute Idee, die gleiche Farbpalette wie die anderen Apps in Ihrer Nische zu verwenden.
Den Farbkonventionen der von Ihnen gewählten App-Kategorie zu folgen, ist nicht nur trendy. Es hilft den Nutzern, Ihre App mit anderen Apps in Ihrer Nische zu assoziieren. In den meisten Fällen dient es auch einem praktischen Zweck.
Nehmen Sie Apps für soziale Medien. Beachten Sie, dass die meisten von ihnen ein blaues Farbschema haben:
Blau ist beliebt, weil es gut zu Text passt, und den gibt es bei Social-Media-Apps in Hülle und Fülle. Außerdem sind viele Nutzer bereits damit vertraut, dass soziale Medien eine blaue Farbpalette verwenden.
Ein weiteres Beispiel ist der Trend zu Liefer-Apps, die rote Farbtöne verwenden.
Denken Sie daran, dass Rot mit Energie und Schnelligkeit assoziiert wird – Eigenschaften, die für Lieferdienste wünschenswert sind.
Darüber hinaus kann Rot auch Hunger und Appetit wecken, weshalb viele Fastfood-Restaurants diese Farbe verwenden.
Die Verwendung von Rot in Ihrer Liefer-App ist wie eine Anleihe bei diesen bereits etablierten Eigenschaften. Die Menschen würden erwarten, dass Ihre App einen schnellen Service bietet.
Das Einzige, was Sie tun müssen, ist, dieses Versprechen zu erfüllen.
Mit den Farbkonventionen Ihrer Kategorie zu brechen, kann riskant sein, aber es gibt Situationen, in denen es klug sein kann.
Ein gutes Beispiel ist, wenn Sie sich von einem Meer von Apps mit denselben Farben abheben wollen.
Aber in den meisten Fällen ist es einfacher (und sicherer), bei dem zu bleiben, was funktioniert.
Farbpalettengeneratoren verwenden
Farbpalettengeneratoren sind wohl das nützlichste Tool, um zu entscheiden, welche Farbe Sie für Ihr UI-Design verwenden möchten.
Die Wahrheit ist, dass die Auswahl einer Gruppe von Farben, die gut zusammenpassen, keine leichte Aufgabe ist. Die Wissenschaft, die sich mit diesem Thema beschäftigt, heißt Farbtheorie.
Das Herzstück der Farbtheorie ist das Farbrad, ein kreisförmiges Diagramm, das Farben strategisch anordnet, etwa so:
Bei der Auswahl der Farben können Sie verschiedene Farbschemata verwenden, je nachdem, welchen Effekt Sie erzielen möchten.
Bei einem monochromen Ansatz werden beispielsweise Schattierungen aus nur einer Farbe ausgewählt (z. B. dunkles Lila und helles Lila aus Lila). Dies ist ideal für minimalistische Designs.
Bei einem komplementären Ansatz hingegen werden zwei gegenüberliegende Farben des Farbkreises ausgewählt.
Komplementärfarben bieten einen starken Kontrast, der dazu beiträgt, dass Elemente im Design hervorstechen.
Wenn Sie drei Farben in einem Design ausbalancieren möchten, können Sie triadische Farben wählen.
Es gibt aber auch noch andere Methoden, aus denen Sie wählen können:
Das scheint eine Menge zu sein, die man im Kopf behalten muss.
Aber der Hauptvorteil eines Palettengenerators ist, dass er den Prozess für Sie automatisiert.
Sie können sich für eine Methode entscheiden, und die Software wählt die richtigen Farben für Sie aus, ohne viel zu raten.
Einige Generatoren verfügen sogar über eine Zufallsfunktion, mit der Sie sich durch Farbpaletten klicken können, um sich inspirieren zu lassen.
Glücklicherweise gibt es im Internet eine Vielzahl von Farbgeneratoren, sowohl kostenpflichtige als auch kostenlose. Gute Tools für den Anfang sind Coolors und Muzli Colors.
Wie Sie eine hervorragende UX erreichen
Zweifellos kann die Wahl der richtigen Farben Wunder für die UX Ihrer Anwendung bewirken.
Aber das ist nur ein Aspekt davon. Eine exzellente UX zu erreichen ist knifflig und anspruchsvoll, mit vielen Best Practices und Fallstricken, die es zu beachten gilt.
Der beste Weg, sich darauf vorzubereiten, ist, sich Wissen anzueignen.
Petar führt Shake (DECODEs Schwesterunternehmen) als CEO und liefert das Produkt an eine wachsende Zahl zufriedener, innovativer Kunden. Im Alltag sorgt er dafür, dass die Teams in den Bereichen Engineering, Design, Produkt, Marketing und Vertrieb harmonisch zusammenarbeiten. Bevor er zu Shake wechselte, leitete Petar DECODE.
Obwohl er als Ingenieur ausgebildet wurde, zeigte ihm sein natürliches Talent bald, dass er auch im Bereich Marketing, Vertrieb und Branding einen großen Einfluss hatte. Petars Leidenschaften umfassen Architektur, Skifahren, Segeln und ein gutes Glas Rotwein.
Das Entwerfen von Wireframes kann überraschend komplex sein. Um Ihnen dabei zu helfen und Sie zu inspirieren, stellen wir Ihnen in diesem Artikel über 20 Beispiele für Wireframes für mobile Apps vor.
Dieser Artikel ist eine Kurzanleitung zu den gängigsten Bildschirmen in einer App. Wir behandeln 9 Haupttypen und helfen Ihnen dabei, eine großartige App zu erstellen.
