Color für UI/UX Design

1. Kurs-Einführung: Farbe ist einer der wichtigsten Bestandteile des Eric Designs , da die Farbe die Stimmung Ihrer Zuschauer bestimmt. Es bestimmt die Richtung, in die sie gehen werden, und bestimmt auch die Markenwerte und die Markenstärke. Daher werden Ihre Zuschauer diese Farben mit dieser bestimmten Marke verbinden. Es gibt viele verschiedene Möglichkeiten, mit Farben im UX-Design der Benutzeroberfläche zu arbeiten. Aber in dieser Klasse werden wir uns nur auf die wichtigsten Dinge konzentrieren. Denn sonst könnte dieser Kurs bis zu 12 oder 13 Stunden dauern oder so ähnlich. Hey Designer und mein Name ist Alex. Und in dieser Klasse werden wir über Farbe im UX-Design der Benutzeroberfläche sprechen. Als Gründer von Web Donut haben wir 500 Designprodukte neu erstellt. Ich bin auch Lehrer und habe bisher 30 verschiedene Kurse erstellt, die von UI, UX-Design bis hin zu Social Media und Design reichen. In dieser Skillshare-Klasse werden wir erläutern, warum die Farbe wichtig ist, welche Farben existieren und wie ordnen Sie die Farben an und wie wählen Sie Ihre Amin-, Sekundär- und Tertiärsäulen aus. Wir werden über verschiedene Farbkombinationen sprechen, welche Farbkombinationen gibt es und wie verwenden Sie sie in Ihren Designs? Und danach zeige ich Ihnen einige erstaunliche Farbauswahl-Tools , die Sie online finden können, die Ihnen bei der Auswahl von Farben für Ihre UI-UX-Designprojekte massiv helfen werden . Schließlich zeige ich Ihnen, wie Sie großartige Styleguides für Entwickler erstellen, die Adobe XD verwenden , und wie Sie diese Styleguides Ihren Kunden und Entwicklern zur späteren Verwendung präsentieren können. Ihr Klassenprojekt für diese Klasse besteht darin, Ihre ideale Farbkombination mit dem Tool zu erstellen , das Sie mögen. Ich würde vorschlagen, dass es aufgeregt sein wird, weil es das Tool gibt, das ich verwende, aber Sie können jedes gewünschte Tool verwenden. Und weitere Details finden Sie im Video des Klassenprojekts. Neben der Typografie ist Abstand und Rhythmusfarbe eines der wichtigsten Dinge im Design, das zu berücksichtigen ist. Und in dieser Klasse werden wir einige wichtige Dinge behandeln, auf die Sie sich konzentrieren sollten, wenn Sie als UX-Designer der Benutzeroberfläche arbeiten. Freuen Sie sich also darauf, Sie im Unterricht zu sehen und lassen Sie uns ein paar fantastische Farbkombinationen erstellen. 2. Weshalb der Farbe: Abgesehen von Typografie, Rhythmus, Rastern und vielen dieser anderen Elemente ist Farbe eines der wichtigsten Elemente in jedem Design. Ohne Farbe wissen die Benutzer nicht, wohin sie gehen sollen. Sie werden nicht wissen, was sie tun sollen. Und es wäre nicht in der Lage, Elemente voneinander zu unterscheiden , da alle Elemente in Schwarz und Weiß einfach gleich aussehen würden. Lassen Sie uns in diesem Video besprechen, warum die Farbe wichtig ist und woran Sie denken sollten , wenn Sie Farben für Ihre UI-UX-Designprojekte auswählen. Es gibt den Ton Ihres Projekts an. Also spreche ich geschäftsorientierter mit deinen Zuschauern, dann wirst du verschiedene Farben verwenden. Dann wenn du spielerisch freundlich sprichst. musst du also immer nachdenken. Sprechen Sie mit Ihren Kunden, stellen Sie sicher, dass Sie sie tief verstehen, ihre Branche verstehen, die Nische verstehen und daher, wenn Sie Farben für diesen bestimmten Kunden auswählen, stellen Sie sicher, dass Sie Ton. Wenn der Ton geschäftlich ist, und dann verwenden Sie das Geschäft nicht, aber achten Sie darauf, diesen Ton während Ihres gesamten Designs zu befolgen. Es ist also nett und kohärenz. So wissen Ihre Benutzer immer, was der Ton Ihres Designs ist , wo immer sie sich in Ihrem Design befinden, es bestimmt den Zuschauermodus. Was ich damit meine ist, wenn die Farben zu dunkel sind , werden die Zuschauer in einer bestimmten Stimmung sein. Wenn die Farben zu hell sind , werden sie in einer anderen Stimmung sein. Wenn die Farben zu stark sind, werden sie vielleicht stark in ihren Augen sein. Sie werden also in verschiedenen Stimmungen sein. Achten Sie also darauf, auf alles zu achten und stellen Sie sicher , welche Stimmung Sie für Ihre Zuschauer schaffen möchten? Ist es wieder einmal das Spielerische? Ist es das Geschäft? Ist es das Lernen? Ist es die fokussierende Stimmung? Aus all diesen verschiedenen Metriken muss man etwas über ihre Stimmung lernen. Wenn Sie also Farben wählen, müssen Sie diese Stimmung im Hinterkopf haben. Wenn ich zum Beispiel möchte, dass sie ruhig und entspannt sind, verwende ich einige Farben aus der Natur, zum Beispiel Weiß und Grün und Braun und so etwas. Wenn wir sie am Pumpen halten wollen, wenn ich will, dass sie Energie steigen und hoch halten möchte, dann möchte ich vielleicht einige kräftige Farben wie Rot verwenden, wie Dunkelblau, wie Grün und so etwas. Achten Sie also darauf, auf die Stimmung Ihrer Zuschauer zu achten , da dies bei jedem Design äußerst wichtig ist. Es betont Aktionen. Wenn Sie beispielsweise möchten, dass sie auf eine Schaltfläche klicken, wählen Sie die Farbe dieser Schaltfläche aus, um hervorzuheben, weil Sie möchten, dass sie sich diese Schaltfläche ansehen und dann Maßnahmen ergreifen, um darauf zu klicken. Oder wenn Sie möchten, dass sie ein Formular absenden, wenn Sie möchten, dass sie Ihre E-Mail hinterlassen, verwenden Sie Farbe, um die Bereiche hervorzuheben , in die sie klicken oder Maßnahmen ergreifen sollen. Und natürlich, abhängig von der Aktion, die Sie ausführen möchten, je nach Branche, in der sich Ihr Kunde befindet wählen Sie je nach Branche, in der sich Ihr Kunde befindet, einige verschiedene Farben und verschiedene Schattierungen dieser Farben lenken Ihre Zuschauer einfach darauf bestimmte Maßnahmen, die sie ergreifen sollen. Es hilft bei der Lesbarkeit, da dies unglaublich wichtig ist da die Sehkraft seit fast zwei Jahrzehnten wirklich beeinträchtigt ist , da wir alle diese Geräte mit Bildschirmen haben und die Mehrheit der Menschen da draußen einige Probleme mit ihrer Sehkraft hat. Stellen Sie also sicher, dass bei der Planung, insbesondere für Absätze, speziell für Text gedacht ist. Vergewissern Sie sich, dass Sie die Farben verwenden, die für die Augen Ihrer Zuschauer nicht beeinträchtigt werden. Was ich damit meine ist, dass sie nicht zu stark sind, aber auch gleichzeitig, dass sie nicht zu schwach sind, denn wenn ihr Sehvermögen an Wochentagen gut ist , werden sie es nicht lesen können , wenn die Farben zu schwach sind und umgekehrt . Man muss also diesen glücklichen Mittelweg finden. Daher wird Ihre Lesbarkeit viel besser sein und Ihre Absprungrate wird viel niedriger sein, da sie viel länger auf der Seite bleiben und den Text und die Informationen lesen, die Sie auf Ihre entwerfen Und schließlich lenkt es die Augen des Benutzers. Was ich damit meine ist, wenn Sie möchten, dass sie von links nach rechts schauen, können Sie Ihre Farben strategisch in diese Richtung positionieren , damit Sie sie durch Ihr Design führen können. Sie können das Ihre Erfahrung arrangieren, wie Sie es haben möchten. Und wenn sie dann von links nach rechts schauen, können sie zum Beispiel nach helleren Farben oder dunkleren Farben oder ähnlichem suchen . Sie sind derjenige, der für seine Benutzererfahrung verantwortlich ist. Konvertieren Sie daher ihre Benutzererfahrung in eine bessere Benutzererfahrung, indem Sie Farben verwenden und sie mithilfe von Farbe durch Ihr Design navigieren. Es gibt viele verschiedene Theorien und Techniken bei der Auswahl der Farben, die für Ihr Design wichtig sind. sind also nur wenige, von denen ich im Laufe der Jahre festgestellt habe, dass sie besser für mich und meine Kunden arbeiten. Surfen Sie also im Internet nach einigen zusätzlichen Tipps, Tricks und Mischungen, um zu verstehen, wann Sie entwerfen, um all diese Dinge im Auge zu behalten. Und nur um die bestmögliche Benutzererfahrung für Ihre Benutzer mithilfe von Farbe zu schaffen. In der nächsten Lektion werden wir darüber sprechen, welche Farben existieren. Also sehe ich dich dort. 3. Welche Farben geben: Es gibt viele verschiedene Farben, aber wenn Sie Farben für ein UI-UX-Design auswählen, müssen Sie im Grunde über drei Farben nachdenken, nämlich Hauptfarbe, Sekundärfarben und Tertiärfarben. Hauptfarbe ist die Farbe, die die Gesamtfarbe Ihres Designs ist. Sekundärfarbe wird beispielsweise für Schaltflächen oder vier Textlinks, Hyperlinks und ähnliches verwendet. Und tertiäre Farbe ist im Grunde die Akzentfarbe. Das trifft nicht auf alle Projekte zu. Manchmal wählst du zum Beispiel einfach zwei Farben aus, und wir werden etwas später in dieser Klasse darüber sprechen. Das Wichtigste, was Sie als UX-Designer der Benutzeroberfläche beachten sollten, ist, dass Sie die CMYK-Farbe in den meisten Fällen nicht verwenden werden. Was das bedeutet, ist Cyan, Magenta, Gelb und Schlüssel. Der Grund dafür ist, dass diese Farben mehrheitlich für das Grafikdesign und für eine Druckarbeit verwendet werden. Da wir Bildschirmarbeit machen, werden wir diese Farben nicht verwenden, da sie sich nicht gut übersetzen, um die Farben zu überprüfen, die Sie verwenden werden. In den meisten Fällen sind für Ihre UI UX Designprojekte Hex-Codes und RGB-Farben. Hex-Codes ist etwas, das für Hexadezimal kurz ist. Im Grunde bedeutet es, sich nicht allzu sehr darum kümmern. Es ist nur die Anzahl der Pixel innerhalb der Farbe, aber denken Sie daran, dass Hex-Farben all diese verschiedenen Codes haben. Sie werden diesen Hex-Code in den meisten Fällen verwenden. Und in einigen Fällen verwenden Sie auch RGB-Farbe. Rgb steht für Rot, Grün und Blau. Und es gibt auch einige andere Farben wie HSL, was für Farbsättigung und Leichtigkeit dient. Abhängig vom Entwickler hängt jedoch vom Projekt ab, je nachdem, ob der Kunde bereits seine Farbkombinationen und eine Farbe für ihn erstellt hat , werden Sie ihre Farben und Farben in diesem bestimmten Farbcode verwenden die sie in ihrer Theorie erwähnt haben. Im Grunde werde ich Ihnen in diesem Video nur zeigen, wie das alles funktioniert und wie Sie diese Farben finden können. Also hier sind wir auf den Apple-Websites und die meisten von Ihnen wissen über Apple Bescheid. Grundsätzlich erstellen sie diese Technologie-Geräte in Gadgets und verfügen auch über ihr Betriebssystem für ihre mobilen Geräte und Desktop-Geräte. All das spielt keine Rolle. Wichtig ist, dass Sie mit der rechten Maustaste in Ihren Browser klicken können und dieses Plugin namens Col Beak installieren können, insbesondere wenn Sie ein Google Chrome-Nutzer einer Gruppe sind, wie ich es bin. Wenn Sie dort klicken, werden Ihnen all diese verschiedenen Farben angezeigt , die auf dieser bestimmten Seite verwendet werden. Jetzt sind das nicht alle Markenfarben. Es wird nicht von jeder einzelnen Seite dieser Website Farben abrufen. Aber wenn Sie hier einen Blick darauf werfen, können Sie all diese Farben sehen. So können Sie diese rosa lila Farbe beispielsweise von dieser Uhr und den umgebenden Texten sehen , Sie können diese blaue Farbe sehen. Vielleicht ist es das hier. Und wenn ich nach unten scrolle, finden wir vielleicht diese Kolumne. Hier ist es. Und wenn wir mehr scrollen, können Sie sehen, dass diese dunkle Farbe für den Text zum Beispiel diese und diese ist . So können Sie ganz einfach verstehen, welche Farben die Marke auf dieser bestimmten Seite verwendet hat. Noch einmal erwähne ich diese bestimmte Seite, denn wenn wir zum Beispiel zur Mac-Seite wechseln , verwenden sie hier völlig andere Farben. Gehen wir also zurück zur Homepage und lasst uns hier gehen. Nochmals nennen Sie es groß ist völlig kostenlos. Ich verlinke es in einer PDF-Datei und du kannst darauf zugreifen. Sie können es einfach in Ihrem Browser installieren. Und warum das wichtig ist, können Sie einfach Farben abprobieren, wie ich es Ihnen gezeigt habe. also einfach mit der rechten Maustaste auf Farbe, große Titelseitenstile. Es wird diese Farben von dieser bestimmten Seite nehmen und Ihnen dann all diese Farben genau hier zeigen. Sie können jedoch sehen, dass RGB-Werte für jede bestimmte Farbe sind. Sie können diese Farbe entfernen, wenn Sie beenden möchten, Sie möchten sie hier nicht sehen. Wenn wir dann genau hier auf diese Ecke klicken, können Sie sehen, dass wir HEX-Farben haben. Wenn ich also zu Hex wechsle, kannst du sehen, wie das funktioniert. Wenn Sie also zwischen RGB und Hex wechseln, können Sie den Unterschied deutlich erkennen. Jetzt sind Sechskantfarben diese Farben und das ist der Farbcode. Das werde ich etwas später in Adobe XD zeigen. Jetzt hat jedes einzelne Tool da draußen diese Hex-Codes. Wenn Sie also Photoshop, XD, Sketch, Figma verwenden , spielt es keine Rolle. Alle von ihnen haben sie, und alle von ihnen haben normalerweise RGB und einige von ihnen haben auch HSL. Wenn wir zu HSL gewechselt haben , nämlich Farbsättigung und Leichtigkeit, können Sie sehen, wie das aussieht. Im Grunde können Sie dies also kopieren, insbesondere mit Hex-Codes. Wählen Sie diese Option aus, klicken Sie mit der rechten Maustaste auf C kopieren oder steuern, steuern Sie V und fügen Sie es in ein bevorzugtes Werkzeug Ihrer Wahl ein. Und dann kannst du diese Farbe haben und von dieser Farbe arbeiten. Dies ist besonders wichtig, wenn Sie mit Kunden zusammenarbeiten , die ihre Websites bereits fertiggestellt haben. Wenn sie ihre Apps fertiggestellt haben oder ähnliches und nicht wussten, welche Farben sie verwenden, können Sie die Website einfach so ziehen, wie ich es Ihnen einfach zeigen sollte, klicken Sie mit der rechten Maustaste auf farbigen Schnabel aus Seitenstilen und dann können Sie einfach verstehen, welche Farben sie in ihrem Design verwendet haben. Dies ist wichtig, denn wenn sie ihre Farbpalette beispielsweise weiter unten in der Linie ändern möchten beispielsweise weiter unten in der Linie oder wenn Sie eine bestimmte Farbe benötigen, können Sie diesen Ansatz verwenden, diese bestimmte Farbe kopieren und dann benutze es in deinem Design. Die andere Möglichkeit, dies zu tun, besteht darin, einen Screenshot ihres vorherigen Designs zu erstellen. Ziehen Sie es in Ihr bevorzugtes Tool Ihrer Wahl, in meinem Fall, Adobe XD, und probieren Sie diese Farbe dann einfach aus Ihrem Design. Dies wird kein schuldenguter Ansatz sein da Sie einige Pixel verlieren werden, wenn Sie diese Screenshots machen. Und daher werden diese Farben nur ein bisschen anders sein als wenn Sie diesen Ansatz verwenden, da dies aus Seitenstilen stammt. Wenn wir es also noch einmal zurücknehmen, genau hier, wenn ich mit der rechten Maustaste auf die Seite klicke und inspiziere, können Sie sehen, dass Sie, wenn wir den Code durchgehen , wenn wir genau hier gehen, eins sehen können , d1, d1, f. E1, D1, D1, F. So können Sie sofort sehen, es von Seitenstilen abgerufen wird, sodass Farben direkt aus dem Code gezogen werden. Es gibt also keinen Platz für Fehler, da er direkt aus dem Zitat stammt. Jetzt denkst du vielleicht nach, ja, aber was ist mit diesen Bildern? Nehmen wir dieses Bild zum Beispiel. Klicken Sie mit der rechten Maustaste auf Überprüfen. Hier sind wir und hier haben wir die Verfärbung. Wenn wir also darauf klicken, können Sie es genau hier sehen. Sie fragen sich vielleicht, was ist, wenn mein Kunde keine vorhandenen Websites hat, auf denen Sie die Farbpalette basierend auf dem erstellen, worüber wir zuvor gesprochen haben, basierend auf dem, worüber wir in zukünftigen Lektionen sprechen werden -Klasse. Und vor allem aus der Nische der Industrie, in der sie sich befinden. Wenn sie sich beispielsweise in einem Bankensektor befinden, wenn sie sich im IT-Sektor befinden, hängt die Chancen davon ab, wer die Zielgruppe ist, dass die Website oder die mobile App sprechen wird. Die Chancen stehen gut, dass sie in diesen Fällen bestimmte Farben auswählen und sicherstellen, dass sie die Konkurrenz erkunden, sicherstellen, was sie tun, und stellen sicher, dass Sie Ihre Farben basierend auf der Nische bilden, in der sich Ihr Kunde befindet basierend auf der Konkurrenz und basierend auf dem Viewer-Modus, in den Sie sie einfügen möchten. Wollen Sie also, dass sie etwas kaufen, möchten, dass sie den Inhalt genießen und länger bleiben. Willst du es ernst meinen, will spielerisch sein. Aus all diesen Dingen bestimmen Sie die Farbe, die Sie in Ihrem Design wählen werden. Schließlich, wie gesagt, achten Sie darauf, die Farbe groß zu verwenden, da es wirklich ganz einfach ist. Klicken Sie einfach mit der rechten Maustaste auf eine beliebige Seite und zeigen Ihnen alle diese Farben an. Und im Grunde können Sie dieses Auto auswählen, kopieren drücken und in Ihr Design einfügen. Im nächsten Video dieser Klasse wir über Farbkombinationen sprechen, warum sie wichtig sind, in welchen Farbkombinationen existieren und wie man auswählt, äh, welche für Sie geeignet ist. Also sehe ich dich dort. 4. Farbkombinationen: Es gibt viele verschiedene Möglichkeiten, Farben für Ihre UI UX-Designprojekte zu kombinieren. Aber in dieser Klasse und in dieser Lektion werde ich über nur vier sprechen, von denen die Form von vier Hauptmodellen und die vier sind, die hauptsächlich im Design verwendet werden, plus eine zusätzliche, was ein Bonus dafür ist Lektion. Diejenigen für unsere monochromatischen, analogen, ergänzenden und triadischen. Lasst uns also all das untersuchen und sehen, was sie sind. Monochromatisches Farbschema ist das, was der Name andeutet. Du nimmst nur eine Farbe und wählst verschiedene Blätter aus dieser bestimmten Farbe aus. So wählen Sie zum Beispiel blaue Farbe, die wirklich dunkel ist, und dann wählen Sie verschiedene Farbtöne aus dieser blauen Farbe, um besser mit der dunkelblauen Farbe der Schulden zu entsprechen. Daher verwenden Sie diese helleren Töne zum Beispiel für Ihre Tasten oder umgekehrt, Sie können die helleren Töne für den Text oder die dunkleren Töne für die Schaltflächen für die Links und ähnliches verwenden . Analoge Farben sind Farben, die auf dem Farbrad nebeneinander liegen, Sie werden drei Farben wählen, die sehr nahe beieinander liegen. Wenn Sie also ein Farbrad nehmen, können Sie verschiedene Farbtöne der Farben wählen , die direkt nebeneinander liegen. Was Ihnen dies ermöglicht, ist, dass Ihr Design viel kohärenter sein wird , weil es so aussehen wird, als gehöre es zueinander. Ihre Elemente werden ähnliche Farben haben, von ähnlicher Betonung wie diese Farben da Sie nicht verschiedene Farbtöne Ihrer Farben wählen werden, sondern nur die Farben, die auf dem Farbrad nebeneinander liegen. Kostenlose Farben sind das, was der Name nahelegt. Sie werden zwei Farben nehmen, die sich auf der völlig entgegengesetzten Skala des Farbrads befinden. Und dann kombinierst du sie. Sie können Ihre Hauptfarbe aus diesem Farbrad wählen. Und dann können Sie Ihr Farbrad von Ihrer Hauptfarbe aus so positionieren, um Ihre kostenlose Farbe auf der kompletten gegenüberliegenden Seite des Farbrads zu finden . Sie können verschiedene Schattierungen dieser Farben verwenden, also gemeine und kostenlose Farbe. Aber ich werde immer vorschlagen, dass Sie Ihre Hauptfarbe wählen, und dies ist am einfachsten, wenn Ihr Kunde bereits etwas wie ein Logo, Ihre Visitenkarte oder die Farbe hat , die er mag. Und dann kannst du diese Farbe einfach in deine Farbe geben. Wir wählen die kostenlose Farbe und daher können Sie verschiedene Farbtöne dieser Farben wählen. Und Sie können wissen, welche Farbe die kostenlose Farbe für diese Farbe ist. Und schließlich haben wir triadische Farben. Triadische Farben sind im Grunde nur drei Farben, die in Ihrem Farbrad gleichmäßig verteilt sind. Sie können es sich also nur als Dreieck vorstellen, und Sie können ihr Dreieck drehen, um die Hauptfarbe und die ergänzenden Farben zu wählen , die sich auf der gegenüberliegenden Seite befinden und ein Dreieck bilden, Sie können Ihre Hauptfarbe wählen und daher können Sie die beiden anderen Farben auswählen, die sich auf den ebenen Seiten dieses Dreiecks befinden. Und der Bonusansatz ist 60, 30, 10. Jetzt erfordert dieser Ansatz drei verschiedene Farben, die Sie nach Belieben auswählen können. Aber stellen Sie sicher, dass Sie Ihre Hauptfarbe wählen, die 60% Ihres Designs ausmachen wird. 60 Prozent sind der Betrag, den Sie Ihre Hauptfarbe verwenden werden, 30 Prozent sind Ihre sekundäre oder kostenlose Farbe, und dann sind diese 10% Ihre Akzentfarbe. Dies ist ein Ansatz, der allgemein in UI, UX-Design und InDesign im Allgemeinen verwendet wird . Im Grunde genommen können Sie eine dieser Methoden verwenden, die gerade erwähnt werden , um die drei Farben auszuwählen, die Sie möchten. Und Sie können Triadisch verwenden, wenn Sie möchten, nur um auf dem Rechteck zu sehen, wie diese drei Farben aussehen werden. Aber stellen Sie sicher, dass Sie diese Farben so formen , dass sie sich nicht gegenseitig überwältigen. Wenn Ihre Hauptfarbe 60 Prozent beträgt, verwenden Sie diese Farbe einfach für 60 Prozent Ihres Designs und dann 30 Prozent und dann 10 Prozent aus 100% Ihrer Farben. Verwende keine anderen Farben. Stellen Sie einfach sicher, wenn Sie diesen Ansatz bei dieser Methode verwenden, um nur diese drei Farben zu verwenden. Dies sind also nur einige der wichtigsten Farbkombinationen. Wie ich bereits erwähnt habe, gibt es viele, viele, viele andere verschiedene Farbkombinationen, aber diese vier habe ich im Laufe der Jahre für mich am besten gefunden. Und ich habe festgestellt, dass die Mehrheit der Designer in der Branche verwendet wird. Im nächsten Video zeige ich Ihnen einige Tools, die Ihnen bei der Auswahl dieser Farben helfen werden. Also sehe ich dich dort. 5. Farbauswahl-Tools: In diesem Video zeige ich Ihnen einige Farbauswahl-Tools, die ich in den letzten Jahren verwendet habe. Und ich fand heraus, dass die meisten davon, insbesondere Adobe One, das ist, was die meisten Designer da draußen verwenden. Denn sobald Sie das Tool kennengelernt haben, werden Sie, sobald Sie mit zwei vertraut sind, damit stecken und es wieder verwenden, denn wenn es nicht kaputt ist, reparieren Sie es nicht. Wie ich in diesem Video sagte, gebe ich Ihnen nur ein paar Beispiele. Wenn Ihnen keines davon gefällt, können Sie einfach im Internet surfen, um diejenige zu finden, die für Sie funktioniert. Also hier ist der erste, der Peloton heißt. Und Sie können dem Design auf der Website entnehmen, dass es wirklich ziemlich alt ist. Wie all das aussieht, können Sie direkt hier klicken, um das Monochromatische auszuwählen. In einer einzigen Farbe, wie wir gerade gesprochen haben, benachbarte Farben oder drei Farben, können Sie triadische Farben sehen. Also Triade aus drei Farben, Tetraden, also für Farben. Und schließlich freestyle vier Farben und du kannst zwei Farben auswählen, drei Farben wie du willst. Wie ich im vorherigen Video erwähnt habe, Sie je nachdem, was Sie hier erstellen möchten, wählen Sie je nachdem, was Sie hier erstellen möchten, die einfarbigen Farben oder die angrenzenden Farben oder die ergänzenden Farben oder ähnliches sind. Also lasst uns in diesem Fall Triade machen. Sie können also sehen, wenn ich anfange, das zu drehen, können Sie die Farbe sehen. Sagen wir also, dass dies meine Hauptfarbe ist. Und Sie können sehen, dass sie in diesem Dreieck gleichmäßig verteilt sind und es zeigt mir alle Blätter meiner Hauptfarbe. Und Sie können die Umschalttaste gedrückt halten, um die Farbtöne einzeln zu verschieben. Wenn ich es also halte und wenn ich diese Form zum Beispiel auswähle, wenn ich diese auswähle, kannst du sehen, dass wir hier ganz andere Farben bekommen. Wenn ich es also hier rotiere, kannst du sehen, dass wir jetzt diese gleichmäßige Palette haben. Jetzt können Sie zu Voreinstellungen gehen und verschiedene Voreinstellungen für diese Triadenfarbe auswählen, was sehr hilfreich ist, wenn Sie nicht genug Zeit haben. Und aus den von Ihnen gewählten Farben zeigt es Ihnen diese Voreinstellungen. Wenn wir also zu den Farben zurückkehren, wenn wir sie zum Beispiel hier drehen, gehen Sie zurück zu Voreinstellungen. Sie können sehen, dass sie jetzt ganz anders sind. So können Sie diese Farben wählen, Sie können damit machen, was Sie wollen. Und wenn wir uns vor hier verstecken, können Sie Tabellen exportieren. Wenn ich direkt dort klicke, können Sie sehen, Sie sie als HTML, CSS, Less Sass, ACML exportieren und als Texte können Sie Farbmuster exportieren und diese Farbkombinationen für diejenigen exportieren , die wir erstellt haben was meiner Meinung nach sehr wichtig und sehr hilfreich ist, da dieses Tool kostenlos ist. Und übrigens werde ich all diese Tools verknüpfen, die in diesem Video in der PDF-Datei erwähnt werden . Stellen Sie also sicher, dass Sie es öffnen, klicken Sie auf diese Links, wenn Sie auf diese Websites und alle Ressourcen und Tipps zugreifen möchten , die in dieser Klasse erwähnt werden. Im Grunde ist das das Peloton für dich. Sie können randomisieren, zurücksetzen zu den Originalfarben zurückkehren. Also genau hier, und wie gesagt, kannst du wählen, welchen Stil du willst. Als nächstes haben wir Color Hunt. Sie können also noch einmal sehen, jetzt haben wir hier einige andere Auswahlen, da diese vorausgewählt sind. So können Sie den Zufall treffen, es werden nur zufällige Farben angezeigt. Sie können mit beliebten Monaten, Jahr , alten Zeiten oder nach diesen wählen. Wenn ich also Pastellfarben treffe, wenn das die Farben sind, die Sie für Ihr spezielles Projekt wünschen, haben Sie Retro-Vintage-Licht, Dunkel, besonders dunkel ist wichtig und beliebt in heutigen Zeit, in der wir den dunklen Modus haben für UX-Design der Benutzeroberfläche. Wenn Sie also für den Dunkelmodus entwerfen, überprüfen Sie dies unbedingt. Dann können Sie Hauttöne sehen, Beispiel für Beauty-Marken besonders wichtig sind. wir wieder zu dieser Stimmung Ihrer Zuschauer zurückkehren, kehren wir in diese Nische zurück. Wir gehen zurück zu diesem Kunden. Wenn Sie also all diese Punkte sammeln und sie verbinden, werden Sie verstehen, welche Art von Farb- und Farbkombinationen Sie wirklich für Ihr spezielles Projekt benötigen? Wenn wir also ganz nach unten scrollen, können Sie sehen, dass wir diese nicht haben. Wenn wir also wieder hierher gehen, haben wir keine einfarbige angrenzende Farbtriade, aber wir haben diese. Das sind also die Stimmungen, das sind die Projekte. Dies sind zum Beispiel die, ich weiß nicht, sagen wir Branchen, in denen sich Ihr Kunde befindet. Also lasst uns zum Beispiel mit dunkel gehen. Und das kannst du alles sehen. Du kannst sie mögen, wenn du willst. Du siehst, dass es vor 13 Stunden gepostet wurde. Also lasst uns dieses wählen. Und wenn ich schwebe, siehst du, dass ich den Hex-Code genau dort habe. Für jede dieser Farben. Diese Palette kann dir gefallen. Sie können es als Bild herunterladen. Und Sie haben all diese Farben genau hier als Hex-Codes und als RGB, was ich zuvor erwähnt habe, verwenden die meisten UI-UX-Designer Hex-Codes und in einigen Fällen RGB-Farben, weil sie für Ihre Entwickler einfach sind integrieren. Im Zitat verwenden sie sie deshalb. Und manchmal auch HSL-Farben, weil sie Prozentsätze verwenden können. Sprechen Sie also mit Ihren Entwicklern wenn Sie gerade erst mit diesen Farben anfangen MY sollte mit ihnen sprechen. Ist der Hex-Code der richtige für sie oder ist der RGB oder HSL, abhängig von diesen Werten in Dateninformationen, die Sie von Ihren Entwicklern erhalten werden. Sie werden Ihre Farben für dieses spezielle Projekt auswählen. Sie haben also noch einmal mehr dunkle Palette für Erwachsene genau hier. Und wenn Sie zum Beispiel denken, dass diese Farbe nicht funktioniert, können Sie grüne auswählen, damit Sie mit diesen Autos herumspielen können. Als nächstes haben wir colors.com, damit du anfangen kannst, es zu generieren. Noch einmal werde ich alle diese Websites in einer PDF-Datei verlinken. Und was wir hier haben, ist diese Summe. Wir haben all diese verschiedenen Farben, die Sie erkunden können , Sie können sehen, Sie können es anpassen. Sie können zur Farbenblindheit sehen, wie es aussieht. Sie können also all diese auswählen. Und wenn wir es schließen. Sie können eine Collage erstellen und aus einem Foto eine Palette erstellen. Wenn Ihr Kunde Ihnen dieses Logo oder die Farbe sendet, die ihm gefällt, können Sie dieses Foto direkt hier hochladen. Es wird die Farbpalette aus dieser bestimmten Farbe erzeugen. Jetzt können Sie sehen, dass Sie die Namen genau hier erhalten, was großartig ist, wenn Sie diese Namen später in Ihrem Design als Token verwenden möchten, zum Beispiel wenn Sie Ihre Farben für Ihre Entwickler festlegen. Und dann werden sie leicht verstehen, welche Farbe du erwähnt hast, weil sie sie in den Code einfügen können. So können zum Beispiel dieser Holzwolf, Alabaster und kultiviert, all diese Wörter in den Code einfügen sie in der Hauptdatenbank verbinden. Und daher wird die Hauptdatenbank die Namen dieser Farben abrufen , um sie als Website oder mobile App darzustellen. Wie arbeitest du eigentlich damit? Nun, wir haben alle diese Optionen genau hier, damit Sie die Farbe entfernen können, Sie können Blätter anzeigen. Sagen wir also, ich möchte diesen benutzen. Jetzt nimm das hier. Sie können Farbe als Favorit speichern, Sie können sie ziehen. Positionieren Sie also genau hier, um das Aussehen Ihrer Farbpalette zu ändern. Sie können den Hex-Code kopieren und sperren. So können Sie eine dieser verschiedenen Farben wählen. Du kannst sie arrangieren. Wenn ich es also sperre und sagen wir, dass ich das hier positionieren möchte, bleibt diese Farbe und es wird sich nicht ändern, wie Sie von hier exportieren. Sie haben diese solide Aussage, dass ich diese Farbpalette mag, aber lassen Sie mich Ihnen tatsächlich so Viewsheds zeigen und diese sehen, aber ich bin mir nicht wirklich sicher. Ich kann direkt dort klicken. Dann genau hier. Wählen Sie Mängel oder einen davon aus. Lassen Sie mich zur Auswahl gehen und lassen Sie mich zum Beispiel diesen dunklen Farbton hier auswählen . Ich mag es und ich kann es schließen. Und deshalb kann ich meine Farben weiter von dieser bestimmten Farbe aus erforschen oder sie einfach so lassen, wie sie ist. Und schließlich, wenn ich es exportieren möchte, können Sie Control IEP verwenden. Sie können kopieren, Sie können es an Entwickler senden. Sie können es als PDF exportieren, was als Bild großartig ist. Sie können die CSS-Farben erhalten, was für Ihre Entwickler erstaunlich ist. Offensichtlich AAC, SVG, was auch großartig ist, und Sie können den Mantel bekommen, wenn Ihre Entwickler auch im Code wollen. Schließlich können Sie den Code für diese bestimmten Farben einbetten, wenn Sie sie so speichern möchten, dass Ihre Kunden keine Entwickler sind. Als nächstes haben wir Adobe Color , einer der ältesten im Geschäft. Aber meiner Meinung nach ist es vielleicht eines der besten, weil es in Adobe XD integriert ist, mit Adobe-Produkten, Sie können sie in einer Creative Cloud-Anwendung im Tod öffnen , wenn Sie ein Creative Cloud-Benutzer sind, und daher Sie können einfach auf diese Farben zugreifen und sie in der Software Ihrer Wahl öffnen. So können Sie erstellen, erforschen, Trends haben und schließlich Bibliotheken haben. Innerhalb der Bibliotheken können Sie Ihre Bibliothek erstellen und dann beispielsweise die Bibliothek in Adobe XD öffnen. Sie können diese Farben einfach kopieren in Ihr XD einfügen. einfach ist es wirklich. Wenn Ihr Adobe-Benutzer, gibt es auch eine Photoshop-Integration, Illustrator-Integration. Egal welches Tool Sie aus der Familie von Adobe verwenden, Sie werden diese Integration haben. Also haben wir das Extrakt-Team, extrahieren Sie Tools zur Barrierefreiheit mit Farbverlauf, was auch großartig ist. Wenn ich also direkt dort klicke, siehst du das Kontrastverhältnis, du siehst die Punktzahl. Sie können einige sehen, Sie können Salz auf fehlgeschlagene 17 Punkte und darunter überprüfen. Also müssen wir diese Farbe anpassen. Übergeben Sie 18 Punkte und höher, vorbei an vier Symbolen und umsetzbaren Grafiken, wenn Sie diese Farben verwenden. Was wir also ändern müssen, ist die Farbe des Textes. In diesem speziellen Fall gibt uns Adobe m. Hier auf der linken Seite haben Sie alle, die ich erwähnt habe. Derzeit ist es also benutzerdefiniert, aber wenn ich zu analog wechsele, klicke darauf, kannst du sehen, dass wir nur diese eine Farbe auswählen können. Wenn wir einfarbig sind, können Sie sehen, wie das triadisch aussieht. Also im Grunde drei Farben. Und Sie können das Dreieck sehen, das wir erwähnt haben. Das ist also unsere Hauptfarbe, sind unsere Sekundär- und Tertiärfarben. Sie können kostenlos haben. Also auf den gegenüberliegenden Seiten, auf dem Farbrad geteilt kostenlos. Im Grunde genommen das, und Sie können dann wählen, wie nah oder weit Sie dies haben möchten. Und du kannst sie teilen, du kannst sie bewegen. Sie können diese verschiedenen Farbtöne verschieben, um die bestmögliche Farbpalette zu erhalten. Und doppelklicken Sie kostenlos aufteilen. Also im Grunde das Gleiche, aber doppelte Farbe. Sie haben das Quadrat, die Mischung und die Schattierungen. Je nachdem, was Sie wollen, was ich in diesem Kurs erwähnt habe, können Sie jederzeit mit Custom anrufen und Sie können es nach Belieben anpassen. Wenn wir zum Beispiel kostenlos wählen und wenn ich mit Custom gehe und diese anpassen möchte, verwenden wir diesen oder einfach zufällig. Lass uns damit gehen. Und Sie können die Töne auch genau hier dieser bestimmten Farbe anpassen. Wenn ich diese Farbe auswähle, kann ich die Töne für diese bestimmte Farbe so anpassen. Ich kann all diese Dinge anpassen. Ich kann diesen Hex-Code schnell kopieren, wenn ich möchte. Und schließlich können Sie es als mein Farbteam speichern, zum Beispiel kann ich es als ich und mein gesamtes Website-Projekt nennen. Mal sehen. Und Sie können die Codes sehen, die Sie genau dort bekommen werden. Das sind also Tags. Sie können noch einmal nach Barrierefreiheit suchen, um zu sehen, ob das gut genug ist. Das Team ist farbenblind sicher, was großartig ist. Sie können es also speichern, wenn Sie möchten. Es wird in Ihren XD-Bibliotheken oder Photoshop-Bibliotheken angezeigt. Schließlich können Sie das Team extrahieren. So können Sie die Farbe aus dem Bild extrahieren und als Farbpalette speichern. Sie können einen Farbverlauf oder dasselbe extrahieren. Noch einmal, Barrierefreiheitstools, die wir zuvor erwähnt haben, und wir haben Farbrad, was großartig ist. Wenn Sie dies verwenden, speichern Sie es schließlich, es wird in Ihrem bevorzugten Tool angezeigt. Sie haben auch diese Farbspiele. Sie haben das Team gewechselt, damit Sie es auswählen können. Sie haben Explorer, damit Sie verschiedene Farbkombinationen erkunden können. Was ist im Trend, was nicht. Wenn sie also in Trends wechseln, können Sie sehen, was mir das geben wird. So wird es mir zum Beispiel eine Reihe von Bildern geben, die im Trend liegen. Und Sie können die Farben sehen, die aus diesen Bildern stammen. Wenn Ihnen diese Farben gefallen, können Sie JPEG herunterladen oder zur Bibliothek hinzufügen wird wieder in Ihrem XD oder Photoshop Illustrator oder was auch immer Sie verwenden. Und schließlich der Farbpeak , den wir zuvor erwähnt haben. Wieder einmal ist es großartig. Ich überlasse die Links zu allem, was ich im PDF erwähnt habe. Aber ich würde dir wirklich empfehlen, die Farbe Rosa zu bekommen , weil es dir das Leben viel einfacher machen wird. Dies ist der Spotify, also hast du diese Farben von Spotify. Und natürlich können Sie auf die Website Ihrer Wahl gehen, wenn Sie die Farben von dieser bestimmten Website auswählen möchten. Und es wird dir genau hier im Farbschnabel zeigen. Da sind wir los. Dies sind die Farben, sind die Werkzeuge, die wirklich hoffen, dass Sie sie nützlich finden werden. Ich werde Ihnen noch einmal alle diese Links im PDF geben. Öffnen Sie das PDF, klicken Sie auf den Link, Sie möchten darauf zugreifen und stellen Sie sicher, dass Sie mit der Erforschung dieser Farben beginnen. Erkunden Sie diese Tools, um zu sehen, welches für Sie am besten geeignet ist. Und wenn Sie diese Mission gefunden haben, , dass Sie, wie Sie es stellen Sie sicher, dass Sie, wie Sie es in der Adobe Color-Mission gesehen haben, die Trends erforschen, Bilder hochladen und sicherstellen, dass Sie sie erkunden und nur um zu sehen und zu verstehen, wie Sie die Farben für Ihre Projekte am besten für Sie auswählen können. Im nächsten Video zeige ich Ihnen, wie Sie Export-Styleguides für die Entwickler von Adobe XD erstellen . Also sehe ich dich dort. 6. Stil-Leitfaden für Entwickler: Styleguide ist ein wirklich wichtiger Teil Ihrer UI-UX-Designs, da Sie darin alle Farben, Symbole, Bilder und alle anderen Elemente präsentieren werden , die Sie in Ihren UI-UX-Designs verwendet haben. Sie werden sie Ihren Kunden und vor allem Ihren Entwicklern zeigen. Denn aus diesem Styleguide können sie wichtige Informationen wie Farbe abrufen, die in Ihrem Angebot verwendet werden sollen. Also zeige ich dir ein Projekt, das ich vorher für eine meiner Meisterbrillen gemacht habe. Und ich werde herausfinden, was Styleguide ist, und zeige Ihnen ein paar Tipps und Tricks. Also hier sind wir in Adobe XD, und dies ist das neue Bank-Website-Projekt. Und wie gesagt, das stammt von meiner Adobe XD Masterclass. Ich verlinke es im PDF. Sie können es sich ansehen, wenn Sie interessiert sind. Und hier haben wir von der Website-Architektur angefangen, zu Papier-Wireframes umgezogen, zu Wireframes in Adobe XD übergegangen, mehr zu Website-Design und Dashboard-Design. Und dann entstand schließlich das ansprechende Design und das Dashboard Responsive Design. Wir haben auch eine Projektpräsentation und schließlich einen Styleguide durchgeführt. Wenn wir also von Layern zu hier wechseln , nämlich Dokumentensäuren, können Sie alle verwendeten Farben und Farbcodes sehen. Im Grunde genommen handelt es sich um farbige Token. Wenn Sie mit der Maus schweben, können Sie sehen, dass schlichtes Weiß FFF ist. Wenn Sie den Mauszeiger hier bewegen, können Sie so RGB-Werte der Kapazität 100 sehen. Wenn wir also sehr genau hineinzoomen, können Sie sehen, dass wir hier einen Projektstyleguide haben. Was ich Ihnen empfehlen würde, ist, wenn Sie diese Projekte Styleguides erstellen. Stellen Sie sicher, dass Sie immer die Hex-Codes angeben, wenn dies diejenigen sind die Ihre Entwickler benötigen, oder RGB-Codes. Wenn noch einmal, sind dies diejenigen, die ein Entwickler benötigt. Was Sie hier auch sehen können, ist, dass wir schlichtes Weiß haben, das ist diese Farbe. Und ich habe auch den Hex-Code hinzugefügt, damit Entwickler diesen Hex-Code einfach auswählen können, wenn sie möchten. Und wenn Sie weiter gehen, können Sie all diese anderen Farben sehen. Was Sie tun können, ist, dass Sie ihnen diese XD-Datei geben können. Sie können das dann einfach ertragen. Also gehe ich genau hier hin, ich kann diese Farbe kopieren. Also Rechtsklick und kopiere. Ich kann genau hier gehen und diese Farbe zum Beispiel kopieren, die in meinen Code-Editor eingefügt wurde. Und deshalb kann ich es in meinem Code haben oder ich kann es hier auswählen und kopieren. Oder noch besser Sie können einfach E auf Ihrer Tastatur steuern oder befehlen, um dies als PDF zu exportieren. Wenn Sie auf Exportieren klicken, wird es als PDF exportiert. Und wenn sie später geöffnet werden, können sie diesen Hex-Code einfach aus der PDF-Datei auswählen, kopieren und einfügen. Auch für die Typografie kann man für Ikonographie sehen. Also wurden alle Icons in diesem speziellen Projekt verwendet. Und all die Illustrationen und zusätzlichen Elemente, die Sie verwendet haben, können Sie genau hier platzieren, aber Sie können es auch tun, wo ist Ihre Farbe? Sie können zum Beispiel immer Hintergrund-Shows oder Basizität, ein Cover und all diese anderen Elemente genau hier setzen Hintergrund-Shows oder Basizität, ein Cover und all diese anderen Elemente genau , weil drinnen auch als Farbe beitragen, weil all diese Hintergründe, Schatten und Unschärfen haben ebenfalls Farbe in ihnen. Eine andere Sache, die Sie mit diesem Styleguide machen können, ist es zu teilen. Wenn ich also nur dieses Kunstbrett auswähle, gehe zu Teilen. Sie können sehen, dass es nur eine Auswahl ist. Wenn ich also den Zoom abzoomen kann, sehen Sie, dass nichts anderes ausgewählt wurde, weil ich gerade diesen bestimmten Flughafen ausgewählt habe. Was es also tun kann, ist es zu teilen. Ich kann den Link erstellen, aber anstelle von Design Review werde ich die Entwicklung verwenden, damit ich einen Link erstellen kann. Und während es erstellt wird, möchte ich Ihnen hier zeigen, dass Entwickler diesen Link bekommen können. Sie können alle diese Farben von diesem speziellen Link abziehen. Und Sie können diese Aktie auch für die Entwicklung für jedes andere Kunstbrett auswählen , das Sie in Ihrem Design haben. Zum Beispiel haben wir hier Website-Design, und wir haben viele dieser Kunsttafeln, sodass Sie sie alle auswählen können. Sie können sie für die Entwicklung teilen. Und deshalb werden Ihre Entwickler diese Farbe haben. Sie können es wählen. Wenn ich also direkt hier für unseren Styleguide klicke, öffnet er sie in meinem Browser und es wird in meinem Browser zeigen, wie das alles aussieht. Wenn wir es Ihnen also während der Eröffnung hier zeigen, haben wir einen Projektstyleguide. Je nachdem, wie Sie Ihre Zeichenfläche benannt haben, wird es sich auf diese Weise zeigen. Also haben wir wieder all diese verschiedenen Farben. Wenn ich also einen von ihnen auswähle , mischen Sie diesen, und wenn ich genau hier zum Code wechsle, können Sie alle Farben und alle Schattierungen meiner Farben sehen, die von hier aus gezogen werden. Wenn ich also diesen auswähle, können Sie sehen, dass es Danger heißt, wir haben CSS-Eigenschaften. Einige, wir haben oben links Breite und Höhe, wir haben Hintergrund, wir haben hier Hintergrund. Also dieser Hex-Code, und wir haben Fettleibigkeit von 100. Was sie also von hier aus tun können, ist, dass sie auswählen können, um von hier aus zu kopieren. Sie können auf diese Farbe klicken. Hier. Farbe kopierte Sortierung. Lass mich mich verstecken, damit du es sehen kannst. Wenn ich diese Farbe auswähle, klicke darauf, du kannst die Farbe kopiert sehen, also ist es kopiertes Werkzeug. Und sie können es später in den Code einfügen. Wir können auch hier wechseln. So können Sie root für all diese Farben sehen. Also noch einmal, schlichtes Weiß, Hellgrau, Dunkelgrau, Hauptgrün, alle Farben, die ich ausländische Familien nannte. Wir haben also Schriftfamilien, die sich auch hervorragend für Entwickler eignen, sich alle hier in unserem Styleguide befinden. Und schließlich. Für diesen Charakterstil neun. Wenn wir also ganz nach unten scrollen, was ist das hier. Also wenn ich genau das auswähle und zurück zum Code wechsle. Lassen Sie es mich also noch einmal auswählen. Sie können alle Staaten sehen, die ich für dieses spezielle Design erstellt habe. Also haben wir Visa, Schwarz und Weiß müssen MasterCard Schwarz und Weiß gewährt haben. Also ändere einfach all diese Logos in. Grundsätzlich, wenn ich hineinklicke und mit dem Aussehen gehe, ja, wenn wir Steuerung wählen und klicken, können Sie einen linearen Farbverlauf sehen. So können Sie alle Farben aus einem linearen Farbverlauf die Richtung des Gradienten , der Fettleibigkeit und des Schlagschattens sehen . Dies ist diejenige, die ich zuvor erwähnt habe. Schlagschatten hat sich also verfärbt und er hat diese Werte. Im Grunde genommen können Ihre Entwickler diese Werte direkt von hier abrufen. Sie haben den CSS-Code wieder hier. Und schließlich, wenn sie zu hören wechseln, können sie dies auswählen. Und dann können sie von hier aus alle Dinge im Root-CSS sehen. Im Grunde müssen sie diese Karte nur genau hier finden und sie können den CSS-Code von dort kopieren. Wenn ich diesen zum Beispiel auswähle, können Sie den Standardstatus fast schwarz sehen. Wenn ich also meine Steuerung halte und hineinklicke, siehst du hellgrau. Wenn ich auswähle und hineinklicke. So können Sie diese Farbe sehen, die die Farbe seiner Haut ist. Und wenn wir hier ein bisschen näher zoomen. Also lasst uns zum Beispiel mit 100 gehen. Wenn wir beispielsweise diese grüne Farbe vergrößern und darauf klicken, können Sie die Farbe sehen, damit sie klicken können, sie können in die Zwischenablage kopieren und im Grunde auf dem basieren, was sie wollen. Schließlich können sie direkt hier auf die Kommentare klicken und diese Drehung zum Beispiel hier ziehen. Und du kannst so etwas sagen wie Magst du diese Icons oder sollten sie schwarz und weiß sein? Wenn sie zum Beispiel ja sagen, können Sie auf dieses Symbol klicken. Sie können zum Code zurückkehren und einen von diesen suchen. Sagen wir zum Beispiel das hier. Und wenn Sie nur den Standardstatus dafür haben, können Sie beispielsweise verschiedene Zustände für diese Symbole erstellen. Zum Beispiel haben wir Standard, wir haben Hover. Sie können also sehen, dass es die Farbe für den Standardstatus und für den Hover ändert. Je nachdem, was Sie mit Ihren Farben gemacht haben, wird es auf diese bestimmte Weise reagieren. Also Ikonographie, Farben, dasselbe, dieselbe Geschichte. Wenn Sie also auswählen, werden sie CSS erhalten, können sie einfach klicken, um in die Zwischenablage zu kopieren, und sie können dies in ihren Code integrieren. So einfach ist es also, mit Adobe XD mit Farben zu arbeiten, welche Styleguides. Und ich würde Ihnen immer empfehlen, dies als PDF zu exportieren weil Ihre Entwickler und möglicherweise unterwegs sind. Manchmal besprechen sie dies vielleicht mit Ihrem Kunden. Stellen Sie also sicher, dass Sie ihnen den Link des Styleguides selbst senden, um sie nicht zu sehr zu verwirren und sicherzustellen, dass Sie ihnen separate Links senden. Oft Design von Drahtgittern, Papier, Drahtgittern, was auch immer Sie tun, denn auf diese Weise können sie alle diese Farben leicht inspizieren. Denn wenn du sie alle in einen Link steckst, was du tun kannst, wirst du sie einfach verwirren. Und ich habe festgestellt, dass dieser Ansatz bei meinen Entwicklern besser funktioniert. Sprechen Sie jedoch immer zuerst mit Ihren Entwicklern, bevor Sie anfangen zu arbeiten. Erwähnen Sie unbedingt die Hex- oder RGB-Farbmischung , um zu sehen, ob sie mit einigen dieser Farben gut sind. Und schließlich welches Etwas, das ich dir nicht gezeigt habe. Wenn ich diese Farbe zum Beispiel auswähle , klicke ich direkt hier. Lass mich mich verstecken. Sie können also sehen, dass wir Volltonfarbe, linearen Farbverlauf, radialen Farbverlauf und Winkelverlauf in XD haben, wir haben Fettleibigkeit für die Farbe, wir haben hier verschiedene Farbtöne. Wir haben die Fettleibigkeit für den Alpha-Kanal, für die Farbe selbst. Und schließlich haben wir den Hex, RGB und HSB. Je nachdem, was Ihre Kunden und Entwickler wollen, können Sie es hier auswählen. Im Grunde ist es das also. Deshalb sind diese Projekte Styleguides wirklich wichtig, da Sie an einer einzigen Stelle all diese Elemente haben, die Sie in Ihrem Design verwendet haben. Und wenn Sie an Ihren Projekten arbeiten, stellen Sie sicher, dass Sie die Styleguides immer parallel zu dem erstellen, was Sie tun, da es später viel einfacher ist, sie zu exportieren, damit Ihre Entwickler einen Blick darauf werfen können. Im Grunde ist es das also. Ich denke, Hume hat gesehen, wie wichtig Styleguides für Entwickler sind. Es gibt nicht so wichtig für Sie, aber sie könnten für die anderen Designer wichtig sein , die möglicherweise nach Ihnen an diesem speziellen Design arbeiten. Da Sie in den meisten Fällen möglicherweise nicht daran interessiert sind, an diesem speziellen Projekt weiter zu arbeiten. Vielleicht sind einige andere Designer in Ihre Schuhe gegangen und haben weiter an diesem Projekt gearbeitet. Wenn Sie also so etwas wie einen Styleguide haben, wird es für Schuldendesigner immer viel einfacher sein , dort weiterzumachen, wo Sie im gleichen Stil aufgehört haben. Und natürlich wird es für Entwickler viel einfacher sein, mit Styleguide zu arbeiten, da sie an einem einzigen Ort alle Informationen haben, die sie benötigen, um mit der Programmierung dieses Projekts zu beginnen. 7. Dein Kursprojekt: Ihr Klassenprojekt für diese Klasse besteht darin, entweder den Styleguide oder die Farbkombination Ihrer Wahl zu erstellen . Vergewissern Sie sich, dass Sie die Marke verwenden, die Ihnen wirklich gefällt. Du kannst den Farbpeak verwenden, den ich dir gezeigt habe. Sie können diese Farben auswählen und dann Ihr Lieblingswerkzeug Ihrer Wahl verwenden, sei es Photoshop, Abb, meine XD-Skizze, was auch immer es ist, stellen Sie sicher, dass Sie es erstellen und als Bild in unsere Klassenprojekte hochladen. Aber Sie können auch das tun, was ich Ihnen direkt hier im Projektstyleguide zeige. So können Sie etwas erstellen, das so komplex ist, oder Sie können einfach hier hineinzoomen und einfach die Farben verwenden. Vergewissern Sie sich, dass Sie die Hex-Codes verwenden, da ich wirklich fasziniert und daran interessiert bin , den von Ihnen verwendeten Hex-Code zu sehen und auch Ihre Farben zu benennen. Und lege einfach diesen kleinen Text hier hin. Habe ich schon. Nur damit ich deinen Denkprozess sehen kann und um zu sehen, wie dein Name, deine Farben, du kannst eines dieser Tools verwenden, die du in einer der vorherigen Lektionen gesehen hast. Und diese Tools geben dir die Farbnamen. Sie können also diese Namen verwenden oder Ihre eigenen Namen verwenden, tun, was immer Sie wollen. Stellen Sie einfach sicher, dass Sie die Farbkombination erstellen. So viele Farben brauchst du nicht. Sie können drei Farben verwenden. Zum Beispiel werden Schulden reichlich sein. Stellen Sie einfach sicher, dass Sie sie kombinieren, verwenden Sie Hex-Codes und die folgenden Namen und laden Sie diese als Bild in Ihre Klassenprojekte hoch. Ich freue mich sehr darauf zu sehen, was ihr schaffen könnt. Und ich freue mich sehr darauf, mit euch im Unterrichtsprojekt zu interagieren. 8. Schlussbemerkung: Da gehst du. Sie haben das Ende dieses Kurses erreicht. Es ist nur eine kurze Klasse, wie ich im Intro und zu Beginn dieses Kurses erwähnt habe, Farbe ist ein wirklich komplexes Fach und sie unterrichten es in Schulen vier Semestern, sogar vier Jahre. Es ist also wirklich komplex, wenn Sie es wollen, aber es muss nicht diese komplexe Mischung sein , um einige dieser Schritte zu befolgen, die ich erwähnt habe, und stellen Sie sicher, dass Sie es selbst erforschen. Lassen Sie diese Klasse nur Ihr Ausgangspunkt für die Erforschung der Farbwelt sein. Stellen Sie sicher, dass Sie Ihr Lieblingstool auswählen und es von dort aus weiter erkunden, und überprüfen Sie unbedingt die PDF-Datei. Denn wie ich in dieser Klasse immer wieder erwähne, alle Links, die ich erwähnt habe, und alle befinden sich alle Links, die ich erwähnt habe, und alle Ressourcen, die ich erwähnt habe, in diesem PDF. Stellen Sie sicher, dass Sie auf die Links klicken, um schnell darauf zuzugreifen, und beginnen Sie dann, Ihre College-Reise zu erkunden und zu beginnen. Nochmals vielen Dank, dass Sie sich diesen Kurs angeschaut haben. Ich hoffe wirklich, dass Sie es aufschlussreich und hilfreich fanden. Wenn Sie noch einmal mehr Wissen über Farbe lernen möchten, sollten Sie entweder Online-Kurse verwenden, die wirklich lang sind und ausführlich über alle Fächer eingehen, die wir in dieser Klasse erwähnt haben. Oder um Bücher über Farben zu lesen. Denn wie ich immer wieder erwähne, ist Farbe eines der komplexesten Themen im Design, da sie all diese verschiedenen Sorten abdeckt. Daher dauert es wirklich, sehr lange, bis man mit Farben, Farbauswahl und Farbtheorie gut ist. Also nochmals vielen Dank fürs Zuschauen und ich freue mich sehr darauf, Sie in einigen meiner anderen Kurse zu sehen. Kümmere dich.