Color on the Web II: Design für Schärfe und Compliance

1. Trailer: In Teil 2 dieser Serie von Color on the Web lernen wir, wie man effektiv Farbe zu einem Website-Design hinzufügen kann. Wir arbeiten für eine fiktive Firma namens Bike Book, eine Fahrradvermietung mit einem Twist. Zuerst lernen wir alles über Farbenblindheit. Was ist es? Wie sieht es aus? Und wie man dafür entwirft? Dann springen wir hinein und wenden die Farbpalette, die wir in Class One entworfen haben , auf das Bike Book Website-Mock-up an. Da wir uns nur auf die Farbe konzentrieren, wird das Design für Sie zur Verfügung gestellt. Schließlich lernen wir, wie Sie unsere Farbauswahl zu einem Styleguide hinzufügen, um die Bereitstellung von Arbeit an Entwickler zu einem Kinderspiel zu machen. Alles, was Sie brauchen, ist eine Kopie von Photoshop oder Illustrator, um den Lektionen folgen zu können. Diese Klasse richtet sich an Anfänger, die ihre Farbfähigkeiten verbessern möchten und erfahrene Designer, die ihren Farbworkflow perfektionieren möchten. Am Ende des Kurses haben Sie ein farbiges Modell, das Sie mit der Skillshare Community teilen können, zusammen mit einem soliden Verständnis, wie Sie Ihre eigene Arbeit in Zukunft wählen und Farbe anwenden können. Lasst uns anfangen. 2. Einführung: Hey Leute, willkommen zu meinem zweiten Skillshare Kurs über Farb-Workflow. Also, wenn Sie gerade meine erste Klasse abgeschlossen und Ihr Projekt eingereicht haben, sollten Sie einen einzigen Piloten wählen, bevor Sie zu diesen Lektionen gehen. In dieser Klasse werden wir unsere Farbpalette implementieren, aber nicht, bevor wir ein wenig über ein anderes wichtiges Thema lernen. Also, hier ist ein Zitat, das ich von Josef Albers wirklich liebe : „In der visuellen Wahrnehmung wird eine Farbe fast nie so gesehen, wie sie wirklich ist... Diese Tatsache macht Farbe zum relativsten Medium in der Kunst.“ Albers war abstrakter Maler und Lehrer aus Deutschland und veröffentlichte 1963 einen sehr einflussreichen Kurs zur Farbtheorie. Er hatte völlig Recht. Farbe ist sehr relativ, nicht nur in der Art, wie sie auf verschiedenen Geräten und Bildschirmen anders erscheint, sondern sie könnte auch von verschiedenen Menschen anders gesehen werden. Und das ist etwas, worauf wir wirklich achten müssen, wenn wir entwerfen. Wenn Sie über die Arten von Behinderungen nachdenken, die beeinflussen können, wie Menschen Technologie verwenden, sind die ersten Dinge, die Ihnen in den Sinn kommen könnten, wahrscheinlich mehr Extreme. Man könnte also darüber nachdenken, dass eine Person völlig blind ist, oder man denkt an jemanden, der eine schwere Behinderung hat und nur eine Tastatur oder Maus benutzen kann. Sie denken wahrscheinlich noch eher an ältere Leute und betrachten geeignete Schriftgrößen für Menschen, die Probleme beim Lesen von kleinen Text auf Bildschirmen haben. Aber Farbblindheit, ist auch eine Art von Behinderung, die einen überraschend großen Prozentsatz der Bevölkerung betrifft. Es wird nicht wirklich so oft darüber gesprochen. Farbblindheit bedeutet also sehr selten, dass Sie überhaupt keine Farbe sehen können. Es bedeutet nicht, dass die Menschen Dinge in Graustufen sehen. Es ist tatsächlich eine verminderte Fähigkeit, Farbe zu sehen, oder eine verminderte Fähigkeit, Farben voneinander zu unterscheiden. Farbenblindheit ist ein geschlechtliches Merkmal, und es ist viel häufiger bei Männern als Frauen. Insgesamt tritt es bei acht Prozent der Männchen auf, aber nur 0,5 Prozent der Weibchen. Denk nur kurz darüber nach. Das sind fast fünf Prozent der Gesamtbevölkerung. Wir können nicht ignorieren, dass viele Menschen in unserer Arbeit sind. Ich werde in der nächsten Lektion mehr darüber reden, warum. 3. So wirkt sie auf Menschen: Ich habe das Glück, gute Farbsicht zu haben, aber ich werde nicht lügen. Wie jeder andere mit guter Farbsicht, ist es definitiv etwas, das ich für selbstverständlich hielt. Ich habe nie wirklich über die Auswirkungen der Farbenblindheit nachgedacht , bis ich jemanden traf, der gelernt hat, damit zu leben. Ich glaube, die erste Person, die ich traf, die offen darüber sprach , Colorblind zu sein, war mein College-Fotografie-Lehrer, und vor ein paar Jahren habe ich mich wieder mit ihm in Verbindung gesetzt und er erzählte mir, wie er entdeckte, dass er es hatte. Mein Designlehrer John Solowski wies darauf hin , dass ich mein erstes Jahr und die Ryerson University. Ich war wirklich ziemlich nutzlos als Farbdrucker. Ich schätze, deshalb hat mich die Schwarz-Weiß-Fotografie so sehr gefallen. Für meinen Lehrer bedeutete dies, dass er sich entschied, weniger in der Farbfotografie und mehr in Schwarzweiß zu arbeiten. Aber für andere Menschen kann es viel verheerendere Folgen haben. Viele Branchen führen tatsächlich Screening-Tests für Karrieren durch, in denen Farbvision eine absolute Voraussetzung ist. Leute, die hofften, Piloten, Elektriker, Ingenieure und Labortechniker zu werden , müssen normalerweise einen Test absolvieren, bevor sie eingestellt werden, und manchmal ist es, nachdem sie viel Geld und viel Zeit für ihre Ausbildung ausgegeben haben. Viele dieser Menschen haben das Gefühl, dass sie einer Diskriminierung ausgesetzt sind , nachdem sie die Revisionstests versagt haben, wenn sie in Wirklichkeit absolut kein Problem haben, irgendeine der Aufgaben in ihrer Arbeit auszuführen. Also habe ich einmal eine persönliche Geschichte eines Mannes gelesen, der einen assoziierten Abschluss in medizinischer Laborwissenschaft erhielt. Als er für einen möglichen Job beurteilt wurde, scheiterte er den Farbtest und der Arzt sagte ihm tatsächlich, dass es an der Zeit sei, eine neue Karriere zu finden. Also, obwohl er mehr als in der Lage war, die Aufgaben zu erfüllen und er wirklich hohe Noten in seinen Kliniken erzielte, galt er als Haftung gegenüber dem Krankenhaus auf dem Papier. Einige von euch denken vielleicht: „Nun, wir entwerfen nur Websites, oder? Was hat das mit uns zu tun?“ Nun, die einfache Antwort ist, dass wir uns alle bemühen sollten unsere Arbeit so zugänglich wie möglich aus Respekt für unsere Leser zu machen, und ich denke, es ist das Richtige. Aber wenn Sie immer noch nicht überzeugt sind, ist es auch ein praktisches Business Case. Also, wenn eine Person es unmöglich oder einen totalen Schmerz findet , Ihre Website wegen eines Farbproblems zu navigieren, werden sie nur eine Alternative zu finden. Wenn Sie sich daran erinnern, dass fünf Prozent der Gesamtbevölkerung betroffen sind, ist es ziemlich leicht zu sehen, wie diese Art von Problem in verlorene Leserschaft und Verkäufe übersetzen kann, und niemand will, dass das mit seinem Geschäft geschieht. Eine ernstere Bemerkung, Barrierefreiheit Probleme können Sie in einigen ziemlich heißen Wasser in der rechtlichen Welt landen. Im Jahr 2011 erhielten drei blinde Frauen aus Kalifornien und Kansas die Erlaubnis eines Richters, eine Sammelklage einzureichen. Es wurde gegen die Walt Disney Company eingereicht für eine Website, die nicht zugänglich für Screenreader Anwendungen war, und die Frauen tatsächlich gewonnen. Sie haben tatsächlich eine außergerichtliche Einigung mit Disney erreicht, bevor sie jemals vor Gericht gingen. Ich will euch nicht erschrecken, Leute, aber denk einfach darüber nach. Wären Sie eigentlich bereit, sich den Konsequenzen zu stellen, wenn Ihnen so etwas passiert? Vermutlich nicht. Aber zum Glück ist Farbenblindheit nicht schwer zu verstehen und es ist nicht schwer zu entwerfen, so gibt es absolut keinen Grund, warum Sie diesen Teil jedes Workflows nicht machen können. 4. Wie sieht es aus?: Also, lassen Sie uns ein wenig darüber reden , wie Farbenblindheit tatsächlich passiert. Wir werden in das menschliche Auge schauen, um zu sehen, wie es funktioniert. Dies ist also eine Querschnittsillustration der Innenseite der typischen menschlichen Netzhaut. Es gibt zwei Arten von Rezeptorzellen im Inneren: Stäbe und Zapfen. Stäbe sind die Zellen, die es uns erlauben, dunkel und hell zu sehen, und Form und Bewegung. Zapfen sind die Zellen, die es uns ermöglichen, Farbe wahrzunehmen. Es gibt drei Arten von Kegel; jeder ist verantwortlich für die Absorption von blauen, roten und grünen Wellenlängen im Spektrum. Probleme mit der Farbsicht treten auf, wenn eine oder mehrere dieser Arten von Zapfen defekt sind oder vollständig fehlen. Diese Defekte können entweder durch Genetik vererbt werden oder tatsächlich durch Dinge wie Trauma, UV-Licht, Degeneration mit dem Alter und wirksamen Diabetes oder andere verschiedene Faktoren erworben UV-Licht, werden. Ich erwähnte bereits von Dr. Jay Neitz, dem Farbenvisionsforscher am Medical College of Washington, und obwohl er sagte, dass eine Person mit voll funktionsfähigem Farbsehen bis zu einer Million verschiedene Farben unterscheiden kann, eine Person, die eine Art von Kegel fehlt, ist auf nur 10 Tausend Farben begrenzt. Bei dieser Art von Defekt ist es viel wahrscheinlicher, dass eine Person, die eine Art Kegel vermisst , sich ihres Zustandes vollständig bewusst ist. Es gibt also drei Haupttypen von Farbenblindheit. Ich werde simulierte Bilder der schwersten Versionen zeigen. Menschen mit den häufigsten Arten von Farbenblindheit wie Protanopie und Deuteranopie haben Schwierigkeiten, rote und grüne Farbtöne zu unterscheiden. So könnte ein Bild von einem Farbrad so aussehen, jemanden mit Protanopia-Farbblindheit und es könnte für jemanden mit Deuteranopie so aussehen. Obwohl rot-grüne Farbprobleme am häufigsten sind, gibt es auch Formen der Farbblindheit wie Tritanopie, die die blauen und gelben Farbtöne beeinflussen. Das bedeutet, dass unser Farbrad in etwa so aussehen könnte. In den nächsten Lektionen werden wir über einige einfache Schritte sprechen, die Sie tun können, um zugänglichere Designs zu erstellen , ohne dabei auf die Ästhetik zu verzichten. 5. Farbnamen: Also, obwohl bestimmte Farbkombinationen vermieden werden sollten, wann immer möglich, wie Rot und Grün. Wir sollten nicht unsere ganze Zeit damit verbringen, uns Sorgen zu machen, die perfekte Palette zu erreichen. Es gibt viele andere Tipps und Tricks, die wir verwenden können , um die Erfahrung eines Colorblind-Benutzers zu verbessern. Als erstes sollten Sie darauf achten, dass Sie neben allen Farbfeldern, die Sie auf einer Website verwenden, Farbnamenbeschriftungen einschließen . Also, hier sind ein paar Jungs, die wirklich stilvolle blaue Anzüge tragen. Richtig? Nein, das ist genau das, was eine Person mit schwerer Protanopie sehen könnte. Also, in einer praktischeren Situation, sagen wir, Sie haben eine Website, die T-Shirts verkauft, wenn Sie nur ein Foto des T-Shirts zeigen, kann es für eine Person unmöglich sein zu sagen, welche Farbe des Shirts wirklich ist. Um Verwirrung zu vermeiden, achten Sie darauf, den Namen der Farbe in der Beschreibung des Produkts zu referenzieren. United Pixel Arbeiter verkauft T-Shirts online, und sie machen einen wirklich guten Job, diese Regel auf ihrer Website zu befolgen. Also, ich komme aus St. John's und das unsere T-Shirts und die Farbpalette basiert auf unserer lokalen Flagge, die eine inoffizielle rosa, weiße und grüne Flagge ist . Das ist eine Farbkombination, die ich mir vorstellen kann, dass ein paar Leute nicht allzu gern sind. Aber die Beschreibung ist klar, es gibt einen Rose Cabot Tower auf einem Kelly Green Hemd. Das bedeutet, dass es keine Überraschungen geben sollte, wenn eine farbenblinde Person dies sieht. Wie die Rosafarbenen Anzüge gibt es hier einen ziemlich großen Unterschied. Vielleicht ist ein rosafarbenes Fahrrad nicht so eine große Sache, aber Sie müssen auch vorsichtig sein, wenn Sie Farbnamen wählen. Wenn die Farbe lila ist, nennen Sie es eigentlich lila statt so etwas wie Traube. Wenn Sie darüber nachdenken, können Trauben grün oder gelb sein, es gibt hellrote, dunkelrote Trauben, und wenn die Farbe grau ist, nennen Sie es tatsächlich ein hellgrau statt Rauch. Rauch kann so ziemlich jede Farbe braun, schwarz, blau oder was auch immer sein. Bleiben Sie mit wenigen Namen so viel wie möglich. Es besteht eine größere Chance, dass der Betrachter tatsächlich verstehen wird , dass ein violettes Hemd lila ist, anstatt jede andere Anzahl von Farben, und es wird sie nicht zwingen, eine andere Person zu bitten, für sie zu klären. Also, hier auf unserer Bike Book Website, werden Sie feststellen, dass die Farboption für die Auswahl Ihres Fahrrades hellgrün ist statt Minze, Blaugrün oder Meeresschaum oder welche Farbe Sie es nennen möchten. Das ist definitiv der Weg zu gehen. In der nächsten Lektion sprechen wir über farbspezifische Anweisungen und darüber, wie Sie diese bei Ihrer Arbeit vermeiden können. 6. Farbspezifische Anweisungen: Also, das nächste, worüber ich sprechen werde, sind unsere farbspezifischen Anweisungen. Also, was ich damit meine ist, sagen Sie einer Person nicht, Dinge zu tun, wie klicken Sie auf die grüne Schaltfläche ein Produkt zu kaufen, oder klicken Sie auf die rote Schaltfläche, um Ihre Bestellung zu stornieren. Weil farbblinde Menschen wahrscheinlich Probleme haben werden, tatsächlich diese Schaltfläche auf Ihrer Seite zu finden. Ich zeige euch ein paar Beispiele. Dies ist ein gutes Beispiel dafür, was beim Entwerfen von Formularen nicht zu tun ist. Vermeiden Sie die Beschriftung erforderlicher Felder nur mit farbigem Text. Wenn Sie eine farbblinde Person sind, werden Sie wahrscheinlich nicht in der Lage sein, zu erkennen, welche Etiketten hervorgehoben sind. Sie werden alle schwarz aussehen. Es ist sicherer, ein Symbol q wie ein Sternchen zu verwenden, das farbunabhängig ist. Aber Sie sollten auch bedenken, dass einige Bildschirmlesegeräte, die von Menschen mit Behinderungen verwendet werden, nicht wirklich Sternchen laut lesen. Eine noch bessere Lösung besteht also darin, eine Textreferenz direkt im Forenlabel zu verwenden. Es spielt keine Rolle, welche Farbenblindheit eine Person hat, Sie wissen, dass sie in der Lage sein werden, es zu lesen. Ein weiteres Problem, das mit Farbe InDesign kommt, ist in Infografiken und Diagrammen. Daher verwenden wir alle Informationen oder Diagramme auf der Website des Fahrradbuchs. Aber es ist immer noch wirklich wichtig zu verstehen, wie dies ein großes Problem für eine Person mit einer Sehbehinderung sein kann . Werfen Sie einen Blick auf diese Tabelle. Wenn Sie nicht in der Lage sind, Ihre Datenregionen direkt zu beschriften, verlassen Sie sich nicht auf die Farbcodierung allein wie diese. Sie sollten versuchen, eine Kombination von Farbe mit Textur oder ein Muster zusammen mit präzisen Etiketten zu verwenden und dies in der Taste zu reflektieren, wie die hier oben. Wenn Sie den Hintergrund mit einem einzigartigen Muster kombinieren, gibt es dem Benutzer immer zwei Informationen, mit denen er arbeiten kann. Dasselbe gilt für Liniendiagramme. Liniendiagramme können ziemlich schwierig zu lesen sein, wenn sie sich überschneidenden Pfad enthalten. Auf der rechten Seite sehen Sie, wie sich die Wege für eine Person mit Deuteraopia vollständig vermischen. Also, in diesem Fall können Sie versuchen, die Dicke einer Linie zu erhöhen und ihr einen anderen Stil zu geben. Sie können hier sehen, dass dieses Beispiel viel offensichtlicher und leichter zu lesen ist. Hier ist ein Beispiel für ein gut durchdachtes Diagramm von Google Analytics. Auf der linken Seite befindet sich der Schlüssel, und auf der rechten Seite befindet sich das Kreisdiagramm mit jedem Segment direkt beschriftet. So können Sie selbst in dieser Colorblind-Simulation immer noch Sinn für die Informationen machen. Leider sind die Diagramme nicht wirklich konsistent. In einem anderen Bereich der gleichen Größe befindet sich das Diagramm auf Etiketten und es kann ziemlich verwirrend aussehen, besonders wenn die Teile des Diagramms in der Größe ähnlich sind. Karten können ein weiteres großes Problem sein. Ich benutze dieses Beispiel eine Wäsche, der Londoner U-Bahn System. Leider hat das Design der unterirdischen Karte viele Farben darin , die grundsätzlich von einer Person mit einem Sehproblem nicht zu unterscheiden sind, wie in diesem stimulierten Bild. Dies gilt nicht nur für den Londoner Underground, sondern auch für jedes andere Wegweisungssystem, das auf Farbcodierung als einziger Schlüssel in einer Legende beruht. Es gibt tatsächlich eine druckbare Version der gleichen Karte auf der Transport for London Website in Schwarzweiß. Dieser verwendet Muster und Schattierungen in den Linien, aber der Punkt ist, dass es überhaupt keine Notwendigkeit für diese Art von Karte geben würde, wenn sie von Anfang an mit Blick auf die Zugänglichkeit entworfen wurde. Also, denken Sie daran, kombinieren Sie Farbe mit Muster oder Textur, beschriften Sie Ihre Felder, und Ihre Informationen werden für alle viel einfacher zu lesen sein. 7. Compliance und Testing: Es gibt also viele Werkzeuge, um verschiedene Arten von Farbblindheit zu simulieren, und es ist wirklich wichtig, Ihr Design zu überprüfen, um mögliche Probleme im Voraus zu erkennen. Vergessen Sie nicht, dass nicht alle farbblinden Menschen Farben genauso sehen, wie sie im Farbsimulator erscheinen, denn Simulatoren sollen nur die Vision der am stärksten betroffenen Menschen nachahmen . Also, mein absolutes Lieblingstool zum Testen von Farbblindheit ist auf macOS, Windows und Linux verfügbar , und es heißt Color Oracle, und es ist kostenlos. Ich möchte, dass ihr das sofort runterladet und es auf colororacle.org anschaut. Diese App simuliert die gängigsten Arten von Farbenblindheit, wie Sie Anwendungen auf Ihrem eigenen Bildschirm verwenden. Also, es ist im Grunde ein Vollbildfilter, der im gesamten Betriebssystem funktioniert und es spielt keine Rolle, welche App Sie verwenden. Sie können auch die beiden häufigsten Arten von Farbblindheit direkt in Photoshop oder Illustrator während des Entstehensnachweisen Farbblindheit direkt in Photoshop oder Illustrator während des Entstehens Diese Option finden Sie im Menü Ansicht und Proof Setup. Farbkontrast ist auch unglaublich wichtig zu testen, und das kann jeden infizieren, nicht nur Menschen mit Farbblindheit. Ich denke, viele von uns Designer, wir können wirklich schuldig sein, niedrigen Kontrast entworfen viel zu oft. Was wir als eine subtile und schöne Wirkung denken, könnte eigentlich unmöglich sein, sagen wir, Ihre Oma zu sehen. Einige von euch könnten mit dem W3C vertraut sein. Sie sind eine internationale Organisation und entwickeln Standards für das Internet, um sein volles Potenzial auszuschöpfen. Der W3C hat tatsächlich Richtlinien für die Barrierefreiheit von Web-Inhalten entwickelt, die Empfehlungen sind, um Inhalte im Web für Benutzer mit Behinderungen zugänglicher zu machen . Es gibt drei Ebenen der Konformität. A ist der niedrigste, AA ist zweitbeste, und AAA ist die höchste und strengste. Das minimale Farbkontrastverhältnis auf der AA-Ebene für Text und Bilder von Text sollte 4,5 bis 1 betragen. Mit anderen Worten, die Buchstabenfarbe in einem Paar muss viereinhalb Mal so viel Leuchtdichte haben wie die dunklere Farbe. Die Einhaltung des AAA-Niveaus erfordert ein Kontrastverhältnis von sieben zu eins. Werfen Sie einen Blick auf den Text in der Fußzeile auf dieser Website. Selbst für eine Person mit guter Sicht ist es unglaublich subtil und schwer zu lesen. Das Kontrastverhältnis ergibt sich tatsächlich als 2,36, was inakzeptabel niedrig ist und keiner der Konformitätsstufen entspricht. Persönlich würde ich empfehlen, dass der gesamte Textkörper AAA-konform ist, mit größeren Schlagzeilen und weniger wichtigen Kopien, die die AA-Konformität erfüllen. Diese Jungs sollten darauf abzielen, den Kontrast dieser Fußzeile mindestens 4,5 zu machen. Also, Entwickler Leaver Rue kam mit diesem großartigen Tool, wo Sie einen Farbcode für Text und einen Farbcode für einen Hintergrund eingeben können und es wird Ihnen sagen , ob das Farbkontrastverhältnis ausreichend ist. Ich liebe dieses Tool, weil es jede CSS-Farbe unterstützt, die der Browser unterstützt, nicht nur Hex-Codes. Es unterstützt auch Transparenzen, die wirklich nützlich sein können. So können wir hier so ziemlich jede Farbe eingeben und das Kontrastverhältnis wird sich im laufenden Betrieb aktualisieren. Sie können die URL auch kopieren, als Lesezeichen markieren und sie an eine andere Person senden, um sie zu sehen. Wenn Sie also eine Farbe haben, die den Test nicht bestanden hat, sollten Sie dieses Werkzeug überprüfen, bevor Sie zurückkehren und Ihre Palette optimieren. Das habe ich erst vor ein paar Wochen entdeckt. Es nennt sich der Tanaguru Kontrastfinder. Also, ich werde die Palette überprüfen, die ich für Bytebuch getan habe. Also, ich werde hier in Illustrator gehen und ich werde den Bildschirm testen. Also, ich stellte mir vor, diese Farbe könnte gut für eine Hintergrundfarbe für einen Knopf sein. Also, ich werde den Hex-Code hier nehmen und diese Website besuchen. Also, hier werde ich in der Vordergrundfarbe erscheinen. Also, wenn es weißer Text sein wird, mache ich das einfach weißlich, und dann nehme ich den Hintergrundcode, und da ist er. Wenn es also bearbeitet werden muss, kann ich die Komponente ändern, um sie hier zu bearbeiten. Also wollte ich die Hintergrundfarbe natürlich bearbeiten, und das Mindestverhältnis sollte 4,5 sein. Also, hier haben Sie zwei Optionen und ich werde dieses auf einer Reihe von gültigen Farben lassen , nur um zu sehen, was für uns zur Verfügung steht. Dann scrollen wir nach unten, und hier werden wir tatsächlich zeigen, dass das Verhältnis dieses weißen Textes auf dieser Farbe 2,8 ist, was ziemlich niedrig ist und all diese Farben darunter, alle sind genehmigt und haben Verhältnisse über 4,5. Also kann ich einfach nach unten scrollen und auswählen, welche Farbe ich denke, die am besten passt. Natürlich sehen viele von diesen ziemlich Unterschied aus und einige von ihnen werden völlig nichts wie das, was ich ausgewählt habe, aber die am nächsten an der Spitze ist eigentlich nicht allzu schlecht. Also, ich kann hier gehen und diese neue Farbe auswählen und direkt in Illustrator einfügen. Ich werde jedoch ein neues Musterfeld machen, weil ich diese alte Farbe für Illustrationen und Dinge, die nicht wichtig sind, oder Dinge, die keinen Text über sie brauchen, behalten kann . Also, das kann meine neue Farbe und eine neue Ergänzung der Palette sein. Nun, ich möchte, dass ihr eure Palette auf mögliche Kontrastprobleme testet. Wenn Sie irgendwelche wichtigen finden, sehen Sie, ob Sie sie optimieren können, bis Sie das richtige Kontrastverhältnis finden. Danach werden wir bereit sein, sie in unserem Design umzusetzen. 8. Erste Schritte: Also, ihr habt es so weit geschafft und ich bin wirklich froh, dass ihr damit festgehalten habt. Sie haben wahrscheinlich schon bemerkt wie viel Fundamentarbeit tatsächlich in die Auswahl effektiver Farbschemata geht. Also, alle Informationen, die Sie über Farbtheorie und Botschaft und Bedeutung und Zugänglichkeit gelernt haben , scheinen zunächst völlig überwältigend zu sein, aber je mehr Sie es tun, desto einfacher wird es, und schließlich werden Sie in der Lage sein, es ganz natürlich in Ihren Workflow zu integrieren. Ich weiß, das erste Mal, dass ich begann, über Farbenblindheit zu lernen, ich teste immer absolut alles, was ich gemacht habe, aber schließlich wurde es nur zweite Natur und jetzt habe ich ein viel besseres Auge für Probleme im Voraus, anstatt sie am Ende zu finden, und du wirst auch dort hinkommen. Jetzt ist es an der Zeit, in den wirklich lustigen Teil zu kommen und unsere Palette zu acetieren und sie tatsächlich in die BikeBook-Website umzusetzen. Tatsächlich kann die Implementierung Ihrer Palette in einem Design tatsächlich der schwierigste Teil für viele Designer sein, aber wie immer gibt es Tricks, die wir verwenden können. Einer der einfachsten Tricks zu verwenden ist die 60, 30, 10 Regel, die von vielen Innenarchitekten verwendet wird, und Sie können diese Arbeit auch im Web-Design machen und es funktioniert sogar in der Zusammenstellung von Outfits. Also, wenn du nicht die Besten bist, dich anzuziehen, wirst du keine Entschuldigung mehr haben. Also, ich werde Ihnen ein Seitendesign zeigen, ohne Farbe angewendet ähnlich wie unsere Graue Skala BikeBook Mockup und meine Palette dort auf der rechten Seite. Zuerst werden 60 Prozent der Farbe zu den Wänden oder in unserem Fall dem Seitenhintergrund hinzugefügt. Dies kann auch Weiß oder Schwarz enthalten, wenn Ihre Seite so aussehen soll. Dreißig Prozent der Farbe werden den Vorhängen und Bodenbelägen hinzugefügt. Also, in unserem Fall wäre das das Seitenbanner und die Seitenfußzeile. Zehn Prozent der Farbe wird an Accessoires und Kunstwerke gegeben und für uns bedeutet das Knöpfe, Links und andere Akzentfarben. Ich werde dies weiter demonstrieren, indem ich meine Palette und die BikeBook-Website verwende. So wie zuvor werde ich Illustrator verwenden, da ich mich damit wohl fühle und es ist, was ich bevorzuge, Entwicklern für die Richtung zu zeigen, wenn ich Wireframes entwerfe , aber ich habe auch eine Photoshop-Datei enthalten , wenn Sie möchten verwenden, um stattdessen damit zu arbeiten. Also werde ich Illustrator und meine BikeBook Wireframes öffnen. Nun, ich möchte Ihnen das zuerst zeigen, wenn Sie sich die Ebenenpalette ansehen, werden Sie feststellen, dass alle Ebenen für jeden Abschnitt der Seite hier sind. Sie können also einen Drilldown innerhalb dieser Objekte anzeigen, um alle Objekte oder Formen anzuzeigen, für die Sie möglicherweise die Farbe ändern möchten. Also werde ich sicherstellen, dass meine Musterpalette hier geöffnet ist. Was ich getan habe, ist, dass ich meine endgültige Palette hier oben platziert habe. Also, was ich tun werde, ist wählen Sie alle meine Farben, kommen Sie zur Musterpalette, zum Dropdown-Menü und erstellen Sie eine neue Farbgruppe. Ich werde es als Selected Artwork behalten, Convert Process to Global und ich werde es BikeBook nennen. Das erlaubt uns, alle diese Farben als Teil unserer Musterfelder zu haben. Wir können diese löschen und einfach voran gehen und anfangen, Farbe anzuwenden. Also habe ich diese Palette basierend auf dem Foto der Straße entwickelt. Also werde ich weitermachen und das Foto in meinen Drahtgittern platzieren. Ich schneide es ab und kann es so positionieren, wie ich will. Also, fühlen Sie sich frei, diesen Text zu bewegen, wenn Sie müssen, wenn Sie das Gefühl haben, dass er nicht mit Ihrem Foto funktioniert. Also, ich beginne mit der Anwendung des dunkelsten lila auf einige dieser Panels auf der Seite und die erste nach dem Foto wird helfen, den Ton für das Farbschema für den Rest der Seite festzulegen. Es ist eigentlich eine der ersten Farben, die ein Benutzer sehen wird, wenn er eine Website besucht. Also, es wird einen großen Eindruck machen. Sie wollen nicht wirklich, um Ihre wichtigsten Branding Farben zu weit unten auf der Seite zu vergraben. Also, ich habe meinen Text weiß gemacht, um sicherzustellen, dass ich einen guten Kontrast habe, und jetzt werden wir nach unten scrollen und das gleiche tun, wie zu Panel. die Farbe aufteilen, ziehen Sie Ihr Auge von jedem Abschnitt zum nächsten und verhindern Sie, dass es zu langweilig aussieht. Also, natürlich nicht zu viel über eines der grauen Elemente auf der Oberseite noch sorgen. Wir wollen das Fundament setzen und am Ende alles einfallen lassen, und wenn nicht, können wir es später immer optimieren, bis wir glücklich sind. Auch hier werde ich diesen Abschnitt mit den Formularen überspringen. Ich glaube, ich will die auf Weiß. Also, ich werde das Lila wieder auf dieses Positionsfeld anwenden. Also im Grunde haben wir drei Hauptabschnitte mit dem gleichen lila. Wir haben, was es ist, wie es funktioniert und wo Sie es finden können. Als nächstes werde ich 30 Prozent meiner Farbe auf den Seitenkopf und die Seitenfußzeile anwenden . Also, in diesem Fall wird unser Header die Navigationsleiste sein. Ich meine, die Kopfzeile enthält auch das Foto, aber wie es bereits in Farbe ist, brauche ich etwas, um diese Navigation hervorzuheben. Ein Trick, den ich gerne ausprobieren möchte, ist das Hinzufügen einer visuellen Gewichtung zu der Kopf- und Fußzeile, indem ich eine dunklere Farbe auswähle. Es hilft, als Anker zu fungieren, um die Navigation herausragend zu machen, ohne von der Stelle zu schauen. Also, ich werde nur das dunkelste Lila in meiner Palette auswählen, die fast schwarz ist. Ich denke, dass reines Schwarz auf meiner Seite zu hart sein wird, so dass das dunkelste Lila tatsächlich ziemlich gut funktioniert. Dann scrolle ich den ganzen Weg bis zur Fußzeile und mache das Gleiche. Also, an dieser Stelle sollten wir unsere ersten beiden Palettenfarben an Ort und Stelle haben. Wie ich bereits erwähnt habe, mach dir keine Sorgen, wenn du noch nicht zufrieden damit warst, wirst du da sein. Wir haben noch unsere Akzentfarben hinzuzufügen, die wir in der nächsten Lektion mehr besprechen werden. 9. Konsequent vorgehen: Daher ist es wichtig, sich bei der Implementierung von Farben in Ihrem Design zu merken , dass Ihre Farbe konsistent bleibt. Grundsätzlich bedeutet das, dass Sie nicht zu verrückt mit Ihrer Palette gehen und jeden Button und Link auf der Seite eine andere Farbe machen. Wenn ein Betrachter eine Änderung der Farbe sieht, kann er sie als auch eine Änderung der Nachricht oder Bedeutung interpretieren. Eine gute Faustregel ist also, wenn Sie gemeinsame Eigenschaften haben, eine ähnliche Farbe verwenden und wenn Ihre Designelemente unterschiedliche Ideen haben, verwenden Sie vielleicht verschiedene Farben. Es ist das Gleiche wie Farbcodierung. Halten Sie Ihre Fehlermeldungen konsistente Farbe. Halten Sie Links ihre eigene Farbe und wenn Sie etwas haben, das wirklich abheben sollte auf einer Seite wie ein Call-to-Action-Button, eine, die sagt, kaufen Sie es jetzt oder registrieren Sie sich jetzt, sollten Sie überlegen, dass eine Farbe ganz seine eigene. Ich werde auf unserer Seite demonstrieren. Also, für unsere Textlinks, lassen Sie uns versuchen, eine Farbe zu wählen und dabei zu kleben. Ich werde unser Medium Purple hier ausprobieren. Es gibt nicht zu viele Links auf dieser Seite, nur hier auf dem Instagram-Banner. Ich werde meine Links unterstrichen halten, um ihnen zu helfen, hervorzuheben , so dass es keinen Fehler geben wird, dass dies Links sind. Als Nächstes werde ich an den Überschriften der Seite arbeiten. Also, ich werde ein dunkleres Lila wählen und es auf alles anwenden, was meiner Meinung nach als Schlagzeile dienen sollte , solange es auf einem weißen Hintergrund ist. Ich werde auch diese Schritte in der gleichen Farbe machen. Es wird dem Leser helfen, entlang und brechen Sie den Standort und machen sie klare Schritte. Es ist ein subtiler Unterschied, aber Sie möchten es konsistent halten. Als nächstes werde ich an der wahrscheinlich langweiligsten Sache im Webdesign arbeiten und das sind Formen. Formulare sind definitiv nicht der Spaß in der Welt, aber ich denke, dass ihnen ein wenig zusätzliche TLC wirklich einen massiven Unterschied im Gesamtbild Ihrer Website machen kann . Also werde ich etwas von meinem Purpur hier heranziehen, aber ich werde es wirklich subtil machen. Also, ich werde das neueste Lila verwenden, das ich habe, und ich werde ein wenig dunkleres Lila für die Grenze hinzufügen ein wenig dunkleres Lila für und ich werde das für den Rest der Formularelemente wiederholen . Ich werde alle diese Kalendertexte auch verblassen und ich werde die Header-Bereiche unseres Kalenders zu dem gleichen dunklen Purpur winken , das wir in unserer Navigation verwendet haben. In Ordnung. Wie Sie sehen können, habe ich alles ziemlich konsistent gehalten, aber es sieht alles ziemlich lila aus. Ich änderte diese in lila und ich habe hier unten auch ein paar lila Details gegeben. Also, lassen Sie uns zurück zum Anfang der Seite scrollen und werfen einen Blick auf unsere Call-to-Action-Schaltfläche. Also, ich möchte wirklich, dass das auffällt. Wenn ein potenzieller Kunde auf dieser Seite landet, möchten wir, dass er es sofort sieht, besonders wenn bereits weiß, dass er ein Fahrrad buchen möchte und er es einfach erledigen möchte. Also, ich werde meine dunklere Blaugrün hier hinzufügen und ich werde meinen Text weiß machen, was ich denke, sieht wirklich gut oben auf diesem Foto und lassen Sie uns die Seite runter bewegen. Sie haben vielleicht bemerkt, dass ich diese Illustrationen übersprungen habe , und wir werden die letzten machen. Also, hier im Kalender, lassen Sie uns diesen Datumsbereichswähler auch blaugrün machen. Es muss definitiv auffallen, da klar sein muss, welche Daten der Benutzer wählt. Wir gehen wieder weiter und jetzt ändern wir unseren Buch-Button jetzt. Schließlich die letzte Nachrichtenschaltfläche senden. Ein weiterer Tipp hier im Auge zu behalten ist, wenn Sie eine Website mit vielen verschiedenen Seiten haben, versuchen Sie nicht, die gesamte Seitenfarbe zu ändern, den Hintergrund von Seite zu Seite, wie wenn Ihr Hintergrund ist rot auf einer Seite und dann blau und dann eine andere Seite violett. Ich habe viele Websites gesehen, die dies tun, und nur wenige haben es wirklich abgezogen. Ich denke, die meiste Zeit kann es nur schwächen die Zuschauer Eindrücke Ihrer Marke. Wenn Sie ein wirklich etabliertes Unternehmen sind, können Sie damit umgehen, aber wenn Sie nur an einer Website für ein Startup arbeiten und jede Seite eine andere Farbe hat, nehmen Sie eine weitere Sache weg, die sich Ihre Zuschauer an Sie erinnern durch. Es ist wie Magazine, die das Logo so sehr aus dem Covermodell verdecken , dass man es nicht einmal mehr lesen kann. Ich denke, sie können es sich leisten, das zu tun, weil ihre Leser bereits wissen, wonach sie suchen. Also, denken Sie daran, zu versuchen, es konsistent zu halten. 10. Farbe in Symbolen: Also Leute, wir sind fast da. Das letzte, was auf unserer Seite zu beenden ist, wie man ein Icon illustriert. Also, ich werde meine Farben direkt hier in der Vollseiten-Vorlage bearbeiten, aber ich habe separate Illustrator- und Photoshop-Dateien für diese erstellt , wenn Sie lieber einzeln daran arbeiten möchten. Ich mag es, meine vor dem eigentlichen Hintergrund zu bearbeiten, auf dem sie verwendet werden, nur um zu sehen, wie alles zusammen funktioniert, aber wirklich liegt es an dir. Also werde ich sicherstellen, dass mein Farbfeld wieder geöffnet ist, und ich werde die Farbe vorher auf ähnliche Weise anwenden. Aber dieses Mal denke ich, dass ich stattdessen mit dem Blaugrün anfangen werde. Wir haben derzeit nicht wirklich viel davon auf unserer Seite, und ich denke, das ist eine gute Ausrede, um einige zu benutzen. Ich möchte sicherstellen, dass ich mindestens eine Instanz jeder Farbe in meiner Palette in meinen Symbolen habe, wenn ich kann. Ich finde, dass wirklich hilft, alles zusammen mit dem Farbschema zu binden , wenn Sie es hier auch in den Symbolen reflektieren können. Es ist auch großartig, weil einfach nur über das Potenzial für Illustrationen auf der Straße nachdenken , zurückziehen oder Pläne zur Erweiterung. All diese Illustrationen könnten hier herausgezogen und in Werbung oder Plakaten oder was auch immer verwendet werden, und sie werden bereits alle Farben der Marke drin haben. Also, hier ist mein fertiges Design. Ich habe ein paar kleine Anpassungen vorgenommen, wie nötig. Ich habe hier ein kleines Highlight hinzugefügt, um zu zeigen, auf welchem Abschnitt wir gerade sind. Ich habe einen subtilen kleinen schwarzen Rand um diese Illustrationen hinzugefügt , nur um sie vom Hintergrund ein wenig mehr abheben zu lassen. Ich habe auch den Textkontrast von 100 Prozent Schwarz auf rund 80 Prozent Schwarz zurückgezogen , wie ich bereits in der ersten Klasse erwähnt habe, nur um es etwas weniger Belastung für die Augen zu machen. Es wird immer noch ein gutes Kontrastverhältnis haben, was der wichtigste Teil ist. Alles ist konsequent und alles ist fertig. Denken Sie daran, dass Sie möglicherweise Dateifarbstests im Browser durchführen müssen. Wir machen im Wesentlichen ein Modell für Entwickler oder andere Designer zu folgen, und Sie können nur so viel im Programm für Druckdesign wie Illustrator oder Photoshop. Also, überprüfen Sie alle Ihre Farben, vor allem Textfarben im funktionierenden Prototyp im Browser, nur um sicher zu sein. Ich möchte, dass Sie Ihr Design überprüfen, eine letzte Überprüfung mit Farbropel auf Farbenblindheit durchführen und alle Bereiche überprüfen, von denen Sie denken, dass sie ein potenzielles Problem mit Farbkontrasten haben könnten. Wenn Sie alle bereit sind, laden Sie eine endgültige Version der Bytebuch-Website zur Überprüfung hoch. Sie können es absolut nicht erwarten zu sehen, was ihr euch einfällt. 11. Stilvorgaben: Also, Leute, ihr habt euer Projekt geliefert, aber wir haben noch ein paar Dinge zu besprechen. Was mit Ihrer Palette passiert, nachdem Sie Ihr Design fertig gestellt haben, kann genauso wichtig sein wie das, was vor und während Ihrer Entscheidungsfindung geschieht. Also, wie viele von euch haben mit einem anderen Designer oder einem Entwickler gearbeitet und ihr habt ihnen gerade ein fertiges Mockup übergeben, und ihr kommt zwei Wochen später zurück und alle eure Farbauswahl sind völlig falsch? Klingt es vertraut? Ich denke, wir waren alle an der einen oder anderen Stelle da, aber es gibt ein paar Möglichkeiten, wie Sie verhindern können, dass so etwas passiert. Am wichtigsten ist es, einen Styleguide für andere Personen zu erstellen , die an Ihrem Projekt beteiligt sind. Ein traditioneller Styleguide wird in der Regel von einer Werbeagentur produziert und soll die Regeln und Richtlinien darüber abdecken , wie ihre gesamte Branche verwendet werden soll. Das kann alles von der Logo-Größe bis hin zur Logo-Platzierung, wie man Fotografie benutzt, welche Art von Schriftarten Sie verwenden sollten und wie Farbe verwendet werden sollte. Normalerweise sind diese Dokumente am Ende ein massiver Stapel Papier. Ich habe einmal einen 50-seitigen Styleguide für eine einzelne Marke auf meinem Schreibtisch bekommen. Style-Guides werden heutzutage viel häufiger im Webdesign, aber sie unterscheiden sich normalerweise ganz von den traditionellen Leitfäden für den Druck. Viele Styleguides haben Dinge wie wiederverwendbare Module, Code-Snippets und Muster, auf die Entwickler verweisen können, um sie auf einer ganzen Website zu verwenden. Das ist ein wirklich berühmter von Starbucks, der vor ein paar Jahren herauskam. Ich könnte für immer über Styleguides im Detail sprechen, aber das wird wahrscheinlich eine ganz neue Skillshare Klasse in Anspruch nehmen. Also, wenn einer von euch Jungs wirklich ernst mit Web-Design sind, empfehle ich dringend, ein Buch von Anna Debenham zu lesen , genannt Pocket Guide to Front-End Style Guides. Es ist ein tolles kleines Buch. Sie lehrt Sie so ziemlich alles, was Sie über die Erstellung von Styleguides für das Web wissen möchten. Aber für diese Klasse werden wir nur darüber sprechen, wie Sie Ihre Farbauswahl für andere Entwickler und Designer vorbereiten können. Also, hier ist eine sehr einfache Datei, die ich verspottet habe, dass ich an einen Entwickler senden könnte. Es ist nicht allzu detailliert, aber es kann genug sein, wenn Sie an einer kleinen Website wie BikeBook arbeiten. Ich mag es, RGB-Werte und Hex-Codes für jedes Farbfeld einzubeziehen. Wenn Sie wissen, dass Ihre Farben in Drucken verwendet werden und Sie keine speziellen Tinten wie Pantone-Tinten benötigen, können Sie auch hier CMYK-Farbwerte einbeziehen. Ich beschrifte auch gerne die Farben, wenn sie sehr spezifische Funktionen haben. Also, dieser ist für Navigationselemente verwendet werden. Dieser wird für Hover-Zustände verwendet, und was auch immer Sie brauchen. Sie können Ihr Farbfeld auch als ASE-Datei exportieren und es zusammen mit Ihrem Mockup für andere Designer und Entwickler zum Download senden . So können Sie Ihre Musterpalette hier in Illustrator öffnen. Wenn Sie diesen Ordner Ihrer Farbfelder auswählen und zu Gespeicherte Musterbibliothek als ASE wechseln, können Sie ihn dann Bikebook.ase nennen, und Sie können einen Link zu dieser Datei in Ihrem Styleguide hinzufügen, können Sie ihn an andere Designer senden oder was auch immer Sie wollen. Wenn Sie keinen Mock haben, können Sie stattdessen die Adobe-Farbwebsite verwenden, um Ihre Palette zu exportieren. Denken Sie daran, dass Entwickler wirklich, wirklich zu schätzen wissen, wenn Sie ihnen nur die Farbwert-Zahlen geben. Es wird die Dinge viel schneller für sie machen, so dass sie nicht in Photoshop oder Illustrator gehen müssen, oder was auch immer App, die Sie verwendet haben, und erhalten die Farbnummern für sich selbst. Spectrum kann das auch für Sie erledigen. Versuchen Sie, Ihre Palette zu exportieren und als CSS-Datei zu speichern. Es gibt verschiedene Optionen hier für CSS, für Sass, PNG. Wir ziehen diese Datei in unseren Texteditor. Sie können sehen, dass alle Farben einsatzbereit sind. Wenn Sie grundlegende HTML und CSS kennen, können Sie einfach Ihren eigenen funktionalen Styleguide erstellen, der die beste Option ist. Sie können an dem Leitfaden mit anderen Entwicklern zusammenarbeiten und ihn immer auf dem neuesten Stand halten , wenn sich etwas ändert oder neue Markenfarben hinzugefügt werden. Ich mag diesen grundlegenden Leitfaden von MailChimp , den sie auf ihrer Website veröffentlicht haben. Es ist einfach, aber es wird die Arbeit erledigt. Alle Farben sind aufgelistet. Sie können den Farbcode kopieren oder die ASE herunterladen , um sie in Illustrator oder Photoshop zu laden. Also, hoffentlich, haben Sie inzwischen eine Menge über Farbe gelernt, und nicht nur für das Web, sondern für Design und Illustrationsarbeit, die Sie vielleicht auch tun. Eines der größten Dinge, die ich nach dieser Klasse betonen kann, ist, dass die Wahl der Farbe eher eine Kunst als eine Wissenschaft ist. Es sei denn, Sie haben bereits ein erstaunliches Auge für die Auswahl von Paletten, die einfach zusammen gehen , wird es viel Übung brauchen, um zu verbessern, genau wie alles andere im Design. Joseph Alvarez war auch ein sehr großer Gläubiger. Er brachte seine Schüler dazu, zu lernen, indem er es tatsächlich tat. Tatsächlich setzen Farben nebeneinander und sehen, wie sie interagierten. Es ist nicht wirklich genug, nur die Wissenschaft und Theorie dahinter zu lernen. Du musst es nur tun. Wenn Sie nicht die Chance haben, so oft mit Farbe zu arbeiten, versuchen Sie es auf andere Weise in Ihren Tag zu passen, auch wenn es bedeutet, extra hart darüber nachzudenken, ein Outfit zusammen zu werfen. Denken Sie darüber nach, wenn Sie zu Hause Renovierungsarbeiten machen, Ihre Wohnungen dekorieren oder wenn Sie in einen Laden gehen. Denk die ganze Zeit darüber nach. Starten Sie ein kleines Pinterest-Board der Farbinspiration. Schnappen Sie sich einfach Fotos von Farbschemata, die Sie wirklich mögen, und werfen Sie dann einen Blick darauf und versuchen zu verstehen, warum es zusammen gut aussieht. Vergessen Sie nicht, dass es völlig in Ordnung ist, Werkzeuge zu verwenden, um Ihnen mitzuhelfen. Dafür sind sie da. Wenn Sie mit Ihrem Projekt nicht zufrieden sind, kommen Sie zu einem späteren Zeitpunkt zurück. Kommen Sie in einer Woche oder einem Monat wieder darauf zurück , und schauen Sie es wieder mit einem klaren Verstand an. Sie könnten genau sehen, warum eine bestimmte Farbe Sie belästigt hat, und Sie können es vielleicht sofort beheben. Das ist alles Teil des kreativen Prozesses. Also, ich hoffe, Sie haben Spaß mit Ihren neuen Farbfähigkeiten, und danke für das Nachfolgen. 12. Entdecke Design auf Skillshare: Art und Weise.