{"id":63926,"date":"2022-09-27T12:27:41","date_gmt":"2022-09-27T12:27:41","guid":{"rendered":"https:\/\/decode.agency\/?post_type=article&#038;p=63926"},"modified":"2025-08-25T08:46:08","modified_gmt":"2025-08-25T08:46:08","slug":"mobile-app-design-farbpalette","status":"publish","type":"article","link":"https:\/\/decode.agency\/de\/article\/mobile-app-design-farbpalette\/","title":{"rendered":"So w\u00e4hlen Sie die beste Farbpalette f\u00fcr das Design Ihrer mobilen App"},"content":{"rendered":"\n<p>Farbe ist vielleicht einer der wichtigsten Aspekte des <a href=\"https:\/\/decode.agency\/article\/mobile-ux-design-dos-donts\/\" target=\"_blank\" rel=\"noopener\">UX-Designs<\/a>. <\/p>\n\n\n\n<p>Untersuchungen zeigen, dass <u>90 % des ersten Eindrucks von einem Produkt auf der Farbe basieren<\/u>.<\/p>\n\n\n\n<p>Die richtigen Farben k\u00f6nnen Emotionen wecken, den Benutzer zum Handeln anregen oder sogar seine \u00dcberzeugungen \u00e4ndern. Leider gilt auch das Gegenteil &#8211; der falsche Einsatz einer Farbpalette kann Ihre UX ruinieren.<\/p>\n\n\n\n<p>Die Auswahl einer Farbe f\u00fcr Ihre App mag trivial erscheinen. Es gibt jedoch viele \u00dcberlegungen, die in diese Entscheidung einflie\u00dfen.<\/p>\n\n\n\n<p>Von der Ber\u00fccksichtigung der kulturellen \u00dcberzeugungen Ihrer Zielgruppe bis hin zur richtigen Verwendung von Farbschema-Generatoren &#8211; hier erfahren Sie, wie Sie die beste Farbpalette f\u00fcr Ihr <a href=\"https:\/\/decode.agency\/article\/mobile-app-design-process\/\" target=\"_blank\" rel=\"noopener\">mobiles App-Design<\/a> ausw\u00e4hlen.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69eb3e1a602e1\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69eb3e1a602e1\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/decode.agency\/de\/article\/mobile-app-design-farbpalette\/#Recherchieren_Sie_Ihre_Zielgruppe\" >Recherchieren Sie Ihre Zielgruppe<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/decode.agency\/de\/article\/mobile-app-design-farbpalette\/#Studieren_Sie_Ihre_Konkurrenten\" >Studieren Sie Ihre Konkurrenten<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/decode.agency\/de\/article\/mobile-app-design-farbpalette\/#Streben_Sie_nach_Minimalismus\" >Streben Sie nach Minimalismus<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/decode.agency\/de\/article\/mobile-app-design-farbpalette\/#Farbpsychologie_nutzen\" >Farbpsychologie nutzen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/decode.agency\/de\/article\/mobile-app-design-farbpalette\/#Nutzen_Sie_die_Farben_der_App-Kategorien\" >Nutzen Sie die Farben der App-Kategorien<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/decode.agency\/de\/article\/mobile-app-design-farbpalette\/#Farbpalettengeneratoren_verwenden\" >Farbpalettengeneratoren verwenden<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/decode.agency\/de\/article\/mobile-app-design-farbpalette\/#Wie_Sie_eine_hervorragende_UX_erreichen\" >Wie Sie eine hervorragende UX erreichen<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Recherchieren_Sie_Ihre_Zielgruppe\"><\/span>Recherchieren Sie Ihre Zielgruppe<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>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\u00fcr Ihre App verwenden k\u00f6nnen.<\/p>\n\n\n\n<p>Zwar hat jeder Mensch seine Lieblingsfarben, aber Sie werden \u00fcberrascht sein, wie universell manche Entscheidungen sind.<\/p>\n\n\n\n<p>Mehrere Studien haben zum Beispiel gezeigt, dass Menschen gleichen Alters \u00e4hnliche Farbvorlieben haben. <\/p>\n\n\n\n<p>Hier sind die Ergebnisse einer Umfrage, die seit 2011 durchgef\u00fchrt wird:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/rOLKYGnhW2WlkdAnXK5ZbAULtfN2uUCGqfsmOzAI45bVXPlmWjzfk8og3fE3629H1k0MTSh5PeNpFMd1X4zuI9fRYi4UyYfz4HU5Q8pObxV2tx88aEHGV-VPxyRC7PZN4qKdsS-AfFF-1a16Q_tFglJLjdr54ktdfEhGNsRzAZzXkInNOSAPGLospg\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.hotdesign.com\/marketing\/whats-your-favorite-color\/\" target=\"_blank\" rel=\"noopener\">Hot Design<\/a><\/p>\n\n\n\n<p>Sie werden auch feststellen, dass sich die Farbvorlieben mit zunehmendem Alter ver\u00e4ndern. <\/p>\n\n\n\n<p>Beachten Sie, dass die meisten Menschen Blau als ihre Lieblingsfarbe angeben, aber pl\u00f6tzlich zu Rot wechseln, wenn sie ein fortgeschrittenes Alter (\u00fcber 70 Jahre) erreichen.<\/p>\n\n\n\n<p>Aber das Alter ist nur ein Faktor. Auch das Geschlecht spielt eine Rolle. Hier ist eine Studie von Joe Hallock, die dies veranschaulicht:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/ow7-6PLJG5o8hajZxwoo17Pkh9-vSR55Ut3E-zsGkaNF1cj1k5P7dKBidiaDL5ElybDb9B26d6EC7SP9q9-DGCK8kFDNBlCUjFIxdO6malKVJLLwkgLmdAnSS0G3HZKo2Eiz62PtgMAPDkqCq-F_rCwBrTzJcQBHQggxUCsk6OjG771pFwtrb_mDUQ\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/az.design\/blog\/colour-by-gender\/\" target=\"_blank\" rel=\"noopener\">AZ Design<\/a><\/p>\n\n\n\n<p>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. <\/p>\n\n\n\n<p>Der Grund daf\u00fcr ist, dass Blau gemeinhin mit Sicherheit und Ruhe assoziiert wird &#8211; w\u00fcnschenswerte Eigenschaften in jedem Alter und bei jedem Geschlecht.<\/p>\n\n\n\n<p>Aber die Farbe (ob blau, rot usw.) ist nur ein Aspekt der Farbe. Es gibt noch andere Aspekte wie Farbt\u00f6ne, Schattierungen und Lebendigkeit, die ebenfalls die Wahrnehmung beeinflussen.<\/p>\n\n\n\n<p>Eine Folgestudie aus dem Jahr 2007 ergab beispielsweise, dass M\u00e4nner hellere Farben bevorzugen, w\u00e4hrend Frauen sanftere Farben bevorzugen. <\/p>\n\n\n\n<p>Wenn Sie also eine App entwickeln, die sich haupts\u00e4chlich an Frauen richtet, ist es ideal, sanftere Farben zu verwenden.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/jGbCCRRMC_2aANXDlmC4OUl7om2-neQm7gWI9Q-OlgApDV-GFlW9y9gHzaokZ18DNS7fSFPHruMC1_qvG36dcIRlKB3CB_5jEaH8zkcdQmktTjakTgUZPprVYrFJxW_-5dqTB8t2xqEnzn6Sgviy0ifccuH6Bbj9bwpMvAOgubBmAJ6RNg0xnTAlyA\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/digitalsynopsis.com\/design\/male-vs-female-color-perceptions-preferences\/\" target=\"_blank\" rel=\"noopener\">Digital Synopsis<\/a><\/p>\n\n\n\n<p>Interessant an diesen Studien ist, dass die Befragten aus verschiedenen L\u00e4ndern stammten, was bedeutet, dass die Farbwahl in der Regel weltweit einheitlich ist. <\/p>\n\n\n\n<p>Das bedeutet jedoch nicht, dass man die Auswirkungen der Kultur auf die Farbwahl au\u00dfer Acht lassen sollte, denn sie k\u00f6nnen erheblich sein.<\/p>\n\n\n\n<p>So wird beispielsweise die Farbe Rot im UI-Design h\u00e4ufig verwendet, um Gefahr oder eine Warnung zu signalisieren. Aber in asiatischen Kulturen ist es oft ein Symbol f\u00fcr Gl\u00fcck und Feierlichkeiten. <\/p>\n\n\n\n<p>In lateinamerikanischen Kulturen hingegen kann Rot in Kombination mit Schwarz einen Konflikt bedeuten.<\/p>\n\n\n\n<p>Es ist daher wichtig, die kulturelle Bedeutung Ihres Farbschemas zu \u00fcberpr\u00fcfen, um zu vermeiden, dass einige Ihrer Benutzer beleidigt werden.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/FpTm-d2MxZ-Gzgu0zESnbczYtb4-sPc3fONW0FRysXGMShQ_8eChMCPJesKp5eaR2BzbtQHcR7IQapzzjh7Dhw7JhCFWHxft9DTomxX6yLoQWEMCF4Ntm4VQahNbMsa0XNaUKRwQodi3WN02JttLOyooTeGPrdiyYvo-OTterk-dQrdbLjGYyUn9og\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/coloursandmaterials.wordpress.com\/2014\/11\/07\/colour-and-cultural-design-considerations\/\" target=\"_blank\" rel=\"noopener\">Farben und Materialien<\/a><\/p>\n\n\n\n<p>Letztlich sind diese Erkenntnisse nur Richtlinien. Es ist immer noch am besten, die <strong>genauen <\/strong>Farbpr\u00e4ferenzen Ihrer Zielgruppe durch Marktforschungsmethoden wie Umfragen und Interviews zu ermitteln.<\/p>\n\n\n\n<p>Eine einfachere Alternative ist es, sich die Farben anzusehen, die Ihre Konkurrenten verwenden.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Studieren_Sie_Ihre_Konkurrenten\"><\/span>Studieren Sie Ihre Konkurrenten<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Die Beobachtung Ihrer Konkurrenten ist ein Muss bei der Marktforschung. Sie k\u00f6nnen nicht nur Ideen f\u00fcr die <a href=\"https:\/\/decode.agency\/article\/how-to-turn-your-mobile-app-idea-into-reality\/\" target=\"_blank\" rel=\"noopener\">Verfeinerung Ihrer App-Idee<\/a> sammeln, sondern auch Erkenntnisse \u00fcber die Farbverwendung gewinnen.<\/p>\n\n\n\n<p>Mit anderen Worten: Sie k\u00f6nnen sich die erfolgreichen Apps in Ihrer Nische ansehen und pr\u00fcfen, welche Farben bei ihnen funktionieren.<\/p>\n\n\n\n<p>Sie k\u00f6nnen 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\u00e4hlten Kategorie \u00fcberpr\u00fcfen. <\/p>\n\n\n\n<p>Alternativ k\u00f6nnen Sie auch mit relevanten Schl\u00fcsselw\u00f6rtern nach Apps suchen.<\/p>\n\n\n\n<p>Icons sind eine gute Abk\u00fcrzung, 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\u00e4che.<\/p>\n\n\n\n<p>Nehmen wir diese Auflistung der besten Fitness-Apps im Jahr 2020 als Beispiel:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/BAaR6thTis8vAmts_4SM80o8JoXf56aGwdtxVy5xkic0epbxd-OMPDNtoxJIZ4DPQ3wxL3TonG8kwXIXjlSiOwzxq3U2BWxPXQmrKxVo5FYqkot453IAbS02OUjS7BFdkWO26rz25d7dun2biM5zByauGJY93Z__pBZ_2eVjA-Lnrw5U6W3s8cxR7g\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.mobileaction.co\/blog\/app-analytics\/top-10-fitness-apps-worldwide-november-2020\/\" target=\"_blank\" rel=\"noopener\">Mobile Action<\/a><\/p>\n\n\n\n<p>Sie werden feststellen, dass die gro\u00dfe Mehrheit der Fitness-Apps das rote und orange Farbschema verwendet. Das ist keine \u00dcberraschung, denn sie vermitteln den Eindruck von Energie und Aktivit\u00e4t. <\/p>\n\n\n\n<p>Es ist also eine gute Idee, die gleichen Farben zu verwenden, wenn Sie Ihre eigene Fitness-App entwickeln.<\/p>\n\n\n\n<p>Allerdings ist es nicht immer der beste Ansatz, diese Farben zu \u00fcbernehmen. Manchmal m\u00f6chte man wissen, was alle anderen verwenden, damit man <em>sich abheben<\/em> kann.<\/p>\n\n\n\n<p>Nehmen Sie die Neobank Cleo.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/sOxWzf5rcj7yTXdiOYjo5H4Zl3KJTnrLWJn7hJxi7z_LK75WPfK9zLzblE5gEVGQ8JfkLs4BRzFnCi1CsrB6NnxTN-qyODBPHNnCjxn5sBw2kDuGK5QEpF4OjJ69Trtc9wCe0DOuhvscrbxOks6Yd5hTTrCV0XQ4dXe98cFgabi9Jhw3WTlCHL4P5w\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/laurenrowe.co.uk\/portfolio\/cleo-ai-app-redesign\/\" target=\"_blank\" rel=\"noopener\">Lauren Rowe<\/a><\/p>\n\n\n\n<p>Das UI-Design wandte sich von den typischen blauen oder wei\u00dfen Farbschemata von Finanz-Apps ab. Stattdessen entschied man sich f\u00fcr eine helle und farbenfrohe Farbpalette. <\/p>\n\n\n\n<p>Das war eine bewusste Entscheidung, um die frische und respektlose Art von Cleo zu unterstreichen.<\/p>\n\n\n\n<p>Wenn Sie also mit Ihrer App das gleiche Ziel verfolgen wollen, haben Sie bereits den Beweis f\u00fcr Ihr Konzept erbracht.<\/p>\n\n\n\n<p>Das ist letztlich der Vorteil, wenn Sie Ihre Konkurrenten \u00fcberpr\u00fcfen. So k\u00f6nnen Sie beurteilen, ob Ihr Farbschema f\u00fcr Ihren Zielmarkt geeignet ist &#8211; ohne es selbst zu tun.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Streben_Sie_nach_Minimalismus\"><\/span>Streben Sie nach Minimalismus<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Minimalismus ist ein wichtiges Prinzip, das Sie ber\u00fccksichtigen sollten, wenn Sie die beste Farbpalette f\u00fcr Ihre App erreichen wollen. Denn so k\u00f6nnen Sie verhindern, dass Ihr UI-Design zu einem bunten Durcheinander wie diesem wird:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/rwjwSF1W-LLegIJJ873R7vJriHUs3dHHJ9AtBHg1ES4BFWwqVbjBEg-fSMakniDEzk2mCzqR1S8G8VhCdkjN-3vVqa5Wj1MK8UxTaoNe2cErzIFHzkWGG_F-7R8WksaBiMVZGDxSLl4jZKMeD_2hU1pd5aIcT8SfGlHsXG1oU8WqT4oOkUHDOuqpnw\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.sitepoint.com\/10-troublesome-colors-to-avoid-in-your-advertising\/\" target=\"_blank\" rel=\"noopener\">Sitepoint<\/a><\/p>\n\n\n\n<p>Die wichtigste Methode, um einen minimalistischen Ansatz zu erreichen und diesen Schandfleck zu vermeiden, ist die Verwendung einer visuellen Hierarchie.<\/p>\n\n\n\n<p>Bei der visuellen Hierarchie werden die Elemente der Benutzeroberfl\u00e4che nach ihrer Wichtigkeit geordnet, indem wichtige Bereiche wie die \u00dcberschrift hervorgehoben werden. Eine der wichtigsten Methoden hierf\u00fcr ist die Farbe.<\/p>\n\n\n\n<p>Beachten Sie zum Beispiel, dass die meisten CTA-Schaltfl\u00e4chen (Call-to-Action) eine helle Farbe wie Rot oder Gr\u00fcn verwenden, um hervorzustechen. <\/p>\n\n\n\n<p>Dies kann jedoch nur erreicht werden, wenn keine anderen umgebenden UI-Elemente die gleichen Farbt\u00f6ne verwenden, wie die folgende Abbildung zeigt.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/_vi4kqoiRSmdI74EZktuOQYvLoA0Q1qCwAq_Gu8MEdvGD99heoHkazcFstagcpg995NV8awKkKyrOiyuqYGQ7QZPJP9Mh6HA6iCSWajQ-yudcN_EMJlYcU-Ok5R4KUKCWRae1Tcz7LKeVORFDBpZrQ4uEJx5BLMtE7P3xDIFCDccEdvYsSy26Kuqeg\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/uxmovement.com\/wireframes\/how-to-communicate-visual-hierarchy-on-wireframes\/\" target=\"_blank\" rel=\"noopener\">UX-Bewegung<\/a><\/p>\n\n\n\n<p>Daher sollten Sie die Farbpalette Ihres UI-Designs auf maximal vier Farben beschr\u00e4nken und sich f\u00fcr alles andere auf Wei\u00dfraum oder einfarbige Farbt\u00f6ne verlassen.<\/p>\n\n\n\n<p>Eine davon w\u00e4re die prim\u00e4re oder dominante Farbe, die Sie in Ihrem App-Design am h\u00e4ufigsten verwenden werden. Beispiele hierf\u00fcr w\u00e4ren die Titelleiste oder die Men\u00fcsymbole.<\/p>\n\n\n\n<p>Die Prim\u00e4rfarbe wird oft von den Farben Ihrer Marke abgeleitet und ist eine gute M\u00f6glichkeit, Ihr Branding in der gesamten App durchzusetzen. <\/p>\n\n\n\n<p>Sie k\u00f6nnen auch verschiedene Schattierungen Ihrer Grundfarbe verwenden, um mehr Optionen in Ihrem Design zu haben.<\/p>\n\n\n\n<p>Beachten Sie z. B., wie das folgende UI-Design verschiedene Schattierungen einer einzigen Grundfarbe verwendet. Auf diese Weise k\u00f6nnen Sie sich an eine Farbpalette halten und dennoch gen\u00fcgend Kontrast zwischen den Elementen schaffen.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/xy_FJ8_Y_7sfVnmUN-j-9MNT0cGuytYL-NECVmiQnmi2pntYCyur7k9tF8FiI-yzjpUvZv62l6wpOtUODrKYE-EFy6rsX0iRxq0By3npTGm3G_ZRococtbzXkdItZP9fjyK02-KeH_z-sCnFER3wQc_-1bnvyJTYExdU9M8rOvRUPACE9ScWYeTJsQ\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/material.io\/design\/color\/the-color-system.html#color-theme-creation\" target=\"_blank\" rel=\"noopener\">Material.io<\/a><\/p>\n\n\n\n<p>Die anderen Farben sind sekund\u00e4r und werden verwendet, um bestimmte Elemente wie Schaltfl\u00e4chen, Schalter oder Textmarkierungen hervorzuheben.<\/p>\n\n\n\n<p>Da sie nur als Akzente verwendet werden, sollten Sekund\u00e4rfarben nur sparsam eingesetzt werden. <\/p>\n\n\n\n<p>Denken Sie daran, dass sie nicht mit Ihrer Prim\u00e4rfarbe konkurrieren sollten, da sonst die visuelle Hierarchie durchbrochen w\u00fcrde.<\/p>\n\n\n\n<p>Nat\u00fcrlich gibt es Ausnahmen.<\/p>\n\n\n\n<p>F\u00fcr Flie\u00dftext wird aufgrund der guten Lesbarkeit fast immer Schwarz oder Wei\u00df verwendet. Und einige Farben sind universell einsetzbar, wie z. B. Rot, um Fehler zu kennzeichnen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Farbpsychologie_nutzen\"><\/span>Farbpsychologie nutzen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Untersuchungen haben ergeben, dass Menschen innerhalb der <a href=\"https:\/\/www.colorcom.com\/research\/why-color-matters\" target=\"_blank\" rel=\"noopener\">ersten 90 Sekunden, in denen sie<\/a> ein Produkt <a href=\"https:\/\/www.colorcom.com\/research\/why-color-matters\" target=\"_blank\" rel=\"noopener\">sehen<\/a>, ein erstes Urteil \u00fcber dieses Produkt f\u00e4llen.<\/p>\n\n\n\n<p>Und viele dieser blitzschnellen Entscheidungen beruhen auf der Farbpsychologie.<\/p>\n\n\n\n<p>Farbpsychologie ist die emotionale Wirkung, die Farben auf Menschen haben. F\u00fcr einen UI-Designer ist dies von gro\u00dfem Nutzen, da man den Zustand und die Stimmung eines Benutzers durch die Verwendung der richtigen Farben ver\u00e4ndern kann.<\/p>\n\n\n\n<p>Der Kern der Farbpsychologie ist die Vorstellung von W\u00e4rme und K\u00fchle.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/hvxM8YYmEPlxla-pF0DlRAsw8m91H11Kmom2y8ACE99eDgw_W9yfscZaVjb73rFdsILFEblXG7HrBLI8B4F1sCDV_mCbf3pFIi8cskUyLKAOoZqNsSCjjfwXADvkCRkxeevmxE5JUWCZEIIrBjehDDa8u1MygyITsrkmC7k2UZz0ERc9CXn0WVMVXg\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/bootcamp.uxdesign.cc\/color-psychology-and-its-best-practices-in-ui-ux-design-ffdd4934a4fc\" target=\"_blank\" rel=\"noopener\">Glovory Design<\/a><\/p>\n\n\n\n<p>Warme Farben werden im Allgemeinen als dynamischer und aktiver angesehen. Sie k\u00f6nnen jedoch entweder Gl\u00fcck und Leidenschaft oder Gefahr und Feindseligkeit hervorrufen. <\/p>\n\n\n\n<p>K\u00fchle Farben hingegen sind ruhiger und beruhigender. Sie k\u00f6nnen aber auch f\u00fcr Traurigkeit stehen.<\/p>\n\n\n\n<p>Aber das sind nur grobe Anhaltspunkte.<\/p>\n\n\n\n<p>Bestimmte Farben haben auch ihre eigenen Emotionen und Stimmungen. Sehen Sie sich diese Tabelle an:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/5F-dGnIhwZSb8cCoSennQ9BPMhNGLm5p6vKWSRH77UElQconPLLfmGDC4gYvZMBR84wnqCKroWLJ39bMqPnie1W0slYEqKbxLPxRXqNzhcY2OZft0Mr6c4NixlMuJP9ALnxIpqqFlySNpxegaRqMob9iXVSNepnwcdhzyovLXXHpGaCeKZMkiEdKoQ\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.huffpost.com\/entry\/psychology-color-design-infographic_b_2516608\" target=\"_blank\" rel=\"noopener\">Huffpost<\/a><\/p>\n\n\n\n<p>Wenn Sie die Farbpsychologie kennen, werden Sie verstehen, warum manche Anwendungen eine bestimmte Farbe einer anderen vorziehen.<\/p>\n\n\n\n<p>Beachten Sie zum Beispiel, dass viele Finanz-Apps Blau als Hauptfarbe verwenden. Das liegt daran, dass Blau ein Gef\u00fchl von Vertrauen und Zuverl\u00e4ssigkeit vermittelt, was wichtig ist, wenn man mit dem Geld anderer Leute umgeht.<\/p>\n\n\n\n<p>Auf der anderen Seite verwenden <em>Spa\u00df-Apps <\/em>wie Spiele oft eine rote oder orangefarbene Palette. Das liegt daran, dass beides warme Farben sind, was bedeutet, dass sie dynamisch sind. <\/p>\n\n\n\n<p>Und nicht nur das: Sie wecken beim Benutzer auch Gef\u00fchle wie Aufregung, Freundlichkeit und Vertrauen.<\/p>\n\n\n\n<p>Die Farbpsychologie kann sogar die Handlungen der Nutzer beeinflussen, um die Konversionsrate zu erh\u00f6hen.<\/p>\n\n\n\n<p><a href=\"https:\/\/amasty.com\/blog\/best-color-add-cart-buy-button\/\" target=\"_blank\" rel=\"noopener\">Diese Studie<\/a> zeigt zum Beispiel, dass Rot die effektivste Farbe f\u00fcr eine <em>Kaufschaltfl\u00e4che <\/em>ist, weil sie ein Gef\u00fchl der Dringlichkeit hervorruft.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/5Aovr2uzIKIwq9wGYDEiJy1Tx8oN-nBZHF-gFZr1gsRIlNXtJecxCiq5v26yMeJp48V9mMY3ehTutgHPFKJ-fwC7kbdzzV3DsQFb5pG08ItS4lpU9Ytkdf2g8_b4ErKWGpKsZ1yIYHrYlBDIowRe_l1PoxS3py4t8CTJFLdqdE2H9F-AS_0zR7wZTA\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/amasty.com\/blog\/best-color-add-cart-buy-button\/\" target=\"_blank\" rel=\"noopener\">Amasty<\/a><\/p>\n\n\n\n<p>Aber wie bei allem anderen sind auch diese Ergebnisse keine unumst\u00f6\u00dflichen Wahrheiten.<\/p>\n\n\n\n<p>Als die Forscher zum Beispiel die oben genannte Studie in der Unterhaltungselektronikbranche durchf\u00fchrten, f\u00fchrte eine gr\u00fcne Kaufschaltfl\u00e4che zu den h\u00f6chsten Ums\u00e4tzen.<\/p>\n\n\n\n<p>Letztendlich wird die Kombination von Farbpsychologie und solider Marktforschung die besten Ergebnisse liefern.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Nutzen_Sie_die_Farben_der_App-Kategorien\"><\/span>Nutzen Sie die Farben der App-Kategorien<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In den meisten F\u00e4llen neigen Apps derselben Kategorie dazu, \u00e4hnliche Farbpaletten zu verwenden. Daher ist es eine gute Idee, die gleiche Farbpalette wie die anderen Apps in Ihrer Nische zu verwenden.<\/p>\n\n\n\n<p>Den Farbkonventionen der von Ihnen gew\u00e4hlten 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\u00e4llen dient es auch einem praktischen Zweck.<\/p>\n\n\n\n<p>Nehmen Sie Apps f\u00fcr soziale Medien. Beachten Sie, dass die meisten von ihnen ein blaues Farbschema haben:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/P9RNNUUPMuL-Lc59GZ3Mv3mN8HNVBiAiOfUxuj-HA-PVBFuz2xNrC5e_cFL3ZDOfDKBe3LxdlB61zLDG4gx6x-t748vyNmRisLSIpucTMoeX5msF-89o3sCxhjCjdWCPL77u4mfu1BDrTimrOtE2EAJlLl4o9bEEFsikaagANYzpFdylmlt3gosIeg\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.dewsolutions.in\/things-to-consider-while-picking-colors-for-your-mobile-app-design\/\" target=\"_blank\" rel=\"noopener\">Dew Solutions<\/a><\/p>\n\n\n\n<p>Blau ist beliebt, weil es gut zu Text passt, und den gibt es bei Social-Media-Apps in H\u00fclle und F\u00fclle. Au\u00dferdem sind viele Nutzer bereits damit vertraut, dass soziale Medien eine blaue Farbpalette verwenden.<\/p>\n\n\n\n<p>Ein weiteres Beispiel ist der Trend zu Liefer-Apps, die rote Farbt\u00f6ne verwenden.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/mRoYU84jGHdfiIwc_9Ls-Z3XehUDLgBaa_hKjtqM5nPdhvl32tiW94tGZEbYDcQ1H9pEkld1Q1He8PqC8y1EL7ZQjYPvTgVSTnKl_nHh6BATZJmnYfLWaHZ2U6wrPTqdAVsSU1aMhwRybe_2aM-LFjM9tL8JbsYnSpu2ZGEpIb8oFm2Ofik3Mg06-g\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.apptunix.com\/blog\/mobile-app-color-themes\/\" target=\"_blank\" rel=\"noopener\">Apptunix<\/a><\/p>\n\n\n\n<p>Denken Sie daran, dass Rot mit Energie und Schnelligkeit assoziiert wird &#8211; Eigenschaften, die f\u00fcr Lieferdienste w\u00fcnschenswert sind. <\/p>\n\n\n\n<p>Dar\u00fcber hinaus kann Rot auch Hunger und Appetit wecken, weshalb viele Fastfood-Restaurants diese Farbe verwenden.<\/p>\n\n\n\n<p>Die Verwendung von Rot in Ihrer Liefer-App ist wie eine <em>Anleihe bei <\/em>diesen bereits etablierten Eigenschaften. Die Menschen w\u00fcrden erwarten, dass Ihre App einen schnellen Service bietet. <\/p>\n\n\n\n<p>Das Einzige, was Sie tun m\u00fcssen, ist, dieses Versprechen zu erf\u00fcllen.<\/p>\n\n\n\n<p>Mit den Farbkonventionen Ihrer Kategorie zu brechen, kann riskant sein, aber es gibt Situationen, in denen es klug sein kann. <\/p>\n\n\n\n<p>Ein gutes Beispiel ist, wenn Sie sich von einem Meer von Apps mit denselben Farben abheben wollen.<\/p>\n\n\n\n<p>Aber in den meisten F\u00e4llen ist es einfacher (und sicherer), bei dem zu bleiben, was funktioniert.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Farbpalettengeneratoren_verwenden\"><\/span>Farbpalettengeneratoren verwenden<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Farbpalettengeneratoren sind wohl das n\u00fctzlichste Tool, um zu entscheiden, welche Farbe Sie f\u00fcr Ihr UI-Design verwenden m\u00f6chten.<\/p>\n\n\n\n<p>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\u00e4ftigt, hei\u00dft Farbtheorie.<\/p>\n\n\n\n<p>Das Herzst\u00fcck der Farbtheorie ist das Farbrad, ein kreisf\u00f6rmiges Diagramm, das Farben strategisch anordnet, etwa so:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/LPPUK1bL4MkAfKQkW4N6jtEH3s2YpD3DoYbA0T1IxXj6l8pJcNFr5g14CnqMOgqw3UMUkE_nDZwgE8kB4DcRBsDuaUm6KADR38CDhmAAAZ8H-jhhcvoZkLT3yZZETP8kNMDH29eXYxlAVHb_oq0I3PKoNmMVDmj0rTGqgeYvsouqvLiGcqIEj0H7_A\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.color-meanings.com\/primary-secondary-tertiary-colors\/\" target=\"_blank\" rel=\"noopener\">Bedeutungen von Farben<\/a><\/p>\n\n\n\n<p>Bei der Auswahl der Farben k\u00f6nnen Sie verschiedene <strong>Farbschemata<\/strong> verwenden, je nachdem, welchen Effekt Sie erzielen m\u00f6chten. <\/p>\n\n\n\n<p>Bei einem <strong>monochromen <\/strong>Ansatz werden beispielsweise Schattierungen aus nur einer Farbe ausgew\u00e4hlt (z. B. dunkles Lila und helles Lila aus Lila). Dies ist ideal f\u00fcr minimalistische Designs.<\/p>\n\n\n\n<p>Bei einem <strong>komplement\u00e4ren <\/strong>Ansatz hingegen werden zwei gegen\u00fcberliegende Farben des Farbkreises ausgew\u00e4hlt. <\/p>\n\n\n\n<p>Komplement\u00e4rfarben bieten einen starken Kontrast, der dazu beitr\u00e4gt, dass Elemente im Design hervorstechen.<\/p>\n\n\n\n<p>Wenn Sie drei Farben in einem Design ausbalancieren m\u00f6chten, k\u00f6nnen Sie <strong>triadische <\/strong>Farben w\u00e4hlen.<\/p>\n\n\n\n<p>Es gibt aber auch noch andere Methoden, aus denen Sie w\u00e4hlen k\u00f6nnen:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/HalcVEDiJ96_L4xdfW89VMy10CEKHK77WBprM14bJnwSjWxAzVxhC7Urgv21c940QyqeF91-Arkd8Yz0rTSdh71qP-cbHQUl3vrFhz8M69lGTbZkbGaSfWHVtUbzRhh7zpw1NhIqKmV8UxvhqsNrfXpl39tdTb1WBRV3ml4OW56BG4ftUO6N0yCKuw\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.interaction-design.org\/literature\/topics\/color-theory\" target=\"_blank\" rel=\"noopener\">Stiftung f\u00fcr Interaktionsdesign<\/a><\/p>\n\n\n\n<p>Das scheint eine Menge zu sein, die man im Kopf behalten muss. <\/p>\n\n\n\n<p>Aber der Hauptvorteil eines Palettengenerators ist, dass er den Prozess f\u00fcr Sie automatisiert. <\/p>\n\n\n\n<p>Sie k\u00f6nnen sich f\u00fcr eine Methode entscheiden, und die Software w\u00e4hlt die richtigen Farben f\u00fcr Sie aus, ohne viel zu raten.<\/p>\n\n\n\n<p>Einige Generatoren verf\u00fcgen sogar \u00fcber eine Zufallsfunktion, mit der Sie sich durch Farbpaletten klicken k\u00f6nnen, um sich inspirieren zu lassen.<\/p>\n\n\n\n<p>Gl\u00fccklicherweise gibt es im Internet eine Vielzahl von Farbgeneratoren, sowohl kostenpflichtige als auch kostenlose. Gute Tools f\u00fcr den Anfang sind <a href=\"https:\/\/coolors.co\/\" target=\"_blank\" rel=\"noopener\">Coolors<\/a> und <a href=\"https:\/\/colors.muz.li\/\" target=\"_blank\" rel=\"noopener\">Muzli Colors<\/a>. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Wie_Sie_eine_hervorragende_UX_erreichen\"><\/span>Wie Sie eine hervorragende UX erreichen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Zweifellos kann die Wahl der richtigen Farben Wunder f\u00fcr die UX Ihrer Anwendung bewirken.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Der beste Weg, sich darauf vorzubereiten, ist, sich Wissen anzueignen. <\/p>\n\n\n\n<p id=\"h.30j0zll\">Als weitere Lekt\u00fcre empfehlen wir Ihnen, die <a href=\"https:\/\/decode.agency\/article\/app-ux-design-mistakes\/\" target=\"_blank\" rel=\"noopener\">wichtigsten UX-Fehler, die Sie vermeiden sollten<\/a>, zu lesen. Sie k\u00f6nnen sich auch mit den <a href=\"https:\/\/decode.agency\/article\/ux-trends\/\" target=\"_blank\" rel=\"noopener\">wichtigsten UX-Trends<\/a> vertraut machen, die Ihrer App zum Erfolg verhelfen k\u00f6nnten.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Farbe ist vielleicht einer der wirkungsvollsten Aspekte des UX-Designs. Dieser Leitfaden hilft Ihnen bei der Auswahl der besten Farbpalette f\u00fcr Apps.<\/p>\n","protected":false},"featured_media":57647,"template":"","tags":[],"article_category":[],"class_list":["post-63926","article","type-article","status-publish","has-post-thumbnail","hentry"],"cmb2":{"custom_author_metabox":{"custom_author1_id":"60999","custom_author2_id":"","custom_author3_id":""},"pages_metabox":{"page_footer_cta":"cta3"},"feature_metabox":{"featured_blog_post":""},"related_article_metabox":{"related_article_id_1":"63896","related_article_id_2":"63894","related_article_id_3":"63890"}},"_links":{"self":[{"href":"https:\/\/decode.agency\/de\/wp-json\/wp\/v2\/article\/63926","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/decode.agency\/de\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/decode.agency\/de\/wp-json\/wp\/v2\/types\/article"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/decode.agency\/de\/wp-json\/wp\/v2\/media\/57647"}],"wp:attachment":[{"href":"https:\/\/decode.agency\/de\/wp-json\/wp\/v2\/media?parent=63926"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/decode.agency\/de\/wp-json\/wp\/v2\/tags?post=63926"},{"taxonomy":"article_category","embeddable":true,"href":"https:\/\/decode.agency\/de\/wp-json\/wp\/v2\/article_category?post=63926"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}