Farbtheorie im UI-Design: Erstellen zugänglicher, beeindruckender Farbpaletten in Figma und Adobe XD

1. Einführung: Verbringen Sie Stunden damit, Farben zu optimieren , nur um am Ende eine Palette zu erhalten , die sich immer noch falsch anfühlt Hallo. Ich bin Ruben Suspez, leitender Produktdesigner bei Del Technologies und Adobe-Partner 20 Jahre im Design hatten mich eine Wahrheit gelehrt. Farbe entscheidet über ein Produkt oder macht es kaputt. Sie in Figma und Adobe XD unabhängig von der Theorie der weißen Farbe Erstellen Sie in Figma und Adobe XD unabhängig von der Theorie der weißen Farbe barrierefreie Paletten Sie werden den Schnickschnack überspringen und einen wiederholbaren Arbeitsablauf erlernen. Wählen Sie einen Grundton und erweitern Sie ihn in Primär-, Sekundär- und Akzentfarben Testen Sie dann alles innerhalb von Sekunden gegen den WCAG-Kontrast. Wir üben gemeinsam live, erstellen eine Palette und wenden sie auf Überschriften, Schaltflächen, Hintergründe und Sie werden sehen, warum kleine Änderungen an Sättigung und Temperatur das Auge lenken können, um die Benutzerfreundlichkeit zu verbessern Du wirst Farbverläufe, Stop-Overlays und Markenintegration beherrschen Stop-Overlays Nehmen Sie dann einen Schlussstein in Angriff und gestalten Sie zwei Bildschirme einer beliebigen App oder Website mit Ihrer neuen Palette neu beliebigen App oder Website mit Poste es, hol dir mein Feedback und steige schnell auf. Welche Tools werden wir verwenden? Es liegt an dir. Sie können Figma oder Adobxt verwenden Und als Bonus erhalten Sie kostenlos mein 100-seitiges Bestseller-eBook Conquering y Design Sind Sie bereit, mit dem Raten zu beginnen und selbstbewusst mit dem Entwerfen zu beginnen, und in weniger als einem Nachmittag werden Sie Farbpaletten versenden, die gut aussehen und auch für jeden geeignet sind. Wir sehen uns im Unterricht Machen wir Farbe zu Ihrer Geheimwaffe. 2. Grundlagen der Farbtheorie: Hallo und willkommen zu dieser Lektion über Farbtheorie. Farbe ist ein wesentliches Element des Designs, und es ist entscheidend, zu verstehen, wie sie funktioniert, um effektive und visuell ansprechende Benutzeroberflächen zu erstellen . In dieser Lektion behandeln wir die Grundlagen der Farbtheorie, einschließlich des Farbrads , der Primär -, Sekundär - und Tertiärfarben sowie der Rolle von Farbton, Sättigung und Wert. Lassen Sie uns zunächst über das Farbrad sprechen. Das Farbrad ist eine visuelle Darstellung der Farben des Spektrums, die in einem Kreis angeordnet sind. Es ist ein nützliches Tool , um zu verstehen, wie Farben zueinander stehen , und um Farbschemata zu erstellen. Die Grundfarben sind Rot, Gelb und Blau. Diese Farben können nicht durch Mischen anderer Farben erzeugt werden und bilden die Grundlage für alle anderen Farben im Farbrad. Die Sekundärfarben entstehen durch Mischen von zwei Primärfarben. Dazu gehört Orange aus Rot und Gelb. Grün aus Blau und Gelb und Lila aus Blau und Rot. Tertiärfarben werden durch Mischen einer Primärfarbe und einer Sekundärfarbe erzeugt . Dazu gehören Farben wie Gelb, Grün, Rot, Lila und Blaugrün. Lassen Sie uns nun über Farbton, Sättigung und Wert sprechen. Farbton bezieht sich auf die Farbe selbst, z. B. Rot, Blau oder Gelb. Sättigung bezieht sich auf die Intensität oder Reinheit der Farbe. Gesättigtere Farben wirken lebendiger und weniger gesättigte Farben wirken gedämpfter. Der Wert bezieht sich auf die Helligkeit oder Dunkelheit einer Farbe. Je heller die Farben heller erscheinen, desto dunkler wirken die Farben gedämpfter. diese grundlegenden Konzepte der Farbtheorie verstehen, verfügen Sie über eine solide Grundlage für die Arbeit mit Farbe in Ihren UI-Designprojekten. In der nächsten Lektion werden wir die verschiedenen Methoden zur Auswahl von Farbpaletten untersuchen . Danke fürs Zuschauen. 3. Auswahl einer Farbpalette: In dieser Lektion werden wir verschiedene Methoden zur Auswahl einer Farbpalette für Ihre Benutzeroberfläche untersuchen verschiedene Methoden zur Auswahl . Die Auswahl der richtigen Farbpalette ist sehr wichtig, da sie einen großen Einfluss auf das allgemeine Erscheinungsbild Ihres Designs haben kann einen großen Einfluss auf das allgemeine Erscheinungsbild Ihres Designs haben . Bei der Auswahl einer Farbpalette können Sie verschiedene Ansätze verfolgen . Schauen wir uns zunächst einfarbige Schemata an. Eine einfarbige Palette besteht aus verschiedenen Farbtönen und Farbtönen einer einzigen Farbe. Dies kann zu einem zusammenhängenden und harmonischen Look führen, aber es kann sich auch eingeschränkt anfühlen, wenn es alleine verwendet wird. Ein analoges Farbschema besteht aus Farben, die auf dem Farbrad nebeneinander liegen, z. B. Blau, Blau, Grün und Grün. Diese können für ein harmonisches und zusammenhängendes Aussehen sorgen, aber es kann sich auch sicher und uninteressant anfühlen , wenn es nicht kreativ verwendet wird. Ein komplementäres Farbschema besteht aus Farben, die sich auf dem Farbrad gegenüberstehen , z. B. Blau und Orange. Dadurch entsteht ein kontrastreicher Look , der sehr auffällig sein kann. Er kann aber auch Jain fühlen, wenn er nicht vorsichtig benutzt wird. Ein triadisches Farbschema besteht aus drei Farben, die gleichmäßig über das Farbrad verteilt sind , z. B. Rot, Gelb und Blau. Dies sorgt für ein ausgewogenes harmonisches Aussehen, aber er kann sich auch zu lebendig und chaotisch anfühlen, wenn er nicht in Maßen eingesetzt wird. Bei der Auswahl einer Farbpalette ist es wichtig, den Zweck der Benutzeroberfläche, die Zielgruppe und die allgemeine Designästhetik zu berücksichtigen . Sie sollten auch auf die Barrierefreiheit von Farben achten Barrierefreiheit von Farben achten und sicherstellen, dass Ihr Gaumen für alle Benutzer lesbar und zugänglich ist . In der nächsten Lektion werden wir untersuchen, wie Farbe verwendet werden kann, um Hierarchien und Akzente im UI-Design zu setzen. Danke fürs Zuschauen. 4. Farbe zur Erstellung von Hierarchie: In dieser Lektion werden wir untersuchen, wie Farbe verwendet werden kann, um Hierarchien zu erstellen. Und der Schwerpunkt liegt im UI-Design. Hierarchie bezieht sich auf die relative Bedeutung verschiedener Elemente auf einer Seite oder einem Bildschirm. Und die Betonung wird verwendet, um die Aufmerksamkeit auf ein bestimmtes Element zu lenken. Eine Technik zur Erstellung von Hierarchien und Betonungen ist der Farbkontrast. Durch die Verwendung von Farben mit hohem Kontrast können Sie bestimmte Elemente hervorheben und die Aufmerksamkeit auf sich ziehen. Wenn Sie z. B. eine helle Farbe vor einem dunklen Hintergrund verwenden , kann ein kontrastreicher Look erzielt werden, der die Aufmerksamkeit auf sich zieht. Sättigung. Es ist ein weiteres Tool dem Sie Akzente setzen können. Gesättigtere Farben sind tendenziell auffälliger als weniger gesättigte Farben. Die Verwendung stark gesättigter Farben kann dazu beitragen, die Aufmerksamkeit auf wichtige Elemente zu lenken. Größe ist ein weiterer wichtiger Faktor für Schaffung von Hierarchie und Betonung. Größere Elemente sind tendenziell stärker ausgeprägt und ziehen mehr Aufmerksamkeit auf sich. Daher kann es effektiv sein, größere Elemente zu verwenden, um wichtige Informationen hervorzuheben . Es ist wichtig, diese Techniken in Maßen anzuwenden und das Gesamtdesign, die Ästhetik und den Zweck der Benutzeroberfläche zu berücksichtigen . Zu viel Betonung kann überwältigend sein und Verwendung zu vieler kontrastierender Farben kann erschütternd sein. In der nächsten Lektion werden wir die Bedeutung der Barrierefreiheit von Farben für das UI-Design erörtern . Danke fürs Zuschauen. 5. Color: In dieser Lektion werden wir die Bedeutung der Barrierefreiheit von Farben für das UI-Design erörtern . Es ist wichtig sicherzustellen, dass Ihre Benutzeroberfläche für alle Benutzer zugänglich ist. Dazu gehört auch die Gestaltung für Benutzer mit Farbenblindheit und anderen Sehbehinderungen. Farbenblindheit ist eine Erkrankung, etwa 8% der Männer und 0,5% der Frauen betroffen sind. Es kann Menschen erschweren, zwischen bestimmten Farben zu unterscheiden. Und es gibt verschiedene Arten von Farbenblindheit. Am häufigsten ist die rotgrüne Farbenblindheit, die es schwierig machen kann, zwischen diesen beiden Farben zu unterscheiden. Um für Farbenblindheit zu entwerfen, ist es wichtig, den Farbkontrast zu berücksichtigen und eine Kombination von Farben zu verwenden , die einen hohen Kontrast aufweisen und leicht zu unterscheiden sind . Beispielsweise kann durch die Verwendung von Blau und Gelb oder Schwarz und Weiß ein kontrastreiches Aussehen erzielt werden, das für Menschen mit Farbenblindheit leichter zu erkennen ist. Es ist auch wichtig, andere Sehbehinderungen wie Sehstörungen oder die Empfindlichkeit gegenüber bestimmten Farbkombinationen zu berücksichtigen wie Sehstörungen oder die . Verwenden Sie großen, klaren Text. Das Vermeiden von schwer lesbaren Farbkombinationen kann dazu beitragen, Ihre Benutzeroberfläche für alle Benutzer zugänglicher zu machen. In der nächsten Lektion untersuchen wir die Rolle von Farben beim Branding und wie diese Markenfarben in unser UI-Design integrieren können. Danke fürs Zuschauen. 6. Die Rolle der Farbe: In dieser Lektion untersuchen wir die Rolle von Farben Branding und wie Sie diese Markenfarben in Ihr UI-Design integrieren können. Farbe ist ein mächtiges Instrument für das Branding und kann dazu beitragen, eine starke visuelle Identität und eine emotionale Verbindung zu Kunden aufzubauen. Verschiedene Farben können unterschiedliche Emotionen und Assoziationen hervorrufen. Daher ist es wichtig, bei der Auswahl der Markenfarben die Botschaft zu berücksichtigen, die Sie vermitteln möchten. Sobald Sie Ihre Markenfarben festgelegt haben, ist es wichtig, sie in allen Marketingmaterialien, einschließlich Ihrer Website oder App, einheitlich zu verwenden in allen Marketingmaterialien, einschließlich Ihrer Website oder App, einheitlich . Dies trägt dazu bei, ein einheitliches Erscheinungsbild zu schaffen und Ihre Markenidentität zu stärken. Bei der Integration von Markenfarben in Ihr UI-Design ist es wichtig, die allgemeine Ästhetik und den Zweck der Benutzeroberfläche zu berücksichtigen . Sie sollten diese Farben so verwenden, dass die Benutzererfahrung verbessert und das Gesamtdesign unterstützt wird. Es ist auch wichtig, die Barrierefreiheit von Farben zu berücksichtigen und sicherzustellen, dass Ihre Markenfarben für alle Benutzer lesbar und zugänglich sind . Wenn Sie Farben mit hohem Kontrast verwenden , um schwer lesbare Farbkombinationen zu vermeiden , können Sie Ihre Benutzeroberfläche leichter zugänglich machen. In der nächsten Lektion behandeln wir fortgeschrittene Techniken für die Arbeit mit Farben im UI-Design, wie Farbverläufe , Überblendungen und Layering. Danke fürs Zuschauen. 7. Fortschrittliche Farbtechniken: In dieser Lektion behandeln wir fortgeschrittene Techniken für die Arbeit mit Farbe im UI-Design. Diese Techniken können Ihren Benutzeroberflächen Tiefe und Interesse verleihen und zu einem einheitlicheren Erscheinungsbild beitragen . Eine fortgeschrittene Technik ist die Verwendung von Gradienten. Ein Farbverlauf ist ein fließender Übergang zwischen zwei oder mehr Farben. Es kann verwendet werden, um flachen Elementen wie Schaltflächen oder Hintergründen Tiefe und Interesse zu verleihen . Verläufe können mit einem Verlaufswerkzeug oder durch die Verwendung mehrerer Farbebenen und Anpassen dieser Transparenz erstellt Verwendung mehrerer Farbebenen werden. Mischen. Es ist eine weitere fortschrittliche Technik, mit der Sie nahtlose Übergänge zwischen Farben erstellen können Sie nahtlose Übergänge zwischen Farben erstellen , indem Sie Mischmodi verwenden Sie können eine Reihe von Effekten erzeugen, z. B. das Überlagern einer Farbe über einer anderen oder das Erstellen eines farbigen holländischen Effekts. Schichtung. Es ist eine weitere Technik , mit der Sie Ihrer Benutzeroberfläche Tiefe und Interesse verleihen können . Indem Sie verschiedene Elemente überlagern, können Sie ein Gefühl von Tiefe erzeugen und eine visuelle Hierarchie erstellen. Du kannst auch Layering verwenden, um flachen Elementen Textur und Interesse zu verleihen , z. B. indem du eine Musterüberlagerung über einem einfarbigen Element verwendest. Diese fortgeschrittenen Techniken können beim Abcdef helfen und Ihre Interfaces interessieren , aber es ist wichtig, sie in Maßen zu verwenden und die allgemeine Ästhetik und den Zweck Ihres Interfaces zu berücksichtigen . In der nächsten Lektion werden wir uns Fallstudien zur effektiven und ineffektiven Verwendung von Farbe im UI-Design ansehen . Danke fürs Zuschauen. 8. Analysieren Sie Real-World Fallstudi: Wir werden uns Fallstudien zur effektiven und ineffektiven Verwendung von Farben im UI-Design ansehen. Anhand effektiven und ineffektiven Verwendung von Farben im UI-Design Lysin-Beispielen aus der Praxis können Sie sehen wie sich verschiedene Farbwahlen auf das allgemeine Erscheinungsbild einer Benutzeroberfläche auswirken können . Schauen wir uns zunächst ein Beispiel für den effektiven Einsatz von Farbe an. Offizielle Website von BMW. Die Automarke verwendet eine harmonische Farbpalette, die Blautöne, Dunkeltöne und warum umfasst . Diese Farben passen gut zusammen und sorgen für einen zusammenhängenden und einladenden Look. Die Website verwendet Farben auch effektiv, um Hierarchien und Akzente zu setzen. Verwenden Sie größere, gesättigtere Elemente, um die Aufmerksamkeit auf sich zu ziehen und den Benutzer zu leiten. Mitarbeiter der Website von BMW haben das 603010-Farbschema oder die Farbregel festgelegt, wobei 60% der Primärfarbe Weiß den Hintergrund und 30% der Sekundärfarbe ausmachen. Großartig, wird als Overlay für Fotos in Texten verwendet. Dabei zehn Prozent der Akzentfarbe. Blau ist ein Merkmal für Symbole, Grafiken und Schaltflächen. Schauen wir uns nun ein Beispiel für eine ineffektive Verwendung von Farbe an. Das Design der Homepage der NYU stellt die Benutzer vor einige Herausforderungen. Die Verwendung einer einzigen Farbe, Violett, für die Navigation, Hauptteil und die Fußzeile führt einem Mangel an Kontrast, wodurch es schwierig ist zwischen verschiedenen Bereichen der Website zu unterscheiden , was verwirrend sein und die Navigation erschweren kann . Darüber hinaus erweckt das Rasterlayout des Hauptbereichs , der in einigen Texten hauptsächlich aus Blöcken mit einer einzigen durchgehenden Hintergrundfarbe besteht , den Eindruck, dass die Seite nicht vollständig geladen ist. Um dem entgegenzuwirken, mehr Bilder oder die Verwendung verschiedener Hintergrundfarben können mehr Bilder oder die Verwendung verschiedener Hintergrundfarben für die Blogs dazu beitragen, Kontexte bereitzustellen , um die Seite visuell ansprechender zu gestalten. Diese Fallstudien verdeutlichen, wie wichtig es ist, Farben bei der Gestaltung einer Benutzeroberfläche sorgfältig zu berücksichtigen Eine kohärente und harmonische Farbpalette kann das Benutzererlebnis verbessern und für ein einheitliches Erscheinungsbild sorgen. Ein chaotischer oder schlecht durchdachter Gaumen kann jedoch überwältigend und verwirrend sein. In der nächsten Lektion werden wir gemeinsam üben, wie man eine Farbpalette auswählt und sie auf eine Mockup-Website anwendet. Es ist an der Zeit, unserer Kreativität freien Lauf zu lassen und mit verschiedenen Farbkombinationen zu experimentieren. Wir mischen und kombinieren, bis wir eine harmonische und ausgewogene Farbpalette gefunden haben eine harmonische und ausgewogene Farbpalette um unsere Mockup-Site zum Leben zu erwecken. Bist du bereit für eine praktische Erfahrung? Also so unterhaltsam wie lehrreich? Dann lassen Sie uns mit der nächsten Lektion beginnen. Wir sehen uns dort. Danke fürs Zuschauen. 9. Anwendung einer Farbpalette: Lassen Sie uns gemeinsam üben: Hey, willkommen zurück. In dieser Lektion werden wir das üben, was Sie bisher gelernt haben. Wir haben über die Grundlagen der Farbtheorie gesprochen. Wir haben über die Auswahl einer Farbpalette gesprochen. Wir haben über die Barrierefreiheit von Farben gesprochen, was sehr wichtig ist. Wir haben über die Arbeit mit Markenfarben und auch über fortgeschrittene Techniken wie Farbverläufe, Mischmodi und Layering gesprochen auch über fortgeschrittene Techniken wie Farbverläufe, . In diesem Übungslauf wählen wir also eine Farbpalette aus. Wir werden eine ganze Farbpalette auswählen. Und wir werden es auf diese tolle Website anwenden , die ich für euch erstellt habe. Es ist eine Möbel-Website und ich habe sie genannt. Lassen Sie mich einfach gemütlich hineinzoomen. Also werden wir diese Farbpalette erstellen, Teil der Recherche durchführen und einige Tests zur Barrierefreiheit von Farben durchführen. Und dann werden wir diese Farbpalette anwenden. Sobald wir mit unserer Farbpalette zufrieden sind, werden wir sie auf diese Website anwenden. Auf diese Weise lernen Sie gerne wie wir Farbe in Ihre UI-Designs anwenden können. In diesem Beispiel verwenden wir die Regel der 603010-Regel, die 60% der gesamten Sache ausmacht. Und ich werde das klarstellen, weil manche Leute mit dieser 603010-Regel verwirrt werden. Das bedeutet, dass etwa 60% Ihres gesamten UI-Designs diese Farbe haben werden, diese Primärfarbe, die normalerweise aus weichen Farben wie Weiß und Helltönen besteht , oder sogar wie Farben als 30%, es wird Ihre Sekundärfarbe sein. Und dann sind die 10% so etwas wie Ihre Akzentfarbe, die manchmal je nach Ihrem Branding die Primärfarbe ist . Aber wir werden diese Regel anwenden und ich werde Ihnen zeigen, wie wir das erreichen können. Also zuerst, da wir eine Möbel-Website machen, müssen wir weitermachen und quasi nach Ideen suchen. Wenn wir über Farben sprechen. Wir müssen über die Bedeutung der Farbe nachdenken , die dahinter steckt. In diesem Fall verwenden wir keine Markenrichtlinien. Wir kreieren einfach gerne unsere eigene Farbpalette. Wenn Sie also an das College denken, müssen Sie über die Bedeutung nachdenken, die dahinter steht, wie Rot, was Leidenschaft und Energie bedeutet und in Gefahr ist. Beispielsweise bedeutet lila Spiritualität, Einzigartigkeit, Königtum. Gelb bedeutet so etwas wie Glück und Freundlichkeit und Energie. Schwarz bedeutet Macht und ist raffiniert in Tod und Mysterium. Warum die Verunreinigung und die Reinigung, Einfachheit und all das lustige Zeug. Wenn wir an eine Website für Möbel denken, denken wir an Sauberkeit. Wir denken darüber nach, wie sauber sie aussehen sollten, wie elegant sie aussehen sollten , denn das ist es, wonach wir suchen. Das ist es, was wir anstreben. Wenn wir also eine Farbpalette auswählen, denken Sie an ein Produkt. Du musst an die eines Benutzers denken. Man muss darüber nachdenken, was die Absicht dahinter ist Farbe spielt eine ziemlich große Rolle. Wenn es um all das geht, ein Möbelstück, Website oder ein Produkt, denkt man darüber nach, wie sauber und in Erdtönen aussehen sollte. Denken Sie an Brauntöne und wir denken an die weiße Farbe, oder wir denken an einige Gelb- und Orangen und Grüntöne , je nachdem, was ist Ihre Absicht dahinter? Also werden wir weitermachen und mit dem Experiment beginnen. Und deshalb habe ich das hier nebenbei erstellt , um etwas zu erkunden. Und genau das werden wir jetzt tun. Wir werden weitermachen und nach etwas Inspiration suchen . Das ist eine Sache. Wir gehen rüber zu behance.net und geben genau wie bei der Suche Furniture Website ein, oder? Und wir sehen einfach, was da draußen ist und was, weißt du, weißt du, wir haben hier ein paar Grünpflanzen. Wir haben einige, wir haben einen wirklich hellen Hintergrund. Die meisten von ihnen haben einen super hellen Hintergrund, was gut ist, denn genau was gut ist, denn danach suchen wir, sieh dir das an. Das ist super einfach. Das ist es, wovon ich spreche, wenn Sie an Farben denken. Weiß, es ist hier vorherrschend, weil es Einfachheit widerspiegelt und das ist es, was Sie anstreben. Und ich denke, wir werden so etwas machen. Was ich jetzt machen werde, ist hier einfach einen Screenshot von der ganzen Sache zu machen. Auf diese Weise haben wir etwas. Ich ziehe das raus und lege es einfach hier rein. Ich verwende übrigens Adobe XD, aber Sie können jedes Tool verwenden, mit dem Sie sich wohl fühlen, ob Figma oder Sketch oder Adobe XD, sogar Photoshop. Wenn Sie Photoshop verwenden, um Ihre Website zu gestalten , spielt das keine Rolle. Wir haben hier also einige Inspirationen, von denen wir uns definitiv inspirieren lassen können . Du siehst diese Farben. Das ist wirklich nett. Das ist auch wirklich nett. Ich liebe diese Farben. Und ich werde dir einen wirklich einfachen Trick zeigen. Für. Erstellen Sie eine schnelle Farbpalette , wenn es um Design geht. Ordnung, also plus Joes machen das ein bisschen kleiner. Leg das hier hin, aber das hier, ich habe das nur als Referenz. Daran ist nichts Besonderes. Es ist nur so, ich mag diesen wirklich sehr. Und wenn Sie möchten, zeige ich Ihnen einen Trick , wie Sie schnell eine Farbpalette erstellen können. Wir werden weitermachen und das Rechteckwerkzeug auswählen. Ich mache einfach ein Rechteck und wähle dann einfach eine zufällige Farbe. Und ich werde wahrscheinlich vier Farben machen. Also werde ich Option auf dem Mac gedrückt halten, Alt auf einem PC. Ich dupliziere das nur. Ich kann also etwa vier verschiedene für verschiedenfarbige Quadrate haben . Also kann ich mir einige der Farben aussuchen, die ich mag. Mir gefällt das hier. Also, was ich tun werde, ist einfach I für die Pipette zu drücken. Und ich werde anfangen, einige dieser Farben wie diese auszuwählen , z. B. Ich mag diese. Mal sehen, dieser. Es ist auch da drin. Dann mag ich wahrscheinlich dieses Hellgrau und vielleicht kann ich sie jetzt wechseln und dann dieses auswählen und es hier ablegen. Das ist irgendwie, ähm, eine Möglichkeit schnell eine Farbpalette auszuwählen. Natürlich musst du erforschen und experimentieren und wenn du das ein bisschen leichter machen willst , geh einfach hier rein und mach es einfach ein bisschen leichter. Ich ziehe das hoch. Sagen wir zum Beispiel, wenn Ihnen dieser gefällt, z. B. werden wir dasselbe tun. Wir werden, wir werden diese Farbpalette duplizieren , indem wir die Alt-Taste drücken. Und dann mag ich diese Farben irgendwie zusammen. Also fange ich zuerst mit der Lichtfarbe an. Schau, wie leicht es ist. Und dann werde ich hier auf die Couch ziehen. Vielleicht ist diese Farbe irgendwie nett. Das ist gut. Es hat irgendwie erdigen Ton, nach dem wir suchen. Dann werden wir das hier wahrscheinlich zeichnen. Und zum Schluss wahrscheinlich das Grün, wahrscheinlich so etwas in der Art dort. Schau, wie cool das aussieht. Wir haben bereits eine Farbpalette erstellt, zwei verschiedene Farbpaletten nur aus Bildern, oder? Und dann schlage ich vor, dass Sie mit diesen Farben herumspielen. Wenn du etwas völlig anderes machen willst, z. B. wenn du das ein bisschen grüner machen willst und viel mehr Durchschlagskraft hat. Und du kannst es einfach fallen lassen, vielleicht so etwas wie dort. Vielleicht willst du ein grüneres, vielleicht willst du dieses, du willst es superleicht haben. Sie können also weitermachen und es ein bisschen leichter machen. Ich liebe diesen Erdton, dieses Braun, und dann ist dieses Hellgrau großartig. So können Sie also eine einfache und dennoch unkomplizierte Farbpalette erstellen. Jetzt zeige ich Ihnen eine weitere Möglichkeit, wie Sie ihre fantastischen Websites verwenden können, die Ihnen beim Erstellen und Generieren von Carlo-Paletten helfen können . Das, was mir am besten gefallen hat , würde ich sagen, ist Adobe Color. Und Sie können weitermachen und zu color.adobe.com gehen, Schrägstrich erstellen , Farbrad. Und dann kannst du hier experimentieren und es einfach analog einfarbig machen. wir bereits in früheren Lektionen gesprochen . Aber was wir tun werden, ist in den Erkundungsbereich zu gehen. Und dann werden wir hier einfach tippen, was wir dafür entwerfen, was wir für ein Möbelunternehmen entwerfen. Also machen wir Möbel. Drücken Sie die Eingabetaste, und dann werden wir so viele verschiedene Optionen sehen. Wie wir darüber gesprochen haben. Es gibt viele Braun- und Erdtöne, aber wir haben darüber gesprochen, dass es auch einige Grüntöne gibt , was großartig ist. Und das Tolle an Adobe Color ist, dass Sie diese Farbpalette tatsächlich hinzufügen können . Nehmen wir an, wenn Ihnen diese Farbpalette gefällt, möchten Sie sie zu Ihrer Bibliothek hinzufügen. Sie können es zu Ihrer Farbbibliothek hinzufügen. Natürlich müssen Sie dafür Ihr Adobe-Konto eingerichtet haben . Und wenn Sie dann in Ihre Bibliotheken gehen, können Sie diese Farben bereits in Ihrer Bibliothek finden , was großartig ist. Und Sie können es auf mehreren, mehreren Plattformen innerhalb von Adobe verwenden mehreren Plattformen innerhalb von Adobe wie Sie es tun können, es wird Express, Photoshop, Illustrator, InDesign geben, was auch immer, egal auf welcher Plattform Sie entwerfen. Sie können also sehen, dass es so viele Browns gibt. Das ist der, bei dem es eher vorherrscht, also ich mag diesen wirklich. Das ist wirklich nett. Also suchen wir uns einen aus. Nur dieser fühlt sich irgendwie gut an. Sie können es auch herunterladen, Sie können einen Screenshot davon oder Sie können einfach das JPEG herunterladen. Sobald Sie das JPEG heruntergeladen haben, werden wir es im Finder anzeigen. Ich mache weiter und gehe zurück zu unserer Erkundung und werde es einfach hier ablegen. Schau, was dieses Programm für dich tut. Es bietet Ihnen den Hex-Code mit allem darin. Und Sie können diese Farben auch mit der Pipette probieren, wenn Sie möchten. Also werde ich das hier einwerfen, so ungefähr dort. Und was ich dann tatsächlich tun werde, ich werde das ansprechen und hier anfangen, verschiedene Optionen für unsere Farbpalette zu erkunden . Also was ich bin, was ich gerne mache, ist , irgendwie etwas Grün da rein zu bekommen, vielleicht diese Art von Grün. Also werde ich einfach eine dieser Farben auswählen und einfach dieses Grün wählen. Ich nehme, ich mag diese Farbe, die wir hier ausgewählt haben , dass sie irgendwie nett ist. Also was ich tun werde, ist einfach so, als würde ich es fallen lassen. Ich kopiere einfach diese Farbe dort. Und dann müssen wir einige dieser Farben hinzufügen, wie die helle Farbe, vielleicht diese, diese Cremefarben, die wir da haben. Und dann wollten wir mehr Farben hinzufügen. können wir auf jeden Fall tun. K. Das könnte also unsere Primärfarbe sein, aber die Primärfarbe für das, für das Branding, aber nicht unbedingt für unsere Seite. Also sagen wir diesen, ich möchte eine leichtere Version von diesem, also macht er wahrscheinlich so etwas. Vielleicht mache ich für diesen eine dunklere Version. Vielleicht gehe ich ins Grüne und gehe einfach ein kleines bisschen runter. Vielleicht wie um Haare herum vielleicht. Und dann werden wir auch für diesen superleicht fahren, wenn wir müssen. Ordnung, was das ist, das ist gut genug. Und dann haben wir, großartig. Mal sehen. Mit dieser Farbe können wir noch neutraler werden. Perfekt. Ich glaube, ich bin mit dieser Farbpalette zufrieden. Und was ich tun werde, ist einfach, ich schnappe mir all diese Farben und füge sie in meine Styles hier ein, damit ich sie sofort verwenden kann. Also klicke ich einfach auf Plus. Es wird sie alle zusammenfügen. Jetzt denke ich, dass es an der Zeit ist , hier einige Farben und Grafiken hinzuzufügen. Auf diese Weise können wir diese Farbpalette auf unsere neue Möbel-Website anwenden . Eine Sache, die ich erwähnen wollte, ist Barrierefreiheit, die Barrierefreiheit von Farben ist sehr, sehr wichtig. Und ich zeige Ihnen einen schnellen Trick und wie Sie Ihre Farben testen können. Nehmen wir zum Beispiel , wir haben diese Farbe und wollen sie vor dem weißen Hintergrund testen. Also, was du tun wirst, ist einfach diese Farbe zu kopieren. Wir werden diese Farbe kopieren. Wir werden auf unsere Website gehen und hier näher darauf eingehen , nämlich die Slash-Ressourcen von webaim.org für seinen letzten Kontrast-Checker. Und wir werden das anhand unserer Hintergrundfarbe überprüfen , die weiß ist. Und dann setzen wir unsere neue Farbe ein, das ist dieses Braun. Und das werden wir testen. Und das ist es, was ich Ihnen irgendwie zur Verfügung stelle, um Ihnen zu sagen, dass normale Texte wie dieser die WA WA-Barrierefreiheit überschreiten. Das wird er tun, wird dir mitteilen, ob deine Tags in deinen grafischen Elementen die Barrierefreiheit passieren . Und wir können hier sehen, dass das Double, das Double eine Vergangenheit ist, aber das AAA nicht weil es dafür nicht genug Kontrast gibt. Aber wenn du es ein bisschen dunkler machen willst, kannst du das machen, bis du den Pass hast. Wenn Sie das tun müssen, ist es sehr wichtig, dass Sie Farbkontrast all Ihrer, Ihrer, Ihrer Farben testen . Weil es für die Barrierefreiheit sehr wichtig ist. Sie möchten sicherstellen, dass Sie ein universeller Designer sind und Menschen mit Sehbehinderung Barrierefreiheit bieten. Und du wirst sicherstellen, dass all deine Farben funktionieren. Und manchmal gibt es natürlich einige Kompromisse. Aber wie Sie sehen können, vergeht unsere Farbe größtenteils. Und sogar die grafischen Objektelemente wie Schaltflächen und ähnliches. Sie bestehen, was gut ist. Und sie bestehen sogar einige der Texte. Also das ist, das ist ziemlich gut. also sicher, dass Sie die Barrierefreiheit von Farben verstehen. Darüber haben wir in früheren Lektionen gesprochen, in denen wir darüber gesprochen haben, wie wichtig Barrierefreiheit ist. Und wie Sie mit Farbkontrasten und anderen fortschrittlichen Techniken arbeiten können , um sicherzustellen, dass Sie alles bereit haben wenn es um das Entwerfen für eine Website, Entwerfen für eine mobile App oder den Designer für Software oder Webanwendungen geht. Gehen wir also zurück zu unserem Design und fangen wir einfach an zu experimentieren und ein Adenin, einige dieser Farben, um sicherzustellen, dass sie alle funktionieren. Okay, also der Reihe nach, wir haben hier einen weißen Hintergrund, ein Wochenende, mach von Anfang an etwas Verrücktes. Und wir beginnen damit, hinzuzufügen, wir kommen zu dieser Farbe, z. B. Es tut mir leid, lass uns noch einmal zurückgehen. Ich habe den falschen Ordner ausgewählt. Also werden wir weitermachen und auf den eigentlichen Hintergrund klicken. Und dann ziehen wir diese Farbe, wenn wir wollen. Das ist eine Sache, es zu schaffen. Wir können es ein bisschen dunkler machen, wenn du willst. Wenn wir sicherstellen wollten , dass alle Farben funktionieren. Aber da wir das machen, denke ich, müssen wir ein paar, ein paar Fotos hier reinbringen . Also werde ich einfach weitermachen und zu Photoshop gehen. Ich habe diesen tollen Stuhl schon ausgeschnitten. Also schnappe ich mir das einfach. Wenn ich das kopiere, gehe ich wieder rein. Ich werde das einfügen. Und ich werde einfach herumspielen und das hier reinstellen. Wir sehen, wie Farbe ihren Weg einschlägt. Ich fühle mich mit dieser Farbe momentan nicht sehr sicher , weil ich denke, dass der Kontrast etwas zu gering ist. Aber was ich tun werde, ist, ich werde weitermachen und einfach diese Farbe auswählen, die wir bereits hier haben. Und dann haben wir Steuern und so, die wir überweisen müssen oder dafür einen anderen Farbcode verwenden müssen. Ich werde die Pipette benutzen. Und dann wähle ich so , dass Grün hier vielleicht dasselbe bewirkt. Für die Navigation können wir das wahrscheinlich auch dunkelgrün wählen. Auf diese Weise haben wir mehr Kontrast. Und dann fügen wir hier vielleicht etwas Dunkelgrau hinzu. Vielleicht können wir weitermachen und dort so etwas wie eine Gewalttat veranstalten. Okay. Ich verstehe, ich verstehe. Vielleicht für die Texte. Vielleicht gefällt mir das nicht. Das Grau. Es tut mir leid. Ich mag das Grün für die Texte nicht. Vielleicht kann ich vielleicht eine neue Farbe für den Text hinzufügen. Und dann werde ich wahrscheinlich diese Farbe wählen, vielleicht. Mal sehen, ob das funktioniert. Okay, ich werde es hier in meine Palette aufnehmen. Und ich werde diese Farbe bearbeiten , weil mir immer noch nicht gefällt, wie sie aussieht. Viel zu dunkel. Vielleicht. Also vielleicht ist er nicht verheiratet. Geh so ein bisschen besser. Stellen Sie nur sicher, dass Sie dies gegen Weiß oder eine andere Farbe testen . Wenn Sie einen Festplattenhintergrund haben und den Test verwenden, stellen Sie sicher , dass er die Barrierefreiheitstests besteht. Okay, ich glaube, damit bin ich zufrieden. Schauen wir uns also an, wie es auf dem TX aussieht. Okay. In Ordnung, es ist nicht schlecht. Vielleicht möchte ich da ein bisschen mehr Polsterung hinzufügen. K, das funktioniert. Ich denke, ich werde hinzufügen, ich werde, ich werde etwas hinzufügen, das hinter diesem Stuhl steht. Und ich werde weitermachen und wahrscheinlich eine dieser Farben verwenden. Wir sagten, wir machen das 603010. Das werde ich also tun. Vielleicht ist es zu dunkel, aber wir können es ein bisschen heller machen. Diese Farbe ist genau hier. Also werden wir diese Farbe bearbeiten und wir werden sie einfach ein bisschen heller machen, nur ein kleines bisschen ungefähr da. Schau dir an, wie es sich hier geändert hat, damit wir mehr Kontrast haben. Das ist sehr, sehr wichtig. Also okay, das gefällt mir. Also werden wir ein paar Dinge hinzufügen. Ich weiß nicht, vielleicht ein paar Grafiken im Hintergrund, um es dynamischer zu machen. Ich werde diese Farbe verwenden. Vielleicht. Ich werde es einfach wieder reinbringen, wahrscheinlich habe ich nur die Opazität verringert. Ich möchte nicht, dass es zu viel ist. Vielleicht etwas in der Nähe von denen da drüben. Das ist großartig. Fügen wir hier einfach eine Schaltfläche hinzu, damit wir eine gewisse Akzentfarbe haben. Also werden wir weitermachen und einfach das Rechteckwerkzeug auswählen. Das ist es, wovon ich spreche, wenn wir sagen, dass da eine Akzentfarbe drin ist. Wir werden entweder diese Farbe wählen , die schön ist, oder wir können diese Farbe für mehr Kontrast wählen . Dieser ist irgendwie nett. Also werden wir diesen hier testen. Wir werden das auf dem Farbkontrastprüfer testen. Ich mache weiter und sagen wir, wir haben einen Hintergrund in dieser Farbe, und dann bedeuten die Texte weiß, 123456. Wir werden es testen und wir sehen, dass er alles besteht, was gut ist. Es ist kein Bestehen der AAA. Aber was du tun könntest, ist es einfach ein bisschen dunkler zu machen , wenn du willst. Du kannst weitermachen und es nach links schieben , bis du es rechts bekommst, bis du den Pass hast. Das Kontrastverhältnis ist sieben, was gut ist. Aber manchmal ist es das nicht. Wir haben einige Einschränkungen und Sie haben einige Kompromisse, und das ist in Ordnung. Du kannst weitermachen und um der Sache willen, lass uns einfach so weitermachen. Diese Farbe ist unsere Akzentfarbe. Und dann können wir einfach, ich weiß nicht, vielleicht nur deswegen, wir sagen jetzt kaufen oder so. Es spielt an dieser Stelle keine Rolle, wir werden das wahrscheinlich gewagt machen. Und lass uns sehen. K, wir gehen in die Mitte, das ist ein bisschen größer. Vielleicht können wir das ein bisschen kleiner machen. Auf diese Weise ist es also nicht so in deinem Gesicht. So ungefähr dort. Und dann gruppieren wir das einfach und haben es hier. Also haben wir das als unsere Art unserer Akzentfarbe, was ziemlich cool ist. Dann fahren wir mit dem nächsten Abschnitt fort, der unsere Philosophie ist. Wir werden weitermachen und tatsächlich diese Farbe verwenden , die wir für unsere Texte ausgewählt haben, aber dann können wir für, glaube ich, für unsere Überschriften dieselbe Farbe verwenden. Also werden wir das machen. Das machen wir auch für die Begrüßung. Perfekt. Also denk dran, wir werden das machen. Ich mache das 603010. Also, was ich tun werde ist, diesen auszuwählen, der die 60er ist. Ich werde es hier an die Seiten legen. Also so wie du es siehst, haben wir diese 60. Dann werden wir, wir werden den nehmen, der die 30% ausmacht. Und dann nehmen wir dieses, das ist die Zehn, das ist die Akzentfarbe. Und dann werden wir es kleiner machen. Das ist es also, was wir tun. Damit du es ein bisschen besser sehen kannst. Ich werde es gleich hier hinstellen. Das ist es also, was wir machen: 60% unseres gesamten Designs werden in dieser hellen, superhellen Farbe sein. Dann werden 30%, die wahrscheinlich aus unseren Texten bestehen werden , vielleicht in einigen Grafiken oder so, in diesem Dunkelgrau sein. Und dann die Akzentfarbe. Es sind 10%, was wahrscheinlich unsere Titel in einigen grafischen Elementen wie Buttons und ähnlichem sein werden. Also hast du irgendwie eine Vorstellung davon , wo wir damit hinwollen. Also lasst uns weitermachen und dieses lustige Zeug für diese Icons entwerfen . Was wir tun könnten, naja für den Text. Lassen Sie uns zunächst einfach diesen Großbuchstaben schreiben. Und dann für die Steuer werde ich, ich, ich werde diese Farbe verwenden, diese Farbe verwenden die für uns zweitrangig ist. Sie können das umbenennen. Auf diese Weise kannst du, weißt du, das ist meine Sekundär - oder das ist meine Primärfarbe, das sind meine Tertiärfarben du kannst sie nennen, wie du willst. Also werden wir weitermachen und diesen Symbolen tatsächlich etwas Farbe hinzufügen. Also diese Symbole, dieses, wir können die 30, ich meine, die Akzentfarben machen . Also werden wir das grün machen. Wir werden dasselbe für diesen und auch für diesen tun. Auf diese Weise sehen wir eine gewisse Umsetzung, unsere, unserer 30%, also dieses Dunkelgrau, und dann unsere Akzentfarbe, die dieses Grün ist. Das sieht wirklich nett aus. Ich finde es gut. Okay, für diese Dienste möchte ich etwas wirklich Dramatisches machen und etwas völlig anderes machen und etwas wie wahrscheinlich Super Dark verwenden , vielleicht ist so etwas großartig. Vielleicht wollten wir etwas davon mitbringen. Einige dieser hellbraunen Farben mögen irgendwie diese cremefarbene Farbe hier drin. Also dafür werde ich wahrscheinlich wahrscheinlich diesen verwenden. Ich werde das Gleiche für diesen tun. Und für diesen. Wir können das von uns erstellte Hellgrün verwenden, aber das ist nicht notwendig. Also lass es uns einfach drehen, drehen wir es wieder auf Weiß. Und ich werde wahrscheinlich nur für die Symbole unsere Akzentfarbe verwenden. Und dann werden wir für diese unsere nächste Farbe verwenden, die ist diese. Und dann gibt es für diese bösen Jungs nicht genug Kontrast, wie Sie hier sehen können. Also lasst uns hier etwas ausprobieren. Es geht nur um unser Experiment, oder? Wir haben also diese Farbe und unsere Farbpalette, die wir verwenden können, aber Sie können sehen, dass sie nicht gut genug sind. Der Kontrast reicht nicht aus. Es ist schwer zu sehen. Wenn wir zurückgehen und das sehen. Es ist wirklich schwer zu sehen. Als ob du es kaum sehen könntest. wollen wir nicht. Ich möchte sichergehen, dass wir genug Kontrast haben. Das ist wirklich schlimm. Wenn wir das testen. Es wird nicht vorübergehen. Und ich kann es dir jetzt ziemlich schnell zeigen. Also werde ich weitermachen und mir diese Farbe schnappen. Ich gehe in meinen Farbtester und gebe die Hintergrundfarbe ein, die ist diese. Dann werde ich weitermachen und mir die Schriftfarbe schnappen, das ist diese Kopie. Ich werde weitermachen und es in den Vordergrund stellen. Du siehst alles. Es schlägt fehl, weil du das nicht lesen kannst. Damit Sie das auch lesen können, müssen Sie einen hohen Kontrast haben. Also, was wir tun werden, ist zum Beispiel , wir werden das wie unsere Hintergrundfarbe erhöhen. Du siehst, wie er sich verändert, oder? Was wir hier also zu tun versuchen, es wird immer Einschränkungen und Kompromisse geben. Also werden wir hier versuchen, es dunkler zu machen, so wie dieses hier wahrscheinlich, das wird so wie dieses hier wahrscheinlich, wahrscheinlich vorübergehen. Es hängt alles davon ab. Wenn wir das testen wollen, machen wir es noch einmal. Ziemlich schnell. Ich werde diese Farbe kopieren. Ich füge es hier ein. Dann diese Farbe, ich glaube, wir ändern sie. Also gehen wir zurück. Wir betrügen also nicht. Ich glaube nicht, dass er den ganzen Weg durchmachen wird. Aus diesem Grund müssen Sie die Barrierefreiheit von Farben testen . Es besteht den ersten. Sie ist gut. Ein paar Grafiken, grafische Elemente wie diese, sind da drin und was die Steuern angeht, es ist vergänglich. Wir sind also gut für dich, wenn du sie bestehen musst, weil es für deine Website notwendig ist, gib 33 Einsen, dann musst du dafür sorgen, dass die Verträge funktionieren. Vorerst werden wir es so lassen, wie es gerade ist. Und das machen wir für diese beiden Icons. Ich würde wahrscheinlich gerne etwas von dem Braun reinbringen, nur um zu sehen, wie es aussieht. Ich mag es irgendwie nicht, weil es irgendwie zu viel ist. Also entweder ich gehe mal sehen. Zur Verwendung desselben. könnten wir, wenn wir wollen. Das einzige Problem dabei ist , dass ich diesen und diesen vielleicht etwas leichter machen muss . Auf diese Weise haben wir mehr Kontrast, genug Kontrast. Also sieh dir das an. Wir haben also einige, weißt du, einige Unterschiede zwischen diesen beiden und diesen beiden. Aber ich will mehr. Ich will mehr. Vielleicht mache ich weiter und mache es noch einmal. Vielleicht. Vielleicht weiß ich nicht, vielleicht kann ich weitermachen und diesen genauso verwenden wie diesen. Deshalb ist es sehr wichtig zu experimentieren. Denn wenn Sie experimentieren, können Sie sehen, was funktioniert und was nicht. Im Moment funktionieren diese beiden Farben wahrscheinlich nicht. Aber das ist noch dazu gekommen. Und dann ist das genau das, was am wichtigsten ist, das Steuer- und Ist-Icon. Also, wenn Sie hier genug Kontrast haben, ist das gut genug. Also lassen wir es jetzt da draußen. Wir brauchen wahrscheinlich einen Hintergrund, etwas, eine Textur oder etwas, das dahinter steckt. Auf diese Weise haben wir also ein gewisses dynamisches Geschehen im Hintergrund. Aber wir belassen es jetzt dabei. Dann fahren wir fort und fahren mit dem nächsten Abschnitt fort, der unsere Sammlung ist. Vielleicht haben wir das super hinter uns gebracht. Dunkler Bereich, vielleicht muss dieser jetzt heller sein. Also werden wir weitermachen und unsere Akzentfarbe verwenden. Und dann verwenden wir unsere Schriftfarbe. Dann werden wir das für diesen Abschnitt wahrscheinlich auf eine etwas leichtere Art verwenden . Wir werden weitermachen und es superleichter machen. Vielleicht. Ich werde wahrscheinlich weitermachen und so etwas machen. Und ich denke, das ist nicht perfekt zentriert. Also werde ich weitermachen. Ich hole die beiden aus dem Ordner. Und ich gehe in die Mitte, das ist perfekt zentriert. Okay? Meine Augen spielen mir einen Streich. Gerade jetzt. 36, Lass uns 42 machen, vielleicht ein bisschen mehr Platz. Ich denke, wir brauchen ein paar, ein paar andere Bilder hier. Vielleicht haben wir, vielleicht haben wir das verlassen. Vielleicht machen wir das. Vielleicht können wir weitermachen und ein paar Möbel herbringen. Also gehen wir weiter und gehen auf unsplash.com und suchen einfach nach ordentlicheren. Wir werden weitermachen und eine auswählen, weißt du, lass uns diese auswählen. Da wir es mit so etwas Grün zu tun haben. Gehen Sie zu Photoshop. Wir werden einfach weitermachen und diese neuen Möbel einfügen. Und ich werde ziemlich schnell etwas tun. Ich werde es duplizieren, gehe zum Thema auswählen. Es wird ein Thema auswählen. Ich sehe, dass hier etwas Verrücktes vor sich geht. Also werden wir das ziemlich schnell aufräumen . Also werde ich diesen Abschnitt hier einfach entfernen. Okay, ich finde das gut. Vielleicht verschieben wir diesen Abschnitt , um ihn vielleicht flach zu machen. Cane genauso gut. Mal sehen, wir haben noch einen anderen hier, den wir bewegen müssen. Okay? Okay. Ich denke, wir haben eine wirklich gute Auswahl. Wir vermissen etwas hier in der Mitte. Also werden wir weitermachen und das magische verwenden und das einfach mit einbeziehen. Ups, warte. Da hast du es. Und wir vermissen diesen Teil genau hier. Also werde ich einfach weitermachen und durchhalten. Ich werde das Lasso-Werkzeug benutzen. Es wird viel schneller gehen. Wenn ich das mache. Ich wähle einfach hier aus, mache weiter und wähle diese aus und dann wähle ich die Maske aus. Lass uns sehen, in Ordnung, das ist gut. Ich spiele gerne ein bisschen damit. Wir sind gerade in Photoshop und holen uns nur ein paar Bilder für unsere Sachen. Wir werden einfach weitermachen. Und ich mag diesen Teil nicht, also werde ich diesen Teil einfach vom eigentlichen Foto entfernen . Mir gefällt dieser Teil hier nicht. Also werde ich einfach weitermachen und diesen Teil entfernen. Hab Geduld mit mir. Ich werde das einfach von dort löschen. Spielt keine Rolle. Ordnung, also werde ich das kopieren. Ich werde es zu XD bringen. Ich füge es hier ein. Hoppla, ich glaube, es hat das Ganze eingefügt. Warte 1 s. Wenn ich das entferne und wieder zu Photoshop gehe, denke ich, dass das viel zu groß ist. Wahrscheinlich. Mal sehen. Es ist viel zu groß. Also werde ich wahrscheinlich die Größe der ganzen Sache in den 2000ern ändern. Ich wähle alle aus. Und ich werde das hier einfügen. Da hast du es. Oh, da hast du's. Und sieh dir diese Farbe an. Das ist eine großartige Kombination von hier mit der gleichen Farbe. Und dann hierher zu kommen. Perfekt. Das hat ziemlich gut geklappt. Also werde ich das vielleicht ein bisschen größer machen und vielleicht einfach so. Ich werde weitermachen und das vielleicht dort machen. Hervorragend. Bisher gefällt es mir sehr gut, perfekt in der Mitte. Dann werden wir uns von hier aus mit uns in Verbindung setzen. Mit diesen Farben bin ich immer noch unentschlossen. Ich mag diese Farben nicht wieder, diese Farbe. Vielleicht können wir etwas dagegen tun, aber wir werden uns gleich darum kümmern. Der letzte Abschnitt ist jetzt also der Kontakt. Was wir also tun werden, ist tatsächlich auszuwählen. Gehen wir zu unseren Farbstilen und wählen wir unsere Farbe und dann unsere Schriftfarbe aus. Und dann verwenden wir für diese Knöpfe und so dieselbe Akzentfarbe. Also werden wir weitermachen und all diese Abschnitte machen. Sie haben eine äußere Linie für das TextField. Also werden wir weitermachen und unsere Akzentfarbe wählen. Und dann, was die Texte angeht, denken Sie daran, dass wir die 30% haben, das ist diese Farbsteuer. Also werden wir sicherstellen, dass wir das da drin haben. Vielleicht ist das der Kortex, aber dann ist dieser eigentlich unsere Akzentfarbe. Okay, perfekt. Okay, ich denke, das funktioniert wirklich gut. Vielleicht brauchen wir für diese Couch eine Art Schatten dahinter. Also werde ich weitermachen und diesen Schatten machen. Gerade jetzt. Dann wird dieser Schatten wahrscheinlich unsere Akzentfarbe sein. Ganz sicher. Bring das zurück. Und wir werden so etwas verwischen. Und dann werden wir einfach die Opazität verringern, also wirklich, wirklich, wirklich, wirklich, wirklich, wirklich zurück. Oder du gehst nur ein bisschen in den Schatten. Wir haben also etwas Schatten da drin. Perfekt. Denken Sie also daran, wie wir angefangen haben und wie wir quasi umgesetzt haben, wir haben angefangen, unsere 603010, eine wirklich ausgewogene Farbpalette, zu implementieren . Wir haben welche. Unsere Akzentfarbe ist dieses Grün, dieses Olivgrün. Wir haben etwa 30%, was so ist, als würden wir die 30% unseres gesamten Designs abdecken , was im Grunde bedeutet, dass wir es auf dem TX verwenden. Wir verwenden in unserer Akzentfarbe. Und dann verwenden wir einige andere Farben, die diese Farbpalette unterstützen, nämlich diese superleichte Creme, etwa zehn, wir verwenden sie auch hier. Du musst sicherstellen, dass der Reifen, wie bei der Verwendung von Farbe, alle Designfelder zusammenpassen und sich gut anfühlt. Man muss natürlich experimentieren, wie gesagt, ich bin kein großer Fan von diesem. ZB und ich werde einfach weitermachen und das ganze Layout duplizieren und experimentieren. Weil du experimentieren musst. Vielleicht müssen wir diese Farbe nicht verwenden. Oder vielleicht tun wir das, weil ich es mag in diesen Abschnitt geht dieser Abschnitt in diesen Abschnitt geht, was irgendwie nett ist. Es ist wie hier, diese Farben funktionieren nicht für mich. Also lass uns hier einfach etwas anderes ausprobieren. Mal sehen, was es bewirkt, wenn wir so etwas tun, was ist, wenn wir so etwas tun, als würden wir diesen Hintergrund duplizieren? Das ist es, wovon ich spreche, wenn es ums Erkunden geht. Und ich werde diesen Hintergrund duplizieren. Ich werde diese nehmen, ich werde tatsächlich weitermachen und eine andere Farbe wählen, vielleicht von hier aus. Vielleicht gehe ich hoch und suche mir diese Farbe nur um die Dinge zu testen. Ich teste es nur, um es zu versenden, nur um zu sehen, was funktioniert. Mach es, wir können es sogar ein bisschen dunkler machen , wenn du willst. Wenn wir es zum Beispiel dunkler machen wollten, wie diesen Abschnitt, könnte das funktionieren. Natürlich haben wir mehr Hintergrund, aber wenn wir Farbkombinationen machen, stellen wir sicher, dass die Farben funktionieren. Und das werde ich tun. Ich werde das einfach so machen. Vielleicht, vielleicht, ich weiß nicht, wir testen einfach Dinge aus. Schon wieder. Experimentieren ist der Schlüssel. Was ist, wenn wir hier diese Akzentfarbe verwenden? Nur um Dinge zu testen. Ordnung, vielleicht können wir das wieder auf Weiß ändern. Auf diese Weise haben wir mehr Kontrast. Und vielleicht auch die Icons. Ich meine, da bestehen sie gerade , weil es grafische Elemente sind. Aber bleiben wir einfach bei Weiß, damit wir mehr Kontrast haben. Ordnung, also sieh dir das an, dass es gar nicht so schlimm ist. Ich würde sagen, das kommt der Steuer viel zu nahe. Vielleicht für die Texte, vielleicht brauchen wir nicht die ganze Kopie. Vielleicht können wir einige loswerden und den Text auch ein bisschen kleiner machen . Vielleicht wie dort. Vielleicht brauchen wir, vielleicht brauchen wir einen Knopf. Also werden wir weitermachen und diese Schaltfläche duplizieren. Und dann werden wir diesen Button rückgängig machen. Der Hintergrund wird wahrscheinlich weiß sein. Und dann wird der Text in der Schaltfläche wahrscheinlich unsere Akzentfarbe sein, nämlich diese. Und dann werden wir das wahrscheinlich auf Ich weiß nicht ändern. Ich weiß nicht. Ich werde da so etwas anfassen. Perfekt. Wir können das verschieben. Die Polsterung ist sehr wichtig, also sicher, dass Sie genügend Polsterung haben. Dann schnappst du dir deine drei Elemente. Hier drin, 12312 In drei. Einfach perfekt zentriert. Das, vielleicht funktioniert das, vielleicht funktioniert es bei mir nicht, funktioniert gerade. Auch hier müssen Sie experimentieren und sicherstellen, dass die Farbkombinationen , die Sie verwenden, funktionieren. Im Moment fühlt es sich hier nicht so an, als wäre es keine große Sache. Aber diese beiden Farben funktionieren kein bisschen weil der Kontrast nicht ausreicht, da sie nicht zusammenarbeiten. Aber hier fügen wir natürlich eine dunklere Version dieser Farbe hinzu. Und dann hat man mehr Kontrast und es gibt mehr Harmonie. Wenn wir hier sind, gibt es nicht genug Harmonie. Und davon spreche ich, wenn es darum geht, Harmonie zwischen Farben zu schaffen und auch mit Farben zu arbeiten. Zur gleichen Zeit. Dann werde ich es für dieses Beispiel einfach noch einmal duplizieren. Oder sogar wie hier, ich muss nicht duplizieren. Wir werden hier oben etwas völlig anderes machen , nur um, weißt du, etwas Lustiges daraus zu machen. 10. Dein Kursprojekt: Machen Sie sich bereit, Ihrer Kreativität freien Lauf zu lassen und der digitalen Welt etwas Farbe zu verleihen. Für das Klassenprojekt erstellen Sie eine Farbpalette für unsere Musikwebsite und mobile App. Dann fügen Sie dem Anbieter die neue Farbpalette hinzu. Low-Fidelity-Wireframes, die Farbpalette sollte visuell ansprechend und die gesamte Designästhetik der Website und der mobilen App ergänzen . Die Möglichkeiten sind endlos. Gehen Sie zum Tab Projekt und Ressourcen, um die Starterdateien herunterzuladen, unabhängig davon, ob Sie Figma oder Adobe XD bevorzugen . Ich habe für dich gesorgt. Ich kann es kaum erwarten, die Meisterwerke zu sehen, die du schaffen wirst. Und vergessen Sie nicht, Ihre Herzensarbeit in der Projektgalerie zu zeigen . Lass uns die Community mit deinen Designs umhauen. 11. Das war’s!: Das ist ein Überblick über unseren Kurs zur Verwendung von Farbe im UI-Design. Ich hoffe, Sie haben viel gelernt und fühlen sich sicherer in Ihrer Fähigkeit, visuell ansprechende und benutzerfreundliche Benutzeroberflächen zu erstellen . Denken Sie an die wichtigste Erkenntnis, z. B. Nummer eins, Farbe kann die Benutzererfahrung stark beeinflussen. Und es ist wichtig, die Psychologie der Farbe zu verstehen. Die Farbtheorie ist ein unverzichtbares Werkzeug, um eine zusammenhängende und visuell ansprechende, ansprechende Farbpalette zu erstellen eine zusammenhängende und visuell . Nummer drei, spiele mit verschiedenen Farbkombinationen herum und versuche, etwas Einzigartiges zu kreieren. Jetzt ist es an der Zeit, deine neu gewonnenen Fähigkeiten auf die Probe zu stellen. Poste deine Projekte in der Projektgalerie und lass die Community sehen, wie dein Herz schlägt. Und vergiss nicht, mir eine Bewertung zu hinterlassen und mir auf Skillshare zu folgen , um weitere Tipps und Tricks zum UI-Design zu erhalten.