Erstellung einer Farbpalette (UI Bootcamp Woche 9)

1. Einführung: Diese Woche werden wir in diesem Modul eine Farbpalette erstellen, werden wir in diesem Modul eine Farbpalette erstellen speziell für das Design der Benutzeroberfläche oder der Benutzeroberfläche verwendet wird. Zuerst schauen wir uns die Farben an, die Ihnen tatsächlich auf Ihrem Computerbildschirm im digitalen Design zur Verfügung stehen , dann schauen wir uns die verschiedenen Farbräume, die Spezifikationen an, wie Sie es sagen Ihr Computer, welche Farbe Sie möchten , bitte. Als Nächstes schauen wir uns an , welche Farbkombinationen natürlich zusammen aussehen. Dies sind objektiv gute Farbkombinationen. Wir werden ein wenig darüber sprechen, warum Sie wahrscheinlich besser dran sind , diese Farbpsychologiediagramme, die Sie online sehen, zu ignorieren Farbpsychologiediagramme, die Sie , die wahrscheinlich ein bisschen zu vereinfacht sind , aber wie die Farbe ein wenig hat subtilere Bedeutung. Und wir sollten experimentieren und lernen, nach diesem Gefühl zu suchen. Schließlich werden wir uns ansehen, was der Zweck jeder der Farben in einem Benutzeroberflächendesign ist , damit wir Ihnen helfen können , diejenigen auszuwählen, die diese Zwecke erfüllen. Und schließlich wählen wir unsere Farbpalette aus, die für ein Benutzeroberflächendesign einsatzbereit ist. Es gibt viel zu beachten , wenn wir eine Farbpalette wählen. Und die Farben können das Design der Benutzeroberfläche wirklich bewirken oder unterbrechen. Lassen Sie uns also ein wenig Zeit damit verbringen, eine Farbpalette zu erstellen , die für das Design der Benutzeroberfläche geeignet ist. 2. Farbräume: Wir haben unser Modul zur Funktionsweise von Farbe beendet, indem wir über die Farbräume gesprochen haben, die in Ihren Computerprogrammen verfügbar sind. Und wie geht es beim Erstellen einer Website mit sRGB, Standard-RGB, zu tun , der normalerweise nur RGB genannt wird. Möglicherweise haben Sie in Ihren Grafikprogrammen und manchmal in CSS2 bemerkt Ihren Grafikprogrammen und manchmal in , dass es tatsächlich verschiedene Möglichkeiten gibt, Farben zu referenzieren. Hsl, Hex, HSB oder CSS hier. Dies sind alles verschiedene Möglichkeiten genau denselben Farbensatz zu referenzieren. Wenn wir also auf diese Tabelle aller Farben, all diese HSL, HSP, zurückblicken , beziehen sie sich alle auf dasselbe und Farbraum oder den gleichen Farbbereich. So können wir von einem zum anderen übersetzen ohne Farben in unserer Palette zu verlieren. Das bedeutet, dass Sie entscheiden , ob Sie Ihre Farben in RGB oder HSL referenzieren , ganz bei Ihnen liegt. Es liegt ganz an dem, worin Sie am besten arbeiten. Jeder von ihnen hat seine eigenen Vor - und Nachteile. Werfen wir also einen Blick darauf, warum Sie Ihr Grafikprogramm möglicherweise auf das eine und nicht auf das andere einstellen können. Wenn wir uns diese violette Farbe ansehen, habe ich ziemlich viel benutzt. Wir wissen bereits, dass wir uns ansehen würden, um es als RGB zu definieren, wie weit es von den Ecken des Gamma-Dreiecks entfernt ist , das wir früher genommen haben. Die genaue Referenz dafür ist etwas wie 7976231. Wenn Sie jemals ein CSS geschrieben haben, werden Sie wissen, dass Sie das wahrscheinlich ein bisschen mehr so geschrieben haben . Dies bezieht sich genau auf die gleiche Weise auf die gleiche Farbe . Es ist nur anstatt jeweils drei Ziffern zu verwenden, vereinfacht es es und fügt ein paar Buchstaben hinzu, wobei a, B, C höher als neun sind. Dies wird als Hex-Code bezeichnet. Es ist nur eine verkürzte Version des Ausschreibens der RGB-Werte von 255. Die Vorteile der Arbeit mit einem Hex-Code bestehen darin, dass Ihre Dateigröße ein wenig kleiner wird. Es ist sehr sinnvoll, wenn Sie ein sehr hochauflösendes Foto speichern, aber wenn Sie eine Website erstellen und nicht wirklich so viele Farben verwenden, müssen Sie das Hex nicht wirklich verwenden kodieren so viel. Das Problem beim Umgang mit RGB-Farben ist, dass es nicht wirklich sehr intuitiv ist. Wir haben es mit ihnen zu tun, nur weil das die drei Lichter auf dem Computerbildschirm sind . Aber wenn wir es anpassen müssen, es uns sehr schwer genau zu wissen wie wir die Farbe vielleicht entsättigen wie wir diese drei Zahlen ändern. Es ist viel intuitiver für uns, an HSL, Farbton, Sättigung und Leichtigkeit zu denken . Farbton ist ein Wert von 360, je nachdem, wie viele Grad es ist. Das Farbrad, Sättigung, ist ein Prozentsatz wobei 0 vollständig entsättigt oder grau und eine 100 vollständig gesättigt ist. Eine sehr reine Farbe und Leichtigkeit ist also auch ein Prozentsatz. Es ist also eine Zahl von 100, wobei 0 schwarz und 100% weiß ist. Während dieses Kurses haben wir diesen Wert als Wert bezeichnet. Und das liegt daran, dass Leichtigkeit in manchen Kontexten etwas Ähnlicheres wie eine Helligkeit bedeutet . Im Kontext des HSL-Farbraums bedeutet das L genau das Gleiche, was wir bisher den Wert genannt haben, wie viel Weiß oder Schwarz das ist. Wir haben also einen echten Vorteil, stattdessen HSL zu verwenden, es ist etwas intuitiver, damit zu arbeiten. Wir können die Zahlen anpassen und wir wissen irgendwie, wie sich die Farbe ändern wird. Aber schauen wir uns ein paar andere Vorteile an. Ich kann sehr einfach einen Satz von drei Farben mit einem ähnlichen Wert und einer ähnlichen Sättigung mit verschiedenen Farbtönen erstellen. Und sie werden auf einer Seite die gleiche Bedeutung empfinden . Sie werden also feststellen, dass alle drei dieser Farben eine Sättigung von 45 und eine Ähnlichkeit von 60 haben . Sie haben einfach einen anderen Farbton und fühlen sich ungefähr gleich. Der Farbton wird durch ein Farbrad wie dieses berechnet. 10 wäre ein perfektes Rot wie bei 360, und es funktioniert von dort aus einfach im Uhrzeigersinn herum. Und ein echter Vorteil , wenn man q als Zahl hat , ist, dass wir den Farbkontrast sehr schnell finden können . Wir können einfach 180 Grad wegnehmen oder hinzufügen , je nachdem, ob die Zahl über oder unter 180 liegt. Und wir können sofort unsere Kontrastfarbe finden. Wir können auch anhand dieser Zahlen sehr, sehr leicht erkennen, ob sie eine kontrastierende Sättigung und eine kontrastierende Leichtigkeit haben eine kontrastierende Sättigung und . Es ist auch sehr einfach mit HSL für uns , eine Farbe zu erhalten, die genau den gleichen Farbton hat. Eine Variation der Sättigung. Vielleicht wollen wir während unseres gesamten Designs verschiedene gesättigte Versionen dieser Farbe. Aber denken Sie daran, wenn wir unsere Farben wählen, wurden sehr, sehr selten die Sättigung oder die Leichtigkeit vollständig von selbst eingestellt . Im Beispiel auf dem Bildschirm sieht die Farbe rechts etwas zu hell aus und die Farbe links sieht fast schlammig oder grau aus. Es sieht nicht besonders gut aus. Wir würden wahrscheinlich ein paar Dinge mit diesen beiden Farben anpassen , damit sie mit unserer Palette besser funktionieren. In ähnlicher Weise kann es sehr, sehr nützlich sein, einfach den L-Wert anzupassen und eine hellere oder dunklere Version derselben Farbe zu erhalten . Aber auch hier werden wir diese genauen Werte und unsere Farbpalette nie wirklich verwenden , da wir Farben erhalten , die nicht besonders gut aussehen. Der HSL-Farbraum wird nicht alle unsere Probleme beheben, sondern um diese Farbe links zu beheben und rechts ist Farbe. Zumindest haben wir einige Zahlen , mit denen man in Figma und in einigen anderen Grafikprogrammen etwas intuitiver arbeiten Figma und in einigen anderen Grafikprogrammen Es gibt auch einen HSB-Wert. Das B steht für Helligkeit, aber auch hier bedeutet es nicht Helligkeit. Es bedeutet wiederum Wert, wie dunkel oder hell die Farbe ist. Der einzige Unterschied hier sind nur die Dimensionen. Sie werden feststellen, dass sich das gesättigteste Cyan auf der linken Seite in der Mitte befindet, während es rechts oben rechts ist. In Coral Draw, Affinity Designer und einigen anderen Grafikprogrammen sehen Sie vielleicht so etwas wie dieses Dreieck namens H WB oder Hugh, White, Black. Sie werden feststellen, dass eine der Ecken weiß ist, eine schwarz und eine ist der Farbton. Dies ist wahrscheinlich ein noch intuitiverer Farbraum, mit dem Sie arbeiten können, aber reden wir nicht zu viel darüber aber reden wir nicht zu viel darüber, weil Sie dies nicht in CSS verwenden können und es Ihnen schmerken wird , übertrage die Werte über. Ich würde empfehlen, einfach HSL zu verwenden. Es gibt verschiedene Möglichkeiten auf Ihrer Website auf Farben zu verweisen, aber sie geben Ihnen im Wesentlichen Zugriff auf dieselben Farben. Rgb wird wahrscheinlich etwas schwieriger zu arbeiten sein. Also sollten wir das vielleicht verlassen. Hsl hingegen wird uns Zugang zu genau den gleichen Farben geben, aber vielleicht eine etwas intuitivere Art , diese Farben zu wählen. Wir möchten immer noch vermeiden, zu faul zu werden , wenn wir diese Farben anpassen. Denken Sie daran, dass wir selten nur eine Farbe mit D sättigen möchten ohne den Farbton und den Wert zu optimieren , um sicherzustellen, dass sie immer noch gut aussieht. 3. Farbharmonien: Wir haben in diesem Abschnitt bereits ziemlich viel über Farbharmonien gesprochen , und sogar ein wenig in einigen vorherigen Abschnitten. Aber schauen wir uns das etwas genauer an und überlegen einige der technischen Begriffe, die Sie jetzt vielleicht hören. Komplette Farben bedeuten also die Farben, die sich im Farbrad genau gegenüberliegen. Und das liegt daran, dass wir, wie wir wissen, wenn wir alle Lichtwellen aus diesen beiden Farben miteinander mischen , die ganze Bandbreite an Leichtgewichten haben. So wird es die Zapfen in unseren Augen gleichermaßen stimulieren und entspannen die Zapfen in unseren Augen , wenn wir uns das Design umsehen Wir haben uns auch dieses Beispiel angesehen, in dem drei Farben gleich weit entfernt um das Farbrad herum sind. Jetzt sind das triadische Farben. Wenn wir drei sehr klar definierte, sehr kräftige Farben in unserem Design haben würden. Vielleicht möchten wir sie gleich weit um den Kreis herum auswählen , wir könnten Farben wählen, die kostenlos geteilt sind. Und das ist wieder ein Satz von drei Farben, aber dieses Mal sind sie nicht gleich weit entfernt. Nur eine der Farben ist die dominante Farbe, und die anderen beiden Farben sind die gleiche Anzahl von Grad entfernt von dieser dominanten Farbe, Tetraden und Farben, wenn wir zwei verschiedene Sätze von Komplementaren verwenden Farben. Idealerweise sollte es nicht zu nahe beieinander liegen, aber sie müssen nicht unbedingt gleich weit entfernt sein. Entweder. Wir könnten Farben wie diese wählen. Oh, wir könnten sie eher so wählen. Es gibt viele Farbwähler online , die Ihnen helfen, diese ersten Farbsätze mit einer dieser mathematischen Techniken zu erstellen diese ersten Farbsätze . Ich werde diesen empfehlen, den ich gerade gefunden habe HTML color coordinates.com genannt. Und ich empfehle das, denn denken Sie daran, dass viele Leute die Farbe haben, wir werden sie falsch erstellen. Und ich habe das überprüft und hat nicht nur das richtige Farbrad, sondern Sie können auch ganz einfach zwischen kostenlosen Farben oder Triadfarben oder einer dieser anderen Farbharmonien wechseln kostenlosen Farben oder Triadfarben oder die wir gerade gesprochen haben. Ich persönlich finde es einfacher, einfach direkt in Figma zu arbeiten , weil Figma diese wirklich nette Funktion hat, bei der ich Mathematik in einem Eingabefeld machen kann . Nehmen wir zum Beispiel an, ich hatte dieses Blau als meine dominante Farbe gewählt. Und ich wollte ein komplementäres Farbschema erstellen . Nun, dieses Blau ist 100% gesättigt und hat einen Wert von 50, also liegt es zwischen Weiß und Schwarz. Und ich habe einfach entschieden, dass eine meiner geteilten kostenlosen Farben minus 90 Grad sein wird. Einer wird plus 90 Grad sein. Also kann ich einfach 92 den Farbton hinzufügen und 92 subtrahieren, den Farbton für die nächste Farbe. Und wir haben jetzt das Farbschema. Wenn wir eine geteilte kostenlose Farbharmonie wählen würden eine geteilte kostenlose Farbharmonie wie die auf dem Bildschirm hier, weil dies nur 1,5 des Farbrads verwendet. Wir verwenden keine Orange, Rottöne oder Gelbe. Wir werden das Lila und das Grün viel mehr in unserem Design verwenden . Stellen Sie sich vor, wir versuchen, eine gleiche Gewichtung von überall um das Rad zu haben. Wir wollen nicht zu viel Farbe von einer Seite. Das nächste ist, dass wir niemals wollen, dass unsere Farben perfekt harmonisch sind. Es ist ein bisschen zu perfekt. Es beseitigt ein bisschen visuelles Interesse. Also werde ich die Farbtöne ein wenig optimieren. Und natürlich werden wir niemals Farben haben, die vollständig gesättigt sind oder vollständig bei 50 sind , auf der Skala von Helligkeit zu Dunkelheit. Und dann ist vielleicht so etwas der Ausgangspunkt für die Erstellung meiner Farbpalette. Also haben wir uns nur ein paar verschiedene Möglichkeiten angeschaut eine harmonische Farbpalette zu wählen. Aber sie alle beinhalten im Wesentlichen die Auswahl von Farben , die gleichermaßen um das Farbrad verteilt sind. Wenn wir diese basierend auf Mathematik in Figma auswählen oder eine Website wie die verwenden, die ich Ihnen gerade gezeigt habe. Wir werden den Farbton ein wenig anpassen wollen. Wir wollen nicht, dass es perfekt ist, weil wir möchten, dass es ein gewisses visuelles Interesse an unseren endgültigen Entwürfen gibt. Und wenn wir ein Werkzeug wie dieses verwenden, um unsere Farben auszuwählen, werden sie uns natürlich ein Werkzeug wie dieses verwenden, um unsere Farben auszuwählen, sehr, sehr gesättigte, sehr helle Farben geben . Wir möchten die Sättigung und den Wert der Farben so anpassen die Sättigung und den Wert der , dass sie für unsere Websites etwas nutzbarer sind . 4. Emotionen: zurück an der Kunsthochschule ging ich zu einem Vortrag in Farbpsychologie. Und ich erinnere mich , dass mir gesagt wurde, dass Fußballmannschaften, die Rot tragen , eher gewinnen werden , weil sie aggressiver sind, dominant sind und Angst bei ihren Gegnern haben . Natürlich ist das nur Psuedo-Wissenschaft. Tatsächlich hat niemand jemals die Rugby-Weltmeisterschaft mit roten Hemden und tatsächlich einem Eishockey gewonnen roten Hemden und tatsächlich einem Eishockey , das Sie eher gewinnen werden, wenn Sie Blau tragen. Es ist nur standardmäßiges statistisches Rauschen. Es sollte wirklich nicht in der Zeitung sein. Es ist die Art von Flaum, die man normalerweise hört , wenn Leute versuchen, etwas zu sagen zu finden. Wenn Sie beispielsweise Google Images nach Farbpsychologie suchen, sehen Sie all diese Unsinns-Diagramme von Menschen, die versuchen zu entscheiden, was die Farben bedeuten und ihre Bedeutung normalerweise täuschend vage sind und sie Crossover und ergibt keinen Sinn. Natürlich gibt es eine Million Rottöne und sie sind nicht alle wütend und einige von ihnen sind tatsächlich ziemlich beruhigend. Dies ist nur ein Standardstück der übermäßigen Vereinfachung. Das heißt aber nicht , dass Farben kein Gefühl oder Gefühl ausdrücken. In der Tat tun sie wahrscheinlich mehr als alles andere. Mark Rothko machte eine ganze Karriere darin, Emotionen mit Farben zu erzeugen, aber er benutzte eine Mischung von Farben. Und die Emotion einer Farbe hängt von ihrem Kontext ab, genauso wie alles andere. Das kleinste bisschen Farbe in einer Webanwendung, die völlig verändern wird , was sie vermittelt und was sie anfühlt und die Emotionen der gesamten Anwendung. Aber leider kann ich Ihnen kein praktisches kleines Diagramm geben , das besagt, dass wir, als aggressiv gelesen, ein bisschen mehr Arbeit machen müssen . Angenommen, wir haben für eine Sekunde eine sehr, sehr Schwarz-Weiß-Homepage für eine Website erstellt sehr Schwarz-Weiß-Homepage für eine Website und ich möchte nur eine Farbe hinzufügen. Welche Farbe würde ich hinzufügen? Nun, ich habe diese sehr entspannende Art von Grün hier im Hintergrund. Aber vielleicht möchte ich, dass die Seite mehr Unternehmen aussieht. Nun, ich könnte es sättigt machen. Vielleicht ändere ich den Farbton nicht unbedingt so sehr. Vielleicht habe ich die Sättigung geändert. Sie können sehen, dass sich jetzt alles anders anfühlt , indem Sie diese Farbe wählen, ich mache eine ebenso mutigere Aussage, aber ich gebe eine ganz andere Aussage ab. Oder vielleicht möchte ich, dass es sich kreativer anfühlt. Also mache ich es rosa. Vielleicht fühlen sich Rosa und Violett kreativer an, weil sie in der Natur etwas seltener waren. Und so fühlt es sich alternativer an. Oder vielleicht fühlt es sich kühner an, nur weil es so hell ist. Es ist schwer zu kommunizieren, wie sich das Ändern dieser einen Farbe und des Hintergrunds verändert, wie wir uns darüber fühlen. Aber wir können uns alle einig sein, dass dies der Fall ist. Sie, während Sie Websites in freier Wildbahn ansehen, Versuchen Sie, während Sie Websites in freier Wildbahn ansehen, überlegen Sie, was sie machen. Du fühlst dich. Diese dünne orangefarbene Linie, diese kräftigen flachen Farben, dieses große, fluoreszierende Grün oder diese blau gefärbt. Obwohl dies teilweise subjektiv ist und Ihre Benutzer möglicherweise etwas anderes fühlen als Sie. Wir möchten uns darauf trainieren, dass wir besonders gut darin sind, Farben zu fühlen, genauso wie ein Musiker sehr gut darin ist zu erkennen wie sich verschiedene Noten im Kontext verschiedener Songs anfühlen . Und eine gute Möglichkeit, uns dazu zu trainieren , besteht darin, die Farben in einem Kontext oder im Gegensatz zu einer anderen Farbe zu sehen , dieses violette Blau, das im Design unten rechts verwendet wird . Man könnte meinen, das sieht dem ähnlich aus, den ich für die Eröffnungs-Credits für dieses Video verwendet habe. Und wenn ich auf der Marke sein wollte, würde ich dieses Blau vielleicht als Hintergrundfarbe verwenden. Oder lasst uns für eine Sekunde annehmen, ich habe gerade die ganze Seite mit nur diesem Blau überflutet. Sieh dir das nur eine Sekunde an. Bestätigen Sie, was Sie haben, aber versuchen Sie nicht unbedingt, es zu benennen. Und dann werde ich darauf hinweisen , dass dies nicht das Blau ist, das ich für die Eröffnungs-Credits verwendet habe, aber dieses ist sofort, ich fühle etwas anderes. Vielleicht hilft es, wenn wir sie nebeneinander betrachten. Die Farbe auf der linken Seite fühlt sich für mich sauberer an. Es fühlt sich ein bisschen perfekt an. Während sich der rechte etwas taktiler anfühlt, kann ich es tatsächlich ein Stück Papier aufnehmen und damit interagieren. Es gibt einen deutlichen Unterschied zwischen diesen beiden Farben , den ich erst bemerkt habe, als ich sie nebeneinander lege. So wie ein gut ausgebildeter Musiker wahrscheinlich den Unterschied zwischen einem C- und einem C-scharfen hören kann . Und ich kann den Unterschied nur hören , wenn sie bei einem Lied nebeneinander kommen. Wenn ein Lied jedoch irgendwo ein C-Sharp verwendet und plötzlich jemand es in ein C ändert, kann ich hier sofort, dass das Lied nicht stimmt. Ich konnte es alleine nicht bemerken. Aber wenn ich es im Kontext des Liedes höre, sehe ich irgendwie , dass es falsch ist. Es ist also wirklich wichtig, dass wir das Gefühl dieser Farben genau richtig haben. Aber der Weg, dies zu tun, besteht wahrscheinlich darin, sie in einer Art Kontext oder im Gegensatz zu anderen Farben zu betrachten . Es gibt also viel zu viel Vereinfachung darüber, was eine Farbe bedeuten könnte, was Rot bedeutet und was Blau bedeutet. Aber es gibt alle möglichen Schattierungen davon, also können wir das meiste dieser Sachen ignorieren. Aber Farbe stellt die schnellste und stärkste emotionale Verbindung her. Und deshalb ist es wirklich wichtig, dass wir uns darin trainieren , die Emotionen in Farben zu identifizieren. Die kleinste Veränderung der Farbe kann massiv beeinflussen, welche Emotionen sie hervorruft. Und es ist viel einfacher für uns, die Unterschiede zu erkennen , wenn wir es im Kontext sagen. Lass uns das als Nächstes machen. 5. Emotions: Also im letzten Video habe ich erwähnt, dass wir uns dabei helfen, die Farben zu fühlen, es ist gut, sie als nächstes zu sehen, zwei kontrastierende Farben. Und es ist auch gut, sie im Kontext zu sehen. Jetzt habe ich einige kontrastierende Wörter ausgewählt und dann versucht, Farben zu finden, die zu ihnen passen, und sie nebeneinander zu legen, um zu sehen, ob sich die wütende Farbe, die ich auf der linken Seite habe , wütend anfühlt sehen, ob sich die wütende Farbe, die ich auf der linken Seite habe, wütend anfühlt Die ruhige Farbe, die ich auf der rechten Seite habe, habe ich natürlich kein Klischee gewählt, Rot und Blau, um wütend und ruhig zu sein, aber ich glaube, ich habe dennoch eine wütende Farbe und eine ruhige Farbe gefunden . Als weiteres Beispiel wählte ich zwei weitere Wörter aus, kreativ und organisiert um mir irgendwie Worte kreativ und organisiert, um mir irgendwie Worte zu kontrastieren. Und ich habe diese beiden Farben gewählt, von denen ich glaube, dass sie diese beiden Wörter kommunizieren. Ich habe noch ein paar Beispiele für kontrastierende Farben, aber ich lasse Sie raten, welche welche ist? Dafür habe ich die Worte lustig und ernst gewählt. Welches glaubst du, dass ich entschieden habe, dass ich Spaß gemacht habe? Ja. Ist vielleicht ein bisschen offensichtlich, aber indem die beiden kontrastierenden emotionalen Farben zusammen kreiere, macht es mir viel einfacher, eine Farbe zum Spaß auszuwählen. Die nächste Wortgruppe, die ich wählte, war laut und leise. Und am Ende habe ich diese beiden Farben ausgewählt , sind ein paar weitere Beispiele. Ich habe die Wörter Natur und Technologie gewählt, und das sind die beiden Farben, mit denen ich endete. Und ich wählte die Worte Jung und Alt. Und das sind die beiden Farben, mit denen ich gelandet bin. erste Hälfte dieser Übung besteht also darin, an ein Adjektiv oder ein beschreibendes Wort zu denken , das Ihnen hilft, eine Branding-Nachricht zu erklären Sie möglicherweise auf Ihrer Website haben. Vielleicht erstellen Sie die Website für eine Bank, und daher könnte das Wort Sicherheit sein. Dann denken Sie an das Kontrastwort für Sicherheit, das gegensätzliche Wort wäre Risiko. Versuchen Sie dann, gute Farben zu identifizieren , die diese beiden Wörter, Sicherheit und Risiko vermitteln , und stellen Sie sie in einen Kontrast und eine Komposition wie die auf dem Bildschirm. Probieren Sie mindestens eine davon aus , wo Sie den Farbton nicht ändern, Sie spielen nur mit der Leichtigkeit und Sättigung. Das hält uns davon ab, diese müden Ideen zu verwenden, wie Rot ist Leidenschaft als Krücke und lässt uns die Farben tatsächlich betrachten. Dies macht es nicht nur einfacher , die Farbe hier danach zu finden. Als zusätzlichen Bonus hilft es Ihnen, Farben zu finden, die Sie wirklich vermeiden möchten. Wenn Sie vermeiden möchten, dass Ihre Website riskant aussieht, möchten Sie die Farben vermeiden, die Sie möglicherweise mit Risiko in Verbindung bringen. Sobald wir glücklich sind, haben wir eine gute emotionale Farbe identifiziert. Schauen wir uns an, wie es in einer Reihe aussieht. Das ist also das Rosa, das ich früher für kreativ gewählt habe. Ich habe vielleicht einige dunklere und hellere Töne auf meiner Website. Versuchen wir also, ein bisschen von einer Reihe zu erstellen. Natürlich habe ich den dunkleren Farbtönen ein bisschen Rot und ein bisschen Gelb zu den helleren Farbtönen hinzugefügt dunkleren Farbtönen ein bisschen Rot und ein bisschen . Ich habe das Gleiche mit meiner lustigen Farbe gemacht. Und als letztes Beispiel habe ich eine Reihe mit meiner ruhigen Farbe erstellt, um nicht zu sagen, dass diese ganze Reihe es in meine endgültige Farbpalette schaffen wird . Gerade jetzt habe ich einige Möglichkeiten, mit denen ich spielen kann, wenn ich herausfand, welche Farben ich brauche. Und ich kann meine ruhigen Farben jetzt im Kontext eines tatsächlichen Designs ausprobieren und sehen, welche gut aussehen wird, da diese Hintergrundfarbe zum Beispiel oder welche meiner kreativen Farben gut aussehen? Natürlich werden wir ein komplizierteres Design als dieses haben , aber wir möchten die Farben im Kontext des Designs ausprobieren, um sicherzustellen, dass sie immer noch fühlen, wie wir es wollten, dass sie sich fühlen sollen. Ihre Übung für dieses Video besteht darin, ein Gefühl zu wählen oder Wort zu beschreiben, das Ihre Website kommunizieren soll . Denken Sie dann darüber nach, was das kontrastierende Wort ist, und finden Sie eine Farbe für beide Wörter, indem Sie diese beiden Farben zusammen auswählen und optimieren Wir werden es im Gegensatz zu seinem Gegner sehen und es wird uns wirklich helfen, den genauen Farbton zu wählen. Und schließlich, sobald wir mit unserer Farbe zufrieden sind, erstellen wir eine Reihe. Wir haben also die dunkleren Versionen und die helleren Versionen. Und dann probiere sie einfach im Kontext einer Website aus , um sicherzustellen, dass sie gut aussehen und sicherstellen, dass sie die Emotionen spüren, die fühlen sollten. 6. Colour: Damit wir genau die Farbpalette auswählen , die wir für unsere Webanwendung verwenden werden. Es lohnt sich, darüber nachzudenken, was der Zweck jeder der Farben sein wird. Schauen wir uns dieses Design an, das ich ein bisschen früher erstellt habe , und schauen alle Farben an, die bereits darauf enthalten sind und wofür werden sie verwendet? Zuallererst haben wir natürlich unsere Schwarzen und Weißen. Oder in diesem Fall habe ich ein dunkles Marineblau und das hellbläuliche Grau. Wenn ich nicht versuche, einen sehr formellen Stil zu kreieren oder einen ganz bestimmten Punkt mit Schwarz und Weiß zu schaffen, verwende ich sehr selten ein perfektes Schwarz und ein perfektes Weiß. Sie werden fast immer ein bisschen Farbton haben . Es kann einen sehr entsättigten Farbton geben, dass er entweder einen sehr hohen oder sehr niedrigen Wert hat. Es wird auch viele von ihnen geben, viel mehr als man denkt. Wenn man sich dieses Design anschaut, habe ich ungefähr sechs Schwarze und Weiße in diesem Design. Und das ist auch nur eine Seite. Vielleicht gibt es sogar einen Nutzen für mich, noch ein paar mehr zu haben. Denken Sie daran, dass die meisten Farben auf Ihrer Website sehr entsättigt sein werden. Sie werden sehr, sehr wenige wirklich gesättigte helle Farben haben . Eigentlich sind diese Schwarzen und Weißen oder sehr entsättigter Blues, dass sie wirklich wichtig sind , weil es den größten Teil der Website gibt. Dennoch denken die Leute oft nicht einmal so sehr über diese Farben nach, weil es sehr schwierig ist , eine anständig aussehende Farbpalette zu erhalten. Die Leute benutzen oft nur eine Farbpalette, die sie woanders gefunden haben und vergessen wahrscheinlich sogar diejenigen, die sich im Hintergrund und Vordergrund befinden, wie diese Reihe von Farben hier. Als nächstes haben wir diese wirklich offensichtlichen Farben. Diejenigen, an die Sie immer denken, die Branding und der Aufruf zum Handeln. Also habe ich einen großen knallorangen Call-to-Action-Button. Es ist das hervorstechendste Ding auf der Website. Es fällt wirklich hervor und sagt, klick auf mich. Der Zweck dieser Farbe ist es , sofort Ihre Augen zu erregen. Und dann haben wir das Branding Blue hier. Der Zweck dieser Farbe besteht darin, durchgehend eine konsistente, kohärente Branding-Botschaft zu erzeugen . Wir könnten dies auch als Sekundärfarbe für Schaltflächen verwenden. Wir wollen, dass es weniger auffällt als die Orange. Ich habe mich auch für dieses Blau entschieden, weil es ganz schön mit der Orange kontrastiert. Und wenn unsere Augen sich etwas zu sehr daran gewöhnt haben , die Orange zu betrachten, können wir ihr eine andere helle Farbe geben. Das ist also vor allem für unsere wirklich offensichtlichen Branding-Farben in diesem gesamten Design. Wenn wir eine kompliziertere Anwendung hätten, haben wir möglicherweise eine dritte Markenfarbe, die wir anderswo verwenden. Der Zweck dieser Farben ist jedoch , dass sie am meisten hervorstechen und die größte Persönlichkeit für unsere Anwendung schaffen. Und schließlich haben wir unsere Akzentfarben. Jetzt werden diese hier hinter Lutschtabletten verwendet und der Status befindet sich auf der Seite, damit wir uns an die Stapes erinnern können. Wir können uns an Dinge erinnern, wie viele ungelesene Nachrichten wir haben. Wir brauchen sie nicht, um auf uns zu springen, aber wir müssen sie finden, wenn wir nach ihnen suchen. Oft könnte dies eine Variation unserer Primär- und Sekundärfarben sein oder etwas, das in gutem Kontrast zu ihnen steht. Aber wir werden fast immer ein leuchtendes Rot, ein helles Grün und ein helles Gelb in diesem Akzentfarben-Set haben ein helles Grün und ein helles Gelb . Und das liegt daran, dass das einzige, was in unserem Verständnis von Farbe im Internet universell ist in unserem Verständnis von Farbe im Internet universell , dass jetzt jeder weiß, dass Warnmeldungen rot sind und Erfolgsmeldungen grün sind. Wir können Rot und Grün jedoch ein wenig anpassen. Es muss offensichtlich sein, dass es die Warnung Rot und das Erfolgsrot ist. Aber in diesem Beispiel habe ich hier angegeben, ich habe ein wenig mit ihnen gespielt. Ich habe sie nicht zu gesättigt, nicht zu hell gemacht. Aber ich denke, es gibt immer noch ganz offensichtlich den Erfolg und die Warnfarben und das Gelb werden oft für Informationen verwendet. Das sind also meine Akzentfarben. Sie werden sparsam verwendet, manchmal nur für ein bisschen visuelles Flair. Und manchmal ziehen sie ein wenig Aufmerksamkeit auf sich, aber nicht so sehr wie unsere Call-to-Action-Buttons. Wir haben also drei verschiedene Arten von Farben in dieser Anwendung, wir haben unsere Schwarzen und Weißen , die sehr selten schwarz und weiß sind. Wir haben unsere Primär - und Sekundärfarben und wir haben unsere Akzentfarben. Sobald wir wissen, was unsere Farben sind, sollten wir uns auch etwas Zeit nehmen prüfen, welche zusammenarbeiten. Einige Farben funktionieren einfach nicht mit anderen Farben. Und vielleicht möchten wir uns das notieren, damit Leute sie nicht versehentlich benutzen. Nun, weil Farbe relativ zu ihrer Umgebung aussieht. Die einzige Möglichkeit, dies zu überprüfen, besteht darin, tatsächlich mit unseren Augen zu schauen. So ähnlich wie bei den Übungen von Joseph Alberta, können Sie eine kleinere Box in einem größeren Kästchen erstellen und überprüfen wie die Farben ineinander aussehen. So sieht zum Beispiel diese Orange auf diesem Grau oder sogar das Grau auf der Orange oder sogar das Grau auf der Orange wirklich gut aus. Ich kann den deutlichen Farbunterschied sehr deutlich erkennen. Dieses sehr hellgraue mit diesem Orange sieht absolut fantastisch aus. Ich denke, diese Farben können sowohl übereinander als auch ineinander liegen. Dieses andere Grau mit diesem Orange funktioniert jedoch nicht. Es ist sehr schwer, die definierte Grenze zwischen ihnen zu erkennen. Es sieht fast etwas verschwommen aus. Es ist ziemlich schmerzhaft für meine Augen, ehrlich zu sein. Es gibt viel Kontrast zwischen den Orangen - und Grautönen. Aber die Werte und die Sättigungen unterscheiden sich nicht so. Es gibt einfach nicht genug Kontrast zwischen diesen. Also möchte ich wahrscheinlich sicherstellen, dass jeder weiß , dass wir diese beiden Farben nicht zusammen verwenden können. Diese Orange kann nicht auf diesem grauen Hintergrund gehen, und wir können diesen grauen Text nicht auf einer orangefarbenen Schaltfläche haben, wird mit jeder Farbkombination denselben Test machen wollen . Es ist in Ordnung, wenn eine Farbe nicht mit einer anderen funktioniert , solange wir Notizen machen, aber wir möchten auch sicherstellen, dass die meisten unserer Farben mit den meisten unserer anderen Farben funktionieren. Wir haben also drei verschiedene Farbgruppen. Wir haben unsere Schwarzen und Weißen, wir haben unsere Primärfarben und wir haben unsere Akzentfarben. Die meisten Leute, die die meisten Websites erstellen, denken nicht wirklich über all diese verschiedenen Arten von Farben nach. Und doch sind die meisten unserer Website unsere Schwarzen und Weißen. Wir möchten also sicherstellen, dass wir all dies gut aussehen lassen , wenn wir unsere gesamte Farbpalette haben, wir möchten überprüfen, ob sie übereinander arbeiten . Und die einzige Möglichkeit , dies zu tun, besteht darin, sie tatsächlich übereinander zu stellen und zu überprüfen, ob sie gut aussehen. 7. ZUSAMMENFASSUNG: Wir haben endlich eine Farbpalette erstellt. Es könnte sich ändern, wenn wir unsere Seiten in unserer Anwendung entwerfen und wird zweifellos feststellen, dass einige Farben weniger nützlich sind, als wir dachten, oder dass wir eine andere Farbe benötigen, wenn wir mit dem Design beginnen einzelne Seiten. Wichtig ist, dass wir mit unserem Team oder unseren Kunden eine vereinbarte Farbpalette haben. Und wenn es sich ändert, können wir uns darüber unterhalten. Zu der Zeit. Die Farben vermitteln die Emotionen unserer Marke, sind aber weitgehend sehr entsättigt. Wir haben also einen subtilen emotionalen Einfluss auf den Benutzer unserer Webanwendung. Während einige unserer Farben sehr gesättigt sind, werden aber sehr sparsam um das Design herum verwendet. Diese werden auffallen und die Aufmerksamkeit der Menschen leicht auf sich ziehen. Unter allen entsättigten Farben haben Farben einen Zweck, der während des gesamten Anwendungsdesigns gleich bleibt und es Benutzern erleichtert, auf zukünftigen Seiten zu navigieren , sobald sie ein unbewusstes Verständnis dessen, was jede Spalte bedeutet. Wir sind jetzt bereit, unsere Farben auf unser Design anzuwenden. Lassen Sie uns zunächst einige geeignete Bilder und Illustrationen auswählen einige geeignete Bilder und , die in unserem Design verwendet werden sollen.