Farbe im UX/UI-Design (und Figma-Farbvorlage)

1. Promo: In dieser Klasse werden wir alles über Farbe im UX UI Design lernen. Wir beginnen mit allen Grundlagen, wie man Farben auswählt, mischt und passt, und tauchen dann ein wenig tiefer ein und richten unsere eigenen Stylesheets ein. Im Laufe der Klasse werden wir die folgenden Fächer abdecken. Häufige Techniken, Tipps und Tricks, wie man Farben kombiniert. Konvertieren von Farben zwischen Druck- und Bildschirmdesign. Farbwerte wie Hex, RGB, Pantone und CMYK. Was sind sie und wann benutzen wir sie? Kovarianz, was sind sie und wie man sie aufstellt? Benennungsfarben machen richtig. Wir gehen zur 60, 30, 10 Regel, eine wirklich gute Möglichkeit, Ihre Kollegen für eine solide Hierarchie zu verteilen. Wir werden uns mit der Zugänglichkeit beschäftigen. Und am Ende werden wir sicherstellen, dass wir diese Halsbänder für die Entwicklung dokumentieren. Und ich werde Ihnen einen wirklich großartigen Weg zeigen, wie das geht. Am Ende dieses Kurses werden Sie in der Lage sein, Farben im UX-UI-Design mit Vertrauen zu verwenden. Dies ist ein Kurs durch sehr lernen Dosis IM. 2. EINFÜHRUNG: Lassen Sie uns über Farbe im UI-Design sprechen. Und gemeinsam werden wir einen Blick auf die folgenden Themen werfen. Wir werden mit den Grundlagen beginnen und lernen, was hex ist, um Pantone und CMYK zu sein, und welche verwenden wir für unser UI-Design? Wir werden dann über die Umwandlung dieser Farben von Druck auf Bildschirm sprechen. Und umgekehrt. Wir werden darüber sprechen, wie man Farben wählt und wie man sie wie ein Profi mischt und passt, wir werden lernen, welche Varianten, wie man sie erstellt, wie man Farben richtig nennt. Wir werden über ein System Farben sprechen und wie Sie Ihre Farben für die Programmierung zu dokumentieren. Und wir werden auch über die sogenannte 60, 30, 10 Regel sprechen , eine sehr praktische Möglichkeit, Ihre Farben richtig zu verteilen. Also lasst uns mit unserem ersten Thema beginnen. 3. Kursmaterial: Vielleicht möchten Sie mit mir arbeiten, also habe ich einige Dateien für Sie vorbereitet, die Sie in dem Kurs herunterladen können, navigieren Sie einfach zu Projekt und Ressourcen. Und dort finden Sie alle Informationen und den Link, den wir das Material herunterladen können , oder Sie können zu meinem Profil navigieren. Nun, Sie werden auch einen direkten Link zur Download-Seite finden. Und auf dieser Seite finden Sie eine Vielzahl von Downloads. Sie können einfach die Ursache auswählen, die Sie gerade nehmen, und klicken Sie dann einfach auf Herunterladen. Und es wird automatisch die Datei für Sie herunterladen. Um eine Figma-Datei zu öffnen, um sie herunterzuladen, Es ist wichtig, dass Sie ein Figma-Konto haben. Navigieren Sie in Ihrem Konto zu neuen, beeindrucken Importieren. Sie können dann eine Datei auswählen, die Sie öffnen möchten. Es kann einen Moment dauern, da sie ziemlich groß sind, aber sobald Sie sie importiert haben, sind sie auf Ihrem Konto und Sie müssen diesen Vorgang nicht wiederholen. Ich arbeite mit Google-Schriftarten für die meisten meiner Designs. Wenn Sie also mit der Figma-App arbeiten, brauchen Sie nichts zu tun. Alle Google-Schriftarten werden automatisch vorgeladen. Wenn Sie mit Figma im Browser arbeiten möchten, müssen Sie nur die Schriftart durchsuchen, die Ihnen als fehlt angezeigt wird. Zum Beispiel, Poppins, ich benutze viel. Und dann können Sie diese Schriftart direkt herunterladen auf Ihrem Computer installiert ist und Sie sind bereit zu gehen. Oder Ressourcen sind kostenlos für bestehende Studierende und Sie müssen keine zusätzlichen Informationen eingeben. Sie können natürlich auch jede der anderen Dateien herunterladen, falls Sie interessiert sind. Also im Allgemeinen sind immer hinzufügen Alles, was ich denke, könnte nützlich sein. So gibt es zum Beispiel eine Bootstrap-Vorlage und dann eine Liste mit Links für Inspirationsbücher und -blöcke, die wirklich großartig für das UX-UI-Design sind. Diese Liste der Downloads wächst stetig, also stellen Sie sicher, dass Sie zurückkommen und von Zeit zu Zeit einen Blick werfen. 4. Pantone HEX und RGB?!: So Farben können nicht setzen sich auf verschiedene Arten. Die gebräuchlichsten, auf die Sie wahrscheinlich stoßen werden, unsere Pantone, CMYK, hex und RGB. Die ersten beiden, Pantone und CMYK, werden typischerweise für den Druck verwendet. Nun ist der Unterschied zwischen den beiden ist, dass Pantone diese spezifische Mischung aus Tinte ist, also ist es 100% die gleiche Farbe überall auf der Welt. Jetzt können Sie keine Pantone-Farbe auf Ihrem Heimdrucker drucken. Es ist etwas, dass sie in der Druckerei die spezifische Tinte bekommen und sie dann zu Ihrem Druck hinzufügen würden . Sie können jedoch in eine Druckerei gehen und sich ein sogenanntes Pantone-Buch ansehen oder sogar selbst eines kaufen. Innerhalb dieses Buches sehen Sie alle verschiedenen Farben, Uhren und einen entsprechenden Code. Die EU am Ende der Zahl entspricht ungestrichenem Papier. Und vielleicht sehen Sie einen Sitz für beschichtetes Papier oder einige weitere Versionen. Auch wenn Sie vielleicht eine Pantone-Farbe erhalten, weil es der zuverlässigste Weg ist, um einen Farbabdruck zu referenzieren. Sie werden es wahrscheinlich nur für ein Logo oder für größere Unternehmen für ihre Markenfarbenverwenden größere Unternehmen für ihre Markenfarben weil es ziemlich teuer ist, mit Pantone zu drucken. Die meiste Zeit würden Sie also CMYK und CMYK verwenden und Pantone entsprechen. CMYK ist also Cyan, Magenta, Gelb und K ist für Schwarz. Also mit diesen vier Farben, gedruckte Mischungen zusammen, um Farbe, die Sie suchen. Nun ist es wichtig, Druckwerte zu verstehen und was sie sind, insbesondere Pantone, wenn Sie sich die Referenz ansehen müssen, aber Sie werden diese Werte nicht online verwenden können. Was wir für unser UI-Design verwenden, sind sogenannte Hex- und RGB-Werte. RGB steht für Rot, Grün und Blau. So mischt unser Bildschirm diese drei Farben, um eine Farbe zu erstellen, genau wie im Druck, wir mischten CMYK. Es ist also ein ganz anderes System, um eine Farbe zu erstellen, weshalb Druck und Bildschirm nie genau gleich aussehen. Hex ist auch eine Form von RGB. Es ist nur ein viel kürzerer Weg, um sich zu notieren. Hex steht für hexadezimal und es ist ein sechsstelliger Code mit einem Hash davor. So ist es sehr kurz und einfach zu handhaben. Sie können die gleiche Farbe mit einem RGB oder einem RGBA-Wert anzeigen , um ein steht hiermit für die Deckkraft. Damit Sie das ändern können. Zum Beispiel, wenn Sie noch 0,5 Ansicht bei 50 Prozent Deckkraft setzen, Es ist genau das gleiche. So können Sie hex oder RGB verwenden. Ich empfehle jedoch, hex zu verwenden, da es in einem String-Format kommt , das kürzer und einfacher zu handhaben ist, zu kopieren und einzufügen und zu teilen. Also für Sie habe ich entworfen, nur den Hex-Wert für alle Ihre Farben zu geben , wird mehr als genug sein. Jetzt gibt es eine Sache, die Sie wirklich beachten müssen, wenn es um Farb- und Farbreferenzen im UI-Design geht. Jetzt haben wir gelernt, dass wir im Druckdesign die sogenannten Pantone-Farben haben. Das ist unsere universelle Referenz dafür, wie diese Farbe aussehen sollte. Jetzt passiert das nicht mit Halsbändern auf dem Bildschirm. Nun, obwohl wir unsere Hex-Werte haben, werden sie auf verschiedenen Bildschirmen ziemlich anders aussehen. Nicht eine völlig andere Farbe sein, wenn Sie ein Rot wählen, es wird nicht ein Grün, aber es wird ein wenig anders sein. Sie können diese Präsentation beispielsweise auf Ihrem Desktop und Ihrem Telefon öffnen . Und Sie werden sehen, dass es höchstwahrscheinlich einen leichten Unterschied in den Farben gibt. Jetzt funktioniert das genau so, wie die Dinge im Bildschirmdesign funktionieren. Und solange Ihre Farben genug Kontrast und ein harmonisches untereinander haben, dann ist das auch kein Problem. Es ist nur wichtig, dass Sie sich dessen bewusst sind , weil Ihr Kunde es manchmal nicht bewusst ist. Und wenn sie Ihnen zum Beispiel eine Pantone-Referenz gegeben haben, erwarten sie, dass Ihr Design genau gleich aussieht, was einfach nicht möglich ist. 5. Farben vom Druckdesign in Bildschirm und zurück konvertieren: In einigen Fällen werden Sie möglicherweise aufgefordert, selbst von Druck zu Bildschirm zu konvertieren oder einfach den entsprechenden Wert zu finden. Schauen wir uns mal an, wie wir das machen können. Nun, wenn Sie einen RGB-Wert geben und Sie möchten hex oder umgekehrt. Das ist super einfach. In jeder Design-Software können Sie einfach die Farbe öffnen und dann erhalten Sie normalerweise ein Farbrad oder so etwas. Und das ist zum Beispiel in Figma, Sie haben nur ein kleines Drop-down-Menü. Und dann können Sie Ihre RGB-Farbe wählen, und dann werden Sie den Unterschied hier sehen. Wenn Sie einen RGBA haben, würden Sie einfach die letzte Ziffer eingeben. Nehmen wir an, es ist keine 0,5 hier drin, und es wird Ihnen die Deckkraft geben. Nun, wenn Sie eine Druckfarbe erhalten und gebeten haben, sie in eine Web-Farbe umzuwandeln, das ist ein wenig kniffliger. Es gibt Konverter online, aber die meisten von ihnen sind nicht sehr gut. Der, den ich gerne benutze, ist der offizielle Pantone Website-Konverter. Jetzt können Sie das jederzeit verwenden, wenn Sie Pantone CMYK oder irgendetwas von Print zu Screen Design konvertieren . Und umgekehrt, was Sie tun, ist, dass Sie hier nach oben gehen, um ein Pantone-Farb- und Open-Disketten-Such-Tool zu finden. Also, wenn ich einen Pantone-Wert gegeben habe, gehe ich zu Pantone, Pantone, und dann füge ich meinen Wert hier ein. Und ich wähle es aus. Und NIC hier gibt mir das Muster. Und wenn Sie ein Farbfeld auswählen, sehen Sie auf dem Farbfeld zu RGB-Wert diesen Hex und den CMYK-Wert. Wenn Sie diese physischen Farbfelder hier haben, gibt es tatsächlich eine sogenannte Farbbrücke. Und Sie können auch eine direkt auf den Mustern sehen. Nun würde das auch umgekehrt funktionieren. Nehmen wir an, wir haben nur unsere Hex-Werte und wir wollen einen entsprechenden Druckwertfinden einen entsprechenden Druckwert weil wir sehr nett sind und wir den Druckdesignern helfen wollen. Also in diesem Fall gehen wir zu RGB CMYK im Hex-Konverter. Klicken Sie hier, und dann können Sie hier wählen, was der Wert, den Sie eingeben möchten. Ich habe Hex, ich gebe meinen Wert ein, ich suche ihn. Und wieder, Sie kommen in die Farbfelder und es wird einige Vorschläge machen und die beste Übereinstimmung und Kommissionierung wieder. Und Sie können sehen, dass ich mein entsprechendes Muster hier finde. Nun, das ist eine wirklich gute Möglichkeit, Farben zu konvertieren, und ich empfehle dringend, diese Pantene Konverter zu verwenden. Allerdings wird es nie 100% gleich auf dem Druck und auf dem Bildschirm sein , weil es nur einige sehr unterschiedliche Farbbereiche sind. Aber es ist wahrscheinlich das beste Ergebnis, das Sie bekommen. Und immer daran erinnert, dass diese Konverter da sind, um Ihnen zu helfen und keine Hürde zu schaffen. Also, wenn Sie das Gefühl haben, dass der Hex-Wert, den Sie ihm geben, ein wenig angepasst werden muss. Das ist einfach in Ordnung. 6. Auswahl von Farben und Mattieren: Lassen Sie uns darüber sprechen, wie man Farben auswählt und mischt und passt sie wie ein Profi. Sie könnten ein natürliches Flair für die Auswahl und das Mischen von Farbe haben, und das ist absolut in Ordnung, nur dann gehen Sie voran und verwenden Sie es. Wenn Sie jedoch das Gefühl, ein wenig unsicher über die Einrichtung Ihrer eigenen Markenfarben. Ich werde Ihnen einige Techniken zeigen, die Sie verwenden können. Auf dem Bildschirm sehen Sie ein RGB-Farbrad, das ist, was wir für die Bildschirmgestaltung verwenden. Es gibt 12 Hauptfarben in diesem Rad. Sie können in kühle und warme Farben unterteilt werden. In Ihrer Designsoftware sieht dies so aus und Sie können Farben von hier auswählen. Ich werde eine vereinfachte Version für meine Beispiele verwenden. Auf diese Weise können wir die verschiedenen Farbsegmente ein wenig besser sehen. Ein guter Ausgangspunkt für die Auswahl von Farben für Ihre Marke ist auch Google Farbpalette. Auf der Website Material Design können Sie zu Farbe navigieren und dann ein System aufrufen. Es ist ein großartiges System im Allgemeinen zu erforschen. Und hier finden Sie die Farbpaletten und er kann verschiedene Farben sehen und es macht es nur ein wenig einfacher loszulegen und wie wählen Sie Ihre ersten Farben. Jetzt gehe ich zurück zum Farbrad und zeige dir, wie man diese Farben kombiniert. Unser erster Ansatz ist also der monochromatische Ansatz. Das bedeutet, dass Sie Ihre Farbe auswählen. Zum Beispiel gibt es einen roten, orangefarbenen Farbton, und gehen Sie dann in Richtung der Mitte des Farbrades. Du bekommst also eine sehr schöne Schattierung. Sie können so ziemlich jede Farbe verwenden, aber gelb und das hellgrün ist ein wenig kniffliger. Der Bildschirm funktioniert normalerweise wunderbar, wenn Sie gerade anfangen und etwas sehr sicheres zum Arbeiten wünschen. Jetzt kann man viel über die Assoziation mit Farbe hören, wie Blau ist beruhigend und Rot ist sehr dynamisch. Aber um ehrlich zu sein, konzentriere ich mich lieber auf die Art und Weise, wie ich sie kombiniere, denn hier erschaffe ich den Ton. Wie Sie in einem monochromatischen Ansatz gesehen haben, hatten sowohl Rot als auch Blau eine ziemlich sanfte beruhigende Wirkung. Schauen wir uns unseren zweiten Ansatz an, nämlich einen analogen Ansatz, bei dem wir Farben auswählen, die nebeneinander liegen. Sie müssen also nicht genau auf dem gleichen Verdeck sein , nur innerhalb eines ungefähr 90-Grad-Winkels. Auf diese Weise können Sie ein wenig dynamischer erstellen, aber Sie haben immer noch diesen sehr professionellen und eleganten Look. Wenn Sie etwas noch lebendigeres suchen, dann sollten Sie den kostenlosen Ansatz nutzen. Also beginne ich wieder mit meinem Blau, aber dann füge ich die Farbe von der gegenüberliegenden Seite des Rades hinzu. Und ich kann das ein wenig lösen, indem ich ein paar weitere Formen hinzufüge. Jetzt können Sie das noch weiter vorantreiben. Und anstatt das Farbrad runter zu gehen, können Sie den sogenannten Split-kostenlosen Ansatz verwenden , der diesen Ansatz grundsätzlich mit dem analogen Ansatz mischt. Und du wählst einfach eine Farbe daneben aus. Wenn ich etwas sehr lebendiges möchte, ist dies der Ansatz, den ich benutze, weil ich warm und kalt mische und ich habe eine Dynamik der Farben, aber immer noch alle arbeiten schön zusammen. Beachten Sie, dass ich bei der Verwendung eines Split-Ansatzes empfehlen werde, dass Sie in der gleichen Entfernung von der Mitte bleiben , um Ihre Farben auszuwählen. Sonst kann es wieder ein wenig chaotisch werden. Lassen Sie uns zusammenfassen. Wir hatten einen Blick auf den monochromatischen Ansatz, dem wir zum Farbrad gehen und ein sehr weiches und raffiniertes Aussehen bekommen. Sie könnten den analogen Ansatz verwenden, bei dem wir Farben nebeneinander auswählen. Hier Meine, wir fügen ein wenig mehr Lebendigkeit, aber wir haben immer noch dieses sehr ruhige und weiche Gefühl darüber. Wenn Sie ein wenig dynamischer in Ihrem Design suchen, dann empfehle ich Ihnen, den kostenlosen oder geteilten komplementären Ansatz zu verwenden , bei dem Sie kostenlose Farben mischen. Es gibt mehr Möglichkeiten, Farben zu mischen, aber das sind wirklich die drei Ansätze, mit denen Sie beginnen können. Und Sie werden etwas haben, mit dem Sie schön und einfach arbeiten können. 7. FarbInspiration: Das Einrichten eines Farbsystems und all die technischen Dinge um es herum ist wirklich großartig. Aber manchmal wollen Sie nur ein bisschen Inspiration, um diese Stimmung richtig zu machen. Manchmal ist es auch der Fall, dass es keine etablierten Markenfarben gibt, aber es gibt bereits ein Produkt, tolle Bilder oder Packshots um ein Produkt. Also lassen Sie uns sehen, was dieses Bild gibt, was wir tun können, ist dann einfach hinzufügen, dass unsere Design-Software und wählen Sie einfach die Farben aus dem Bild, um unser Farbschema zu erstellen. Wir können dann später dieses Farbschema anpassen und einen Varianten-Picker verwenden oder ein wenig in unserem System anpassen, um einige zusätzliche Farben zu finden. Was Sie auch tun können, wenn Sie nur einige allgemeine Ideen für Stimmungen wollen, können Sie zu Pinterest gehen und einfach in Farbpalette setzen. Und dann bekommst du ein paar wirklich tolle Ideen. Im Allgemeinen gibt es einige fantastische Dinge, die mit Naturbildern verwandt sind und dann einfach Farben von dort auswählen. Das ist also wirklich tolle Moves, die man auch auf einem Moodboard verwenden kann. Zum Beispiel, wenn Sie eine von ihnen mögen, können Sie einfach auf Hinzufügen klicken und dann erhalten Sie mehr ähnliche Bilder wie es. Ein weiterer großartiger Ort sind Farbpaletten. Das gibt Ihnen auch eine große Auswahl an verschiedenen Paletten und Inspirationen. Ein anderer, den ich gerne benutze, ist Farbraum. Mit Farbraum können Sie hier Ihre Farbe hinzufügen und dann auf Generieren klicken. Und es wird nur in der Regel ist es eine wirklich schöne, so Uhren zusammen für Sie zu gehen. Und hier oben gefällt mir besonders das Farbverlaufswerkzeug. So können Sie zwei Farben auswählen. Sie können sie auch offensichtlich anpassen. Und dann können Sie Farbverlauf setzen, und dann können Sie den Farbverlauf hier sehen. Und Sie können die Richtungen des Farbverlaufs ändern. Und dann hier unten gelangen Sie sofort zum CSS-Code und einem Farbverlauf, den Sie einfach in Ihrem Designsystem mit den Farben einrichten können , die Sie hier angegeben haben. Und eine letzte, die Sie vielleicht herausnehmen möchten, ist Farben gesinnt Doppel o in der Rechtschreibung. Und es gibt auch eine nur erzeugt Farbfelder für Sie. Also hier können Sie das in jeder Farbe sehen. Man kann wirklich eine ganze Menge damit machen. So können Sie, Sie können die ganze Varianz hier sehen. Sie können Bilder hochladen. Und Sie können gerne eine haben, die sich anpasst oder einfach nur wirklich, wirklich gehen und mit ihm herumspielen. Weil Sie in diesem Tool wirklich viel tun können. 8. Farbvarianten in UI-Design: Werfen wir einen Blick auf Varianten, was sie sind und wie man sie einrichtet. Eine Variante ist also im Grunde eine hellere oder dunklere Version dieser Farbe. Eine Sache, die mir in den Sinn kommen könnte, ist die Verwendung von Transparenz. Auf diese Weise können Sie hellere Farbtöne der Farbe erstellen. Dies ist jedoch nur auf hellem Hintergrund der Fall, weil sie durchsichtig sind. Dies ist also etwas, das Sie für ein Overlay oder einen anderen Effekt verwenden können, aber es ist keine wirklich Variante. Ein ganz Ende ist eine Vollversion einer Farbe in einem helleren und dunkleren Ton. Mal sehen, wie wir das finden können. Sie könnten Ihre eigenen Varianten erstellen, indem Sie den Farbtonwert ändern. Aber ich finde es viel bequemer, einen Online-Konverter zu verwenden. Es gibt viele verschiedene Konverter da draußen und Sie können einfach die Farbe hinzufügen, die Sie gewählt haben, und dann wird es eine Reihe von Varianten für Sie erstellen. Es gibt keine Regel darüber, wie viele Varianten Sie für Ihr Design benötigen. Und Sie können immer mehr hinzufügen, wenn Sie zurechtkommen. Wichtig ist, eine Grundfarbe zu haben und daraus erstellen Sie Ihre Varianten. Um meine Varianz zu erstellen, verwende ich gerne Materialdesign. Sie gehen zu Material Design, Farbe und Farbsystem. Und einige wenige scrollen nach unten, finden Sie die Farbe Pellets hier. In den Farbpaletten. Sie können entweder mit der Farbe spielen, die Sie haben, wenn Sie noch nach Farbe suchen, oder Sie können einfach die Farbe einfügen, die Sie bereits ausgewählt haben. Und dann von dieser Auswahl hier, und Sie werden die ganze Varianz erhalten. So können Sie sich auch an die Farbe anpassen, zum Beispiel können Sie es einfach hier ändern und dann wird es den Wert für Sie anpassen oder Sie können hier abholen und es wird immer die Varianz um erstellen. Lassen Sie mich zu einer Orange zurückkehren, die ich tatsächlich gerne benutze. Also denke ich, es sollte dieser hier sein. Ja, genau. Ich mag diese Orange und ich werde wahrscheinlich diesen Ton hier verwenden. Also, was es tut, sind zwei Dinge, die Sie hier sehen können. Erstens, es wird Ihnen sagen, welche Farbe Sie oben verwenden sollten. Und auf der anderen Seite, es gibt Ihnen diese Zahlen hier unten. Nun sind diese Zahlen nicht der Name der Farbe. Der Name der Farbe ist, sobald Sie den Mauszeiger darüber bewegen, der Hex, den Sie oben sehen. Und diese Zahl hier unten, gibt es 900, 250 ist im Grunde die Nummer für die Variante. Und das ist wirklich kostenlos. Sie müssen dieses System nicht verwenden. Sie können auch Ihre Varianz 10, 20, 30, 40 benennen. Nennen Sie sie nicht 1, 2, 3, 4, 5, weil Sie vielleicht eine Variante dazwischen oder etwas Helles oder etwas dunkleres haben möchten . Stellen Sie also immer sicher, dass Sie ein System haben, mit dem Sie später etwas hinzufügen können. Ich persönlich mag es, dieses System zu benutzen, das Material Design mir gibt. Also verwende ich diese Anmerkung. Und was ich mag, ist die Farbe, die ich hauptsächlich verwende, wie meine Hauptfarbe ist die 500. Und auf diese Weise kann ich ohne Probleme hinauf und runter gehen. Ich gehe auch gerne in einen 100-Schritt, also verwende ich 300 und dann 100 und dann nach oben, ich benutze siebenhundertneunhundert. Und nur wenn ich merke, dass dies mir nicht wirklich das Ergebnis gibt, kann ich immer noch dort achthundertvierhundert setzen. Sie können auch Ihre sekundäre Farbe hinzufügen und Ihre Variante erstellen. Oder Sie können eine ergänzende Farbe, analoge Farbe und, oder triadische Farbe wählen , die ein wenig komplizierter ist. Wenn Sie also nicht wirklich gut mit Farben haben, würde ich nicht wirklich dorthin gehen. Nun lassen Sie uns einfach diese sekundäre Farbe hinzufügen. Ich habe das Blau kopiert, die ergänzende Farbe, die ich verwenden möchte. Ähm, und dann, was Sie tun können, ist, dass Sie im Farbwerkzeug sehen können, was wirklich großartig ist. Und das gibt Ihnen einen Überblick darüber, wie Ihre Farben tatsächlich aussehen würden in einem Design, das super cool ist. Und dann ist das Wichtigste hier, dass Sie Ihre Zugänglichkeit überprüfen. Und Sie können überprüfen, welchen Text und welche Farben Sie zusammen auf Ihren Varianten und auf Ihrer Hauptfarbe verwenden können . Und das ist wirklich, wirklich wichtig, dass Sie das immer überprüfen. Sobald ich also mit meinen Farben und Varianten zufrieden bin, wähle ich stattdessen einfach hexadezimal aus. Sie haben mir in meinem Google Material Design-Tool gegeben und dann auf mein Designblatt übertragen. In meinem Stylesheet notiere ich sie, da meine Hauptfarbe die 500 ist. Und von dort habe ich eine hellere und dunklere Version. Wie Sie sehen können, habe ich 200 Schritte benutzt und falls ich eine 400 Farbe dazwischen hier als auch später wollte, kann ich einfach dieses Ende hinzufügen. Mein System wird immer noch gut funktionieren und alle Logik für meine sekundäre. Ich habe gerade das Blaue ausgewählt. Ich bin mir nicht sicher, ob ich gerade eine Variante brauche. Also werde ich das noch mit den 500am Ende notieren. Ich weiß, das ist meine Basis für die sekundäre. Und falls ich später einige Varianten hinzufügen möchte, so viele wie ich möchte, kann ich das einfach tun. 9. Farben auf den richtigen Weg benennen: Es ist sehr wichtig, ein richtiges System zu haben, wenn Farben im UI-Design benannt werden. Wenn Sie also Ihre Farbe auswählen, dokumentieren Sie sie im Stylesheet und auf Ihrem Designsystem. Was Sie normalerweise sehen, ist, dass Sie eine Vorschau Ihrer Farbe geben, Sie geben ihr einen Namen und fügen Sie den Hex-Code hinzu. Jetzt ist es sehr wichtig, dass Sie Ihre Farbe nicht nach der Farbe selbst benennen, wie Rot und Blau und so weiter. Aber es muss etwas Generisches sein. Es spielt keine Rolle, welchen Namen Sie genau verwenden. Wichtig ist, dass es beschreibend und konsistent ist. Warum ist das also wichtig? Nun, die Farben können sich im Laufe der Zeit ändern. Also, wenn Sie Ihre Farbe nennen, zum Beispiel Minzcreme, und dann in letzter Minute, es zu lila geändert ist einfach nicht sehr praktisch. Es ist auch empfehlenswert, Ihre Farben entsprechend der Funktion zu benennen , die sie in Ihrem Design haben. Zum Beispiel hätten Sie etwas wie Hintergrundfarben oder Neutrale für etwas, das wie Grad oder Beige ist, die Sie im Hintergrund verwenden, um etwas dynamischer zu erstellen, aber es ist nicht wirklich Teil Ihrer Marke. Für Ihre Markenfarben. Ich mag die Verwendung von primären und sekundären, aber sie könnten genauso gut Marken- und Highlight-Farbe genannt werden, zum Beispiel. Auf diese Weise erzählen Sie Ihrem Design-Team und Ihrem Entwicklungsteam sofort, welche Funktion dieser Kragen hat. Und es ist sehr unwahrscheinlich, dass jemand die Farbe namens neutral für Call to Action verwenden wird. Sie werden wissen, dass die Hervorhebungsfarbe für diese Rolle verantwortlich ist. Das wird Ihnen auch helfen, mit Ihren Farben sehr organisiert zu sein. Ein kleiner Tipp, wenn Sie Variationen Ihrer Farbe haben, wie ich hier mit meinem primären, nennen Sie sie nicht 1, 2, 3, 4. Denn später möchten Sie vielleicht etwas leichter haben oder vielleicht etwas dunkler oder einfach nur diesen Ton dazwischen brauchen. Also verwende ich 500 als Standardfarbe und dann gehe ich in 200s auf und ab. Aber du musst es nicht so machen. Sie können es auch nennen 10, 20, 30, nur was ist stellen Sie sicher, dass es etwas Raum zwischen diesen Farben. Und unter und über dem Kragen, den Sie verwenden. 10. Feedback: Die so genannten Feedback-Farben sind nicht Teil Ihrer Marke. Sie sind da, um Feedback zu geben und mit dem Benutzer zu interagieren. Sie senden, dass Feedback kann in Gefahr oder Fehler, Warnung, Informationen und Erfolg unterteilt werden. Sie können sie als Vollfarbe verwenden, wie die Schrift unter dem Eingabefeld, das wir gerade gesehen haben. Oder Sie können eine Art Banner haben, die einen prozentualen Hintergrund der Farbe hat und dann die Farbe oben mit den Informationen verwendet. Stellen Sie einfach sicher, dass Sie genug Kontrast zwischen dem Hintergrund und den Informationen oben haben , um dies für alle lesbar zu machen. Ich verwende manchmal gerne Varianten meiner Marke, wenn es um Informationen und Erfolgsbotschaften geht. Derjenige, den Sie nicht ändern und immer in leuchtend rot lassen sollten, ist die Fehlerwarnung. Sie können den Rotton immer noch anpassen, aber es sollte immer rot bleiben, weil es sehr wichtig ist , dass wir mit unserer arabischen Warnung konsistent sind. 11. Farben dokumentieren: Lassen Sie uns über die Dokumentation unserer Farben für unser UI-Design sprechen. Also, anstatt nur zu sagen, dass dies die Markenfarben sind, nehmen Sie sie und gehen Sie weiter. Ich möchte Ihnen einen systematischen Ansatz zeigen. Welche Elemente haben wir also? Lasst es uns zusammenbrechen. Wir haben unsere Hintergrundfarbe, dann haben wir eine Primärfarbe. Ich benutze hier einen dunklen Farbton. Das könnte einfach etwas ganz anderes für Sie sein. Und dann haben wir unsere sekundäre Farbe. Ich nenne sie in diesem Beispiel primär und sekundär, Sie könnten sie auch etwas völlig anderes nennen. Stellen Sie einfach sicher, dass es generisch und beschreibend ist. Die Menge an Markenfarben, die Sie benötigen, liegt auch bei Ihnen. Sie könnten einfach mit einer primären und ein paar Versionen davon davonkommen. Oder Sie benötigen vielleicht mehr Farben. Ich würde empfehlen, zwischen 23 Farben zu bleiben. Das ergibt in der Regel ein ziemlich schönes Ergebnis. Und dann für jede dieser Farben habe ich hier, eine Variante sind in der Regel wahrscheinlich ein paar mehr hinzufügen, wie ich sagen würde, zwischen 25 Variante ist in der Regel, was ich benutze. Auch hier hängt wirklich von Ihrem Design ab und mit Varianz ist das Tolle, dass Sie das später auch komplett anpassen können. Zusätzlich zu meinen Neutralen und meinen Markenfarben habe ich auch etwas namens Feedback-Farben. In diesem Beispiel habe ich eine Fehlercholera in Rot und eine Erfolgsfarbe in Grün eingerichtet. Nun haben Sie vielleicht auch eine Farbe für die Warnung, die in der Regel eine Orange ist, und Informationen, die blau ist. Ich passe das mit meinen Markenfarben an. Das Wichtigste ist, dass sie eine Fehlerwarnung die da sein muss und die rot sein muss. Und dann ist das der wichtige Teil, und das ist der kluge Teil über unser Farbblatt. Wir werden eine weitere Linie von Farben hinzufügen, die wir unsere eigenen Farben nennen. Nun hat diese EINE Farbe alles definiert, was über unsere Farbe geht. Das bedeutet also Texte, die darüber hinausgehen oder Dinge wie Icons. Dri, dann ist diese EINE Farbe wirklich toll, um Ihr Stylesheet hinzuzufügen ist, weil es Sie Ihr Design für Zugänglichkeit doppelt überprüfen. Und um den so genannten schlammigen Bereich zu vermeiden, werde ich Ihnen ein wenig mehr zeigen, wie ich das überprüfe. Was ich also gerne benutze, ist das Material Design. Ich gehe zu Materialdesign, Farbe und dann Farbsystem und in die Farbpaletten. Und dann sehen Sie hier zum Beispiel den Farbbereich. Und es zeigt Ihnen, welche Farbe oben steht, um sicherzustellen , dass Sie perfekte Lesbarkeit und Zugänglichkeit haben. Und dann können Sie gerne diese Farben hier entlang gehen. Jeder, der hier sieht, ist der Bereich, wo schlammige Bereich ist, wo es beginnt sich zu ändern. Also werde ich versuchen, dies zu vermeiden, weil zum Beispiel Symbole oben auf so etwas platziert werden. Denn hier unten kann man sehen, dass es viel klarer wird und ein klares Ergebnis hat. Ich kann auch meine Orange, zum Beispiel hier, und dann sehe ich, dass ich darüber einen dunklen Ton verwenden sollte. Dieses Tool ist super grade, übrigens, auch, um Ihre kostenlosen Farben und analogen Farben und alles, was mit Farbkombination zu tun. Was ich in der Google-Material-Tool nehme, aber es ist nur, dass ich weiß oder eine sehr dunkelgraue, schwärzliche Farbe oben auf etwas. Wenn Sie verschiedene Farben kombinieren möchten, sollten Sie zu einem Kontrastprüfer gehen. Ich benutze zum Beispiel Web-Ziel hier. Und Sie können einfach Ihre Farbe einfügen und es wird Ihnen sagen, ob Ihre Farbkombination zugänglich ist. Also lassen Sie uns sagen, diese Orange auf Weiß, Sie können sehen, dass es sich überall anfühlt. Und dann können Sie einfach hier spielen und Ihre Farben ändern und Sie werden sehen, wo es beginnt zu parsen. Also, was Sie tun können, ist entweder Ihre Farbe an Ihre Bedürfnisse anzupassen oder Sie können in die Farben, die Sie hier haben, setzen und dann sehen , welche Sie kombinieren können und welche Sie nicht können. Indem ich dies überprüft habe, bemerkte ich, dass ich hier zum Beispiel definitiv eine dunklere Farbe verwenden sollte. Ein weiterer Aspekt, den ich an diesem Setup wirklich mag , ist , dass es hält meine Kollegen sehr flexibel zu ändern. Lassen Sie mich Ihnen ein Beispiel geben. In diesem Setup wird die Primärfarbe auf ein Dunkelgrau gesetzt. Wenn ich also nur Farben übergebe, wird mein Text höchstwahrscheinlich auch in dieser Farbe gesetzt. Und Sie werden dies wahrscheinlich auch in Ihrer Entwurfsdatei verwenden. Nun, wenn ich diese primäre Markenfarbe in ändern möchte, sagen wir ein Blau, dann werden plötzlich alle meine Texte auch in einem Blau sein, was nicht so toll ist. Aber ich müsste Stück für Stück durchgehen, um das wieder zu ändern. Der Ansatz, den wir mit unseren eigenen Farben haben, kann ich meine Markenfarben ändern, und dann kann ich die Farben auf meinen Elementen separat ändern. So ist es wirklich gibt Ihnen eine große Flexibilität beim Spielen mit Farben. Und nur um es noch einmal zu betonen, ist es völlig anpassungsfähig an Ihre Bedürfnisse. Sie können diese Varianten hinzufügen, die Sie benötigen und wo Sie sie benötigen, und fügen Sie einfach eine Farbe für jede der verwendeten Farben hinzu. 12. 60 30 10 Regelungen der Rule: Nun ein wichtiger Teil neben den Farben, die Sie verwenden, ist, wie Sie sie verwenden. Die 1630 10 Regel ist eine große Faustregel. Es bedeutet im Grunde, dass Sie Ihre Grundfarbe verwenden, die 60% Ihres Designs ausmacht, dann 30 Prozent Ihres Designs als primäre Farbe. Und nur um hervorzuheben, verwenden Sie Ihre sekundäre Farbe für 10%. Jetzt haben wir offensichtlich nicht genau eine Farbe gemessen. Es ist eher ein Gefühl der Verteilung. Also das ist großartig, weil es Ihnen auch Raum gibt, mit Variationen zu spielen, wie Sie in meinem Beispiel sehen. Wie Sie sehen können, was es tut. Es gibt Ihnen eine sehr solide Basis und eine wirklich tolle Struktur und bekommt wirklich die Aufmerksamkeit darauf, wo Sie es brauchen, um Ihren Aufruf zu Aktionen. Für den Fall, dass Sie die Farben ändern müssen. Das funktioniert auch wunderbar ohne viel Retusche. Wie üblich ist dies nur eine Faustregel, um Sie zu beginnen, verwenden und es zu Ihrer eigenen zu machen. Es gibt ein ziemlich erstaunliches Werkzeug, Biomaterial Design genannt Farbwerkzeug. Und was es tut, ist, es zeigt Ihnen diese 1630 10-Regel im Grunde. So können Sie eine Primärfarbe auswählen, und dann können Sie einfach eine beliebige sekundäre Farbe auswählen. Und es zeigt Ihnen ziemlich gut, wie das in Ihrem Design aussehen wird. Und Materialdesign verwendet dies auch, dass Sie diesen Text auf primären, Texte auf sekundären. So können Sie hier zum Beispiel eine separate Textfarbe auf alles einstellen, was Sie wollen. Und dann können Sie auf der Barrierefreiheit überprüfen, ob Ihre Farben zugänglich sind, wenn sie genug Kontrast haben. Und hier können Sie einfach überspringen und verschiedene Versionen Ihres Designs sehen. Und Sie können natürlich alles daran anpassen. 13. Zusammenfassung von Farben in UI-Design: Lassen Sie uns also alles zusammenfassen, was wir über Farben im UI-Design gelernt haben. Generell definieren wir Farben in Hex-Codes. Normalerweise verwenden wir zwei bis drei Farben, aber Sie können so viele oder so wenig verwenden, wie Sie für Ihr Design benötigen. Wir verwenden Varianten dieser Farben für mehr Tiefe. Benannte Farben nach der Verwendung. Benennen Sie also nicht orange oder blau, sondern primär, sekundär oder so etwas wie Highlight. Wie auch immer Sie sie nennen, es liegt an Ihnen, aber seien Sie konsequent. Dokumentieren Sie Ihre Farben auf die richtige Weise. Überprüfen Sie immer den Kontrast, um sicherzustellen, dass Ihre Farben für jedermann zugänglich sind. Und verwendet 60, 30, 10 Regel, um Ihre Farben in Ihrem Design zu balancieren. 14. Vielen Dank: Gut gemacht für den Abschluss dieses Kurses. Fühlen Sie sich frei, uns bei moon learning dot io zu kontaktieren, wir sind immer daran interessiert, Ihr Feedback zu hören. Sie würden auch als großen Gefallen tun, wenn Sie nur eine Minute nehmen und eine Bewertung hier hinterlassen könnten . Wenn Sie diesen Kurs genossen haben und auch sicherstellen, dass Sie einen Blick auf unsere zusätzlichen Kurse. Bei Moody Learning Punkt. Wir decken alle Themen ab, von den Grundlagen des UX UI Designs bis hin zu Figma und sogar einige Code-Grundlagen. Besuchen Sie unsere Website bei Moody Learning dot IO, wo Sie sich auch für unseren Newsletter anmelden können.