Erstellen von Farbpaletten für Web- und Benutzeroberflächendesign (in Figma)

1. Willkommen im Kurs: Wenn Sie jemals Schwierigkeiten hatten, Farben auszuwählen, die tatsächlich zusammenpassen, oder wenn Sie Designs gefunden haben , die sich ein wenig seltsam anfühlen, dieser Kurs genau das Richtige für Sie. In nur wenigen Minuten werden wir von einer einzelnen Farbe zu einer kompletten Palette übergehen , die ausgewogen, vielseitig und sofort in einem echten Design verwendet Jeder. Ich bin Adi. Willkommen zu diesem kurzen Kurs zum Erstellen eigener Farbpaletten für Web- und UI-Design Wir beginnen mit der Erkundung von Farbschemata mit Tools wie Adobe Color Dann werden wir mit der Erstellung von Farbtönen und Schattierungen direkt in Figma beginnen Schließlich wenden wir unsere Palette auf ein fertiges Layout an ein fertiges Layout sodass Sie es sofort in Aktion sehen können Sie müssen kein Experte für Farbtheorie sein. Wir werden es praktisch und praktisch halten, und am Ende werden Sie genau wissen, wie Sie Ihre eigenen Farbpaletten erstellen und selbstbewusst anwenden können Ich habe im Abschnitt Klassenprojekt eine Startdatei mit allem, was Sie benötigen, beigefügt Abschnitt Klassenprojekt eine Startdatei mit allem, was Sie benötigen Anweisungen, Platz für Ihre Palette und ein Beispiel-Layout, mit dem Sie herumspielen können. Okay, lassen Sie uns eintauchen und mit dem Aufbau unserer Palette beginnen. 2. Farbharmonien verstehen: Bevor wir uns Figma zuwenden, lassen Sie uns über Harmonien sprechen Eine Harmonie besteht im Grunde aus einer Reihe von Regeln für die Auswahl Farben, die von Natur aus gut zusammenpassen Sie haben wahrscheinlich Begriffe wie komplementär, analog, triadisch gesehen wie komplementär, analog, triadisch Dies sind im Grunde Abkürzungen zur Erstellung ausgewogener Paletten Jeder hat seinen eigenen Nutzen. kostenlose Option ist ideal, wenn Sie einen starken Kontrast wünschen , z. B. wenn Sie eine Quotenaktion hervorheben möchten. Analog erzeugt ruhige, einheitliche Schemata, perfekt, wenn Sie Farben verwenden möchten, die einander ähnlich Und Triadic bietet Ihnen eine Vielfalt, die oft in verspielten, farbenfroheren Designs wie Infografiken verwendet wird farbenfroheren Designs wie Jetzt müssen Sie sich das alles nicht merken. Das Schöne ist, dass Tools wie Adobe Color die schwere Arbeit für Sie erledigen Lassen Sie uns also einsteigen und schnell einige Paletten generieren. Wir können Figma später verfeinern. Bevor wir anfangen, lass mich dir zeigen, womit wir arbeiten Also hier habe ich eine Kopie der Starterdatei, die Sie herunterladen können, indem Sie den Links in der Kursbeschreibung folgen . Und darin finden wir im Wesentlichen einige Anweisungen dazu was wir tun müssen, sowie einige Ressourcen. Und dann haben wir ein Übungslayout, mit dem wir unser Farbschema anwenden können, und dann einige zusätzliche Rahmen , um unser Farbschema anwenden können, und unsere Farben zu definieren. Wir haben einen für die Primär - oder die Markenfarbe. Wir haben einen für das Grau und dann einen für die Harmonie. Apropos Harmonie, lassen Sie mich Ihnen ein Tool zeigen, das ich ständig verwende , um Farbpaletten zu erstellen, und das ist Adobe Color Sie können also darauf zugreifen, indem Sie zu color.adobe.com gehen und dann auf Erstellen klicken Hier würden Sie im Grunde Ihre Grundfarbe wählen. Es ist diese in der Mitte, und Sie können hier klicken, um die Farbe zu ändern. Ich weiß nicht, vielleicht willst du ein dunkleres Grün, so etwas. Und sobald Sie diese Farbe ausgewählt haben, müssen Sie genau hier hingehen, wo Harmonie steht und aus den verschiedenen Harmonien wählen. Standardmäßig haben wir also eine analoge Harmonie ausgewählt, und dadurch wird im Grunde eine Farbpalette für Farben erstellt , die auf der Farbpalette nebeneinander liegen Aber wenn wir das zum Beispiel auf einfarbig umstellen , ist das völlig anders Jetzt gibt es uns verschiedene Schattierungen dieser Farbe. Sie können sehen, dass sie in einer geraden Linie sind. Aber wenn wir das auf Triade umstellen, wählt es jetzt Farben aus gleich weit entfernten Punkten auf der Farbpalette Wir haben genau dieses Pastellorange. Wir haben diese Farbe, die wie Magenta oder Lavendel aussieht, also völlig anders, oder? Und Sie werden sehen, dass, wenn ich die Farbe hier im Farbrad ändere, die anderen Farben automatisch aktualisiert werden wobei im Grunde der gleiche Algorithmus beibehalten wird. Dann haben wir auch kostenlos. Das wird häufig genutzt. Dabei werden im Grunde Farben ausgewählt, die sich auf dem Farbkreis gegenüberliegen . Und dann gibt es noch ein paar zusätzliche, die sich kostenlos teilen. Sie haben eine quadratische Anlage. Wir werden jetzt nicht wirklich darauf eingehen , aber Sie können gerne damit herumspielen. Das ist also eine Möglichkeit, eine Farbpalette zu generieren , die auf einer Startfarbe basiert. Eine andere Möglichkeit, Sie können auf Erkunden klicken, und Adobe Color hat eine Reihe von Farbpaletten in seiner Datenbank Sie können zum Beispiel nach Lebensmitteln suchen und erhalten dann Farbpaletten, die sich auf Lebensmittel beziehen Und es gibt sogar Farbpaletten, die von einem bestimmten Foto wie diesem hier abgeleitet sind von einem bestimmten Foto wie diesem hier abgeleitet Das ist also eine großartige Ressource, um Farben zu finden. Ein anderes, das ich empfehlen könnte, ist coolers.co. Sie können den Generator direkt hier starten und einfach die Leertaste drücken, und das generiert eine Farbpalette für Sie, obwohl ich weiß, dass Sie damit nicht wirklich Farbpaletten erstellen können, die auf Harmonien basieren Das ist also etwas, das du im Hinterkopf behältst. Lassen Sie uns zu unserem Projekt zurückkehren und tatsächlich eine Harmonie dafür schaffen. Und die Farbe, mit der ich für dieses Projekt beginnen werde , ist dieses Orange. Es ist f97 400. Es ist eine Farbe, die meiner Meinung nach gut für diese Art von Projekt Natürlich sollte jede Markenfarbe für das jeweilige Projekt einzigartig sein, aber für diese Demo werde ich dieses Orange verwenden. Also werde ich das tatsächlich kopieren und zu Adobe Color zurückkehren und eine Farbpalette erstellen . Ich werde hier klicken. Ich füge diese Farbe ein und wähle die Farbe „Kostenlos“, weil die Farben in der Regel sehr gut zusammenpassen. Sie ergänzen sich gegenseitig, oder? Und sie bieten auch einen hohen Kontrast zueinander , weil sie sich auf den gegenüberliegenden Seiten des Farbkreises befinden. Das ist also genau das, was ich für dieses Projekt verwenden werde, und ich werde einfach klicken, um diese Farbe zu kopieren, und ich werde sie in meine Figma-Datei einfügen Kopiere das, füge es hier und dann nehme ich einfach dieses und jenes und schon habe ich meine Harmonie eingerichtet Ich habe also meine Grundfarbe und ich habe meine Harmonie. Werde ich jetzt all diese vier komplementären Farben verwenden ? Nicht unbedingt, aber ich habe sie nur für den Fall, dass ich sie brauche, oder? Ich habe etwas, mit dem ich arbeiten kann. Und ich denke, das sollte der allererste Schritt im Designprozess sein. Sie Ihre primäre Markenfarbe heraus und schaffen Sie dann auf dieser Grundlage eine Harmonie. Und welche Harmonie, welche Art von Harmonie hängt wirklich vom Projekt ab. In den meisten Fällen würde ich vorschlagen, für eine kostenlose Variante zu entscheiden, weil es, glaube ich, die sichere Sache ist, aber es gibt auch andere Arten aber es gibt auch andere Arten. Scrollen Sie einfach durch sie und wählen Sie die aus , die Ihrer Meinung nach für Ihr Projekt geeignet ist. Ordnung. Jetzt haben Sie einen Basissatz von Farben, mit denen Sie arbeiten können Als Nächstes machen wir diese Palette vielseitiger, indem wir Farbtöne und Schattierungen hinzufügen Es funktioniert also für Hintergründe, Akzente und alles dazwischen 3. Erstellen von Farbtönen und Schattierungen: ist toll, ein paar Hauptfarben zu haben, aber bei echten Designs brauchst du hellere und dunklere Variationen für Tiefe, Hierarchie und Kontrast Hier kommen Farbtöne und Schattierungen ins Spiel, und Sie können sie ganz einfach in Figma oder im Internet erstellen . Lass es mich dir zeigen Lassen Sie mich zunächst die Farben und Schattierungen erklären . Es ist sehr einfach Ein Farbton ist eine hellere Variante einer Farbe. Ein Farbton ist eine dunklere Variante. Es ist, als würde man dieser bestimmten Farbe Weiß oder Schwarz hinzufügen. Und es gibt so viele Möglichkeiten , Farben und Schattierungen zu erzeugen Lassen Sie mich Ihnen einen sehr schnellen Weg in Figma zeigen, und zwar mit dem HSL-Farbmodus Wenn wir also ein Element auswählen und die Füllung öffnen, können wir hier klicken, und standardmäßig wahrscheinlich Hex Es ist das Farbformat , das wir alle kennen. Aber wenn wir zu HSL wechseln, steht das für Farbsättigung und Helligkeit Und das ist eine andere Art, eine Farbe darzustellen. In diesem Fall ist 28 der Farbton, und das wird durch diesen Schieberegler hier gesteuert. Es zeigt uns im Grunde die reine Farbe, die wir verwenden. Dieser Wert steht für Sättigung, also wie gesättigt ist diese Farbe. Und Sie werden sehen, dass die Farbe pastellfarbener wird, wenn wir den Wert verringern. Und wenn wir ganz nach unten gehen, wird es nur noch grau, oder? Lassen wir das vorerst bei 100 belassen. Und dann ist der dritte Parameter hier Leichtigkeit. Nun steuert die Helligkeit, wie hell oder wie dunkel eine Farbe ist. Und dies ist Ihr Hauptwerkzeug zum Erstellen von Farbtönen oder Schattierungen. Wenn Sie also mit der Grundfarbe beginnen, was in unserem Fall diese ist, und den Schieberegler nach oben bewegen, erstellen Sie hellere Versionen dieser Farbe, weil Sie den Schieberegler im Grunde in Richtung Weiß bewegen Wenn Sie dieselbe Farbe auswählen, dann aber den Schieberegler nach unten bewegen oder die Helligkeit verringern, erstellen Sie tatsächlich dunklere Versionen dieser Farbe, oder? Also einfach so, ja, wir haben diese Grundfarbe getönt und wir haben auch eine Nuance dieser Grundfarbe Nun, wie gesagt, es gibt viele Möglichkeiten, wie Sie das tun können. Sie können zum Beispiel die Farbe auswählen oder kopieren, und Sie können ins Internet gehen und es gibt eine Reihe solcher Tools. Machen Sie zum Beispiel tints shades.com. Hier gibst du im Grunde den Hexadezimalcode ein und klickst auf Tönungen und Schattierungen erstellen Dadurch entstehen eine Reihe von Variationen Ihrer Farbe, und Sie können einfach klicken, um diesen Farbcode zu kopieren Und das funktioniert im Hex-Format. Es gibt auch ein Tool von Noel Delgado, das ich häufig verwende Es heißt Shadow Lord und funktioniert genauso Du fügst deine Farbe ein. Sie wählen hier aus, wie viele Schritte Sie ausführen möchten. Im Grunde möchten Sie vielleicht in Schritten von 5%, und das wird eine Menge von Farbtönen und Schattierungen für Ihr Projekt erzeugen Farbtönen und Schattierungen für Ihr Wenn Sie jedoch den einfachsten Weg wollen, können Sie ein FigmaPlugin verwenden, und es gibt eine Reihe von Ich werde dir nur einen von ihnen zeigen. Lassen Sie uns die Aktionen hier öffnen. Wir wechseln zu Plug-ins und suchen nach Farbtönen. Und das wird dir eine Menge Plugin-Vorschläge aus der Community Und genau hier werde ich Hue Hue wählen. Okay, ich werde das speichern und dann werde ich es ausführen. Und das Plugin sieht ungefähr so aus. Ich werde hier klicken. Ich werde die Pipette benutzen und meine Grundfarbe wählen Ich werde wählen, wie viele Farben und Schattierungen ich haben möchte. Fünf sind gut genug für mich. Ausrichtung vertikal, und ich werde auf Farben generieren klicken. Und das erzeugt eine Reihe von oder in diesem Fall fünf Farbtöne und fünf Schattierungen der Farbe, die ich ausgewählt habe die genau hier in der Mitte hervorgehoben Das ist im Grunde die Grundfarbe. Also werde ich das vorerst zur Seite legen. Nun, wenn Sie Farbpaletten erstellen, ist es sehr wichtig, dass Sie auch eine für Grautöne haben, da es in einem Design verschiedene Variationen einer grauen Farbe gibt in einem Design verschiedene Variationen einer grauen Farbe Sie könnten zum Beispiel ein dunkles Grau für Text verwenden ein dunkles Grau für Sie könnten ein sehr helles Grau für einen Rand oder einen Hintergrund verwenden , oder? Deshalb ist es sehr wichtig, eine Reihe grauer Farben zur Auswahl zu haben. Nun, wie kreiert man dieses Grau? Öffnet man einfach den Farbwähler und macht das im Grunde einfach so Das könnten Sie tun, aber ich mache gerne eine graue Farbe, die auf der tatsächlichen Primärfarbe basiert . Okay? Es enthält ein bisschen von dieser Grundfarbe und ich habe festgestellt, dass ich damit die besten Ergebnisse erziele. Also hier ist, was ich tun werde. werde dieses graue Feld genau hier auswählen Ich werde dieses graue Feld genau hier auswählen und in Figma auf I drücken, und ich probiere meine Primärfarbe Dann öffne ich meinen Farbwähler und gehe wie folgt vor Ich werde zunächst die Helligkeit reduzieren, also erstelle ich im Grunde eine sehr dunkle Version dieser Farbe Ich denke, ungefähr 10% funktionieren ganz gut. Und dann werde ich die Sättigung reduzieren im Grunde genommen viel Farbe daraus entfernen. Und ich werde bei vielleicht vier aufhören . Und ich glaube, ich werde die Helligkeit ein bisschen erhöhen, nur damit wir das ein bisschen besser sehen können Okay, damit bin ich also ziemlich zufrieden. Das ist meine graue Farbe. Der nächste Schritt besteht also darin, dieser Grundlage einige Farbtöne und Schattierungen zu erzeugen Also werde ich den Stecker noch einmal einschalten. Ich werde Strg K oder Befehl K drücken , wenn Sie auf einem Mac sind. Ich wähle Hue Hue, probiere die Graufarbe aus und generiere Farben. Dadurch werden im Grunde genommen Farbtöne und Schattierungen für meine graue Farbe generiert Farbtöne und Schattierungen für meine graue Farbe Und ich werde diese vorerst neben meinen primären Farbtönen und -tönen beiseite legen neben meinen primären Farbtönen und -tönen Jetzt fühlt sich unsere Palette vollständig an. Wir haben helle Farben, dunkle Farben und alles dazwischen. Lassen Sie uns das auf die Probe stellen, indem wir es auf ein echtes Layout anwenden. 4. Anwenden der Palette auf ein Layout: Das ist der unterhaltsame Teil, Ihre Palette zu nehmen und sie in einem echten Design zum Laufen zu bringen. Ich wende meine Farbe auf das Layout in der Startdatei an, sodass Sie sehen können, wie ich jede Farbe für verschiedene Funktionen wie Hintergründe, Text und Handlungsaufforderungen verwende jede Farbe für verschiedene Funktionen wie Hintergründe, . Nachdem das geklärt ist, fangen wir an. Ich werde damit beginnen, Farben auf den Text anzuwenden , da dies den Großteil des Inhalts auf unserer Seite ausmacht. Der Plan ist also, ich möchte ein dunkles Grau auf alle Überschriften anwenden , ein helleres Grau auf die anderen Textelemente Gehen wir also zurück zu unserer Palette. Dies ist die Grundfarbe , von der wir ausgegangen sind. Lassen Sie uns zum Beispiel mit diesem gehen. Lassen Sie uns das kopieren und ich wähle alle Überschriften aus und füge sie in dieser Farbe Schauen wir uns als Nächstes die regulären Textelemente an. Und eine andere Sache, die ich tun werde, ist dieses Element aus den Farbtönen und Schattierungen hier zu kopieren und es einfach in den grauen Rahmen einzufügen. Und das wird mir nur sagen, welche Farben ich letztendlich in meinem Design verwendet Fangen wir eigentlich mit der grauen Grundfarbe an. Lassen Sie uns das auf ein Element anwenden und sehen, wie es aussieht. Und in meinen Augen finde ich, dass es gut aussieht. Versuchen wir es mit einer etwas leichteren Version, vielleicht dieser. Lass es uns hier anwenden. Und ich denke, das gibt mir einen etwas besseren Kontrast. Lassen Sie uns auch diese auswählen und diese Farbe anwenden. Ja, ich denke, das gibt mir einen viel besseren Kontrast zwischen dem eigentlichen Textelement und der Überschrift. Und eine sehr wichtige Sache, ich hier überprüfen muss, ist der Farbkontrast aus Gründen der Barrierefreiheit. Das ist also wirklich super einfach, Figma zu machen. Wenn ich ein Element mit einer Füllfarbe auswähle und darauf klicke, erhalten wir im Grunde diese Grafik hier im Farbwähler Wenn sich die von Ihnen gewählte Farbe in diesem Bereich des Farbwählers befindet , der nicht gepunktet ist, hat diese bestimmte Farbe im Vergleich zu ihrem Hintergrund einen ausreichenden Farbkontrast , sodass sie in diesem Fall den A-Kontraststandards entspricht , sodass sie in diesem Fall den Und diese dienen der Barrierefreiheit, oder? Es ist für Menschen mit Sehbehinderungen gedacht, denen schwer fällt, Text zu entziffern , wenn es so ist, als ob er nicht genug Kontrast hat Und Sie können tatsächlich sehen, dass wir ein Kontrastverhältnis von 7,45 zu eins haben 7,45 zu eins Ich werde jetzt nicht auf die Einzelheiten eingehen, aber nur damit Sie es wissen, es ist eine wichtige Überprüfung Denken Sie also daran , das jedes Mal zu tun. Okay, mal sehen, wo ich diese Textfarbe noch anwenden kann. Nun, ich könnte es genau hier in diesen Tabs anwenden, oder? Also wähle das aus und wende es dort an. Ups. So, vielleicht sogar dieser weil er irgendwie in dieselbe Textkategorie gehört wie die anderen Diese werden unterschiedlich gefärbt sein, weil Abzeichen handelt , die sie brauchen, um ein bisschen mehr herauszustechen Die Garzeit und der Text mit dem Schwierigkeitsgrad des Rezepts sollten jedoch auf die gleiche Weise gefärbt sein Also werde ich es auch auf diese anwenden. Nun, da ich diese Farbe für Text verwendet habe, also 553, werde ich dieses Element einfach kopieren und es hier in mein Grau einfügen es hier in mein Grau Okay, lassen Sie uns das Grau fertig auftragen. Wir haben einige andere UA-Elemente , die einige der grauen Farben verwenden sollten. Und hier spreche ich zuallererst über die Grenzen dieser Elemente dieser Schaltflächen hier, der Karten selbst. Und wir müssen auch eine Hintergrundfarbe für dieses Dropdown herausfinden . Fangen wir also mit den Grenzen an. Wählen wir die hellste Farbe, die wir hier haben , in unserem Fall DD, DC DC. Und lassen Sie uns diese vier Elemente auswählen und ihre Konturfarbe auf dieses Element genau dort ändern . Und wir werden nur einen kurzen Blick darauf werfen , was für mich gut aussieht. Und lassen Sie uns weitermachen und diese Elemente hier auswählen und ihre Konturfarbe ändern. Und ich denke, die sehen auch gut aus. Also machen wir einfach damit weiter. Also lass mich das kopieren. Ich werde es einfügen, damit ich weiß, welche Farben ich verwendet habe. Und jetzt schauen wir uns dieses Drop-down-Element an, oder? Also wähle ich es aus und drücke I, und ich probiere einfach diese Farbe aus. Schauen wir uns also an, wie das aussieht. Das sieht ziemlich gut aus. Vielleicht hätte ich gerne, dass das etwas leichter ist. Und wenn wir uns die Farbpalette ansehen, die wir generiert haben, haben wir eigentlich keine hellere Version davon. Und in diesem Fall könnten wir, du weißt schon, den Satz von Farbtönen und Farbtönen für diese Farbe regenerieren und im Grunde mehr Schritte wählen, oder wir können einfach unsere eigene Farbe kreieren Sie können das also auf jeden Fall tun . Das kannst du auswählen. Sie können die Farbfüllung direkt hier öffnen und wir können im HSL-Modus arbeiten, genau wie ich es Ihnen zuvor gezeigt habe, und wir können einfach die Helligkeit erhöhen , bis sie fast weiß ist. In meinem Fall ergibt 94 also eine Farbe, die gut genug für diesen speziellen Ich bin damit zufrieden, und ich werde einfach diese Füllfarbe kopieren und sie hier hinzufügen. Ich werde diesen Wert einfügen und ihn auch auf dieses Element anwenden. Das war's also für das Anwenden der Grautöne. Unser Übungslayout sieht jetzt ganz anders als das, was wir zuvor hatten, weil wir uns um die Färbung der Typografie, der Ränder und aller Elemente gekümmert haben, die im Grunde genommen eine graue Farbe benötigten Lassen Sie uns nun weitermachen und damit beginnen, unsere Primär- oder Markenfarbe anzuwenden Und lassen Sie mich das von Anfang an sagen. Das sollte sparsam verwendet werden, oder? Es sollte eher eine Akzentfarbe sein und nicht überall in Ihrem Design vorhanden uns vor diesem Hintergrund Lassen Sie uns vor diesem Hintergrund die primäre Markenfarbe auswählen und schauen, wo wir sie so anwenden können wie sie ist, einfach direkt. Und aus meiner Sicht ist es ein guter Ort, das zu tun, sie auf diese Symbole anzuwenden, oder? Also werde ich einfach doppelklicken und doppelklicken, bis ich den richtigen Rahmen ausgewählt habe, und ich werde hier einfach die schwarze Farbe ersetzen. Wo Auswahlfarben stehen, füge ich einfach meine Primärfarbe ein. Und das zielt nur auf die Elemente ab, die Symbole, im Grunde auf diejenigen, die wir schwarz verwenden. Und ich werde hier dasselbe tun und ich werde dasselbe hier tun. Und hier. Allein dadurch haben wir jetzt ein bisschen von dieser Akzentfarbe in unserem Design, und dadurch fühlt sich alles einheitlicher Aber jetzt schauen wir uns die anderen Elemente an , die unsere Aufmerksamkeit benötigen Und das sind diese beiden Plaketten, auf denen „Abendessen“, „Italienisch“ oder „Mittagessen, Mittelmeer“ steht Diese könnten auch diese Primärfarbe verwenden. Aber die Sache ist, wenn wir diese auswählen und die volle Markenfarbe verwenden, werden sie viel zu stark hervorstechen. Sie werden unsere Aufmerksamkeit auf diesen Abschnitt lenken, anstatt auf diesen Abschnitt genau hier, wo es heißt, Rezept ansehen. Das sollte die so genannte Aktion sein, oder? Das sollten die Dinge sein, auf die die Leute klicken. Und indem wir hier die Vollfarbe auftragen, lenken wir viel zu viel Aufmerksamkeit auf diesen Bereich. Also müssen wir diese Farben einfach etwas abschwächen. Wie machen wir das, indem wir Farben und Schattierungen verwenden? Also kehren wir zu unserer Liste von Farbtönen und Farbtönen zurück. Ich wähle die hellste Farbe, den hellsten Farbton dieser Primärfarbe Und ich werde es als Hintergrund für dieses Element Und das sieht für mich ganz gut aus. Es ist nicht zu viel Farbe, aber es reicht aus, damit sich das gesamte Design zusammenhängender anfühlt Nun, was den eigentlichen Text angeht, nun, wie wäre es, wenn wir uns eine Nuance dieser Farbe schnappen Also das ist die Basis. Nehmen wir zum Beispiel diesen, fügen wir ihn ein und sehen, wie er aussieht, wählen wir beide aus und fügen ihn ein. Und ich finde, das sieht wirklich gut aus. Es ist nicht wie schwarz. Es ist nur eine dunklere Version unserer Primärfarbe. Und ich finde, es sieht wirklich gut aus. Wenden wir das also auf die anderen Elemente an. Lassen Sie mich also zunächst die anderen Elemente auswählen und schauen, ob wir sie finden können. Es ist dieser hier. So wie es ist. Und dann wählen wir für den Text diesen aus. Und während ich die Strg- oder Befehlstaste und die Umschalttaste gedrückt halte, kann ich einfach klicken, um all diese Elemente auszuwählen , die neue Farbe einzufügen und fertig mit der Markenfarbe. Das letzte Element, auf das wir nun Farben anwenden müssen, ist diese Schaltfläche „Rezeptansicht“. Was können wir hier also tun? Nun, erinnern wir uns an die Tatsache, dass wir eine Harmonie haben , die für uns bereit ist und die wir noch nicht genutzt haben. Aber das hätte ich fast vergessen, da wir einige Farbtöne und Schattierungen dieser Primärfarbe verwendet haben , wählen wir diese aus und kopieren sie dort in unseren primären Markenfarbrahmen, nur damit wir wissen, welche Farben wir in unserem Design verwendet haben Okay. Nun zurück zur kostenlosen Harmonie. Nehmen wir diese Farbe, kopieren sie und verwenden wir sie für die Tasten. Also wähle ich das aus und ersetze einfach das reine Schwarz durch diese Farbe. Und auf Anhieb ist das zu hell. Es ist viel zu hell. Und weil es auf diesem weißen Hintergrund viel zu hell ist, hat es nicht genug Kontrast. Wenn wir hier kurz nachschauen, werden Sie feststellen, dass sich der Farbwähler innerhalb der gepunkteten Zone befindet und wir den DA-Kontraststandard nicht Eine Sache, die Sie in Figma tun können , ist, dass Sie tatsächlich auf diese Schaltfläche klicken können . Dadurch wird der Farbwähler automatisch auf die erste Farbe verschoben , die dem Standard entspricht Alternativ können Sie auch Farbtöne und Schattierungen für diese Farbe erstellen Farbtöne und Schattierungen für und dann eine davon auswählen Lassen Sie uns tatsächlich diese Farbe auswählen , die wir mit unserer Harmonie geschaffen haben, und schauen wir uns an , wie sie aussehen wird Lassen Sie uns das also tatsächlich auswählen, den Strich und die Textfarbe ändern. Und wenn wir uns den Farbwähler hier ansehen, können Sie sehen, dass wir jetzt einen ausreichend guten Farbkontrast für diese Elemente haben einen ausreichend guten Farbkontrast für diese Elemente Lassen Sie uns also tatsächlich den gesamten Abschnitt auswählen, und ich werde einfach die hellblaue Farbe durch diese ersetzen die hellblaue Farbe durch diese ersetzen Und wir sind fertig. Lassen Sie einen letzten Blick darauf werfen , wie unser Layout derzeit aussieht. Wir haben auf die meisten Elemente, einschließlich Text, Grautöne angewendet. Und dann haben wir einen Teil dieser primären Markenfarbe als Akzente in unser gesamtes Design gestreut dieser primären Markenfarbe als Akzente in unser gesamtes Design Und wir haben sowohl die Rohfarbe für diese Symbole verwendet, auch die Farbtöne und Schattierungen dieser Farben für diese Abzeichen genau hier Und für die Hauptaktion von Qualta haben wir die komplementäre Farbe verwendet, die wir durch unsere Harmonie erhalten haben Und einfach so besteht Ihre Palette nicht nur aus einer Reihe von Farben Es ist Teil eines echten funktionalen Designs. Wir haben mit einer einzigen Farbe angefangen. Wir haben eine vollständige Palette mit Harmonien, Tönen und Schattierungen erstellt und sie auf ein Layout angewendet , um zu sehen, wie alles zusammenpasst Dieselben Schritte funktionieren für jedes Designprojekt, egal ob Sie eine Website, eine APUI oder sogar Branding-Assets erstellen eine APUI oder sogar Branding-Assets Je mehr Sie üben , solche Paletten zu erstellen, desto schneller können Sie Farben auswählen , die wunderbar zusammenpassen Jetzt sind Sie dran. Laden Sie die Startdatei über den Link in der Kursbeschreibung herunter, erstellen Sie Ihre eigene Palette mit den von uns behandelten Techniken und wenden Sie sie auf das bereitgestellte Layout an. Sie können meinem Ansatz genau folgen oder ihn ganz zu Ihrem eigenen machen. Das liegt an dir. Und wenn Sie eine zusätzliche Herausforderung suchen, versuchen Sie, mit derselben Palette sowohl eine helle als auch eine dunkle Version zu erstellen . Wenn du fertig bist, teile deine Arbeit in der Klassenprojektgalerie. Ich würde gerne deine Meinung dazu sehen. Und wenn Ihnen dieser Kurs gefällt, schauen Sie sich meine anderen Skillshare-Kurse an, um weitere schnelle, praktische Webdesign-Lektionen Ordnung. Danke fürs Zuschauen, viel Spaß beim Entwerfen und wir sehen uns im nächsten Kurs. Tschüss fürs Erste.