{"id":63892,"date":"2022-09-28T14:13:44","date_gmt":"2022-09-28T14:13:44","guid":{"rendered":"https:\/\/decode.agency\/?post_type=article&#038;p=63892"},"modified":"2025-08-25T07:25:42","modified_gmt":"2025-08-25T07:25:42","slug":"farbschema-trends-im-design-mobiler-apps","status":"publish","type":"article","link":"https:\/\/decode.agency\/de\/article\/farbschema-trends-im-design-mobiler-apps\/","title":{"rendered":"Farbschema-Trends im Design mobiler Apps"},"content":{"rendered":"\n<p>Farbe ist eines der m\u00e4chtigsten Marketinginstrumente, die Ihnen zur Verf\u00fcgung stehen.<\/p>\n\n\n\n<p>Sie kann Emotionen wecken, Stimmungen ver\u00e4ndern und das Bewusstsein beeinflussen. Laut einer <a href=\"https:\/\/www.colorcom.com\/research\/why-color-matters#:~:text=76%25%20believe%20that%20the%20use%20of%20color%20makes%20their%20business%20appear%20larger%20to%20clients\" target=\"_blank\" rel=\"noopener\">Studie der Xerox Corporation<\/a> kann sie Sie sogar erfolgreicher erscheinen lassen, als Sie sind.<\/p>\n\n\n\n<p>Aber wie bei jedem Werkzeug ist der richtige Einsatz von Farbe entscheidend, um ihre Vorteile zu nutzen.<\/p>\n\n\n\n<p>Und das ist leichter gesagt als getan.<\/p>\n\n\n\n<p>Schlie\u00dflich gibt es Hunderte von Farbt\u00f6nen, Nuancen und Schattierungen. Wie w\u00e4hlt man die richtige aus?<\/p>\n\n\n\n<p>Hier kommen <a href=\"https:\/\/decode.agency\/de\/article\/mobile-app-design-farbpalette\/\" target=\"_blank\" rel=\"noopener\">Farbschemata<\/a> ins Spiel.<\/p>\n\n\n\n<p>Ein Farbschema ist wie ein Leitfaden. Es hilft Ihnen, Ihre Farbauswahl auf einige wenige einzugrenzen, je nachdem, was Sie mit Ihrem <a href=\"https:\/\/decode.agency\/de\/article\/mobile-app-design-elemente\/\" target=\"_blank\" rel=\"noopener\">UI-Design<\/a> erreichen wollen.<\/p>\n\n\n\n<p>Hier sind einige trendige Farbschemata, die Sie kennen sollten.<\/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-69e751b8db5e7\" 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-69e751b8db5e7\"  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\/farbschema-trends-im-design-mobiler-apps\/#Minimalistische_Farbschemata\" >Minimalistische Farbschemata<\/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\/farbschema-trends-im-design-mobiler-apps\/#Monochrome_Farbschemata\" >Monochrome Farbschemata<\/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\/farbschema-trends-im-design-mobiler-apps\/#Lebendige_Farbschemata\" >Lebendige Farbschemata<\/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\/farbschema-trends-im-design-mobiler-apps\/#Pastellfarbene_Schemata\" >Pastellfarbene Schemata<\/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\/farbschema-trends-im-design-mobiler-apps\/#Gedaempfte_Farbschemata\" >Ged\u00e4mpfte Farbschemata<\/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\/farbschema-trends-im-design-mobiler-apps\/#Farbverlaeufe\" >Farbverl\u00e4ufe<\/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\/farbschema-trends-im-design-mobiler-apps\/#Farbe_ist_nur_ein_Teil_des_UI-Designs\" >Farbe ist nur ein Teil des UI-Designs<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Minimalistische_Farbschemata\"><\/span>Minimalistische Farbschemata<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Minimalismus ist ein Trend, der sich auf die Philosophie <em>&#8222;weniger ist mehr&#8220; <\/em>konzentriert. Er zielt darauf ab, alles \u00dcberfl\u00fcssige aus einem Design zu entfernen, damit sich der Benutzer auf die wesentlichen Elemente konzentrieren kann.<\/p>\n\n\n\n<p>Dieser Ansatz kann auch auf Farbschemata angewandt werden. Anstatt das <a href=\"https:\/\/decode.agency\/article\/mobile-app-design-best-practices\/\" target=\"_blank\" rel=\"noopener\">UI-Design<\/a> mit Farbe zu f\u00fcllen, geht man sparsam mit ihr um und f\u00fcllt den leeren Raum mit viel Wei\u00df oder Graut\u00f6nen.<\/p>\n\n\n\n<p>Die Prim\u00e4rfarbe in einem minimalistischen Schema wird haupts\u00e4chlich f\u00fcr wichtige UI-Steuerelemente wie Schaltfl\u00e4chen und Schieberegler verwendet. Hier ist ein gutes Beispiel f\u00fcr ein minimalistisches Farbschema:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/example-of-a-minimalistic-color-scheme.png\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/dribbble.com\/shots\/14671718\/attachments\/6368171?mode=media\" target=\"_blank\" rel=\"noopener\">Dribbble<\/a><\/p>\n\n\n\n<p>Beim Minimalismus werden oft nur ein oder zwei Farben verwendet, um das Risiko zu verringern, dass der <a href=\"https:\/\/decode.agency\/de\/article\/app-design-bildschirmtypen\/\" target=\"_blank\" rel=\"noopener\">Bildschirm<\/a> durch zu viele Farbt\u00f6ne verunreinigt wird. <\/p>\n\n\n\n<p>Sie <em>k\u00f6nnen<\/em> jedoch mehrere Farben erfolgreich in einem minimalistischen Design verwenden. Wichtig ist nur, <em>wie <\/em>Sie sie anordnen.<\/p>\n\n\n\n<p>Farben in einem minimalistischen Schema k\u00f6nnen nach jeder Methode ausgew\u00e4hlt werden (z. B. komplement\u00e4r, triadisch oder analog). <\/p>\n\n\n\n<p>Meistens werden jedoch sanftere T\u00f6ne verwendet. Kr\u00e4ftige Farben werden, wenn \u00fcberhaupt, nur selten verwendet.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/soft-shades.png\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.jordanprindledesigns.com\/blog\/color-palettes\" target=\"_blank\" rel=\"noopener\">Jordan Prindle Designs<\/a><\/p>\n\n\n\n<p>Ein minimalistisches Farbschema ist sehr beliebt, da es sich hervorragend f\u00fcr die <a href=\"https:\/\/decode.agency\/article\/mobile-ux-design-dos-donts\/\" target=\"_blank\" rel=\"noopener\">Benutzerfreundlichkeit<\/a> eignet.<\/p>\n\n\n\n<p>Die gro\u00dfz\u00fcgige Verwendung von wei\u00dfem Raum erleichtert das Auffinden von Elementen auf dem Bildschirm, da ein starker Kontrast vorhanden ist. <\/p>\n\n\n\n<p>Ein sauberes <a href=\"https:\/\/decode.agency\/article\/mobile-app-design-process\/\" target=\"_blank\" rel=\"noopener\">Design<\/a> ist auch sehr augenfreundlich, was die Nutzung Ihrer App entspannend machen kann.<\/p>\n\n\n\n<p>Minimalismus verleiht Ihrem Design auch eine gewisse Eleganz, die es von der Masse abheben k\u00f6nnte. <\/p>\n\n\n\n<p>Es sieht professioneller aus, was gut passt, wenn Sie seri\u00f6sere Apps f\u00fcr Finanz- oder Unternehmensnischen entwerfen.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/clean-design-example.png\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/dribbble.com\/shots\/8631208-Unix-Banking-App\" target=\"_blank\" rel=\"noopener\">Dribbble<\/a><\/p>\n\n\n\n<p>Au\u00dferdem ben\u00f6tigen Sie weniger Elemente, wenn Sie einen minimalistischen Ansatz w\u00e4hlen. Dadurch k\u00f6nnen Sie Ihre Entwicklungszeit verk\u00fcrzen und die Kosten senken.<\/p>\n\n\n\n<p>Machen Sie jedoch nicht den Fehler zu denken, dass Minimalismus einfach oder faul ist. Um herauszufinden, was man aus einem Entwurf herausnehmen sollte, braucht man Erfahrung und Geschick. <\/p>\n\n\n\n<p>Aber wenn Sie es schaffen, werden Sie mit einem Farbschema belohnt, das die meisten Benutzer sch\u00e4tzen werden.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Monochrome_Farbschemata\"><\/span>Monochrome Farbschemata<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Bei einem monochromen Schema werden verschiedene Schattierungen, T\u00f6ne und Schattierungen einer einzigen Farbe verwendet. <\/p>\n\n\n\n<p>Hier ist ein Beispiel daf\u00fcr, wie es aussieht:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/monochromatic-scheme-example.png\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/medium.com\/@Adoriasoft\/mobile-app-design-14-trendy-color-schemes-2669b5bb77d3\" target=\"_blank\" rel=\"noopener\">Medium<\/a><\/p>\n\n\n\n<p>Der Hauptvorteil eines monochromen Farbschemas besteht darin, dass Sie auf einfache Weise Harmonie in Ihrem Design schaffen k\u00f6nnen. Es ist perfekt, wenn Sie nicht zu viel Zeit in die Gestaltung Ihrer App-UI investieren k\u00f6nnen.<\/p>\n\n\n\n<p>Normalerweise m\u00fcssen Sie besonders darauf achten, dass die einzelnen Elemente in Ihrem Design gut zusammenpassen, vor allem, wenn sie in unterschiedlichen Farben gehalten sind. <\/p>\n\n\n\n<p>Aber die Schattierungen und T\u00f6nungen eines einzigen Farbtons passen bereits gut zusammen und sorgen daf\u00fcr, dass Ihre Benutzeroberfl\u00e4che gro\u00dfartig aussieht.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/app-design-examples.png\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/dribbble.com\/shots\/11207721-Growing-App\" target=\"_blank\" rel=\"noopener\">Dribbble<\/a><\/p>\n\n\n\n<p>Monochromatische Farben tragen auch dazu bei, dass andere Elemente in Ihrer Benutzeroberfl\u00e4che hervorstechen. So hebt sich beispielsweise schwarzer oder wei\u00dfer Text leicht ab, wenn Sie ein blaues Motiv haben (wie bei den meisten Social-Media-Apps).<\/p>\n\n\n\n<p>Aus psychologischer Sicht helfen monochrome Schemata den Nutzern auch, Ihre Benutzeroberfl\u00e4che schneller zu verarbeiten. <\/p>\n\n\n\n<p>Das liegt daran, dass das Gehirn laut <a href=\"https:\/\/www.verywellmind.com\/what-is-gestalt-psychology-2795808#toc-principles-of-gestalt-psychology\" target=\"_blank\" rel=\"noopener\">Gestaltpsychologie<\/a> immer nach vertrauten Mustern und <em>sich wiederholenden Farben<\/em> sucht.<\/p>\n\n\n\n<p>In vielerlei Hinsicht bietet eine monochrome Farbpalette \u00e4hnliche Vorteile wie ein minimalistisches Farbschema. Tats\u00e4chlich ist die Verwendung einer einzigen Farbe eine der effektivsten Methoden, um Minimalismus zu praktizieren.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/dribble-screenshot.png\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/dribbble.com\/shots\/2673107-Javanese-Translator-App\/attachments\/9424961?mode=media\" target=\"_blank\" rel=\"noopener\">Dribbble<\/a><\/p>\n\n\n\n<p>Eine monochromatische Farbpalette ist auch ein wichtiger Aspekt eines neumorphen Designs.<\/p>\n\n\n\n<p>Neumorphismus ist ein Trend im UI-Design, bei dem Elemente der realen Welt simuliert werden, ohne sie jedoch fotorealistisch aussehen zu lassen. <\/p>\n\n\n\n<p>Er zeichnet sich durch einen geringen Kontrast, weiche Schatten und eine monochromatische Palette aus.<\/p>\n\n\n\n<p>Hier sehen Sie, wie ein neumorphes Design im Vergleich zu zwei anderen beliebten Ans\u00e4tzen aussieht &#8211; flaches Design und Skeuomorphismus.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/comparison-between-neumorphism-and-skeuomophism-and-flat-design.png\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.justinmind.com\/ui-design\/neumorphism\" target=\"_blank\" rel=\"noopener\">Just in Mind<\/a><\/p>\n\n\n\n<p>Ein monochromes Farbschema eignet sich auch hervorragend f\u00fcr die Einbindung von Markenfarben in das App-Design. <\/p>\n\n\n\n<p>Sehen Sie sich zum Beispiel an, wie dieses UI-Design das bekannte gelbe Schema des McDonald&#8217;s-Logos erfolgreich umsetzt.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/McDonalds-yellow-scheme.png\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/farahiskandar.medium.com\/redesigning-happiness-at-a-click-of-a-button-mcdelivery-ux-ui-proposal-36058b23673d\" target=\"_blank\" rel=\"noopener\">Farah Iskandar<\/a><\/p>\n\n\n\n<p>Unterm Strich ist eine monochrome Palette ein hervorragendes Schema, wenn Sie mit minimalem Aufwand eine Farbharmonie erreichen wollen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Lebendige_Farbschemata\"><\/span>Lebendige Farbschemata<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Lebendige Farbschemata verwenden helle und ges\u00e4ttigte Farbt\u00f6ne als Hauptfarben im Design und nicht nur als Akzente, wie bei anderen Paletten. <\/p>\n\n\n\n<p>Um Elemente voneinander zu trennen, verwenden Sie in der Regel kontrastreiche Farben, wie in der folgenden Abbildung:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/high-contrast-colors-example.png\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/blog.adobe.com\/en\/publish\/2017\/09\/12\/playing-with-color-vibrant-options-for-apps-and-websites\" target=\"_blank\" rel=\"noopener\">Adobe Blog<\/a><\/p>\n\n\n\n<p>Lebendige Farbschemata sollen ein Statement setzen. Sie sind in der Regel sehr plakativ und daher sehr effektiv, um Benutzer anzulocken. <\/p>\n\n\n\n<p>Au\u00dferdem machen sie Ihre App im Vergleich zu Ihren Mitbewerbern sofort erkennbar und einpr\u00e4gsam.<\/p>\n\n\n\n<p>Sehen Sie sich zum Beispiel die lebendige und schrullige Farbpalette der Cleo-App an. Ihr Ziel ist es, sich von den anderen digitalen Banking-Apps auf dem Markt abzuheben &#8211; und das ist ihnen gelungen.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/Frame.png\" 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>Ein lebhaftes Farbschema eignet sich hervorragend, um die Emotionen Ihrer Nutzer zu wecken. Die hohe Energie der Farben f\u00fchrt bei den Nutzern oft zu Gef\u00fchlen von Leidenschaft und Gl\u00fcck. <\/p>\n\n\n\n<p>Aber die Farbpalette ist nicht nur darauf beschr\u00e4nkt. Sie kann auch andere Gef\u00fchle hervorrufen, z. B. Vertrauensw\u00fcrdigkeit.<\/p>\n\n\n\n<p>Hier ist ein Beispiel aus der Tide-App. Beachten Sie, wie die hellen Blaut\u00f6ne und lila\/gr\u00fcnen Akzente Stabilit\u00e4t und Sicherheit hervorheben.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/The-psychology-of-color-is-an-important-consideration-in-UX-design.png\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.toptal.com\/designers\/ux\/color-psychology\" target=\"_blank\" rel=\"noopener\">Toptal<\/a><\/p>\n\n\n\n<p>Dar\u00fcber hinaus sind lebendige Farbpaletten sehr flexibel. Sie k\u00f6nnen ges\u00e4ttigte Schattierungen einer einzigen Farbe verwenden, um eine monotone, satte Palette zu schaffen. <\/p>\n\n\n\n<p>Oder Sie k\u00f6nnen verschiedene Farben kombinieren, um etwas wirklich K\u00fchnes zu erreichen.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/use-of-saturated-shades-of-a-single-color-to-create-a-monotone-rich-palette.png\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/dribbble.com\/shots\/15555142\/attachments\/7337921?mode=media\" target=\"_blank\" rel=\"noopener\">Dribbble<\/a><\/p>\n\n\n\n<p>In der Tat sind die M\u00f6glichkeiten mit einer lebendigen Farbpalette endlos. Sie ist ideal, wenn Sie bei der Gestaltung Ihrer Benutzeroberfl\u00e4che kreativ werden wollen.<\/p>\n\n\n\n<p>Ein lebhaftes Farbschema ist jedoch auch ein zweischneidiges Schwert. Man kann es leicht \u00fcbertreiben und ein buntes Durcheinander schaffen. <\/p>\n\n\n\n<p>Daher empfehlen wir Ihnen, sich zur\u00fcckzuhalten und <a href=\"https:\/\/decode.agency\/article\/mobile-app-usability-testing\/\" target=\"_blank\" rel=\"noopener\">die Benutzerfreundlichkeit<\/a> ausgiebig <a href=\"https:\/\/decode.agency\/article\/mobile-app-usability-testing\/\" target=\"_blank\" rel=\"noopener\">zu testen<\/a>, um das richtige Gleichgewicht zu finden, das Ihre Benutzer akzeptieren werden.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Pastellfarbene_Schemata\"><\/span>Pastellfarbene Schemata<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Eine Pastellfarbe ist eine Prim\u00e4r- oder Sekund\u00e4rfarbe mit einem hohen Wei\u00dfanteil, der ihr eine hohe Helligkeit, aber eine geringe S\u00e4ttigung verleiht. Dies f\u00fchrt zu der charakteristischen Bl\u00e4sse von Pastellfarben.<\/p>\n\n\n\n<p>Pastellfarben sind das Gegenteil der gerade besprochenen lebhaften Farbpalette. Anstatt ges\u00e4ttigte Farben zu verwenden, konzentrieren sich Pastellfarben eher auf ged\u00e4mpfte Farbt\u00f6ne.<\/p>\n\n\n\n<p>Hier ist eine Illustration, die beide nebeneinander stellt, damit Sie den Unterschied sehen k\u00f6nnen. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/Pastel-color-schemes.png\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/buildingtheblog.com\/how-to-choose-colors-that-fit-your-blog-brand\/\" target=\"_blank\" rel=\"noopener\">Building the Blog<\/a><\/p>\n\n\n\n<p>Der Hauptvorteil eines pastellfarbenen Farbschemas ist seine weiche und feminine Qualit\u00e4t. Das macht sie zur bevorzugten Farbe f\u00fcr Apps, die sich an Frauen oder sogar Kinder richten. <\/p>\n\n\n\n<p>Pastellfarben k\u00f6nnen jedoch nicht nur f\u00fcr diese Zwecke verwendet werden. Sie haben auch eine beruhigende Wirkung auf die Augen und machen Ihre Benutzeroberfl\u00e4che zu einem wahren Augenschmaus. <\/p>\n\n\n\n<p>Dies kann auch zur Beruhigung von Emotionen und Nerven beitragen, weshalb sie eine beliebte Farbpalette f\u00fcr Wellness-Apps sind.<\/p>\n\n\n\n<p>Schauen Sie sich zum Beispiel das UI-Design der Meditations-App Headspace an, bei dem Pastellfarben gro\u00dfz\u00fcgig eingesetzt werden.<\/p>\n\n\n\n<p>Beachten Sie, dass die Benutzeroberfl\u00e4che sehr beruhigend wirkt, obwohl das Design eine Vielzahl von Farben enth\u00e4lt. Stellen Sie sich vor, es w\u00e4ren stattdessen helle Farben &#8211; das w\u00e4re wahrscheinlich sehr anstrengend f\u00fcr Ihre Augen!<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/App-Store-screenshots.png\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.uisources.com\/app\/headspace\" target=\"_blank\" rel=\"noopener\">UI-Quellen<\/a><\/p>\n\n\n\n<p>Dies zeigt, dass auch pastellfarbene Designs verschiedene Emotionen hervorrufen k\u00f6nnen. <\/p>\n\n\n\n<p>Es besteht der Irrglaube, dass sanftere Farben langweilig und k\u00fcnstlich sein k\u00f6nnen, doch die Headspace-App hat in ihrem UI-Design trotzdem ein Gef\u00fchl von Spa\u00df eingefangen.<\/p>\n\n\n\n<p id=\"h.30j0zll\">Vor allem aber k\u00f6nnen Pastellfarben ein warmes und einladendes Gef\u00fchl vermitteln. Hier ist ein Beispiel:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/example-of-pastel-shades.png\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.getfeedback.com\/resources\/ux\/the-effects-of-pastel-colors-in-web-design\/#:~:text=They%20can%20be%20used%20to,well%20with%20women&#039;s%20fashion%20sites.\" target=\"_blank\" rel=\"noopener\">Get Feedback<\/a><\/p>\n\n\n\n<p>Tatsache ist, dass Pastellfarben die Benutzer genauso effektiv in Ihre Benutzeroberfl\u00e4che locken k\u00f6nnen wie eine laute, lebendige Farbpalette. Sie tun dies nur auf unterschiedliche Weise.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Gedaempfte_Farbschemata\"><\/span>Ged\u00e4mpfte Farbschemata<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Gedeckte Farben \u00e4hneln den Pastellfarben insofern, als sie eine geringe S\u00e4ttigung aufweisen. <\/p>\n\n\n\n<p>Der Unterschied besteht jedoch darin, dass Sie den Prim\u00e4rfarben kein Wei\u00df hinzuf\u00fcgen, sondern dunklere Farben wie Grau, Schwarz oder Braun.<\/p>\n\n\n\n<p>Das Ergebnis ist eine weniger lebhafte Farbe, die einen guten Kontrast zu lebhafteren Farben bildet. Hier ist ein Beispiel:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/Muted-color-scheme-example.png\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/medium.com\/@Adoriasoft\/mobile-app-design-14-trendy-color-schemes-2669b5bb77d3\" target=\"_blank\" rel=\"noopener\">Medium<\/a><\/p>\n\n\n\n<p>Gedeckte Farben haben die gleiche beruhigende Wirkung wie Pastellfarben und k\u00f6nnen daher auch in Designs verwendet werden, die eine sanftere Note haben sollen. <\/p>\n\n\n\n<p>Da sie jedoch nicht so farbenfroh sind, wirken gedeckte Paletten seri\u00f6ser.<\/p>\n\n\n\n<p>Diese Farbpalette wirkt auch eher edel und elegant. Schauen Sie sich an, wie majest\u00e4tisch der untenstehende App-Screenshot mit einem gedeckten Farbschema wirkt.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/Muted-color-scheme-example-2.png\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/fontsinuse.com\/uses\/4764\/partly-cloudy-weather-app\" target=\"_blank\" rel=\"noopener\">fontsinuse<\/a><\/p>\n\n\n\n<p>Gedeckte Farben sind neutral, was bedeutet, dass sie den gr\u00f6\u00dften Teil des UI-Designs ausmachen k\u00f6nnen. Sie spielen meist eine unterst\u00fctzende Rolle, damit andere Farben und Elemente im Design hervorstechen k\u00f6nnen.<\/p>\n\n\n\n<p>Ein guter Ansatz ist die Kombination von gedeckten T\u00f6nen als Grundfarbe mit kr\u00e4ftigeren oder pastelligen Farben als Akzente. <\/p>\n\n\n\n<p>Dadurch werden diese Elemente st\u00e4rker hervorgehoben und der Blick des Nutzers auf sie gelenkt. Au\u00dferdem bleibt Ihr UI-Design so interessant, ohne die Gesamtstimmung zu ver\u00e4ndern.<\/p>\n\n\n\n<p>Hier sehen Sie ein Beispiel daf\u00fcr. Beachten Sie, wie der ged\u00e4mpfte gr\u00fcne Hintergrund den leuchtenden Punkt des Logos viel besser hervorhebt.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/identity-branding-logo-.png\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.behance.net\/gallery\/74286959\/Personal-Branding?tracking_source=curated_galleries_graphic-design\" target=\"_blank\" rel=\"noopener\">Behance<\/a><\/p>\n\n\n\n<p>Ged\u00e4mpfte Farben spielen zwar in den meisten UI-Designs keine Hauptrolle, aber sie sind dennoch wichtig. Sie sind die Hintergrundfarben, die Ihre anderen Elemente zum Leuchten bringen k\u00f6nnen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Farbverlaeufe\"><\/span>Farbverl\u00e4ufe<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Unter Farbverl\u00e4ufen versteht man die allm\u00e4hlichen \u00dcberg\u00e4nge von einer Farbe zur anderen, wodurch interessante Farbt\u00f6ne in der Mitte entstehen. <\/p>\n\n\n\n<p>Ein Farbverlauf von Rot zu Gelb beispielsweise erzeugt verschiedene Oranget\u00f6ne.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/gradient-from-red-to-yellow-creates-various-shades-of-orange.png\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.sketchappsources.com\/free-source\/2413-sketch-color-gradients-collection.html\" target=\"_blank\" rel=\"noopener\">Sketch App Ressourcen<\/a><\/p>\n\n\n\n<p>Farbverl\u00e4ufe tragen dazu bei, dass die Benutzer Ihre Benutzeroberfl\u00e4che interessant finden. Sie k\u00f6nnen einem ansonsten gew\u00f6hnlichen Design einen gewissen Charakter und eine Pers\u00f6nlichkeit verleihen.<\/p>\n\n\n\n<p>Die Verwendung von Farbverl\u00e4ufen verleiht Ihrer Benutzeroberfl\u00e4che au\u00dferdem ein nat\u00fcrliches Gef\u00fchl. Das liegt daran, dass Farbverl\u00e4ufe in der realen Welt \u00fcberall vorkommen, von den Rot- und Gelbt\u00f6nen eines Sonnenuntergangs bis hin zu den Blau- und Gr\u00fcnt\u00f6nen des Ozeans.<\/p>\n\n\n\n<p>Ein weiterer Vorteil von Farbverl\u00e4ufen ist, dass sie sehr vielseitig sind. Sie k\u00f6nnen jede der oben aufgef\u00fchrten Farbpaletten aufwerten.<\/p>\n\n\n\n<p>Im folgenden UI-Design sehen Sie, wie die Verwendung von Farbverl\u00e4ufen die lebendige Farbpalette interessanter und dynamischer macht.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/using-gradients-makes-the-vibrant-color-palette-more-interesting-and-dynamic.png\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/medium.com\/@Adoriasoft\/mobile-app-design-14-trendy-color-schemes-2669b5bb77d3\" target=\"_blank\" rel=\"noopener\">Medium<\/a><\/p>\n\n\n\n<p>Farbverl\u00e4ufe haben auch praktische Anwendungen. <\/p>\n\n\n\n<p>Eine Technik ist die Verwendung von Farbverl\u00e4ufen, um das Auge des Benutzers durch das Design zu f\u00fchren. Dies k\u00f6nnen Sie im folgenden Beispiel sehen. <\/p>\n\n\n\n<p>Der Benutzer w\u00fcrde wahrscheinlich zuerst auf die \u00dcberschrift schauen, weil sie am auff\u00e4lligsten ist. <\/p>\n\n\n\n<p>Von dort aus hilft der \u00dcbergang von hell zu dunkel, den Blick des Nutzers nach unten auf den Call-to-Action (CTA) darunter zu lenken.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/Get-branded-screenshot.png\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/www.webdesignerdepot.com\/2018\/04\/10-reasons-to-love-and-use-gradients-in-2018\/\" target=\"_blank\" rel=\"noopener\">Web Designer Depot<\/a><\/p>\n\n\n\n<p>Wie bei den meisten mutigen Farbentscheidungen kann man es mit den Farbverl\u00e4ufen jedoch leicht \u00fcbertreiben. Das kann Ihr Design un\u00fcbersichtlich machen, anstatt ihm zu helfen. Daher sollte man Zur\u00fcckhaltung \u00fcben.<\/p>\n\n\n\n<p>Ein guter Ansatz ist die Verwendung ged\u00e4mpfter oder pastelliger Farben, die im Farbkreis nicht weit voneinander entfernt sind. Dadurch werden die \u00dcberg\u00e4nge weniger dramatisch, was zu einem subtileren Farbverlauf f\u00fchrt.<\/p>\n\n\n\n<p>Im folgenden Beispiel sehen Sie, wie die pastellfarbenen Verl\u00e4ufe einen beruhigenden Hintergrund schaffen. Auch wenn sie nicht so auff\u00e4llig sind, sp\u00fcren Sie ihre Wirkung auf das Design.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/decode.agency\/wp-content\/uploads\/2022\/09\/pastel-gradients-create-a-soothing-background-example.png\" alt=\"\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Quelle: <a href=\"https:\/\/medium.com\/@Adoriasoft\/mobile-app-design-14-trendy-color-schemes-2669b5bb77d3\" target=\"_blank\" rel=\"noopener\">Medium<\/a><\/p>\n\n\n\n<p>Farbverl\u00e4ufe k\u00f6nnen auch als Akzente verwendet werden, um Text, Schaltfl\u00e4chen, Symbole und andere kleinere Elemente einzuf\u00e4rben.<\/p>\n\n\n\n<p>Fazit: Farbverl\u00e4ufe eignen sich hervorragend zum Aufpeppen eines UI-Designs. Aber wie bei allem anderen auch, sollten Sie sie nur dann einsetzen, wenn es sinnvoll ist. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Farbe_ist_nur_ein_Teil_des_UI-Designs\"><\/span>Farbe ist nur ein Teil des UI-Designs<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Nachdem Sie diesen Artikel gelesen haben, haben Sie hoffentlich bereits eine Vorstellung von dem Farbschema, das Sie in Ihrer App verwenden m\u00f6chten.<\/p>\n\n\n\n<p>Aber so komplex die Farbauswahl auch ist, sie ist nur der Anfang. Sie m\u00fcssen auch andere Aspekte Ihres UI-Designs ber\u00fccksichtigen, z. B. Typografie, Layout und Navigation.<\/p>\n\n\n\n<p>Wenn Sie mehr \u00fcber dieses Thema erfahren m\u00f6chten, lesen Sie unseren <a href=\"https:\/\/decode.agency\/article\/mobile-app-design-principles\/\" target=\"_blank\" rel=\"noopener\">Artikel \u00fcber die Designprinzipien f\u00fcr mobile Apps<\/a>.<\/p>\n\n\n\n<p>Wenn Sie den Lernprozess \u00fcberspringen m\u00f6chten, k\u00f6nnen Sie auch mit DECODE zusammenarbeiten. Wir haben die Erfahrung und die Erfolgsbilanz, um Ihnen zu einem gro\u00dfartigen Design zu verhelfen, das Ihre Nutzer lieben werden.<\/p>\n\n\n\n<p>Interessiert? Setzen Sie sich noch heute mit uns in Verbindung und lassen Sie uns dar\u00fcber reden!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Farbe ist eines der wirkungsvollsten Marketinginstrumente. Deshalb stellen wir Ihnen in diesem Artikel einige trendige Farbschemata f\u00fcr Apps vor.<\/p>\n","protected":false},"featured_media":66343,"template":"","tags":[],"article_category":[],"class_list":["post-63892","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":"63890","related_article_id_2":"63208","related_article_id_3":"62188"}},"_links":{"self":[{"href":"https:\/\/decode.agency\/de\/wp-json\/wp\/v2\/article\/63892","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\/66343"}],"wp:attachment":[{"href":"https:\/\/decode.agency\/de\/wp-json\/wp\/v2\/media?parent=63892"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/decode.agency\/de\/wp-json\/wp\/v2\/tags?post=63892"},{"taxonomy":"article_category","embeddable":true,"href":"https:\/\/decode.agency\/de\/wp-json\/wp\/v2\/article_category?post=63892"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}