Farbrad I: Design zusammenhängender Paletten

1. Trailer: Im ersten Teil dieser Serie über Farbe im Web lernen wir die ersten Schritte, um eine harmonische Palette für eine Website zu schaffen. Sie beginnen mit dem Kundenbrief, um genau wie ein echtes Projekt zu folgen. Wir arbeiten für eine fiktive Firma namens Bike Book. Ein Fahrradverleih mit einem Twist. Da wir uns nur auf die Farbe konzentrieren, wird Ihnen das Website-Mark-up zur Verfügung gestellt. Alles, was Sie brauchen, ist eine Kopie von Photoshop oder Illustrator, um den Lektionen folgen zu können. Wir werden grundlegende Farbbegriffe überprüfen, Forschungstipps lernen, über Farbbotschaft und -bedeutung sprechen und verstehen, wie Sie geeignete Farben für Ihr Publikum auswählen können. Dann springen wir hinein und erstellen unsere Paletten basierend auf den Grundfertigkeiten, die wir gelernt haben. Diese Klasse richtet sich sowohl an Anfänger, die ihre Farbkenntnisse verbessern möchten, erfahrene Designer, die ihren Farbworkflow perfektionieren möchten. Am Ende der Klasse haben Sie zwei harmonische Pellets für Ihr Projekt, und Sie werden bereit sein, zur zweiten Klasse zu gehen, wo wir mehr über Farbzugänglichkeit, Tests, Styleguides und wie Sie unsere Palette im Bike implementieren Buchen Sie Webseite. 2. Einführung in Farben: He, Jungs. Vielen Dank, dass Sie sich für meine Skillshare angemeldet haben. Dies ist eigentlich eine zwei-Klassen-Serie, über Farb-Workflow im Webdesign. Also, die erste Klasse wird sich auf die Entwicklung einer Farbpalette für eine Website konzentrieren und die zweite Klasse, die Sie hoffentlich auch tun, wird sich darauf konzentrieren, Ihre Palette tatsächlich in einem Website-Design zu implementieren. Also, die gute Nachricht ist, dass das Design bereits für Sie erledigt ist. Also, für diese Klassen, werden wir uns nur auf Farbe konzentrieren. Ich denke, einer der Gründe, warum viele Designer mit Farbe kämpfen, ist, weil sie dazu neigen, es einfach im laufenden Betrieb zu machen, während sie am Layout arbeiten oder versuchen, Fotos zu holen oder nach der perfekten Schrift zu suchen. Du weißt, wie es ist. Sie sind einfach versucht, Farbe in den ganzen Weg zu werfen, ohne viel Planung im Voraus. nur, dass du definitiv nicht allein in deinem Kampf bist. Es ist völlig normal und ich hoffe, dass Sie diese Klassen in Ihren Projekten nützlich finden. Am Ende dieser Klasse haben Sie zwei funktionierende Farbpaletten, und am Ende der zweiten Klasse nehmen Sie eine dieser Paletten und implementieren sie in das Design. Also, bevor wir einspringen, möchte ich einige grundlegende Farbbegriffe überprüfen, mit denen ihr alle vertraut sein solltet. Viele von euch werden diese bereits kennen und das ist völlig cool, aber eine schnelle Überprüfung wird nicht schaden vor allem, da ich diese während des Kurses verwenden werde. Also, Farben tatsächlich durch unterschiedliche Wellenlängen des Lichts erzeugt. Wenn diese Wellenlängen von einer Oberfläche reflektiert oder als Licht emittiert werden, sie von unserem optischen System als Farbe interpretiert. Die längsten Wellenlängen sind Reds, die kürzesten Wellenlängen sind Veilchen und alle anderen Wellenlängen bilden die Farben dazwischen. Die Fähigkeit, zwischen Farben zu unterscheiden, hängt von drei Attributen ab: Farbton, Sättigung und Helligkeit. Also, Farbton ist eine Farbeigenschaft und ist, worauf wir verweisen, wenn wir sagen, dass etwas rot , gelb, grün, blau oder lila aussieht , gelb, grün, blau oder lila wie die Farben, die wir in einem Regenbogen beschreiben würden. Sättigung bezieht sich auf die Stärke eines Farbtons, wobei der gesättigteste Farbton die reinste Farbe ist und die am wenigsten gesättigte Farbe grau erscheint. Leichtigkeit wird auch als Wert bezeichnet und bezieht sich auf die Helligkeit oder Dunkelheit der Farbe und wird durch Zugabe von Weiß oder Schwarz erreicht. Schatten wird durch Zugabe von Schwarz erreicht, um die Dunkelheit zu erhöhen , und eine Tönung wird durch Hinzufügen von Weiß erreicht, um die Helligkeit zu erhöhen. Also, Farben wie Braun, sie sind eigentlich dunklere Schattierungen von Orangen und Gelb und Farben wie Rosa sind eigentlich hellere Töne von Rot. Also, denken Sie zurück, als Sie ein Kind in der Schule waren und Sie wahrscheinlich gelernt, dass rot und blau und gelb, waren die Farben, die alle anderen Farben ausmachten. Richtig? Nun, es ist eigentlich ein bisschen spezifischer als das. Sie sind das, was wir Cyan, Magenta und Gelb nennen. Sie sind nicht ganz gleich. Diese Farben mit dem Zusatz von Schwarz, bilden das subtraktive Farbmodell, das Tintenbasis ist. Es wird also subtraktiv genannt, weil die Tinte tatsächlich Lichtmenge subtrahiert, die von einem gedruckten Blatt reflektiert wird. Es wird weit verbreitet im Offsetdruck verwendet und wir werden heute nicht tiefer in das eingehen , denn als Webdesigner lebt unsere Arbeit im additiven Farbmodell. Das additive Farbmodell ist lichtbasiert und besteht aus roten, grünen und blauen Primärfarben und sie mischen sich zusammen, um das gesamte Spektrum zu schaffen. Also, Computer-Displays, Fernseher, Projektoren, Tablet-Scanner, Digitalkameras das sind alle RGB-Geräte. Also, hier ist eine ziemlich erstaunliche Tatsache von Dr. Jay Knights, der ein Farbenvisionsforscher an der University of Washington ist. ein paar Jahren erklärte er, dass die durchschnittliche Person etwa 1 Million verschiedene Farbtöne unterscheiden kann und manche Menschen noch mehr als das unterscheiden können. Ich mag es, das ist der Grund, warum Farbe für so viele von uns ein so schwieriger Teil des Designs sein kann und es ist schwer zu wissen, wo man manchmal anfangen soll. Also, in der nächsten Lektion werde ich Ihnen beibringen, wie Sie tatsächlich Ihre Optionen eingrenzen, um die Dinge viel weniger beängstigend zu machen. 3. Das Projekt: Also, lasst uns über das Projekt reden , an dem ihr arbeiten werdet. Wir werden eine Farbpalette für ein fiktives Startup namens Bike Book entwickeln. Das Ziel von Bike Book ist es, einen Fahrradverleih zu starten, der in New York, San Francisco und Portland beginnt San Francisco und Portland und später in andere Städte expandiert. Bike Book ist ein bisschen anders als der durchschnittliche Fahrradverleih Shop. Es trägt nicht eine Vielzahl von Fahrrädern, nur solche, die stilvoll, einfach sind und gut aussehen, wenn Sie sie fahren. Sie zielen auf die jüngere modebewusste Art von urbanen Fahrern ab, anstatt Gelegenheits-Touristen, die nur nach einer Möglichkeit suchen, die Stadt zu sehen. Einige der Fahrräder, die sie mieten, stammen von der Mission Bicycle Company, PUBLIC-Bikes, und sie haben auch einige restaurierte Oldtimer Bikes. So können Kunden ein Fahrrad in einer Stadt ihrer Wahl auf ihrer Website unter bikebook.me vorbuchen , was eigentlich keine echte URL ist. Dann konnten sie das Fahrrad aus dem Laden abholen und es am Ende der Mietdauer zurückgeben. Also, ich möchte, dass ihr vorbeigeht und den Brief selbst liest. Sie können es auf der Unterrichtsseite zusammen mit den anderen Vorlagen herunterladen , die wir für dieses Projekt benötigen. Sie könnten also denken, dass das Lesen der Kurzbeschreibung nicht wirklich notwendig ist, aber es ist, und es sollte der erste Schritt in jedem Projekt sein, das Sie tun. Es kann wirklich verlockend sein, sofort auf einen Computer zu springen und zu experimentieren, aber wenn Sie tatsächlich den Brief zuerst lesen, erhalten Sie eine bessere Vorstellung davon, wonach Ihr Kunde sucht. Ich würde sogar empfehlen, den Brief zu lesen und Ihre Forschung an einem Tag zu machen und dann, warten Sie bis zum nächsten Tag, nachdem Sie Zeit hatten bis diese Informationen einsinken, bevor Sie sich in die lustigen Sachen. Wenn es etwas in der Kurzbeschreibung gibt, über das Sie sich nicht sicher sind, ist jetzt die Zeit, den Kunden um Klärung zu bitten. Fragen stellen, das Projekt so gut wie möglich in diesem Stadium zu verstehen , wird definitiv dazu beitragen, Missverständnisse in den späteren Stadien zu vermeiden. Sie werden besser vorbereitet und selbstbewusster aussehen, wenn Sie eine solide Begründung hinter Ihren Entscheidungen haben. Ich wette, viele von euch waren mit einem Kunden da und sie wollen dieses schöne Blau, das Sie wählen, zu etwas wie leuchtend rot ändern das Sie wählen, zu etwas wie leuchtend , weil es ihre Lieblingsfarbe ist oder so. Aber wenn Sie in der Lage sind, den spezifischen Grund zu erklären, warum Sie sich für dieses Blau entschieden haben, werden Sie eine viel einfachere Zeit haben , diesen Kunden zu überzeugen, tatsächlich Ihrem Know-how zu vertrauen. Also, sonst wird es nur Ihre Lieblingsfarbe im Vergleich zu ihrer Lieblingsfarbe sein und sie werden jedes Mal gewinnen. Also, gehen Sie weiter und lesen Sie die kurze und werfen Sie einen Blick auf das mitgelieferte Website-Design und werfen Sie einen Blick auf das Logo, wenn Sie fertig sind. 4. Richtlinien für das Branding: Das erste, was Sie tun sollten, wenn Sie ein neues Projekt starten, ist, nach bestehenden Markenrichtlinien zu suchen , die der Kunde haben könnte. Branding Richtlinien haben manchmal unterschiedliche Namen. Die meisten Webdesigner und Entwickler nennen sie Styleguides, und wenn Sie wie ich aus einem Druckhintergrund kommen, können Sie den Begriff Graphic Standards Manual verwenden. Also, diese Handbücher können tatsächlich reichen von super einfach zu sein und nur definieren, wie und wo ein Logo verwendet werden kann, aber andere Handbücher können viel detaillierter sein. Also, wir werden mehr über die in der zweiten Klasse reden. Dies ist ein Beispiel von Skype. Sie haben ihre Marken Farben klar definiert. Wenn Sie also ein Designer sind, der für Skype arbeitet, werden Sie ein ziemlich starkes Argument für die Einführung neuer Farben benötigen , wenn sie nicht Teil dieses Leitfadens sind. Also, in unserem Fall, alles, was wir haben, ist das Bikebook-Logo in Graustufen, und wenn Sie die kurze lesen, werden Sie erfahren, dass das Logo nicht braucht, um schwarz oder grau zu verwenden. Sie können es so verwenden, wie Sie es am besten finden, solange Sie nicht die Struktur des Logos selbst bearbeiten. Diese Situation macht unsere Farbwahl ein wenig schwieriger, da wir keine Richtung haben, aus der wir arbeiten können. Aber ich werde Ihnen zeigen, wie Sie in der nächsten Lektion einen Ausgangspunkt finden. 5. Farbbotschaft und deren Bedeutung: Es ist also wichtig, sich daran zu erinnern, dass Farbe eine unglaublich leistungsfähige Kommunikationsmethode ist. Und ich würde sagen, dass die meisten Menschen nicht wirklich erkennen, welche psychologischen Auswirkungen es auf sie haben könnte. Vielleicht haben Sie Geschichten über die Tricks gehört, die Innenarchitekten und Architekten tun können, um zu beeinflussen, wie sich Menschen in einem Raum oder Geschäft verhalten. So verwenden Fast-Food-Restaurants manchmal Orangen, Rot- und Gelbtönen in ihrem Inneren, um die Umwelt tatsächlich ein wenig unangenehmer zu machen, und es hilft, Menschen in Bewegung zu halten, um Platz für neue Kunden zu schaffen. Also, ich mag dieses Zitat von Manet wirklich. „ Farbe ist eine Frage des Geschmacks und der Empfindlichkeit', und es ist wahr. Farbe trägt alle Arten von Nachrichten und manchmal widersprechen sie sich sogar völlig. Aber es gibt Zeiten, in denen bestimmte Paletten besser zu verwenden sind als andere. Blau ist eine Farbe, mit der wir uns traurig oder deprimiert fühlen, und wir sehen rot, wenn wir wütend sind, und wir können grün vor Neid sein, wenn wir eifersüchtig sind. Aber zur gleichen Zeit wird Blau oft mit Technologie und Kommunikation oder Corporate Professional Industrien verbunden und Rot ist die Farbe der Liebe und Leidenschaft. Und Grün kann positive Einstellungen, Natur und gute Gesundheit darstellen . Wir müssen also die Botschaft herausfinden, die wir in diesem Projekt vermitteln müssen. Wie soll sich das Publikum fühlen? Welche Art von Adjektiven beschreiben dieses Gefühl eigentlich? Sie werden also die meisten Antworten im Tonabschnitt der Kurzbeschreibung finden. Also, ich habe eine Kopie des Auftrags hier und ich brauche euch, um zur Kenntnis zu nehmen, dass es ein bisschen anders ist als eure. Also, ich möchte, dass ihr eure Arbeit auf der Grundlage eurer Informationen in der kurzen Arbeit macht. Also sollten wir am Ende der Klasse mit einigen ziemlich anderen Ergebnissen enden. Deswegen kann ich nicht genug betonen, dass es für euch wichtig ist, es zu lesen. Also, hier ist der Tonabschnitt in meinem Brief. BikeBook versteht sich als entspannt, komfortabel und cool. Denken Sie an faule Wochenendfahrten zum Brunch und hängen Sie in Parks. Fahrradfahren von BikeBook sollte sich wie ein Mitglied eines exklusiven Clubs fühlen. Ich suche gerne nach Schlagwörtern in der Kurzbeschreibung und notiere sie in mein Skizzenbuch oder unterstreiche sie. Also, wir haben Dinge wie entspannt, komfortabel und cool, faul, vielleicht entspannt ein besseres Wort da, exklusiv. Das ist ein wirklich guter. Ich werde weiter durch die anderen Abschnitte in der kurzen gehen und mehr zu meiner Liste hinzufügen und ich möchte, dass ihr das Gleiche tut, bevor ihr weitergeht. 6. Zielgruppe: Jetzt ist es Zeit, über unsere Zielgruppe zu sprechen, die eine sehr spezifische Gruppe von Menschen ist, die durch Werbung vom Kunden gezielt werden . Eine Zielgruppe besteht in der Regel aus Demographie wie Alter, Geschlecht, Kultursprache, Beschäftigung, finanzieller Status und vieles mehr. Denken Sie daran, wenn Sie die Zielgruppe in Ihrem Projekt in Betracht ziehen , nicht alle mit dem gleichen Pinsel zu malen. Es ist wahrscheinlich keine gute Idee zu lesen, dass die Zielgruppe Teenager-Mädchen oder so etwas ist und automatisch alle Ihre Sachen rosa machen. Das musst du wirklich vorsichtig sein. In diesem Sinne können wir darüber sprechen, wie Farbe Ihr Publikum wirklich beeinflussen kann. Alter ist wirklich groß. Also, wenn Sie etwas für Kinder oder Pre-Teens entwerfen. Ihr Farbschema wird wahrscheinlich viel anders aussehen als etwas, das Sie für Senioren entwerfen würden. Du wirst wahrscheinlich etwas etwas auffälligeres zeigen wollen. Nicht unbedingt super verrückt, aber nur spannender und auffälliger, als wenn Sie etwas für ältere Leute entwerfen würden. Kulturelle Unterschiede sind auch etwas zum Nachdenken. Purple ist hier ein wirklich gutes Beispiel. So könnte Purpur in den Augen der westlichen Kulturen mit dem Königtum verbunden sein, aber es hat auch einige starke Konnotationen mit Tod und Trauer und einigen katholischen europäischen Kulturen. McDonald's ist ein großartiges Beispiel für ein Unternehmen, das ihre Marketingstrategie und -design für verschiedene Länder anpasst . Hier sind drei verschiedene Farbschemata der aktuellen McDonalds Websites, Kanada, Japan und Frankreich. Die französische ist definitiv eine riesige Abfahrt. Sie sollten auch über das Einkommen und den Beschäftigungsstatus Ihres Publikums nachdenken. Ist ein Produkt, das wir für einen Luxusartikel oder einen Luxusservice entwerfen? Oder ist es für jeden erschwinglich, aber es muss immer noch aussehen, als wäre es ein bisschen teuer. Es kann durchaus angebracht sein, das billig aussehen zu lassen, wenn das das beabsichtigte Ziel ist, das bedeutet nicht, dass es hässlich aussehen muss. Also, denken Sie einfach an Unternehmen wie Target. Ich denke, Target macht einen wirklich guten Job, wie ein erschwingliches Geschäft auszusehen , aber sie haben immer noch gutes Design und natürlich ist IKEA die gleiche Art und Weise. Also werde ich noch einmal einen Blick auf meinen Brief werfen und die Zielgruppe lesen und nochmals einige Keywords zur Kenntnis nehmen, die ich für hilfreich halte. Ich möchte, dass ihr das Gleiche macht, bevor ihr weitergeht. 7. Recherchen bei der Konkurrenz: Also, Sie erstellen Ihre Liste Wörtern und Inspiration für Ihre Palette und Sie haben vielleicht bereits einige Farben im Auge, die Sie denken, Sie möchten in Ihrem Projekt versuchen. Aber bevor wir zu diesem Schritt kommen, wir einen Blick auf unsere Konkurrenten. Eines der schlimmsten Dinge, die passieren können, ist mit einer unglaublich ähnlichen Palette zu einem direkten Konkurrenten zu enden einer unglaublich ähnlichen Palette zu , und das kann den Kunden und Sie als Designer in Schwierigkeiten bringen. Einige Unternehmen geht tatsächlich so weit wie Copyright Farbe, Tiffany, die Schmuckfirma hat tatsächlich ihre Farbe blau Markenzeichen in den Vereinigten Staaten. Ist eine tatsächliche Pantone-Nummer, Nummer 1837, aber sie ist nicht in irgendwelchen Pantone-Musterbüchern gedruckt. Was ich für ziemlich verrückt halte. Cadbury Purple ist auch Markenzeichen, UPS braun, T-Mobile rosa, und natürlich Coca-Cola, aber das ist nicht wirklich eine Überraschung. Glücklicherweise hat unser Kunde die meisten Recherchen für uns durchgeführt und sie haben einige Konkurrenten in der Kurzbeschreibung aufgelistet. Also werde ich einen Blick auf nur einen werfen, einen New Yorker Konkurrenten namens RentBike NYC. Also, der erste Eindruck von dieser Website ist, ist es offensichtlich sehr grün. Ich werde mich nur kurz umsehen, definitiv viel Grün. Wahrscheinlich nicht viel anderes hier in Farbe eigentlich los. Also, ich muss das im Hinterkopf behalten, dass ich wahrscheinlich nicht diesen Grünton von meiner Grundfarbe zumindest wählen werde. Also, ich möchte, dass ihr euch ein paar andere Konkurrenten in der Kurzbeschreibung anschaut. Nehmen Sie ein paar Notizen, bevor Sie auf den Spaß Teil, die tatsächlich bauen unsere Palette. 8. Farbschemata: Also, ich hoffe, ihr habt eure Recherche beendet und ihr habt sie ein wenig eintauchen lassen, bevor ihr weitergeht. Jetzt werden wir uns eingraben und lernen, wie wir unsere Farbpalette wählen. Also, was ich hier gerne mache, ist, mein Skizzenbuch zu schnappen und einen Blick auf die Informationen zu werfen, die ich über meine Zielgruppe gesammelt habe und über die Botschaft, die ich vermitteln muss. Der erste Schritt, den ich bei der Auswahl meiner Palette mache, besteht darin, zu überlegen, ob das Design heller oder weicher und gedämpfter sein sollte. Also, in meinen Notizen, habe ich Worte wie entspannt, komfortabel, cool, Premium, stilvoll. Also, diese Art von hilft mir zu entscheiden, dass die Farbe ein wenig weicher und gedämpfter sein sollte. Also, ich glaube nicht, dass ich hier viele super helle gesättigte Farben verwenden werde. Also, das hilft, meine Entscheidungen ziemlich viel einzuschränken, aber denken Sie daran, dass Sie etwas andere Wörter in Ihrem unterschiedlichen Brief haben können , besonders im Tonabschnitt. Also, achten Sie darauf, Notizen zu machen. Von hier aus können wir mit der Auswahl geeigneter Farbtöne beginnen und eine harmonische Palette aufbauen. Also, hier kann es ein wenig entmutigend werden, aber keine Sorge, es gibt Tricks und Werkzeuge, die Ihnen helfen. Also, ich werde über drei gängige Arten von Farbschemata sprechen , die Sie als Ausgangspunkt verwenden können: analagös, Triade und Split kostenlos. Analoge Kombinationen beinhalten die Auswahl einer Primärfarbe und der beiden benachbarten Farben auf einem Farbrad. Diese Art von Farben reflektieren ähnliche Wellenlängen des Lichts und sind in der Regel harmonisch. Triaden-Schemata beinhalten die Auswahl von drei Farbtönen, die gleich weit voneinander auf dem Farbrad angeordnet sind, um ein Dreieck zu erstellen. Split-Zusatzschemata beinhalten die Wahl eines primären Farbtons und zwei sekundäre Farbtöne, die neben den Farbtönen auf dem Farbrad sind. Mach dir keine Sorgen, wenn dir das noch keinen Sinn ergibt. Ich zeige Ihnen einige Tricks, die Ihnen helfen, diese Schemata nach der nächsten Lektion zum Farbkontrast zu verwenden. 9. Farbkontrast: Also, wenn einer von euch Jungs Illustratoren oder Künstler sind, werden Sie wahrscheinlich wissen, dass einer der wichtigsten Schlüssel zu einer guten Malerei effektive Verwendung von Kontrast ist. Kontrast kann den Fokus in der Hierarchie erzeugen, und er kann den Blick auf die wichtigsten Teile eines Gemäldes oder Designs lenken. Kontrast ist auch einer der wichtigsten Faktoren für die Erhöhung der Lesbarkeit für eine Person mit einer Sehbehinderung. Wir werden mehr über Sehbehinderungen in der zweiten Klasse in dieser Serie sprechen. Also, mach dir jetzt keine Sorgen darüber. Farbkontrast kann auf ein paar verschiedene Arten erreicht werden , wobei einige effektiver sind als andere. Also, ich werde euch ein paar Beispiele zeigen. Der Kontrast zwischen hellen und dunklen Farben ist das wichtigste Attribut bei der Schaffung eines effektiven Kontrastes. Versuchen Sie, in einem Design keine Farben mit ähnlicher Leichtigkeit nebeneinander zu verwenden. Sie können hier sehen, dass die roten und grünen Farben auf der linken Seite eine ähnliche Leichtigkeit haben, und sie bieten nicht genug Kontrast allein, ohne einige Anpassungen vorzunehmen. Die Version auf der rechten Seite ist viel effektiver. Der Kontrast kann auch erreicht werden, indem auf dem Farbrad ergänzende Farben wählt, die einander gegenüberliegen , aber eine Ausnahme sind natürlich Rot und Grün, was für Menschen mit Farbenblindheit Probleme verursachen kann. Wie Sie in Teil 2 erfahren, ist es am besten, diese zu vermeiden, wo immer möglich. Komplementäre Farbpaare bieten in der Regel einen besseren Kontrast als die Wahl benachbarter Farbtöne am Rad. Es gibt auch einen Kontrast zwischen kühlen und warmen Farben auf dem Farbrad. Also, wenn wir dieses Farbrad nehmen und es in kühle Farben wie Blau, Violett und Grün aufteilen , und dann vergleichen wir sie den warmen Farben wie Rot, Orangen und Gelb. Die Wahl eines dunklen Farbtons einer kühlen Farbe gepaart mit einem hellen Farbton einer warmen Farbe sorgt für einen besseren Kontrast als zwei warme Farben oder zwei kühle Farben. Der Kontrast der Sättigung tritt auf, wenn eine stumpfe Farbe neben einer intensiveren gesättigten Farbe platziert wird. Aber diese Technik ist nicht so effektiv wie heller und dunkler Kontrast, daher würde ich nicht empfehlen, sich für wichtige Informationen wie Kopieren oder Navigationselemente darauf zu verlassen . Also, wenn ihr euch die Projektdateien angeschaut habt, werdet ihr wahrscheinlich bemerkt, dass sie alle in Graustufen sind. Einer der einfachsten Tricks, um einen guten Kontrast zu erzielen besteht darin, tatsächlich in Graustufen zu arbeiten, bevor Sie überhaupt eine Farbe einführen, auch wenn Sie Ihren Gaumen bereits im Sinn haben. Wenn Sie Ihr Design in Graustufen gut aussehen lassen können, besteht die Wahrscheinlichkeit, dass es funktioniert, wenn Sie Farbe einführen, und es wird eine bessere Chance haben, den Kontrast beizubehalten, der von einem breiteren Publikum benötigt wird. Also, das ist ein Konzept für eine Website, die ich gemacht habe, und ich wusste, dass mein Gaumen Rot, Schwarz und Weiß in meinem Kopf verwenden würde , aber ich musste nicht allzu hängen an den Platzierungen und wohin all diese Farben gehen würden, während ich war am Layout arbeiten, und es hat meinen Workflow am Ende wirklich beschleunigt. Ihr Jungs schaut euch die Studie dieser Methode an, Farbe zu einem Graustufenmodell in der zweiten Klasse der Serie hinzuzufügen . Aber jetzt sind wir bereit, bei der Arbeit in die Hände zu springen. 10. Tools für Farbschemata: Also wurde mir klar, dass ich im ersten Teil dieser Klasse viel Wissen über euch abgelegt habe, und es ist völlig in Ordnung, wenn ihr es nicht sofort versteht. Farbe ist definitiv ein kompliziertes Thema und wir können alle ein wenig Hilfe bei der Auswahl unserer Farbschemata verwenden. Also, es ist absolut keine Schande, Werkzeuge zur Anleitung zu verwenden , und ich weiß, dass ich das die ganze Zeit benutze. Es gibt einige Werkzeuge da draußen, die Sie verwenden können, um Rätselraten zu minimieren, das bei der Auswahl einer Palette eingeht. Einige müssen bezahlt werden und andere sind kostenlos. Also, eine App, die ich Ihnen zeigen werde, heißt Spectrum und es ist eine kostenpflichtige App, die für macOS verfügbar ist. Ich werde Ihnen auch einen namens Adobe Kuler zeigen, der online im Browser verfügbar ist. Also, ich werde Spectrum hier öffnen und dich herumführen. Ich werde ein Farbschema erstellen, das auf den Informationen basiert , die ich in meiner Version des Briefes gesammelt habe. Also, ich will etwas ein bisschen ruhig, entspannend, cool, aber immer noch ein bisschen Premium aussehend. Ich will nicht, dass das wie eine knallige Torus-Stil-Website aussieht. Dies ist also der Hauptbereich, in dem Sie Ihre Farben bearbeiten können Hier finden Sie eine Registerkarte, auf der Sie alle gespeicherten Paletten sehen können. Spectrum kommt auch mit einigen dieser voreingestellten Paletten, mit denen Sie spielen können. Also, ich werde hier eine neue Palette erstellen und es BikeBook nennen. Ich klicke auf Bearbeiten, um zum Bildschirm zurückzukehren. Nun, das macht ein seltsames Standard-Farbschema, aber ich werde Ihnen zeigen, wie wir das schnell beheben können und es viel besser aussehen lassen. Also, hier am unteren Rand des Bildschirms können Sie Beispiele für verschiedene Farbschemata sehen, die Sie für Hilfslinien verwenden können. Also, ich werde mit etwas Einfacheres anfangen und wählen analog. Ich werde ein paar dieser Farbfelder löschen , nur um es jetzt ein bisschen einfacher zu verwenden. Jedes dieser drei Farbfelder ist also einem dieser Punkte auf dem Rad zugeordnet. Wenn Sie diese Punkte umziehen, werden sich die Farben ändern. Je weiter du sie herausziehst, desto gesättigter werden sie, und sie sehen ein bisschen wackelig aus. Aber je weiter man in Richtung Zentrum bekommt, werden sie etwas weniger gesättigt und man sieht schon , dass die Farben viel vielversprechender aussehen. Also, wenn Sie diesen Knoten herausziehen, wird er diese Auswahl erweitern und dann wird er einen größeren Farbbereich enthalten. Also, ich denke, ich will etwas etwas etwas Erdenes, vielleicht so etwas. Ich mag das. Ich denke, es ist weich und entspannend und leicht für die Augen, aber ich bin mir nicht sicher, ob ich glücklich mit diesem braun bin, so kann ich dies klicken und ich kann tatsächlich diese Schieberegler hier verwenden, um dies ein bisschen mehr braun zu machen, wenn ich mag, ein wenig rötlicher und ändern die Sättigung. Ich kann den Wert ändern. Also, wenn ich hier zurück zu meinem Tab gehe, kann ich sehen, dass es meine Palette gemacht hat. Ich kann es duplizieren, wenn ich will. Gehen Sie zurück, um diese zu bearbeiten, dann wissen wir, dass wir immer Backups haben, mit denen wir arbeiten können. Also, wenn ich Schattierungen und Anspannung jeder dieser Farben machen möchte, was ich tun werde, ist, dass ich jede dupliziere und drei von jeder Farbe machen werde. Dann kann ich anfangen zu verhandeln und eine Tönung jeder Farbe zu machen , bis ich glücklich bin. Offensichtlich wirst du mehr Zeit damit verbringen, als ich für diese Demonstration tue , aber du verstehst die Idee. Wenn Sie einen Fehler machen, können Sie immer Ihre Farbe tauschen und das war's. Wenn Sie keinen Mac haben, können Sie auch Adobe Kuler verwenden, der K-U-L-E-R buchstabiert ist. Sie können also einfach zu kuler.adobe.com gehen. Sie müssen ein Konto erstellen, wenn Sie einen Ihrer Gaumen speichern möchten, aber Sie können einfach damit spielen, wenn Sie möchten. Sie werden also feststellen, dass es auf eine sehr ähnliche Weise wie Spectrum funktioniert. Ich kann mein Farbschema oder meine Farbregel so auswählen, wie sie es nennen , und ich kann den markierten Knoten in der Mitte um das Rad ziehen, um meine Palette zu ändern. Also, eine Sache über Farbe ist, Sie können diese URL tatsächlich kopieren oder als Lesezeichen markieren und später darauf zurückkommen. Für jetzt möchte ich, dass ihr mit einem oder beiden dieser Werkzeuge spielt und eine Palette erstellt, die für die BikeBook-Website geeignet ist. 11. Verwendung von Fotos: Jetzt, da Sie eine Palette entworfen haben, werden wir eine zweite Option mit einem Foto zur Inspiration machen. Also, der Schlüssel hier ist, Fotos zu wählen, die ein offensichtliches Farbschema haben. Also, wenn das Foto unglaublich beschäftigt ist mit allen Arten von verrückten hellen übersättigten Farben passiert, wird Ihre Palatte wahrscheinlich genauso aussehen, und es wird nicht sehr hübsch sein. Also, ich werde hier den bereitgestellten Fotoordner öffnen, der auch in Ihren Dateien sein wird. Ich werde ein Foto auswählen, das meiner Meinung nach für mein Farbschema geeignet ist. Wieder möchte ich, dass mein Plan etwas gedämpft aussieht, irgendwie beruhigend. Also, schauen wir mal, was wir hier haben. Also, ich mag diesen hier wirklich. Ich denke, die Farben sehen anders aus. Ich denke, viele dieser weichen violetten Tönen und natürlichen Brauntönen in 10 Farben könnten wirklich gut funktionieren. Einige dieser anderen Fotos sind möglicherweise besser für Ihre Version des Projekts geeignet , oder Sie möchten die Farbe vollständig entfernen. Sie könnten denken, dass ein einzelnes monotone Farbfotos besser geeignet. Sie haben hier die Freiheit zu wählen, was Sie wollen, oder bearbeiten Sie die Fotos wie Sie wollen, solange Sie denken, dass es für den Kunden geeignet ist. Also, ich werde Illustrator dafür öffnen. Sie können Photoshop verwenden, wenn Sie möchten, oder Sie können sogar eine Farbauswahl verwenden und die Codes ray in ein Stylesheet einfügen. Aber ich werde Illustrator benutzen. Also, ich habe mein Foto hier platziert, mit ein paar schwarzen Farbfeldern darunter. Ich werde diese neun Farben wieder in drei Grundfarben aufteilen: eine primäre, eine sekundäre Farbe und dann eine dritte Farbe für Akzente. Also, ich werde die ersten drei Farbfelder auswählen. Ich werde nur mein Pipettenwerkzeug verwenden und anfangen, meine Primärfarbe zu proben, die ich denke, jetzt wird lila sein. Eine Sache im Auge zu behalten, wenn Sie Farben von Fotos abtasten, einige dieser Pixel auf ihre eigenen können ein wenig schlammig aussehen. Also, Sie müssen sich umschauen und ein wenig optimieren, um wirklich die Farbe zu bekommen, die Sie brauchen. Also, ich denke, das ist okay. Wählen Sie meine sekundäre Farbe auf die gleiche Weise. Erkunden Sie einfach ein wenig um das Foto. Sieht eigentlich ziemlich gut aus. Dann passiert für meine Akzentfarbe im Rest des Fotos nicht viel in Bezug auf einen dritten Farbton. Also, ich werde ein Grün für unsere Akzentfarbe wählen. Also, ich werde nur hier wechseln und nach einem Grün suchen, das meiner Meinung nach angemessen wäre. Jetzt können wir wieder zurückgehen und dasselbe für jeden tun. Machen Sie einen Schatten. Machen Sie einen helleren Farbton, bis wir genau das haben, was wir brauchen. Nun, ich werde euch sagen, dass ihr auch mit dieser Technik betrügen und Spektrum oder Farbe verwenden könnt , um ein Foto zu laden, und es wird die Palette für euch extrahieren. Also, machen Sie weiter und spielen Sie mit diesen Techniken herum und erstellen Sie eine zweite Palettenoption, die Ihrer Meinung nach für Ihr Projekt geeignet ist. 12. Tipps und Tricks: Jetzt ist ein guter Zeitpunkt, um euch ein paar zusätzliche Tipps und Dinge zu geben , die bei der Auswahl der Farbe zu beachten sind. Das erste ist etwas, das ich im Laufe der Jahre gelernt habe , während ich Malerei und Illustration studiert habe. Das Gleiche gilt im Design. Schatten sind nicht schwarz. Es ist in Ordnung, einen grauen oder schwarzen Schatten zu verwenden, wenn Sie einen grauen oder weißen Hintergrund haben. Das sieht ganz gut aus. Aber sobald Sie einen Schatten über einem farbigen Hintergrund hinzufügen, sollten Sie die Farbe des Hintergrunds probieren und mit Ihrem Schwarz mischen, eine neue benutzerdefinierte Farbe für Ihre Palette zu erstellen. Hier erfahren Sie, was Sie möglicherweise versucht haben, wenn Sie Farbtöne in Photoshop oder Illustrator's Farbauswahl auswählen. Sie können eine Farbe auswählen und diese dunkleren Farbtöne indem Sie einer vertikalen Linie nach oben und unten folgen. Aber in Wirklichkeit sehen Glanzlichter und Schatten viel natürlicher aus, wenn Sie sie im Farbwähler auf einer allmählichen Kurve in Richtung Schwarz wählen. Eine andere Sache, über die Sie nachdenken sollten, ist, ein neues Farbfeld für den Textkörper in Ihrer Palette hinzuzufügen . Also, anstatt Ihren Körpertext zu 100 Prozent schwarz zu machen, versuchen Sie es zu 80 Prozent schwarz oder 90 Prozent schwarz, um es ein wenig weniger hart für die Augen zu machen. Wir werden mehr über Kontrast in der zweiten Klasse sprechen, aber ein Tipp wie dieser ist gut im Voraus zu denken. Denken Sie schließlich darüber nach, Ihre Farbauswahl komplett offline zu nehmen. Viele von euch haben vielleicht keinen Zugang zu einem Pantone-Muster, was in Ordnung ist, weil die meisten von ihnen sowieso für Druckdesign verwendet werden sollen. Aber wenn ihr Leute eine Menge Gruppenbrainstorming macht, oder vielleicht habt ihr während eurer Recherche eine Menge Stimmungsbretter zusammengestellt, geh ein paar Farbchips in der Lackiererei abholen. Ich meine nicht, sie alle zu nehmen, aber wenn es ein paar gibt, die Sie mögen, bringen Sie sie zurück ins Offiziersstudio und schneiden Sie sie ab und fangen Sie einfach an, mit ihnen zu spielen. Gehen Sie durch Aufzeichnungen, Zeitschriften, gehen Sie in einen Stoffladen. So viele Stoffdrucke in Mustern sind ideal für Farbinspiration. Man weiß nie, was man sich einfallen könnte, wenn man sich einfach vom Computer trennen kann. 13. Aufbau deiner Palette: Also, ich habe meine Farbkonzepte den Kunden gezeigt, indem ich die Farben in das eigentliche Modell des Website-Designs am Anfang, das ich schnell erfuhr, war eine schreckliche Idee. Es gibt so viele Dinge, die schief gehen können. Wenn Sie Ihrem Kunden zwei oder drei verschiedene Website-Designs zeigen und jedes Design ein anderes Farbschema hat, können Sie so ziemlich garantieren, dass der Kunde das Website-Design mit der Farbe wählen wird , die ihnen am besten gefällt, auch wenn der andere Websites haben ein besseres Design insgesamt. Deshalb zeige ich meinen Kunden gerne im Vorfeld meine anfänglichen Farbideen. Lange bevor sie irgendein Layout sehen. Sie möchten, dass der Kunde sich nur auf Farbe konzentriert, ohne von etwas anderem beeinflusst zu werden, wie Fotografie, fehlende Inhalte, nicht zu verstehen, was Lorem ipsum ist, oder irgendetwas anderes. Das ist es, was ihr jetzt für mich tun werdet. Für Ihr abschließendes Projekt in dieser Klasse möchte ich, dass Sie Ihre beiden Paletten nehmen, zwei verschiedene, die, die Sie ausgewählt haben, indem Sie recherchieren und experimentieren, und sie in der Skill-Share-Community für Feedback posten. Wenn Sie sie posten, möchte ich, dass Sie tatsächlich erklären, warum Sie jedes Farbschema gewählt haben. Sie auch keine Angst, Ihren Prozess zu zeigen. Sie können alles zeigen, was Sie zur Inspiration verwenden, Sie können Ihre Skizzenbücher zeigen, was auch immer. Aber zeigen Sie die Paletten nicht im Bikebook-Design. Das wird Teil der zweiten Klasse sein. Fühlen Sie sich frei, Ihre Farbauswahl in jeder Art und Weise zu zeigen, die Sie wollen. Aber wenn Sie nicht sicher sind, wie, schauen Sie sich dieses Paletten-Arbeitsblatt an, das ich für Sie aufgenommen habe. Also, ich mag zu zeigen, wie das Logo aussehen könnte, und wie es umgekehrt aussehen könnte, in einer hellen Farbe über einem dunkleren Hintergrund, und natürlich möchte ich Beispiele für jedes Farbfeld zeigen, und die Spannung in den Schattierungen von jedem. Am Ende des Feedback-Prozesses sollten Sie eine Farbpalette haben, mit der Sie zufrieden sind, bevor Sie weitermachen. Ich hoffe auf jeden Fall, dass ihr mir in Klasse zwei beitreten werdet. 14. Entdecke Design auf Skillshare: Art und Weise.