Erstelle tolle Farbschemata für Web- und UI Designprojekte

1. Einführung in den Kurs in der Farbschemata: Hallo und willkommen zu meinem Kurs über die Erstellung großartiger Farbschemata für Ihre UI-Design-Projekte für Ihre Website und Ihre Dashboards. In diesem Kurs werde ich Schritt für Schritt von Anfang an ein wenig über Farbe 2-D, was sind neutrale Farben? Was sind vibrierende Farben? Was sind die aufmerksamkeitsstarken Farben? Also werden wir all das abdecken. Dann gehen wir zum nächsten Schritt, der lautet: „Wo soll ich mein Farbschema beginnen?“ Dies ist die Frage, die viele UI-Designer im Kopf haben, oder selbst wenn Sie ein Entwickler sind oder Sie nicht wissen, viel zu entwerfen, könnten Sie sich Sorgen machen, wie kann ich mein Farbschema aufbauen? Ich werde diese Frage beantworten. Wir werden nur eine Farbe verwenden, um fantastische Farbschema in diesem Kurs zu erstellen und sogar mehr Farben hinzuzufügen. Also gehen wir aus einer Farbe und fügen Sie immer mehr Farben hinzu. So Schritt für Schritt, der Prozess der Hinzufügen von Farben für Ihre UI-Design-Projekte. Dann werde ich Tonnen von Ressourcen, Online-Ressourcen und Ressourcen teilen, die ich für diesen Kurs erstellt habe, die wie 30 verschiedene Farbschemata sind. Sie können Ihre UI-Designs mit diesen starten. Sie können sie im Dashboard-Design, UI-Design verwenden , ich habe Beispiele zusammen mit ihnen. Also werde ich mit Ihnen eine Menge Beispiele, viele Ressourcen teilen. Eine weitere Sache, die sehr wichtig ist und viele Designer vermissen es, was Farbzugänglichkeit ist. Die Zugänglichkeit von Farben ist eigentlich die Gestaltung für Menschen mit eingeschränkter Farbe und auch die Verwendung der Farbkontrastverhältnisse, wie stark der Hintergrund oder der Vordergrund sichtbar ist. Dies ist ein Thema, das viele Designer tatsächlich vermissen. werden wir also in diesem Kurs behandeln. Worauf wartest du? Wir sollten jetzt anfangen und einige tolle Farbschemata erstellen. 2. Warum Farben für UX und Usability wichtig sind: Lassen Sie uns darüber sprechen, was die Bedeutung von Farben im User Interface Design, in mobilen Apps und Webdesign oder insgesamt in allen verschiedenen Produktdesigns ist. Wann immer Sie sich eine mobile App oder ein digitales Produkt ansehen, das Sie kaufen werden, ist das erste, was Sie gehen, um ihre visuelle Erscheinung zu betrachten. Das ist das erste, was Sie bemerken werden. Das wird eine gewisse Wahrnehmung machen und Sie können den Wert dieses Produkts in Ihrem Kopf sagen. Dies wird Ihr erster Eindruck über dieses Produkt sein. Farben sind sehr wichtig, nach einer Recherche von CCI Farbe Benutzer brauchen nur 90 Sekunden, um eine Vorstellung von jedem Produkt online zu bekommen, um es zu beurteilen, einige erste Eindrücke über dieses Produkt zu schaffen, und 62 Prozent bis 90 Prozent davon, die Entscheidung über den ersten Eindruck, die sie gehen, um zu machen sind auf dem Farbschema allein basiert. Marken wie Facebook und andere große Marken, sie verwenden Farben auf allen ihren Geräten, ihre Apps, um ihre Marke hervorzuheben. In ähnlicher Weise werden Farben Sie beeinflussen, die Benutzer emotional und psychologisch werden sie beeinflussen. Dies wird Ihre ersten Eindrücke sein. Um erste Eindrücke zu schaffen, sind Farben unerlässlich. In ähnlicher Weise werden Farben aus Sicht der Benutzererfahrung die Benutzerfreundlichkeit jeder App verbessern. Zum Beispiel, wenn die Haupt-Call-to-Action-Schaltfläche sehr prominent ist, wird sie den Benutzer einladen, sie zu drücken. Dies wird tatsächlich die Benutzerfreundlichkeit Ihrer App erhöhen. In ähnlicher Weise können Sie die Farben verwenden, um die Navigation zu verbessern. Zum Beispiel haben Sie in Dashboards auf der linken Seite gesehen, zum Beispiel verwenden Sie Gmail-Posteingang, auf der linken Seite können Sie deutlich sehen, welches der Ordner ist welcher Posteingang oder Entwürfe oder was auch immer Sie gerade arbeiten, es ausgewählt ist. Farben sind da, um anzuzeigen, dass Sie diese ausgewählt haben, es gibt Fehlermeldungen, es gibt Informationsmeldungen, es gibt Erfolgsmeldungen. Sie werden alle unter Verwendung von Farben angezeigt. Wenn Sie die Farben von einer beliebigen Schnittstelle entfernen, wird es keinen Sinn ergeben. Farben sind da, um Ihnen zu helfen, Sinn für jedes Interface-Design, jede Benutzeroberfläche. Sie werden die Benutzerfreundlichkeit und Benutzererfahrung jeder App verbessern. In ähnlicher Weise gehen wir jetzt auf die andere Seite, was psychologischer Einfluss des Kaufs eines Produkts ist. In ähnlicher Weise, wenn Sie etwas online kaufen, Ihre Entscheidungen basieren meist auf Farbschema. Wann immer Sie eine erste Bewertung eines Kaufs machen, wird das Aussehen und das Gefühl dieses Produkts Ihnen helfen, die Entscheidung zu treffen , dass ich dieses Produkt kaufen sollte, oder ich sollte diesen Kurs nehmen. Das ist, warum Ihre Produktbilder, sie sind eine große Rolle. Die Farben, die in ihnen verwendet werden, die Hintergründe in ihnen verwendet. Wenn Sie sich Nike und andere Produkte ansehen, die große Marken sind, verwenden sie Farben sehr intuitiv, sehr sorgfältig in ihren Bildern, in ihren Modell-Shorts, mit der kurzen dort, Modelle mit etwas Fußball oder so etwas wie das. Sie verwenden alle Hintergründe, alle Uniformen, alle Farben, alle Lichter. Sie verwenden sie sehr sorgfältig, weil sie gehen, um den Einfluss in den Geist des Benutzers oder die Kunden Geist, dass ich dieses Produkt kaufen zu verbessern . Dies ist ein Premium-Produkt oder so etwas. geht es um Ihren Einfluss durch die Verwendung von Farben und darum, wie sie im User Experience Design, bei Kaufentscheidungen von Ihren Kunden wichtig sind . Verbessert auch die Benutzerfreundlichkeit jeder App. Man kann sagen, es ist eine Informationsarchitektur, Sie zeigen im Grunde die Informationen an. Farben werden verwendet, um Geschichten zu erzählen, um Informationen anzuzeigen, die sinnvoll sind, wodurch ein Layout erstellt wird, das lesbar ist. Lesbarkeit ist auch ein Faktor in der Farbe, denn wenn der Farbkontrast nicht ausreicht, was wir über Farbabgänglichkeit sprechen werden, können Benutzer nicht lesen, was Sie auf Ihrer Website oder Ihrer mobilen App geschrieben haben oder was auch immer Artikel, den Sie geschrieben haben. Ich hoffe, Sie werden all diese Studie über Farbschema genießen und wie wir sie auf verschiedene Apps und verschiedene Websites anwenden werden. Bleiben Sie dran und ich werde Sie bald im nächsten Video sehen. 3. RGB und RGB: Das erste, was wir lernen werden, ist, was verschiedene Farbmodi sind , denn wenn Sie für den Bildschirm entwerfen, müssen Sie Farbprofile verstehen und was verschiedene Farbmodi wie RGB oder CMYK sind und wie Sie sie verwenden und welche Tools sie tatsächlich unterstützen. Wann immer Sie entwerfen, beginnen Sie mit dem richtigen Werkzeug und den richtigen Einstellungen. Das ist sehr wichtig. Also zuerst werde ich mit RGB-, Rot-, Grün-, Blau-Modus beginnen , was eigentlich der digitale Bildschirm-Modus ist und es in allen verschiedenen digitalen Bildschirmen verwendet wird, und wenn man sich den Screenshot auf der linken Seite gibt es RGB-Modus, was Sie jetzt sehen können, dass dieses Rot rote Farbe hat 14 und Grün darin gemischt ist und es 72 und blau ist 75. Das macht also diese rote Farbe auf der rechten Seite aus. Oben sehen Sie die Farbe, die ich ausgewählt habe. Das ist also tatsächlich verfärbt. Wir werden über CMYK sprechen, das hauptsächlich für den Druck verwendet wird. CMYK steht für Cyan, Magenta, Gelb und Schwarz. Also ist K eigentlich schwarz. Es ist nichts, das mit k beginnt, es endet den letzten Buchstaben aus schwarz und es wird hauptsächlich für Druckdesign verwendet. Wenn Sie also planen, Ihre Visitenkarte oder Ihr Logo zu entwerfen, oder irgendetwas, das für Ihr Unternehmen und Prägematerial gedruckt wird, sollten Sie mit einem CMYK-Modus beginnen, und Sie werden Farben basierend auf CMYK auswählen -Wert. Cyan wird jetzt 89 sein, Magenta ist 66. Es gibt keine gelbe oder keine schwarze Farbe, die in diese blaue Farbe gemischt wird. Also einen Tipp, den ich dir geben werde. Es gibt Farben wie, Sie können sehen, ich habe diese blaue Farbe ausgewählt, besondere blaue Farbe, und hier haben wir von den vier Farben, C, M, Y, und k. So gibt es tatsächlich vier Farben miteinander gemischt. Wir haben nur zwei Farben aus ihnen ausgewählt. Cyan und Magenta und wir mischen nur Cyan und Magenta Farbe, um diese blaue Farbe zu schaffen , wird Ihnen viel im Druck helfen. Es wird eine Menge Kosten sparen, Druckkosten, und es wird Ihnen auch etwas Farbe sparen. Also, wenn Sie für den Druck entwerfen, entwerfen Sie ein Logo, Sie entwerfen eine Visitenkarte, versuchen, zwei Farbwerte zu verwenden, das ist nur ein Prototyp. Hier geht es also um CMYK und RGB. Meistens werden wir für digitale Bildschirme entwerfen, so dass wir uns keine Sorgen um CMYK machen müssen, aber ich denke, dass Sie wissen sollten, wann immer Sie irgendwie eine Karte entwerfen oder Sie können eine Visitenkarte sagen, Sie nicht scheitern. Ein weiteres Konzept, das sehr wichtig zu verstehen ist, sind Farbprofile. Im RGB-Modus, Ihrem Monitor oder Ihren digitalen Geräten können sie 16,7 Millionen Farben anzeigen, aber es gibt mehr Schattierungen als diese. Welche 16,7 Millionen sollte Ihr Monitor anzeigen? Das wird durch Farbprofile entschieden, oder sie werden auch Farbräume genannt. So Farbraum oder Farbprofil wird tatsächlich zu Ihrem digitalen Gerät sagen , dass diese Schattierungen von Farben werden blau sein oder diese werden rot sein, oder diese werden gelb, grün. Auf diese Weise wird der Farbbereich angezeigt , der innerhalb eines Farbprofils angezeigt werden kann. Für das digitale Design verwenden wir sRGB, das hauptsächlich für Webdesign verwendet wird, und es wird weit verbreitet in allen Webbrowsern verwendet. So wird es verwendet, um Bilder anzuzeigen, um Ihre Icons, Ihre Designs auf Websites und auch auf den digitalen Geräten, wie Ihren Mobiltelefonen, anzuzeigen Ihre Designs auf Websites und auch auf den digitalen Geräten, . Also meistens werden wir 99,99 Prozent entwerfen wir werden sRGB-Modus verwenden, und wenn Sie mehr darüber studieren möchten, gibt es einige weitere Beispiele für die gängigsten Farbprofile, am beliebtesten gegenüber Adobe RGB 1998 sind und es gibt auch Farbe -Profilen für CMYK. Wenn Sie also in Japan oder einem anderen Land drucken, haben sie ihr eigenes Standardprofil für eine Farbe. So CMYK, Japan Standard Version zwei und es gibt vielleicht 50 verschiedene Farbprofile für digitale Geräte. Sie müssen also sRGB auswählen, was am häufigsten sein wird, und wir werden nur das verwenden. Jetzt in der letzten, werde ich über einige der Werkzeuge sprechen, die spezifisch für das CMYK- oder RGB-Design sind. Also, wenn Sie für Websites entwerfen sind mobile Apps. Also möchte ich Ihnen zeigen, dass die Apps auf der rechten Seite, sie sind tatsächlich in der Industrie viel wie figma, sketch, Adobe XD Studio und Invision Studio verwendet . Also, wenn Sie mobile Apps entwerfen oder Sie meist Website entwerfen, würden Sie dazu neigen, die Tools auf der rechten Seite zu verwenden. Photoshop ist eine Mischung, die Sie sowohl mit CMYK-Modus n RGB-Modus entwerfen können , aber ich würde es nicht für Branding oder niedrigeres Design empfehlen. Auf der linken Seite sehen Sie Adobe Illustrator , ein großartiges, wirklich schönes Werkzeug für CMYK-Arbeit, Branding Arbeit oder Druckdesign Arbeit. Auch gibt es Funktionen von Illustrator, dass Sie ein RGB-Modus-Design starten können, oder Sie können eine Websites in Illustrator zu entwerfen, aber ich würde es nicht für diesen Zweck empfehlen. Ebenso sind Werkzeuge, die ich wirklich empfehlen, Adobe XD, Sketch und figma jetzt. Es könnte verschiedene Werkzeuge oder vielleicht andere Prioritäten in der Zukunft geben, aber Photoshop, Adobe XD, figma und skizze, dies sind die vier Tools, die ich empfehle, dass Sie beginnen sollten, zu lernen oder zu verwenden, jetzt im Jahr 2019. Das ist also alles. Wenn Sie versuchen, Ihr Tool auszuwählen, versuchen Sie es basierend auf den RGB-Moduswerkzeugen oder -werkzeugen auszuwählen, die speziell für das Webdesign und das UI-Design und das Design mobiler Apps entwickelt wurden. Das ist also alles für diesen RGB und CMYK, var und Vergleich. Wenn Sie Fragen haben, fragen Sie mich. Fahren wir mit der nächsten Lektion fort. 4. Farbrad 101: Lassen Sie mich Ihnen mit Farbrad vorstellen. Sie könnten es oft gesehen haben, aber hier werden wir diskutieren, wie und was sind die verschiedenen Farben, die dieses Farbrad bilden werden, und wie es tatsächlich besteht. Lassen Sie uns einige der primären und sekundären Farben sehen und wie sie miteinander vermischt werden, um dieses schöne Farbrad zu schaffen. Erstes Gespräch über Primärfarben. Unsere Primärfarben sind drei, gelb, blau und rot. Ich erinnere mich, als ich ein Kind war, haben wir diese Farben gemischt, um verschiedene Farben in unseren Montessori- oder Kindergartenklassen zu schaffen . Dies sind die drei wichtigsten Primärfarben und alle verschiedenen Farben werden durch Mischen dieser gemacht werden. Dies sind Primärfarben, dann werden wir sie mischen, um unsere sekundären Farben zu schaffen. Jetzt können Sie sehen, dies sind sekundäre Farben, orange, diese violette oder violette Farbe, und sekundäre Farbe ist grün, sie werden durch Mischen der beiden Primärfarben gemacht. Primärfarbe, gelb und rot werden orange zu schaffen, Rot und Blau wird violett oder lila Farbe und Primärfarbe zu schaffen, blau und gelb gehen, um eine sekundäre Farbe zu erstellen. Wir werden diese sekundären Farben mit der nächsten Primärfarbe mischen , um verschiedene Farben zu schaffen. Das werden unsere tertiären Farben sein. Hier haben wir die tertiären Farben und so ist der ganze Kreis dieses Farbrades tatsächlich abgeschlossen. Wir haben Primärfarben dann Sekundärfarben, dann werden wir Primär- und Sekundärfarben mischen, um tertiäre Farben zu schaffen. Lassen Sie uns nun über die Schattierungen, Töne und Farbtöne jeder Farbe sprechen und was eigentlich Farbton ist. Dies ist ein sehr wichtiges Konzept. Wenn Sie dies erhalten, können Sie jede Art von Farbschema erstellen, sogar basierend auf einer einzigen Farbe. Zuerst mal, Hue. Farbton ist eigentlich reine Farbe, wir nennen Farbton, das ist eigentlich die Farbe und der Name der Farbe, reine Farbe wie Orange, es ist der Farbton und wir werden die reine Farbe verwenden oder [unhörbar]. Jetzt, Tönung. Tint ist eigentlich, wenn wir Farbton mit Weiß mischen. Wenn wir weiterhin weiße Farbe in jedem Farbton wie zum Beispiel hinzufügen, habe ich gelbe oder orange Farbe und ich versuche, weiß darin zu mischen Es wird heller und heller. Dies wird eine Tönung erzeugen. Ich erinnere mich, als ich ein Kind war, habe ich verwendet, um verschiedene Schattierungen oder Farbtöne zu mischen und zu kreieren, indem ich weiß, bestielle Farbe in vielleicht grüne oder blaue Farbe mischte , um verschiedene Farbtöne der gleichen blauen Farbe zu kreieren. In ähnlicher Weise, Ton. Ton ist eigentlich der gleiche Farbton plus Grau. Wir werden graue Farbe hinzufügen, um verschiedene Töne zu erstellen. Viel Zeit In der Designwelt nennen wir diese Tönungen und sogar Schattierungen normalerweise. Wir nennen Farbtöne meist Töne oder Schattierungen der gleichen Farbe und wir verwenden den Begriff austauschbar, aber die eigentliche Sache ist, dass das Tönen einer Farbe tatsächlich das Hinzufügen von Grau ist. Wenn Sie eine Farbe haben, alle reinen Farben wie lila oder violett und Sie fügen Grau hinzu, wird es tatsächlich einen Ton zu schaffen. Es ist im Grunde eine ausgewaschen, stumpfe Farben. Wenn Sie einen dumpfen Farbton von irgendetwas erstellen möchten, erstellen Sie tatsächlich Ton und fügen Sie ihm graue Farbe hinzu. Du musst dich nur an diese drei Dinge erinnern. Die Töne sind grau, die Töne sind weiß und die Schattierungen sind schwarz. Es wird unseren Reim in deinem Kopf erschaffen. Schattierungen Schattierungen fügen tatsächlich Schwarz hinzu. Wenn Sie Schwarz zu einem reinen Farbton hinzufügen, werden Sie es viel dunkler machen und es wird Schattierungen dieser Farbe zu schaffen. Mit diesem Modell, Farbton, Tönung, Ton und Schattierungen können wir ein ganzes Farbschema erstellen, das nur auf einer einzigen Farbe basiert. Wenn wir nur eine Farbe wie orange oder vielleicht blau haben, Farbton wird es sein, wir brauchen zum Beispiel, wir brauchen fünf Farben oder sechs Farben. können wir ganz einfach machen. Wir können wie zwei oder drei Töne, ein oder zwei Farbtöne, erstellen , indem wir Weiß und ein oder zwei Schattierungen derselben Farbe hinzufügen, um ein ganzes Farbschema zu erstellen. Jetzt habe ich oft gesehen, dass Designer, wenn sie einen Designbrief lesen oder mit einem Kunden sprechen, der Kunde einige spezifische Farbschema-Probleme hat, wie vielleicht mein Kunde sagt, dass ich eine warme Farbe brauche oder ich einen einladenden Look brauche In meinem -Webseite. Ich möchte, dass sich der Benutzer entspannt fühlt und ich möchte, dass er sehr einladend und aufregend ist. Dann werde ich mich in Richtung der warmen Farben verschieben. Was mein Kunde mir eigentlich sagt, dass Sie warme Farben in Ihrem Design verwenden müssen. Das ist es, worum er bittet. Sie müssen sich um dieses Problem kümmern und Sie müssen sicherstellen, dass Sie den Unterschied zwischen warmen Farben und kühlen Farben kennen. Sie können die Farben sehen, die mehr rot, orange und gelblich Farbton in ihnen sind sie im Grunde warme Farben, und die Farben, die grün und blau sind, sie haben mehr Schatten von Blau und Grün in ihnen, sie sind tatsächlich coole Farben. Wann immer Sie Ihr Farbschema auswählen oder stützen, müssen Sie diese Sache im Hinterkopf behalten, dass kühle Farben tatsächlich ruhig sind und sie mehr sind, können Sie sagen, sie haben mehr Harmonie und sie haben mehr Intensität müssen Sie diese Sache im Hinterkopf behalten, dass kühle Farben tatsächlich ruhig sind und sie mehr sind, können Sie sagen, sie haben mehr Harmonie und sie haben mehr Intensität sind stärkere Farben und stabile Farben, und Farben auf der wärmeren Seite des Farbrades sind spannender. Sie sind mehr, können Sie sagen, Spaß. Sie sind lebhafter. Dies ist der grundlegende Unterschied. 5. Was sind neutrale Farben?: Jetzt habe ich viel Zeit gesehen, dass sie in Design-Klassen oder überall wo ich ein YouTube-Video oder so etwas gesehen habe, oder überall wo ich ein YouTube-Video oder so etwas gesehen habe,nicht über neutrale Farben sprechen. Wann immer Sie zum Beispiel eine Schnittstelle, mobile App UI-Design, sogar Ihre Räume Interieur entwerfen mobile App UI-Design, , werden Sie eine Menge neutraler Farben verwenden. Zum Beispiel entwerfe ich für eine mobile App und möchte , dass der Hintergrund dieser App ein hellgelb oder ein hellgraues Blau ist. Eigentlich verwende ich eigentlich eine neutrale Farbe. Was ist der Vorteil dieser neutralen Farbe? Sie haben vielleicht gesehen, dass Sie in Ihren Häusern an den Wänden meist sehen, dass sie mit neutralen Farben bemalt sind. Warum ist das so? Der Grund ist, dass neutrale Farben tatsächlich als Basis von Ihnen handeln können, Ausdehnung von anderen Farben, zum Beispiel, Ich habe blass gräuliche blaue Farbe an meinen Wänden. Jetzt möchte ich eine Akzentfarbe und diese neutralen Farben werden viel Kraft zu meiner Akzentfarbe geben, oder Sie können sagen, meine scharfe, lebendige Farbe darüber. Also neutrale Farben sind im Grunde stumpf und helle Schattierungen, und eigentlich, was sie tun, ist, dass sie als Grundlage für lebendigere Farben auf ihnen wirken . Ich werde die meisten von ihnen als meine Hintergründe oder vielleicht meine Grenzen in meinem Design oder vielleicht Hintergrund für ein Bild eines Modells verwenden, vielleicht so. Sie haben oft diese Farben gesehen, aber Sie können sie nicht erkennen, weil sie manchmal in einem sehr helleren Farbton verwendet werden. So werden tatsächlich die neutralen Farben verwendet. Lassen Sie mich Ihnen ein weiteres Werkzeug zeigen, das Sie verwenden können, um diese Farben zu erhalten, und das ist Picular. Hier haben wir ein Werkzeug, das ich gezeigt habe. Ich werde viel Zeit in diesem Kurs nutzen, picular.co ist und was ich getan habe, ist, eigentlich habe ich nach dem Begriff Interior Design gesucht. Sie werden viele scharfe und lebendige Farben zusammen mit neutralen Farben sehen. Hier haben wir diese bräunlichen Farben. Dies sind beide neutrale Farben. Dies ist ein bisschen scharfe rote Farbe, es ist eine Akzentfarbe oder helle Farbe. Dann haben wir wieder stumpfe Farbe, C4C4C4. Dann haben wir wieder, blass grünlich-braune Farbe. Dann haben wir wieder hier drüben, sind alle verschiedene Schattierungen oder Töne dieser neutralen Farben. Dies ist wieder neutral und dies ist wieder eine sehr schöne Farbe, 79767B, eine schöne gräulich-braune neutrale Farbe. Sie können auch verschiedene Farbtöne oder Schattierungen dieser Farbe verwenden, um sie dunkler oder heller zu machen. So können Sie sehen, dass wir verschiedene Farben dieser neutralen Farben haben. Ich möchte Ihnen wirklich das Konzept der neutralen Farben zeigen , weil ich viele Designer gesehen habe, die das einfach überspringen. Ich hoffe, Sie haben diese Lektion genossen. Wenn Sie Fragen haben, fragen Sie mich, gehen wir mit der nächsten Lektion über. 6. Beispiele von Warm, Kühlen und neutralen Farben in UI-Design: Lassen Sie mich Ihnen einige Beispiele für die Verwendung von warmen und kühlen Tönen in verschiedenen Designs verschiedener Apps und Websites zeigen. Hier ist das erste Beispiel, Hermes Fitness-App und Sie können im Gegensatz zu anderen Apps sehen, es hat eine sehr warme Farbnutzung. Sie können hier sehen, wir haben Gelbe, ein bisschen creme-hellbraune Farben, lassen Sie mich runtergehen, Sie können hier drüben rötlichbraun sehen. Wieder, wenn wir hier runter gehen, haben wir sehr dunkelbraun. Das ist alles Kunstthema. Es steht im Zusammenhang mit Ihrer Kunst. Das ist also ein großartiges Thema. Sie können hier sehen, es hat warmen Ton auf das gesamte Design. Es gibt einige Dinge, die kühler sind, wie dieser Timer hier drüben. Das ist eigentlich das, was Designer tun. Sie versuchen tatsächlich, warm und mit dem Blues zu mischen , um ein wenig beruhigend ihr Design zu bekommen. So balancieren sie es tatsächlich aus. Das passiert also auch, wenn Sie etwas für Ihre Innenräume entwerfen. Also, wenn Sie Ihr Schlafzimmer oder so etwas entwerfen, können Sie Ihre Wände cremefarben oder rot oder so etwas malen. Dann für Ihre Betten und Ihre Kissen, können Sie blau gepunktet grau in grau, können Sie sagen, Abdeckung für Ihre Kissen. Dies ist, wie wir eigentlich versuchen, zu verwenden. Aber insgesamt haben die ganze App oder das gesamte Design mehr Tendenz zu einem Farbschema. Zum Beispiel, wenn es warm ist, dann wird es warmer und weniger kühl. Hier ist ein großartiges Beispiel. Dann lass mich dir noch einen zeigen. Hier haben wir noch einen. Es hat mehr cool und ruhig aussehen, als ob Sie Cyan Farben hier sehen können. Das ist sehr hellviolett hier drüben. Sie können sehen, das ganze Aussehen ist sehr beruhigend und das ganze Thema ist ein bisschen gekühlt Thema. Dies ist ein weiteres Beispiel. Lassen Sie mich Ihnen ein paar weitere Beispiele hier zeigen wir ein weiteres Beispiel sehr schön gestaltet, aber das ganze Thema basiert auf warmen Tönen. Hier sieht man sehr dunkelroten, sehr cremigen Hintergrund. Das ist also ein großartiges Beispiel. Sie können sogar die Bilder hier sehen, sie haben sehr dunkle, rötliche oder orange-ische Töne. Das ist im Grunde dieses Design konzentriert sich mehr auf warme Töne außer kühlen Tönen. Also hier haben wir es. Lassen Sie mich Ihnen noch einen zeigen. Dies ist eine andere, und hier haben wir wieder, einfarbige Verwendung, meist grün, sehr dunkelgrün. So ist es wieder ein bisschen auf der beruhigenden Seite und sehr ernst, ein bisschen ernste und beruhigende Seite, also nein. So haben sie auch diese rötliche cremefarbene Farbe oder bräunliche cremefarbene Farbe verwendet. So ist es mehr auf eine Neigung in Richtung, man kann rot und grün sagen. Vielleicht sind sie also tatsächlich, glaube ich, gegenüber. So ergänzende Farben, sie sind beide gegenübereinander, aber das ist mehr geneigt und mehr in Richtung warmen Tönen schauen. Das hier ist also noch ein anderer. Eigentlich versuchte er, zwei verschiedene Dinge zu mischen, wie ich schon sagte, warm und ruhig. So mischen sie warme Farben als Hintergrund, und die Vordergrundfarbe ist eine beruhigende Farbe, die dunkelgrün ist. In ähnlicher Weise, wenn Sie sich dieses ansehen, ist dies für Hotels. Das, was ich Ihnen hier zeigen möchte, ist seine Ernsthaftigkeit. Es ist eher in Richtung Ruhe geneigt. Ruhige Themen, ruhige Farben. Sie können hier drüben vor allem den Blues sehen und wenn wir runtergehen. Also vor allem das Blau. Blau ist auch für, man kann sagen, professionelle Farbe. Es zeigt, dass dieses Unternehmen ernst ist oder dieses Unternehmen eine professionelle Organisation hat. So wurde das genutzt. Also hier haben wir ein weiteres Beispiel, das Lebensmittel Liefersystem ist. So wie Sie sehen können, für die Aufregung haben sie diese orange Farbe verwendet , weil Orange ist ein bisschen spannende und warme Farbe. Wenn wir es hier betrachten, können Sie sehen, dass es auch sehr scharfe grüne Farben gibt, die vielleicht, denke ich für organische oder vielleicht vegetarische, so etwas sind. Aber das allgemeine Aussehen oder Thema davon ist warm. Das Design neigt sich immer zur Seite, egal ob es sich um ein warmes Design handelt oder es sich um ein cooles Design oder ein neutrales Design handelt. Aber meistens kippt es zu einer Seite. Das ist also ein bisschen warmes Design. Hier haben wir ein weiteres Beispiel für cooles Design und es ist Investment-App. Sie werden sehen, dass die meisten der Apps oder Designs im Zusammenhang mit Finanzen oder Unternehmen oder Dinge wie diese. Sie werden viel Blues verwenden und dieses lila Schattierungen viel. So können Sie hier sehen, ist ein weiteres Beispiel. Dies ist meist in Richtung der beruhigenden Ton. Dann haben wir noch ein Beispiel. Dies ist eine Lernseite und das ist auch, denke ich für Finanzunternehmen. Hier können Sie wieder sehen, die blaue Farbe ist prominent. Dann haben wir dieses Grün. Grün ist im Grunde für die Sicherheit, dass dies sicher zu investieren ist oder so etwas. Deshalb ist die grüne Farbe hier drüben verwendet worden. Also hier ist ein weiteres Beispiel. Auch hier ist diese Website Webdesign eigentlich warmes Design. Ich liebe es wirklich, wie dieser Designer viel Einfachheit in diesem Design verwendet hat, und eine sehr gute Verwendung des warmen Tons mit diesem matten Blau. Ich denke, es ist ein bisschen dunkel, matt blau, grau blau. Ich liebe es wirklich. Sehr schlichtes Design und sehr schön gemacht. Hier ist mein Design. Sie können sehen, Sie könnten diese GP-Werkzeuge gesehen haben. Es ist mehr in Richtung kälter Seite oder cooles Thema geneigt, weil es zu Ärzten und Ärzte sind meist mit diesen Farben wie diese cyan bläuliche Farbe, die sie tatsächlich tragen die meiste Zeit wie Chirurgen erschienen diesen Farben wie diese cyan bläuliche Farbe, . Also das dunkelblau, das ich verwendet habe, ist für das Geschäft oder ernsthafte Professionalität, dass dies eine professionelle App ist, so etwas. Das ist also alles. Ich hoffe, Sie haben diese Lektion genossen, dass, wie meist die meisten der Apps sie gehen, um eine Seite zu kippen, ob es ein cooles Thema sein wird oder vielleicht ist es ein dunkles Thema. Vielleicht versuchen Sie, sie auszugleichen, indem Sie ein wenig von der anderen Seite verwenden. Zum Beispiel, wenn Sie ein warmes Design entwerfen, können Sie ein wenig kühle Farbe hinzufügen, um es auszugleichen. Also, wenn Sie Fragen haben, fragen Sie mich, gehen wir zur nächsten Lektion. 7. Color: Nun werden wir uns ansehen, was verschiedene Farbharmonieschemata sind und wie verschiedene Farben tatsächlich zusammenarbeiten, und wie viele verschiedene Arten von Farbkombinationen und Farbschemata wir tatsächlich erstellen können. So gibt es wenige Regeln, die Sie befolgen können, um eine harmonische Farbschemata zu erstellen. Bevor wir in das springen, werde ich Ihnen zeigen, dass dies tatsächlich Adobe Color CC Tool ist. Es ist ein Online-Tool. Es ist kostenlos, Sie können das verwenden, um Ihre Farbschemata zu erstellen. Bevor Sie mit Ihrem Farbschema beginnen, benötigen Sie eine Farbe, die Ihre Grundfarbe sein wird. So Grundfarbe können Sie es aus dem Logo oder dem Branding des Unternehmens erhalten , für das Sie entwerfen. Oder vielleicht, wenn Sie das Logo selbst entwerfen, können Sie die Farbe basierend auf dem Thema auswählen. Zum Beispiel, wenn Sie stark sind oder Spaß oder was auch immer Farbe. Im Moment habe ich meine Grundfarbe ausgewählt, um diese zu sein, 3E4F87, 266 Farbton, 54 Sättigung, 53 Helligkeit. Im Moment ist es irgendwo hier drüben. Die erste Farbharmonie oder das erste Farbschema, das Sie erstellen können, haben Sie bereits erstellt und welches monochromatisch ist. Monochromatisch bedeutet, dass wir nur eine Farbe verwenden werden. Wir werden einige Farbtöne, Schattierungen und Töne der gleichen Farbe hinzufügen , wir werden sie verwenden und ein Farbschema erstellen. So dass Farbschema, das auf einem einzigen Farbton basiert, und unterschiedliche Sättigung und Helligkeit, wird es monochromatisch sein. Im Moment ist das, was du siehst, eigentlich monochromatisch. Also, wenn Sie nur eine beliebige Farbe hier drüben wollen, können Sie darauf klicken und Sie können diese Schieberegler verwenden. Sie können sehen, dass der Farbton gleich bleibt, was die obere Leiste hier oben ist, unten zwei sind tatsächlich die Sättigung und die Helligkeit. Wenn Sie so etwas bewegen wollen, können Sie das tun. Sie können Farbschemata wie folgt erstellen. Dies ist eigentlich unsere monochromatische und es kann effektiv auf jedem UI-Design arbeiten. Sie brauchen also nicht zu viele Farben oder drei oder vier sehr lebendige Farben zu verwenden , um Ihre verschiedenen Aktionen auf Ihren Bildschirmen zu zeigen. Es gibt noch eine Sache, Sie können auch Ihr Farbschema aus Ihrem Bild auswählen, Sie können die Grafik oder das Bild hier importieren. Lasst uns das hier benutzen. Es wird verschiedene Farben von hier aus wählen Sie können sehen, dies sind die Farben , die in diesem Farbschema und auf diesem Bild verwendet wurden. Nun, wir gehen zurück zu unserem Farbrad und Sie können sehen, das ist, wie sie tatsächlich verwendet haben die, es ist tatsächlich verteilt die Farben auf dem gleichen Raum, Sie können ein bisschen rot-orange, und orange, und blau sehen . Das sind also die Farben, die verwendet wurden, rosa-rot. Lassen Sie uns zu einem anderen Farbschema übergehen, das analog ist. Analoga bedeutet, dass die Farben, die näher am Farbrad sind, können Sie eine oder zwei oder drei Farben kombinieren, die näher in Ihrem Farbschema sind und ein Farbschema basierend darauf erstellen. So werden sie harmonisch arbeiten. Wenn ich versuche, die Grundfarbe hier drüben zu verschieben, können Sie sehen, zum Beispiel, ob ich versuche, eine Grundfarbe in den Grüns oder vielleicht ein bisschen Gelb auszuwählen. So grün und orange, also ist mein Farbschema grundsätzlich analog und ich habe meine Grundfarbe ausgewählt, die diese ist, das mittlere Grün. Wir haben die Balance zwischen gelblichen Farben, gelblich-grün, orange Farbe, und auch die grünen reinen Farbtöne. Nun, wenn Sie es anpassen möchten, versuchen Sie nicht, so etwas zu verwenden. Sie können es anpassen, Sie können es so bewegen, so dass es tatsächlich in Richtung mehr Grauton bewegt. Sie können sehen, dass dies tatsächlich langweilig ist. Also hier haben wir weiß, dann hier haben wir grau. Sie können dieses auch verwenden, um es so hell oder dunkel zu machen. Vielleicht möchte ich eine dunkle Farbe darin, und ich möchte ein paar helle Farbtöne darin, ein paar matte Töne darin. Wann immer Sie ein Farbschema aufbauen, gibt es einen Tipp, den ich Ihnen jetzt geben werde, und Sie sollten genau zuhören. Dass wir nicht alle Farben der gleichen Schärfe oder Helligkeit verwenden. Wenn diese Farbe sehr hell ist, möchte ich etwas langweiliges oder dunkles für meinen Hintergrund. Weil ich will, dass das auf diesem Hintergrund auftaucht. In ähnlicher Weise werde ich nicht alle Farben hell verwenden, sie gehen, ich könnte einige dumpfe Farben haben oder so etwas. Das wird mein Farbschema sein. Hier ist ein weiteres Werkzeug, das ich wirklich liebe. Es ist ein Online-Tool, ich werde die URL hier zeigen, Farbversorgung, denke ich. Sie können hier sehen, ich habe ein analoges Farbschema ausgewählt, das aus diesen besteht. Also, wenn ich versuche, es hier drüben zu bewegen, können Sie sehen, dass ich mich in den Farben, verschiedenen Farben bewegen. Versuchen wir es orange, gelb und grün. Wenn ich diese analoge auswählen, können Sie sehen, es wird mir einige dunklere, Mischung aus dunkleren, und einige dumpfen Schattierungen und Töne und Töne geben. Ich werde eine auswählen, von der ich denke, dass es gut funktionieren wird, zum Beispiel, so. Das sieht wirklich toll aus. Sie können sehen, es zeigt die Beispiele für die Verwendung dieses Farbschemas, Sie können sehen, es ist im Grunde für Icon-Design, aber Sie können das in Ihrem Webdesign oder UI-Design verwenden. Sie können sehen, ob ich versuche, dieses Farbschema zu verwenden, dies ist das Aussehen und Gefühl, das von der Kombination dieser Farben kommen wird. Wie Sie das sehen können, ist der Hintergrund ein bisschen langweilig, aber die gelbe Farbe darüber ist sehr hell und scharf. Dies ist das analoge Farbschema. Nun, gehen wir zu einem anderen, der Triade ist. Triade ist eigentlich ein perfektes Dreieck auf Ihrem Farbrad. An der Spitze haben wir rot und Sie können nach drei Farben oder drei Sprünge sehen, es ist eigentlich eine nächste Farbe. Also nach jeder drei Farben, so wird der Raum in allen von ihnen ähnlich sein. Wenn ich versuche, dieses zu benutzen, versuchen wir, dieses zu benutzen. Dies ist lebendiger und hat viel Kontrast in all diesen Farben, weil sie von einer Menge Winkel getrennt sind. Wenn die Farben näher beieinander sind, haben sie einen geringeren Kontrast. So viel sie wie sie voneinander weggehen, zum Beispiel, wenn sie völlig entgegengesetzt sind, haben sie mehr Kontrast. Wenn sie hier durch zwei Sprünge getrennt haben, haben sie weniger Kontrast. also Ihre Nachfrage an, was auch immer Sie in Ihrem Farbschema wollen. Wollen Sie viel Kontrast? Oder möchten Sie einen subtilen Kontrast in Ihren Farbschemata? So Triade ist eigentlich, Sie können ein Dreieck sehen, perfekt angeordnet Dreieck auf der kurvigen. Nun, gehen wir weiter zu split-free. Zuvor, sagen wir, ich benutze dieses Komplementär. So komplementäres Farbschema, das ich denke, Sie sollten meist verwenden, ist eigentlich völlig zwei entgegengesetzte Farben auf einem Farbrad. Sie werden viel Kontrast haben, zum Beispiel dieses Blau und Orange oder dieses dunklere Blau und Orange. Wenn ich versuche zu wählen, mal sehen, ich werde dieses verwenden. So können Sie sehen, dass es tatsächlich ist, wie sie aussehen werden. Ich würde wirklich gerne eine Farbe abfärben, also lasst uns diese verwenden. Das sieht wirklich toll aus. Sie können sehen, wie sie aussehen werden, wenn wir versuchen, Symbole auf diesem Farbschema basierend auf diesem komplementären Farbschema zu erstellen . Komplementär bedeuten, dass sie auf einem Farbrad völlig entgegengesetzt sind. Es könnte rot oder grün sein. Sie können im universellen UI-Design sehen. Rot dient zum Löschen oder Abbrechen, und grün ist für den Erfolg. Sie sind völlig entgegengesetzte Farben. In ähnlicher Weise, blau und orange, dort habe ich viele Farbschemata gesehen, die sie verwenden. Dann haben wir diese grüne und magentafarbene Farbe. Dann haben wir diese oranglich-gelbe Farbe und diese siano blaugrün Farbe, blaugrün Typ etwas Farbe. Dieses Farbschema, ich liebe wirklich orange und blau unterscheidet. Das sind zwei tatsächlich Kombinationen eins und zwei, und ich liebe diese hier wirklich. Dies sind zwei meiner Lieblingsfarben. Diese dunkelbläuliche, violette Farbe und die orange Farbe. Hier geht es um kostenloses. Gehen wir zum nächsten, der geteilt komplementär ist. Alles ist gleich kostenlos. So können Sie sehen, dies ist rote Farbe jetzt, es ist genaue Gegensätze sollten grün sein. Aber eigentlich haben wir nach rechts und links zu dieser ergänzenden Farbe verschoben. Es wird nicht viel Kontrast haben, aber immer noch viel Kontrast haben. Es wird drei Farben haben, also mehr Abwechslung darin. Wählen wir dieses oder dieses aus. Sie können sehen, ich versuche dieses Farbschema, und versuchen wir es. Das sieht also gut aus. Sie können sehen, dass ich dieses Split-Komplementär-Farbschema ausgewählt habe. Dies sind die Symbole, die verwendet werden können, oder so können Sie verschiedene Farben in diesem Farbschema verwenden, und es wird nicht viel Kontrast haben, aber immer noch wie die komplementären Farben, aber immer noch eine Menge Kontrast. Außerdem können Sie eine weitere Sache sehen, dass die Farben an der Unterseite, sie sind fast näher beieinander. Sie werden also eher wie ein analoges Farbschema handeln. Sie haben eine gewisse Kompatibilität. Diese Farbe können wir für Kontrast verwenden. Nun, in der letzten, werde ich Ihnen zeigen dieses quadratische Farbschema oder doppelte komplementäre manchmal Leute sagen, dass es zwei ergänzende Farben gibt, wie es rot und grün und blau und orange. Also eigentlich ist das gesplit- komplementär. Lassen Sie es uns so hierher bringen. So können Sie jetzt hier unten sehen, es sieht wirklich cool aus, weil wir jetzt vier Farben haben, mit denen wir spielen können. Lassen Sie uns dieses auswählen, und Sie können sehen, wie es einige Symbole und Gönner produzieren wird, und so werden sie verwendet. Wenn Sie zum Beispiel ein Dashboard bauen, wo wir Benachrichtigungen haben, wo wir Fehlermeldungen haben, wo wir eine Menge von diesem Zeug haben, dann werden wir bei dieser Art von Farbschema bleiben, wo wir fast vier Farben für verschiedene Dinge und verschiedene Aktionen. Außerdem können Sie sie datieren und wenn Sie möchten, können Sie so etwas oder so etwas verwenden und das auch in Ihrem Farbschema verwenden. Die meiste Zeit Icon Designer oder vielleicht Illustratoren, sie brauchen eine Menge Farben, verschiedene lebendige Farben, verschiedene dumpfe Farben, um die Illustration zu vervollständigen. Aber im UI-Design oder Webdesign können wir leicht jede Schnittstelle entwerfen, alles mit nur einer oder maximal zwei Farben. Also bedenken Sie das. Hier geht es um verschiedene Farbharmonien. Ich werde Ihnen die Beispiele in der nächsten Lektion zeigen, wie und wo Sie verwenden können und wo diese verschiedenen Farbschemata verwendet wurden. Gehen wir mit der nächsten Lektion über und sehen uns einige Beispiele an. 8. Beispiele der Farbharmonie: Nun lassen Sie mich Ihnen zeigen, wie ich in der Vergangenheit einige Farbschemata erstellt habe, und das ist eines der Beispiele, lassen Sie mich Ihnen zeigen. Sie können sehen, dies ist eine Website und es geht um eine multimediale Digital Signage und verschiedene digitale Geräte und Charaktergenerator digitale Zeichen tatsächlich. Ich habe dieses Gesamtfarbschema und alles neu gestaltet und den größten Teil des Layouts gleich gehalten. Sie können hier sehen Sie diese bläuliche geteilt dann die Aktie, schwarz, rot. Dann sehen Sie einige große den Hintergrund. Wenn Sie dann hier rüber gehen, können Sie sehen, dass dies dunkelblau ist, das ist ein bisschen hellblau, und wenn Sie den Mauszeiger darüber bewegen, sehen Sie eine gelbliche Farbe. Dies ist eigentlich das ganze Farbschema, es hat rot, blau und gelb. Lassen Sie mich Ihnen zeigen, dass ich verschiedene Werte von hier kopiert habe und ich werde Ihnen zeigen wie ich tatsächlich dieses Farbschema entworfen habe und wozu es eigentlich gehört, zu welcher Farbschema Harmoniemethode gehört. Lassen Sie mich es Ihnen zeigen. Wir sind wieder bei Adobe Color CC und das ist eigentlich unsere Grundfarbe, das ist die Grundfarbe, mit der ich angefangen habe. Dies ist eigentlich 214U, und Sie können sehen, dass dies fast näher ist, um Farbschema hinzuzufügen. Es ist ein perfektes Dreieck. Dies ist rot, gelb an der Seite und blau an der Seite. Dies ist eigentlich Triade Farbschema und Sie können in der Mitte dieses eine sehen, dann haben wir einen anderen Ton oder Sie können Schatten von diesem sagen, die Sättigung ein wenig reduzieren und tatsächlich die Helligkeit erhöhen. Es ist im Grunde ein Verderben. Es ist eine grundlegende Lichtfarbe mit etwas weniger, man kann Schärfe oder Sättigung sagen. Dann haben wir diese rote Farbe, das ist ein bisschen dunklere rote Farbe, vielleicht für Stärke, weil dies eine Organisation ist und es ist sehr alte Organisation. Dann haben wir dieses Gelb für Aufregung, einige der Links, die ich verwendet habe, vielleicht wollte ich, dass es angeklickt wird und ich wollte eine gute Wirkung haben, wenn jemand über sie schwebt. Dies ist die Farbe, die ich ausgewählt habe. Dies ist wieder, eigentlich sehr nahe U an 214, ein bisschen anders, wie 10 oder 14 oder 16 ein bisschen ändern. Eigentlich habe ich auf diese Weise dieses ganze Schema erstellt, und ich habe mich beworben. Es gibt mehr Farben hinein, aber sie sind meist die Aktien und angespannt diese blaue Farbe. Die einzige Farbe, die kontrastieren, sind eigentlich dieses Rot und Gelb. Lassen Sie mich es Ihnen zeigen. Jetzt ist dies ein Farbrad und das ist eigentlich das Triaden-Farbschema, das ich rot, blau und gelb verwende. Rot, Blau, Gelb, aber ich wähle verschiedene Schattierungen, Farbtöne des gleichen Farbschemas. Versuchen Sie nicht, die gleichen reinen Farben wie diese zu verwenden. Dies ist ein Beispiel. Lassen Sie mich Ihnen weitere Beispiele zeigen. Lassen Sie uns ein weiteres Beispiel für monochromatisches Farbschema sehen. Dies ist eigentlich nur einzelne Farbe, die tatsächlich gelbe Farbe ist und wenn Sie sich dies ansehen, können Sie hier sehen, wir haben nur einen Hauch von roter Farbe. Rot ist eigentlich diese Organisation Branding Farbe und dieser Designer, er hat tatsächlich die gelbe Farbe ausgewählt, was ich denke, drei oder vier Stationen von dieser roten Farbe entfernt und wenn wir nach unten gehen, können Sie sehen, dass es nur gelb, ein wenig geteilt dunkleren Farbton von Gelb, das ist gut. Das ist immer noch monochromatisch. Wieder ein dumpfer Farbton oder Ton dieser gelblichen Farbe. Ähnlich, hier drüben, einige helle Enden von gelb und eine gelblich-orange Farbe und das war's. Grundsätzlich ist es rot, die bereits da Branding-Farbe und gelb ist. Gelb wird tatsächlich verwendet oder ganz auf dieser Website und eine weitere Sache, die ich erwähnen möchte oder Luft, wenn Sie sich diese Portion, gelb, weiß und schwarz, sie haben eine Menge Kontrast. Sie können sehen, dieses Schwarz ist, um schwarz und gelb und weiß auf ihnen sind wirklich aufregend, eine sehr vibrierende Farben. Dies ist eigentlich, können Sie sagen, dieser Designer nahm diese Farben auf dieser Grundlage. Sie können sehen, wenn Sie Overhead dauerhafte Beziehungen betrachten, globalen Erfolg sind dauerhafte Beziehungen Ich habe eine gewisse Aufregung, vielleicht wollen sie, dass ihre Kunden etwas Aufregung und Interesse haben, so etwas, vielleicht kreativ Lösungen. Dies ist ein sehr schönes Farbschema, nur mit Gelb. kannst du auch tun. Sehen wir uns ein paar weitere Beispiele an. Hier ist eine sehr große App von einigen Designern entworfen und ich erinnere mich nicht. Wie auch immer, was ich Ihnen hier zeigen möchte, ist, dass dies wieder ein triadisches Farbschema mit Blau, Rot und Gelb ist . Rot wird tatsächlich hier verwendet, um den Aufruf für diese Aktionen abzubrechen , aber meistens ist es stark, die meist verwendete Farbe ist diese blaue Farbe, dunkel, bläulich lila Farbe und dann haben wir einen Ton nach unten sehr dumpfen Schatten gräulich blaue Farbe hier drüben. Dann haben wir diese Orange, die mit dieser roten Farbe hier zusammenhängt. Hier können Sie rechts hier sehen, wenn ich es so ziehe, können Sie hier sehen, wir haben es in diesem Kartensymbol hier drüben. Dann haben wir hier Gelb benutzt. Sie können hier in diesem Bereich sehen, faire Schätzung, $12 und gelb. So gelbe Farbe ist sehr hell und blau ist ein mattes Blau. Dies ist ein weiteres Beispiel für die Verwendung von stumpfen und stumpfen Farben und das Mischen der hellen und scharfen Farben mit stumpfen Farben. Sie werden auf dem langweiligen Hintergrund auftauchen. Ein weiteres Farbschema, es ist wieder triadisches Farbschema. Nun lassen Sie mich Ihnen ein Beispiel für Analoga Farbschema hier haben wir diese Website natuur und milieu, was auch immer es ist, sowieso es aus den Niederlanden ist. Sie können sehen oder hören. Jetzt haben sie alle Farben, die in bläulich-grün und Sian oder blaugrün Schatten sind und Sie können grün sehen, deal, blau und das ist alles. Also eigentlich ist das Thema Natur, so dass sie in der Natur geblieben sind, die Wasser blaue und grüne Bäume ist. Alles, was sie färben. Alles ist dem ähnlich. Sie können an der Spitze sehen, sie verwenden einige sehr helle dichte und sehr dunkle Farben des gleichen Farbtons, gleiche Farbe, gleichen Farbton, um dies zu schaffen, ich denke, dieses Cookie Banner hier drüben. Lassen Sie mich Ihnen zeigen, wie es tatsächlich funktioniert und wie ein weiteres Beispiel dafür ist. Dies ist ein weiteres Design, das mit dem Namen Glanz glänzt. Es ist auch mit Farbschema, das meist monochromatisch ist, und nur eine Farbe, die eine ergänzende Farbe sein wird. Es ist tatsächlich Mischen von Zwei-Farben-Schema. Warum zeige ich Ihnen das? Denn in den meisten der Entwürfe, die gesehen haben und Designer tatsächlich sie versucht, zwei Farben Schemata zu mischen. Sie haben versucht, monochromatische zu verwenden, was eigentlich ist, können Sie das eigentliche Geheimnis dahinter sehen , dass Sie versuchen, eine Farbe zu wählen und versuchen, verschiedene Schattierungen Stints und verschiedene erstellen, können Sie verschiedene dunklere Schattierungen sehen, verschiedene Töne der gleichen Farbe, und fügen Sie Spaß oder zwei Farben in, dass für den Kontrast. Sie können hier sehen, meisten der Farben Reihenfolge k, dies ist die gleiche Farbe überall hier verwendet und wenn ich klicken und ziehen Sie es, Sie können sehen, lassen Sie uns nach unten gehen. Hier haben wir sehr dunkelrote Farbe. Sie können blau und rot sehen, und sie sehen quadratisch aus. Dann haben wir diese grüne Farbe, die sehr geringfügig Overhead verwendet wird, aber es ist eigentlich für den Kontrast. Wenn sie versuchen, die gleiche Farbe hier zu verwenden, wird es nicht Aufmerksamkeit erregen. Diese Knopffarbe ist die gleiche. Es ist konsistent wie die primäre Aktion. Lasst uns nur diesen ziehen. Sie können sehen, die Schaltflächen sind die gleiche Farbe, aber sie haben einige Arbeiter verwendet, wie Sie die orange Farbe hier für verifizierte Bewertungen sehen können . Nur um zu zeigen, dass dieser Artikel anders ist, wollen wir Ihre Aufmerksamkeit hier drüben. Dies ist ein sehr schönes Beispiel für die Verwendung eines monochromatischen und komplementären Farbschemas, mit einigen, fügen Sie dem monochromen Farbschema etwas mehr Farbe hinzu, nur um Aufmerksamkeit zu erregen. Jetzt werde ich mit Ihnen ein weiteres beliebtes Analoga Farbschema teilen, das Blues und Grüns ist. Ich habe es viel Zeit in verschiedenen Schnittstellen gesehen und ich werde Ihnen einige der Websites zeigen. Gerade jetzt, so können Sie sehen, dass dies eine andere Website ist. Ich denke. Dies ist eine Business-Wachstumsplattform jedenfalls glänzen. Sie können hier sehen, sie haben bläulich-grün. Wie auch immer, das ist blaues Farbschema. Ich liebe es wirklich. Sehr nett. Sie können sehen, die grüne Taste ist eigentlich gut auf dieser dunklen bläulichen Farbe hier und wenn ich nach unten gehen, können Sie die meisten ihrer Farben sehen. Sie sind größtenteils grün. Gehen wir runter. Auch hier können Sie bläulich lila Farbe und Grün sehen und wenn wir wieder nach unten gehen, ist der gleiche Farbkontrast ein sehr schöner Farbverlauf. Ich werde Ihnen zeigen, wo es tatsächlich mehr verwendet wurde, lassen Sie uns ein anderes Beispiel sehen. Das ist Glanz-Autowäsche. Sie können wieder in ihren Bildern sehen tatsächlich sie verwenden nur eine Farbe, diese sehr scharfe, gelblich-grüne Farbe, vielleicht vier dort. Sie wollen dieses grüne Produkt oder so etwas zeigen. Aber man kann sehen, wenn man das Bild schließt, als nächstes sieht man die Augen mit Blues oder hier im Hintergrund in ihrer Gesamtheit bei meist Blues und Grüns, Blues und Grüns. Das ist ein weiterer Kontrast. Viele Male habe ich es gesehen Blues und Grüns. Aber jetzt sind sie es. Die meisten Website ist eigentlich monochromatisch. Dies ist das Beispiel, das ich Ihnen vor, Gleam Homepage. Es ist von Marius. Keine Joker und ich liebe es wirklich. Sehr einfach, sehr effektiv. Sie können sehen, dies ist dunkler, rötlich rosa Farbe hier verwendet. Es ist eigentlich, man kann sagen, sehr viel Kontrast auf diesem Bereich hier drüben. Dann haben wir diese, eine blassorange Farbe, aber auf Weiß wird es aussehen, ich werde viel Aufmerksamkeit haben. Das ist alles. Die meiste Zeit monochromatisch als sie in diesem Designer Edit sind anfällig mehr Farben, um einen gewissen Kontrast zu haben. Diese App habe ich Ihnen bereits gezeigt, dies ist von Muhammad Magic Icon entworfen. Sie können Overhead das Gelb, dieses Blau und dieses rote triadische Farbschema sehen. Ich liebe es wirklich. Sehr schön gemacht Hausaufgaben von Jihad. Es hat, denke ich, 11.444 Ansichten. Ich denke, das sieht sehr sauber aus. Wie auch immer, das ist, wie tatsächlich die Beispiele für verschiedene Freitag komplementäre Farbschemata. Dann haben wir analoge, monochromatische, all diese verschiedenen Farbschemata, komplementäre Farbschemata. Ich habe gesehen, dass sie meist blau und orange sind. Ich habe es im Moment oft gesehen. Ich habe kein Beispiel. Vielleicht zeige ich es dir, wenn ich es getan habe. Bis dahin sehen wir uns bald in der nächsten Lektion. 9. 1. Projekt erste Farbe auswählen: Jetzt ist die Zeit für Ihre erste Aufgabe. Hier ist es. Ihre erste Aufgabe ist, dass Sie nur eine einzelne Farbe für ein beliebiges Farbschema auswählen. Ich werde Ihnen den Auftrag in der nächsten Folie geben. Was ist Ihr Auftrag hier? Wieder, erste Farbe, Auswahl Ihrer ersten Farbe und wie Sie es tun werden. Ich werde dir ein paar Tipps geben. Hier ist die Aufgabe, Pickup ist ein Lebensmittellieferunternehmen und Sie werden Ihre erste Farbe auswählen, die für dieses Unternehmen arbeiten wird. Sie werden mir auch den Grund sagen, warum Sie diese Farbe ausgewählt haben, so dass dies wieder eine Frage der Farbpsychologie ist. Ich werde Ihnen zeigen, dass Werkzeug, das Ihnen hilft, Ihre erste Farbe zu holen und das ist picular.co. Picular.co können Sie hier sehen, das ist das Werkzeug und Sie werden jede Farbe auswählen, zum Beispiel Essen, Pickup, so etwas. Es wird Ihnen mehrere Farben zeigen. Ich werde auf Ihre Farbauswahl warten und ich werde Sie auch fragen warum Sie diese Farbe als Ihre primäre Farbe in Ihrem Farbschema ausgewählt haben. Dies wird Ihre primäre Farbe sein. Die Hauptfarbe ist, dass Sie in Ihrem Farbschema arbeiten. Genoss diese Aufgabe. Ich werde auf Ihre Aufgabe warten, die die erste ist, wählen Sie Ihre erste Farbe. Beginnen wir mit der Erstellung unserer großartigen Farbschemata. 10. Geheimnisse der Erstellung Töne Töne: In dieser Lektion werde ich mit Ihnen meine Geheimnisse teilen, Schatten, Farbtöne und Ton einer gleichen Farbe zu schaffen und wie Sie die gleiche Technik verwenden können , die ich benutze, um Ihre Farbschemata effektiv zu erstellen. Der erste, den wir abdecken werden, sind Schattierungen. Der Trick, um gut aussehende Farbtöne zu schaffen , ist , dass Sie den Farbton gleich halten und Schwarz hinzufügen. Aber du wirst eigentlich zwei Dinge tun. Wann immer Sie einen Farbton erstellen, werden Sie die Helligkeit reduzieren und die Sättigung erhöhen. Also hören Sie mich nochmal aus. Reduzieren Sie die Helligkeit und erhöhen Sie die Sättigung. Das wird also einen wirklich schönen Schatten schaffen. Wenn Sie wirklich sehr dumpfe Farbe wollen, können Sie die Sättigung gleich halten und nur die Helligkeit reduzieren. Jetzt können Sie unten sehen, ich habe vier verschiedene Schattierungen dieses linken Farbtons erstellt , die 218 Grad oder 218 ist und Sie können auf der rechten Seite sehen, ich habe 70 Prozent Sättigung und 70 Prozent Helligkeit. Also eigentlich, was ich tue, ist, dass ich die Helligkeit reduziere und die Sättigung steigere. Ähnlich Erhöhung der Sättigung in den nächsten 75 Prozent und 40 Prozent Helligkeit, ich reduziere es, Erhöhung der Helligkeit auf der schwarzen Farbe. Es ist nicht wirklich schwarz, es ist dunkel Schatten des gleichen Blaus. Die Sättigung beträgt 80 Prozent und die Helligkeit beträgt 25 Prozent. Das ist also ein sehr ordentlicher Trick, um Ihre Schattierungen zu erstellen. Lassen Sie uns sehen, wo Sie diese Schattierungen finden werden. Sie werden sie in diesem Abschnitt Ihrer Farbauswahl finden. Also unten haben wir mehr Schwarz zu der gleichen Farbe hinzugefügt. Auf der rechten Seite haben wir mehr Sättigung. Auf der linken Seite haben wir weniger Sättigung. Also bedenken Sie das. In der Mitte haben wir einige mittlere Sättigung, es ist bei 60 Prozent. Von links nach rechts bin ich jetzt bei 60 Prozent. So finden Sie Ihre Farbtöne in diesem Abschnitt Ihrer Farbauswahl. Unabhängig davon, welches Werkzeug Sie verwenden, es wird diesem ähnlich sein. Jetzt Töne erstellen. Hier können Sie sehen, ich habe verschiedene Töne des gleichen Farbtons erstellt, die 218 und blau ist und Sie können auf der rechten Seite sehen, Ich habe drei verschiedene Töne der gleichen erstellt, dieser blaue Farbton. Die Technik, die ich verwendet habe, ist, dass ich die Sättigung langsam ansteige und ich die Helligkeit stark abnehme. Also brauchen wir eine stumpfe Farbe in etwa 58 Prozent Helligkeit, 42 Prozent Helligkeit und ich steigere tatsächlich die Sättigung. Eigentlich manipuliere ich diese Farben und Helligkeit und Sättigung, um einen ausgewaschenen Grauton für diesen blauen Farbton zu erzeugen. So erschaffe ich meine Töne. Lassen Sie mich Ihnen den Bereich zeigen, den Sie auf Ihrem Farbwähler für die Töne finden werden. Dies ist der Abschnitt, in dem Sie die meisten Ihrer Töne in der grauen Zone finden werden. So erschaffe ich eigentlich meine Töne. Ich bewege mich in diesem Abschnitt, um die Farbe zu finden, die mir am besten gefällt. Lassen Sie uns über Tönungen ein wenig genauer sprechen und was ist die Formel, die ich verwende, um verschiedene Farbtöne zu erstellen. So gleichen Farbton und wir werden weiß hinzufügen oder die Helligkeit erhöhen oder die Leichtigkeit erhöhen. Also hier habe ich vier Farben unten und Sie können von links nach rechts sehen, ich mache eigentlich zwei Dinge. Wieder zwei Dinge. Wieder zwei Dinge. müssen Sie im Hinterkopf behalten. Was ich tue, ist, dass ich die Sättigung reduziere und die Helligkeit steigere. Dies ist das Gleiche, was Sie tun werden, wenn Sie Farbtöne erstellen. So Sättigung, 60 Prozent, 30 Prozent, 12 Prozent und Sie können sehen, die Helligkeit ist bei 100 Prozent und es steigt, 90 Prozent, 100 Prozent, 100 Prozent. So werden Sie einige effektive Farbtöne für Ihr Design und für Ihr Farbschema erstellen . Wenn Sie nun einen Farbwähler verwenden, werden Sie Tönungen in diesem Bereich Ihrer Farbzonen finden. Versuchen Sie also zu scannen, bewegen Sie sich in diesem Abschnitt, um den Farbton zu finden, den Sie mögen oder Sie erstellen möchten. Sie können in die linke obere Ecke gehen, um die Farben zu finden, die sehr nahe an Weiß sind. Manchmal brauchen wir eine Farbe, die sehr nahe an Weiß und ein wenig Grau für unsere Hintergründe ist. Also, wenn ich ein mobiles Labor oder Websites entwerfe, neige ich normalerweise dazu, eine bläuliche gräuliche weiße Farbe zu verwenden. Eigentlich bin ich in der linken oberen Ecke und versuche eine Farbe zu finden, die etwas Blau, viel Weiß und etwas Grau hat. So erstellen Sie eine sehr schöne Farbe, die als Hintergrund dienen kann und nicht ablenken meine Augen oder meine Benutzer Augen. Das ist alles für diese Lektion. Wenn Sie Fragen haben, fragen Sie mich. Ich hoffe, Sie haben diese Lektion genossen. Bis bald in der nächsten Lektion. 11. Farbpsychologie 101: Lassen Sie uns nun über Farbpsychologie sprechen. Nun, ich habe viele Designer gesehen, die nicht wissen , welche Farbe tatsächlich für welchen Zweck gewährt wird. Also jede Farbe oder jedes Farbthema, das Sie haben, wird es einige psychologische Auswirkungen auf Ihre Benutzer oder Ihre Zuschauer dieses Designs haben . Wir werden also darüber sprechen, was diese verschiedenen Farben sind und was sie eigentlich bedeuten und warum Sie diese auswählen sollten. Also lasst uns anfangen. Der erste, mein Lieblings-Blues. Nun, warum Sie sehen, dass es eine Menge Verwendung von Blau in der UI-Design-Branche, Sie haben eine Menge von mobilen Apps gesehen, Sie haben viele andere Websites oder Lernseiten gesehen, die blau verwenden, weil es die sicherste Farbe ist. Es wird von Männern und Frauen gleichermaßen gemocht und es ist gerechtfertigt, so dass es tatsächlich Vertrauen entwickelt. Es ist zuverlässig, es ist stark, es zeigt, dass dies eine professionelle Website ist oder dies eine professionelle App ist. Dies sind tatsächlich die psychologischen Auswirkungen von Blau. Jetzt grün. Grün wissen Sie bereits, dass alle unsere Bäume und all unsere Grünanlagen, die um uns herum ist grün, so ist es mit Wachstum und Gesundheit und Wohlstand, Frieden, weil Grün ist eigentlich eine friedliche Farbe. Es ist mit Bäumen, Wachstum, Blättern verwandt , so dass ist alles. Wenn Ihr Team tatsächlich mit Medizin oder Medizin oder so etwas verwandt ist , oder vielleicht ein biologisches Produkt oder vielleicht ein gesundheitsbezogenes Produkt, können Sie Grün als Hauptmarkenfarbe oder Ihre Hauptfarbe in Ihrer App verwenden. Jetzt wissen Sie bereits, dass Gelb tatsächlich eine warme Farbe ist, also ist es eher mit Wärme verbunden, Klarheit, weil Gelb die Farbe Ihres Sonnenlichts ist. Die Sonne ist sehr gelb, wir können sie nicht einmal betrachten. So gelb ist, in der menschlichen Psychologie, es steht im Zusammenhang mit Klarheit, Optimismus, Wärme, weil Gelb unsere wärmste Sonnenfarbe ist und es mit Sonne verwandt ist. Dies sind ein paar Dinge, die mit Gelb verwandt sind. Denken Sie daran, dass, wenn Sie sich zu warmen Farben wie Orange und Gelb bewegen, sie sind meist aufregende Farben. Sie haben mehr vibrierende Farben in ihnen, also bedenken Sie das auch. Wieder kann man für das Rot sehen, wieder ist es aufregend, weil es auf der warmen Seite ist. Rot, Orangen und Gelb, sie sind spannende Farben, weshalb sie in der Lebensmittelindustrie verwendet werden. Sie haben McDonald's gesehen, sie verwenden nur Gelb- und Rottöne. Das ist ihre Entscheidung, entworfen, um diese Farben zu sehen und zu bekommen, um etwas Aufregung los in den Nahrungsniveaus oder was auch immer sie im Sinn haben. Es ist auch mit Jugendlichkeit verwandt, weil es voller Energie oder so etwas zeigt. Es ist eine kühne Farbe und mutig oder mutig so etwas. Dies sind wenige Merkmale von Psychologieeigenschaften, die mit roten Farben verwandt sind. Jetzt, lila oder violette Farbe, sie sind mehr mit Kreativität, Weisheit und Phantasie verwandt. Wenn Sie die meisten meiner Websites sehen und wann immer ich vor allem entwerfe, meine Farben, die ich dann zu wählen versuche, sind einige Schatten von lila, blau und gelb oder gelb Orangen. So Orange ist für Kreativität, Aufregung und dieses violette Blau ist eigentlich für Zuverlässigkeit und Weisheit und Kreativität. Eigentlich versuche ich, mein Team darum zu bauen. Wenn Sie einige Farben wie diese verwenden, müssen Sie verstehen, was sie tatsächlich bedeuten, damit Sie sie richtig verwenden können. Als nächstes ist orangefarbene Farbe. Orange ist eigentlich eine freundliche Farbe und es ist fröhlich und es zeigt Selbstvertrauen. Sie könnten gesehen haben, dass die meisten der Websites, die sie verwenden orange und blau als ihre Hauptfarben, weil dies der Grund ist. Es ist eine einladende Farbe, so dass Sie freundlich sehen können, zum Beispiel möchte ich, dass mein Design freundlich ist, ich möchte einige einladende Farbe, ich werde einige orange oder Call-to-Action-Taste oder meine große Landingpage Taste verwenden. Rufen Sie mich an oder laden Sie diese Kopie, dieses PDF oder so etwas herunter. Es ist eine freundliche Farbe, fröhlich und weil es aufregend ist, deshalb ist es fröhlich. Drittens ist es mit dem Vertrauen verbunden, das auch mit einer blauen Farbe zusammenhängt. Blau ist auch zuverlässig, also dreht sich alles um orange Farbe. Lassen Sie uns jetzt über schwarze Farbe sprechen. Schwarz ist meist mit luxuriösen Produkten verwandt und wenn man sich verschiedene Luxusmarken wie Apple und alle anderen verschiedenen anschaut, haben sie meist Grautöne und Schwarze in den Logos. Sie können sehen, dass das Apple-Logo schwarz wird und sie auch eine Menge Grautöne haben. Das ist tatsächlich zeigen Stärke, Ernsthaftigkeit, Luxusprodukt. Auch viele Modemarken haben sie viel Schwarz auf ihren Websites und in ihrem Produktmarketing und so etwas verwendet . Meistens wird es mit Luxus und Markenimage verwandt sein. Dass diese Marke eine Luxusmarke ist, oder es ist eine erstklassige Marke oder so etwas. Also das sind verschiedene psdsychology Merkmale, die mit schwarz verwandt sind, wie Kühnheit, hat es gezogen, dann Geheimnis, Formalität, Trends, Luxus und Ernsthaftigkeit. Wenn Sie für ein Produkt entwerfen, das sie etwas sehr luxuriöses Aussehen wollen oder sie wollen einige, ganz oben in der Linie aussehen, dann werden Sie eine Menge von dunklen schwarzen Farben auf ihrer Website oder mobilen Apps verwenden. Die letzte, wir werden über weiße Farbe sprechen. Weiß ist vor allem mit Frieden und Reinheit verbunden und es ist auch mit Sauberkeit, Unschuld, Trost und Hoffnung verbunden. Wenn Sie für eine NGO oder so etwas entwerfen, können Sie diese Farbe viel verwenden. Auch im Design, wenn Sie Weiß als Hintergrund verwenden, wird es Ihnen viel Platz geben. Wenn Sie viele Leerzeichen verwenden möchten, fügen Sie hier eine Menge Weiß hinzu. Eigentlich wird es als Hintergrund fungieren und es wird Ihnen ein sauberes Aussehen geben. Sie können sehen, dass es bereits mit Sauberkeit zusammenhängt . Wenn Sie also ein sauberes Aussehen wünschen, verwenden Sie viele Leerzeichen um Ihr Objekt. Weiße Farbe wird meist für Ihre Hintergründe verwendet, wenn Sie einen dunklen Hintergrund wollen und wollen von weißen Knopf darauf verwenden, können Sie das auch tun. Ich hoffe, Sie haben diese Lektion genossen, wenn Sie Fragen haben, fragen Sie mich. Fahren wir mit der nächsten Lektion fort. 12. Gender: Psychologie hat eine andere Perspektive, die ist, welche Farbe ist wie pro, welches Geschlecht? Wenn Sie eine Website für Männer, Kinder oder Frauen entwerfen, müssen Sie sich um die Farben kümmern, die Sie verwenden, Sie müssen wissen, dass welche Farben von Männern gemocht werden und welche Farben von Frauen nicht gemocht werden, Dinge wie diese. Zuerst werden wir darüber sprechen, was verschiedene psychologische Farben sind, die sterblich sind, von verschiedenen Geschlechtern gemocht. Beginnen wir mit Männern, und Männer vor allem wie diese blaue, grüne, schwarze und rote Farbe, sie werden meist starke Farben mögen, können Sie sehen, Blau, Grün, Schwarz, Schwarz ist sehr fett, rot ist sehr fett, diese Farben werden von Männern gemocht. Die beliebtesten Farben von Frauen sind die blaue Farbe, dann ist die zweite lila, grün und rot. Sie daran, dass die Farbe tatsächlich aus der Forschung sind, die Farben, die Sie sehen und haben die mehr Höhe ist es tatsächlich am meisten von der Frau gemocht, wie Sie sagen können, 40 Prozent Frauen, die sie blau mögen, dann 30 Prozent wie diese, lila zu solchen Dingen, müssen Sie im Auge behalten, dass dies nicht nur eine grafische Präsentation, es bedeutet tatsächlich, dass diese Farben sind mehr gemocht und diese Ursachen sind weniger von Frauen gemocht. Eine Sache, die Sie gemeinsam gesehen haben, dass blaue Farbe, es wird sowohl von Männern als auch von Frauen gemocht, deshalb wird es in UI-Design oder mobilen Apps oder Web-Design als Standardfarbe verwendet, das ist der Grund dafür. Männer mochten tatsächlich mehr lebendige und helle Farben, die mehr Vibration in ihnen haben, unter Berücksichtigung, dass, wenn Sie ein Produkt , das Aufmerksamkeit der Männer braucht entwerfen werden helle lebendige Farben verwenden, blau, orange, grün und rot, grün , rot und blau, sie sind beide wie von Männern und Frauen. Im Gegensatz zu Männern, Frauen mochten meist weiche Farben, weicher bedeutet, dass weiche Pastellfarben, die tatsächlich sind, können Sie sagen, nicht sehr scharf oder sehr hell, sie haben sehr mittleren Ton, sehr Pastell Typ. Schau, du kannst diese Farben sehen, die ich unten gezeigt habe, sie haben sehr weiche Berührung und weiche Farben, sie sind nicht sehr lebendig, sie sind nicht sehr hell oder sehr scharf oder sehr, haben zu viel solche Sättigung. Dies ist, wie Sie entwerfen, wenn Sie entwerfen, vor allem für eine Frauen-App oder Frau NAB oder Frau-Produkt, im Gegensatz zu Frauen, Männer meist wie dunkles Hemd, sind sie eher zu dunklen Hemden wie dunkle Blues geneigt, dunkelgraue und dunkelorange gefärbte, dunkelgrüne und dunkelstarke rote Farbe, oder es ist auch näher an kastanienbrauner Farbe. Sie daran, dass Männer sind meist in Richtung lebendige und dunkle Farben anstatt weiche Schattierungen von verschiedenen rosa oder anderen Farben geneigt . Ähnlich, wenn Sie für Frauen entwerfen, werden sie mehr in Richtung Tönung der Farben neigen, wie sie mehr weiß in ihnen haben, sie mögen keine sehr dunkle Kleidung oder stumpfe Farben, wenn Sie für Männer oder Frauen entwerfen, Sie müssen all diese Dinge im Hinterkopf behalten. Das ist alles über die Skala Psychologie von Männern und Frauen mit Geschlecht mag , welche Farbe und wenn Sie speziell für Frauen Produkt zu entwerfen sind, dann werden Sie Farben, die am meisten von Frauen gefallen zu verwenden.Wenn Sie Männer, Sie gehen, um Farben zu verwenden, die sind attraktiver gegenüber dem Geschlecht, die Männer ist. Das ist alles, wenn Sie Fragen haben, fragen Sie mich. Fahren wir mit der nächsten Lektion fort. 13. Farbschema der Effektivität deines Designs: In diesem Video werde ich darüber sprechen, wie Farben das Thema ändern oder das Aussehen jeder Marke, jeder Website, die Sie entwerfen, jedes Logo, das Sie entwerfen oder bauen, ändern. Ich werde in meinen Prozess graben, wenn ich versuche, Farben auszuwählen, wie verschiedene Variationen werden beeinflussen und verschiedene Themen erstellen , oder Sie können verschiedene Persönlichkeiten eines Unternehmens oder einer Firma oder eines Logos oder einer Website oder einer mobilen App sagen . Was auch immer Sie Ihre Farben auswählen, Sie müssen sehr vorsichtig sein. Sie können die Wahrnehmung ändern, sie können die Stimmung ändern, sie können die Persönlichkeit Ihrer gesamten App, Ihrer Website und Ihrer Marke verändern . Ich werde Ihnen meinen Illustrator zeigen und wie ich gerade baue, meine eigene kleine Firma zum Lernen von Seiten. Lasst uns eingraben. Hier, wie Sie sehen können, baue ich tatsächlich, ich habe bereits diese Marke gebaut und Sie können sehen, dass ich eine starke Persönlichkeitsfirma sein wollte. LandRight bedeutet Landingpage Design und Entwicklung für Ihr kleines Unternehmen. Das ist im Grunde das, was diese Firma tut. Für kleine Unternehmen, denke ich, dass sie einige gute professionelle Menschen brauchen , die gute Kenntnisse und Verständnis der Dinge haben. Wenn Sie sich diese vier verschiedenen Kombinationen auf der linken Seite ansehen, die meine oben links sind, das ist mein Lieblings-LandRight, Bernstein, goldene gelbliche Farbe mit diesem dunkelblauen und ich liebe es wirklich. Ich habe es in meiner Verdienstübung viel benutzt, aber hier kann man sehen, dass es stark und professionell aussieht, aber es hat eine Menge Vibration aufgrund dieses gelben und es sieht aus und fühlt sich vor allem wie ein kreatives Unternehmen oder so etwas an. Jedenfalls, wenn ich mich hauptsächlich auf Design konzentriere, denke ich, dass ich mich für diese gelbe und blaue Kombination entscheiden werde. Jetzt zu diesem richtigen zu bewegen, ist dies mehr auf Grün und Blues fokussiert, so dass es im Grunde mit Wachstum verbunden ist und das kann eine gute Option sein. Aber aus der Stärke Sicht, ich glaube nicht, dass man sagen kann, dass es zu viel Stärke für vor allem für das Branding Teil hat. Ich habe bereits diese Art Gesichter ausgewählt, so dass sie auch mit dem gleichen Thema und der gleichen Persönlichkeit gehen. Wenn Sie meine Typografie Kurs genommen haben, Sie können sehen, dass ich diese durch diese ausgewählt habe meine, Sie können Prämie sagen, für ich habe es gekauft. Jetzt nach unten zwei Optionen bewegen, die ich wirklich liebe. Auf der linken Seite ist es im Grunde rot blass Farbe, sehr hellrote Farbe, die Kontrastfarbe für dieses bläuliche Lila ist. Diese beiden sind im Grunde entgegengesetzte Farben und hier können Sie sehen, was ich versuche zu tun ist, es ist im Grunde eine moderne Kombination von Farben. Ich habe es viel Zeit gesehen, dass diese blassen, neutralen Farben mit den sehr hellen oder sehr dunklen Farbtönen verwendet wurden , um einen einzigartigen Effekt zu erzeugen. Umzug auf die letzte Option, die ich wirklich liebe, Ich habe gerade diese jetzt erstellt, ich dachte, dass ich diese mit Ihnen teilen sollte. Sie können sehen, das ist die, die ich wirklich liebe, es ist vor allem mit Wachstum und Persönlichkeit. Es hat sehr professionelles Aussehen professionelle blaue, dunkelviolette Farbe mit etwas seanish grüne Farbe hier für Wachstum. Sie können sehen, dass dies die Farbe ist. Wenn ich es heller machen will, vielleicht etwas näher zu hören. Lassen Sie uns seine Helligkeit 95 Sättigung auf 70 Prozent machen. Ich denke, wir sollten die Sättigung ein wenig reduzieren, ich würde mit diesem gehen, es ist, es hat eine Menge Kontrast, viel Persönlichkeit, sehr dunkel, sehr professionelle Farbe und ich denke, wir brauchen nur diese beiden Farben, um das gesamte Thema zu entwerfen. Ich würde so etwas versuchen, Sie können hier sehen, Ich habe meine Schreibkraft diese Überschrift und dann einen weiteren Absatztext ausgewählt. Dann habe ich diesen Knopf mit dem Logo, ich muss all diese kombinieren, um das ganze Thema meines Designs zu erstellen oder zu bauen. So versuche ich, verschiedene Farben zu variieren. Wenn ich Ihnen meinen Prozess davor zeige, können Sie sehen, dass dies tatsächlich der Ort ist, wo ich angefangen habe und das hat Tonnen von verschiedenen Kombinationen dieser Typografie, im Grunde Typografie. Ich habe auch mit diesem angefangen, das ist eine trichterähnliche Form. Wenn Sie eine Vorstellung von S-E-O, Suchmaschinenoptimierung oder Lernseiten haben , wissen Sie vielleicht, dass dies der Trichter ist. Es ist tatsächlich in diese Richtung. Es sollte von oben nach unten sein, aber es ist so. Dies war das erste Logo, das ich ausprobiert habe, und dann habe ich zu diesem verschoben, das sind einfachere Formen. Ich liebe einfache Formen, weil ich denke, dass, wenn Ihr Logo einfacher ist, es einfacher ist, sich zu merken und es würde besser in kleineren Größen funktionieren. Wenn ich so etwas habe, wird es viele schöne und kleinere Größen auf arbeiten. Zweitens ist, dass es in einer quadratischen Form ist. Es hat viel Potenzial, für mich habe ich dieses letzte ausgewählt, um auf diesen beiden letzten Optionen zu sein, ich freue mich wirklich auf diese, vielleicht füge ich einige weitere Farben hinzu. Dies ist, wie das gesamte Farbschema wird die Persönlichkeit Ihres Designs, Ihrer gesamten Website oder der gesamten mobilen App beeinflussen . So wird das gesamte Farbschema die Persönlichkeit Ihrer Marke, Ihrer Website, Ihrer mobilen App definieren . Ich hoffe, Sie haben diese Lektion genossen, wenn Sie Fragen haben, stellen Sie mich. Fahren wir mit der nächsten Lektion fort. 14. Zweck der einzelnen Farbe im UI-Design: Es gibt zwei Geheimnisse in jedem Farbschema Design. Eine, die ich Ihnen in dieser Lektion erzählen werde, die zweite, ich werde es Ihnen sagen. Eine andere Regel, die ich befolge und Sie sollten auch folgen, die Sie eine Menge guter Designer machen und es wird Ihnen helfen, tolle Farbschemata zu erstellen. Das erste, was ist der Zweck jeder Farbe in Ihrem Farbschema? Wenn Sie versuchen, sich darauf zu konzentrieren, hat jede Farbe einen Zweck. Sie müssen diesen Zweck dieser Farbe zuweisen, und Sie müssen dabei bleiben. In diesem Farbschema können Sie sehen, dass dies unser Design ist, das ich Ihnen bereits gezeigt habe. Hier können Sie sehen, dass die Hintergrundfarben entweder dunkel oder hell sind. Die beiden Farben, die als Hintergrund verwendet wurden, ist diese, diese lila blaue Farbe. Dann haben wir diese sehr helle Farbe, die , eigentlich, wählen wir diese. Es ist eigentlich f9, f9, f9. Dies sind die beiden Farben, die als Hintergrund verwendet wurden. Wenn Sie sich mit diesem Design befassen, haben Sie andere Farben gesehen, die als Hintergrund verwendet wurden? Sie müssen Ihre Farben reparieren. Hintergrund wird eine Farbe zugewiesen. Diese beiden Farben, sie arbeiten tatsächlich als Hintergrund dieser ganzen Anwendung. Dann kommen zu den nächsten Farben, die unsere Action-Farben sein werden, oder Sie können die Farben sehen, die die Aufmerksamkeit des Benutzers erregen werden. Dies sind tatsächlich die gelbe Farbe, die Sie sehen können, lassen Sie uns vergrößern. Sie können hier sehen, wir haben diese gelbe Farbe in diesem Abschnitt. Ich denke, ein weiterer Abschnitt, sowieso, das ist eigentlich, sie haben diese gelbe Farbe und diese rote Farbe hier drüben als ihre Aktionsfarben verwendet. Dann haben wir zum nächsten Schritt, wir haben unsere Statusfarben. Möglicherweise aktiviert, deaktiviert, aktiv, inaktiv, oder vielleicht zeigt ein Symbol oder einen Standort oder so etwas an. Dies sind einige zusätzliche Farben. Sie verwenden diese Orange, dieser Designer verwendet eigentlich Orange oder dieses Grau, dieses dunkelgrau. Wenn Sie genau auf diese hier schauen, können Sie sehen, wenn der Anruf aktiviert ist, es hat eine sehr dunkelblaue, die gleiche Hintergrundfarbe aktiviert Farbe. Dies ist eigentlich ihre Hauptfarbe, Primärfarbe, wo sie tatsächlich begonnen haben und wenn es deaktiviert ist, hat es diese Farbe. Dies ist eine dunklere, man kann sagen, weniger gesättigte Farbe der gleichen, dieses Blau und dies wurde hier verwendet. In ähnlicher Weise, wenn Sie sich diesen Text ansehen, werde ich ein wenig hineinzoomen. Es wird nicht jaggie aussehen. Sie müssen eine Sache bemerken, die dunklere Farbe für den Text ist, der aktiviert ist oder so etwas. Der Rest des Textes, den Sie sehen können, ist sehr langweilig, gräuliche Farbe. Sie können den Unterschied sehen. Dies ist ein sehr subtiler Unterschied, aber Sie müssen bemerken, dass, wenn Sie ein guter Designer sein wollen. Hier ist eine Zusammenfassung, Sie müssen herausfinden, welche Farben gehen, um Ihre Action-Farben oder Ihre, die Aktionsfarben auf Ihrer App, ob es eine Schaltfläche oder ein Telefonsymbol oder ein Ablehnungs- oder Lösch-Symbol wäre, Schaltfläche löschen oder so etwas. Action-Farben werden spezifisch sein. Hintergrundfarben, müssen Sie Ihre Hintergrundfarben berücksichtigen , dass ich eine sehr stumpfe Farbe, dunklere Farbe für einen Hintergrund und sehr helle Farbe für einen anderen möchte. Sie benötigen einige Statusfarben. Meistens werden sie im Dashboard-Design benötigt. Wenn Sie ein Dashboard entwerfen, gibt es verschiedene Statusarten, Fehlermeldungen. Wir haben verschiedene Benachrichtigungen, wir haben verschiedene Updates, daher brauchen wir diese Statusfarben. Dies ist eigentlich der Zweck einer anderen Farbe. Sie müssen diesen Zweck zuweisen und Sie müssen sich daran halten. Eine weitere Sache, wenn Sie bemerkt haben, dass Action-Farben sehr hell sind. Sie haben aufmerksamkeitsstarke Persönlichkeit als die Hintergrundfarben, sie sind stumpf, blass, oder Sie können sagen, glatte, saubere Aussehen, so dass wir leicht auf sie für längere Zeiten starren können. Statusfarben werden mit Animationen oder irgendwann Bewegung gemischt, um die Aufmerksamkeit des Benutzers zu erregen. Wie Sie sehen können, wenn Sie Ihren Schieberegler fallen aktiviert und deaktiviert. Das ist eigentlich eine Animation. Es hat also Feedback. So verwenden UI-Designer Farben in ihren Apps, auf ihren Websites und in ihren Logos, alles, was Sie die gleichen Prinzipien verwenden können. Weisen Sie eine Farbe zu und halten Sie sich daran und weisen Sie ihr eine Funktion zu, und das ist alles. Wir sehen uns bald in der nächsten Lektion. 15. Schärfe auf dunkler Farbe – Kontrast Geheimnis von Farben: Jetzt werde ich Ihnen ein weiteres Geheimnis über Farbschemata erzählen und wie Sie tolle Farbschemata erstellen können. Die Regel ist, dass wir stumpfe Farben mit gesättigten oder scharfen Farben mischen werden. Die dumpfen Farben, sie werden als Hintergrund oder eine unterstützende Regel für die scharfe Farbe auf ihm wirken. Sie können hier in diesem Beispiel auf dieser Folie sehen, Sie sehen eine sehr scharfe blaue Farbe, aber der Hintergrund ist eine stumpfe, bläuliche graue Farbe. Es ist ein sehr langweiliger Ton desselben Blaus. Ich habe etwas grau machen und es ein bisschen heller machen, und Sie können sehen, dass sie gut aussehen. Sie können hier sehen wir die Sättigung der oberen Taste süß und scharf. Es ist 89 Prozent und Helligkeit ist 88 Prozent. Der Hintergrund, den Sie sehen können, die Sättigung ist sehr niedrig, 10 Prozent und die gleiche Farbe der Farbton ist gleich und die Helligkeit ist 89 Prozent. Dies ist die Regel, die Sie im Hinterkopf behalten müssen. Hier ist ein weiteres Beispiel für stumpfe Farben, die sich gut mit gesättigten Farben mischen werden. Jetzt hier haben wir zwei verschiedene Farben, und Sie können sehen, wir haben diese braune Farbe und wir haben diese sehr scharfe gelblich-orange Farbe. Hier haben wir, wieder, die Sättigung der Spitze ist 88 Prozent und Helligkeit ist ein 100 Prozent, so ist es viel Licht emittiert, so ist es sehr leuchtende Farbe und der Hintergrund ist ein bisschen langweilig, Helligkeit ist nur 25 Prozent, und Sättigung ist sechs Prozent. Dies ist ein weiteres Beispiel für das gleiche Farbschema, also habe ich zwei Farben gemischt, aber eine von ihnen ist sehr hell und sehr gesättigt und die andere ist weniger gesättigt und weniger hell, so dass sie zusammen sehr gut gehen. Nun ein weiterer Trick, den ich viel gesehen habe, ist, dass ich mit den erfahrenen Designern gesehen habe , dass sie dazu neigen, blasse Farben mit gesättigten Farben zu mischen. In ihren Farbschemata haben sie blasse Farben. Blasse Farben bedeuten, dass der Hintergrund tatsächlich eine sehr geringere Sättigung hat und möglicherweise eine gewisse hohe Helligkeit haben wird. Hier können Sie sehen, ich habe die Kombination von zwei Farben. Dies ist sehr blass grünliche Farbe. Ich liebte diese Kombination jedenfalls wirklich. Links können Sie hier sehen, haben wir die Farbe, die Sättigung von 14 Prozent und Helligkeit ist 89 Prozent, so Helligkeit ist gut, aber die obere blau hier hat es mittlere Sättigung um 55 Prozent und Helligkeit ist 50 Prozent. Eigentlich ist dies viel gesättigter, aber kein großer Sprung vom Hintergrund, so dass der Hintergrund ein bisschen hell und blass ist. Ich würde es hell und blass in dem Sinne nennen, dass es weniger Situation hat, aber es ist hell. Sie können sehen, dass die Schaltfläche auf der Oberseite einen Sättigungsunterschied von etwa 40 Prozent mehr Sprung in der Sättigung als der blasse Hintergrund. Dies ist ein weiterer Kontrast, den Sie ausprobieren können. Lassen Sie uns nun zum zweiten Schritt übergehen, der helle Farben im Vergleich zu stumpfen Farben ist. Sie werden auch gut zusammen gehen. Dies ist eine einzelne Farbe. Ich habe den gleichen Farbton verwendet und die Helligkeit des Hintergrunds beträgt 13 Prozent, also ist es sehr langweilig, es ist sehr schwarz. Es ist sehr nah an der schwarzen Farbe. Auf der linken Seite sehen Sie die gleiche Farbe und die Helligkeit beträgt 100 Prozent. Dies ist ein weiterer Trick, den Sie verwenden können. Dies sind die Prinzipien, wenn Sie diese lernen und Sie können diese manipulieren, Sie haben gute Kontrolle über diese beiden Fähigkeiten, können Sie jedes Farbschema erstellen und das wird Ihr Design Pop, das cool aussehen wird. Jetzt können Sie sehen, ich benutze nur eine Farbe, wieder, hier drüben und die Helligkeit meiner Taste ist 30 Prozent, es ist sehr dunkel und sehr gesättigte Farbe und der Hintergrund ist sehr blass und sehr hell. Dies ist wieder ein weiteres Beispiel für das gleiche Farbschema. Sie können mein Farbschema auch beurteilen, wenn Sie sich hier verschiedene Textbereiche ansehen, wo ich einige mittlere Töne in diesem ganzen Design gemischt habe. Ich hoffe, Sie werden versuchen zu bemerken, wie verschiedene Farben kombiniert wurden, weil dies tatsächlich die Skala ist. Wenn Sie anfangen, verschiedene Farbschemata um Sie herum zu bemerken, werden Sie das Geheimnis ergreifen, dass, wie wir sie miteinander mischen können. Hier ist ein weiteres Beispiel für hellen Hintergrund und dunkle Farben oben drauf. Sie können sehen, ich habe hellen Boden und dunkle Farben geschrieben. Hier können Sie sehen, ich verwende einen Farbverlauf von dunkelbläulich zu dieser rosa-roten Farbe und Sie können sehen die Helligkeit dieser beiden Farben ist weniger als 50 Prozent. Ich denke, Sie müssen damit experimentieren, aber ich denke, persönlich muss die Helligkeit weniger als 50 Prozent oder nur 50 Prozent betragen. Wenn Sie versuchen, wie 60,70,80 zu erhöhen, dann müssen Sie auch Ihre Sättigung erhöhen, weil der Knopf stumpf aussehen wird. Versuchen Sie, Ihre Helligkeit als 50 Prozent, 55 Prozent, nicht mehr als das zu halten . Nun, lassen Sie mich Ihnen ein Beispiel für die Verwendung dieser beiden Prinzipien von dumpfen Hintergrund plus gesättigte Farbe darüber zeigen , dann haben wir hellen, blassen Hintergrund und wir haben eine dunkle Farbe drauf. Sie können hier sehen, ich habe eine Probe. Das wird eigentlich Ihre Übung sein. Dies ist ein Design, Crypto Bank und Sie können sehen, dass ich nur einen Farbton, eine einzelne Farbe verwende , um dieses ganze Farbschema zu erstellen. Lassen Sie mich Ihnen zeigen, wie ich das erschaffen habe. Trick hier ist heller Hintergrund und oben drauf haben wir sehr scharfe Farbe. Hier haben wir diese Farbe. Dies ist unsere primäre blaue Farbe und es hat die Sättigung von 80 Prozent und Helligkeit ist 60 Prozent. Ich will nicht, dass du über 60 Prozent gehst, schätze ich. Dies sieht gut aus auf einem hellen weißen Hintergrund, so dass wir eine Menge Kontrast haben. Ähnlich, in der Schaltfläche hier drüben, wenn wir uns diesen unteren Bereich hier ansehen, was ich euch wirklich zeigen möchte, dass ihr das verstehen müsst. Hier haben wir eine andere Farbe als Hintergrund und die Sättigung dieser Farbe beträgt sieben Prozent und die Helligkeit beträgt 100 Prozent. Es ist im Grunde eine blasse, helle Farbe, sehr weniger Sättigung und sehr hohe Helligkeit. Das ist eine Sache. Darüber hinaus haben wir eine sehr dunkle Farbe, Helligkeit ist 60 Prozent und die Sättigung ist 80 Prozent. Das ist der Trick, den ich dir zeigen wollte. Wenn Sie diesen Trick meistern, werden Sie, danke mir später, dass dieser Trick wirklich helfen Ihnen eine Menge. Dies sind die beiden Prinzipien, die ich Ihnen wirklich zeigen wollte, dass, wie Sie eine erstellen können, mit einer Farbe, können Sie fantastisch aussehende Farbschemata erstellen, indem Sie dieses Prinzip verwenden. Ich hoffe, Sie haben diese Lektion genossen. Wenn Sie Fragen haben, die Sie mir stellen können. Fahren wir mit der nächsten Lektion fort. 16. So erstellst ich meine Farbschemata: Heute werde ich mit Ihnen meine Perspektive auf den Aufbau eines Farbschemas teilen. Es könnte verschiedene Methoden geben, ein Farbschema zu erstellen, aber so erstelle ich meine Farbschemata. Also werde ich diese Methode mit Ihnen teilen, und in den nächsten Lektionen werden wir Schritt für Schritt behandeln. Ich werde Ihnen meine Adobe XD verschiedene Bildschirme freigeben und zeigen, wie ich tatsächlich weiterhin verschiedene Farben hinzufügen. Das ist meine Methode. Nummer eins ist, dass Sie mit nur einer Farbe beginnen. Sie können diese Farbe aus jeder Markenfarbe auswählen, oder Sie können diese Farbe auf das Thema Ihres Designs auswählen. Wenn Sie beispielsweise eine Sofa-App oder eine Media-App haben, können Sie trotzdem dunkelblaue oder rote Farben verwenden. Wählen Sie also Ihre erste Farbe, und wir werden ein monochromatisches Schema erstellen. Sie können verschiedene Schattierungen und Tönungen, verschiedene Spuren sehen. Diese sind alle von der gleichen Farbe ändern Sättigung und Helligkeit. Das ist immer mein erster Schritt. So fange ich eigentlich an, mein Farbschema zu erstellen. Also begann ich mit diesem Farbton hier auf der linken Seite, dann habe ich Schatten, Tönung, ein paar weitere Schattierungen, drei Töne, Tönung und einen weiteren Farbton , der der gleiche Farbton ist, aber es hat eine Menge Sättigung. Eigentlich können Sie sagen, aufmerksamkeitsgrabbing blaue Farbe. So hat es mehr Sättigung, dieses Blau. Ich liebe es wirklich. Das ist eigentlich, man kann sagen, der Baum meines Farbschemas. So fange ich an, mein Farbschema zu experimentieren und zu bauen. Sie müssen also damit experimentieren, versuchen, wenige Töne, Schattierungen und Tönungen zu erstellen. Jetzt ist der dritte Schritt, ich versuche, eine kontrastierende Farbe hinzuzufügen. Also haben wir bereits verschiedene Schattierungen und Töne dieses Blaus gebaut, jetzt werden wir eine entgegengesetzte Farbe hinzufügen, die eine kontrastierende Farbe ist, und die entgegengesetzte Farbe auf dem Farbrad ist eigentlich orange für das Blau. Sie können sehen, dass ich hier eine Kontrastfarbe hinzugefügt habe. Wenn Sie genau hinsehen, können Sie noch eine Sache sehen, dass auf jeder Farbe hier gibt es verschiedene Farben, die funktionieren werden. Zum Beispiel wird es auf einer dunklen Farbe eine hellweiße Farbe arbeiten, dann brauchen wir eine dunkle Farbe. Also sind wir tatsächlich experimentieren auf diese Farben und sehen, welche mehr Kontrast hat und welche leicht gelesen werden kann. Versuchen Sie, Farben zu verwenden, die einen guten Kontrast auf verschiedenen Hintergründen haben. Nun, mein letzter Schritt. Wann immer ich aufhöre, mein Farbschema zu erstellen, zum Beispiel, wenn Sie eine mobile App oder unser Dashboard entwerfen, benötigen Sie einige weitere Farben, wie Sie auf der rechten Seite sehen können, haben wir Statusfarben. Also füge ich tatsächlich verschiedene Statusfarben für Informationen hinzu, für Fehler, für Erfolgsmeldungen, kann für einige Updates sein. Sie können sehen, dass einer von ihnen blau ist. Dies ist zum Beispiel, wenn ich ein Update oder ein Software-Update oder vielleicht ein Wert-Update habe, möchte ich nicht, dass es ein Fehler oder so etwas ist. Ich möchte, dass es sehr ruhig ist, blaue Farbe. Ich habe hier drüben einen Farbton benutzt, um meinen Status zu zeigen. Unsere Tönung, können Sie die Tönung für die Statusmeldung verwenden. Sie können eine gelbe Nachricht verwenden, zum Beispiel möchte ich dem Benutzer zeigen, dass dieser Wert, Sie müssen es aktualisieren. Es ist für fünf Minuten Wert, also müssen Sie es aktualisieren, also werde ich diese gelbe Farbe greifen und diese Nachricht zeigen. Ähnlich für Fehler werde ich etwas Rot verwenden, und auch für das Grün werde ich für den Erfolg verwenden. Der Trick ist, dass Sie diese Farben und diese gelb, blau und rot, und grün, die tatsächlich gehen, um zu arbeiten und sehen gut auf diese Farben. Sie müssen sich gut kombinieren. Manchmal fängt man an, Farbe zufällig zu wählen, also ist dies kein Trick, Sie müssen das nicht zufällig tun. Ich werde Ihnen zeigen, wie es tatsächlich in den nächsten Lektionen Schritt für Schritt gemacht wird, damit Sie sich keine Sorgen darüber machen müssen. Fahren wir mit der nächsten Lektion fort. Wenn Sie Fragen zum Aufbau dieser Farbschema Methode von mir haben, können Sie mich immer fragen. Fahren wir mit der nächsten Lektion fort. 17. So sammelst du deine erste Farbe: Wann immer Sie anfangen, ein Farbschema zu erstellen, ist das erste, was Sie anfangen sollen. Ich habe viele Designer gesehen, die neue Designer sind oder nicht viel Erfahrung im Design haben. Der erste Fehler, den sie tun, ist, dass sie nicht wissen, wo sie ihre Entwürfe beginnen sollen. Sie können sehen, dass sie ein wenig verwirrt sind, wo wir anfangen sollten, welche Farbe wir wählen sollten. Ich werde Ihnen das vereinfachen und ich werde Ihnen zwei Anfänge zeigen, die Sie tun können. Der erste Start ist, dass, wenn Sie mit einem Design beginnen, suchen Sie nach seiner Marke. Wenn es zu einer bereits gebauten Marke gehört, haben sie vielleicht eine rote Farbe in ihrem Logo oder vielleicht haben sie eine gelbe Farbe in ihrem Logo wie McDonald's. Sie können von dort aus ihre Markenfarbe abholen und von dort aus beginnen. Die zweite Option ist, dass Sie mit Ihrem eigenen Selbst beginnen. Zum Beispiel, wenn ich ein Design bauen möchte könnte ich mit einer blauen Farbe beginnen, weil es sicher ist, und zweitens ist, dass es von Männern und Frauen beide gemocht wird. So blau ist ein bisschen sichere Farbe. Deshalb sehen Sie viele blaue Farben, auch Sie können in dieser Schnittstelle dieses „Adobe X“ sehen , ist der Share-Button blau. Dies ist eine sehr sichere Farbe. Fangen Sie mit Blau an und gehen Sie von dort. Jetzt werde ich Ihnen einige Beispiele zeigen, wie ich tatsächlich ein Farbschema erstellt habe, und wir werden jetzt ein monochromatisches Farbschema erstellen , indem wir diese blaue Farbe verwenden. Zuerst werde ich Ihnen das Beispiel zeigen. Hier ist „smart sofa app“ von einem Markennamen ROM, R-O-M. Es ist ein europäisches Unternehmen und hat Niederlassungen in Großbritannien, Deutschland und in ganz Europa. Als ich diese App gestartet habe, habe ich kein Konzept oder irgendeine Vorstellung von ihrem Farbschema hinzugefügt. Sie können sehen, ich benutze einige orange-gelbe und sehr dunkelblaue Farbe, die nahe an Schwarz und dieses Rot ist. Auch dieser grüne. Meine Hauptfarbe ist dieses dunkelblau, dieses rot und dieses orange oder gelblich, es ist eher eine gelbe Farbe. Außerdem würden Sie hier drüben ein paar langweilige Browns sehen, hier drüben sehr langweilig graubraun, dann haben wir sehr dunkelbraun darin. Sehen Sie sich Video an, lesen Sie Text. Das ist ein Mischer. Also tippen Sie auf den Umschalter. Wenn ich hier tippe, es zwischen zwei Bildschirmen zu wechseln, dann sehen Sie vielleicht ein bisschen grün hier drüben, was im Grunde unser Status Farben ist. Jedenfalls, wenn Sie genau hinsehen, lassen Sie mich hineinzoomen. Wenn man genau hinschaut, sind das wieder dunkelbraune Texte hier drüben. Wenn Sie hier rüber schauen, ist diese Farbe eigentlich dunkel bläulich lila. Dann haben wir dieses Mini-Sofa, meine Sofas, es ist eigentlich gräulich, bläulich, matt braune Farben. Es ist weniger braun, stumpfe gräuliche blaue Farbe. So habe ich das tatsächlich erstellt, so dass Sie sehen können, dass dies Dab Bar [phonetisch] ist und wenn jemand darauf klickt, gibt es ein Highlight für dieses Symbol. Es ist eine dunkelblaue Farbe. Ich werde Ihnen zeigen, wie tatsächlich ich es geschafft habe, dieses Farbschema mit dieser App zu bekommen und ich habe viele Bildschirme für diese eine erstellt, die Sie hier sehen können. In ähnlicher Weise können Sie sehen, es gibt nur wenige Optionen hier für verschiedene mehr Funktionalitäten wie diese Schiebeleiste. Wir haben dunkelblau hier drüben für die Füllung. Diese grünliche Farbe für einige Status, diese dunkelrote, sehr scharfe rote Farbe, maroonlich-rote Farbe. Wir gehen auf ihre Website; eigentlich habe ich diese Farben von ihrer Marke ausgewählt. Okay, hier ist also die eigentliche Marke. Es wird ROM genannt. Wenn Sie sich alle Sofas und das ganze Team ihrer Fotoshootings und Sofas und ihre Farben genau ansehen , werden Sie Ähnlichkeiten in dem sehen, was ich in meiner App verwendet habe. Ich wählte eine Farbe von hier, diese starke Farbe, die ihre rote Farbe ist. Dann wählte ich andere Farben aus diesen Bildern; Sie können sehen, ihre Sofas haben eine sehr dunkle bläuliche Farbe. Dies habe ich in meinem Farbschema verwendet. Sie können diese Brauntöne sehen, stumpfes Braun bräunlich graue Farben, die ich von diesem Bild ausgewählt habe. Das ist wieder dunkel grau, und wir sehen hier im Bild ein paar Noten von Gelb und Orange. Ich denke, dass diese gut zusammen passen, weil sie in dieser Innenarchitektur gut aussehen. Sie werden auch in der App gut aussehen. Diese dunkelblau ist eigentlich gehen toll mit diesem rot, es ist im Grunde eine Triade Farbschema, rot, blau und gelb. Sie können hier die Noten von Gelb in diesem Bild sehen. Sie sehen toll aus mit dieser langweiligen dunkelgrauen Farbe. So habe ich eigentlich angefangen. Ich begann mit dieser Farbe und ich wählte einige weitere Farben für das Thema, und ich habe sie für verschiedene Zwecke verwendet. 18. Erstelle deines ersten Farbschemas mit einzelner Farbe: Nun ist die zweite Frage: Wo soll ich anfangen, wenn ich keine Marke habe? Sie können mit jeder Farbe beginnen. Sie können eine Farbe für Ihre Marke wählen. Zum Beispiel, wenn ich Himalaya-Salz habe. Zum Beispiel möchte ich eine Firma gründen, oder vielleicht entwerfe ich für eine grüne Firma, die beschriftet, dass dies eine 100% natürliche oder so etwas ist, könnte ich in Grüns und Gelbtönen mehr gehen. Wenn ich eine Online-App oder etwas entwerfe, das für einige Designer oder eine andere Finanzgruppe online arbeiten wird, könnte ich blau verwenden. Versuchen Sie also, die Farbe auf dem Thema Ihrer App auszuwählen. Zum Beispiel, wenn ich sehr ernste App habe, könnte ich in dunkelkönigsblauen Farben gehen. Das heißt, Sie müssen überlegen. Also für dieses Beispiel werde ich diese Farbe auswählen und ich werde sie replizieren. Jedes Farbschema würde ich sagen, dass Sie mindestens zwei Töne, zwei Schattierungen und zwei Tönungen erstellen . Also werden wir hier zuerst eine sehr dunkle Farbe schaffen. Gehen wir also zur Füllung und gehen in den HSB-Modus. Hier haben wir Helligkeit, lassen Sie uns zuerst einige Tönungen bereits hohe Helligkeit erstellen. Lassen Sie uns etwas weniger Sättigung verwenden. Das sieht also toll aus. Lassen Sie uns noch ein paar weitere erstellen. Lassen Sie es uns auf eine etwas weißlichere Seite bewegen. Also werde ich die Sättigung reduzieren. Also können Sie eigentlich auch hier rüber gehen. Sie können sehen, dass der Farbton gleich bleibt. Also kannst du hier rüber ziehen und nach deinem Gleichnis gehen. Vielleicht will ich eine stumpfe weißliche Farbe, etwas hier drüben. Das sieht also toll aus. Also habe ich zwei Tönungen hier drüben. Sie können sehen, ziehen wir sie hier rüber. Jetzt werde ich ein paar Schattierungen haben, mindestens zwei. Also werde ich ein bisschen dunkel hier drüben gehen und ein bisschen gesättigt in diesem Bereich. Also lasst uns mit dieser Farbe gehen. Es war 201. Also werde ich es 201 behalten. Also sind es nicht 200, 200, es waren 200. Ich glaube, es waren 201, schätze ich. Also 201. Lassen Sie uns alle auf 201 bewegen dann haben wir 201. Lassen Sie uns diesen löschen. Es wird auch 201 sein. Machen wir es zu 100 Prozent das. Also haben wir jetzt vier Farben, lassen Sie uns noch ein paar hinzufügen. Man kann hier ein wenig weniger schweres dunkles Bild sagen. Also werde ich das hier drüben erledigen. Also lass mich dir die Psychologie dahinter erzählen. Also erstelle ich eigentlich zwei dunkle Farbtöne, mindestens zwei Tönungen, und Sie können sehen, dass dies für meinen normalen Text, Absatztext, sein kann. Dies kann für meine Überschriften oder sehr fett Texte sein, die ich wirklich möchte, dass die Benutzer Aufmerksamkeit erregen. Für diese habe ich helle Farben, so dass sie zusammen auf diesen dunklen Bildschirmen arbeiten können. In ähnlicher Weise werden wir noch wenige mehr haben. Fügen wir hier noch eins hinzu, zwei weitere. Dann brauchen wir etwas dazwischen, so etwas, vielleicht für Grenzen oder so etwas. Lassen Sie uns noch einen hinzufügen. Es ist also etwas dunkler. Das sind 20. So können Sie sehen, dass wir eigentlich drei Ebenen haben. Dies ist eigentlich mittlere Ebene oder Töne. Dann haben wir sehr dunkle und sehr helle Farben. Also begannen wir mit dieser Grundfarbe, und wir haben daraus mindestens sechs Farben erstellt. Das ist also Ihr tatsächliches Farbschema und sie müssen mindestens diese Farben sein, um ein großartiges Farbschema zu erhalten. So können Sie hier sehen, ist ein Beispiel für die Anwendung dieser Farbschemata. Sie können sehen, wie es mir tatsächlich gelungen ist, das zu tun. Dies ist eine sehr dunkle Farbe. Das ist eigentlich ein scharfes Blau. Lassen Sie mich rauszoomen. So ist es ein sehr scharfes Blau. Ich denke, es ist fast das gleiche, was diese Farbe ist. Dann können Sie auf diesem Hintergrund sehen, dass ich sehr dunkle Farbe verwende. Also das geht eigentlich zurück zu der Grundstunde wo ich Ihnen gesagt habe, dass sehr helle Schattierungen auf sehr dunkel. So werden sie eine Menge Kontrast bekommen. Ähnlich breit auf diese sieht gut aus. Ich kann es leicht lesen. Hier haben wir etwas dunkelbraun, sorry, sie sind nicht braun. Sie sind eigentlich, Sie können sehen, dies ist sehr langweilig Farbe und es ist fast sühnt. So gräulicher Ton, lassen Sie mich Ihnen die Symbole unten zeigen. Also hier haben wir dumpfen bläulichen Ton von dieser gleichen blauen Farbe. Für das Highlight verwende ich unser primäres Blau. Also das ist eigentlich unsere Akzentfarbe, oder Sie können sagen, die knallende Farbe, diese. Wenn Sie eine schärfere machen wollen, so werden wir es hier über ziehen und wenn Sie eine schärfere Farbe wollen, werden Sie die Sättigung hier zu erhöhen. So haben wir schärfere Version der gleichen Farbe. Also, wenn Sie so etwas verwenden wollen, können Sie diese schärfere Farbe verwenden, wie ich es hier verwendet habe, 961 Bonuspunkte hier drüben. Wenn wir hier rüber gehen, so können Sie sehen, gibt es viele Sorten oder viele Dinge, die Sie mit dem gleichen Farbschema tun können. So können Sie hier sehen, ich habe wie 1, 2, 3, 4, Farbschemata, zwei dunkle und zwei helle Themen. Ich benutze die gleichen Farben. Sie können also sehen, dass ich die gleichen Farben verwende. Hier habe ich sehr dunklen Hintergrund und ich habe das Farbschema von diesem, meinem hellen Hintergrund umgekehrt. So können Sie hier sehen, wir haben die neuesten Bestellungen. Es ist sehr blass gräuliche Farbe, so dass es nicht herausspringt. Ich will nicht zu viel Aufmerksamkeit auf das hier bekommen. In ähnlicher Weise möchte ich Aufmerksamkeit in diesem Bereich, also habe ich sehr helle und dunkle Farbtöne. Ähnlich für diese Schaltfläche ist es unsere primäre Taste oder Hauptaktionstaste auf dem Bildschirm. Es ist also eine Menge großer Aufmerksamkeit. In ähnlicher Weise hat dieser Primärblau. So können Sie sehen, dass diese Blues tatsächlich aufmerksamkeitsgrabbing Farben auf diesem schwarzen oder dunklen Hintergrund sind. Es ist eigentlich nicht schwarz, ist sehr dunkelblau. Also werde ich Ihnen diese Akte geben. Wenn Sie es sich ansehen wollen, können Sie es sich ansehen, aber ich habe Ihnen bereits gezeigt, wie Sie tatsächlich anfangen können und Sie werden mir dafür danken, weil es Ihr Leben sehr einfacher machen wird , weil Sie einfach erstellen Sie ein beliebiges Farbschema mit nur einer Farbe. Sie brauchen nicht zwei, drei oder vier Farben. Ich hoffe, Sie haben diese Lektion genossen. Wenn Sie Fragen haben, fragen Sie mich. Fahren wir mit der nächsten Lektion fort. 19. 2. Projekt monochromatisches Farbschemata: Jetzt ist die Zeit für Ihre andere Aufgabe und die Schaffung monochromatisches Farbschema. Sie haben gesehen, wie ich ein monochromatisches Farbschema mit nur einer blauen Farbe erstellt habe. Hier ist der Auftrag. Swish ist eine Prototyping-App für Designer. Erstellen Sie ein monochromatisches Farbschema, das für dieses Unternehmen funktioniert. Sie werden auch einen Anmeldebildschirm erstellen und dieses Farbschema auf diesen Anmeldebildschirm anwenden , und Sie werden beide einreichen. Zusammen mit Ihrem Farbschema und dem Bildschirm. Ich werde dir zeigen, wie ich will, dass es aussieht. Hier, wie ihr sehen könnt, ist ein Beispiel dafür, was ich eigentlich von euch will. Dies ist ein Anmeldebildschirm, vergessen Sie Ihr Passwort oder was auch immer, Sie können einfach einen mobilen App-Bildschirm jetzt entwerfen, das ist nur meine Ressourcendatei. Sie werden ein Farbschema auf der linken Seite wie dieses erstellen, es wird monochromatisch sein. Es könnte nicht grün sein und es so zu mir einreichen. Das ist Ihre erste Aufgabe, die ich sehe , um Ihren Auftrag zu sehen. Lasst uns anfangen. 20. Zweite Farbe für den Kontrast hinzufügen: Jetzt werden wir den zweiten Schritt in jedem Farbschema machen. Der erste Schritt war, dass wir gerade ein monochromatisches Schema erstellt haben. Jetzt werden wir unserem Farbschema eine weitere Farbe hinzufügen. Um dies zu tun, werden wir unsere Grundfarbe auswählen, und ich werde seinen hexadezimalen Wert, Befehl C, und wir werden einige der Online-Tools verwenden, um unsere zweite Farbe zu greifen. Es gibt viele Werkzeuge da draußen. Ich werde mit euch drei oder vier teilen. Jetzt werde ich diese Kühler oder Coolors.co verwenden. Eigentlich, klicken Sie auf diesen „Generator“, und lassen Sie uns sehen, wo wir hingehen. Das erste, was ich tun werde, ist, dass ich das bearbeiten und das hier als meinen Wert kopieren werde, und ich werde es sperren. Klicken Sie auf diese „Sperre“. Ich nannte es sperren diese Farbe. Wir werden unsere „Leertaste“ drücken, um noch ein paar Farben zu erhalten. Hier, wie Sie sehen können, haben wir einige weitere Farben, und Sie können beliebige Farben auswählen, die Sie von hier aus wünschen und sperren. Aber im Moment bin ich auf der Suche nach einer lebendigeren Farbe anstatt dieser sehr langweiligen Farben. Was ich tun werde, ist, dass ich meine „Leertaste“ drücken werde, bis ich die Farbe habe, die ich will. Einige orange Farbe sind sehr scharf; orange Farbe, die mit dieser blauen Farbe gemischt werden kann. Warum ist das so? Weil Sie sehen können, wenn wir zu dieser Farbversorgung App gehen, ist diese blaue Farbe tatsächlich entgegengesetzt und Komplementärfarbe zu diesem Orange, also bin ich auf der Suche nach einigen Schattierungen von diesen. Entweder kann ich dunkelblau und orange verwenden, oder ich kann etwas hellblau und scharfes Orange verwenden, also das ist, wonach ich suche. Ich habe etwas Farbe näher an dieser hier. Es ist tatsächlich gelblich-orange Farbe. Wenn ich die „Einstellungen“ hier drüben drücken, Ich kann seine Helligkeit erhöhen oder ich kann es Schieberegler bewegen, zum Beispiel, vielleicht ein wollen etwas näher an dieser Orange, und ich kann es dann sperren. Dann werde ich wieder „Leertaste“ drücken. Jetzt können Sie sehen, dass ich mehr Farben bekomme. Ich mag diese gräuliche Farbe wirklich, also habe ich sie tatsächlich gesperrt. Ich mag dieses grüne, also werde ich es auch sperren. So, Sie sehen können, habe ich ein sehr schön aussehendes Farbschema erstellt. Ich habe dunkle Schattierungen. Ich habe ein paar Grüntöne. Ich habe ein paar gelbe Schattierungen. Gelblich-Orange wird wirklich gut mit Blues funktionieren. Das sind eigentlich zwei Blues, eine grüne, eine, ein bisschen, gräuliche Farbe, und diese gelblich-orange. So habe ich dieses Farbschema erstellt und kann es exportieren. Sie können hier klicken und Sie können auf „PNG“ klicken oder auf „SVG“ klicken, und Sie können das in Ihre Grafiksoftware ziehen. Ich werde es so etwas retten. Ein anderer Weg ist, dass ich tatsächlich versucht habe, dies zu verwenden, Adobe Color CC, und ich werde Farben von hier zu greifen. Was ich getan habe, ist, ich habe tatsächlich kopiert, diesen Basisstrom ausgewählt, also ist es eigentlich die Grundfarbe. Ich habe den hexadezimalen Wert hier drüben kopiert. Sie können sehen, dies ist mein Hexadezimalwert für die Grundfarbe. Ich habe von hier aus kostenlose und verschiedene Farbschemata ausgewählt. Wenn Sie es ausprobieren möchten, können Sie so etwas auswählen. Im Moment können Sie sehen, dass dies sehr einfach ist. Basic bedeutet, dass diese Farben nicht sehr gut miteinander aussehen; es gibt einige stumpfe Farben, es gibt einige scharfe Farben. Sie können diese anpassen, den Farbton gleich halten und versuchen, ihn anzupassen. Zum Beispiel, wenn ich so etwas will, gelbe Farbe, und lassen Sie uns dieses Gelb ein wenig hierher bewegen, und diese Orange. Lasst uns das Blau so bewegen. Außerdem werde ich hier ein bisschen dunkler oder langweiliger Schatten verwenden, aber bräunlich, so etwas. Braun. Dieses Pink sieht wirklich, sehr seltsam aus. Wie auch immer, das ist eine andere Möglichkeit, Ihre zweite Farbe zu bekommen. Ich weiß nicht, eigentlich, wie diese Farbschema-App, um das gesamte Farbschema zu erstellen, weil es wird Ihnen eine Menge von verschiedenen seltsamen Farben hier zu bekommen . Zum Beispiel, wenn ich in diese Verbindung gehen möchte, was Sie tun können, ist, dass Sie diese Grundfarben erhalten können, und Sie können mehr Farben erstellen, über die Sie denken, indem Sie verschiedene Töne und Schattierungen und Farbtöne der gleiche Farbe, also versuchen Sie nicht, die gleichen Farben zu verwenden oder zu kopieren, die dieses Farbrad tatsächlich erzeugt. Eine weitere Sache ist, normalerweise tue ich, ist, dass ich tatsächlich zu dieser Erkundung gehe und ich suche, zum Beispiel, wenn ich ein Blau, Orange, so etwas habe, werde ich hier drüben auswählen. Sie können sehen, ich mag dieses Farbschema wirklich. Es ist sehr näher an dem, wonach ich suche. Ich kann es herunterladen, ich kann es speichern. In ähnlicher Weise sieht dieser wirklich gut aus: Blau und Orangen. Ich mag diese zwei oder drei. Die Farbschemata, ich werde alle von ihnen herunterladen, und ich werde sehen, welche Farben in meiner App gut aussehen werden. Wenn Sie auf der Suche nach Grün und Orange sind, können Sie sehen, dass wir verschiedene Farbschemata haben. Sie können Ihr Farbschema starten, indem Sie ein anderes Farbschema auswählen und versuchen, ein wenig Farbtöne zu ändern und es auf Ihre eigenen Bedürfnisse abzustimmen. So wähle ich eigentlich meine zweite Farbe aus oder füge meinem Farbschema weitere Farben hinzu. Jetzt werde ich diese Farbschema-Editoren öffnen. Sie können den Füll-Editor sehen. Ich werde es runterziehen. Dies ist ein weiterer Trick, den ich tatsächlich viel benutze, dass ich die Farbe in der gleichen Position halte und mich hier drüben bewege. In diesem Farbrad, eigentlich ging ich zu dieser orange Farbe, und ich denke, ich mag es dort toll aussehen zusammen, also werde ich diese orange Farbe hier zu halten. Lassen Sie mich Ihnen ein Beispiel dafür zeigen, wie ich es tatsächlich benutzt habe, weil dies unsere sekundäre Farbaktion sein wird. Sie können auf diesem Bildschirm sehen, wir haben blau, aber Sie können sagen, für die Hervorhebung unserer Tab-Leiste und nicht für unsere wichtigsten primären Aktionen. Es gibt eigentlich zwei Arten von Aufmerksamkeitsgrabbing-Knöpfen. Eine ist primär, die unsere Hauptaktion ist, die wir wollen, dass unsere Benutzer auf diesem Bildschirm nehmen. Sekundäre Aktion, die tatsächlich ein hervorgehobenes oder ausgewähltes Element oder so etwas ist. Sie können hier und hier sehen, ich benutze orange Farbe für den ausgewählten Artikel. Für meine primäre Aktion verwende ich meine blaue Farbe. Ähnlich hier drüben ist das wieder dasselbe, und das ist wieder dasselbe. Sie können sehen, ich mische nicht beide Farben gleichzeitig miteinander. Hier, wie Sie sehen können, habe ich tatsächlich eine dunkelbläuliche graue Farbe hier drüben verwendet , um diesen Listeneintrag hier zu zeigen. So versuchen Sie tatsächlich, eine weitere Farbe oder mehrere Farben zu Ihrem Farbschema hinzuzufügen. Ich denke, dass zwei Farben mehr als genug für jede Art von Farbschema sind , um jede App, jedes Dashboard oder jede Website zu erstellen . Andere Farben, die Sie benötigen, sind Statusfarben, über die wir in der nächsten Lektion sprechen werden. Im Moment würde ich bei diesen beiden Farben bleiben. Eine Farbe werde ich wählen, und ich werde verschiedene Tönungen und Schattierungen dieser Farbe erstellen. Die zweite Farbe wird für meine Akzentfarbe oder primäre Aktion sein, und ich werde nicht mehr Schattierungen davon erstellen. Dies wird Ihr, Sie können sagen, Mantra Ihrer Farbschemata sein. Versuchen Sie nicht, Schattierungen und Farbtöne von beiden Farben zu erstellen. Versuchen Sie, eine Farbe zu verwenden und Tönungen und Schattierungen dieser zu erstellen, so dass ich meinen zweiten Schritt mache oder meine zweiten Farb- und Farbschemata auswählen kann. Ich hoffe, Sie haben diese Lektion genossen. Wenn Sie Fragen haben, fragen Sie mich. Treffen wir uns in der nächsten Lektion. 21. Status in UI-Design: Jetzt, im letzten Schritt, werden wir über die Statusmeldungen sprechen. Dies ist eine digitale Wallet-App, die Ihren Bitcoin oder den gesamten Währungswert anzeigt. Diese Apps oder Dashboards, in denen wir viele Daten oder so etwas sehen, brauchen wir eine Menge Statusmeldungen. Zum Beispiel haben wir hier den Bildschirm. Die Bildschirmfarbe, die besagt, dass wir etwas Gewinn haben oder unsere Werte steigen. Ähnlich in diesem Bitcoin, sein Wert wurde um 22,8 Prozent erhöht, ähnlich für diese. Wir haben mindestens drei Statusmeldungen. Einer ist Erfolg oder vielleicht nimmt etwas zu, einer ist etwas abnimmt, und der dritte ist eigentlich so. Zum Beispiel möchte ich ein Update. Dieser Wert kann beispielsweise von vorherigen, drei Minuten oder fünf Minuten stammen. Ich möchte, dass der Benutzer dieses Update jetzt drückt, um den neuesten Wert zu erhalten. Das wird eigentlich mein Informationstext sein. Drei Farben, wir brauchen mehr für dieses Farbschema. Wir haben diese Übung bereits gemacht. Wir haben dieses Farbschema mit nur einer blauen Farbe erstellt, und jetzt sind dies alle verschiedene Variationen. Wenn Sie hier genau hinsehen, können Sie sehen, wie all diese Farben angelegt wurden. Diese dunkelste Farbe ist für den wichtigsten Wert. Dann haben wir diese blasse bläuliche Farbe. Wir wollen, dass es auf diesem bläulichen Hintergrund gut lesbar oder lesbar ist. Dieser sehr helle, bläuliche blasse Hintergrund, wir wollen, dass es sehr leichter zu lesen ist. Wenn Sie genau auf diesem Bildschirm hinsehen, können Sie diese 1,5 oder diese dunkelrote Farbe sehen, es ist leicht lesbar. Wenn Sie hier zu diesem Wert gehen, gehen wir zu diesem HSB. Es ist 73 Prozent Sättigung, sehr hohe Sättigung und 85 Prozent der Helligkeit. Wenn Sie mehr dunklere Farbe wollen, können Sie dunkler werden, aber ich denke, es ist wirklich sichtbar jetzt. Ähnlich, hier drüben, dieses Grün tatsächlich auf diesem schwarzen Hintergrund, dieser Bildschirm und dieser Bildschirm ist anders. Warum ist das? Denn bei einem hellen Thema brauchen wir ein bisschen dunklere Farbe und auf dunkleren Schattierungen oder blassen Hintergründen oder dunklen Farben, brauchen wir eine Farbe, die mehr Leuchtdichte hat, mehr Licht emittiert. Wir wollen, dass es anders ist als der Hintergrund. Sie können sehen, dieser Hintergrund ist blau, sehr langweilig. Diese Farbe ist eigentlich, lassen Sie mich es Ihnen zeigen. Es hat 98 Prozent Sättigung und 90 Prozent Helligkeit, so sehr helle, sehr stark gesättigte Farbe. Wenn Sie hier rüber schauen, hat diese Farbe den gleichen Farbton, 148, aber sie hat tatsächlich 98 Prozent Sättigung, aber die Helligkeit beträgt 70 Prozent. Sie müssen Ihren Designer Kopf verwenden. Sie müssen sich nicht an die Farben halten, die diese Farbe auf jedem Hintergrund gut funktionieren wird. Versuchen Sie, Ihren Kopf zu benutzen. Diese Farbe hier drüben, wenn man es ansieht, ist es eigentlich 20 Prozent Sättigung und 61 Prozent Helligkeit. Aber wenn man sich diese Farbe anschaut, ist es 7 Prozent gesättigt und 60 Prozent Helligkeit. Eigentlich benutze ich hier eine sehr graue Farbe , weil der Hintergrund schon sehr dunkel ist. Ich muss etwas anderes haben. Dieses Farbschema, obwohl es aussieht, als wäre es die Lite-Version dieses Farbschemas, aber sie sind anders. Wenn man sich diese Farbe hier anschaut, scheint es ein bisschen sehr scharf zu sein, und ich denke, wir müssen sie etwas leichter machen. Lassen Sie uns 100 hier rüber bringen. Sieht gut aus. Lassen Sie uns die Helligkeit reduzieren und ich werde einen Ort hier rüber gehen. Ich werde es jetzt hinzufügen. Auch für diesen hier. Stellen Sie sicher, dass diese gut sichtbar sind und sie einen guten Kontrast zum Hintergrund haben. Wir werden später über die Farbzugänglichkeit sprechen. Aber im Moment möchte ich diese einfache Regel greifen, dass wir anders mehr Kontrast brauchen wenn Sie eine gewisse Berechtigung in Ihren Farben haben wollen. Vielleicht etwas hier drüben. Es ist sehr scharf oder vibrierend. Ich werde es hier drüben reduzieren, irgendwo. Vielleicht irgendwo. Ich möchte, dass es ein bisschen leichter wird, mehr Helligkeit hat. Ich werde die Spitze hier drüben berühren. Lassen Sie uns diese Farbe versuchen. Sie sehen sehr ähnlich aus, aber sie sind nicht ähnlich. Das sieht toll aus. Hier können Sie sehen, dass dies ein sehr dunkler Farbton der gleichen Farbe ist. Es hat 73 Prozent Sättigung und 85 Prozent Helligkeit. Wenn Sie dunkler werden wollen, können Sie hier 80 Prozent drücken, und auch für diesen 80 Prozent hier drüben. Warum ich 80 Prozent Helligkeit verwende, weil der Hintergrund völlig weiß ist. Hintergrund ist voll hell und es ist zu 100 Prozent, also benutze ich Licht. 20 Prozent Unterschied, wenn Sie sich an die Regel erinnern, habe ich Ihnen gezeigt, dass ich 100 Prozent für diese hier verwende. Entschuldigung. Also 80 Prozent Helligkeit für dieses und das ist eigentlich weiß, so ist es 100 Prozent Helligkeit. Die Differenz von 80 und 100 beträgt tatsächlich 20 Prozent. Stellen Sie sicher, dass Sie einen guten Unterschied zwischen diesen beiden haben. Mal sehen, was wir hier haben. Hier haben wir 70 Prozent und es sind 100 Prozent, 70, 100, 70, 100. Ähnlich, wenn wir hier rüber schauen, lassen Sie uns diesen Hintergrund nehmen. Es hat 31 Prozent Helligkeit, und dieser hat 100 Prozent Helligkeit. Das ist gut. Dies ist eigentlich das ganze Farbschema. Hier ist das Farbschema ein bisschen anders, weil wir hier hellen Hintergrund haben, wir haben dunklen Hintergrund. Schauen Sie sich diese digitale Brieftasche Text. Es ist ein bisschen dunkler, dumpfer Blauton. Hier haben wir ein bisschen leichter, eine hellere Version davon. Weil wir dunklere Hintergründe haben. müssen Sie im Hinterkopf behalten. In ähnlicher Weise haben wir hier einige gräuliche Blues, und hier haben wir gräuliche Blues, aber sie sind ein bisschen heller in der Natur. So sind sie nicht langweilig. Wenn Sie ein Farbschema erstellen, müssen Sie einige Statusmeldungen wie diese haben. Der Trick, diese zu erstellen, ist sehr einfach. Lassen Sie mich es Ihnen zeigen. Lasst uns diese Farbe hier schnappen. Bewegen Sie es nach draußen, machen Sie es etwas größer. Hier ist unsere Grundfarbe. Lassen Sie uns es replizieren und ich werde Ihnen einen Trick zeigen, um zum Beispiel rote Farbe zu erstellen. Wir haben diese Farbe. Was ich tun werde, ist, ich werde in dieses Grün gehen. Jetzt haben wir den grünen Farbton. Wir können uns bewegen und vielleicht können wir so etwas haben. Der Farbton ist gleich, ich habe gerade die Sättigung und Helligkeit geändert. Also haben wir grüne Farbe. Lassen Sie uns eine weitere Farbe hinzufügen, die unser Gelb sein wird. Ich werde zu dieser gelben Farbe gehen, aber Sie können sehen, dass wir dieses Gelb nicht brauchen, wir brauchen ein bisschen heller, gelb, vielleicht etwas hier drüben. Im Moment sieht es nicht sehr gut aus, weil es auf einem grauen Hintergrund ist. Wenn Sie es auf einen dunkelschwarzen Hintergrund stellen, sieht es vielleicht besser aus, aber Sie müssen damit experimentieren. Wenn Ihnen diese Farbe nicht gefällt, können Sie sie ändern. Lassen Sie uns hier rote Farbe hinzufügen. Ich werde zu diesem roten gehen, oder vielleicht das oder das, was auch immer Koordinate Sie wollen. Ich werde mit etwas von dieser rosa-roten Farbe gehen. Lass es uns etwas dunkel machen. Ich versuche, die Luminanz dieser Farben zu ändern, ich versuche, sie anzupassen. Diese Farbe, diese Farbe und diese Farbe, sie sehen fast gleich aus. Blaue Farbe ist immer dunkler. Wenn ich es ändern möchte, kann ich es so ändern. Das sieht auch toll aus. Ich werde noch eins für dieses Gelb schaffen, weil es mir nicht gefällt. Ich will, dass so etwas sein wird. Dieser sieht mir besser aus. Sie können diese Farben ausprobieren und dann können Sie beginnen, sie hinzuzufügen oder sie zu fixieren. Im Moment haben wir dieses Gelb, das 50 Farbton, 27 und 100 ist. Es ist mehr in Richtung ein bisschen orange Farbe. Im Moment habe ich dieses ausgewählt, das 63 ist. Wenn Sie näher an diese gehen wollen, werde ich mit diesen 50, 52 gehen , und ich werde meine Helligkeit ein bisschen mehr erhöhen. Dies ist die Farbe, die wir für unsere Statusmeldungen benötigen. Dies ist eine sehr einfache Technik, um Farben zu erstellen, die wir gehen um unsere Grundfarbe wählen und bewegen Sie nur diesen Schieberegler in rot, grün, und gelb oder orange. Das wird sich um all diese Probleme kümmern , die wir haben, wenn wir Farbschemata erstellen. Eine weitere Sache, die Sie beachten müssen, ist, dass, welcher Artikel wird hervorheben und welcher Artikel wird abgerechnet? Das ist sehr wichtig. Einige Dinge sind nicht wichtig, wie andere Elemente auf dem Bildschirm. Dieser Text ist sehr wichtig. Diese Meldung, dass es zunimmt oder abnimmt. Das ist sehr wichtig. Dies ist nur in Informationen, digitale Brieftasche. Niemand wird es zuerst ansehen. In ähnlicher Weise wollen wir, dass es ein subtiler Effekt ist. Wir wollen nicht, dass es die Aufmerksamkeit erregt. Versuchen Sie nicht, alle Aufmerksamkeit erregenden Farben auf Ihrem Bildschirm zu verwenden. Das ist, man kann sagen, katastrophal. Ich habe viele Anfänger oder Anfänger Designer gesehen, dass sie dazu neigen alle Aufmerksamkeit greifen Bildschirmfarben überall auf dem Platz zu verwenden, und dies wird den Zweck des Informationsdesigns ruinieren. Eigentlich entwerfen wir, dass Informationen so angezeigt werden. Denken Sie daran, und ich werde all diese Dateien mit Ihnen teilen. Sie sind eigentlich Adobe XD-Datei, vielleicht ein, zwei Maßstab. Vielleicht einige Skizzendateien, ich werde das auch in meinen Kurs aufnehmen. Wenn Sie Fragen haben, die Sie mir in dieser Lektion stellen können, wir die Statusfarben hinzugefügt, die Sie hier sehen können, und das wird unser Farbschema beenden. Wenn Sie Fragen haben, können Sie mich fragen. Ich werde noch ein paar Tipps und Tricks zu dieser Lektion und diesem Kurs hinzufügen. Bis dahin sehen wir uns bald in der nächsten Lektion. 22. Dashboard: In dieser Lektion werde ich über das Dashboard-Design sprechen. Nun sind die Farben, die im Dashboard-Design verwendet werden , können Sie ein wenig anders als Ihr normales Webdesign, oder Ihr normales Logo-Design oder Branding Design sehen. Wann immer Sie Dashboard oder einige Grafiken oder so etwas entwerfen . Wenn Sie also viele Informationen auf kleinem Raum anzeigen möchten, benötigen Sie viele Farben. Warum? Da wir verschiedene Updates haben, haben wir verschiedene Fehlermeldungen, wir haben verschiedene Informationsmeldungen, wir haben verschiedene Glockensymbole, wo wir neue und kommende Updates haben oder einige Hinweise darauf, dass etwas geändert. Vielleicht bin ich offline oder online, also gibt es einen anderen Status, dass dieser Benutzer online oder offline ist. Eigentlich gibt es etwa fünf oder sechs verschiedene Zustände. Wenn Sie nun einen Messenger oder so etwas verwenden, haben Sie vielleicht gesehen, dass die Aktualisierungen auf der rechten Seite, das Datum und die Uhrzeit, an der ich diese Person nachrichtete, zu diesem Zeitpunkt oder ob er meine Nachricht gesehen hat oder nicht, wenn er meine Nachricht gelesen hat oder ob er tippt oder nicht. Dies sind, ich denke, wie fünf oder sechs verschiedene Statusmeldungen für jedes Dashboard-Design. Ich werde Ihnen zeigen, wie Sie ein Farbschema verwenden können , das all diese Probleme begegnen kann, und auch, Sie müssen eine weitere Sache betrachten, die Zugänglichkeit oder richtigen Kontrast Ihrer Farben ist. Wir werden uns eingraben, also lasst uns anfangen. Dies ist ein Dashboard, das ich in Adobe XD entworfen habe, und das ist nur ein schnelles Make-up. Ich habe tatsächlich das Design eines anderen kopiert, also nur um zu veranschaulichen, was ich eigentlich meine. Sie können auf der linken Seite sehen, haben wir sehr dunkle Navigation, wo wir alle Navigationselemente haben, verschiedene Abschnitte unseres Dashboards „Posteingang“, „wichtig“. Dann haben wir „Kanäle“, dann gibt es nur wenige Dinge in den Kanälen. Sie sind vier Kanäle, UI-Design, Benutzerfreundlichkeit, Marketing, Support, und Sie können auch einen neuen Kanal erstellen. Dann haben wir Artikel archiviert. Wenn Sie sich dieses Design ansehen, können Sie sehen, dass wir eine andere Hierarchie haben. Auf der linken Seite haben wir verschiedene Kanäle, wie wir vier Kanäle haben. Der erste Status, den Sie hier sehen werden, ist, lassen Sie uns hineinzoomen. Der erste ist diese Auswahl, so dass der ausgewählte Status ist, dass gerade jetzt dieser Kanal ausgewählt wurde, und auf der rechten Seite wird das, was Sie sehen, darauf hingewiesen. Sie können hier den Titel UI-Design sehen, so dass der Kanal, den Sie ausgewählt haben, UI-Design ist. Warum ich diese hellbläuliche Farbe verwende, weil der Hintergrund sehr dunkel ist, also haben wir ein bisschen helleres Farbton des gleichen dunkelblauen auf dem Hintergrund, um als ausgewählte Kanal-Update-Nachricht verwendet zu werden. Ich möchte dem Benutzer zeigen, dass dieser Kanal ausgewählt wurde, also muss es eine klare Möglichkeit geben, das zu zeigen, so dass es sehr wichtig ist. Zweites Update, das Sie hier sehen können, ist, dass ich vier neue Nachrichten im Marketing-Kanal habe. Dafür habe ich eine grüne Farbe verwendet, also basiert dieses ganze Farbschema auf Blau und Grün. Es ist im Grunde analoge Farbschema, wo wir blau und grün haben. Sie sind sehr nahe beieinander, also ist es eigentlich Cianish Green, also ist es eigentlich eine Mischung aus Grün und Blau. Dies ist analoges Farbschema, die Farbschemata, dass die Farben, die näher beieinander sind, sie werden gut zusammenarbeiten. Ich benutze die grünliche Farbe und diese blaue Farbe, und wir haben diesen dunklen Blauton, dann haben wir sehr markantes Blau hier drüben, das sehr scharf blau für Symbole ist, dann ist dieser Kanal eigentlich ein bisschen langweilig blaue Farbe, so dass Sie wissen, die Bohrmaschine, dass dies tatsächlich die gleiche Technik ist, dumpf oder dunkel Kontrast von dunkel und hell, und blass und scharf. So habe ich diesen ganzen Abschnitt erstellt. Jetzt können Sie sehen, jede Farbe hat einen Zweck, so dass Sie hier sehen können, wenn wir in diesem Abschnitt schauen, können Sie diesen neuen Kanal sehen, sorry, dieser neue Kanal ist es eine Schaltfläche, so tatsächlich führt es einige -Aktionen. Es ist Farbe schärfer als alle diese, also sind diese alle weiß und das ist ganz blau zusammen mit diesem Symbol. Nun kommen wir zu dem Punkt, wo wir diese zwei verschiedenen Farben haben, die grün und dieses rot ist. Ich habe Ihnen bereits gesagt, dass wir viel mehr Farben und ein Dashboard-Design benötigen als in jedem Webdesign oder jedem anderen App-Design, weil wir viele Zustände zeigen müssen. Hier haben wir, wieder grün, es ist eine sehr scharfe grüne Farbe. Ich denke, es ist näher an diesem, aber es ist am spezifischsten für diesen Abschnitt hier, nämlich, dass ich online bin oder dieser Benutzer online ist. Dann haben wir dieses Rot, was sehr häufig ist, weil wir bereits diesen Patron in unseren Köpfen eingebaut haben , dass dieses Rot tatsächlich das Update ist, also Glockensymbol Update. Kommen wir zu diesem Abschnitt hier drüben. Hier brauchen wir einen dunkleren Farbton hier drüben auf dem Texttitel, und dann ein wenig dunkelgraue Farbe für den Text. Jetzt können Sie sehen, dass ich dieses Mal gedimmt habe, weil es gerade nicht so oft wichtig ist. Die neueste Nachricht ist unten, also können Sie dieses Timing sagen, eigentlich habe ich versucht, seine Deckkraft zu reduzieren. Lassen Sie mich sehen, ob es Deckkraft ist. Nein, ich benutze eigentlich keine Deckkraft, also ist es tatsächlich Deckkraft. Das ist ein weiterer Trick, den ich dir jetzt in einer anderen Lektion zeigen werde. Stellen Sie einfach sicher, dass Sie die Farben erhalten und wie ich sie anwende und wie ich sie verwende. Dunklerer Farbton, weniger dunkler für den Text, dunkler für den Titel, weniger dunkler für den Text. Wieder können Sie hier sehen hellen Hintergrund für diese Art Box, hell, bläulicher Hintergrund und sehr langweilig, wenn ich an die Grenze hier drüben gehe. Gehen wir an die Grenze. Sie können sehen, wenn Sie sich die Farben hier ansehen, die Füllfarbe, die in der Mitte ist, ist eigentlich, lassen Sie mich es Ihnen zeigen. Verwenden Sie Sättigung und hellste bis 10 Farbton, 5 Prozent Sättigung und 99 Prozent Helligkeit. Aber wenn man sich die Grenze anschaut, ist es fast der gleiche Farbton, aber die Sättigung ist ein bisschen hoch, und die Helligkeit ist ein bisschen niedrig. Es ist nur ein bisschen dunkler Schatten der gleichen „Füllung“, die ich benutze. Sie können sehen, dass dieser Effekt sehr subtil ist, aber es ist bemerkbar, wenn Sie etwas wie diese UIs, oder diese Messenger oder Chat-Box oder so etwas entwerfen . In ähnlicher Weise habe ich den gleichen Effekt auf den Sende-Button angewendet und dieser Text ist ein bisschen dunkler, weil wir viel guten Kontrast mit dem Hintergrund brauchen. Kommen wir zu diesem Punkt hier drüben, was unsere Botschaft hier ist. Der schwierigste Teil, in dem ich nicht in verschiedenen Farben passen konnte, musste ich diese gelbe Farbe mit viel Kampf bekommen. Es ist im Grunde eine gelblich-orange Farbe und es ist im Farbton 51, 8 und 100. Wenn Sie bemerken, dass diese Farbe Textfarbe tatsächlich eine bräunliche Farbe ist, also ist es nicht grau, es ist ein bisschen bräunliche Farbe, weil braun, orange und gelb, sie sind tatsächlich näher beieinander, weil braun tatsächlich die dunklere Version dieser orange und gelb ist sehr hellorange, weißlich, blasse Farbe. So habe ich die Kombination zwischen ihnen gemacht. Das ist das Symbol hier drüben. Es ist auch dunkelbraun. Dieser Text hier drüben ist auch dunkelbraun. Auf der linken Seite habe ich gerade orange Farbe und einen Rand von orange Farbe um ihn herum gelegt, also verhält es sich wie eine separate Sache hier drüben. Wenn jemand es schließen möchte, kann er auf dieses Symbol tippen oder darauf klicken und es entfernen. In ähnlicher Weise haben wir die Suche hier. Dies ist an der obersten Funktion hier drüben. Es gibt nur zwei Funktionen, die getan werden können, ob Sie hier tippen oder hier suchen können. So funktioniert eigentlich das gesamte Farbschema. Scharfe Farbe auf dunklem Hintergrund und matter weißlicher Farbe, das sind vier Kanäle, die Sie hier sehen können. Dann haben wir diesen neuen Kanal sehr helle blaue Farbe für die Aktion hier drüben, und das ist alles. Ich habe versucht, eine andere Variante zu erstellen. Sie können sehen, dies ist ein bisschen hellere blaue Farbe und auch diese neuen Farbkanal Sie sind unterschiedlich. Auch habe ich hier verschiedene Kombinationen von Grün und Blau ausprobiert, also hier ist der Sende-Button eher grün als blau, also lassen Sie uns verkleinern und lassen Sie mich Ihnen beide Farbschemata zeigen. Hier haben wir sie. Vergrößern wir uns. Sie können auf einen Blick sehen, wenn Sie Ihre Augen quetschen, welche Bereiche sehr prominent sind. Diese Schaltfläche „Senden“ ist sehr prominent, wenn Sie es von weit weg betrachten. Auch diese Fehlermeldung oder diese Information ist hier drüben sehr wichtig. Dann können Sie die Farben auf beiden Updates sehen, 0-4-0-4, sie sehen sehr prominent. Sobald Sie Ihr Design verkleinern, werden Sie sehen, was die Dinge wirklich wichtig sind und welches Farbschema gut aussieht. Ich würde für dieses linke Farbschema stimmen , weil man sehen kann, wenn man sich den neuen Kanal anschaut, er ist sehr sichtbar, sehr hell in diesem Bereich hier drüben auf der linken und nicht auf dem rechten Farbschema. Ihre Aufgabe wird im nächsten Abschnitt kommen, um ein Dashboard zu erstellen , oder vielleicht werde ich Ihnen dieses geben, um es für mich zu färben, und das wird Ihre Aufgabe sein. Ich hoffe, Sie haben diese Lektion genossen, dass wir tatsächlich Farbschema für Dashboards anwenden und wie verschiedene Farbschemata auf diesen Arten von Dashboards tatsächlich miteinander übereinstimmen. Wenn Sie Fragen haben, fragen Sie mich. Fahren wir mit der nächsten Lektion fort. 23. Erleichterung, Farbschemata herzustellen: In dieser Lektion werden wir über Color Accessibility sprechen und dies ist sehr wichtiges Thema aus zwei Perspektiven. Wir werden über Farbblindheit sprechen, und wir werden über das Farbkontrastverhältnis sprechen. Dies sind die beiden Dinge, die wichtig werden, wenn Sie mit Farben entwerfen und verschiedene Farben miteinander kontrastieren. Die erste Sache ist, dass wir möchten, dass die Informationen leicht sichtbar, erkennbar und leicht vom Benutzer gelesen werden . Der Kontrast zwischen dem Hintergrund und dem Vordergrund muss gut sein, so dass jeder Benutzer, man kann eine normale Person sagen, er oder sie kann diesen Text leicht lesen. Sie können leicht beurteilen, was geschrieben wird oder was dieser Knopf tut. Hier haben wir das Farbschema, das wir zuvor in früheren Lektionen entworfen haben, und dies ist ein monochromatisches Farbschema, verschiedene Blautöne, und ich mische tatsächlich den dunkleren Farbton mit hellen Farbtönen und dem helle Farbtöne mit dunkleren Farbton. Sie können alle verschiedenen Farben sehen, den geschriebenen Text hier, den Text hier drüben, der auf diesen Farben geschrieben ist, oder über diese Farben, es ist im Grunde aus dem gleichen Farbschema. Die dunkelste Farbe und das Licht, die meisten Farben werden für den Text verwendet, und ich variiere sie auf verschiedenen Hintergründen, und Sie können sehen, dass wir hier unterschiedliche Kontrastverhältnisse haben , also jetzt sprechen wir über Kontrastverhältnis. Ein gutes Kontrastverhältnis liegt über drei. Gerade jetzt, wenn man sich die linke anschaut, die erste Kombination, die eine hellblaue Farbe ist, die diese ist, und dieses Blau, unser Hauptblau, ist es tatsächlich scheitert, also ist das Kontrastverhältnis nicht gut für Text. Auf allen anderen rechten Seite können Sie sehen, dass wir einen guten Kontrast haben. Wir können diese Kombinationen sicher verwenden, aber die erste ist tatsächlich scheitern, also müssen wir das beheben. Nun, ein wenig über das, was eigentlich die Triple-A- und Doppel-A-Farbkontrastverhältnis Standards ist. Triple A ist im Grunde für kleinere Texte, so, es ist sehr guter Kontrast. Wenn Sie einen dreifachen A-Kontrast haben, wie wir hier drüben haben, 7.57 und 8.01. Dies ist eigentlich sehr gute Kontraststufe, und für kleinere Texte, wenn Sie eine mobile App entwerfen und Sie sehr kleine Nachricht und 14 Punkte haben, oder vielleicht 12 Punkte, sehr kleinen Text, möchten Sie, dass es einen guten Kontrast Verhältnis von Triple A. Wenn Sie etwas anderes wie eine sehr große Taste entwerfen, und wir haben wie 18 Punkt Text darauf, dann können wir sicher Doppel A Standard auch verwenden. Dies ist der Unterschied zwischen diesen beiden. Auch für Logos und für die Dinge, die nicht wichtig sind. Wenn die Schaltfläche zum Beispiel deaktiviert ist diese Funktionalität nicht auf Ihrem Bildschirm oder Ihrem Dashboard vorhanden ist, müssen Sie berücksichtigen, dass selbst wenn Ihr Kontrastverhältnis dafür fehlschlägt, es keine Rolle spielt, da Sie immer drei oder zwei Kontrastverhältnis dafür, weil das deaktiviert ist. Der Benutzer wird diese Funktionalität nicht verwenden. Für alles andere, jede drückbare Taste, jedes tippbare Element, jede Dropdown-Navigation oder so etwas, benötigen Sie mindestens einen doppelten A-Standard. Dies sind verschiedene Kontrastverhältnisse, die wir in der nächsten Lektion über verschiedene Werkzeuge, die ich verwende, und wie ich tatsächlich verschiedene Werkzeuge verwende, um diese Kontrastverhältnisse zu erstellen und nach ihnen zu suchen. Dann werden wir auch darüber sprechen, was ein anderes einfaches Werkzeug ist , um Ihre Farbe Zugänglichkeit für farbblinde Menschen zu überprüfen, was das nächste Thema ist. Hier haben wir Farbblindheit, was ist, denke ich sehr häufig Deuteranopie. Das Hauptproblem dabei ist, dass sie möglicherweise nicht zwischen Rot und Grün unterscheiden können. Wann immer Sie für die Farbzugänglichkeit entwerfen, möchten Sie zugängliche Farbschema, dass jeder sehen kann, was passiert. Entweder werden Sie diese Farben mit einigen Symbolen oder Symbolen begleiten, zum Beispiel Fehler, wenn Sie einen Fehler haben. Sie können ein Ausrufezeichen mit Symbol anzeigen, ein Symbol, das dem Benutzer zeigt, dass dies ein Fehler ist. Mit dem Erfolg können Sie auch das Häkchen oder Häkchen anzeigen, damit der Benutzer sehen kann, dass dies tatsächlich die Erfolgsmeldung ist. Eine weitere Sache, wenn Sie diese beiden Farben betrachten, rot und grün, grün ist ein bisschen langweilig oder dunkler Schatten und rot haben mehr Sättigung, mehr Kontrast, mehr Licht emittiert von ihm. Versuchen Sie, auf diese Weise zwischen Rot und Grün zu unterscheiden. Man wird dominanter sein, leuchtender, mehr Licht emittieren, und man wird ein bisschen langweilig sein. Denn wann immer sie dies sehen, werden sie einige blasse, gelblich-orange Farben sehen , beide, und sie werden nicht in der Lage sein, zu unterscheiden, was passiert. Also entweder verwenden Sie Symbole mit diesen oder versuchen Sie, verschiedene Schattierungen zu verwenden , vielleicht können Sie Sättigungsstufen sagen, man wird ein bisschen langweilig, dunkle Farbe sein, man wird eine helle, rote Farbe sein, so etwas. In der nächsten Lektion werde ich Ihnen zeigen, wie ich verschiedene Tools, Online-Tools, um ein barrierefreies Farbschema zu erstellen , das für die meisten Benutzer funktionieren wird, und sie werden kein Problem haben, alles zu lesen, was passiert. Gehen wir mit der nächsten Lektion über und sehen, wie wir zugängliche Farbschemata erstellen können. 24. Tools für Farbschemata: Das erste Werkzeug, das wir über die Zugänglichkeit von Farben diskutieren werden, ist contrast-ratio.com. Ich werde alle Links für diese verschiedenen Websites oder Tools teilen, die ich verwende. Was wir hier tun, ist, dass wir unsere Farben einfügen , wann immer wir das Kontrastverhältnis überprüfen müssen, werden wir überprüfen, indem wir unsere Farben hier drüben einfügen. Wir gehen zu Photoshop, zum Beispiel, ich habe diese Farbe. Ich werde seinen hexadezimalen Wert kopieren und gehen wir zu, wieder hier drüben. Entfernen wir das und fügen Sie es hier drüben ein. Moment mit weißer Farbe hat es ein Kontrastverhältnis von 1,31, was den Standard versagt, also lasst uns das ändern. Wir werden diese Farbe darüber verwenden. Ich werde seinen hexadezimalen Wert greifen, kopieren Sie ihn. Sie können das in Sketch oder jeder Software, die Sie gerade verwenden, ist es für mich möglich, Photoshop zu verwenden. Wir haben das Verhältnis von 7,57, und hier ist es tatsächlich zeigt, wie es aussehen wird, auf diesem Hintergrund. In ähnlicher Weise können wir Farben austauschen, um beide Effekte zu sehen. Sie können sehen, das sieht toll aus 7.57 ist ein dreifaches A, das auch für kleine Texte funktionieren wird. In ähnlicher Weise liebe ich auch dieses Tool, das colorable.jxnblk.com ist und ich weiß es sowieso nicht. Wir werden das auf ähnliche Weise verwenden, und hier werden wir, ich benutze tatsächlich das gleiche Farbschema, das wir hier tatsächlich verbessert haben. Lassen Sie mich Ihnen die nächste Folie zeigen. Sie können hier sehen, diese Farbe tatsächlich habe ich verbessert, und was ich getan habe, ist, dass ich die Helligkeit und auch die Sättigung dieser Farbe erhöht, und tatsächlich habe ich versucht, einen dunkleren Farbton von diesem zu verwenden. Ich habe dunklere Farbtöne verwendet. Ich glaube, es waren 25, so etwas. Lassen Sie uns das kopieren und wir werden es hier einfügen, als unseren Hintergrund, und wir werden diese Farbe als unsere Textfarbe verwenden. Lasst uns das hier benutzen. Wir haben 4,7, also was ich getan habe, ist, dass ich dir hier mit diesen Schiebereglern zeige. Was ich getan habe, ist, dass ich diese Textfarbe etwas dunkler machen wollte. Was ich getan habe, ist, dass ich ein bisschen Sättigung erhöht habe, und wir werden die Leichtigkeit auf hier rüber reduzieren, 0,22 so. Es verringert tatsächlich die Helligkeit, also wenn Sie wollen, können Sie sehen, wann immer ich versuche, die Helligkeit zu verringern, es ist tatsächlich mehr Kontrast. Wenn ich viel Kontrast wie AAA will, können Sie sehen, dass ich den hellsten reduzieren muss, und das wird tatsächlich der Wert hier sein. Sie können auch sehen, dass ich, wenn ich versuche, die Sättigung zu verringern, vielleicht keine sehr gesättigte Farbe wie diese möchte. Ich will, dass es hier drüben irgendwo so ist. So können Sie damit spielen, Sie können die Farben fixieren. Wenn Sie mehr Kontrast zwischen ihnen wollen, können Sie mit Sättigung und Leichtigkeit spielen. Sie können sehen, ob ich versuche, die Leichtigkeit zu erhöhen, es ist AA. Wenn ich unter drei gehen werde, wird es scheitern, okay? Das ist ein weiteres Werkzeug. Drittes Werkzeug, das ich wirklich liebe, ist, dass ich es zufällig hier rüber kriege , contrast-grid.eightshapes.com. Dieses Tool ist wirklich großartig. Lassen Sie mich es Ihnen zeigen. Was eigentlich sie hier tun, ist das sind all die verschiedenen Farben für mein Farbschema. Ich habe Orange, ich habe dunkelblau, ich habe mittelblau, ich habe dunkelgräuliche blaue Farbe für Text. Dies ist wieder für Texte. Dies sind einige weitere helle Farben, helle Blätter und Sie können auf der linken Seite hier, Zeilen und Spalten sehen. Was ich hier mache, ist die erste Spalte und Zeile für F, die weiße Farbe ist. Dann haben wir die nächste Farbe, die F0, F6, FC sein wird , also ist dies wieder eine blasse bläuliche Farbe. Sie können sehen, was es tatsächlich tut, es kreuzt beide Farben und testet alle verschiedenen Textfarben auf verschiedenen Hintergründen. Alle diese Farben werden auf all diesen Farben tatsächlich getestet. Überprüfe alle diese. Sie können sehen, zum Beispiel, wenn Sie hier in diesem Block gehen, ist diese Farbe tatsächlich auf diesem Hintergrund hier drüben, F0, F6, FC, also ist es eine gute Kombination und es zeigt 5.9 Kontrastproblem. Es bedeutet, dass, wenn ich versuche, 546067 mit F0, F6, FC zu mischen , sie gut gehen werden, aber nicht für kleineren Text. Wenn ich für kleinere Text gehen möchte, können Sie sehen, dass ich diese Kombination berücksichtigen muss, die 15303F mit diesem F0, F6 FC ist . Es bedeutet, dass wir etwas mehr Kontrast haben müssen. Diese Kombination hat AAA. Dies schlägt fehl, das schlägt fehl. DNP bedeutet „fehlschlagen“. Es zeigt sich, geht nicht vorbei. Es bedeutet, dass es nicht den Standard AA oder AAA entspricht. In ähnlicher Weise können Sie hier sehen, dass diese Orange fast scheitert auf allen Hintergründen. Der einzige größere, den es passieren wird, ist eigentlich dieser, dieser dunklere Farbton von blauem Schwarz. Auch hier drüben, die blaue Farbe AAA, AAA , dann wieder, diese scharfe blaue AA. Dies ist eigentlich eine ganze Rasterkombination Ihrer zugänglichen Farben, die diese Farben tatsächlich zusammen arbeiten. Hier ist der Index, Sie müssen nur die Farbe in jede andere Zeile einfügen und mit dem Komma können Sie den Farbnamen verwenden. Wenn Sie zum Beispiel wollen, wenn ich das hätte, können Sie sehen, ich habe Holzkohle und all das. Eine weitere Sache ist, dass Sie auch Grid-HTML und CSS kopieren können, wenn Sie es irgendwo anzeigen möchten. Sie können auch die Blockgröße erhöhen, wenn Sie diese mögen möchten. Sie können deutlich sehen, welcher Text tatsächlich funktioniert und welcher nicht funktioniert. Also AAA ist etwas über sieben, AA ist 4,5 plus, oder manchmal AA18, was für größeren Text ist, ist es eigentlich drei plus. Wenn Sie also sehen oder hören, bedeutet AA18, dass Sie dieses Farbschema verwenden können, aber mit einem großen Text. Es muss also über 18 Punkte liegen, so etwas. Wenn Sie darüber lesen möchten, können Sie hier sehen, ist eigentlich der WCAG20-Standard für Minimalen Kontrast. Sie haben eine Menge Text zu lesen, wenn Sie es lesen wollen, gehen Sie weiter. Im letzten werde ich über das Werkzeug sprechen, das ich für blinde oder farbbehinderte Menschen verwendet habe , die Schwierigkeiten haben, zu beurteilen, welche Farbe es ist. Sie können diese Farbe Oracle.org herunterladen und die App für ihre Windows, Mac oder Linux herunterladen. Lassen Sie mich Ihnen ein Beispiel zeigen. Also hier habe ich dieses Design. Nun, ich laufe bereits diese App, so dass Sie hier rüber gehen können. Ich werde mit der rechten Maustaste klicken, und ich werde diese häufigste Deuteranopie zeigen, diese Farbbeeinträchtigung. Ich werde das auswählen und sehen, wie meine Farben aussehen werden. Im Moment können Sie ihre Ansicht oder ihre Version sehen, all diese Farben zu sehen. Sie können sehen, ob Sie richtig auf dieser gelben und dieser roten Farbe aussehen, gibt es nicht so viel Unterschied, diese orange oder diese rote Farbe. Sie müssen eine gewisse Trennung haben. Das ist also etwas dunkler, das ist ein bisschen heller. Versuchen Sie, sicherzustellen, dass so etwas passiert. Ähnlich hier drüben sehen sie nur die meisten Farben, die dunklere und hellere Farbtöne sind. Sie sind nicht in der Lage, zwischen diesen Farben zu unterscheiden, also wenn ich hier drüber klicke, ist dies wieder die Ansicht. Lassen Sie uns versuchen, es in etwas anderes zu ändern. Versuchen wir mal eine rosa Farbe hier drüben. Lasst uns hier etwas Weiß benutzen. Mal sehen, wie es aussieht, wenn ich das anschalte. Das gleiche, denke ich, der Hauptpunkt hinter all dem ist, dass Sie etwas zwischen verschiedenen Farbstufen unterscheiden müssen . Eine Farbe ist etwas dunkler, die andere ist etwas heller. Das wird ihnen helfen. Ansonsten sehen sie meist die meisten Farben, die sie miteinander vermischen werden. Zum Beispiel ist dies meist rot und orange und gelb oder grün. Das wird eine Menge Ärger für sie sein. Wählen wir andere Behinderungen wie Protanopie, es ist selten, aber es hat einige Probleme. Sie können jetzt sehen, dass dies fast ähnlich ist, aber dieser Bildschirm sieht sehr gelb zu ihnen. Lassen Sie uns eine andere auswählen, die Tritanopie ist. Dies ist anders, und Sie können sehen, dass sie tatsächlich sehen diese orange Farbe als rosa Farbe und rote Farbe sichtbar ist. Alle anderen Farben sind sichtbar, aber Grün hat einige Probleme. Sie können sehen, dass es als blaue Farbe angezeigt wird. Also, das ist alles. Versuchen Sie, Ihre Farben auf einer Grauskala zu überprüfen und Sie können sehen, dass wir verschiedene Ebenen haben. Versuchen Sie zu sehen, dass Ihr Entwurf unterschiedliche Graustufen aufweisen muss. Graustufen bedeutet, dass etwas heller und heller ist als das andere. Einer ist dunkel, einer ist hell, einer dunkel, einer ist hell. Das wird tatsächlich für diese Leute funktionieren. Zweitens: Lassen Sie mich Ihnen ein weiteres Beispiel zeigen. Also hier ist ein weiteres Beispiel für eine App. Sie können hier sehen, wir haben verschiedene Bitcoins, wie 22 Prozent erhöhen oder verringern. Lassen Sie mich Ihnen zeigen, was das Problem tatsächlich in diesem Design ist. Also, wenn ich zu dieser häufigsten Sehbehinderung gehe, können Sie dieses Plus-Symbol sehen und Minus-Symbol ist das einzige, was zwischen diesen unterscheidet. Wenn Sie also 1,5 nach unten Pfeil schauen können, wird dies ihnen helfen, dass dies tatsächlich abnimmt. In diesem Fall können sie mit dem Glas nicht erkennen, dass dies abnimmt oder zunimmt. Wenn man sich diesen Bereich anschaut, ist man ein bisschen langweilig, und eine ist ein bisschen scharfe Farbe. Lassen Sie mich Ihnen zeigen, dass das ein bisschen anders ist. Wenn sie hier rüber schauen, können Sie mehr leuchtend gelb sehen und das ist langweilig. Dies zeigt ihnen deutlich, dass dies etwas erhöht, etwas Gewinn, und das hat einen gewissen Verlust hier drüben. Aber hier drüben ist es ein bisschen anders. Wenn Sie genau hinsehen, können Sie sehen, lassen Sie mich es Ihnen zeigen. Es gibt einen Unterschied von, Sie können Dunkelheit und Leichtigkeit in beiden Farben sagen, rot und grün. Versuchen Sie, das zu differenzieren. Versuchen Sie auch, mit verschiedenen Symbolen zu begleiten. Wir können diesen Abwärtspfeil und Aufwärtspfeil verwenden, um diesen Personen oder diesen Benutzern zu zeigen, dass dies tatsächlich bedeutet. Denn alles andere geht auf die Informationsbelastung hinaus. Wir kommunizieren tatsächlich mit unseren Entwürfen. Wir zeigen dem Benutzer tatsächlich, dass diese Farbe dies bedeutet. Wir kommunizieren durch die Verwendung von Farben, durch Ausrichtung, durch verschiedene Symbole. Das ist eigentlich das, was ein Designer tut. Sie kommunizieren und zeigen Informationen visuell, besser und präsentieren sie dem Benutzer, damit er sie verstehen kann oder sie verstehen kann. Dies sind einige Probleme, die ich Ihnen in Bezug auf diese Beeinträchtigung und die Werkzeuge, die ich benutze, zeigen wollte . Um verschiedene Kontrastverhältnisse und all das Zeug zu überprüfen. Versuchen Sie, all diese Farbschemata wie diese zu erstellen, und Sie werden in guten Händen sein. Stellen Sie sicher, dass Ihre Farben ein gutes Kontrastverhältnis haben und sie nicht den Hauptkontrast ausfüllen , den ich viele Designer gesehen habe, die sie nicht über dieses Problem wissen, und meistens schaffen sie eine Menge Dribble-Shorts oder [unhörbar] -Portfolio. Sie erstellen mobile Apps, bei denen tatsächlich die Kontrastverhältnisse fehlgeschlagen sind. Wenn Sie also Fragen haben, die Sie mir stellen müssen, werde ich Sie in der nächsten Lektion sehen. 25. Stark Plugin für Color: Heute werde ich mit Ihnen ein sehr schönes Plugin teilen, das Sie verwenden können, um Ihre Farbzugänglichkeit, Farbkontrastverhältnisse und Farbblindheit zu überprüfen . Viele Designer, ich habe gesehen, dass sie nicht wissen, oder sie kümmern sich nicht viel um Farbzugänglichkeit oder die nicht einmal die Mühe, ihre Farbhintergründe und Vordergrundverhältnisse zu testen , dass diese Farbe auf diesem Hintergrund ob es eine gute Kontraste sein sollte, ob es auf verschiedenen Bildschirmgrößen oder verschiedenen Bildschirmen sichtbar oder lesbar sein wird. Ich werde Ihnen ein sehr schönes Plugin zeigen, das für Adobe XD und Sketch Apps zur Verfügung steht. Du kannst sie benutzen und mal sehen, was das ist. Hier haben wir das, das ist Stark und das ist ein tolles Plug-in. Sie können das für Adobe XD und für Sketch verwenden und es testet tatsächlich auf verschiedene Kontrastverhältnisstandards wie AA, AAA. AAA ist für kleinen Text und dieser ist für großen Text, 4.5. Dies ist eigentlich der Sweet Spot, AA Ihr Text muss mindestens über diesen Standard sein. Für sehr kleinen Text müssen Sie diesen AAA übergeben. Außerdem hat es Farbblind-Simulationen, so dass Sie Farbe für colorblinde Personen oder Benutzer testen können. Es gibt noch ein paar weitere Funktionen wie Farbvorschläge und nahtloser Export. Lassen Sie uns sehen und testen Sie in Adobe XD, dann werde ich zu meiner Sketch auf meinem Mac wechseln und wir werden das von dort aus sehen. Jetzt bin ich in Adobe XD und Sie können sehen, ob Sie zu diesem Menü gehen, ich bin jetzt auf Windows, Sie können zu Plug-ins gehen. Sie können auf Discover Plugins klicken, und Sie können hier nach Stark suchen und es ist bereits installiert. Wenn es nicht installiert ist, klicken Sie einfach hier und es wird installiert. Sobald es installiert wurde, können Sie hier sehen, ich habe zwei Tasten, lassen Sie mich vergrößern. Diese Farbe ist für mich auf diesem Hintergrund ziemlich sichtbar, aber wenn ich sie auswähle, beide und ich gehe zu Plug-ins und Stark und Check Contrast, können Sie sehen, dass es hier fehlschlägt. Das Kontrastverhältnis liegt bei fast 3:1, 3,34, was für mich sehr niedrig ist. Nun, lasst uns den zweiten testen. Ich werde beide auswählen und ich gehe wieder zu Plug-ins und Stark, Check Contrast, und jetzt können Sie sehen, dass es fast normales Text-4.5-Verhältnis passiert, was gut ist, für große Texte gibt es beide. Ich denke, das ist ziemlich gute Farbkombinationen, also wenn ich mit meinen Knöpfen gehen werde, werde ich diese beiden Farben anstelle dieser beiden verwenden. Versuchen Sie, sicherzustellen, dass Sie Farben verwenden, die gute Kontrastverhältnisse haben und die alle Farbstandards erfüllen. Lassen Sie uns das andere Werkzeug testen, das es hat. Lassen Sie uns diese auswählen und ich werde die Colorblind-Simulation testen. Hier haben wir eine Colorblind-Simulation, lassen Sie es uns so behalten und ich werde diese verwenden. Ich denke, das ist die beliebteste, 4-5 Prozent Menschen haben diese Deuteronopie. Was tatsächlich passiert ist, damit sie diese blaue Farbe sehen können. Sie können sehen, dass diese Farbe ein bisschen anders ist, aber diese Farbe ist auch anders, es ist fast lila. Mal sehen, andere, Tritanopie, das hat sich zu grün. Auf diese Weise verwenden Sie es in Adobe XD. Jetzt werde ich zu meinem Skizzenwerkzeug wechseln und ich werde Ihnen den Bildschirm zeigen und wie dieses Plug-in in Sketch funktioniert. Jetzt können Sie sehen, ich bin jetzt auf meinem iMac, und das ist meine Sketch, und ich habe bereits heruntergeladen und installiert, dass Plug-in Stark. Also gehen wir einfach zu Plug-Ins und Stark und Show Stark. Das ist eigentlich der Bildschirm, den wir bekommen. Mal sehen, wir werden dieses iPhone 8 verwenden. Lassen Sie mich es einfach ein bisschen größer machen. Moment ist es in dieser Art der Farbenblindheit. Es simuliert dieses, Deuteranopie und Sie können auch andere testen. Sie können diese Ansicht auch exportieren, sodass auf dieser Ansicht nur wenige weitere Funktionen verfügbar sind. Wenn Sie die Farbkontrastverhältnisse testen möchten, können Sie hier sehen wir Farbkontrast haben. Wählen wir diesen aus und prüfen Sie den Kontrast, klicken Sie hier, wählen Sie zwei Ebenen aus, die [unhörbar] enthalten. Wir brauchen zwei Schichten. Was ist los? Ich werde diesen und diesen auswählen, lassen Sie uns den Kontrast überprüfen. Dies sind eigentlich diese beiden Schichten und Sie können sehen, dass es mir zeigt, dass das Kontrastverhältnis 7,06 ist, also übergibt es alle verschiedenen Kontrastverhältnisse. Gerade jetzt, wie Sie sehen können, sind diese Farben nicht die gleichen, was ich Ihnen auf meinem Adobe XD gezeigt, sind ein bisschen verschiedene Farben. Wenn ich das gleiche für diese beiden teste, nehmen wir diese beiden und überprüfen den Kontrast. Es wird die meisten von ihnen scheitern. Es ist nur gut für großen Text, das heißt, ich denke eigentlich mehr als 18 oder 19 Pixel, oder 18 Punkte, denke ich. Das ist 3.34, ich denke, es ist sehr niedrig, zumindest sollte es diese passieren. So verwenden Sie das Stark-Plug-In auf Ihrem Sketch, so dass alles über die Verwendung des Stark-Plug-Ins in der Sketch-Software Ich hoffe, Sie haben etwas Wertvolles in diesem Video gelernt, bald, im nächsten Video. 26. 3rd Project mit Ziel: Hier ist eine weitere Zuweisung und es geht darum , ein Farbschema basierend auf einem Farbthema zu erstellen. Farbthema ist im Grunde das, was das Unternehmen tut und wie das Unternehmen einige Schlüsselwörter verwendet hat , die Ihnen helfen, zu definieren , was das Unternehmen tatsächlich [unhörbar] mit ihrem Farbschema. Hier ist Ihr Auftrag. SecureDot ist eine Online-Sicherheitsfirma, bauen Sie ein professionelles und starkes Farbschema, das widerspiegelt, was sie tun. Das erste ist, dass sie Sicherheitsunternehmen sind, sie sind online. Die Schlüsselwörter hier sind Sicherheit, professionell und stark. Versuchen Sie, picular.co oder ein anderes Farbschema zu verwenden. Was ich möchte, dass Sie tun, ist, werden Sie dieses Farbschema zusammen mit diesem Bildschirm einreichen. Worauf wartest du? Beginnen Sie jetzt mit der Erstellung dieser Zuweisung. 27. Magie von subtilen Color: In dieser Lektion werden wir über ein sehr einfaches Geheimnis des UI-Designs sprechen, das subtile Unterschiede darstellt. Jetzt werde ich Ihnen zeigen, wie Sie Ihre subtilen Unterschiede, sehr leichte Unterschiede in Ihren Farben und Formen verwalten können , um eine großartige Benutzeroberfläche zu erstellen. Hier, wie Sie sehen können, habe ich diese sehr einfache Botschaft. Ich habe es gerade in nur 10 Minuten erstellt. Ich habe es gerade gerade erschaffen. Hier, wie Sie sehen können, gibt es ein paar Probleme mit diesem Bildschirm. Eine ist, dass, wenn man sich diese Gegend hier anschaut, diese Grenze, sehr hässlich aussieht. Was wir tun werden ist, Sie können sehen, dass es einen sehr hellen Hintergrund, diese gefüllte Farbe auf der Rückseite, die auch diese sehr helle und blasse Farbe von diesem fast gleichen Farbton ist. Was wir tun werden ist, wir brauchen diese Farbe, wir werden mit dieser Farbe als Grenze beginnen. Was ich tun werde, ist, ich werde mit der gleichen Farbe beginnen, die es für den Hintergrund hat, für die Grenze wie diese und dann, was wir tun werden , ist, dass wir unsere Helligkeit auf 90 Prozent reduzieren. Wenn Sie diesen Effekt wollen, können Sie sehen, sehr abgewickelt Rand und wenn Sie verkleinern, können Sie sehen, dass Sie nicht gehen, um es in Ihre Augen zu bekommen. Das wird deine Augen nicht verletzen. Wählen Sie dies, machen wir es mehr 80 Prozent. Jetzt denke ich, es sieht besser aus mit 80 Prozent, also werde ich das behalten. Wenn Sie möchten, können Sie die Sättigung erhöhen. Versuchen wir es mit 25 Prozent und machen wir es zu 90 Prozent, so etwas. Das sieht gut aus. Ich werde mit dieser Farbe gehen. Lassen Sie uns die Sättigung ein bisschen reduzieren, 20 Prozent. Okay, also werde ich diese Farbe auch zu meinem Farbschema hinzufügen, okay? Dies ist die Magie der subtilen Unterschiede. Ich habe gerade einen schönen Look mit Differenzierung erstellt, mit ein wenig Unterschied zwischen den Farben. In ähnlicher Weise, wenn Sie sich diese Texte ansehen, haben sie die gleiche Farbe, das gleiche Schwarz. Was ich tun werde, ist, ich werde diese Farbe auswählen. Tut mir leid, dieser Text hier. Es gibt zwei Tricks, um es. Erstens, Sie können diese Deckkraft verwenden und etwa 60 Prozent Overhead gehen, oder etwa 70 Prozent, so dass 70 Prozent gut aussehen. Dies ist ein sehr einfacher Trick. Viele Entwickler können es verwenden, dass sie die Deckkraft der gleichen Farbe auf 70 Prozent reduzieren können. In ähnlicher Weise wollen wir vor zwei Minuten nicht, dass es so hell ist, also werden wir es auch auf 50 Prozent reduzieren, so etwas oder vielleicht 60 Prozent. So funktioniert tatsächlich die subtile Differenz-Magie in unseren Farbschemata oder in unserem Text. Dies ist eigentlich ein bisschen verbesserte Version desselben. Okay, also wenn Sie einen weiteren Effekt wollen, können Sie hier hinzufügen, Sie können den Rand hinzufügen. Was wir hier tun können, ist, dass wir dasselbe mit der gleichen Farbe beginnen. Wir werden diese Helligkeit auf 90 Prozent und Sättigung 80 Prozent reduzieren. Machen wir es 88 Prozent. So etwas wie das. Okay, das ist also interessant. Lass es uns ein bisschen sichtbarer machen. Ich werde es zu 85 Prozent machen, 82 Prozent. Das sieht gut aus. Dies ist eine andere Möglichkeit, Ihre Sympathie Ihrer Benutzeroberfläche zu erhöhen und sie nicht in die Augen Ihrer Benutzer werfen zu wollen, okay? Das ist ein ganz einfacher Trick, den ich euch zeigen wollte. Ich habe viele Designer gesehen, sie wissen das nicht oder haben eine Ahnung davon. Immer wenn Sie so etwas tun, versuchen Sie nicht, die gleiche Farbe für alles zu verwenden. Versuchen Sie, die Helligkeit zu reduzieren, also passen Sie sie an, um gut aussehende UIs zu erstellen Ich hoffe, Sie haben diese Lektion genossen. Wenn Sie Fragen haben, die Sie mir stellen müssen, sehen wir uns in der nächsten Lektion. 28. Was sind Farbmasken?: In den vorherigen Lektionen, in den vorherigen Videos, haben Sie gesehen, wie ich verschiedene Schattierungen einer einzigen Farbe erstellt habe. Wir verwenden sie hauptsächlich im Dashboard oder anderen UI-Design. Wir brauchen meistens drei oder vier, zwei Zelte und zwei Schattierungen, mindestens vier oder fünf verschiedene Skala derselben Farbe. Nun, das Thema ist Maßstab. Ich werde Ihnen zeigen und mit Ihnen teilen die Online-Tools, wo Sie generieren können. Sie können nur eine Farbe setzen und viele verschiedene Farben erstellen, die dazu passen können, zusammen mit verschiedenen Schattierungen und Zelten. Wir werden es einfach die Skala nennen, die Farbskala. Beginnen wir mit dieser Website. Das ist ein sehr altes. Ich habe es vor fünf, sechs Jahren benutzt. Ich benutzte es weiter. Sie geben einfach eine Farbe ein, zum Beispiel diese. Es wird Ihnen zeigen, wo diese Farbe ist. Es ist hier drüben. Hier haben wir alle hellen Schattierungen. Wenn Sie nach unten gehen, können Sie sehen, dass es dunkler, dunkler und dunkler wird. Wann immer Sie etwas entwerfen, zum Beispiel einige Armaturenbrett, wenn Sie alle verschiedenen Schattierungen und verschiedene Zelte der gleichen Farbe erhalten möchten. Zum Beispiel möchte ich eine hellere Farbe für meinen Hintergrund oder vielleicht so etwas. Ich werde mich wie vier oder fünf Schritte oder sechs Schritte entfernt bewegen, wie vielleicht dieser, ich werde es kopieren und einfügen und versuchen Sie es zusammen mit dieser Farbe. Dies ist ein sehr praktisches Tool, 0to255.com. Dann werde ich zu einigen modernen Werkzeugen übergehen. Das hier wurde von einem Typen erstellt, der ich denke, Hihayk. Dies ist eines der großartigen Tools, die ich online sehe. Hier haben wir diese Startfarbe, das ist Startfarbe. Wenn Sie von einer anderen Farbe beginnen möchten, lassen Sie von einer anderen Farbe beginnen. Gehen wir mit dem hier. Lass uns hier etwas Blau hinzufügen. Ich habe ihm diesen Wert gegeben. Was auch immer Sie tun, Sie versuchen, hier einen Wert zu setzen, hexadezimalen Wert oder verwenden Sie diese Schieberegler, wenn Sie möchten. Beginnen wir mit dieser Farbe. Lassen Sie uns etwas Rot von hier bewegen, um es blauer zu machen. Das sieht toll aus. Jedenfalls. Dies ist der Ausgangspunkt. Fügen Sie einfach Ihre Farbe hier drüben ein. Lassen Sie mich Ihnen zeigen, was das tatsächlich tut. Es verwendet tatsächlich einige Winkel und eine andere Berechnung, um andere Farben zu erhalten. Dies sind meist Analoga Farben aus dem Farbschema, um mit diesem Blau übereinzustimmen. Dieser mittlere ist eigentlich deine Farbe, hier drüben. Es verwendet vier Stufen auf der linken Seite, dunklere Seite und eins, zwei, drei, vier, fünf, sechs auf der helleren Seite. Es erzeugt tatsächlich 10 Farben. Wenn du ein paar Werte ändern willst, wenn ich vielleicht sieben will. Neun helle Farbtöne. Nicht 70. Ich will sieben. Fügen wir hier neun hinzu. Jetzt haben wir neun Lichtschattierungen hier drüben. Wenn ich vielleicht 10 will, können Sie sehen, dass ich 10 verschiedene Schattierungen hier drüben habe. Ähnlich, wenn ich mehr dunkle Werte möchte, möchte ich vielleicht sechs dunkle Werte. Ich werde hier sechs hinzufügen. Nun, das ist eigentlich der Schritt. Fünfzig Prozent, wenn du es ändern willst. Lassen Sie mich es einfach auf 15 Prozent ändern. Sie können sehen, wie es sich verändert. Ähnlich, wenn ich zu diesem hier gehe, ich 20 Prozent hier drüben, können Sie sehen, dass es tatsächlich jedes Mal 20 Prozent Licht macht. Das brauchen wir nicht, weil wir sehr schöne helle Farbe brauchen. Ich werde 50 oder vielleicht 65 Prozent benutzen, so etwas. Vielleicht möchte ich es 85 erhöhen, lass uns 85. Das hier sieht toll aus. Ähnlich für die dunklere werde ich 30 Prozent verwenden. Nein, 50 Prozent sehen gut aus. Hier haben wir Schritte. Dann haben wir die Leichtigkeit und Dunkelheit. Dies ist im Grunde Helligkeitsregelung. Dann haben wir den Farbtonwinkel auf Ihrem Farbrad, wenn Sie sich erinnern. Ich weiß nicht mehr, welche Farbe da drüben ist. Aber was ich tun werde, ist es tatsächlich Variation Ihres Farbschemas. Ausgehend von diesem, geht es tatsächlich minus sieben Grad in dunkle Winkel. Es ändert nur die Farbe ein wenig, der Winkel Ihres Farbtons ein wenig. Ähnlich auf dieser Seite ändert es den Winkel auf plus 67 Prozent. Wenn Sie es reduzieren möchten, können Sie sehen, jetzt ist dies die lila Farbe, die sehr nah an dem blauen Farbton auf Farbrädern war. Wenn Sie weiter iterieren, wenn Sie hier zum Beispiel ein Farbschema haben möchten, können Sie sehen, dass dies ein völlig anderes Farbschema ist. Ich habe meinen Winkel auf 189 Prozent verschoben, verwenden wir 90 Prozent. Neunzig Prozent sind eigentlich total, man kann auf dem einen Schritt von da drüben sagen. Neunzig Prozent Unterschied. Verwenden wir 180. Auf diese Weise können Sie diesen hellen Farbtonwinkel verwenden, um verschiedene Farbschemata zu erstellen. Wie Sie sehen können, ist dieser eigentlich analog, sehr nahe Farben, Grün und Blau. Ich mag es wirklich. Ich bleibe bei diesem hier. Dunklere Farben, ich mag das minus sieben Grad, also werde ich es nicht ändern. In ähnlicher Weise ist der letzte Stopp die Sättigung. Wenn Sie sehr gesättigte dunkle Farben wollen, wenn Sie sich erinnern, sagte ich Ihnen, dass, wenn Sie Ihr dunkleres Farbschema machen, Sie es sättigen werden. Mehr Sättigung und mehr Dunkelheit. Ähnlich für die hellen Farben werde ich ihre Sättigung reduzieren. Ich werde 10 Prozent hier drüben gebrauchen. So funktioniert mein Farbschema tatsächlich. Wenn Sie mehr Sättigung wollen, können Sie sehen, können Sie mehr Sättigung wie diese zum Beispiel versuchen. Ich möchte ein sehr Thema, wo ich sehr grüner Look oder sehr frisches Aussehen möchte, so werde ich die Sättigung hier zu erhöhen. Lassen Sie uns die Helligkeit auf 90 und die Sättigung ist 80 Prozent. So schafft es mein ganzes Farbschema. Ich liebe es wirklich. Es hat sechs dunkle Farben und 10 helle Farben. Sie können nur dieses verwenden, um das gesamte Farbschema zu erstellen. Du brauchst nicht mehr Farben. Vielleicht etwas Grasbildung. Dies wird tatsächlich als Farbskala bezeichnet. Als nächstes ist dieses Werkzeug von Lift Design Farbe Box. Dies ist auch ähnlich wie dieses, aber hier haben wir mehr Kontrolle und ich denke, diese Kontrolle sieht besser aus. Auf der rechten Seite können Sie sehen, es zeigt mir Farbpalette zusammen mit den Farbkontrastverhältnissen. Sie können 1.56, 2.23 sehen. Drei sehen toll aus. Dann haben wir vier Kontraste, 4,06w, und so weiter und so weiter. Hier können wir die Schritte kontrollieren. Zum Beispiel möchte ich 15 Schritte hier drüben, und das ist mein Anfangston. Zum Beispiel möchte ich mit etwas Blau hier anfangen, und ich möchte mit etwas rötlichem Lila hier enden, so etwas wie dem. Dies ist eigentlich, Sie können sehen, dies sind die Schritte und gehen in andere Richtung, was bedeutet, dass der Farbton tatsächlich ändert. Sie können 195, 197, 199 sehen. Das sind die Farbtonwerte, schätze ich, lassen Sie mich sehen. Dies sind die Farbtonwerte unten und oben sind dies tatsächlich der Skalenwert 0,10, 20, 30. Das sind eigentlich meine Maßstabsschritte. Hier haben wir die Kurve. Wenn Sie es ändern möchten, können Sie es wie folgt ändern easeInout. Es ist tatsächlich anders mit einer anderen Kombination von easeIn Methode, um auf diese angewendet zu werden, zum Beispiel verwende ich so etwas. Sie können auf der rechten Seite sehen, es erzeugt das Farbschema. Wenn Sie das gesamte Farbschema erfassen möchten, können Sie diese ganzseitige Bildschirmaufnahme verwenden. Sie können das erfassen, oder Sie können dieses verwenden, dieses Tool, ich liebe es wirklich. Das ist getfireshort. Lassen Sie mich Ihnen zeigen, wie es wirklich funktioniert. Ich werde den sichtbaren Teil erfassen oder meine Auswahl erfassen. Ich werde diesen Bereich hier auswählen, um mein ganzes Farbschema zu bekommen. Das ist alles. Ich werde es als Farbschema speichern. Sie fragen sich vielleicht, wie wir das alles kopieren können? Jedenfalls. Hier haben wir verschiedene Kurven, und dann haben wir die Sättigung. Sie können sehen, wie viel gesättigt Ihre Anfangsfarben sein werden, wie weniger gesättigt wird? Am Ende haben wir viele Situationen, wir können es hier kontrollieren. In ähnlicher Weise haben wir die Kurve, lasst uns die Rate ändern. Dies ist gegen Sättigung. Wie viel Sättigung brauchen wir? Das sieht gut aus. Dann ist dies wieder für die Sättigung, denke ich. Es ist für die Sättigung. Das sieht toll aus. Dann haben wir die Leuchtkraft. Leuchtkraft ist, wie viel Licht aus Ihren Farben emittieren muss. Mein Start wird hellere Farben sein, so mehr Leuchtkraft und wird weniger dunklere Farben haben. Dunkel, so sieht man weniger Leuchtkraft. Was auch immer Farbtoneinstellungen Sie wollen, dann wieder, wir haben diese Kurve. Ich bin mir nicht sicher, ob die Farben verschließen. Was bedeutet die Schlossfarbe? Ich denke, vielleicht von hier aus, hexadezimaler Wert. Vielleicht möchte ich diese Farbe sperren. Lass mich sehen. Dieser hier sperrt tatsächlich diese Farbe. Dann können Sie es teilen und tatsächlich nach URL, RGB, JSON-Farben teilen. Wenn Sie ein Programmierer sind, denke ich, dass Sie diesen hexadezimalen JSON verwenden können. Sie können diese Hexadezimalwerte auch kopieren und in Ihrer Software oder Designsoftware verwenden . Das ist eigentlich die Skala. Wir haben Schritte 0,10, 20. Dies wird tatsächlich auch von Google Material Design verwendet. Wenn Sie sich daran erinnern, dann ist das letzte Werkzeug dieses. Dies ist eigentlich für Daten. Wenn Sie eine Menge von Daten oder Informationen oder sehr große Graphen präsentieren möchten, wo wir eine Menge von Daten haben. Du kannst das benutzen. Dies sind verschiedene Farbmodi auf der linken Seite, ich benutze normalerweise Farbtonleichtigkeit, und Sie können die Farbe aufnehmen. Zum Beispiel möchte ich hier eine Farbe auswählen und hier habe ich das Endfarblicht. Lasst uns das hier benutzen. Hier können Sie verschiedene Schritte hinzufügen, wenn Sie möchten. Zum Beispiel, eins, zwei, drei, vier, fünf, sechs , sieben Schritte, fügen wir acht, neun und 10. Ich habe hier die ganze Skala geschaffen. Sie können es auch visualisieren. Wenn Sie auf visualisiert klicken, können Sie sehen, wie diese Farbe wird, um die Karte von USA zu zeigen. So können Sie sehen. Rechts unten steht die US-Arbeitslosigkeit 2018. Es ist der gelbe Farbton, der sehr helle Farbton ist die hohe Arbeitslosigkeit. Sie können sehen, wenn ich darauf schwebe, wird es mir die Werte zeigen. Wenn Sie in Informationsdesign sind, können Sie eine Farbauswahl wie diese verwenden und Sie können alle diese kopieren und Ihr Farbschema für Ihre Visualisierungen erstellen. Das ist alles über Skalierung und wie Sie Skalierung mit diesen vier Online-Tools generieren können, es könnte andere geben, aber im Moment finde ich diese sehr interessant. Ich hoffe, Sie haben dieses Video genossen. Wenn Sie Fragen haben, fragen Sie mich. Fahren wir mit der nächsten Lektion fort. 29. 4th Projekt – Farbschema mit Scheme: Nun, die Zeit ist für eine weitere Aufgabe, und das wird ein bisschen schwierig sein , weil ich möchte, dass Sie ein Farbschema erstellen , das all diese verschiedenen Aktionen passen wird. Sie können hier sehen, dieses Feld ist das dunkle Feld, das ist E-Mail-Adresse, es ist jetzt aktiv. Das zweite, das Passwort eins, ist leer und befindet sich im Standardzustand, ist nicht gefüllt, inaktiv. Dann haben wir Create Account Button, die überzeugender ist oder die Haupt Call To Action Taste oder CTA, die wir es auf dem Bildschirm nennen, der Hauptfokus dieses Bildschirms hat. Dann haben wir bereits ein Konto und loggen Sie sich hier ein, was eine sekundäre Aktion ist. Sie gehen, um Farbe füllen Sie diesen Bildschirm wie folgt. Ich werde Ihnen zeigen, was ich hier getan habe. Sie können sehen, so hier ist mein Farbschema für diese sicherste und Sie können hier sehen, Ich habe verschiedene Farben für verschiedene Zustände verwendet. Wie Sie sehen können, ist unsere Hauptprimärfarbe diese dunkelblaue, königsblaue Farbe und dann haben wir sehr helle bläuliche, himmelblaue Farbe für den Login hier. Sie werden diese Farbe schemed Version zusammen mit Ihrer Graustufenversion und zusammen mit diesem Farbschema einreichen . Zeigen Sie mir zumindest Ihr Farbschema und auch das Farbschema , das Sie verwenden, und Sie können sagen, was sind verschiedene Funktionen, die Sie jeder Farbe zuweisen, zum Beispiel ist dies unsere Primärfarbe, das ist unsere sekundäre -Aktion. Dies ist primäre Aktion, sind Markenfarben, diese ist extra, dann haben wir inaktive Textfeldfarbe, die der Rahmen um sie herum ist, inaktives Textfeld. Dann haben wir inaktiven Eingabetext, der das darin geschriebene Passwort ist. Dies ist für dunklen Text. Wir haben hellen Text, dunklen Text, aktives Textfeld, den Rahmen um das aktive Textfeld. Dann haben wir diesen Hintergrund. Es ist nicht weiß, es ist sehr weißliche Farbe von 204 Farbton, das heißt, ich denke, unsere Marke blaue Farbe. Dann haben wir die sekundäre Farbe. Ich möchte, dass Sie mir Ihr Farbschema zeigen und was sind die Funktionalitäten oder Funktionen, die jeder Farbe zugewiesen wurde. Was diese Farbe tut, was diese Farbe tut und was diese Farbe tut. Das wird Ihr Auftrag sein. Ich hoffe, Sie werden das bald einreichen. Sie können jede Software oder tatsächlich verwenden, Adobe Photoshop oder Sketch. Lasst uns anfangen. 30. 12 immerin Design: Heute werde ich Ihnen das dritte Geheimnis jedes Farbschemas Design zeigen. Wann immer Sie mit Ihrem Design beginnen, werden Sie einen Wortrahmen entwerfen, wie Sie hier auf der linken Seite sehen können. Sie können sehen, Ich habe verschiedene Werte oder verschiedene Schattierungen von grauen Farbe verwendet, von dunkel bis hell, um meinen Wortrahmen darzustellen, so dass Sie sehen können, dass dies ein aktives Feld ist. Es hat mehr dunkle Grenze als dieser hier. Dies ist tatsächlich nicht ausgefülltes inaktives Feld, Textfeld. Ähnlich hier drüben, wie Sie diese Textfarbe sehen können, und diese Textfarbe ist gleich. Dieses Logo, es hat sehr dunkle Farbe, und auch Sie können sehen, ich habe diese Farbe O getrennt, von diesem Punkt mit etwas Grau. Nur um zu zeigen, dass dies eine andere Farbe sein wird. Ebenso können Sie hier sehen, habe ich gezeigt, dass diese Schaltfläche, dies ist der wichtigste Teil, so ist es auf diesem Bildschirm hervorgehoben. Ähnlich unten kann man sehen, dass ich hier Login verwendet habe, in allen Kappen und es hat auch dunkle Farbe. Sie haben bereits ein Konto. Dieser Text ist hell und die Login-Schaltfläche, die eine Aktion ist, ist es dunkel. Sie können nur auf einen Blick sehen, Sie können auf diesen Bildschirm schauen, und Sie können sagen, dass diese Dinge wichtig sind, oder hervorgehoben, oder ihr Zustand unterscheidet sich von dem anderen, also sind dies die Dinge, die Sie nehmen müssen Pflege, wann immer Sie beginnen eines Ihrer Design, Website oder irgendetwas. Der Trick hier ist immer, immer und immer beginnen Sie Ihr Design in Graustufen. Versuchen Sie nie, so etwas zu entwerfen, und wählen Sie Farben nach dem Zufallsprinzip, und halten Sie einfach auf die Gestaltung der Dinge zufällig. Versuchen Sie zu skizzieren, versuchen Sie, Ihre App oder Website oder was auch immer Sie entwerfen, mit einem Wortrahmen zu versehen, und nehmen Sie dann Farbe auf. Zum Beispiel, wie hier drüben, habe ich diese Primärfarbe aufgenommen, die dunkelblau ist. Dann sind das eigentlich zwei Markenfarben, und diese grüne ist extra, es wird mir manchmal helfen. Dann können Sie alle diese Farben sehen, sie sind tatsächlich die Schattierungen der gleichen Farbe, die diese ist. Diese Farbe, und sie haben verschiedene Schattierungen. Dieser wird für Texte verwendet. Das hier ist wieder für Text, dunkle Texte, heller Text. Das wird unser Hintergrund sein. Das ist nicht weiß, es hat eine Tönung gemischt, diese Farbe denke ich. Dann benutze ich diese Farbe. Das ist für meine sekundäre Aktion. Sie können hier Grundfarben, sekundäre Farbe sehen, also wenn Sie denken, dass Sie wirklich eine sehr kontrastierende Farbe für Ihre sekundäre Aktion benötigen , liegen Sie falsch. Sie können hier sehen, dieses Blau ist sehr hell und sehr, man kann sagen, sehr helle Farbe statt diese dunkle Farbe. Es ist völlig entgegengesetzt zu diesem, aber es ist nicht so kontrastierend wie dieser. Diese Schaltfläche „Konto erstellen“ hat mehr Kontrast, und es ist lebendiger, und es erregt Aufmerksamkeit mehr als diese Anmeldung. Ihre nächste Aufgabe wird es sein, so etwas zu erstellen, und mir auch Ihr Farbschema zu zeigen, wie viele Schattierungen Sie für den gesamten Bildschirm benötigen, können Sie hier sehen, es gibt verschiedene Farben für diese aktives Feld, dies angegeben. Das hier drüben, dann dieser Knopf. Eine weitere Schaltfläche, die sekundäre Aktion ist, und dieser Text ist anders. Dieser Text ist etwas dunkler, dieser ist ein bisschen hell, also entwerfen Sie tatsächlich so etwas. Auch der Hintergrund hat hier etwas Farbe. Die sind auf der linken Seite. Sie können sehen, dass ich die Farben in meinem Assets-Panel hinzugefügt habe. Das ist [unhörbar]. Wenn Sie Skizze oder eine andere App verwenden möchten, ist das in Ordnung. Sie können voran gehen und jedes Werkzeug verwenden. Figma oder was immer du willst. Zeig mir einfach deine Bildschirme und das ist alles. In der nächsten Lektion werden Sie die Aufgabe erstellen, aber wenn Sie Fragen haben, lassen Sie es mich wissen, fragen Sie mich in der Diskussion, oder wenn Sie irgendwelche Vorschläge haben, lassen Sie es mich wissen. Ich hoffe, Sie haben diese Lektion genossen und Sie werden das Geheimnis lernen gute Schnittstellen oder gute Farbschemata zu entwerfen. Das heißt, beginnen Sie Ihr Design immer mit Graustufen. Wir sehen uns bald in der nächsten Lektion. 31. Richtige Namen: In diesem Video zeige ich Ihnen die Tricks und Tipps, wie Sie Ihre Farben verwalten können. Während Sie Ihre Farben verwalten, ist das erste, was Sie werden, um sie zu benennen. Ich bin gerade in der Skizze. Sie können hier drüben sehen, ich werde diese Akte mit Ihnen teilen. Du kannst hier drüben sehen, ich habe 20 verschiedene Farben. Hier drüben habe ich verschiedene Schattierungen von Blues, unterschiedliche Sättigung, unterschiedliche Leichtigkeit für die Grey. Sie können sehen, ich habe wie 10 verschiedene Grau und neun oder 10 verschiedene Grau, dann haben wir Schattierungen von Grün, Orangen, Rot, Lila und Cyan Farbe. Dies wird Ihnen tatsächlich helfen, zu bauen, wenn Sie ein Dashboard entwerfen. Wie werden Sie Ihre Farben benennen? Als erstes ist, wie viele Farben sind, wie viele Farbtöne brauchst du. Wenn Sie kein größeres System bauen, schlage ich vor, dass Sie mindestens fünf verschiedene Schattierungen der gleichen Farbe bauen. Wenn Sie dunkles, dunkelstes Rot, dunkleres Rot haben , dann haben wir mittleres Rot, dann haben wir dieses hellste Rot, dann ist dies das hellste Rot. So werden Sie sie benennen. Dunkler, heller, hellster, mittel, so etwas. Dieses Benennungsschema kann bis zu fünf Farben verwendet werden. Aber wenn Sie möchten, habe ich diese grauen Farben, wie sie neun verschiedene Farben sind. Wie soll ich sie benennen? Ich werde eine andere Technik verwenden, die heißt, ich habe viele Designer gesehen und sogar ich denke, Google Material Design verwendet es. Wir werden sie nennen; Grey 20, Grey Null,10, 20, 30, 40, 50, 60. Immer wenn Sie sich wie Grau 60 oder 70, oder 80 oder 100 bewegen , werden sie die dunkelste Farbe haben. Wie Sie wie Null, 10, 20 gehen , sind sie hellere Farbtöne. Dies wird Ihren Entwicklern oder jedem Team helfen, mit dem Sie arbeiten, dass es einfacher ist, die Farben zu vermitteln, die Sie verwenden. Wann immer Sie versuchen, so etwas zu bauen, möchte ich, dass Sie Ihre Farben so nennen. Grau 20, Grau Null, Grau 10, Grau 20, 30, 40, 50, 60, 70, 80 und 100. Oder Sie können zumindest zu 90 gehen, um wie 10 verschiedene Schattierungen zu haben. Ich denke, 10 werden genug sein, mehr als genug. So werden Sie Ihre Farben benennen. In der nächsten Lektion werde ich Ihnen zeigen, wie Sie sie tatsächlich speichern einen Styleguide oder Stile in Adobe-Skizze erstellen. Fahren wir mit der nächsten Lektion fort. 32. Style in Sketch verwenden: In diesem Video werde ich darüber sprechen, wie Sie Skizzenstile für Ihre Farben generieren werden . Zum Beispiel habe ich 30 Farben, ich möchte nicht immer wieder einen einzelnen Stil erstellen, also möchte ich alle Stile erstellen. Dafür benötigen Sie ein Plugin namens Sketch Styles Generator, gehen Sie voran und laden Sie es herunter und installieren Sie es durch Doppelklick. Dann gehen wir zu Sketch. Lassen Sie mich zu „Neue Datei erstellen“, „Neues Kunstbrett“ gehen , lassen Sie uns jede Kunsttafel erstellen. Lassen Sie uns das schaffen. Ich werde hier drüben ein paar Rechtecke aussuchen. Hier haben wir ein Rechteck. Fangen wir mit etwas Farbe hier an, als hätte ich diese blaue Farbe. Replizieren Sie es zwei, drei und vier. Ich werde mit einer anderen Farbe gehen, vielleicht so. Lassen Sie uns etwas Grau hier hinzufügen, fügen wir einige bläuliche Cyan Farbe, dunkel für den Hintergrund vielleicht, ich habe so etwas. Ich habe jetzt vier Farben, also was ich tun werde, ist zuerst, ich werde sie umbenennen. Sie können ein Plugin namens „Rename It“ verwenden. Eigentlich habe ich sie nicht organisiert, also lasst uns sie so organisieren. Lassen Sie uns es leichter machen, also gehen wir einfach mit der hellsten Farbe von all diesen. So etwas. Hier haben wir Rechteck eins, zwei, drei, vier. Top eins ist die, an der Spitze. Als nächstes werde ich diese Ebene nach unten verschieben. Dieser muss hier sein, und dieser hier ist an der richtigen Stelle. Jetzt werde ich alle von ihnen auswählen und ich werde ein anderes Plugin ausführen, um sie umzubenennen, „Ausgewählte Ebenen umbenennen“, und wir werden „Layer-Name“ mit etwas „Number Sequence“ verwenden. Benennen wir sie so um. Das ist blauer Schrägstrich blau eins, zwei, drei, vier. Wir haben so etwas. Wir können auch die Zuweisungsnummer verwenden, wie blau eins, zwei, drei, vier. Benennen wir sie um. Das wird vier sein, das ist das dunkelste, dann haben wir blaue drei, zwei, eins. Dies ist eine Möglichkeit, sie umzubenennen. Jetzt werden wir alle von ihnen auswählen und wir gehen zu „Plug-in“ und wir werden „Style Generator“ hier verwenden, klicken Sie hier, und alle Stile wurden generiert. Wenn wir hier rüber gehen, können Sie in Blau sehen, wir sehen blau eins, zwei, drei, vier. So werden Sie und wissen, dass Sie Ihre Stile erstellen und Stile generieren, damit Sie sie in Sketch wiederverwenden können. So werden Sie Ihre Farben organisieren. Wenn Sie Zeplin oder Third Party Tool verwenden, um es Ihren Entwicklern zu zeigen, dann werden Sie Ihr Farbschema dort aufbauen. Das ist alles. Ich hoffe, Sie haben diese Lektion genossen und versuchen, dieses Plug-in Style Generator herunterzuladen. Lassen Sie mich es Ihnen zeigen. Sie werden auch Stile für Ihre Textfarben generieren. Wenn ich hier klicke, können Sie sehen, dies ist etwas namens Stile, Überschriften, schwarz. Ich habe so etwas, Button, weiß, blau, Form, Textformtext, aktiv gefüllt, inaktiv. Sie werden alle diese verschiedenen Stile und Farben für Ihre Absätze Werkzeug erstellen. Sie können hier oben diesen Text sehen, Absatz ist , es ist anders als die Überschrift und es hat eine andere Farbe. Sie erstellen alle verschiedenen Stile, generieren alle verschiedenen Stile mit diesem Stilgenerator und können sie später in Ihren Entwürfen verwenden. Hier geht es um Wiederverwendbarkeit und um die Art und Weise, wie Sie Ihre Stile in Sketch verwalten. Im nächsten Video zeige ich Ihnen den gleichen Prozess, den Sie in Adobe XD ausführen können. Fahren wir mit der nächsten Lektion fort. 33. Farben in Adobe XD verwalten: Jetzt, gerade jetzt, bin ich in Adobe XD und ich werde Ihnen zeigen, wie Sie Ihre Farben zu Ihren Assets hinzufügen werden, die Ihre Stile und Farben und Reibenstile sind. Was ich eigentlich tun ist, wenn Sie alle Ihre Farben entworfen haben und Ihre Farben auf Ihren Bildschirm angewendet haben, Sie gehen nur alles auswählen, mit der rechten Maustaste. Und fügen Sie Farben zu Assets hinzu. einfach ist es in Adobe XD. Jetzt können Sie in diesen Farben gehen und Sie können diese arrangieren. Zum Beispiel, das ist die dunkelste Farbe, also werde ich sie nach oben bewegen, dann diese, dann diese, und dann haben wir diese, so etwas. Dann haben wir dieses Grau, das das dunkelste von all diesen ist. Dann haben wir diese Primärfarbe an der Spitze, lassen Sie es an der Spitze bewegen, dann haben wir diese beiden Markenfarben.Lassen Sie uns diese nach oben bewegen, und das ist alles. Außerdem denke ich, es gab eine Farbe für den Hintergrund , der dieser ist; FAFD und so etwas. Wir können diese Farbe von hier hinzufügen, klicken Sie mit der rechten Maustaste auf Elemente hinzufügen, und es wurde hier hinzugefügt. Was ich hier mache, ist, dass ich sie tatsächlich so arrangiere und du kannst sie auch umbenennen, zum Beispiel, das ist mein primärer Blau, so etwas, dann kannst du wieder die gleiche Technik verwenden, grau 60 und Dinge so, was ich euch in der letzten Lektion 350 erzählt habe. So werden wir sie benennen. Sie können sie auch so nennen, zum Beispiel, das ist diese Farbe und wir können es vielleicht zur Hintergrundfarbe hinzufügen, so etwas. Sie können sie auf basierend auf ihrer Funktionalität benennen, Sie können sie auch so nennen, Sie können sie zum Beispiel, Textfarbe, dunkle Textfarbe, helle Textfarbe, Dinge wie diese. So verwalten Sie Ihre Farben in Adobe XD. Wenn Sie Ihre grexer-Stile zusammen mit den Farben hinzufügen möchten, können Sie mit der rechten Maustaste klicken und Assets einen grexer-Stil hinzufügen. Dies wird die Farbe und die Schriftgröße hinzufügen, alles hier drüben. Ähnlich, für andere, zum Beispiel, ist dies Ihr anderer Stil, können Sie diese Kieselsäure hinzufügen, so dass Sie weiterhin hinzufügen können. So erstellen Sie Ihre Styleguide Assets und Farben in grexer-Stilen in Adobe XD. So verwalten Sie Ihre Farben in Adobe XD. Ich hoffe, Sie haben diese Lektion genossen. Sie können auch wechseln, um eine Ansicht zu erstellen. Sie können hier drüben sehen, das ist schön, aber es zeigt nicht die Namensgebung leihen vor. Sie können auch nach Farbe suchen, zum Beispiel, wenn ich versuche, einen Namen zu verwenden, zum Beispiel primär, wird es mir die Farbe zeigen. Ich kann auch mit der rechten Maustaste klicken und es auf der Leinwand markieren , wo es auf verschiedenen Leinwänden verwendet wurde, also sind dies viele tolle Features und ich hoffe, Sie haben diese Lektion genossen. Wenn Sie Fragen haben, fragen Sie mich. Fahren wir mit der nächsten Lektion fort. 34. Farben in Photoshop verwalten: In diesem Video werde ich darüber sprechen, wie Sie Ihre Farbpaletten und Farben in Photoshop, Adobe Photoshop organisieren und speichern werden. Sie können auf der rechten Seite sehen, ich habe Farbfelder Panel. Wenn Sie es nicht sehen, können Sie zu „Windows“ gehen und hier klicken Sie auf „Farbfelder“. In der Musterleiste können Sie sehen, dass wir dieses Menü auf der rechten Seite haben. Wenn Sie hier klicken, haben wir verschiedene Optionen, kleine Thumbnails, kleine Thumbnails, große Thumbnail, kleine Liste. Wenn Sie Ihre Farben richtig wie primär blau, dunkel primär, sekundär aktiv, link blue,so etwas benannt sekundär aktiv, link blue, haben, müssen Sie wirklich zu dieser Ansicht wechseln, kleine Liste. Oder Sie können auch zu dieser großen Liste wechseln, Sie können sehen, ich kann leicht die Farben finden. Sie können sehen, die unteren Farben habe ich sie nicht genannt, so dass Sie sehen können, dass es schwierig ist, sie zu berühren oder sie zu verwenden. Also zuerst versuchen Sie immer, Ihre Farbfelder zu benennen. Zweitens, ist, dass, wenn Sie etwas haben, wie Sie hier sehen können, ich habe bereits viele Farben in meiner Farbpalette, und ich möchte ein neues Projekt beginnen, und jetzt möchte ich ein völlig separates Farbschema. Ich will nicht, dass sie hier oder hier hinzugefügt werden. Also, was ich tun werde, ist, dass ich zu meinen „Swatches ersetzen“ gehen werde. Ok? So können Sie Ihre Farbfelder zurücksetzen, Sie können neue Farbfelder laden, Sie können Farbfelder speichern. Sie können Farbfelder ersetzen. Also habe ich eine Datei, also werde ich sie zuerst speichern. Lassen Sie mich sie auf dem Desktop speichern. Mein aktuelles Musterfeld, 2019. Ok. Also habe ich mein Farbfeld gerettet und jetzt werde ich eine Akte haben. Lassen Sie mich Ihnen zeigen, wo es ist. Also habe ich eine Datei namens leere Farbfelder und ich werde auf „Farbfelder ersetzen“ klicken und das finden. Ich habe es gerade auf meinem Desktop „leere Schalter“ eingefügt, und ich werde es laden. Du wirst sehen, was passiert. Alle Farben sind verschwunden, also haben wir nur eine schwarze Farbe. Nun, was ich tun werde, ist, dass ich jetzt meine Farben hinzufügen werde. Ich habe gerade diese Farbe aufgenommen, ich werde hier drüben, und Farbwähler und werde zwei Farbfelder hinzufügen. Also, jetzt werde ich einen primären Kleber nennen oder vielleicht Bindestrich, ich werde Bindestrich verwenden, so etwas. Sie können sie auch zu Ihrer aktuellen Bibliothek hinzufügen. Wenn ich zum Beispiel hier klicke, ich sie meiner aktuellen Bibliothek hinzu und kann sie dann in Adobe XD, Adobe Illustrator, Adobe Photoshop, CC Live Software verwenden Adobe Illustrator, Adobe Photoshop, , die Bibliothek verwenden. Also, jetzt werde ich es hier drüben hinzufügen. Ich werde den nächsten auswählen, und ich werde erneut auf „Swatch“ klicken. Das ist mein, nennen wir es sekundär gelb. Dann werde ich hier rüber klicken und wie dies wird mein weißer Hintergrund oder so etwas sein , Hintergrund weiß. Dies ist wieder eine andere Farbe, vielleicht mittel oder so etwas. Also lasst es uns behalten wie Cyan. Also hier füge ich nur vier Farben hinzu. Sie können auch mehr hinzufügen, zum Beispiel, wie dicht und Töne, verschiedene dieser blauen Farbe hier drüben, zum Beispiel. Jetzt füge ich es hinzu, wie blau, zehn, so etwas. Dann werde ich wieder zu diesem blauen 20 gehen, so etwas. Dann werde ich über diese hier gehen, blaue 30, so etwas wie dieses. Also denke ich, ich habe jetzt mehr als genug Farben. Also, wenn Sie eine Farbe löschen möchten, können Sie es einfach abholen, greifen Sie es, und lassen Sie auf diesem Löschen und es wird gelöscht werden. Sie können auch mit der rechten Maustaste klicken und zum Preset Manager wechseln und hier können Sie sie verschieben, wenn Sie möchten. Zum Beispiel möchte ich, dass es hier drüben ist, und dann möchte ich, dass es hier drüben so ist. Damit ich sie fertig bewegen kann, und Sie werden sehen, dass sie arrangiert wurden. Es gibt also viele Dinge, die man mit ihnen machen kann. Also lassen Sie uns sie auf eine große Liste verschieben, und hier haben wir alle Farben richtig aufgelistet. So verwenden Sie verschiedene Farbpaletten, organisieren Sie Ihre Farben in Adobe Photoshop. Wenn Sie Fragen haben, die Sie mir stellen können. Fahren wir mit der nächsten Lektion fort. Zuvor werde ich Ihnen sagen, dass Sie diese leere Musterdatei herunterladen können. Ich werde es dir zeigen, dass ich es dir geben werde. Sie können Ihre Farbfelder einfach mit dieser leeren.aco- oder Farbmusterpalettendatei ersetzen, und Ihre Farben sind verschwunden. Also kommen wir zurück zu meinen Farben. Also möchte ich, dass sie mein aktuelles Muster sind, also werde ich es so in die kleinen Thumbnails laden. Ok. Das ist also alles. Wenn Sie Fragen haben, die Sie mir stellen müssen, fahren wir mit der nächsten Lektion fort. 35. Browsererweiterungen um Farben zu finden: In diesem Video werde ich mit Ihnen teilen meine Top-Farbauswahl und Farbschema generieren Plugins oder Erweiterungen, die Sie zu Ihrem Chrome-Browser und Ihrem Firefox-Browser hinzufügen können . Lasst uns anfangen. Zuerst werde ich mit einigen Chrome-Erweiterungen gehen, weil sie wirklich nett und wirklich großartig sind. Lassen Sie mich Ihnen zeigen, wie sie tatsächlich funktionieren. Hier habe ich einen von ihnen. Es ist eigentlich Website-Palette. Wenn ich darauf klicke, können Sie sehen, ich habe Streifen Seite jetzt. Es wird eine sehr schöne Palette erzeugen, genau wie ein Styleguide. Hier habe ich alle Farben. Ich habe sie auf eine sehr schöne Art und Weise. Am Ende können Sie Skizzenvorlage sehen, Adobes Farbfeld, öffnen Sie in der Google-Palette, öffnen Sie bei Coolers. Das ist wirklich großartig. Ich kann sie herunterladen. Dies ist das, denke ich, beste Plugin, das ich gesehen habe. Sie können hier sehen, haben wir alle verschiedenen Download-Optionen. Dann werde ich zur nächsten gehen, die Colorzilla ist, Sie hier sehen können. Das ist sehr alt. Ich benutze es von einer Menge, wie ich denke, zwei oder drei Jahre aus den letzten drei Jahren. Sie klicken einfach hier und Sie fangen an, Farbe von hier zu wählen. Ich bin mir nicht sicher, warum es nicht funktioniert. Ich muss eigentlich auf diese Seite gehen. Hier haben wir es. Sie können jetzt sehen, wann immer ich hier bin, zum Beispiel möchte ich diese grüne Farbe wählen, ich werde hier klicken. Es wird den hexadezimalen Wert auswählen und auch es wird es kopieren. Wenn ich diese Farbe in Photoshop, Sketch oder einem anderen einfügen möchte, muss ich nur V steuern oder befehlen, um diese Farbe einzufügen. Das hier ist Colorzilla. Die erste, die ich Ihnen gezeigt habe, ist Site Palette, diese. Dann ist das hier Colorzilla. Zum nächsten, der hier ist, Snatchr. Es wird wieder greifen alle Farben von dieser Website. Sie können hier drüben sehen, Textfarben. Dies sind die Hintergrundfarben. Es hat zwei Abschnitte, Textfarben und Hintergrundfarben. Sie können sehen, wie sie verschiedene Schattierungen von gräulichen Blues hier im Text verwendet haben. Es wird auch die Typografie Stile greifen. Kampfer wurde hier hauptsächlich auf der gesamten Website verwendet. Es gibt keine Option, diese herunterzuladen. Ich werde sagen, wenn Sie dieses bekommen möchten, ist es gut, dass die Farben in Hintergrund- und Textfarben getrennt wurden , aber nichts viel können Sie tun. Dann haben wir die nächste, die diese Palettab ist. Lassen Sie mich es Ihnen zeigen. Hier ist dieser, Palettab. Es ist auch für Firefox verfügbar. Es ist für Firefox und Chrome verfügbar. Wann immer Sie öffnen eine neue Registerkarte, Sie können hier sehen wir eine schöne Palette oder schöne Farbschema. Jedes Mal, wenn Sie dies tun, erhalten Sie ein neues Farbschema. Immer wenn ich einen neuen Tab öffne, wenige meiner Schüler, sie fragen mich immer wieder, was war die Erweiterung, die Sie verwenden, die diese Farbschemata zusammen mit diesen Google-Schriften erstellt haben. Das ist eigentlich Farbpalette. Tut mir leid, Palettab, das hier. Sie können es in solide herunterladen. Es ist auch für Firefox verfügbar. Nur zwei Erweiterungen sind für Firefox und Chrome beide verfügbar und das ist Palettab und Colorzilla. Dies sind sehr, man kann sehr alte Erweiterungen sagen. Dann ist der letzte, den ich Ihnen zeigen werde, dieser CSS Peeper. Lassen Sie mich Ihnen zeigen, was es tun kann. Lassen Sie uns das schließen. Hier haben wir es. Hier ist der CSS Peeper. Wenn Sie hier klicken, können Sie sehen, dass es Ihnen den Website-Namen zeigt, dann die Schriftarten, die hier über CSS Datei Ladezeit verwendet werden. Wenn Sie zu diesen Farben hier zu bewegen, können Sie sehen, dass es alle verschiedenen Schattierungen aufgelistet hat, die auf dieser Farbe verwendet wurden. Sogar die Deckkraft, zusammen mit der Deckkraft. Zum Beispiel wurde dieses verwendet 0 Prozent Deckkraft, 8 Prozent Deckkraft und all das. Sie können einfach von hier aus eine einzelne Farbe kopieren, aber Sie können nicht die gesamte Palette herunterladen. Wenn Sie zu diesem eine Assets gehen, zeigt es alle Assets, verschiedene PNGs und SVG, denke ich. Dies ist die Registerkarte, die wir suchen, so dass Sie jede Farbe kopieren können, die Sie mögen. Vielleicht mögen Sie nur eine Farbe und Sie möchten Ihr Farbschema mit diesem beginnen. Dies sind fünf verschiedene Plugins, die Sie herunterladen können und Sie in Ihrem Chrome-Browser und Firefox installieren können. Lassen Sie mich es Ihnen zeigen. Dies ist die Palettab in Firefox, Sie können sehen, dass es das gleiche lädt. Dann haben wir diese Colorzilla hier drüben. Sie können Colorzilla auch installieren. Es gibt noch einen weiteren, den ich Ihnen zeigen werde, welcher Style Guide Generator ist. Es funktioniert nicht mit allen Websites, aber wenn Sie hier klicken, können Sie sehen, dass es Styleguide generiert, ähnlich wie Site Palette, denke ich. Ich bin mir nicht sicher, ob Sie irgendetwas oder irgendetwas herunterladen können. Sie können keine Farbfelder oder Farbpalette herunterladen um sie in Photoshop oder Sketch oder Adobe XD oder was auch immer zu öffnen. Dies ist ein weiteres Werkzeug, Style Guide Generator, Palettab und Colorzilla. Wir haben einige Erweiterungen in Firefox, die gut für Farbschema Generierung sind , aber auf der anderen Seite, in Chrome, wir haben viele gute Optionen hier drüben. Im Moment ist der heutige Gewinner für mich die Site-Palette. Dies ist eines der besten Werkzeuge, denke ich. Sie können sehen, es kann die Skizzenvorlage und Photoshop herunterladen, um sich in Ihrem Lieblings-Design-Tool zu öffnen . Auch dieser ist sehr praktisch. Manchmal muss ich nur eine Farbe auswählen, also benutze ich diese. Ich wähle nur Colorzilla und wähle die Farbe aus und beginne von dort. Dies sind all die verschiedenen Erweiterungen und Plugins, die ich verwende. Wenn Sie weitere Empfehlungen haben oder etwas anderes verwenden, versuchen Sie, mich in der Diskussion von Befehlen zu zeigen. Ich hoffe, Sie haben dieses Video genossen. Lasst uns weitermachen. Wir sehen uns bald im nächsten Video. 36. Online-Tools für Farbschemata: Die meisten der neuen Designer neigen dazu, in Schwierigkeiten zu geraten, dass : „Welche Farbe sollte ich wählen? Oder „Von wo soll ich mein Farbschema starten?“ Zum Beispiel, wenn Sie ein eigenes Startup oder so etwas bauen, fragen Sie sich vielleicht „Wo soll ich meine Farben bekommen?“ Ich werde mit Ihnen einige meiner Werkzeuge teilen, nur fünf davon, die Sie verwenden können. Sie können sie verwenden, um Farben aus einem Bild oder Bild zu erzeugen. Wenn Sie ein Strandbild oder so etwas haben möchten, können Sie auch Farben von dort abholen. Also, wenn Sie wissen, was Ihr Thema ist, zum Beispiel, mein Thema ist Essen oder Landwirtschaft oder so etwas. Ich kann ein Bild von einer Umgebung machen und ich kann anfangen, mein Farbschema zu erstellen. Ebenso werde ich Ihnen zwei Werkzeuge zeigen, die ich normalerweise erforsche. Farbschemata sind bereits gebaut und wir können auch von dort aus beginnen. Lasst uns eingraben. Das erste Tool, das ich Ihnen zeigen werde, ist color.adobe.com und Sie werden auf diese „erkunden“ klicken. Sobald Sie auf diese Erkundung klicken, werden Sie viele coole Farbschemata sehen, mit denen Sie beginnen möchten. Es gibt, denke ich, vielleicht, mehr als Tausende von Farbschemata hier drüben. Hier haben wir die beliebtesten, am meisten verwendeten zufälligen alle Zeit in dieser Woche, so etwas. Sie können hier sehen wir auf der linken Seite, dieses Farbschema, das ist sehr helle Farbschema für vielleicht Damenparfüm oder vielleicht so etwas. Meistens ist es mit Frische und ein bisschen feminine Note verwandt, so können Sie diese sehen. Wenn Sie es herunterladen möchten, können Sie auf Download klicken. Sie können es auch speichern. Sie können es öffnen oder bearbeiten, wenn Sie möchten. Hier können Sie blau und Orangen und Grüns sehen. Das hier ist noch eine. Das ist eher mit der Natur verwandt, schätze ich. Dann haben wir verschiedene Schattierungen von Blues Ich liebe es wirklich. Dann haben wir dieses Blau und Orange, die violett blau sind, die meine Lieblingsfarben sind. Dann haben wir diese, sehr einfach grün und orange und gelb. Dies sind die verschiedenen Farbschemata. Was Sie hier tun wollen, ist zum Beispiel, ich will etwas vielleicht in Blau und Orange, ich werde hier drüben blau und orange tippen und Sie werden sehen, dass es viele verschiedene Farbschemata geben wird , die ich mit Blau und Orangen verwendet habe. Diese hier, die ich wirklich mag, ich denke, wir können das hier drüben leicht benutzen. Fangen wir mit hier an, lassen Sie uns versuchen, es zu bearbeiten. Hier haben wir das hier. Sie können sehen, dass es hier geöffnet wurde. Ähnlich, wenn wir zurück gehen, mal sehen, ob wir es speichern oder herunterladen können. Klicken wir auf „Download“. Wir müssen uns in unserem Adopt CC anmelden. Wie auch immer, lasst uns auf „Speichern“ klicken. Sie können auch Ihre eigene ID erstellen. Hier können Sie Ihre ID erstellen. Sie können auch herunterladen Adobe XD, die eine freie Software ist. Wenn ich auf die Info klicken möchte, können Sie sehen, dass dies der ganze Bildschirm ist. Ich könnte versuchen, den Screenshot hier drüben zu packen. Dafür benutze ich dieses Tool Jing. Wenn Sie Jing nicht haben, sollten Sie es herunterladen. Es ist ein kostenloses Tool und ich liebe es wirklich, wie es funktioniert. Manchmal ist es sehr praktisch für mich. Sie können auch diese Datei Kurz-Screen-Capture-Plug-in hier in Firefox und Google Chrome verwenden. Also, was ich mache, ist , dass ich normalerweise so etwas schnappe und ich werde mit diesem Farbschema beginnen. Dies wird meine Hauptfarben sein, dieses Blau und diese Orange. Dies ist ein dunkleres Blau, das ist weiß, und das ist ein bisschen blass Farbe hier drüben. Lass uns das schließen. So beginne ich mit Adobe Color CC. Sehen wir uns nun eine andere Seite an, wo ich normalerweise gehe, um verschiedene Farbschemata und verschiedene Farbpaletten zu erkunden. Hier ist der Explorer, versuchen Sie, darauf zu klicken und Sie werden Tonnen von verschiedenen Farbschemata sehen. Hier drüben können Sie sehen, dass es viele gibt. Sie können sie auch filtern. Zum Beispiel möchte ich blau und gelb. Mal sehen, was sind die Farbschemata hier drüben. Es dauert einige Zeit. Das braucht tatsächlich viel Zeit. Ich denke, ihre Suchmaschine ist langsam, aber ich habe jetzt blau und orange getippt und Sie können hier oben sehen orange und blau. Alle Themen, die mit Orange und Blau getaggt wurden, sind sie hier. Ich denke, ihre Suche ist ein bisschen langsam und träge. Ich werde so etwas nicht tun. Es wird viel Zeit dauern hier drüben. Also kann ich „Weiter“, „Weiter“ gehen. Hier habe ich ein paar gute Orange und Blues. Blau, Orange, Grün Blau, Orange, Grün Blau, Orange, Limette und viele andere Schemata. Sie können auch eigene Farbschemata erstellen und speichern. Wenn Sie zu meinem Profil gehen, werde ich Ihnen mein Konto und Profil zeigen, wo ich erstellt habe, ich denke, wie 10 oder 15 verschiedene Farbschemata und Farbpaletten. Ich werde diese mit Ihnen teilen, also keine Sorge, Sie können sie herunterladen und in jeder Ihrer App oder Software verwenden. Sie können hier sehen, ich habe gesunde Ernährung. Das ist alles grün, braun und gelb. Blau, Grün, Gelb, Sie können hier drüben sehen, sehr beliebtes Farbschema. Dies ist Orange-Kokosnuss, und das ist auch Braun und Orangen und Gelb. Dann haben wir Gun-Metal, Grün, Blau, und einige mehr grün und blau, verschiedene Versionen. Rot, Blau, Grün. Das ist sicher. Sie können das in jeder App verwenden. Ähnlich, wenige mehr. Dies sind wenige verschiedene Schattierungen von Blau, Blau und Cyan. Ich habe es in einigen meiner Kurse verwendet. Sie können einige weitere Projekt organisch sehen. Dies ist eigentlich analoges Farbschema, Grüns und Blues, Projekt V2. Dies sind 14 Farbschemata. Ich werde die auch mit dir teilen. Mach dir keine Sorgen, du kannst sie einfach herunterladen. Die nächste Sache ist, dass, wenn Sie zum Beispiel ein Bild oder ein Farbschema haben , ich mein Farbschema basierend auf einem Bild erstellen möchte. Ich werde dieses Bild hochladen. Dies ist von canva.com. Lassen Sie uns ein Bild auswählen. Sie können ein beliebiges Bild auswählen, wenn Sie möchten. Wählen wir dieses Bild aus meinem Studio aus. Ich denke, es wird einige Zeit dauern, also lassen Sie uns ein Bild aus meinen Bildern auswählen. Das sieht gut aus. Ich werde dieses Bild hier klicken und mal sehen, welches Farbschema es mir zeigen wird. Hier habe ich ein Bild von einem Interieur des Schlafzimmers und Sie können sehen, dies sind verschiedene Farben. Es hat mir gezeigt, hellblau, dunkel schiefergrau, hell schiefergrau, und diese wenigen Farben. In ähnlicher Weise ist dies ein weiteres Werkzeug, das Sie auch verwenden können. Schnappen Sie sich einfach ein Bild, zum Beispiel, ich werde dieses zu greifen. Ich mag dieses auch, weil es viele verschiedene Arten von Farben zeigt. Sie können hier drüben sehen. Eigentlich denke ich, es gibt etwas, das ich nicht verstehen kann. Ist es freie Farben oder Triade? Was auch immer es ist, ich denke, es versucht, einige Farbpalette basierend auf diesen Harmonien der verschiedenen Farbdreiecke zu erzeugen , Triade kostenlos. Das ist eigentlich sehr hilfreich. Es gibt viele verschiedene Farben zur Auswahl. Dann ein anderes Werkzeug, das dieses ist, palettgenerator.com. Laden wir hier ein Bild hoch. Hier haben wir es. Sie können sehen, dass es mir sehr weniger Farben zeigt, all die Brauntöne. Nehmen wir es zu zehn dominanten Farben. Hier sind eigentlich ein paar weitere Farben. Ich mag es in gewisser Weise, weil es all die verschiedenen Schattierungen, Stärken und Töne der Farben wie hier zeigt . Auch dies ist der Hintergrund. Verwenden Sie Farben auf den Hintergründen hier drüben. Dennoch fehlen noch ein paar Farben. Wieder eine weitere, colormind.io. Sie können hier auch ein Bild hochladen. Fangen wir mit diesem an. Es wird ein Farbschema basierend auf diesem Bild zu bauen. Jetzt können Sie auch auf „Generieren“ klicken, und es wird Ihnen ein paar weitere Schattierungen zeigen. Sie können ein schönes Farbschema sehen. Es erstellt tatsächlich die Schattierungen aus dem gleichen Bild, das wir gerade hochgeladen haben. Dies sind ein paar Werkzeuge, die Sie verwenden können. Diese beiden Adobe Color CC und coolers.io, Entdecken Sie die Farbpaletten, generieren Sie Farbpaletten aus den Bildern. Das sind vier Werkzeuge, und das ist alles. Wenn Sie Fragen haben, die Sie mir stellen müssen, fahren wir mit der nächsten Lektion fort. 37. Color online finden: In diesem Video werde ich Ihnen einige weitere Tools zeigen, die ich benutze und ein paar weitere Dinge, die Sie im Auge behalten müssen, wie, was sind die Standardfarben für iOS oder Android oder Windows Betriebssystem. Wenn Sie also für eine iPhone-App oder eine Android Material Design-App entwerfen, müssen Sie wissen, was ihre Systemfarben sind. Ich werde Ihnen auch einige der Instagram-Farbschema Generierung Konten zeigen , wo die Leute, die sie versuchen, eine Menge coole Farbschema zu erstellen , so dass Sie von dort abholen können. Lasst uns loslegen. Dies ist die erste Seite, ich denke, ich habe es oft verwendet. Ich denke, dies sollte eines der besten Werkzeuge sein, um das Thema Ihres Unternehmens zu finden. Zum Beispiel möchte ich ein ernstes, etwas. Mal sehen, was sind die Farben gibt es, diese Farben sind meist orange braun, Sie können Blues sehen, also werde ich mit meinem Team meiner Farbschemata beginnen. Zweitens werde ich Ihnen zeigen, was die Standardfarben von Windows, iOS und Android sind. Dies ist ein Artikel von icons8.com, und Sie können sehen, dass sie alle verschiedenen Puller gezeigt haben. Dies ist Windows 10-Entwurfspalette. Sie können es von hier, dem offiziellen Styleguide, bekommen. Als nächstes haben wir iOS 10 oder iPhone-Betriebssystem-Standardwerte. Sie können hier sehen, wir haben rot. Dies sind unterschiedliche Werte für die verwendeten Farben, die in iPhones oder iOS-Betriebssystem verwendet wurden. Dann haben wir dieses Android Material Design, Sie können sehen, dass sie viele skalierte Farbpaletten haben. Wir haben verschiedene Skalen von Farben. 50-900. [unhörbar] der gleichen Farbe und sie haben viele Farben, die Sie von dort auswählen können. Dies ist ein großartiger Artikel, den ich mit Ihnen alle Links teilen werde, so dass Sie sich keine Sorgen darüber machen müssen. Hier haben wir wieder, das sind die Farben von tatsächlich den menschlichen Schnittstellenrichtlinien von Apple.com. Dann werde ich Ihnen jetzt einige der inspirierenden Websites zeigen. Hier habe ich das von etwa zwei oder drei Jahren vor, ich habe es gerettet, thedaycolor.com. Sie können sehen, es gibt Tonnen von großen, sehr modernen, sehr einzigartigen Farbschemata. Sie können sehen, dass wir hier drüben haben und hier haben wir sehr dunkel bläulich lila und orange drauf. Ich bin mir nicht sicher, ob du das siehst. Dies ist eine andere, Sie können es in jedem Interface-Design verwenden, blau, rot, grün und gelb. Sie haben alle Farben, Statusfarben, alles. Sie können mit so etwas anfangen. Hier haben wir einige Instagram-Follower und Instagram können Sie sagen, ich bin mir nicht sicher, was Konten ist. Ich falle diese tolle Farbe. Und dieser Typ oder das Mädchen oder wer auch immer er ist oder sie ist, der Anteil. Viele große, Sie können hier Farbschemata sehen. Ich denke, sie haben Tonnen von Farbschemata und du kannst, wenn du anfangen willst oder hier zum Beispiel, dieses lila und grün sieht gut aus. Auch ich habe hier lila und cyan Farbe, sehr schönes Farbschema. Es gibt Tonnen von großen Farbschemata hier. Wir haben wieder, orange und blau, sehr beliebt, ich liebe es. Dann ist das andere Colors Cafe, colors.cafe, das ist ein anderes und es hat auch viele Farbschemata, die Sie sehen können. Es zeigt auch, wie tatsächlich er oder sie fügt mehr Farben hinzu. Ich mag es wirklich, wie es auf verschiedenen Hintergründen zeigt, dunkel und hell. Hier haben wir hell und dunkel. Das ist Farben.cafe. Sie können mit jedem Farbschema wie diesem beginnen, das sieht gut aus. Dies ist ein tolles Farbschema, orange und blau. Sie können sehen, das Geheimnis hinter diesen ist, Sie können sehen, ob Sie die ganzen fünf Farben sehen, dass Luminanz ist, es ist nicht sehr verschieden voneinander. Alle Farben sind, haben das gleiche Licht emittiert, so dass sie wie mittlere matte Farben, sehr anständige Farben sind. Sie können sie anständige Farben nennen. Sie sind nicht sehr scharf, sie sind nicht sehr lustig oder sie sind nicht sehr, Sie können sagen, ich gebe Ihnen eine Stimmung. Wenn Sie sich hier ansehen, lassen Sie mich Ihnen zeigen, was ich entwerfe. Sie können diese beiden Farben sehen, sie sind sehr scharf, sie haben viel Kontrast, das ist eigentlich sehr dunkel, violettblau. Lassen Sie mich es Ihnen zeigen. Eigentlich ist das mein Farbschema, das ich gerade baue. Ein weiteres Farbschema, dieses Experimentieren in Adobe Illustrator, können Sie es überall tun. Sie können hier sehen, ich habe, das ist meine eigentliche Primärfarbe und diese hier. Ich benutze entweder diese dunkle. Ich verlängere es mit Ihnen können einige blasse Farben sehen, einige helle Schattierungen von Gelb, einige Blues. Dies ist, ich denke, meine andere Farbe, die ich versuche, in mein Farbschema hinzuzufügen, aber im Moment werde ich nur mit diesen beiden gehen. Dies ist dunkelviolett blau und oranglich gelbe oder goldene Farbe. So arbeite ich gerade jetzt. Ich habe verschiedene Online-Tools verwendet, um dies zu generieren so dass Sie nicht sagen können, dass ich, Sie verwenden nur , Ich wähle die ersten beiden Farben selbst und dann erweiterte ich es mit einigen Online-Tools wie Sie Farben hier sehen, ich bekam es von coolers.co Auch wenige Farben hier sind sie auch von coolers.co. Diese Saccharose, ich glaube, ich habe von woanders abgeholt. Wie auch immer, so baue ich tatsächlich mein Farbschema. Dies sind all die Inspirationen, die Sie auch um Sie herum suchen können in der Natur, in den verschiedenen Anzeigen, auf den Werbetafeln, alles. Ich hoffe, Sie haben diese Lektion genossen. Wenn Sie Fragen haben, lassen Sie uns besprechen und mit der nächsten Lektion fortfahren. 38. Online-Tool für Farbverläufe: Aus den letzten Jahren wurde Gradienten viel in Ihrem Web-Design, mobilen App-Designs von verschiedenen Designern, UI-Designernund Web-Designern verwendet mobilen App-Designs von verschiedenen Designern, UI-Designern , sie waren in einer Menge Trend und sind immer noch, also bin ich gehen, um mit Ihnen fünf oder sechs verschiedene Ressourcen und Websites zu teilen, die Sie verwenden können, um eine lineare Verläufe und andere Verläufe zu erhalten, die Sie sie in Ihrem Design verwenden können. Die erste, die ich werde Ihnen zeigen, ist web gradients.com, und die coole Sache darüber ist, können Sie Skizzendatei und PST-Datei herunterladen. Es gibt ich denke, 180 verschiedene Farbverläufe und Sie können sie auf Tasten oder alles, was Sie wollen, verwenden. Ich liebe das wirklich, weil Sie auch das CSS kopieren können. Wenn Sie ein Webentwickler sind, können Sie CSS kopieren. Sie können Skizze oder PST herunterladen, Sie können diese Skizzendatei auch in Adobe XD öffnen, wenn Sie möchten. Das ist, glaube ich, der Himmel für Webgradienten. Wenn Sie hier auf die Skizze klicken und Sie es herunterladen müssen, wird es Ihnen diesen Bildschirm zeigen, WebGradients Skizze, gumroad.com, und die meisten meiner Schüler, Ich bin mir nicht sicher, warum sie Probleme beim Herunterladen haben. Da steht $0. Wenn Sie es spenden möchten, können Sie es spenden. Ansonsten drücken Sie einfach Null hier und klicken Sie auf, I Want This, und Sie können es herunterladen. Ebenso haben wir eine andere Website, grabient.com und Sie können auch herunterladen Skizze, Sie können an der Spitze sehen, hier gibt es, Ich denke, diese sind wie 20 oder 30 verschiedene Farbverläufe. Dann haben wir diese gradients.cssgears.com. Hier haben wir wieder unterschiedliche Steigungen. Diese sind nicht zu groß, aber die coole Sache darüber ist, wenn Sie auf eines davon klicken, können Sie auf dieses HTML5, Adobe XD oder Skizzen-Symbol klicken , um die Datei sofort herunterzuladen. Ich habe versucht, dieses herunterzuladen. Also, wenn Sie hier klicken, wird es XD-Datei für diesen Farbverlauf herunterladen. Ein weiteres Werkzeug, das ich in der Vergangenheit verwendet habe, ist es, zwei Farben anmutig zu mischen. Also, was ich normalerweise mache, ist eine Farbe von hier auszuwählen, zum Beispiel diese und diese. Wenn ich auf Mischung klicke, können Sie sehen, wie es gut gemischt ist. Ebenso können Sie, wenn Sie ein paar Einstellungen hier ändern können, auch den Code, das Design oder Website-Code kopieren . Eigentlich ist es CSS-Code für Hintergrundverläufe. Dies ist eine andere Website, colinkeany.com Mischung Werkzeug. Hier ist noch eine, uigradients.com. Ich mag es nicht zu sehr, aber ich denke, es ist großartig, dass Sie die JPEG-Datei und auch das CSS von hier herunterladen und erhalten können. Wenn Sie ein Webentwickler sind, können Sie das tun. Hier haben wir verschiedene Steigungen und wenn Sie hier rüber gehen, können Sie einige mehr zeigen. Zum Beispiel, ich will etwas hier drüben. Also nicht zu nützlich, aber ich denke, Sie können etwas von hier bekommen, etwas Inspiration. Dann haben wir gradients.io. Es gibt wieder Farbverläufe in verschiedenen Farben und sie sind nur Verläufe, Sie können sie nicht herunterladen oder irgendetwas. Wieder haben wir ein weiteres Werkzeug, das colorspark ist und verschiedene Farben erzeugen wird abhängig davon, dass nur verschiedene Dinge wie diese variiert werden. Sie können es auch CSS kopieren. Auch gibt es ein Farbwerkzeug für dieses ein, also wenn Sie möchten, können Sie zum Farbwerkzeug wechseln und es wird einige generieren. Diese Farbe sieht gut aus, wenn ich also einige schnelle Farben brauche, kann ich das tun. In ähnlicher Weise hat es auch ein Skizzen-Plugin. Sie können hier sehen Farben Funken Skizze Plugin. Sie können es herunterladen und Sie können Farben in mit Control Shift und C oder Control Shift C bekommen, um sie sofort in Ihre Designs zu bekommen, so etwas. sind all die verschiedenen Werkzeuge, die ich dir zeigen wollte. Ich liebe diesen hier wirklich, Web-Gradienten. Schauen Sie sich dieses an, laden Sie es herunter und versuchen Sie, Ihre Vermögenswerte von Farben zu bauen und Farben von dort zu verwenden. Ich hoffe, Sie haben dieses Video genossen. Starten Sie eine Diskussion oder geben Sie mir einige Kommentare dazu, wenn Sie Fragen haben, stellen Sie mich. Wir sehen uns bald in einem anderen Video. 39. Tricks, um neue Kurses zu erstellen: In diesem Video werde ich mit Ihnen einige der Tricks teilen, um cool aussehende Farbverläufe zu erstellen und wie Sie sie in Ihrem Benutzeroberflächendesign verwenden können. Auf der rechten Seite können Sie hier drüben sehen, ich werde hier nichts erschaffen. Dies wird ein weiteres Tutorial sein, in dem ich Ihnen zeigen werde, wie Sie dies in figma erstellen. Aber im Moment sind wir mehr daran interessiert. Es gibt viele verschiedene Techniken. Wie Sie sehen können, habe ich hier drüben dunkel und hell geschrieben. Jetzt ist die erste Technik, die ich benutze, lassen Sie mich alles öffnen. Die erste Technik, die ich benutze, ist, dass ich in diesen linearen Gradienten gehen werde. Sie können hier drüben sehen, zuerst ist Winkel, also ist es in diese Richtung. Winkel ist wirklich wichtig. Dieser Farbverlauf funktioniert, wenn Sie auf diesen Kreisdiagramm anwenden, möglicherweise nicht, da der Winkel anders ist. Der erste Trick ist, dass Sie eine Farbe auswählen müssen, die den gleichen Farbton 205 sein wird. Es wird eine leichtere Version sein. Dann haben wir noch einen, der etwas dunkler wird. Nun, was ich versuche zu tun ist, ich versuche, ein wenig Farbton zu ändern, Sie können hier sehen, von 205 sprang ich auf 216. Dies ist ein weiterer Trick, den ich Ihnen in meinem Farbschema Kurs beigebracht habe. Jetzt können Sie sehen, dass Sie den Winkel hier ändern können, wenn Sie einfach so ziehen möchten und wo immer Sie denken, es ist bequem, können Sie es so fallen lassen. Ich werde das Licht hier in diese Richtung halten und hier drüben dunkel sein. Der erste Trick ist dunkel und hell. Wir haben einen sehr dunklen Farbton auf der einen Seite und sehr helle Farbe auf der anderen Seite und sie sind fast der gleiche Farbton. Sie haben die gleiche Farbe. Nun, wenn Sie zu diesem gehen, so wird diese tatsächlich analoge Farben genannt. Analoga Farbe bedeutet, dass wir Farben verwenden, die sehr nahe beieinander auf dem Farbrad sind. Lassen Sie mich Ihnen das Farbrad zeigen. Hier haben wir das Farbrad. Wenn wir analog gehen, können Sie sehen, dies sind die Farben in analog. Immer wenn du einen von ihnen bewegst, werden sie sich zusammen bewegen. Wir haben Grün, Cyan, Blau, dann haben wir Grün und Blau, Orange und Grün, dann haben wir gelblichen Bernstein mit Orange, dann haben wir Rosa und Lila, Rot und Rosa. Dies sind alle analogen Farben. Sie sind sehr nahe beieinander auf dem Farbrad. Das ist der zweite Trick. Was ich brauche, ist, ich benutze diese blaue Farbe und grüne Farbe. Sie können dieses Analoga Farbschema sehen. Wir haben Blaue und Grüns. Auf der einen Seite benutze ich diese blaue Farbe. Zweitens, auf der anderen Seite habe ich grüne Farbe verwendet. Dies wird als zweiter Trick zum Erstellen von analogen Farben bezeichnet. Hier haben wir einen anderen Farbverlauf, und es wird durch die Verwendung von analogen Farben gemacht. nächste ist die Verwendung komplementärer Farben. Blau steht dieser gelblichen oder violetten Farbe gegenüber. Ich habe komplementäre Farben auf Farbrad verwendet. Lassen Sie mich Ihnen zeigen, was eigentlich ergänzende Farben sind. Lassen Sie mich sehen, ob ich das Farbrad habe. Hier haben wir die kostenlose. Wenn ich versuche, hier eine Farbe auszuwählen, wählen wir diese aus. Wenn ich kostenlos gehe, wird es in Orange gehen. Wenn ich versuche, diese Farbe auszuwählen, bewegen Sie diese Farbe hierher, Sie können sehen, dass sie sich innerhalb dieses gelben oder orangefarbenen Abschnitts hier bewegt. Sie sind völlig entgegengesetzt zueinander auf dem Farbrad. Das ist ein weiterer Trick. Wenn Sie einen Farbverlauf erstellen, können Sie ergänzende Farben für verwenden. Die nächste ist, ich verwende drei Farben. Das sind wieder komplementäre Farben, aber eigentlich bin ich von einer Szene inspiriert, zum Beispiel Sonnenuntergang mit vielen dunklen Wolken. Sie können diese Farben auch von einem Bild aufnehmen, also ist dies ein sehr einfacher Trick. Viele Designer, wissen das nicht, deshalb habe ich es unter dem Namen Sunset Wolke Farben gespeichert. Wenn ich hier rüber gehe, siehst du, dass es drei Farben hier drüben hat. Dies ist die Orange oder Sonne hinter den Wolken. Das ist die dunkle Wolke hier drüben, und das ist die andere Wolkenfarbe, die ein bisschen heller blau ist. Oder Sie, wie Sie sehen können, sagt es, dass es die Aufhellung in der Wolke ist. Das liegt an dir. Das ist eigentlich dieser Gradient hier drüben, eins, zwei, drei. Sie können die Stopps überall verschieben, wo Sie wollen. Du kannst das hier rüber bewegen, wenn du willst. Bewegen Sie das hier rüber, egal welche Farbe Sie mehr wollen. Ich mag es so, also ist das ein weiterer Trick. Sie können Verläufe basierend auf Farbschemata aus verschiedenen Bildern, aus verschiedenen Szenen, Naturszenen erstellen. Sie eignen sich hervorragend für die Erstellung dieser Farben und Verläufe. Nun, da der letzte Trick ist, dass wir die gleiche Farbe der monochromatischen Farbe verwenden. Lassen Sie mich es Ihnen zeigen. Wir haben diese Orange hier drüben, die 18 hier drüben ist. Dann ist das 43 Farbton. Aber es ist eigentlich, wenn wir hierher ziehen, können Sie sehen, dass ich versucht habe, die Farbe in diesem Bereich hier drüben zu bewegen, was ein bisschen grauweiß ist. Was ich getan habe, ist, lassen Sie mich es Ihnen zeigen. Lassen Sie es uns hier rüber bringen. Lass es uns 18 behalten. Ich verwende die gleiche Farbe auf beiden Stopps. Diese werden grundsätzlich Stopps genannt. Ein 100 Prozent Stopp, 0 Prozent stoppt. Von hier aus, 0 auf 100 Prozent. Ich kann es so bewegen. Wenn ich das hier verschieben will, kann ich das benutzen. Das ist ein weiterer Trick. Sie können einzelne Farbe mit zwei Stopps verwenden. Man wird ein bisschen auf der grauen Seite sein, vielleicht wie dieses gräuliche Weiß. Der andere ist hier drüben. In ähnlicher Weise können Sie es so verwenden, und der andere wird in diesem dunkleren Abschnitt hier drüben sein. Dies wird grau plus Farbe oder weiß plus Farbe sein, oder das ist eigentlich monochromatisches Farbschema. Eine einzelne Farbe. Hier verwenden wir tatsächlich die einzelne Farbe, aber wir haben den Farbton ein wenig verschoben. Lassen Sie mich es Ihnen zeigen, wenn Sie sich nicht erinnern. Das ist 205, aber der dunklere hatte 216. Aber hier verwenden wir den gleichen Farbton für die beiden Stopps. Dieses Feuerzeug hat 18 und die Sättigungspraxis ist anders. Lassen Sie es uns so hierher bringen. Sie können sehen, dass dies diese Lektion beenden wird, wenn ich Ihnen zeigen möchte, wie Sie sie in der Benutzeroberfläche verwenden können. Dies sind zwei Beispiele. Sie können sehen, dass dies hell bis dunkel ist, mit einigen Variationen wie dieser. Dann haben wir dieses, das den Sonnenuntergang oder von der Natur inspirierte Farbschema hat, wo wir zwei entgegengesetzte Farben haben. Eigentlich werden hier drei Farben verwendet, lila, blau und orange. So wenden Sie Ihre Farbverläufe tatsächlich im Farbschema und in Ihren Benutzeroberflächen auf Ihren Websites an. Einige der Gradienten, sie werden großartig auf Hintergründen arbeiten. Einige von ihnen werden an [unhörbar] arbeiten, denn wie dieser ist dies ein sehr dunkles und helles. Dies wird nicht auf dem ganzen Hintergrund funktionieren, weil wir etwas Text und andere Dinge über den Hintergrund stellen müssen. Denken Sie daran, dass Sie, wenn Sie so etwas verwenden, einen helleren Hintergrund verwenden müssen. Gradienten, zum Beispiel, wie dieser, kann dies als Hintergrund verwendet werden. Aber diese Dunkelheit und sehr hell haben viel Kontrast. Wenn Sie viel Kontrast im Farbverlauf, Stopps haben, können Sie sie nicht als Hintergrund verwenden. Lassen Sie uns hier weiter gehen und lassen Sie mich mit Ihnen einige der Steigungen online teilen. Sie können hier sehen, ist ein Gradienten Maker von coolors.co. Sie können Farben wählen, unabhängig von der Farbe, die Sie verwenden möchten. Sie können auch den CSS-Code von hier kopieren. In ähnlicher Weise haben wir einen anderen, gradient.com. Dies ist eine andere Website, es hat eine Menge von Gradienten. In ähnlicher Weise haben wir cssgradient.io. Wir haben viele verschiedene Websites hier drüben, UIgradients, Grabient, Gradient Hunt, Mesh Gradients und WebGradients. Es braucht sowieso einige Zeit, um zu laden. Hier sind einige weitere Generatoren, CSS-Farbgeneratoren, Gradientengeneratoren, wo Sie die Farbe aufnehmen und den Farbverlauf generieren können. Das ist der Farbverlauf. Sie können sehen, dass dies auf einem Hintergrund wirklich schön aussieht. Wenn ich versuche, die Farbe hier auf dieses zu ändern, sieht das wirklich toll aus, es ist langweilig, aber es sieht wirklich toll aus. Auf diese Weise erstellen Sie verschiedene Farbverläufe, und dies sind verschiedene Techniken, die Sie verwenden können. Ich hoffe, Sie haben diese Lektion genossen. Wenn Sie Fragen haben, können Sie mich immer fragen. Fahren wir mit der nächsten Lektion fort. 40. Luminace of Farben in Farbschema NEUE Kurses: In diesem Video werde ich über ein sehr wichtiges Thema im Zusammenhang mit Farbschemata sprechen , die Farbluminanz ist. Nun, Farbluminanz ist eigentlich Teil von zwei Dingen. Ein Faktor ist der Farbton, welcher Farbton Sie ausgewählt haben. Einige der Farbtöne, wie Sie hier oben sehen können gelb, das ist Grün, dieses hellblau, dieses yanish blau, die Farben hier drüben, diese haben natürlich mehr Leuchtkraft, sie haben mehr Lebendigkeit in ihnen. Wenn Sie Farben auswählen , müssen Sie zwei Faktoren berücksichtigen. Eines ist, was die Sättigung dieser Farbe ist, weil die Sättigung tatsächlich die Luminanz verstärken wird. Luminanz ist nur Sie sehen, dass einige Farben sehr scharf sind, sehr lebendig, man kann sagen, dass sie mehr Licht von ihnen als andere emittieren. Dies ist, was tatsächlich Luminanz ist und Luminanz hat zwei Dinge zu beachten, eine ist Sättigung, hohe Sättigung bedeutet hohe Luminanz. Auch wenn Sie einen Farbton von hier aus diesem gelben oder grünen Bereich oder diesem Abschnitt hier ausgewählt haben, können Sie auf der linken Seite sehen wir Luminanz 94, 83, 80 Prozent, 82 Prozent, 87 Prozent. Dies ist natürlich vorkommenden Luminanz ähnlich, diese Farbe hier drüben, es hat 70 Prozent, diese rosa lila Farbe es ist sehr lebendig. Ich werde Ihnen eine sehr einfache Technik zeigen, die Sie einige der Farben anpassen müssen. Wenn Ihr Farbschema dieses Gelb oder Grün oder diese Farbe oder diese Farbe hat, müssen Sie Ihre Sättigung und Helligkeit anpassen um sie gleich gut zu machen oder mit Ihren anderen Farben zu arbeiten. Lassen Sie mich Ihnen ein Beispiel zeigen. Jetzt können Sie auf der linken Seite sehen, ich habe oben ausgewählt, dieses blau, grün, gelb, dieses lila und dieses rot. Jetzt können Sie sehen, dass dieses Gelb sehr lebendig ist, dieses Grün ist auch aus dem gleichen Abschnitt, hier können Sie 83 Prozent sehen, das sind die Luminanzfaktoren. Hier nochmal, rot und dann haben wir dieses Purpur. Dies haben wieder mehr Vibrationen. Jetzt können Sie sehen, alle diese Farben, die ich ausgewählt habe, haben 100 Prozent Sättigung und 100 Prozent Helligkeit. Sie können natürlich grün und gelb sehen und dieses rosa, sie sehen lebendiger für mich aus. Nun, viele Designer habe ich gesehen, dass sie Fehler machen, wenn sie ihre Farben auswählen. Nun, was Sie tun müssen, wenn Sie diese einfachen Farben verwenden, verwenden Sie eine Menge Sättigung. Sie müssen es ausgleichen, Sie müssen den Luminanzfaktor reduzieren. Sie müssen mit arbeiten, dass Sie am unteren Rand sehen können, habe ich diese Farben angepasst. Zum Beispiel, diese, wenn ich Ihnen zeige, können Sie dies sehen, Helligkeit ist 88 Prozent, Sättigung ist 87. Wenn ich es abfärben möchte, kann ich hier die Sättigung reduzieren und die Helligkeit erhöhen. Hier gefällt es mir besser, 91 Prozent. Jetzt können Sie diese Farbe sehen, wenn wir vergrößern ist viel besser, als diese zu betrachten. Sie können diese Farbe nicht länger betrachten. Ähnlich für dieses Grün müssen Sie es an Ihr Farbschema anpassen, Sie müssen es abfärben. Sie müssen seine Sättigung, seine Helligkeit, seine Lebendigkeit, seine Luminanz abstraffen . Jetzt können Sie alle diese Farben hier sehen, dieses Gelb, dieses Blau, dieses Grün, sie sind fast näher beieinander im Luminanzfaktor. Sie können sehen, dass sie zueinander gehören, anstatt Sie hier sehen zu können, einige sind ein bisschen weniger leuchtend oder weniger lebendig. Einige sind sehr lebendig, sie werden nicht gut zusammenarbeiten. Auch für Menschen können sie diese Farben, die eine sehr hohe Sättigung haben oder eine sehr hohe Leuchtdichte haben, nicht im Auge behalten . Du musst deine Farben manuell anpassen, wie du hier drüben sehen kannst, dieses Blau, ich kann hier rüber gehen. Ich muss es etwas abschwächen. Ich werde mich hier bewegen, ich werde mich von diesem Bereich entfernen, weil das sehr lebendig ist, das ist eine hohe Sättigung. Dies ist auch hohe Sättigung und Dunkelheit, so werde ich meine halten, Sie können Farbe hier sehen, Auswahl hier drüben. Ähnlich, dieses Rot kann man sehen, ich habe Ton es nach unten und von 100 Prozent habe ich es reduziert Sättigung auf 75 Prozent und Helligkeit ist 85 Prozent. Jetzt können Sie sehen, dass es einfacher ist, sich anzusehen, auch wenn Sie es irgendwo hierher bewegen wollen , also sieht das besser aus. Ähnlich ist diese Farbe, das ist immer noch sehr scharf und lebendig für mich, so dass ich werde es ein wenig hier unten zu straffen. Das Grau, ich werde versuchen, etwas Grau hier drüben zu machen, ein bisschen dunkel. Jetzt haben sie sich an mein Auge angepasst. Wenn Sie nun ein Farbschema erstellen, sollten Sie nicht versuchen, solche Farben zu verwenden. Stellen Sie sicher, dass ihre Luminanz, ihre Sättigung Ton nach unten ist, es ist einfacher für die menschlichen Augen zu betrachten. Ich habe einige meiner Schüler gesehen, dass sie versuchen, diese Art von Farben zu verwenden, dies ist der sehr große Fehler, viele Anfänger Designer oder nervöse Designer sie machen. Denken Sie also daran, dass Sie die Sättigung anpassen müssen und auch wenn Sie in diesen Farbtönen wie dieses Gelb und dieses Grüns oder dieses eine oder dieses sind, sind sie natürlich lebendiger. Sie sind von Natur aus leuchtender. Sie werden mehr Licht ausstrahlen. Gelb ist sehr näher an Weiß, daher hat es den Lichtfaktor, wie Sie sehen können, 94 Prozent, so dass es nur sechs Prozent unter der weißen Farbe ist. Ich hoffe, Sie haben jetzt das Konzept der Luminanz und wie Sie das in Ihren Farbschemata verwenden können. Wenn Sie Fragen haben oder nichts verstanden haben, können Sie mich immer fragen. Bis dahin werden wir uns in einer anderen Lektion treffen. 41. Was als Nächstes ?: Nun, vielen Dank, dass du mit mir zusammen mit dieser ganzen Zeit zusammen bist und zusammen mit mir gelernt hast. Ich hoffe, Sie haben etwas Nützliches gelernt. Wenn Sie etwas nicht verstehen oder Fragen haben, können Sie mich jederzeit über diese Plattform kontaktieren. Sie können mich jederzeit über meine Website learnuxid.com erreichen. Sie können mich kontaktieren, Sie können mir eine E-Mail schicken. Sie können mich in sozialen Netzwerken anschließen und mir Fragen oder irgendetwas stellen, Fragen zu User Experience Design, User Interface Design oder Freelancing im Allgemeinen. Bis dahin werden wir Sie in einem anderen Kurs sehen. Schauen Sie sich meine anderen Klassen und Kurse über Design, über Typografie, Layout-Design, Farbschemata und all das andere Zeug an. Versuchen Sie, ehrliche Bewertung zu hinterlassen, schreiben Sie einige Kommentare über das, was Sie in diesem Kurs gelernt haben. Bis dahin sehen wir uns bald in einer anderen Klasse oder Kurs. Bis dahin, kümmert euch und tschüss.