Erstellen von fantastischen Farbschemata für deine UI/UX-Design-Projekte

1. EINFÜHRUNG: Warum ist es so schwierig, mit Farben zu arbeiten? Wenn Sie ein UI/UX-Designer sind, sind Sie sich der Bedeutung von Farbe bewusst. Sie wissen, dass das Erstellen der richtigen Farbpalette manchmal zu einer entmutigenden Aufgabe wird. Aber warum? Weil Sie wissen müssen, wie Sie eine großartige Farbkombination erstellen und wie Sie sich auf Ihr Design anwenden können. Wenn Sie keine Ahnung haben, wie das geht, und Sie kämpfen mit der Schaffung erstaunlicher Farbschemata, keine Sorge, Sie sind an der richtigen Stelle. Hi, ich bin Arash Ahadzadeh und ich bin UI/UX-Designer. Ich unterrichte auch UI und UX Design an der Universität für Wirtschaft und Humanwissenschaften in Warschau und in diesem Kurs werden Sie und ich durch alle Details über Farben gehen. Wir werden mit den grundlegendsten Grundlagen der Farbe beginnen und dann zu fortgeschrittenen Themen wie Farbharmonien, Farbpsychologie und vieles mehr übergehen . Wenn Sie einer der Leute sind, die denken, dass das Erstellen der grauen Farbpalette Talente und künstlerische Fähigkeiten erfordert, ist es wahrscheinlich Zeit, Ihre Denkweise zu ändern, denn Farbe dreht sich alles um Wissenschaft. Ja, du hast es richtig gehört. Wenn Sie die Wissenschaft hinter Farben lernen, können Sie ganz einfach Ihre eigenen harmonischen Farbpaletten im Handumdrehen finden. Neben der Erstellung von Farbpaletten lernen Sie auch, wie Sie Farben auf Ihr Design anwenden können, unabhängig davon, ob es sich um eine Website oder eine Anwendung handelt. Darüber hinaus werden wir über die Bedeutung der Farbzugänglichkeit im UI/UX-Design sprechen und Sie werden lernen, wie Sie durch einfache Übungen schöne und zugängliche Farbpaletten erstellen können. Letzt teile ich Ihnen einige persönliche Tipps und Tricks für die Arbeit mit Farben, die Ihren Designprozess drastisch beschleunigen. Dieser Kurs wurde entwickelt, um Ihnen die theoretischen und praktischen Fähigkeiten zu vermitteln, die erforderlich sind, um Farben richtig auszuwählen und anzuwenden. Es hilft Ihnen auch, ein selbstbewusster und besserer Designer zu werden , nur durch das Üben verschiedener Techniken. Also, wenn Sie bereit sind, Farben zu meistern und erstaunliche Farbschemata zu erstellen, werde ich Sie in der Klasse sehen. 2. Struktur des Kurses: Hey, alle. In diesem Video werden wir über die Struktur dieses Kurses sprechen. Dieser Kurs ist in zwei verschiedene Teile unterteilt, die theoretischen und die praktischen Teile. Im theoretischen Teil lernen Sie alle Grundlagen der Farbe wie Farbtheorie, Farbpsychologie, Farbharmonien und vieles mehr. Im praktischen Teil praktizieren Sie, wie Sie das Wissen, das Sie im theoretischen Teil erworben haben, auf reale Projekte anwenden können. Wir erstellen verschiedene Farbpaletten und wenden sie auf eine Website und eine mobile Anwendung an. Auf diese Weise werden Sie den Prozess der Erstellung und Anwendung von Farbpaletten auf Benutzeroberflächen wirklich verstehen . Wir sehen uns im nächsten Video. 3. Die Bedeutung der Farben im UI/UX-Design: Wenn wir über Design sprechen, egal ob UI/UX-Design, Grafikdesign oder sogar Innenarchitektur, spielen Farben in jedem von ihnen eine weißere Rolle. Zweifellos sind Farben einer der wichtigsten Aspekte Ihres UI/UX-Designs. Ohne Farben ist es fast unmöglich, unserem Design Charaktere und Gefühle zu geben. Egal wie gut Ihre Komposition ist, wenn Sie Farben nicht angemessen verwenden, garantiere ich, dass Ihr Design nicht auffällt. Wenn Sie ein Projekt entwerfen, egal ob es sich um eine Website oder eine mobile Anwendung handelt, ist es wichtig, dem Endbenutzer die richtige Nachricht und Gefühle zu vermitteln , indem Sie die richtigen Farben auswählen. Aber warum ist Farbe wichtig im UI/UX-Design? Die Kurzschriftenreihe, der visuelle erste Eindruck zählt. Bist du überzeugt? Wenn nicht, lassen Sie mich mehr darüber erläutern. Wenn Benutzer eine mobile Anwendung oder eine Website starten, dauert es etwa 50 Millisekunden, um zu entscheiden, ob sie bleiben möchten oder nicht. Ihre Entscheidungen hängen von verschiedenen Faktoren ab, und einer dieser Faktoren ist der Farbgebrauch. Können Sie sehen, wie wichtig es ist, richtige Farben in Ihrem Design zu verwenden? Die Auswahl von grauen Farben sieht auf den ersten Blick komplex aus, aber vertrauen Sie mir, wenn Sie die Grundlagen der Farben und die Wissenschaft dahinter lernen, versichere ich Ihnen, dass Sie erstaunliche Farbschemata für Ihre Projekte in kürzester Zeit erstellen können. In den folgenden Videos erfahren Sie mehr über die Grundlagen der Farben für das UI/UX-Design. Dann habe ich dich gesehen. 4. Farbmodi: Wenn wir Farben verwenden möchten, gibt es verschiedene Farbmodi, die wir wählen können, wie CMYK, RGB, Graustufen usw., aber die dominantesten sind CMYK und RGB. Farbmodi können sich auf die Darstellung von Bildern für die Benutzer auswirken. Lassen Sie mich sie für Sie zusammenreißen. CMYK steht für Cyan, Magenta, Gelb und Schwarz. Es wird am häufigsten für den Farbdruck verwendet. RGB steht für Rot, Grün und Blau. Es ist am besten für digitale Arbeit, da diese Farben die primären Farben sind , die in Computerbildschirmen, mobilen Bildschirmen usw. verwendet werden. Wenn Sie also ein Grafikdesigner sind, der Grafiken für den Druck entwerfen möchte, sollten Sie CMYK verwenden, und wenn Sie sind ein UI/UX-Designer, der für digitale Bildschirme entwerfen möchte, sollten Sie RGB verwenden. Lassen Sie mich Ihnen schnell zeigen, wie sich RGB von CMYK unterscheidet. Werfen Sie einen Blick auf dieses Foto. Der Farbmodus dieses Bildes ist RGB. Aber sieh mal, was passiert, wenn ich es in CMYK umwandle. Hast du das gesehen? Was ist der Grund für diesen Unterschied? Hier ist das Chromatizitätsdiagramm, und das ist die Farbpalette, die unsere Augen verarbeiten und erkennen könnten. Dies ist die Palette von Farben, die wir im RGB-Modus erreichen können, und dies ist die Palette von Farben, die wir im CMYK-Modus erreichen können. Wie Sie sehen können, ist der RGB-Bereich oder Skala viel größer als der CMYK-Bereich. Aus diesem Grund sehen die Farben des RGB-Modus lebendiger aus als die Farben im CMYK-Modus. Ich hoffe, jetzt haben Sie ein besseres Verständnis der verschiedenen Farbmodi. Wir sehen uns im nächsten Video. 5. Die Farbzustände: Wir können jede Farbe in drei Kernbestandteile aufteilen: Farbton, Sättigung und Wert. Farbton ist im Grunde der Ursprung der Farbe, die wir sehen, wie rot , blau, lila oder andere Farben. Die zweite Eigenschaft einer Farbe ist Sättigung und es ist die Intensität eines Farbtons. Nehmen Sie zum Beispiel Grün. Erhöhen Sie die Sättigung und die Intensität nimmt zu. Im Gegenteil, wenn Sie diese Sättigung verringern, nimmt die Intensität ab. Das letzte Attribut einer Farbe ist Wert. Es ist im Grunde die Helligkeit einer Farbe. Jetzt können wir den Wert in zwei verschiedene Begriffe aufteilen: Tönung und Schatten. Eine Tönung ist eine hellere Version eines Farbtons, und wir können einen erstellen, wenn wir den Farbton mit Weiß mischen. Auf der anderen Seite ist ein Farbton eine dunklere Version eines Farbtons. Wie Sie sich vorstellen können, können wir einen erstellen, indem wir Schwarz zu unserem Farbton hinzufügen. Wir können auch einen Farbton unserer Farbe erstellen, indem wir ihm Grau hinzufügen. In zukünftigen Videos lernen Sie, wie Sie verschiedene Farbtöne und Farbtöne für Ihre Projekte erstellen . 6. Beherrsche das Farbrad: Haben Sie sich jemals gefragt, wie einige UI-Designer die perfekten Farbpaletten für ihre Projekte erstellen? Sie nutzen nicht nur ihre künstlerischen Fähigkeiten für diese Angelegenheit. Sie benutzen Wissenschaft, und es nennt sich Farbtheorie. Um diese Wissenschaft zu lernen, sollten Sie verstehen, was ein Farbrad ist und wie Sie es verwenden können. Dies ist ein Farbrad, und genau wie das, was Sie in der Schule gelernt haben, besteht es aus primären, sekundären und tertiären Farben. Die Primärfarben sind Rot, Blau und Gelb. Wenn wir diese Farben miteinander mischen, machen sie die sekundären Farben, und sie sind grün, orange und lila. Schließlich, wenn wir die sekundären und primären Farben mischen, machen sie die tertiären Farben, gelb-orange, rot-orange, rot-violett, blau-violett, blau-grün und gelb-grün. Diese bilden das Farbrad, erfunden von Sir Isaac Newton, und es vereinfacht, wie wir mit verschiedenen Farben arbeiten können. Das Farbrad kann basierend auf der Farbtemperatur, kühlen und warmen Farben in zwei Hauptgruppen unterteilt werden. Aber wie können wir das Farbrad nutzen, um erstaunliche Farbpaletten für unsere Projekte zu finden? Nun, wir können einige grundlegende Formeln, die als Farbharmonien bekannt sind, verwenden , um verschiedene Farben aus dem Farbrad harmonisch auszuwählen. Wir werden in zukünftigen Videos über Farbharmonien sprechen. 7. Verschiedene Arten: Wie ich im vorherigen Video erwähnt habe, haben wir zwei Gruppen von Farben, kühle und warme Farben. Aber wie sollten wir wissen, welche Gruppe besser für unser UI-Design-Projekt geeignet ist? Jede Gruppe von Farben hat einige Eigenschaften , die uns helfen zu entscheiden, ob es eine gute Wahl ist oder nicht. Zum Beispiel stehen kühle Farben für Wasser, Schnee, Himmel und sie sind ruhig, beruhigend und erfrischt. Auf der anderen Seite stehen warme Farben für Wärme, Sonnenlicht und Freundlichkeit. Sie sind energisch, aufregend und gemütlich im Allgemeinen. Abhängig von den Markeneigenschaften können wir entscheiden, welche Farbgruppe für unser Projekt geeignet ist. Zum Beispiel, wenn die Marke bietet spannende und lustige Aktivitäten, können Sie mit den warmen Farben gehen. Umgekehrt können Sie kühle Farben verwenden, wenn es bei der Marke um Vertrauen, Sicherheit, Professionalität, et cetera geht. Die Farben, die wir verwenden, sollten die Persönlichkeit der Marke widerspiegeln. Zusätzlich zu diesen beiden Gruppen haben wir eine weitere Gruppe von Farben genannt neutrale Farben, weiß, schwarz, braun und grau. Neutrale Farben werden im Farbrad nicht angezeigt. Wir verwenden sie in der Regel für Hintergründe, weil sie andere Farben in unserem Design ziemlich gut ergänzen und hervorheben. Aber die Verwendung einer grauen oder weißen Farbe als Hintergrund sieht nicht immer interessant und ästhetisch für die Augen des Benutzers aus. Was können wir dann tun? Um unser Design noch besser aussehen zu lassen, können wir den neutralen Farben einen Farbton und ein wenig Sättigung hinzufügen. Dank dieser Technik sehen die neutralen Farben für die Augen des Benutzers interessanter aus. 8. Farbharmonien: Sie nun über das Farbrad und die Farbe im Allgemeinen gelernt haben, ist es an der Zeit zu lernen, wie Sie mit dem Farbrad professionell aussehende Farbschemata erstellen. Es gibt einige grundlegende Formeln, die auf Farbharmonie basieren , die uns helfen können, harmonische Farben einfach zu wählen. Beginnen wir mit der einfachsten Formel, die monochromatisch genannt wird. Es verwendet nur eine Farbe oder einen Farbton. Wählen Sie einfach eine Farbe auf dem Farbrad und erstellen Sie Variationen mit der Sättigung und dem Wert. Was ich an monochromatischen Farbschemata mag ist die Tatsache, dass sie garantiert gut zusammenarbeiten. Die nächste Farbformel ist komplementär. Es dauert zwei Farben von gegenüberliegenden Seiten des Farbrades, wie blau und orange, oder gelb und lila. Es ist ein großartiges Farbschema, wenn Sie kontrastreiche Farben in Ihrem Design verwenden möchten. Ein geteiltes komplementäres Farbschema nimmt die Farben auf beiden Seiten der Komplemente an. Es gibt Ihnen verschiedene Farben, mit denen Sie arbeiten können, während Sie den gleichen Kontrast beibehalten. Ein analoges Farbschema nimmt Farben an, die nebeneinander auf dem Farbrad sind, wie Gelb und Grün oder Blau und Violett. Ein triadisches Farbschema verwendet drei Farben, die gleichmäßig verteilt sind, und sie bilden ein Dreieck auf dem Farbrad. Diese Farbkombinationen sind in der Regel lebendig, also stellen Sie sicher, dass Sie sie mit Bedacht in Ihren Projekten verwenden. Das tetradic Farbschema nimmt zwei Sätze komplementärer Farben und bildet ein Rechteck auf dem Farbrad. Diese Farben funktionieren großartig, wenn Sie eine Farbe als Hauptfarbe und die anderen als Akzent wirken lassen. Sie können in jeder Farbpalette verschiedene Designs, Schattierungen und Töne erstellen . Wenn Sie ein wenig überwältigt sind, machen Sie sich keine Sorgen. Wenn Sie mit der Anwendung dieser Methoden beginnen, werden Sie Vertrauen gewinnen und Sie können leicht erkennen, ob einige Farben zusammenarbeiten oder nicht. 9. Farbkontrast: Farbkontrast ist der Lichtunterschied zwischen Vordergrund und Hintergrund. Klingt es komisch? Lassen Sie mich Ihnen ein Beispiel zeigen. Hier ist ein scharfer Hintergrund, und wenn wir ein Element mit einer gesättigten Farbe darauf hinzufügen, werden wir dieses schreckliche Kunstwerk bekommen. Ich wünschte, ich könnte so tun, als hätte ich noch nie so ein schreckliches Design gesehen. Glücklicherweise könnten wir das in Ordnung bringen. Sie können oft ein besseres Kontrastverhältnis erzielen, indem Sie nur die Töne, Farbtöne oder Sättigung Ihrer Farben ändern. Ein Kontrastverhältnis ist nur ein Wert, der der Lichtunterschied zwischen Vordergrund und Hintergrund zugewiesen wird. Je höher das Verhältnis, desto einfacher wird es, den Inhalt auf dem Bildschirm zu lesen. Hier sind ein paar Tipps, die Ihre Designqualität von gut zu groß nehmen könnten. Tipp Nummer 1: Verwenden Sie niemals reines Schwarz und reines Weiß und umgekehrt. Es verursacht digitalen Augenzug und verletzt die Augen der Benutzer. Stattdessen können Sie ein sehr dunkelgrau auf einem sehr hellgrau und umgekehrt verwenden. Tipp Nummer 2, verwenden Sie keine helle Farbe auf einer hellen Farbe. Es lässt Ihre Elemente nicht hervorstechen. Stattdessen können Sie eine helle Farbe auf einem dunklen Farbton verwenden. Tipp Nummer 3, überprüfen Sie immer Ihre Farben auf hellen und dunklen Hintergründen. Manchmal müssen Sie sie anpassen, um ein gutes Kontrastverhältnis auf dunklen Hintergründen zu erhalten. Letzt, Tipp Nummer 4, überprüfen Sie immer Ihre Farben, indem Sie das Kontrastverhältnis überprüfen. Glauben Sie mir, es gibt schön aussehende Benutzeroberflächendesigns auf Dribbble und Behance, die den Kontrastverhältnis-Test fehlschlagen. In diesem Kurs lernen Sie, wie Sie das Kontrastverhältnis überprüfen können. 10. Real-world Beispiele von harmonischen Farbschemata: Sie nun gelernt haben, wie die Farbkombinationen funktionieren, sehen wir einige Beispiele für jede Farbharmonie, um zu sehen, wie Sie sie auf Ihr Design anwenden können. Monochromatisches Farbschema. Wie Sie sehen können, verwendet diese Website ein monochromatisches Farbschema. - Warum? Weil es hier nur eine einzelne Farbe verwendet. Aber Aresh, wir haben viele Farben hier, warum willst du sagen, dass es nur eine einzige Farbe verwendet? Auf den ersten Blick mag es scheinen, dass es hier viele Farben gibt. Wir haben jedoch eine einzelne Farbe und verschiedene Schattierungen, Töne und Farbtöne dieser Farbe. Die primäre Farbe ist dieses Blau, und sie verwendeten einen dunklen Farbton dieser Farbe für diesen großen Titel und auch die Links oben und für die Anmeldeschaltfläche, wie Sie sehen können, verwenden sie die Primärfarbe und einen hellen Farbton von diese Farbe. Grundsätzlich ist der Farbton gleich, aber der Wert und die Sättigung sind unterschiedlich. Werfen wir einen Blick auf ein anderes Beispiel. Diese Website namens Orbit verwendet auch ein monochromatisches Farbschema, und hier verwenden sie auch nur eine Farbe und sie wenden diese Farben perfekt auf ihr Design an, um eine große visuelle Hierarchie zu schaffen. Komplementäres Farbschema. Hier ist eine beliebte Website, Buchung, und wie Sie sehen können, verwendet es ein komplementäres Farbschema. - Warum? Denn hier haben wir blau und orange. Diese beiden Farben sind auf den gegenüberliegenden Seiten des Farbrades platziert. Sie verwendeten auch eine neutrale Farbe für den Hintergrund, und das ist der Grund, dass die orange und die blauen Farben hier hervorstechen. Es ist sehr wichtig, die Farbe Ihres Hintergrunds mit Bedacht zu wählen. Es gibt einige andere Farben, wie grün oder rot hier, aber das sind semantische Farben und wir werden später darüber sprechen. Werfen wir einen Blick auf diese mobile Anwendung. Es ist auch ein sehr beliebtes Unternehmen, und wie Sie sehen können, verwendet es die gleiche Kombination hier, blau und orange. Es ist eine sehr beliebte Farbkombination, die Sie in der Innenarchitektur, im Grafikdesign und UI/UX-Design sehen können . Split-komplementäres Farbschema. Diese Website verwendet ein gesplittenes komplementäres Farbschema, und wie Sie sehen können, ist es energisch und lustig. Der Grund dafür ist, dass es sich um kontrastreiche Farben handelt, normalerweise verwenden wir sie in Illustrationen. Werfen wir nun einen Blick auf diese Website. Hier habe ich auch ein geteiltes komplementäres Farbschema verwendet, und wie Sie sehen können, und wie Sie sehen können, habe ich es für die Muster auf der rechten Seite verwendet, nicht für den Rest der Elemente auf der linken Seite. Es ist sehr wichtig zu wissen, welche Farben für welchen Inhalt geeignet sind. Analoges Farbschema. Diese Website verwendet ein analoges Farbschema, und wie Sie sehen können, der Designer diese Farben perfekt auf die Illustration angewendet und nur eine weiße Farbe für den Vordergrundinhalt verwendet. Daher haben wir hier ein sehr hohes Kontrastverhältnis. Diese Website verwendet auch ein analoges Farbschema. Wie Sie sehen können, verwenden sie die Hauptfarbe als Hintergrund, und sie verwenden zwei andere Farben, die auf der rechten und linken Seite der Farbe auf dem Farbrad platziert werden , und sie verwenden sie für den CTA oder Call to Action, wie Sie sehen können, und auch für den Titel, das sind die Akzentfarben und sie sollten die meiste Aufmerksamkeit bekommen. Triadisches Farbschema. Diese Website verwendet ein triadisches Farbschema, und wie Sie bemerkt haben, sind diese Farben aufregend und lustig. Dies ist auch ein weiteres Beispiel für triadisches Farbschema. Wie Sie hier sehen können, verwendete der Designer einige entsättigte Farben, um den Inhalt und Informationen wie seinen Text und diese Bilder auf diesen Hintergründen auftauchen zu lassen , und das Ergebnis ist großartig. Tetradic Farbschema. Hier ist ein Beispiel für tetradic Farbschema in der Benutzeroberfläche Design verwendet. Wie Sie hier sehen können, werden die meisten Farben für die Illustration verwendet. Die Abbildung hier hat viele Farben wie grün, orange, rot, pink, dunkelviolett, etc. Es ist nicht wirklich eine gute Idee, dieses Farbschema für die Hauptelemente Ihres Projekts wie Text, Schaltflächen usw. zu verwenden , es sei denn, Sie sind ein erfahrenen Designer und wissen, was Sie tun, würde ich nicht vorschlagen, dieses Farbschema im UI/UX-Design zu verwenden. Diese Website ist ein weiteres Beispiel für ein tetradikisches Farbschema. Auch hier haben wir eine Illustration, und es ist offensichtlich, dass der Designer nicht die gesamte Farbpalette für den Inhalt verwendet hat. 11. Einführung in die Farbpsychologie: Zu wissen, wie man Farben paart, ist für jeden Designer entscheidend. Es reicht jedoch nicht aus, um ein aussagekräftiges Design zu erstellen. Schauen wir uns die Bedeutung einzelner Farben an. Dennoch kann jede Farbe den Benutzern ein positives oder negatives Gefühl vermitteln. Sie möchten also sicherstellen, dass Sie die richtigen Farben verwenden, um mit den Benutzern richtig zu kommunizieren. Jede Farbe kann positive und negative Gefühle haben. Daher ist es wichtig, sie an der richtigen Stelle zu verwenden, um Missverständnisse zu vermeiden. Rot. Rot impliziert Aufregung, Liebe, Kraft und Energie. Es könnte auch Gefahr, Irrtum und Aggression vermitteln. So stellen Sie sicher, das Intensive mit einer kurzen Beschreibung neben der Farbe zu klären. Gelb. Gelb steht für Kreativität , Glück, Optimismus und Freundlichkeit. Deshalb verwendet McDonalds es als Markenfarbe. Orange. Orange könnte den Benutzern ein Gefühl von Wärme geben. Es ist einladend und zeigt Erfolg und Selbstvertrauen. Grün. Grün ist eine dominierende Farbe in der Natur, die mächtige Emotionen hervorrufen kann. Es steht für Gesundheit, Frische und Wachstum. Wenn Sie ein Projekt für ein umweltfreundliches Produkt entwerfen möchten, ist das wahrscheinlich die beste Farbe, die Sie verwenden können. Blau. Blau bedeutet Vertrauen, Ruhe und Frieden. Für manche Menschen ist es ein Zeichen von Traurigkeit und Depression. Möglicherweise haben Sie erkannt, dass die meisten Technologien und Unternehmens-Websites blau verwenden , um ein Gefühl von Vertrauen, Ruhe und Respekt zu vermitteln. Einige Krankenhäuser verwenden auch Blau auf ihrer Website. Bei weitem ist Blau die von allen Benutzern am meisten bevorzugte Farbe. diesem Grund sehen Sie viele mobile Anwendungen und Websites, die Blau als ihre dominierende Farbe verwenden. Violett. Violett ist eine Farbe, die Königtum und Reichtum symbolisiert. Da der violette Farbstoff in der Vergangenheit knapp war, war er königlich vorbehalten. Es ist auch die Lieblingsfarbe vieler weiblicher Benutzer, und es gibt ein Gefühl der Kreativität. Rosa. Pink ist eine Farbe von Mitgefühl und Positivität. Während Pink seit Jahren für feminine Produkte verwendet wird. Es kann auch geschlechtsneutral sein, aber stellen Sie sicher, zweimal zu überlegen, wenn Sie rosa für eine Holzbearbeitung Shop Website verwenden möchten. Braun. Genau wie Grün ist Braun mit der Natur verbunden, obwohl es ein Gefühl von Gemütlichkeit vermitteln kann, kann es auch stumpf und schmutzig sein. Achten Sie darauf, verschiedene braune Formen zu überprüfen, bevor Sie sie auf Ihr Design anwenden. Denn ein Hellbraun kann sauber und ein dunkles kann schmutzig aussehen. Schwarz. Schwarz impliziert Eleganz, Luxus und Raffinesse. Achten Sie darauf, es richtig zu verwenden, wie es könnte ein Gefühl von Trauer und Trauer als auch bieten. Obwohl es häufig für Text verwendet wird, können Sie es für den Hintergrund verwenden, solange Sie weiße Markenfarben in den Vordergrund stellen. Weiß. Wir sehen Weiß in fast jedem Design, und das liegt daran, dass es Sauberkeit und Einfachheit symbolisiert. Wenn Sie eine minimalistische Webseite oder eine mobile Anwendung entwerfen möchten, stellen Sie sicher, dass Sie Weiß viel verwenden. Sie können mit dem Begriff Leerzeichen vertraut sein, und es bedeutet, dass Sie etwas Leerzeichen leer lassen, dass der Benutzer sich nicht überfordert fühlt. Ganz zu schweigen davon, dass auch andere Farben in Ihrem Design erscheinen lassen. Von nun an möchte ich, dass Sie über die Bedeutung der Farben nachdenken, die Sie Ihre Projekte verwenden, die Sie Ihr Design von gut zu großartig verbessern könnten. 12. Gender in der color: Beim Entwerfen einer App oder einer Website ist es wichtig zu wissen, wer Ihre Zielgruppe ist. - Warum? Denn basierend auf der demografischen Darstellung der Benutzer können Sie entscheiden, welche Farben für das Projekt am besten geeignet sind und die Konversionsrate möglicherweise erhöhen. In den vergangenen Jahren haben verschiedene Forschungsprojekte gezeigt, dass Männer und Frauen unterschiedliche Farben bevorzugen. Nur weil wir die Bedeutung der Farben kennen, bedeutet das nicht unbedingt, dass wir sie alle benutzen sollten. Lassen Sie uns die am meisten bevorzugten Farben von Männern und Frauen nebeneinander vergleichen. Wie Sie sehen können, ist Blau die beliebteste Farbe für Männer und Frauen. Jetzt verstehen Sie, warum so viele Websites und Anwendungen Blau als ihre dominierende Farbe verwenden. Lila wird vor allem von Frauen gemocht, während Männer und Frauen rot und grün mögen. Vergleichen wir nun die am meisten unliebten Farben von Männern und Frauen. Wie Sie sehen können, sind Braun und Orange die am wenigsten Lieblingsfarben für Männer und Frauen. Wenn Sie also das nächste Mal eine Farbpalette erstellen möchten, könnten Sie zunächst ein wenig recherchieren, um herauszufinden, wer Ihre Zielgruppe wirklich ist, und basierend auf dem, was Sie gefunden haben, können Sie Ihre Farben leicht auswählen. 13. Erforderliche Farben für die UI-Design: Egal, an welcher Art von UI-Design-Projekt Sie arbeiten, Sie benötigen die folgenden Farben für die Arbeit: Ein-, Primär- und Sekundärfarben. Primärfarbe ist eine dominierende Farbe, die am häufigsten in Ihrer Benutzeroberfläche verwendet wird. In der Regel sollten Sie die Farbe der Marke als Primärfarbe verwenden. Betrachten Sie dieses Bild als Beispiel; Qatar Airways verwendet seine violette Markenfarbe als primäre Farbe. Optional können Sie eine Reihe von sekundären Farben erstellen , um Ihr Design interessanter zu gestalten. Beachten Sie, dass Sie sekundäre Farben verwenden sollten, wenn und nur dann, wenn sie für Ihr Design erforderlich sind. Angenommen, Sie möchten ein Menü mit verschiedenen Optionen entwerfen. Um zwischen der ausgewählten Option und nicht ausgewählten Optionen zu unterscheiden, können Sie eine sekundäre Farbe verwenden. Zwei; Akzentfarben. Akzentfarbe wird verwendet, um Aktionen zu betonen und hervorzuheben Informationen wie Text, Schaltflächen oder Call to Action, Schieberegler, Links, Fortschrittsbalken, etc. Sobald Sie Ihre primäre Farbe auswählen, können Sie die Farbharmonien wir gesprochen über, um die Akzentfarbe zu erstellen. Ich zeige Ihnen im nächsten Video Schritt für Schritt, wie Sie eine Farbpalette erstellen. Betrachten Sie die Lyft-Landingpage. Es verwendet lila als Akzentfarbe und wie Sie sehen können, wurde es für den Aufruf zur Aktion und Links verwendet. Drei; semantische Farben. Sie werden für Warnung, Fehler, Erfolg und Informationen verwendet. Verwenden Sie Gelb für Warnung, Rot für Fehler, Grün für Erfolg und Blau für Informationen. Diese Farben werden basierend auf der Farbpsychologie vorgeschlagen. Sie können verschiedene Schattierungen, Töne und Farbtöne dieser Farben verwenden. Achten Sie darauf, diese semantischen Farben nicht austauschbar zu verwenden , da sie dem Benutzer möglicherweise die falsche Nachricht vermitteln. Neutrale Farben: weiß, schwarz oder grau Schemata. Diese Farben werden hauptsächlich für Text und Hintergrund verwendet. Sie lassen alle anderen Farben in Ihrem Design auftauchen. Fast alle Farbpaletten erfordern neutrale Farben, um ein hohes Farbkontrastverhältnis zwischen Hintergrund und Vordergrund zu erzeugen . Wie Sie sehen können, verwendet diese Website eine helle neutrale Farbe für den Hintergrund. Last but not least, Nummer 5, Diagramm- und Datenvisualisierungsfarben. Genau wie sekundäre Farben sind diese Farben je nach Art Ihres Projekts auch optional. Wenn Sie Diagramme, Heatmaps oder Treemap in Ihrer Benutzeroberfläche benötigen , sollten Sie einen Satz von 10-20 Farben in einer bestimmten Reihenfolge erstellen. Sie können solche Farben mit den folgenden Richtlinien erstellen. Sie können ein kategoriales Farbschema erstellen, das aus mehreren Farben besteht, die in einer bestimmten Reihenfolge kontrastieren. Es ist gut für Liniendiagramme, Balkendiagramme usw. Da es sich um kontrastierende Farben handelt, verwenden Sie dieses Farbschema, wenn Sie Daten deutlich präsentieren müssen. Die andere Art von Farbschema, die Sie erstellen können, ist sequenziell. Es ist ein allmählicher Übergang von Farben von hell zu dunkel und umgekehrt. Es eignet sich für Treemap und Heatmap. Der letzte Typ des Farbschemas, das Sie erstellen können, ist divergierend. Abweichende Farben sind nützlich, wenn negative und positive Werte vorhanden sind. Verwenden Sie diese Farben nicht für kategoriale Maßstäbe. 14. Wie du eine Farbpalette für dein Projekt erstellst?: Jetzt, da Sie alle erforderlichen Kenntnisse über Farbe gewonnen haben, lassen Sie uns diese in die Praxis umsetzen und Schritt für Schritt eine Farbpalette erstellen. Bist du bereit? Lass es uns loslegen. Egal, welche Software Sie verwenden, ändern Sie das Farbmodell in HSB. Ich benutze Figma. Lassen Sie mich Ihnen zeigen, wie es funktioniert. Zuerst gehe ich zum Abschnitt „Füllen“, und aus diesem Dropmenü wähle ich HSB. Wie Sie sehen können, haben wir drei verschiedene Werte hier H für Farbton, S für Sättigung und B für Helligkeit. Wenn wir die Intensität unserer Farbe erhöhen wollen, sollten wir hier die Sättigung erhöhen. Wenn Sie einen Farbton erstellen möchten, sollten wir die Helligkeit verringern, um Schwarz zu unserer Grundfarbe hinzuzufügen. Schritt 1, wählen Sie Ihre Grundfarbe. Es ist die primäre Farbe Ihrer Benutzeroberfläche. Sie können die Farbe der Marke für sie auswählen, wenn es eine gibt. Schritt 2: Wenden Sie die Farbe auf die Form auf der Leinwand an. Es könnte ein Kreis oder ein Rechteck sein. Schritt 3, duplizieren Sie die Form fünfmal, um sechs identische Formen zu erhalten. Das sind deine Musterfelder. Schritt 4: Wählen Sie die Farbfelder in der Nähe der Grundfarbe aus und ändern Sie nur die Sättigung oder Helligkeit, um zwei unterstützende dunkle Farbtöne Ihrer Farbe zu erhalten. Ändern Sie den Farbton nicht. Diese Farben werden für verschiedene Zustände von umsetzbaren Elementen wie Schaltflächen oder Links verwendet. Wenn wir zum Beispiel eine Schaltfläche entwerfen, möchten wir alle Zustände der Schaltfläche wie Standard, aktiv, inaktiv usw. erstellen Schritt 5, wählen Sie jetzt zwei neutrale Farben, indem Sie Grau und Weiß zu Ihrer Farbe hinzufügen. Schritt 6, schließlich, erstellen Sie einen dunklen Ton Ihrer Farbe, indem Sie mehr Grau zu Ihrer Farbe hinzufügen. Wir sind fertig. Wie Sie sehen können, können Sie nur mit einer einzigen Grundfarbe eine komplette Oberfläche entwerfen. Ich habe eine Frage an Sie. Welche Art von Farbharmonie haben wir verwendet, um diese schöne Palette zu kreieren? Wenn Ihre Antwort monochromatisch ist, haben Sie absolut Recht. Wir verwenden eine Farbe und haben Variationen erstellt, indem wir Tönungen, Schattierungen und Töne zu unserer Farbpalette hinzufügen. Lassen Sie uns nun ein analoges Farbschema erstellen. Ich werde das Farbrad als Referenz verwenden. Lasst uns Lila als Grundfarbe wählen. Jetzt werde ich den Farbtonschieber leicht nach links und rechts bewegen , um drei weitere Farben auszuwählen. Denken Sie daran, dass Sie keine größeren Farbtonänderungen benötigen, um Variationen für Ihr Farbschema zu erstellen . Sie müssen nur den Farbton leicht ändern und Variationen erstellen , indem Sie Sättigung und Helligkeit anpassen. In diesem Fall werde ich eine Tönung dieser rosa Farbe als meine Akzentfarbe wählen. Jetzt, da unsere Primär- und Akzentfarben fertig sind, ist es Zeit, zwei neutrale Farben hinzuzufügen, indem wir unserer Hauptfarbe Grau hinzufügen. Sehen wir uns nun an, wie diese Palette in einer Benutzeroberfläche aussieht. Sieht toll aus, nicht wahr? Je nach Projekttyp können Sie Ihrer Farbpalette semantische Farben hinzufügen. Semantische Farben werden für Warnung, Fehler, Erfolg und Informationen verwendet. Wie bereits im vorherigen Video erwähnt, sollten Sie gelb für Warnung, rot für Fehler, grün für Erfolg und blau für die Anzeige von Informationen verwenden. Eine kurze Notiz hier, dass diese Farben ein Muss ist, wenn Sie ein Dashboard entwerfen möchten. Denn auf Dashboards stellen wir in der Regel wichtige Daten vor und es ist wichtig, semantische Farben zu verwenden , um den Benutzer den Zweck und die Bedeutung aller Daten klar zu vermitteln. 15. Wie du deine Grundfarbe auswählst?: In diesem Video werden wir über den Prozess der Auswahl einer Grundfarbe für Ihre Farbpaletten sprechen. Die Grundfarbe ist die dominierende Farbe in Ihrem Projekt. Um die Grundfarbe auszuwählen, überprüfen Sie zuerst die Markenfarben. Wenn Sie eine Website oder eine mobile Anwendung für KFC entwerfen möchten, was wäre die beste Grundfarbe für Ihre Farbpaletten? Ja, du hast recht. - Rot. - Warum? Denn die Kunden der Marken sind mit der Farbe der Marke vertraut und können sich sofort mit Ihrem Design verbinden. Wenn Sie die Primärfarbe der Marke wählen müssen, listen Sie zuerst die Eigenschaften der Marke auf und denken Sie dann darüber nach, welche Farbe mit der Idee hinter der Marke in Übereinstimmung mit der Farbpsychologie verbunden ist. Es ist wichtig, Farben zu verwenden, die mit den Benutzern kommunizieren. Nehmen wir an, Sie möchten eine Primärfarbe für ein Unternehmen wählen , das Bio-Produkte anbietet. In diesem Fall könnte Grün eine gute Option sein, weil es sich natürlich und frisch anfühlt. Wenn Sie entscheiden, welche Farbe für die Marke geeignet ist, können Sie mit den Attributen dieser Farben wie Sättigung, Helligkeit und Wert spielen. Die meiste Zeit wählen Sie eine Farbe und Sie sagen, dass es cool aussieht. Wenn Sie jedoch versuchen, diese Farbe mit anderen Farben zu kombinieren, sieht sie möglicherweise nicht so gut aus, wie Sie es erwarten. Stellen Sie sicher, dass Sie Ihre Primärfarbe anderen Farben vergleichen, um zu sehen, ob dies die richtige Wahl für Ihr Projekt ist. Wir werden später in diesem Kurs über die Zugänglichkeit von Farben sprechen. 16. Wie wählst du eine accent aus?: Akzentfarben werden für Links, Call-to-Aktionen, Fortschrittsbalken usw. verwendet. Sie sind normalerweise hell und gesättigt. Sie können eine Akzentfarbe erstellen, indem Sie die Basis- oder Primärfarbe auswählen und verschiedene Farbharmonien wie monochromatisch, analog oder komplementär verwenden . Wenn Sie immer noch unsicher sind, wie Sie eine große Akzentfarbe wählen, lassen Sie mich Ihnen meinen Prozess zeigen. Wählen Sie Ihre Primärfarbe und erhöhen oder verringern Sie den Farbton um 30-40 Punkte. Erhöhen Sie nun die Helligkeit um 5-10 Punkte. Voila, deine Akzentfarbe ist fertig. Diese Formel funktioniert mit jeder Farbe. Können Sie sehen, wie einfach es ist, jetzt eine Akzentfarbe zu erstellen? 17. Wie wählst du Hintergrundfarben aus?: Egal wie schön und lebendig Ihre Akzentfarben sind, wenn Sie keine gute Hintergrundfarbe haben, bekommen sie nicht genug Aufmerksamkeit. Daher ist es wichtig, Ihre Hintergrundfarbe mit Bedacht zu wählen. Wenn es um den Hintergrund geht, sind Sie nicht darauf beschränkt, nur helle Farben zu verwenden. Manchmal können wir die primäre Farbe für den Hintergrund verwenden, solange es nicht zu lebendig ist, um die Benutzer Ihre Website oder App verlassen zu lassen. Wir können auch Ihre Primärfarbe auswählen und einen sehr hellen Farbton erzeugen , indem wir die Sättigung verringern und die Helligkeit erhöhen. Wie Sie sehen können, habe ich diese Technik für diese Schnittstelle verwendet. können Sie beispielsweise den Sättigungswert zwischen 2-8 Punkten einstellen und den Helligkeitswert zwischen 95-100 Punkten einstellen. Neutrale Farben funktionieren garantiert am besten für Hintergründe. 18. Semantische Farben in UI-Design: Wie bereits erwähnt, werden semantische Farben für Status und Feedback wie Warnung, Fehler, Erfolg und Informationen verwendet . Obwohl Sie Gelb, Rot, Grün und Blau als semantische Farben verwenden sollten , sind Sie nicht nur auf eine Farbe beschränkt. Die beste Methode ist, dass Sie verschiedene Schattierungen und Farbtöne dieser Farben erstellen , um sie flexibel anwenden zu können. Sobald Ihre vier Farben fertig sind, können Sie die monochromatische Farbharmonie verwenden, um Varianten zu erstellen. Das gibt Ihnen genug Flexibilität, um diese Farben auf Ihr Design anzuwenden. Nehmen wir an, Sie möchten eine Warnung entwerfen. Wenn Sie nur eine Farbe verwenden, würde es so aussehen. Gehen wir nun einen Schritt weiter und fügen unseren semantischen Farben einen gelben Farbton hinzu. Jetzt sieht das Ergebnis viel besser aus. Die gleiche Technik könnte auf alle anderen semantischen Farben angewendet werden. 19. Was ist eine Farbskala?: Was ist eine Farbskala? Erinnern Sie sich an die drei Attribute der Farbe? Ja, ich spreche von Farbton, Sättigung und Wert. Eine Farbskala ist ein allmählicher Übergang einer bestimmten Farbe von hell zu dunkel oder umgekehrt. Welches Attribut der Farbe ändert sich in einer Farbskala? Du hast Recht, Wert. Viele Künstler und Designer glauben, dass Wert das wichtigste Attribut der Farbe ist . Aber warum? Weil Sie keine Farbe benötigen, um ein schönes und zugängliches Projekt zu entwerfen. Alles, was Sie brauchen, ist eine Graustufe, mit der Sie eine großartige visuelle Hierarchie mit kontrastierenden Farben erstellen können. Als Designer sollten Sie verstehen, dass, wenn Sie die Werte nicht richtig verstehen, die restlichen Farben nicht richtig aussehen. Wenn es um die Zugänglichkeit von Farben geht, spielen Werte eine wichtige Rolle. Werfen wir einen Blick auf die Materialdesign-Farbpaletten. Falls Sie es nicht wissen, ist Material Design eine von Google entwickelte Designsprache. Es gibt Ihnen eine Reihe von Richtlinien, um Ihren Designprozess zu verbessern. Hier sind einige Farbskalen, die von Material Design erstellt wurden. Diese Farben werden gewählt, um harmonisch zusammenzuarbeiten. Wie Sie sehen können, entspricht jede Farbe einer Zahl zwischen 50-900. Höhere Werte stellen dunklere Farben dar, und niedrigere Werte stellen hellere dar. Mit unterschiedlichen Werten einer Farbe hilft uns, die Barrierefreiheitsstandards zu erfüllen. Was meine ich mit Barrierefreiheit? Nehmen wir zum Beispiel dieses Purple. Wie Sie sehen können, ist die Textfarbe, die für eine Varianz verwendet wird, weiß und bei anderen ist schwarz. Es bedeutet, dass Sie eine helle Textfarbe und einige Farben verwenden sollten, und bei anderen sollten Sie eine dunkle Textfarbe verwenden, damit der Text lesbar ist. Wir werden die Farbzugänglichkeit später in diesem Kurs erforschen. 20. Was ist Grayscale?: Was ist Graustufen? Graustufen werden einfach aus verschiedenen Grautönen hergestellt. Viele Künstler und Designer beginnen ihr Design mit einer Graustudie. Aber warum? Der Grund ist, wenn Sie mit nur verschiedenen Grautönen arbeiten, können Sie sich auf andere wichtige Dinge wie Abstände, Größen, visuelle Hierarchie, Gewicht Ihrer Elemente und vieles mehr konzentrieren . Sie können sich einfach darauf konzentrieren, wie Ihre Elemente wie Schaltflächen, Text, Schieberegler oder Karten angelegt werden sollen. Wenn Sie den Graustufenfarbmodus verwenden, können Sie leicht feststellen, ob Sie genügend Kontrast zwischen Ihren Elementen haben oder nicht. Zum Beispiel hat diese Schnittstelle eine große visuelle Hierarchie. Wie Sie sehen können, sind die wichtigsten Informationen dunkler als die am wenigsten wichtigen Informationen. Jetzt möchte ich, dass Sie sich auf die Prioritätsspalte konzentrieren. Können Sie sehen, dass je höher die Prioritätsstufe ist, desto dunkler wird die Farbe? Lassen Sie es uns weiter analysieren. Hier haben wir drei Prioritätsstufen: hoch, mittel und niedrig. Wechseln wir nun in den Graustufenmodus. Wie Sie sehen können, hat hier die höchste Priorität den dunkelsten Farbton. diesem Grund verwenden wir normalerweise kein Gelb für die Schaltfläche Löschen in einer Schnittstelle. Werfen Sie nun einen Blick auf diese Karte. Die Farben sind harmonisch und Sie sind bereit , die Karte zu Ihrem Design hinzuzufügen, außer Sie sind es nicht. Lassen Sie uns für eine Sekunde in den Graustufenfarbmodus wechseln. Kannst du das Problem sehen? Wie Sie sehen können, haben wir hier keine gute visuelle Hierarchie, wodurch unser Design weniger zugänglich ist. Wie können wir das in Ordnung bringen? Nun, ich würde eine hellere Farbe für die Beschreibung und den Abbrechen Button verwenden. Aber warum? Wegen der Bedeutung der visuellen Hierarchie. Unsere wichtigsten Elemente, die der Titel und der Bestätigungs-Button sind, sollten die größte Aufmerksamkeit erregen. Daher sollten der Abbrechen Button und die Beschreibung einen helleren Farbton unserer Farben haben. Vergleichen wir es nun mit dem Graustufenmodus. Offensichtlich sieht es jetzt viel besser aus, sowohl was die Zugänglichkeit als auch die visuelle Hierarchie betrifft. Wenn Sie einen effizienten Entwurfsprozess wünschen, stellen Sie sicher, dass Sie mit Graustufen beginnen und dann Farben auf Ihr Design anwenden. 21. Wie kannst du eine Farbpalette auf dein Design anwenden?: Jetzt, da Sie gelernt haben, wie Sie Ihre Farben basierend auf Farbharmonien und Farbpsychologie auswählen , ist es tatsächlich an der Zeit, sie auf Ihr Design anzuwenden. Aber warten Sie, können Sie Farben nicht zufällig auf Ihre Elemente anwenden? Natürlich kannst du das nicht. Es sei denn, Sie möchten, dass Ihr Design so aussieht. Es ist schmerzhaft, nicht wahr? Stellen Sie sich vor, Sie kochen eine Portion köstliches und schönes Essen zum Mittagessen. Sie haben alle Zutaten bereit zu Ihrer Verfügung und Sie müssen nur wissen, wie viel von jeder Zutat sollte in Ihre Pfanne gegeben werden. Wenn Sie die Zutaten unverhältnismäßig verwenden, können Sie am Ende mit einer salzigen Mahlzeit oder einer geschmacklosen Mahlzeit. Wenn das nicht Ihre Absicht ist, müssen Sie ein Rezept haben. Aber haben wir auch ein Rezept für die Anwendung von Farben? Glücklicherweise, ja, das tun wir. Es gibt eine bekannte Regel namens 60-30-10, die von der Innenarchitektur genommen wird. Mal sehen, wie es funktioniert. Basierend auf dieser Regel müssen Sie 60 Prozent Ihrer dominanten oder primären Farbe, 30 Prozent Ihrer sekundären Farbe und 10 Prozent Ihrer Akzentfarbe verwenden. Lassen Sie uns zuerst diese Innenarchitektur überprüfen. Wie Sie sehen, wird die Primärfarbe für 60 Prozent der Umgebung verwendet, die sekundäre Farbe wird für 30 Prozent der Umgebung verwendet, und die Akzentfarbe wird für 10 Prozent der Umgebung verwendet. Jetzt ist es an der Zeit, es zu versuchen. Dies ist eine Schnittstelle, die im Graustufenmodus entwickelt wurde. Beginnen wir zuerst, nur drei Farben zu verwenden. Eine primäre, eine sekundäre und eine Akzentfarbe. Ich werde die Primärfarbe für unseren Hintergrund, die sekundäre Farbe für den Text und diese Karten unddie Akzentfarbe für den CTA verwenden die sekundäre Farbe für den Text und diese Karten und , die diese Schaltflächen und auch für diese Balken im Balkendiagramm sind. Können Sie sehen, wie ausgewogen dieses Design ist? Jetzt könnten wir sogar unsere Farbproportionen neu anordnen. Lassen Sie uns die Primärfarbe durch unsere sekundäre Farbe ersetzen und sehen, wie es sich herausstellt. Es sieht immer noch gut aus, nicht wahr? Aber haben wir normalerweise nicht mehr Farben in unserer Farbpalette? Ja, das tun wir. Wir können diese Regel immer noch anwenden, auch wenn wir verschiedene Schattierungen unserer Primärfarbe oder mehr sekundäre und Akzentfarben haben. Wir müssen sie nur im gleichen Verhältnis halten. Betrachten wir diese Farbpalette. Vielleicht möchten wir diese Licht-Neutronen-Farbe und diese blaue Primärfarbe hauptsächlich in unserem Design verwenden . Dann sollten beide 60 Prozent unseres Verhältnisses einnehmen. Diese beiden Farben werden jetzt unsere Sekundärfarben sein, also nehmen sie 30 Prozent unseres Verhältnisses ein. Zu guter Letzt sollten diese beiden Akzentfarben 10 Prozent unseres Verhältnisses einnehmen. Jetzt wollen wir sehen, wie wir sie auf unsere Schnittstelle anwenden können. Wir könnten mit unserem Heldenbereich beginnen. Wir wählen eine der Farben aus unserem Primärverhältnis, das 60 Prozent unseres Designs insgesamt benötigt und wir verwenden es als Held Abschnitte Hintergrund. Die andere Grundfarbe wird auch als der andere Teil unseres Hintergrunds verwendet. Nun für den Inhalt, könnten wir unsere sekundären Farben verwenden. Für die CTA-Tasten müssen wir eine Farbe verwenden, die die Aufmerksamkeit des Benutzers lenkt. Daher sollten wir unsere Akzentfarben für diesen Zweck verwenden. Ich werde gelb für die CTA-Tasten und orange für den Schieberegler und den Indikator verwenden . Denken Sie daran, dass Sie Ihre Farben immer gegeneinander überprüfen sollten , um zu sehen, ob zwischen ihnen ein gutes Kontrastverhältnis besteht oder nicht. Eine Akzentfarbe kann auf dunklen Hintergründen erstaunlich aussehen, während die andere nur auf Live-Hintergründen lesbar sein könnte. Auf diese Weise können Sie verschiedenen Elementen Ihres Designs verschiedene Farben zuweisen . Eine der Dinge, die Sie tun können, um sicherzustellen, dass Ihr Farbverhältnis gut funktioniert, besteht darin, Varianz für verschiedene Teile Ihres Designs zu erstellen und sie miteinander in Bezug auf die Lesbarkeit und Zugänglichkeit des Inhalts zu vergleichen . 22. Wie kannst du deine Farben angemessen nennen?: Benennungskonventionen. Eines der wichtigsten Themen, wenn es um die Erstellung von Designsystemen geht. Als einziger Designer können Sie die Benennung von Farben als den am wenigsten wichtigen Faktor betrachten , den Sie sich bei der Arbeit an einem Projekt vorstellen können. Es ist verständlich, aber lassen Sie mich Ihnen ein Beispiel geben, um zu verstehen, wie wichtig es ist, Konventionen wirklich zu benennen. Nehmen wir an, Sie arbeiten an einem Projekt mit einer kleinen Farbpalette, die 4-10 Farben enthält. Das sind deine Farben. Wie benennen Sie sie? Nun, die meisten von Ihnen können sie nennen: blau, blau, blau, grün und gelb, und es ist völlig in Ordnung, wenn Sie als alleiniger Designer an einem kleinen Projekt arbeiten. Stellen wir uns nun vor, Sie arbeiten an einem großen Projekt mit mehr Farben, mit denen Sie arbeiten können, und Sie sollten mit anderen Designern zusammenarbeiten. Kannst du hier den gleichen Ansatz verwenden? Natürlich nicht. Aber warum? Wenn Sie Farben in einem Designsystem benennen, das Hauptziel darin, die Rolle der Farben so lebendig wie möglich zu gestalten. Warum denken Sie, blau/licht/ 2 ist ein logischer Name, es macht keinen Sinn für andere Mitarbeiter. Es sei denn, Sie möchten Ihre Namenskonventionen allen anderen Designern, Entwicklern und Vermarktern in Ihrem Team erklären allen anderen Designern, Entwicklern , sollten Sie einen Ansatz verwenden , der für alle funktioniert, ohne erklären Sie die Logik dahinter. Nehmen wir an, Sie hatten eine Primärfarbe und drei Schattierungen dieser Farbe für verschiedene Zustände Ihrer Elemente, wie Standard, aktiv, gedrückt usw. Was ist der beste Weg, um diese Farben zu benennen? Beginnen Sie zuerst mit der Verwendung dieser Farbe. In diesem Fall ist es primär. Dann verwenden Sie einen Bindestrich oder einen Schrägstrich, und schreiben Sie die Variationen wie, aktiv, inaktiv, default, etc. Auf diese Weise können wir Farben beschreiben, ohne auch nur ihre Namen zu erwähnen. Dies wird als funktionale Benennungskonvention bezeichnet. Egal, wer unser Designsystem nutzt, ob diese Person ein Farbblinddesigner oder ein neues Mitglied Ihres Teams ist , er oder sie kann leicht verstehen, wie diese Farben im Projekt verwendet werden sollten. Dieser Ansatz ist klar, skalierbar und universell. Natürlich gibt es verschiedene Namenskonventionen, aber dies ist diejenige, die gut für kleine, mittlere und große Projekte funktioniert . 23. Wie man großartige Farbverläufe erstellt?: Jetzt, da Sie wissen, wie Sie eine großartige Farbpalette für Ihre Projekte erstellen, ist es an der Zeit, über Verläufe zu sprechen. Was ist ein Gradienten? Ein Farbverlauf ist ein allmählicher Übergang von einer Farbe zu einer anderen Farbe. Obwohl die Verwendung von Farbverläufen in Ihrem Design optional ist, fügt es Ihrem Design Charakter und Persönlichkeit hinzu. Deshalb verwenden die meisten Designer heutzutage Farbverläufe in ihrem Design. Wir haben im Grunde vier verschiedene Arten von Gradienten: linear, radial, eckig und Diamant, aber die beliebteste ist der lineare Gradienten. Lassen Sie mich Ihnen nun zeigen, wie Sie tolle Farbverläufe für Ihre Projekte erstellen können. Öffnen Sie zuerst Coolers.co. Klicken Sie nun oben auf das Menü Mehr und klicken Sie auf die Schaltfläche Erstellen Sie einen Farbverlauf. Hier könnten wir unsere Steigungen erstellen. Wie Sie sehen können, haben wir hier verschiedene Farben. Wenn ich mit der Maus über diesen Schieberegler schwebe und irgendwo klicke, kann ich diesem Schieberegler eine neue Farbe hinzufügen. Wenn ich eine Farbe entfernen möchte, kann ich auf diesen Entfernen-Button einfach so klicken. Nun, da wir zwei verschiedene Farben haben, lassen Sie mich Ihnen sagen, wie Sie mit tollen Farbverläufen kommen können, denn offensichtlich sehen nicht alle Farben gut aus, wenn wir sie zusammenmischen. Lassen Sie mich meine erste Farbe auswählen und ich werde es zu blau ändern, zum Beispiel dieses Blau. Jetzt zeige ich Ihnen ein schlechtes Beispiel. Lassen Sie mich die 2. Farbe auswählen und sie zum Beispiel in Orange ändern , einfach so. Wie Sie sehen können, sieht dieser Farbverlauf nicht sehr gut aus , weil wir hier keinen reibungslosen Übergang haben, obwohl wir eine Farbharmonie verwenden, ist das Ergebnis nicht gut. Denken Sie daran, einige Farbharmonien sind nur gut für Vollfarben, nicht Farbverläufe, aber wie können wir es besser machen? Hier ist meine Technik und ich empfehle, dass Sie das auch verwenden sollten, weil es so einfach ist und es wird Ihr Leben viel einfacher machen. Wählen Sie zuerst Ihre erste Farbe aus, kopieren Sie den Hex-Farbcode und fügen Sie ihn für die zweite Farbe ein. Hier haben wir zwei identische Farben. Jetzt, mit dem Farbwähler, werde ich den Schieberegler nach rechts und nach links bewegen , um analoge Farben genau so auszuwählen. Jetzt können Sie sehen, wie erstaunlich und glatt dieser Farbübergang ist? Versuchen wir nun ein anderes Beispiel. Ich werde den Farbtonschieber ein wenig auf die linke Seite bewegen, können Sie sehen, wie schön es ist? Sie können auch die Helligkeit Ihrer Farben ändern, wenn Sie möchten, es liegt ganz an Ihnen. Diese Technik funktioniert immer. Um große Farbverläufe zu erstellen, müssen Sie sich nur an eine Regel erinnern, und das verwendet die analoge Farbharmonie. Wenn Sie mit zufälligen Farbverläufen kommen möchten, können Sie einfach auf diese zufällige Schaltfläche klicken und Coolers erstellt zufällige Farbverläufe für Sie genau so. Die andere Sache, die Sie tun können, ist monochromatische Farbharmonie zu verwenden. Nur indem Sie eine Farbe und verschiedene Schattierungen und Farbtöne dieser Farbe verwenden, können Sie mit großen Farbverläufen genau so kommen. 24. Was ist color: Wenn es um UI/UX-Design geht, Barrierefreiheit sehr wichtig. Schließlich sind Designer da, um Probleme zu lösen, nicht um sie zu machen. Es ist wichtig, so zu gestalten, dass jeder, unabhängig von körperlichen, auditiven oder visuellen Behinderungen, das Produkt verwenden kann. Mit der Farbzugänglichkeit können Menschen mit Sehbehinderungen das von uns entworfene Produkt genau wie alle anderen verwenden. Erinnern Sie sich an das Beispiel über semantische Farben? Hier geht es um die Zugänglichkeit von Farben. Hier haben wir drei Profilbilder mit der Statusanzeige in der oberen rechten Ecke. Grün bedeutet, dass der Benutzer online ist, blau zeigt an, dass der Benutzer offline ist, und lila bedeutet, dass der Benutzer beschäftigt ist. Aber mal sehen, wie Menschen mit monochromatischer Vision dieses Design sehen. Wie Sie sehen können, sind die Farben schwer voneinander zu unterscheiden. Deshalb ist es wichtig, für jede Farbe das Recht auf Wert zu wählen. Nun lassen Sie uns diese Farben ändern, um dieses Design zugänglicher zu machen. Verwenden wir semantische Farben für diese Indikatoren. Jetzt ist es so viel besser. Können Sie sehen, warum Barrierefreiheit jetzt wichtig ist? Menschen, die an monochromatischem Sehen leiden, können keine Farbtöne unterscheiden. Sie können nur verschiedene Grautöne sehen. Deshalb habe ich bereits erwähnt, dass der Wert von Farben wichtiger ist als andere Attribute der Farbe. Wir können einen guten Kontrast zwischen unseren Schattierungen schaffen, indem wir nur den Wert einer Farbe ändern , die selbst Menschen mit monochromatischer Sicht unsere Elementhierarchie erkennen könnten. Natürlich gibt es viele Farbsicht-Mängel, aber der Punkt, den ich versuche zu machen, ist, dass nicht jeder die Farben so wahrnimmt, wie wir es tun. Betrachten wir dieses Design und sehen Sie, wie verschiedene Menschen mit Farbsichtstörungen diese Farben verarbeiten können. Monochromatisches Sehen oder vollständige Farbblindheit. Wie ich bereits erwähnt habe, können Menschen mit monochromatischem Sehen nur verschiedene Grautöne sehen. Protanopia Farbenblindheit. Menschen mit diesem Farbsicht-Mangel nehmen rote Farben als dunklere Farben als normal wahr und in der Regel Rot wird zu einem dunkelgrünen. Wenn Sie Rot als Vordergrundfarbe und Schwarz als Hintergrundfarbe wählen, wäre es zu dunkel, um den Text zu lesen. Blauer Kegel Monochromacy oder BCM für kurz. Menschen mit BCM können die roten und grünen Farben nicht richtig sehen, während sie Blau wahrnehmen können. Es gibt auch andere Farbsicht-Mängel, aber das Wichtigste ist, dass wir als Designer darauf achten sollten, unsere Farben so zu wählen , dass die Funktionalität der von uns entworfenen Produkte verbessert wird. Stellen Sie den Benutzer immer in die Mitte Ihres Designs. 25. Validierung deiner Farbpalette basierend auf Kontrastverhältnis: Einer der Faktoren, die wir immer in Bezug auf die Farbzugänglichkeit überprüfen sollten , ist das Kontrastverhältnis. Gemäß den Richtlinien für die Barrierefreiheit von Web-Inhalten oder kurz WCAG gibt es zwei unterschiedliche Kontraststufen AA für minimalen Kontrast oder AAA für verbesserten Kontrast. Die AA-Ebene erfordert ein minimales Kontrastverhältnis von 4. 5:1 für normalen Text und 3:1 für großen oder fett formatierten Text. Auf der anderen Seite erfordert die AAA-Ebene ein minimales Kontrastverhältnis von 7:1 für normalen Text und 4. 5:1 für großen oder fett formatierten Text. Aber warte, wie können wir eigentlich das Kontrastverhältnis unserer Farben messen? Nun, wir können Online-Kontrastprüfer für diese Angelegenheit verwenden. Es gibt eine Website namens Coolors, um Farbpaletten zu erstellen und das Kontrastverhältnis zu überprüfen. Versuchen wir es mal und sehen, wie es funktioniert. Gehen Sie zu coolors.co/contrast-checker. Hier sollten wir eine Hintergrundfarbe angeben, und hier sollten wir die Textfarbe angeben, die wir auf unserem Hintergrund verwenden werden. Wie Sie sehen können, habe ich eine ziemlich hohe Zahl und es ist fantastisch. Es zeigt auch an, dass diese Farbkombination sowohl für kleine als auch für große Texte gut funktioniert. Nun, lassen Sie uns ein weiteres Paar Farben überprüfen. Kannst du das sehen? Es ist immer noch lesbar, aber es funktioniert nur für großen Text. Überprüfen Sie also immer das Kontrastverhältnis Ihrer Farben, um zu sehen, wie zugänglich sie sind. 26. Nützliche Tools für die Zugänglichkeit: In diesem Video werde ich Ihnen einige nützliche Tools für die Barrierefreiheit vorstellen. Bist du bereit? Lasst uns anfangen. Nummer 1, Stark. Es ist ein Figma, Sketch und Adobe XD Plugin. Es ermöglicht Ihnen, Ihr Farbkontrastverhältnis zu überprüfen und verschiedene Farbsicht-Mängel zu simulieren. Sie müssen nur eine Zeichenfläche auswählen und das Plugin ausführen und Stark übernimmt den Rest. Nummer 2, Kontrast. Es ist ein Figma-Plugin, mit dem Sie das Kontrastverhältnis Ihrer Farben überprüfen können. Im Gegensatz zu Stark, mit dem Sie das Kontrastverhältnis nur dreimal mit dem freien Plan überprüfen können , hat Contrast keine Begrenzung in dieser Hinsicht, und es hat auch eine coole Funktion, die Ihr gesamtes Design scannt , um Textkontrastprobleme zu finden . Nummer 3, whocanuse.com. Es ist eine erstaunliche Website, die nicht nur das Farbkontrastverhältnis überprüft, sondern auch zeigt, wie Farbkombinationen verschiedene Menschen mit Sehbehinderungen beeinflussen können . Probieren wir es mal aus. Zuerst geben wir die Hintergrundfarbe an, dann legen wir unsere Textfarbe fest und geben die Schriftgröße und das Gewicht an. Hier können wir das Kontrastverhältnis sehen, das ziemlich hoch ist, und eine Sortierung, die AAA ist. Darüber hinaus können wir sehen, wie verschiedene Menschen diese Farbkombination verarbeiten können, so dass wir die Regular Vision, die beliebtesten Farbblindheit Mängel und einige andere Sehprobleme haben. Wir haben auch die Situation oder Vision Ereignisse, was sehr interessant ist, weil wir sehen können, wie zugänglich unsere Farbkombination ist, indem wir die Wirkung von direktem Sonnenlicht simulieren, einen Nachtmodus auf einem Telefon oder Bildschirm. 27. Farbinspiration: Als Designer suchen wir immer überall nach Inspiration, um mit Designtrends Schritt zu halten, neue Ideen zu entwickeln und so weiter. Inspiriert zu sein ist ein Teil unseres Lebens. Es ist eine sehr gute Sache, weil es uns hilft, unseren Geist zu öffnen und neue Dinge auszuprobieren. Wir können uns inspirieren lassen für unser Designlayout oder sogar für die Erstellung unserer Farbpaletten. Inspirierende Quellen sind überall. Wir könnten uns von der Natur, von den Farben Ihrer Blumen odersogar von Ihrem persönlichen Gegenstand inspirieren von den Farben Ihrer Blumen oder lassen. Ich werde dir eine Frage stellen. Welche Farbharmonie haben wir hier? Du hast recht. Komplementär. Was ist mit hier? Wenn Ihre Antwort monochromatisch ist, haben Sie völlig Recht. Wir haben auch hier monochromatische Farbharmonie. Sie können auch einige Websites für Inspiration besuchen, wie Dribble, wo Sie eine Farbe wählen und sehen, wie andere Designer dies in ihren Kunstwerken verwenden. Sie können eine andere Website namens Color Hunt überprüfen , auf der Sie viele verschiedene Farbpaletten für Ihre Projekte finden können. Die nächste Website heißt Muzli. Sie können zu colors.muz.li gehen, wählen Sie Ihre gewünschte Farbpalette, und es wird Ihnen zeigen, wie Ihr Farbschema tatsächlich auf einer Schnittstelle aussieht. 28. Online-Tools für color: Es gibt viele verschiedene Werkzeuge denen Sie Ihre harmonischen Farbpaletten erstellen können. In diesem Video werde ich Ihnen einige nützliche Farbpalette zu zeigen, die Websites generieren. Bist du bereit? Lasst uns loslegen. Nummer 1, Kühler. Wie ich bereits erwähnt habe, ist dies das Werkzeug, mit dem ich harmonische Farbkombinationen für meine Projekte finde. Sie können es auch versuchen. Lassen Sie mich Ihnen zeigen, wie es funktioniert. Sobald Sie die Website geöffnet haben, können Sie im Menü auf die Schaltfläche Generieren klicken und hier ist der Palettengenerator. Wenn Sie die Leertaste auf der Tastatur drücken, ändert sich diese ganze Palette. Sobald Sie eine Farbe gefunden haben, die Sie mögen, können Sie diese Farbe mögen, indem Sie auf das Schloss-Symbol klicken. Drücken Sie nun die Leertaste, bis Sie eine zweite Farbe gefunden haben. Es macht Spaß, nicht wahr? Ich sollte erwähnen, dass jetzt nur die am besten passenden Farben basierend auf den Farben ausgewählt werden, die Ihnen gefallen. Sie sollten diesen Vorgang so lange durchführen, bis Sie alle Farben auswählen. Jetzt können Sie Ihre Farbpalette exportieren und in Ihrer Designsoftware verwenden. Wenn Sie eine bestimmte Hauptfarbe haben, können Sie einfach den Hex-Farbcode hier einfügen, ihn sperren und die Leertaste drücken, um Ihre Farbpalette zu generieren. Sobald Ihre Farbpalette fertig ist, können Sie andere coole Funktionen dieser Website verwenden. Beispielsweise können Sie die Attribute aller Farben auf einmal mit der Option „Palette anpassen“ anpassen. Sie können auch die Zugänglichkeit Ihrer Farbe überprüfen, indem Sie die Option „Farbblindheit“ verwenden. Aber was ist, wenn Sie eine Farbpalette mit einer bestimmten Farbharmonie erstellen möchten? Mach dir keine Sorgen, das kannst du auch. Gehen Sie einfach zum Menü Mehr und klicken Sie auf Generate Methode. In diesem Dropmenü können Sie die Farbharmonie angeben, die Sie zum Erstellen von Farbpaletten verwenden möchten. Möchten Sie Ihre Farbpaletten im Graustufenmodus sehen? Klicken Sie einfach auf die Ansicht Luminanz-Karte. Sie können auch eine Palette aus einem Foto erstellen. Klicken Sie dazu auf den Kamera-Button und laden Sie Ihr Bild hier hoch. Ihre Farbpalette ist fertig. Wenn Sie nach Farbverläufen suchen, können Sie einfach den Abschnitt „Gradienten erkunden“ aufrufen und hier finden Sie unzählige Farbverläufe für Ihre Projekte. Lassen Sie uns über das zweite Werkzeug sprechen, mit dem Sie Ihre eigenen Farbpaletten erstellen können , MyColor.Space. Es ist eine weitere großartige Website, die Ihnen alle Farben gibt , die Sie benötigen, basierend auf Ihrer primären Farbe. Wählen Sie hier einfach Ihre Farbe aus und klicken Sie auf „Generieren“. Wie Sie sehen können, zeigt es Ihnen verschiedene Farbkategorien, aus denen Sie je nach Bedarf wählen können. Das nächste Werkzeug heißt Adobe Color. Es ist ein fortschrittliches Werkzeug, mit dem Sie Farbpaletten einfach erstellen können, indem verschiedene Farbharmonien auswählen und diese auf der Farbauswahl anpassen, genau so. Sie können auch zum Abschnitt „Entdecken“ gehen und durch unzählige Farbpaletten aus Fotos blättern . Wenn Sie zum Abschnitt „Trends“ gehen, können Sie aktuelle Farbtrends in verschiedenen Branchen wie Mode, Grafikdesign, Illustration usw. entdecken . Unter der Registerkarte „Eingabehilfen“ können Sie die Zugänglichkeit Ihrer Farben als auch. Möchten Sie künstliche Intelligenz oder KI verwenden, um Ihre Farbpaletten zu erstellen? Wenn du das tust, habe ich gute Nachrichten für dich. Die nächste Website, über die wir sprechen werden, heißt Khroma und sie verwendet künstliche Intelligenz, um einen neuronalen Netzwerk-basierten Algorithmus für die Erstellung personalisierter Farbpaletten zu trainieren . Nun, wie funktioniert es? Zuerst sollten Sie Ihre 50 Lieblingsfarben auswählen, um den Generatoralgorithmus zu trainieren. Sobald Sie Ihre Farben ausgewählt haben, klicken Sie auf die Schaltfläche „Training starten“, um den Trainingsprozess zu starten. Sobald es fertig ist, werden Sie mit Hunderten von verschiedenen Farbpaaren und Farbpaletten präsentiert . Es ist so cool, nicht wahr? 29. Anwendungshinweise eine Farbpalette auf eine Website – Teil 1: Hey alle, willkommen zurück zu einem anderen Video dieses Tutorials. In diesem Video zeige ich Ihnen, wie Sie eine Farbpalette erstellen können , um Farben auf eine Zielseite anzuwenden. Wenn Sie sich nicht sicher sind, wie Sie die Primär-, Sekundär- und Akzentfarben finden können, machen Sie sich keine Sorgen. Ich werde Sie durch alle erforderlichen Schritte führen, um eine schöne und harmonische Farbpalette zu schaffen. Außerdem werde ich Ihnen zeigen, wie Sie es auf eine Zielseite anwenden können. Für dieses Projekt habe ich bereits eine Landing Page in Figma entworfen. Ich möchte, dass Sie Startdatei der Landingpage aus dem Ressourcenbereich herunterladen und in Ihr Figma-Dashboard importieren. Wenn Sie mit Figma nicht vertraut sind, lassen Sie mich Ihnen sagen, dass Figma eine beliebte browserbasierte Anwendung ist , mit der Sie Benutzeroberflächen entwerfen können. Wir werden es verwenden, um all die Dinge, die Sie bisher gelernt haben, auf ein Projekt der realen Welt anzuwenden. Um eine Startdatei für die Landingpage zu importieren, klicken Sie einfach auf diese Schaltfläche „Importieren“ in der oberen rechten Ecke und wählen Sie die Datei auf Ihrem Computer aus. Sobald es importiert wurde, doppelklicken Sie einfach darauf, um es zu öffnen. Lassen Sie mich hineinzoomen. Da gehen wir. Hier ist ein Konzeptprojekt, das ich für diese Übung entworfen habe. Wie Sie sehen können, habe ich dies im Graustufenfarbmodus mit Ausnahme des Logos und der Bilder vorbereitet , die sind bunt. Diese Zielseite ist für ein imaginäres Unternehmen namens Draft, und sie bieten Online-Versicherungsdienstleistungen für Unternehmer. Alles wird unter einer Anwendung namens Draft durchgeführt werden. Lassen Sie mich eine Vorschau anzeigen, damit wir die gesamte Landing Page sehen können. Oben haben wir eine gewöhnliche Navigationsleiste, und dann ist hier unser Heldenbereich. Auf der linken Seite haben wir den Inhalt, den Titel, den Untertitel und einen Aufruf zur Aktion, diese Schaltfläche. Auf der rechten Seite haben wir einige Karten und auch diese Markierung. Jetzt werde ich nach unten scrollen. Hier ist der Kundenbereich. Wie Sie sehen können, sind diese bunt weil wir nicht gehen, um ihre Farben zu ändern sowieso, so dass ich sie bunt gehalten. Lassen Sie mich nach unten scrollen. Dies ist der Feature-Abschnitt. Wie Sie sehen können, haben wir sechs verschiedene Karten und jede Karte stellt ein Feature dar. Der Inhalt hier ist nicht real und ich benutze Lorem Ipsum Texte hier. Sie können sie ändern, aber für die Zwecke dieses Tutorials ist es egal, weil wir uns auf Farben konzentrieren werden. Unten haben wir eine Schaltfläche „Alle durchsuchen“. Lassen Sie mich nach unten scrollen. Hier haben wir einen Testimonial Abschnitt. einmal sind die Logos bunt. Ich werde nach unten scrollen. Hier gibt es einen weiteren Abschnitt, der dem Benutzer die wichtigsten Dienste zur Verfügung stellt , die er von diesem Unternehmen erhalten kann. Wir haben einige Bilder und den Inhalt auf der rechten Seite. Lassen Sie mich nach unten scrollen. Dieser Abschnitt ist der CTA-Abschnitt. Hier bitten wir den Benutzer, die App auf seinem Handy zu installieren. Lassen Sie mich nach unten scrollen. Zu guter Letzt haben wir die Fußzeile. Wie Sie sehen können, haben wir einige Kategorien, einige Links, die Kontaktinformationen und auch eine kurze Beschreibung von Entwurf. Wir haben auch hier einen Call to Action Button. Unten haben wir einen Copyright-Haftungsausschluss und die Social-Media-Icons. Lassen Sie mich Ihnen sagen, was wir tun werden. Zuallererst müssen wir eine Farbpalette erstellen, und dann müssen wir diese Farbpalette auf diese Landingpage auf die Elemente dieser Zielseite anwenden . Um dies zu tun, werde ich die Website namens Coolors verwenden, die ich Ihnen bereits vorgestellt habe. Lassen Sie mich voran und klicken Sie auf „Generieren“. Was ist der erste Schritt? Du hast recht, wir brauchen eine Primärfarbe oder eine Grundfarbe. Aber da diese Marke keine Primärfarbe hat, sollten wir als Designer mit der Primärfarbe kommen. Was meinst du? Welche Farbe eignet sich besser für eine Versicherungsgesellschaft? Glauben Sie, dass wir kühle Farben oder warme Farben verwenden müssen? Welche Farbharmonie sollten wir verwenden, um diese Farbpalette zu erstellen? Dies sind die typischen Fragen, die Sie sich stellen sollten , wenn Sie eine Farbpalette für Ihre Projekte erstellen möchten. Werfen wir einen Blick auf den Inhalt. Vor allem, um mit der Primärfarbe zu kommen, müssen wir an die Marke denken. Was ist die Idee dahinter, wer ist ihre Zielgruppe und was die Nutzer von der Marke erwarten? Lassen Sie uns zuerst über die Eigenschaften dieser Marke nachdenken. Dies ist eine Versicherungsgesellschaft und Benutzer sollten das Gefühl, dass sie sicher sind und ihr Vermögen sicher sind, und auch sie erwarten professionelle Einstellungen von der Marke. Da wir über Professionalität und Vertrauen sprechen, denke ich, Blau ist die beste Option, weil Blau bei Männern und Frauen beliebt ist, so dass es in dieser Hinsicht kein Hindernis gibt. Ich denke, wir könnten Blau für die Primärfarbe verwenden. Cool. Jetzt gehen wir weiter und wählen unsere Primärfarbe. Aber welche Art von Farbharmonien sollten wir verwenden? Da wir keine Illustrationen haben und ich keine kontrastreiche Farben bekommen möchte, denke ich, dass die beste Option wäre, analog zu wählen. Wir könnten auch monochromatisch verwenden, aber ich glaube nicht, dass kostenlose oder split-kostenlose gute Optionen wären. Ich werde mit analog gehen, so dass wir Farben wählen können, die nebeneinander auf dem Farbrad sind. Ich werde es auswählen und lassen Sie mich die „Leertaste“ auf meiner Tastatur drücken , um eine gute blaue Farbe zu erhalten. Hier haben wir verschiedene Arten von Blau. Ich werde einen von ihnen auswählen und ihn manuell ändern, um meine Primärfarbe zu erhalten. Ich denke, das hier ist eine gute Option. Ich klicke auf diesen Farbcode und lasse mich das Farbmodell auf HSB ändern. Lassen Sie mich den Farbton ein wenig ändern, um zu sehen, ob ich eine bessere Grundfarbe bekommen kann oder nicht. Dieses Blau ist cool, aber es ist zu hell. Also werde ich die Helligkeit von 85 auf etwa 30 verringern, vielleicht 31. Die Sättigung ist gut. Vielleicht kann ich es auf 84 erhöhen. Perfekt. Es ist cool. Jetzt, da unsere Primärfarbe fertig ist, lassen Sie mich sie sperren und ich ziehe sie auf die linke Seite, einfach so. Jetzt werde ich weiterhin die Leertaste auf meiner Tastatur drücken, um andere Farben zu erhalten. Ich mag diese hellblaue Farbe auch. Ich werde es auch sperren und lassen Sie mich wieder „Leertaste“ drücken. Diese mittlere Farbe sieht gut aus, aber es ist ein wenig entsättigt, also werde ich es irgendwie modifizieren. Lassen Sie mich zunächst den Farbtonschieber leicht nach rechts bewegen, um zu sehen, ob ich eine bessere Grundfarbe erhalten kann oder nicht. Ich denke, 227 ist gut. Wie Sie sehen können, ist die Sättigung auf 78 eingestellt, und ich werde sie erhöhen, um eine gesättigte Farbe zu erhalten. Siebenundachtzig sieht gut aus. Aber was ist mit der Helligkeit? Es ist zu dunkel. Lassen Sie mich auch die Helligkeit erhöhen. Ich werde es auf vielleicht 74 setzen. Perfekt. Ich werde es sperren und weiterhin die Leertaste drücken. Jetzt suche ich nach einer Akzentfarbe. Es könnte eine grüne Farbe oder eine violette Farbe sein, da wir eine analoge Farbharmonie verwenden. Mal sehen, ob wir diese grüne Farbe verwenden können oder nicht. Ich denke, es sieht gut aus; aber es muss ein wenig modifiziert werden. Ich werde hier auf den Hex-Farbcode klicken. Wie Sie sehen können, ist es zu gesättigt und es wäre ein Problem in Bezug auf Farbkontrast und Zugänglichkeit. Ich werde es ein bisschen entsättigt machen. Lassen Sie mich es auf 88 setzen. Außerdem werde ich die Grundfarbe ändern. Einhunderteinundsechzig sieht gut aus; es ist jedoch zu dunkel, um eine Akzentfarbe zu sein. Ich werde die Helligkeit ein wenig erhöhen. Ich denke, 82 sieht gut aus. Ich mag es. Lassen Sie mich es sperren und ich werde „Leertaste“ auf meiner Tastatur drücken. Jetzt suche ich nach zwei neutralen Farben. Ich mag diese Farben nicht. Was ich tun werde, ist den primären Farbcode hier zu kopieren. Ich gehe zum Hex. Ich werde es kopieren und lassen Sie es mich hier einfügen. Wir haben die Primärfarbe. Jetzt mit dem Farbwähler. Ich kann hier einen Ton erstellen, um meine gewünschte neutrale Farbe zu erhalten. Lassen Sie mich die Farbauswahl auf die linke Seite verschieben, um unserer Grundfarbe Grau hinzuzufügen. So schaffen wir einen Ton, wenn Sie sich erinnern, einfach so. Lassen Sie mich nun zu HSB gehen, um die Attribute meiner Farbe zu sehen. Die Sättigung ist gut; aber ich werde es ein wenig entsättigt machen. Lassen Sie mich die Sättigungsmenge auf 20 verringern. Auch für die Helligkeit werde ich es auf vielleicht 44 erhöhen. Sieht gut aus. Schön. Lass es mich abschließen. Jetzt werde ich eine weitere neutrale Farbe hinzufügen, aber eine helle. Wenn ich den Mauszeiger über diesen Abschnitt führe, kann ich auf dieses Symbol „Farbe hinzufügen“ klicken. Lassen Sie mich den Farbcode hier einfügen, genau so. Jetzt werde ich die Farbe ändern. Lassen Sie mich zum HSB-Farbmodell gehen. Der Farbton wird der gleiche sein, aber ich werde es entsättigt machen, um einen Farbton dieser Farbe zu schaffen. Lassen Sie mich es so entsättigt machen. Ich denke, wenn ich es auf sechs reduzieren würde, wäre es großartig. Außerdem werde ich die Helligkeit auf 99 erhöhen. Cool. Dies ist eine große neutrale Farbe. Ich werde es sperren und ich brauche noch eine Farbe, und das wird weiß sein, weil wir das für unsere Karten verwenden werden. Lassen Sie mich es in Weiß umwandeln. Perfekt. Cool. Unsere Farbpalette ist fertig. Jetzt ist es Zeit, es zu exportieren. Ich werde auf „Exportieren“ klicken und Sie könnten das Format verwenden, das Sie wollen, aber ich bevorzuge SVG, also lassen Sie es mich herunterladen. Jetzt gehe ich zu Figma und lasse mich die exportierte Farbpalette hierher ziehen und ablegen. Da gehen wir. Ich werde es vergrößern. Cool. Lassen Sie mich ihn hierher bringen. Alles klar, Leute, das ist alles für den ersten Teil dieses Projekts. Im nächsten Video werden wir anfangen, unsere Farben auf unser Design anzuwenden. Wir sehen uns dann. 30. Anwendungshinweise eine Farbpalette auf eine Website – Teil 2: Jetzt, da unsere Farbpalette fertig ist, müssen wir das Verhältnis unserer Farben definieren, da wir die 60-30-10-Regel verwenden werden. Lassen Sie mich fortfahren und diesen Text entfernen. Welche Farben werden unsere Primärfarben in Bezug auf das Verhältnis sein? Dieses Blau wird definitiv unsere Grundfarbe sein. Diese beiden Farben werden auch unsere Primärfarben in Bezug auf das Verhältnis sein. Die ersten drei Farben werden auf 60 Prozent unseres Designs angewendet. Diese drei Farben sind unsere sekundären Farben und werden auf 30 Prozent unseres Designs angewendet werden, und nicht zuletzt wird der Bildschirm als unsere Akzentfarbe fungieren, und er deckt 10 Prozent unseres Designs ab. Cool. Normalerweise müssen wir Farbstile erstellen, bevor wir Farben auf unser Projekt anwenden. Da es jedoch für dieses Tutorial nicht notwendig ist, werde ich diesen Schritt überspringen und wir werden anfangen, unsere Farben auf unsere Elemente anzuwenden. Ohne weitere Umschweife, lasst uns anfangen. Beginnen wir zuerst mit dem Hintergrund. Für den Hintergrund können wir eine dieser drei Farben verwenden. Ich denke, diese helle neutrale Farbe wird eine gute Option für unsere Hintergründe Farbe sein. Ich gehe voran und kopiere seinen Hex-Farbcode, und lass mich mein Kunstboard auswählen und es für den Hintergrund einfügen. Außerdem muss ich mich auch auf andere Abschnitte bewerben. Für die Navigationsleiste werde ich es hier anwenden, und auch für diese Clients Abschnitt, lassen Sie mich es einfügen. Ich werde nach unten scrollen. Wie Sie sehen können, müssen wir für den Testimonial Abschnitt einen dunklen Hintergrund verwenden. Warum? Denn hier haben wir einen dunklen Farbton. Welche Farbe kann also für diesen Abschnitt verwendet werden? Ich denke, eine unserer sekundären Farben wäre eine gute Option. Ich werde mit diesem Mittelblau gehen, lassen Sie mich den Farbcode kopieren, und ich werde auf diesen Hintergrund anwenden. Cool. Wie Sie sehen können, haben wir einen guten Kontrast zwischen den Karten und unserem Hintergrund. Cool. Was ist mit hier? Wie Sie hier sehen können, müssen wir auch eine dunkle Farbe verwenden. Für diesen Abschnitt werde ich unsere Primärfarbe verwenden. Lassen Sie mich den Hex-Farbcode kopieren und ich werde mich darauf bewerben, einfach so. Da gehen wir. Unsere Hintergründe Farben wurden erfolgreich angewendet. Jetzt ist es an der Zeit, zu anderen Abschnitten zu gehen. Fangen wir von oben an. Für diese Links werde ich meine sekundäre Farbe verwenden, diese. Ich werde den Hex-Farbcode kopieren und lassen Sie mich alle diese Links und auch dieses Pfeilsymbol auswählen , und ich werde es auf all diese Textebenen anwenden. Sie sehen toll aus. Aber was ist mit dem Heldenabschnitt Inhalt für diese beiden Textebenen, ich denke, die Primärfarbe wäre gut weil wir ein hohes Kontrastverhältnis zwischen unserem Hintergrund und unserem Vordergrund erstellen werden, also werde ich mit diesem gehen Primärfarbe. Lassen Sie mich es kopieren und diese beiden Textebenen auswählen, und ich werde es einfügen. Cool. Das letzte, was wir hier ändern müssen, ist der CTA oder Call-to Action Button. Wie Sie wissen, verwenden wir für CTAs in der Regel eine Akzentfarbe, weil sie die Aufmerksamkeit des Benutzers darauf lenken muss. Ich werde den Hex-Farbcode unserer Akzentfarbe kopieren und ihn hier einfügen. Für den Text werde ich jetzt weiß verwenden. Ich bin mir nicht sicher über das Kontrastverhältnis, aber im Moment müssen wir uns keine Sorgen darüber machen, denn später werden wir unsere Farben in Bezug auf das Kontrastverhältnis und die Farbzugänglichkeit validieren. Da wir während unseres gesamten Projekts konsistent sein müssen, werde ich auch für diesen Text die gleiche Farbe verwenden. Lassen Sie mich es kopieren, und ich werde es für diese beiden Textebenen einfügen. Auch hier. Außerdem werden wir die gleiche Farbe auf alle diese Textebenen anwenden. Ich werde alle von ihnen auswählen und die Farbe einfügen. Lassen Sie uns sehen, welche Farben für unsere Karten hier verwendet werden sollen. Die Karten werden weiß sein. Wie Sie hier sehen können, haben wir weiße Karten, und hier haben wir auch zwei weiße Karten, und sie sehen sauber und erstaunlich aus. Aber die Dinge, die wir brauchen, um unsere diese Symbole, die Textebenen und auch diese Schaltfläche „Durchsuchen“ zu ändern . Für diese Symbole, wie Sie sehen können, haben wir drei verschiedene Schattierungen, daher müssen wir drei verschiedene Farben verwenden. Ich werde unsere sekundären und Akzentfarben für diese Symbole verwenden. Lassen Sie mich fortfahren und kopieren Sie den Farbcode der Sekundärfarbe. Jetzt, anstatt die Farbe dieser Symbole nacheinander zu ändern, auf der rechten Seite, unter den Auswahlfarben, können Sie sehen, dass wir drei verschiedene Schattierungen haben. Ich werde den ersten auswählen und den Farbcode einfügen. Da gehen wir. Wir haben die erste Farbe aufgetragen. Jetzt ist es Zeit, die zweite Farbe anzuwenden, die diese ist. Ich gehe weiter und kopiere den Farbcode meiner anderen sekundären Farbe. Ich werde die Feature-Liste auswählen, und der nächste Farbton wird dieser sein, also lassen Sie mich ihn einfügen. Da gehen wir. Sie sehen schon erstaunlich aus. Für die letzte Farbe werde ich die Akzentfarbe verwenden. Lassen Sie mich den Farbcode kopieren, wählen Sie die Karten, und ich werde auf alle fünf Farben klicken. Da gehen wir. Ich werde es einfügen. Sie sehen toll aus, nicht wahr? Wie Sie sehen können, wurde auch die Farbe unseres Explore Buttons geändert. Weil der gleiche Farbton dafür verwendet wurde, so dass wir es nicht ändern müssen. Für den Text gehe ich voran und kopiere die Primärfarbe und füge sie hier ein. Cool. Können Sie sehen, wie schön und sauber dieser Abschnitt ist? Der Grund dafür ist, dass wir eine Farbharmonie verwendet haben, um diese Farbpaletten zu finden, und wir haben auch die 60-30-10-Regel verwendet. Jetzt ist es an der Zeit, unsere Schaltfläche „Alle durchsuchen“ hier zu ändern. Für diesen Knopf werde ich unsere Akzentfarbe verwenden, die diese grün ist. Für den Text und dieses Pfeilsymbol werde ich jetzt weiß verwenden. Was ist mit hier? Die Karten sind in Ordnung, aber wir müssen die Farbe dieses Textes ändern. Ich werde sie auswählen und lassen Sie mich unsere Primärfarbe auf alle diese Texte anwenden. Für diesen Text werde ich die neutrale Farbe verwenden, die wir zuvor erstellt haben. Lassen Sie mich fortfahren und den Farbcode kopieren. Jetzt werde ich die gleichen Farben auf all diese Inhalte anwenden. Lassen Sie mich diesen Prozess schnell weiterleiten, um Ihre Zeit zu sparen. Es ist erledigt. Nun, lassen Sie mich die Farbe dieses großen Titels ändern. Ich denke, unsere helle neutrale Farbe wäre großartig dafür. Lassen Sie mich das wählen. Was ist mit diesen Anführungszeichen? Nun, offensichtlich müssen wir unsere sekundäre Farbe dafür verwenden. Aber das hellblaue, das hier. Ich werde den Hex-Farbcode kopieren und ihn hier einfügen. Es ist zu hell, also werde ich die Deckkraft auf 20 Prozent reduzieren. Jetzt sieht es viel besser aus. Dieser Abschnitt ist ebenfalls erledigt. Jetzt können wir zu einem anderen Abschnitt vorwärts gehen. Hier, wie Sie sehen können, haben wir drei verschiedene Kreise hinter diesen Fotos und sie sind helle Farbtöne. Wir sollten auch hier die Deckkraft unserer Farben verringern. Für den ersten werde ich unsere Primärfarbe dafür verwenden und die Deckkraft auf 20 Prozent verringern. Für die zweite, werde ich unsere blaue sekundäre Farbe verwenden und ich werde die Deckkraft auch auf 20 Prozent verringern. Für den letzten werde ich unsere Akzentfarbe verwenden und auch die Deckkraft auf 20 Prozent verringern. Da diese Titel Auto, Büro und Haus, mit diesen Fotos übereinstimmen, werde ich die Farbe dieser Aufzählungspunkte direkt vor diesen Titeln ändern. Die erste wird unsere Primärfarbe haben, aber wir müssen die Deckkraft hier nicht verringern. Die zweite wird unsere sekundäre Farbe haben, und die letzte wird unsere Akzentfarbe haben. Dieser Abschnitt sieht auch gut aus. Ich hoffe, es gefällt dir. Gehen wir nun zum nächsten Abschnitt über. Dies wird als CTA-Sektion bezeichnet. Hier müssen wir nur die Textfarbe ändern. Für den Text werde ich unsere neutrale Farbe verwenden , die wir für unseren Hintergrund verwendet haben, einfach so. guter Letzt müssen wir auch Farben auf unsere Fußzeile anwenden. Für diesen Text und diese Kategorien oben, werde ich unsere matte neutrale Farbe verwenden, die diese ist, also lassen Sie mich das wählen. Cool. Wie Sie sehen können, wurde es auf alle diese Textebenen angewendet. Für diese CTA-Taste werde ich die Akzentfarbe verwenden, diese, und auch für den Text werde ich weiß verwenden. Für diese Links werde ich unsere Primärfarbe verwenden, diese. Was ist mit diesem Divider, diesem Haftungsausschluss und auch mit diesen Social Media Icons? Ich denke, wenn wir unsere matte neutrale Farbe verwenden, wäre es großartig, die, die wir für diesen Text verwendet haben. Ich werde es kopieren und es für all diese Elemente und auch für diese Symbole einfügen. Wie Sie sehen können, haben wir vergessen, die Farbe dieses Wortes zu ändern, Entwurf. Ich werde unsere sekundäre Farbe dafür verwenden. Cool. Unsere Lernseite ist fertig. Wir haben erfolgreich eine Farbpalette erstellt und alle diese Farben auf unser Design gemäß der 60-30-10-Regel angewendet . Lassen Sie uns eine Vorschau anzeigen. Unser Heldenbereich sieht gut aus, die Navigationsleiste sieht sauber aus, wir haben die CTA-Leiste mit der Akzentfarbe, unsere Karten hier sind weiß, diese Autos sehen gut aus, wir haben die analogen Farbschema für diese Symbole, sieht der Testimonial Abschnitt auch sauber aus. Für diesen Abschnitt haben wir die Primärfarbe und einige Farbtöne unserer Sekundär- und Akzentfarben verwendet . Für diesen Abschnitt haben wir unsere Primärfarbe als Hintergrund und eine neutrale Farbe für unsere Vordergrundinhalte verwendet . Letzt haben wir unsere Primär-, Sekundär- und Akzentfarben für die Fußzeile verwendet . Alles sieht cool aus. Jetzt müssen wir jedoch unsere Farben überprüfen und sehen ob sie den Kontrastverhältnis-Test bestehen oder nicht. Ich werde von oben anfangen und dann zu anderen Abschnitten übergehen. Lassen Sie mich zunächst einen dieser Links auswählen, zum Beispiel über, und dann werde ich mit der rechten Maustaste darauf klicken. Ich werde das Kontrast-Plugin ausführen. Wie Sie sehen können, bestanden diese Farbe den Kontrastverhältnis-Test für Doppel- und Dreifach-Level, und es ist fantastisch. Aber was ist mit diesen Texten? Es hat auch alle Tests bestanden und es ist großartig. Jetzt werde ich diese auswählen, bringen Sie uns den Text an. Wie Sie sehen können, obwohl es auf unserer Schnittstelle sehr gut aussieht, ist der Test des Kontrastverhältnisses fehlgeschlagen. Wir müssen das in Ordnung bringen. Wir haben zwei Möglichkeiten. Wir können entweder unsere Akzentfarbe ändern, was meiner Meinung nach keine gute Idee ist, oder wir könnten unsere Textfarbe ändern. Anstelle von Weiß werde ich voran gehen und unsere Primärfarbe für diese Texte wählen. Jetzt, wie Sie sehen können, besteht es den Kontrastverhältnis-Test. Können Sie sehen, wie wichtig es ist, Ihre Farben in Bezug auf das Kontrastverhältnis zu validieren. Lassen Sie mich fortfahren und alle anderen Schaltflächen modifizieren, wie hier und auch hier. Cool. Aber was ist mit hier? Wenn ich diese Texte selektiere, können Sie sehen, dass es den Kontrastverhältnis-Test bestanden hat. Was ist mit dieser Schaltfläche „Durchsuchen“? Es bestanden auch einen Kontrastverhältnis-Test. Hier, wie Sie es über den Kontrastverhältnis-Test sehen können. Wir haben diese Farbe bereits vor unserem Hintergrund überprüft, damit wir wissen, dass sie den Kontrastverhältnis-Test und auch für diese Texte bestanden hat. Aber was ist mit hier? Lassen Sie mich es auswählen. Wie Sie sehen können, übergibt es die AA-Ebene für normalen Text und AAA- und AAA-Ebenen für großen Text, also ist es kein Problem. Hier haben wir diese Farbe bereits vor unserem Hintergrund überprüft, und im Grunde ist das alles. Nachdem wir nun unsere Farben auf Basis des Kontrastverhältnisses validiert haben, ist es an der Zeit, unsere Farben basierend auf den Mängeln der Farbblindheit zu validieren. Ich wähle meine Zeichenfläche aus. Es ist kein Graustufenmodus mehr. Dann werde ich ein Plugin namens Farbfilter laufen. Wenn ich auf Graustufen klicke, können wir sehen, dass wir wieder einen Graustufenmodus haben. Wir haben verschiedene Grautöne, so dass die visuelle Hierarchie sehr gut aussieht. Wir haben hier ein gutes Kontrastverhältnis für unsere Inhalte und unsere Buttons. Alles sieht toll aus. Jetzt nehmen wir einen weiteren Farbmangel. Ich werde den Prozess rückgängig machen, Befehl+Z oder Strg+Z, und lassen Sie mich das Plugin noch einmal ausführen und wählen, zum Beispiel, rot blind. Wir haben auch gute Farbtöne, so sieht alles sauber aus für Menschen, die an diesem Farbsicht-Mangel leiden. guter Letzt überprüfen wir es auf einen anderen Farbmangel. Zum Beispiel, blaue Kegel Monochromacy. Offensichtlich haben wir graue Farbtöne, so dass die Menschen bei der Nutzung dieser Website kein Problem haben. Lassen Sie uns eine Vorschau auf unsere Lernseite zum letzten Mal. Können Sie sehen, wie sauber diese Lernseite ist? Farben sind harmonisch und auch für jedermann zugänglich. Alles klar, Leute, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und wir sehen uns im nächsten. 31. Anwendungshinweise eine Farbpalette auf eine Anwendung – Teil 1: Hey, alle. Willkommen zurück. In diesem Video erstellen wir eine weitere Farbpalette und wenden sie auf eine mobile Anwendung an. Aber zuerst, stellen Sie sicher, dass Sie das Mobile App Starter Project aus dem Bereich Ressourcen herunterladen und in Ihr Figma-Dashboard importieren. Sie können es entweder per Drag & Drop in diese Umgebung oder klicken Sie auf die Schaltfläche „Importieren“ in der oberen rechten Ecke und wählen Sie es von Ihrem Computer aus. Lass es mich aufmachen. Dies ist das Projekt, das wir bereits für Sie vorbereitet hatten. Wir werden Schritt für Schritt eine Farbpalette erstellen und sie gemäß der 60-30 und 10-Regel auf unser Design anwenden . Wenn du bereit bist, lass uns anfangen. Wie Sie hier sehen können, habe ich für Sie eine Zeichenfläche namens Colors mit vielen Mustern vorbereitet . Zum Beispiel haben wir primäre und neutrale semantische Diagramme und Datenvisualisierung. Wir müssen die Farbe aller Farbfelder ändern, aber zuerst möchte ich Ihnen das Projekt zeigen. Das Projekt, an dem wir arbeiten werden, ist eine persönliche Finanzanwendung und es ermöglicht Benutzern, ihre Finanzen einfach zu verwalten. Ich entwarf alle Seiten im Graustufenfarbmodus, dass wir leicht die Schattierungen unterscheiden und unsere Farben auf all diese Elemente anwenden konnten . Wie Sie hier sehen können, haben wir drei verschiedene Anmeldeseiten. Grundsätzlich ist das Design das gleiche, aber dieses ist das Haupt-Signal in Seite. Die zweite ist die Anmeldeseite, aber wir haben den Benutzernamen und das Passwort und auch einen Fehler hier. Auf der dritten Seite haben wir dieses Warnsymbol, wie Sie sehen können, lassen Sie mich vergrößern, dass Sie deutlich sehen konnten, dass, und ein CTA oder Aufruf zur Aktion, und einige Links. Auf der Homepage haben wir einen großen Titel, zwei verschiedene Kreditkarten und einen Dialog, der dem Benutzer die letzten drei Transaktionen präsentiert. Letzt, aber nicht zuletzt haben wir die Seite Finanzen. Auf dieser Seite haben wir oben ein Kreisdiagramm. Unmittelbar darunter haben wir einige Informationen über die Ausgaben. Auch hier haben wir die Daten zu diesem Kreisdiagramm bezogen. Welche Farben brauchen wir für dieses Projekt? Zunächst einmal müssen wir eine Primärfarbe finden, und wir könnten auch sekundäre Farben haben, aber ich glaube nicht, dass es notwendig ist. Dieses Mal werden wir Coolors oder andere Websites nicht verwenden , um unsere Farbpalette zu entwickeln. Ich werde Ihnen zeigen, wie Sie das manuell machen können. Da es sich um eine Finanz-App und Benutzer müssen dieser App vertrauen, wieder, werden wir blau als primäre Farbe verwenden. Aber dieses Mal, anstatt eine analoge Farbharmonie zu verwenden, werde ich eine monochromatische Farbharmonie verwenden. Sind Sie bereit, unsere Farbpalette zu erstellen? Fangen wir an. Lassen Sie mich hier hineinzoomen. Ich wähle mein erstes Farbfeld aus und lasse mich zum Abschnitt „Füllen“ gehen und auf diese Farbe klicken, um die Farbauswahl zu öffnen. Wie bereits erwähnt, werde ich Blau als Primärfarbe verwenden. Ich werde den Schieberegler in den blauen Bereich verschieben. Ich denke, das Blau sieht gut aus. Vielleicht könnte ich den Farbton auf 217 ändern, so etwas. Es sieht jetzt viel besser aus. Für die Primärfarbe werde ich es ein wenig entsättigt machen. Lassen Sie mich die Sättigung von 94 auf etwa 90 oder vielleicht 89 verringern. Sieht gut aus. Außerdem wird die Helligkeit etwa 70 oder vielleicht 75 betragen. Sieht nett aus. Unsere Primärfarbe ist fertig. Jetzt ist es Zeit, zu anderen Farben überzugehen. Da wir eine monochromatische Farbharmonie verwenden, wird unsere Grundfarbe die gleiche sein. Ich wähle alle diese Farbfelder aus. Halten Sie die Umschalttaste auf Ihrer Tastatur gedrückt, und wählen Sie alle Farbfelder aus, und ändern Sie einfach ihre Farbe in unsere Primärfarbe einfach so. Jetzt wähle ich das zweite Farbfeld aus und lasse mich einen dunklen Farbton unserer Primärfarbe erstellen , weil wir das für unsere Textebenen benötigen. Zunächst einmal möchte ich die Intensität oder Sättigung meiner Farbe so von 90 auf 100 erhöhen . Außerdem werde ich die Helligkeit verringern, um meiner Grundfarbe Schwarz hinzuzufügen. Wenn ich meinen Farbwähler einfach so nach unten schiebe, kann ich ihn leicht schwarz hinzufügen. Aber ich denke, wenn ich es auf etwa 45 oder vielleicht 43 setzen würde, wäre es großartig. Sieht nett aus. Unsere zweite Farbe ist auch fertig, aber was ist mit der letzten Farbe? Dieses wird als unsere Akzentfarbe verwendet werden, so dass es lebendig und hell sein muss. Lassen Sie mich fortfahren und die Sättigung und die Helligkeit ändern. Da diese Farbe irgendwie hell ist, können wir sie leicht heller machen, wenn wir die Sättigung und Helligkeit auf 100 Prozent einstellen. Jetzt brauchen wir drei neutrale Farben. Lassen Sie mich dieses Farbfeld auswählen und dann werde ich einen Ton unserer Grundfarbe erstellen. Wenn Sie sich erinnern, um einen Ton zu erstellen, müssen wir unserer Grundfarbe Grau hinzufügen. Wenn ich meinen Farbwähler einfach in den grauen Bereich schiebe, kann ich einen Ton erstellen. Wie Sie sehen können, bekommen wir eine stumpfe Farbe, und das ist genau das, was wir wollen, aber lassen Sie mich es ein wenig heller machen, indem Sie die Helligkeit erhöhen. Im Moment ist die Helligkeit auf 43. Lassen Sie mich es auf vielleicht 49. Sieht gut aus. Die zweite neutrale Farbe wird eine Tönung unserer Grundfarbe sein, daher müssen wir weiß zu unserer Grundfarbe hinzufügen. Lassen Sie mich einfach so zum weißen Abschnitt gehen. Ich werde die Sättigung auf fünf einstellen und die Helligkeit wird 100 Prozent betragen. Wie Sie sehen können, haben wir eine tolle neutrale Farbe. Die letzte neutrale Farbe wird reinweiß sein. Warum brauchen wir das? Denn wir werden es als Vordergrundfarbe verwenden, zum Beispiel für Icons und auch für einige unserer Texte Farben. Ich werde es dir später zeigen. Cool. Unsere primären und neutralen Farben sind fertig. Jetzt müssen wir zum nächsten Abschnitt gehen, semantische Farben. Wie Sie wissen, ist es optional, semantische Farben in Ihrer Farbpalette zu haben. Wie ich Ihnen jedoch gezeigt habe, haben wir hier die Anmeldeseiten, und wir haben hier einen Fehler und auch eine Warnung. Für diese beiden Zustände müssen wir semantische Farben haben. Lassen Sie mich voran gehen und wählen Sie hier das erste Farbfeld aus. Ich gehe zum Abschnitt „Füllen“, um unsere Farbauswahl zu öffnen. Da wir eine rote Farbe benötigen, stellen Sie sicher, dass Sie das H oder den Farbton auf Null setzen, weil wir so eine reine rote Farbe erhalten können. Aber wie Sie sehen können, ist es zu hell und lebendig, also werden wir das beheben. Lassen Sie mich es auswählen. Wenn ich zum Farbwähler gehe, kann ich die Intensität leicht verringern, indem ich die Sättigung auf vielleicht 60 senke, lassen Sie mich überprüfen, oder vielleicht 65. Außerdem werde ich die Helligkeit auf 95 einstellen , damit sie etwas dunkler aussieht, genau so. Jetzt werde ich zwei Farbtöne dieser Farbe erstellen. Lassen Sie mich zunächst das zweite Farbfeld auswählen. Ich werde diese Farbe verwenden, dann werde ich weiß hinzufügen. Für die letzte, werde ich es noch weiter bewegen, um eine sehr helle Tönung unserer Farbe zu erhalten. Manchmal, wenn Sie eine Karte oder ein Symbol erstellen möchten, wären diese Farbtöne sehr nützlich, um ein gutes Kontrastverhältnis zwischen Vorder- und Hintergrundelementen zu schaffen . Nun gehen wir zur zweiten semantischen Farbe über, die wir brauchen. Die erste ist für die Fehlermeldung erforderlich, aber die zweite ist für das Warnsymbol erforderlich. Zur Warnung, wie Sie wissen, müssen wir gelb verwenden. Lassen Sie mich voran und wählen Sie ein Gelb mit dem Farbwähler. Ich denke, das ist eine coole Farbe. Nun, ich werde das zweite Farbfeld auswählen und unsere gelbe Farbe bekommen, aber dieses Mal, anstatt zwei Farbtöne zu haben, werde ich einen Farbton und einen Farbton unserer Grundfarbe erstellen. Um einen Farbton zu erstellen, werde ich meiner Farbe Schwarz hinzufügen. Wenn ich die Helligkeit so verkleinere, könnte ich einen tollen Farbton erzeugen. Ich denke jedoch, dass es ein wenig entsättigt sein muss, also lassen Sie mich die Sättigung auf etwa 70 oder vielleicht 68 verringern. Ja, es sieht gut aus. Im Moment denken Sie vielleicht, dass es keine gute Farbkombination ist, aber wenn wir anfangen, es zu benutzen, können Sie sehen, wie harmonisch diese Farben wären. Für das letzte Farbfeld, wieder, werde ich unsere Grundfarbe wählen, und dieses Mal werde ich eine Tönung unserer Farbe erstellen. Lassen Sie mich weiß hinzufügen, einfach so. Die Sättigung wird 40 sein und die Helligkeit wird 100 sein. Perfekt. Unsere semantischen Farben sind auch fertig. Aber wie Sie sehen können, haben wir einen weiteren Abschnitt zu füllen, und das ist Diagramme und Datenvisualisierung. Warum brauchen wir diese Farben? Nun, weil wir hier Diagramme und Daten haben. Wenn Sie an einer mobilen Finanzanwendung oder einer Finanz-Web-App arbeiten, ist es fast unvermeidlich, diese Farben zu verwenden, da wir Daten auf eine Weise darstellen müssen , die unterscheidbar und klar zu erkennen sind. Wenn Sie sich für die Diagramm- und Datenvisualisierung erinnern, könnten wir drei verschiedene Farbschemata verwenden, kategorisch, sequentiell und divergiert. Normalerweise, wenn wir Daten ohne numerischen Wert wie in diesem Diagramm präsentieren wollen, verwenden wir kategoriale Farbschema. Warum? Da wir das kategorische Farbschema verwenden, konnten wir mit hohen Kontrastfarben kommen , die die Benutzer leicht zwischen ihnen unterscheiden konnten. Lassen Sie uns weitermachen und diesen Abschnitt auch beenden. Zunächst werde ich hier mein erstes Farbfeld auswählen und mich weitermachen lassen und meine erste Farbe auswählen. Für die erste Farbe werde ich blau verwenden. Es könnte jedes blaue sein. Es muss nicht unbedingt einer der primären Blues sein. Da dieses Blau jedoch gut aussieht, werde ich den Hex-Farbcode kopieren und ihn auch für unsere Diagramme und Datenvisualisierung verwenden , also werde ich ihn hier einfügen. Aber ich denke, ich könnte das irgendwie ändern, weil diese Farbe so gesättigt ist. Lassen Sie mich die Sättigung von 90 auf etwa 80 oder vielleicht 82 verringern. Es sieht gut aus, und auch, ich werde die Helligkeit von 73-78 erhöhen. Cool. Aber was ist mit der nächsten Farbe? Denken Sie daran, dass die Reihenfolge dieser Farben eine große Rolle spielt. Warum? Weil Menschen mit Farbsichtmangel diese Farben leicht verarbeiten sollten, wenn sie nebeneinander platziert werden. Wenn es jetzt nicht verständlich ist, ist es völlig in Ordnung. Sobald unsere Farbpalette fertig ist, werde ich Ihnen ein Beispiel zeigen, dass Sie es perfekt bekommen können. Aber jetzt gehen wir weiter und vervollständigen unsere Farbpalette. Für den zweiten werde ich eine grüne Farbe verwenden. Lassen Sie mich zum grünen Abschnitt gehen. Ich denke, das Grün sieht gut aus. Vielleicht könnte ich den Farbton auf 150 verringern und nun die Sättigung und Helligkeit verringern, um diese Farbe etwas dunkler aussehen zu lassen. Cool. Sieht nett aus. Nun, lassen Sie mich gehen und mein drittes Farbfeld auswählen, und für dieses hier werde ich Gelb verwenden. Lassen Sie mich meine semantische Farbe Gelb wählen, diese, und ändern Sie einfach die Sättigung und Helligkeit. Für Helligkeit denke ich, 100 ist in Ordnung. Vielleicht könnten wir es auf 99 ändern, aber für die Sättigung werde ich es viel entsättigt machen. Im Moment ist es auf 90 eingestellt, aber ich werde es 60 oder vielleicht 66 machen. Ja, es sieht cool aus. Kannst du das Muster sehen, das ich hier benutze? Für die erste Farbe, wie Sie sehen können, war die Helligkeit 77, was der Wert unserer Farbe ist. Für den nächsten ist die Helligkeit 63, also haben wir sie dunkler gemacht. Für den nächsten ist die Helligkeit 97, also haben wir sie leichter gemacht. Deshalb habe ich gesagt, dass die Reihenfolge dieser Farben wichtig ist, denn wenn jemand mit zum Beispiel Monochromacy Vision diese Farben verarbeiten will, können sie leicht zwischen ihnen unterscheiden. Lassen Sie mich das nächste Farbfeld auswählen. Für den nächsten werde ich meine rote semantische Farbe verwenden, und lassen Sie mich sie ein wenig modifizieren. Vielleicht könnten wir die Sättigung auf 60 oder vielleicht 62 verringern, so etwas. Die Helligkeit sieht gut aus. guter Letzt werde ich für diesen eine dunkelblaue Farbe verwenden. Lassen Sie mich den Farbtonschieberegler in den blauen Bereich verschieben. Ich denke, diese Farbe sieht gut aus. Vielleicht kann ich den Farbton auf 247 verringern, und für die Sättigung werde ich es um 65 oder vielleicht 61. Allerdings muss es zu dunkel sein, also lassen Sie mich die Helligkeit von 74 auf etwa 30 oder 35 verringern. Lass mich sehen, wie es aussieht, 36 sieht gut aus. Cool. Unser Farbschema für die Diagramm- und Datenvisualisierung ist ebenfalls bereit. Jetzt ist es Zeit, Ihnen zu zeigen, warum die Reihenfolge dieser Farben wichtig ist. Lassen Sie mich zunächst diese Zeichenfläche auswählen, und ich werde hier mit der rechten Maustaste klicken, um ein Plugin auszuführen , das ich Ihnen bereits in früheren Videos gezeigt habe, es heißt Farbfilter. Wenn ich zu Colorblind-Simulationen gehe, kann ich zum Beispiel Monochromität wählen, und im Moment können Sie sehen, dass sich der Wert dieser Farben kontinuierlich ändert und wir nicht zwei dunkle Schattierungen nebeneinander haben. Zum Beispiel haben wir diese Farbe hier nicht, weil es für den Benutzer zu schwer wäre, zwischen ihnen zu unterscheiden. Deshalb ist hier die Reihenfolge der Farben wichtig. Lassen Sie mich den Vorgang rückgängig machen. Das ist alles für den ersten Teil dieses Projekts. Ich hoffe, es hat dir gefallen und wir sehen uns im nächsten Teil. 32. Anwendungstechnische Anwendung: Teil 2: Jetzt ist es an der Zeit, unsere Farben auf unser Design anzuwenden. Wenn du bereit bist, lass uns anfangen. Zunächst einmal werde ich mit diesen Anmeldeseiten beginnen. Für den Hintergrund, zuerst werde ich diese Zeichenfläche auswählen, und auf der rechten Seite unter den Auswahlfarben, werde ich auf alle neun Farben klicken, einfach so. Hier haben wir neun verschiedene Grautöne, und wir müssen sie nacheinander ändern. Das hier ist unser Hintergrund. Für den Hintergrund werde ich unsere helle neutrale Farbe verwenden. Lassen Sie mich die Pipette benutzen und unsere helle neutrale Farbe wählen, genau so. Wenn Sie nicht wissen, welche Farben welchen Elementen entsprechen, können Sie auf dieses Symbol klicken, um die Elemente zu finden , für die diese Farben verwendet werden. Zum Beispiel werde ich darauf klicken. Hier können Sie sehen, dass wir einen Schlagschatten mit dieser Farbe haben. Lassen Sie mich jetzt gehen und ändern Sie die Farbe unseres Titels. Für den Titel, wie Sie sehen können, ist es zu dunkel, also haben wir einen dunklen Farbton. Daher müssen wir unseren dunklen Farbton verwenden, den wir hier geschaffen haben. Lassen Sie mich seine Farbe ändern, einfach so. Aber was ist mit den Textfeldern? Die Textfelder werden weiß sein, daher werden wir sie so lassen, wie sie sind. Die Elemente hier wie diese Symbole und diese Textebenen müssen jedoch geändert werden. Für diese Symbole werde ich unsere Akzentfarbe verwenden. Lass mich weitermachen und ihre Farbe einfach so ändern. Aber was ist mit diesen beiden Textebenen? Für diese Textebenen brauchen wir wieder einen dunklen Farbton. Aber anstatt unsere Primärfarbe zu verwenden, werde ich unsere neutrale Farbe verwenden, diese. Lassen Sie mich voran gehen und wählen Sie unsere neutrale Farbe, einfach so. Unsere Textfelder sind fast fertig. Wie Sie jedoch sehen können, haben wir einen Strich um sie herum und wir müssen auch ihre Farbe ändern. Für den Strich haben wir eine Farbe, aber mit 50 Prozent Deckkraft. Für diese Farbe werde ich wieder unsere neutrale Farbe verwenden. Lassen Sie mich auch die Deckkraft auf 50 Prozent reduzieren. Lassen Sie mich einfach den gleichen Prozess machen. Jetzt sind unsere Textfelder fertig. Aber es gibt drei weitere Elemente, die wir ändern müssen, diesen vergessenen Passwort-Link, diesen CTA und diesen Link. Lassen Sie mich zunächst diese beiden Links auswählen und ich werde unsere Akzentfarbe für sie verwenden. Ich werde unsere Akzentfarbe einfach so wählen. Aber was ist mit unserem CTA? Wie Sie wissen, verwenden wir für den CTA auch unsere Akzentfarbe. Es wird so einfach werden. Lassen Sie mich unsere Akzentfarbe wählen. Denken Sie jedoch daran, auch die Farbe unseres Schattens zu ändern, da es keine gute Praxis ist, einen schwarzen Schlagschatten für bunte Elemente zu verwenden. Ich werde die Schattenschicht wählen. Lassen Sie mich die gleiche Farbe wählen und ihre Deckkraft auf 32 Prozent verringern. Wie Sie sehen können, ist unsere erste Anmeldeseite bereit und sie sieht schön und sauber aus. Ich hoffe, es gefällt dir auch. Jetzt müssen wir fortfahren und die gleichen Farben auf alle diese Anmeldeseiten anwenden. Ich werde diesen Prozess schnell weiterleiten, um Ihnen etwas Zeit zu sparen. Unsere Anmeldeseiten sind bereit. Ich habe die gleichen Farben auf alle diese Elemente angewendet außer dieser Fehlermeldung und diesem Warnsymbol, weil wir das zusammen tun werden. Für diese Fehlermeldung müssen wir eine semantische Farbe verwenden. Lassen Sie mich voran und wählen Sie die semantische Farbe. Ich werde den Hex-Farbcode kopieren und ihn hier einfügen. Es sieht gut aus, aber später müssen wir unsere Farben auch hinsichtlich des Kontrastverhältnisses validieren . Aber im Moment werden wir es so lassen, wie es ist. Aber was ist mit dieser Ikone? Für dieses Warnsymbol, wie Sie sehen können, haben wir zwei verschiedene Farben. Wir haben einen hellen Farbton und einen schwarzen Farbton. Für diesen hellen Farbton werde ich unsere Lichtfarbe verwenden, die wir hier geschaffen haben. Ich werde den Hex-Farbcode kopieren und ihn für den Kreis einfügen. Für diese beiden Elemente werde ich unseren dunklen Schatten verwenden, diesen, den wir zuvor erschaffen haben. Lassen Sie mich es hier einfügen und da ist es. Können Sie sehen, wie schön und harmonisch diese Farben jetzt sind? Deshalb ist es immer eine gute Idee, verschiedene Schattierungen und verschiedene Farbtöne Ihrer semantischen Farben zu kreieren . Unsere Anmeldeseiten sind perfekt vervollständigt. Jetzt können wir auf die nächste Seite gehen, die unsere Homepage ist. Hier haben wir viele Elemente. Wir haben einen Titel, zwei Kreditkarten, einen Dialog und einige Transaktionen. Lassen Sie mich mit dem Titel beginnen. Welche Farbe sollte dafür verwendet werden? Wenn Ihre Antwort der schwarze Farbton unserer Primärfarbe ist, haben Sie 100 Prozent Recht. Wir müssen Farben konsequent im gesamten Projekt verwenden. Ich werde diese Farbe kopieren und es für diesen Titel einfügen. Aber was ist mit dem Hintergrund? Für den Hintergrund werde ich die gleiche helle neutrale Farbe verwenden, genau so. Nun lassen Sie uns Farben auf unsere Kreditkarten anwenden. Für die Hauptkarte werde ich meine Akzentfarbe verwenden, diese, aber stellen Sie sicher, dass Sie die richtige Ebene in der Ebenenliste auswählen. Da ich die Maske benutze, heißt sie Rechteck sieben. Ich werde mich dafür entscheiden. Lassen Sie mich unsere Akzentfarbe dafür verwenden. Da gehen wir. Diese Texte werden weiß und auch dieses MasterCard-Logo wird weiß bleiben. Aber was ist mit diesen Zeilen? Für diesen hier werde ich den dunklen Farbton unserer Primärfarbe verwenden, den, den wir für unseren Titel verwendet haben, diesen. Das hier wird weiß sein. Sieht toll aus. Aber was ist mit dieser Karte? Wie Sie hier sehen können, haben wir einen Farbton unserer Farbe. Es ist etwas heller. Die Farbe, die wir verwenden werden, wird die gleiche wie unsere Akzentfarbe sein. Wie Sie sehen können, ist es jedoch heller, weil ich die Deckkraft der Hauptkarte, hier MasterCard zwei, auf 50 Prozent vermindere . Wenn ich es auf 100 Prozent erhöhe, können Sie sehen, dass wir keine gute visuelle Hierarchie bekommen. Da die Hauptkarte hier nicht ausgewählt ist, ist es besser, sie zu 50 Prozent zu machen. Aber was ist mit diesen Karten? Der Dialog selbst wird weiß sein. Diese Karten werden jedoch unsere neutrale Farbe verwenden, diejenige, die wir für unseren Hintergrund verwendet haben. Diese Farbe wurde bereits auf diese Karten angewendet , da wir den Bereich „Auswahlfarben“ verwenden, sodass wir sie nicht ändern müssen. Aber was ist mit diesem Indikator? Für diesen werde ich meine Primärfarbe verwenden, die diese ist, und dann werde ich ihre Deckkraft auf 15 Prozent verringern. Jetzt müssen wir zu unseren Elementen übergehen. Wie Sie sehen können, haben diese Quadrate keinen sehr schwarzen Farbton wie dieser schwarze Farbton, wie Sie hier sehen können. Daher werde ich unsere Akzentfarbe für sie verwenden. Wenn Sie die Farben dieser Elemente miteinander vergleichen, können Sie sehen, dass alle den gleichen Farbton außer diesem verwenden. Wenn ich nur meine Homepage-Zeichenfläche auswähle, kann ich diese Farbe einfach auswählen und ich kann die Akzentfarbe einfach so verwenden. Alle diese Farbtöne wurden sofort geändert. Aber was ist mit diesen Daten? Für diese Daten werden wir unsere matte neutrale Farbe verwenden. Ich werde sie alle auswählen, und lassen Sie mich voran gehen und unsere dunkle neutrale Farbe wählen, einfach so. Sie sehen toll aus. Jetzt müssen wir zu unserer letzten Seite übergehen, die die Finanzseite ist. Ganz oben haben wir eine Navigationsleiste. Die Elemente dieser Navigationsleiste sollten dieselbe Farbe verwenden. Ich werde sie alle auswählen, und ich werde die Primärfarbe für sie verwenden, diese. Mit der Pipette kann ich meine Primärfarbe auswählen. Dort gehen wir, die Farbe wurde auf alle angewendet. Hier hatten wir ein Kreisdiagramm, und für diese Diagramme müssen wir ein Diagramm und Datenvisualisierung Farbschema verwenden. Daher sind wir nicht mehr darauf beschränkt, unser monochromatisches Farbschema zu verwenden. In Ordnung. Beginnen wir mit dieser großen Form. Ich wähle das aus, und ich werde hier unsere blaue Farbe wählen. Lassen Sie mich diese Farben Kunstbrett hier bewegen, lassen Sie mich diese auswählen und mit der Pipette, Ich werde diese Farbe auswählen. Fantastisch. Aber diese Form hat auch einen Schlagschatten Wenn Sie also diese blaue Ebene wählen, die unter unserer Hauptform in der Ebenenliste, können Sie auch die Farbe unseres Schlagschattens ändern, genau wie diese und die Deckkraft auf 30 Prozent verringern. Jetzt, für die nächste Form, werde ich grün verwenden. Achten Sie darauf, die Bestellung gleich zu halten, zum Beispiel, verwenden Sie kein Rot und legen Sie es neben unser Blau, weil Menschen, die unter Farbsicht-Mängel leiden , in diesem Fall Schwierigkeiten haben können. Für die nächste Form werde ich grün verwenden, und lassen Sie mich auch die Schlagschattenfarbe ändern. Ich werde grün auswählen und die Deckkraft auf 30 Prozent verringern und für die nächste Form werde ich diese verwenden, gelb. Ich habe bereits den Layer-Namen geändert, damit Sie leicht verstehen können , welche Form welche Farbe verwenden soll. Lassen Sie mich nun auch die Farbe der Schlagschatten ändern und die Deckkraft auf 30 Prozent verringern. Die nächste Form wird unsere rote Farbe verwenden, auch der Schlagschatten muss rot sein mit einer 30 Prozent Deckkraft, und last but not least, lassen Sie mich unsere letzte Farbe verwenden und wir brauchen keinen Schlagschatten hier. Es sieht sehr gut aus, nicht wahr? Jetzt ist es an der Zeit, Farben auf diese Textebenen anzuwenden. Hier haben wir zwei verschiedene Schattierungen. Einer ist zu dunkel, und diese beiden sind etwas heller. Ich werde diese und diese Ebene auswählen, und ich werde unsere neutrale Farbe für sie einfach so verwenden. Für diese müssen wir jedoch einen dunkleren Farbton verwenden, daher sieht der dunkle Farbton unserer Primärfarbe hier gut aus. Können Sie sehen, wie einfach es ist, Farben auf unser Design anzuwenden wenn wir unser Projekt bereits im Graustufenmodus entworfen haben? Aber was ist mit diesen Daten? Für diese Kreise müssen wir die gleichen Farben verwenden, die wir für unser Diagramm verwendet haben. Also dieser hier, der größte ist, wird blau sein. Ich wähle diesen Kreis aus und benutze einfach dieses Blau und diese Linie wird das gleiche Blau als auch verwenden. Für die zweite, die der nächste große Aufwand ist, wird es gelb sein, also werde ich dieses hier benutzen, das gleiche Gelb hier. Die nächste wird grün sein, also werde ich diese beiden Formen gleichzeitig auswählen, und lassen Sie mich unsere grüne Farbe wählen. Dieses Online-Shopping wird rot sein, also werde ich rot auswählen, und nicht zuletzt müssen die anderen Gruppen unseren dunkelsten Farbton verwenden , der diese Farbe ist. Aber was ist mit diesen Textebenen? Für die Titel, zum Beispiel Miete, Lebensmittel, Restaurants, etc. Ich werde unsere dunkle Grundfarbe verwenden, die, die wir für diesen Betrag verwendet haben, also lassen Sie mich diese verwenden. Für diese Transaktionen und diese Beträge werde ich unsere matte neutrale Farbe verwenden. Ich wähle alle aus, halte die Umschalttaste gedrückt und klicke nacheinander darauf und wähle schließlich unsere neutrale Farbe. Sie sehen fantastisch aus, nicht wahr? Der letzte ist unser CTA, der Download Statement Button. Für diesen werde ich unsere Akzentfarbe verwenden, die diese ist, und auch für den Schlagschatten werde ich die gleiche Farbe verwenden, jedoch mit einer 32 Prozent Deckkraft. Schön. Eine Sache, die wir vergessen haben zu ändern, ist der Hintergrund dieser Seite. Lassen Sie mich also das Kunstbrett auswählen und einfach die Hintergrundfarbe in unsere neutrale blaue Farbe ändern. Kannst du sehen, wie schön diese Seiten sind? Ich hoffe, es gefällt dir. Lassen Sie mich jetzt voran und schauen Sie sie eins nach dem anderen. Hier ist unsere erste Anmeldeseite, diese ist die zweite Anmeldeseite mit diesem Fehlerstatus. Dieser hat ein Warnsymbol mit unseren semantischen Farben, und hier haben wir unser monochromatisches Farbschema für die Kreditkarten und alle anderen Elemente verwendet . Letzt für den Finanzbildschirm, da wir ein kategoriales Diagramm hatten, ein kategoriales Farbschema für sie verwendet. Wir sind fast fertig. Das einzige, was wir jetzt tun müssen, ist, unsere Farben basierend auf dem Farbkontrastverhältnis zu validieren. Lassen Sie mich zum Beispiel den Anmeldentitel auswählen, und ich werde ein Plugin namens Kontrast ausführen, das wir zuvor verwendet haben. Genau so, wie Sie sehen können, bestanden alle Kontrastverhältnis-Tests für alle Niveaus, die doppelten A- und Triple-A-Levels. Was ist mit diesem Text? Es hat fast alle Tests bestanden, aber es ist für die dreifache A-Ebene für normalen Text fehlgeschlagen, aber es ist völlig in Ordnung, weil es bereits die doppelte A-Ebene bestanden hat. Was ist mit dieser, unserer semantischen Farbe? Wie Sie sehen können, ist es für normalen Text fehlgeschlagen, aber wenn Sie einen Blick auf das Kontrastverhältnis werfen, das 3, 1:1 ist, können Sie sehen, dass es nicht so niedrig ist und es akzeptabel ist, diese Farbe für diese Textebene zu verwenden, warum? Denn für diese Textebene haben wir eine halbfett gewichtige Gewichtung verwendet. Wenn ich es zu regulär ändere, ist es jetzt nicht akzeptabel, aber für halb fett oder fett Text ist diese Farbe akzeptabel, solange das Kontrastverhältnis nicht weniger als 3, 1:1 beträgt. Was ist mit dem hier? Es besteht auch die erforderliche Prüfung, und diese, fantastisch. Aber was ist mit hier? Für den Titel haben wir das bereits überprüft. Lassen Sie mich die Textebenen auf diesen Karten auswählen. Wie Sie sehen können, hat es alle Tests bestanden. Was ist mit hier, der Akzentfarbe gegen diese neutrale Farbe? Es hat alle Tests bestanden, und auch unsere matte neutrale Farbe gegen unsere helle neutrale Farbe, es hat wieder den ganzen Test bestanden. Lassen Sie mich den Kontrast dieses Textes auch überprüfen, ich werde das Plugin noch einmal ausführen. Wie Sie sehen können, hat es alle Tests bestanden. Wir werden keine anderen Farben validieren, zum Beispiel diese, weil wir sie bereits überprüft haben. In Ordnung, Jungs. Das ist alles für dieses Video, ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. 33. Was als nächstes zu tun?: Okay Leute, das ist alles für diesen Kurs. Ich hoffe wirklich, es hat Ihnen gefallen und haben nützliche Fähigkeiten für Ihre Designreise gelernt. Jetzt sind Sie an der Reihe, das Gelernte zu üben und ein besserer Designer zu werden. Ich würde gerne Ihr Feedback zu diesem Kurs hören , um ihn für Sie immer besser zu machen. Wenn du über ein Kurs-Update oder meine neuen Kurse informiert werden möchtest , kannst du mir auch auf Skillshare folgen. Wenn Sie UI-UX-Designer werden möchten und nicht wissen, wo Sie anfangen sollen, können Sie sich meinen Figma-Kurs auf Skillshare ansehen, dem ich Ihnen alles beibringe, was Sie wissen müssen in dem ich Ihnen alles beibringe, was Sie wissen müssen, um eine Benutzeroberfläche zu werden UX-Designer. Wenn Sie mehr über UI UX Design erfahren und Ihre Designfähigkeiten verbessern möchten. Ich habe gute Nachrichten für dich. Ich habe einen YouTube-Kanal, auf dem ich Tonnen von kostenlosen Inhalten poste , die Sie vielleicht interessant finden. Abonniere also unbedingt meinen Kanal, um meine kommenden Tutorials nicht zu verpassen. Letzt möchte ich mich bei Ihnen dafür bedanken, dass Sie sich diesen Kurs angesehen haben, und ich kann es kaum erwarten, Ihre Farbpaletten und Kunstwerke zu sehen. Wir sehen uns und tschüss.