Visuelle Sprache erstellen (UI Bootcamp Woche 10)

1. Einführung: Diese Woche werden wir uns bemühen, eine visuelle Sprache für unsere Websites oder unsere Webanwendung zu erstellen eine visuelle Sprache für . Wir werden damit beginnen, Fotos auszuwählen , die sich gegenseitig ergänzen und gut zusammenarbeiten und wie wir diese Fotos auch ein wenig bearbeiten können . Wir identifizieren die Formen, die bereits in Ihrer Schrift, Ihrem Logo oder anderen Elementen vorhanden sind, damit wir diese Formen für andere Elemente wiederverwenden oder verwenden können . Wir wählen einen Illustrationsstil, der die vorhandenen Formen ergänzt, die wir haben. Wir werden dann versuchen, Texturen herauszufinden, die auch gut zu diesem Illustrationsstil und diesen Mustern passen. Wir werden uns die Farbverläufe ansehen und wie Sie einen effektiven Farbverlauf auswählen oder auswählen, um mit Ihren Entwürfen zu arbeiten. Und dann werden wir schließlich eine Reihe von Icons auswählen und darüber sprechen, wie wir bestehende Sets ändern können , um mit unseren Designs zu arbeiten , anstatt immer ein ganz neues Set zu erstellen. Die visuelle Sprache wird normalerweise sehr, sehr subtil auf einer Benutzeroberfläche oder einem Website-Design sein, kann aber wirklich Persönlichkeit verleihen und sie ist immer da. Also müssen wir uns dessen bewusst sein und damit arbeiten, anstatt dagegen. 2. Fotografien: Sie haben also Ihre Farben und Ihre Komposition ausgearbeitet, aber sobald Sie ein Foto hinzugefügt haben, wird es alles ändern. Es hat seine eigenen Farben und es hat irgendwie auch seine eigene Komposition. Wenn Sie keinen professionellen Fotografen oder ein gutes Fotoset haben , lohnt es sich wahrscheinlich, überhaupt keine Fotos zu verwenden. Sie können eine Reihe von Stockfotos relativ günstig kaufen , wie die, die ich auf dem Bildschirm habe. Aber sie werden nicht viel Charakter haben. Sie werden eine sehr standardmäßige Farbpalette verwenden, sehr, sehr Standardkompositionen. Es wird nicht zu viel Einzigartiges daran geben. Und wenn Sie kein verrücktes Geld für einen professionellen Fotografen ausgeben können , wird Ihnen dies einige Probleme bereiten. Hier. Ich habe fast zufällig neun Bürofotos ausgewählt zufällig neun Bürofotos , die einfach nicht zusammenarbeiten. Diese beiden haben einen ähnlichen Stil, aber sie sind viel zu orchestriert. Einer von ihnen posiert direkt für die Kamera und das andere Bild fühlt sich einfach unaufrichtig an. Es fühlt sich billig, falsch und nicht sehr vertrauenswürdig an. Hier ist noch ein Foto von unserem Set. Das sieht viel besser aus. Es ist, als wäre ein Action-Shot mitten in einem wichtigen Aufruf. Es fühlt sich glaubwürdiger an, als wäre hier eine wirklich fleißige Person. Das nennt man Scharfschützenfotografie. Es sieht so aus, als wüssten sie nicht , dass die Kamera da ist. Und vielleicht können wir ein Set mit diesem speziellen Stil wie diesem bauen . Eine weitere davon hier, das könnte meiner Meinung nach ein ziemlich schönes Set sein, aber wir würden mehr Fotos in diesem Stil finden wollen. Vielleicht könnten wir eine Art Leute schaffen, die reden, Leute, die sich im Büro unterhalten. Und wieder hat es ein echteres Gefühl. Es sieht nicht so aus, als würden sie für die Kamera posieren. Leider wird diese Reihe von Fotos wahrscheinlich auf keiner Website gut aussehen , weil es ziemlich chaotisch ist. Auf dem Bild ist viel los und wir haben lange versucht, das Chaos und die Konformität und unsere Seite in Einklang zu bringen . Wir wollen keine zusätzliche Chaosschicht an einem Ort hinzufügen , an dem es nicht unbedingt gut aussieht. Wir könnten jedoch eine Reihe von Fotos in diesem Stil sammeln , aber zuschneiden. Es gibt also einen einzigen zentralen Punkt von Interesse, oder zumindest weniger auf dem Bild. Indem wir einen bestimmten Stil oder Regeln für das Beschneiden der Fotos haben, können wir dazu führen, dass sie sich ausgerichtet fühlen, ohne tatsächlich Fotos bekommen zu müssen , die sich ursprünglich ausgerichtet anfühlten. Beide Fotos haben ein ähnliches visuelles Gimmick. Sie haben diese starken sich wiederholenden Linien, die Linien als sehr übliche Technik in der Fotografie wiederholen . Und obwohl diese Fotos dadurch wirklich cool aussehen und sie gut zusammenarbeiten lassen, könnte es ein zu starkes visuelles Gimmick sein , um auf unserer Website unter diese starken vertikalen Linien zu gelangen , könnte es sein ziemlich viel mit unserem bestehenden Raster zu spielen. Es wäre besser, eine Reihe von Fotos mit einer viel subtileren Version dieser Fototechnik zu erstellen mit einer viel subtileren Version . Beide Fotos haben durchgehende Linien und sie haben auch den zusätzlichen Bonus, dass beide Fotos auf eine zentrale Säule in der Mitte angewiesen sind. Es wäre viel einfacher, diese Fotos in unsere bestehende Komposition einzuarbeiten diese Fotos in unsere bestehende Komposition und diese zentrale Linie dennoch irgendwie an unserem bestehenden Raster auszurichten . Also abseits der Optionen, die ich mir ausgedacht habe, um aus den Fotos, die ich hatte, ein Set zu erstellen. Ich habe mich für diesen Stil entschieden. Normalerweise haben wir ungefähr 2,5 Personen in einem Gespräch, die nicht die Kamera mit einer niedrigen Schärfentiefe E schauen, der Hintergrund ist verschwommen. Im Hintergrund herrscht weniger Chaos . Und die Posen sehen natürlich aus, dass sich dies wie ein einigermaßen Premium-Satz von Fotografien anfühlt. Also bin ich wieder rausgegangen und habe einige Stockfotografien-Websites durchsucht, und ich habe vier der Fotos gefunden und beschnitten , dass sie denselben Stil haben. Sie haben alle zwei Personen auf dem Bild. Keiner der Leute schaut direkt in die Kamera oder posiert. Sie alle haben eine geringe Schärfentiefe und befinden sich alle tief in einem wichtigen Gespräch. Das Problem ist, dass sie nicht alle gleichzeitig im selben Büro aufgenommen wurden. Ein Teil des Weißabgleichs ist also falsch. Es fühlt sich an, als gäbe es unterschiedliche Beleuchtung auf den verschiedenen Bildern. sich keine Sorgen, wenn Sie kein Fotoexperte sind , ich auch nicht. Aber was ich hier gemacht habe, ist, dass ich gerade den Weißabgleich angepasst und einen etwas kühleren Weißabgleich gemacht habe. Ich habe ein paar blaue Untertöne hinzugefügt. Es repariert nicht alles, aber es war sehr einfach und jetzt fühlen sich alle Bilder ein bisschen einheitlich an. Es ist natürlich nicht besonders interessant und es kann sein, nicht besonders interessant und es dass dies nicht meine Branding-Farben sind. Ich weiß es nicht für diese exakten Fotos. Versuchen wir es noch einmal, diesmal aber mit einem wärmeren Weißabgleich. Diesmal fügen wir also ein paar gelbe Untertöne hinzu. Das sieht also gut aus, aber ich denke, ich kann es ein bisschen interessanter machen. Was ich hier gemacht habe, ist, dass ich die Schatten abgekühlt und die Highlights aufgewärmt habe. Es nennt sich Split-Toning. Ich habe auch einen subtilen violetten Farbton hinzugefügt. Vielleicht schaue ich es mir jetzt an, es ist nicht so subtil, aber zumindest kannst du im Video sehen. Und jetzt glaube ich, dass diese Bilder alle gut aussehen, aber sie glaubten auch, dass sie zusammengehören und vielleicht zu einer Marke gehören. Ich habe gerade ein einfaches Modell erstellt , das wie eine Bank aussieht. Nochmal, wenn ich ehrlich bin. Und jetzt können Sie sehen, dass dieses Bild mit diesen Schaltflächen und dem Text und den anderen Farben ziemlich gut aussieht . Aber ich könnte das mit jedem dieser Bilder ausschalten. Und es wird nicht nur gut aussehen, es wird sich eine Linie anfühlen als wäre es Teil derselben Website. Wenn wir keine Fotos in guter Qualität erhalten können, möchten wir es vielleicht vermeiden, Fotografie in unserer Webanwendung oder unserer Website insgesamt zu verwenden Fotografie in unserer Webanwendung , wir möchten generell alles vermeiden , was aussieht ein bisschen zu erfunden, aber auch alles, was zu komplex aussieht. Wir wollen nur sehr, sehr einfache Fotos auf unserer Website, weil wir bereits hart gearbeitet haben, um sicherzustellen, dass bei der Auswahl unserer Fotosets nicht zu viel Chaos herrscht, wir wahrscheinlich haben möchten ähnliche Dinge, die auf den Fotografien vor sich gehen, sowie es wäre in einem ähnlichen Stil. Wir können Regeln dafür erstellen wie ein Foto beschnitten werden soll, und auch für bestimmte Filter wir möglicherweise darüber legen möchten. Lass uns das als Nächstes machen. 3. Formen: Hier sind ein paar Formen, wir schon früher gesehen haben. Sie haben einige Eigenschaften, oder das Dreieck hat diese sehr genauen Punkte und können mehr auf einem Engineering-Standort verwendet werden. Ein Quadrat ist sehr ausgewogen und würde sie vielleicht mehr im Bankwesen verwenden oder etwas , das sicher oder maßgeblich aussehen möchte . Kreise sind insgesamt viel weicher und fühlen sich an wie ein Ganzes. Wahrscheinlich mehr im Wohlbefinden oder an Orten verwendet , als man in irgendeiner Weise ruhig erscheint. Ich würde in nichts davon allerdings nicht zu viel lesen. Ähnlich wie der Glaube an Farben bedeutet verschiedene Dinge. Es gibt hier ein Maß an Subjektivität. Und offensichtlich sind dies nicht die einzigen Formen. Es gibt solche mit mehr Punkten, es gibt solche mit unterschiedlichen Winkeln. So ziemlich unendlich viele Formen wir verwenden könnten, um Icons oder einfach verschiedene Texturen auf unserer Website zu erstellen. Jede Form hat Hunderte von Varianten. Die Dicke der Linie. Erscheint die Linie an einem Ende dicker als am anderen? Hat es abgerundete Kanten? Sind die Kanten verjüngt? Es gibt noch viele weitere Varianten gerade hier. Wie entscheiden wir also , welche Form und wie viele Formen in unseren Icons und unseren Illustrationen verwendet werden können ? Nun, ähnlich wie der Ausgangspunkt für unser Basisraster unsere Schrift sein sollte, da es den größten Teil der Website ausmacht. Möglicherweise sollte der Ausgangspunkt für Auswahl, welche Formen in unseren Icons funktionieren, die Auswahl, welche Formen in unseren Icons funktionieren, in unseren Illustrationen auch unsere gewählte Schriftart sein. Dies ist schon Tausende von Orten rund um mein Website-Design, ohne dass ich es überhaupt versuche. wir also sicher, dass alles andere gut damit funktioniert. Bei meiner spezifisch gewählten Schrift können wir also sehen, dass es einen starken Kontrast in der Linienbreite gibt. Es gibt sehr dicke und sehr dünne, die überall verwendet werden. Wenn ich ein Icon erstellen würde, von dem ich glaubte, dass es mit dieser Schrift gut funktionieren würde. Ich würde sicherstellen, dass es diesen starken Kontrast in den Linienbreiten aufweist. Diese Schrift verwendet auch einen sehr spezifischen Winkel während dieser sehr spezifischen Krümmung , die Sie hier am unteren Rand des T sehen können, was ich gerade mit dieser folgenden Eierform demonstriere die gleiche Kurve auch in dieser Schrift verwendet wird, ist diese Art von Verjüngung von dick zu dünn. Es überträgt sich nicht direkt von einer dicken Linie in eine dünne Linie. Es verjüngt sich und es endet nie an einem Punkt. Es hat immer eine leicht flache Kante. Wenn wir uns alle Glyphen ansehen, sehen wir, dass sie meistens dieselben Formen und Winkel der Linienbreite verwenden. Diese Schrift verwendet die Keilform jedoch oft. Es ist eine sehr spezifische Form für diese Schrift. So könnten wir diese Form in unseren Icons oder Illustrationen oder jeder anderen grafischen Sprache verwenden in unseren Icons oder Illustrationen oder , damit sich alles ein wenig vereinheitlicht anfühlt. Wir werden später in diesem Video über das Erstellen von Icons und Illustrationen sprechen. Aber das sind die Formen, die wir möglicherweise verwenden könnten , um diese Dinge zu erschaffen. Aber denken Sie daran, wann immer wir Dinge in unserem Design ansprechen, wollen wir immer, dass es ein Element der Konformität und ein Kontrastelement gibt. Wenn wir nur eine einzige Schrift hätten oder wenn wir Typgesichter hätten, die nicht zu sehr kontrastieren, möchten wir vielleicht in die andere Richtung gehen und Formen und einen allgemeinen Illustrationsstil verwenden einen allgemeinen Illustrationsstil , der völlig anders aussieht. Diese Website hat zum Beispiel eine sehr ähnliche Überschriftentexte, hat jedoch einen Illustrationsstil. Es sieht fast handgezeichnet aus. Es ist eine sehr einfache Illustration und es gibt nichts anderes auf der Seite, ist nur ein völlig einfarbiger Hintergrund. Der starke Kontrast zwischen den Typ-Gesichtern und dem Illustrationsstil funktioniert in diesem Zusammenhang völlig gut, da es auf derselben Seite so wenig anderen Kontrast gibt. Wenn wir eine ziemlich komplizierte Schrift haben, möchten wir möglicherweise, dass die visuellen Elemente auf der Seite dies durch besonders einfach kontrastieren. Nehmen wir an, ich habe diese beiden Schriften hier. Jetzt ist die Überschriftenschrift ziemlich komplex. In diesem Fall möchte ich also, dass die überstimmt visuelle Sprache ziemlich einfach ist, aber lassen Sie uns einige dieser Formen nehmen ich zuvor von der Hauptschrift identifiziert habe und verwenden sie für dieses modale Popup-Fenster hier. Zunächst dachte ich, dass es anstelle von abgerundeten Ecken interessant aussehen könnte, diese leicht verjüngten Ecken mit demselben Winkel zu haben , der vom Keil auf der Schrift verwendet wird . Als Nächstes habe ich ein Kreuz als eine Art Schließknopf für dieses modale Pop-up hinzugefügt . Und ich habe mich für einen ähnlichen Kontrast bei Liniengewichten entschieden , der auch in der Überschriftenschrift verwendet wird, wobei die dünnere Linie als Ausschnitt über das x verwendet wird. Und schließlich habe ich eine Art Grau hinzugefügt Swoosh unten links in diesem modalen Pop-up, das der gleiche Swoosh-Winkel ist , der unten im Kleinbuchstaben t, a, e und viele der anderen Buchstaben verwendet wird , die ich in dieser Schrift identifiziert habe. Ich glaube, dass dieses modale Pop-up eher zum Stil der verwendeten Schrift passt eher zum Stil der verwendeten Schrift ohne es zu kompliziert zu machen oder dem Design zu viel zusätzlichen Kontrast zu verleihen . Dies ist nur ein sehr einfaches Beispiel dafür wie ich die Formen verwenden kann, die ich anhand der Schrift identifiziert habe innerhalb eines einfachen UI-Elements. Ähnlich wie, wenn wir über Farbe sprechen, sprechen wir nicht nur von einer Handvoll Farbnamen, die wir haben. Wenn wir über Formen sprechen. Es sind nicht nur Quadrate, Dreiecke und Kreise. Es gibt alle Arten von Formen, für die wir nicht einmal so bekannte Namen haben. Die Qualitäten dieser Formen können sich drastisch ändern indem sie die Linienbreite und die Qualitäten der Linie ändern. Wenn wir Formen auswählen , die wir in der Bildsprache unserer Entwürfe verwenden können , möchten wir uns bewusst sein, wie komplex die Formen in den Schriften sind, die wir bereits ausgewählt haben. Wenn die Schrift bereits gewählt wurde, haben wir viel Kontrast in ihnen und viele verschiedene Formtypen. Wir möchten nicht zu viele neue Formen in unsere Entwürfe einführen . Wenn wir mit einigen viel einfacheren Gesichtern angefangen haben, können wir den Formen wahrscheinlich viel mehr Kontrast hinzufügen. Und wir werden uns einige Beispiele dafür ansehen, wenn wir uns Illustrationen und Ikonenerstellung ansehen . 4. Illustrationen: Da die Topographie für diese Website so einfach ist, bedeutet dies, dass sie ein bisschen mehr mit den Illustrationen und sogar mit diesem Hintergrund-Swoosh spielen können , ist diese Illustration ziemlich groß, ziemlich komplex und verwendet auch dort etwas Textur. Keines dieser Dinge wäre möglich, wenn es oben eine sehr komplizierte Schrift und natürlich eine einigermaßen kleine Farbpalette hätte. Und hier ist ein weiteres Beispiel für eine sehr einfache Topographie, viele Leerzeichen, die es uns ermöglicht, ein bisschen mehr mit Illustration herumzuspielen . Mir ist bewusst, dass ich hier viele Homepages zeige. Also nur um nach unten zu scrollen und man kann sehen, dass viele der Ikonographie und subtilen Animationen viel komplexer sind, weil sie so viel Leerzeichen haben und eine so einfache Schrift haben. Und letztes Beispiel hat dieses auch sehr, sehr Standardschriftarten. So kann es diesen sehr kratzigen, sehr realistischen, handgezeichneten Illustrationsstil verwenden und es sieht gut aus. Der Kontrast zwischen diesen beiden Dingen funktioniert einwandfrei, da es nicht zu viel Farbe gibt, es gibt nicht zu viel Komplexität auf der Seite. Es ist also ein schönes kontrastierendes Beispiel zu dem letzten, das wir uns angeschaut haben. Dies hat eine etwas kompliziertere Typografie, eine etwas komplexere Farbpalette mit der Hintergrundfarbe hier. Und deshalb hat es einen etwas weniger komplexen Illustrationsstil. Also hier ist ein Design, das ich früher erstellt habe. Du hast gesehen, wie ich das erschaffen habe, und ich bin mit der Illustration nicht besonders zufrieden. Ich habe einfach einen hier reingeschoben, ohne zu viel nachzudenken, ich werde diese Illustration herausnehmen, damit wir versuchen können , ein paar verschiedene hier reinzustecken. Aber bevor ich es tue, möchte ich vorschlagen , dass Ihre Farben nicht realistisch sein müssen. Denken Sie daran, dass wir früher gesagt haben, dass Wert viel wichtiger ist als der Farbton, wenn es um die Auswahl von Farben geht, was besonders zutrifft, wenn wir herausfinden, wie wir unsere Hughes wählen Dieser Typ hat ein Grün Laptop, was ein bisschen seltsam ist. Sie können das wahrscheinlich in der realen Welt sehen, aber Sie könnten ebenso eine Illustration haben , wo der Himmel orange ist, wo die Haut der Person grün ist, wo Wasser rot ist. Und solange wir die Werte richtig machen, werden sie gut aussehen. Aber wenn wir mit den Farbtönen spielen, können wir es interessanter machen. Und natürlich können wir unsere Branding-Farben auf ihre Art und Weise bekommen . Während wir gerade darüber gesprochen haben, wenn es um Formen geht, möchten wir vielleicht eine Illustration erstellen, die nur ein Formmuster ist. Und vielleicht habe ich stattdessen diese zufälligen farbigen Dreiecke und Kreise hier. Jetzt habe ich mir eine Herausforderung gestellt, weil die Schrift, die wir hier für den Anzeigetext verwenden, Es ist ein großer Komplex, aber es ist auch ein bisschen geometrisch. Diese geometrischen Formen habe ich hier zur Veranschaulichung hinzugefügt. Ich glaube nicht, dass es so gut funktioniert. Und das liegt daran, dass wir keinen Kontrast zwischen dem Anzeigetext und der Illustration haben. Obwohl das bedeutet, dass es schön und einheitlich aussieht, bedeutet dies, dass Illustrationen nichts hinzufügen dem Design nichts hinzufügen und es hier kein wirkliches visuelles Interesse gibt . Ähnlich wie bei einem der Beispiele, die wir uns gerade angeschaut haben, verwende ich eine handgezeichnete Illustration, aber ich werde sie ein wenig in einem Kreis enthalten lassen. Es hat einen ganz bestimmten Ort, an dem er lebt. Jetzt habe ich diese Katzenillustration aus keinem wirklichen Grund gewählt , außer der Tatsache, dass er diesen Keil hat, und dieser linke Fuß und der Fisch auf seinem Whiteboard hat ein Keilgesicht. Und es sind viele Keile drin, ähnlich wie meine Schrift viele Keile hat. Ich bin mir also der Formen aus der Schrift bewusst, aber ich kopiere sie nicht im gleichen Stil, also gibt es immer noch den Kontrast. Nun schauen wir uns dieses Design an. Ein frisches, aber dieses Mal haben wir die Typgesichter in etwas geändert, das realistisch eher dem entspricht, was Sie wahrscheinlich mit einer modernen Webdesign-Agentur zusammenarbeiten werden . Die Schrift ist viel standardmäßiger. Es ist sehr kastig, es ist serifenlos, und mehr als das, es ist überbeansprucht. Jeder ist es also gewohnt , diese Schriften überall zu sehen und möglicherweise zu sehen. Dies stellt jetzt eine ganz andere Herausforderung dar , denn wenn wir eine Illustration erstellen, die mit diesen Schriften funktioniert, kann es viel komplexer sein , dort einen gewissen Kontrast zu erzielen. Aber es muss auch daran liegen , dass dieses Design sonst Gefahr läuft visuell eintönig zu sein und unsere Benutzer zum Einschlafen zu bringen. Dies ist eine Illustration die wir früher im Kurs verwendet haben und die hier ziemlich gut funktionieren könnte . Es hat diesen coolen 3D-Stil, der gerade sehr in Mode ist. Und es fügt viel visuelles Interesse hinzu, bietet viel Kontrast zur Schrift und passt ziemlich gut in diesen Abschnitt. Ein großer Nachteil ist , dass ich keine Zeit hatte , meine eigenen Illustrationen zu erstellen, und das tust du selten. Es ist eine sehr überbeanspruchte Illustration, die zumindest ein sehr überbeanspruchter Illustrationsstil ist . Ich möchte das also nicht wirklich zusammen mit einer sehr überbeanspruchten Schrift verwenden . Es könnte Ihnen vergeben werden zu denken dass Sie dieses Design tatsächlich schon gesehen haben. Vielleicht möchten wir stattdessen einfach etwas Wildes und Chaotisches erschaffen . Ansonsten schauen unsere Designer einfach weit nach konform und langweilig. Zum Gegensatz dazu habe ich gerade ein paar wilde verrückte Formen ohne wirklichen bewussten Grund geschaffen ein paar wilde verrückte Formen . Und persönlich glaube ich, dass dies einen weitaus besseren Kontrast zur Topographie darstellt. Wir können das in einem späteren Video interessanter aussehen lassen. Aber wenn es sich um Texturen, Muster und Farbverläufe handelt , ähnlich wie bei verschiedenen Schriften. Wenn wir uns für einen Illustrationsstil entscheiden, möchten wir, dass es einen gewissen Kontrast zwischen unseren vorhandenen Elementen und der Schrift gibt, aber wir möchten meistens, dass sie sich verbunden fühlen und irgendeine Form von Konformität. Je sauberer und einfacher der Rest der Elemente in unserem Design ist, desto verrückter und verrückter kann die Illustration sein. Und wenn wir bereits ziemlich viel Kontrast in den vorhandenen Elementen haben , wollen wir eine Illustration, die etwas eingedämmter und etwas weniger verrückt ist . 5. TEXTUREN: Die meisten Webdesigner werden sich Typografie und Farbe ansehen und vielleicht über Komposition nachdenken oder lernen, ihre Kompositionen ein wenig zu verbessern. Aber selten werden sie darüber nachdenken, welche Bildsprache. Und selbst wenn sie das tun, liegt es normalerweise im Kontext von Formen, über die wir gerade gesprochen haben. Die Bildsprache ist jedoch immer da, ob wir darüber nachdenken oder nicht. Und genau wie wenn wir versuchen, eine Schrift ohne Persönlichkeit zu wählen , nur in der Hoffnung, dass wir nichts kommunizieren , indem wir zum Beispiel flache Farben verwenden , immer noch sehr kommuniziert irgendwas. Dies bedeutet, dass die meisten Websites es vermeiden werden, Texturen, Muster oder Farbverläufe zu berücksichtigen. Daher möchten wir vielleicht zumindest erwägen, diese unseren Websites oder Anwendungen hinzuzufügen , da es für uns sehr einfach sein wird, eine einzigartige Persönlichkeit und eine einprägsame Webanwendung zu erstellen . Wir könnten es möglicherweise nutzbarer machen, indem vielleicht mehr Aufmerksamkeit auf ein interaktives Element lenken. Wie zum Beispiel, wenn wir Farbverläufe auf einer Schaltfläche verwenden , damit sie ein bisschen mehr 3D erscheinen lässt. Wir könnten stattdessen vielleicht eine Textur verwenden. So könnten wir manchmal eine Textur verwenden, um etwas realistischer oder skeumorph aussehen zu lassen. Und vielleicht wollen die Leute manchmal damit interagieren. Ich glaube nicht, dass Designer genug darüber sprechen, aber ich habe gerade einen Stift auf meinem Schreibtisch und klicke oft den Knopf auf der Rückseite, wenn ich es nicht wirklich brauche. Niemand muss jemals auf diesen Button klicken, nur weil sich etwas daran gut anfühlt. Und das werden wir uns im nächsten Modul zur Animation noch viel mehr ansehen . Aber wenn sich der Button besser anfühlt, werden wir darauf klicken wollen. Lassen Sie uns etwas Zeit damit verbringen, nach einer Textur zu suchen , von der wir glauben, dass sie mit unserem Branding funktioniert. Jetzt sind wir vielleicht versucht, einfach eine zu kopieren, die auf einer anderen Website gut aussah, aber wir versuchen, hier ein einzigartiges Erlebnis für unsere Marketingseite zu schaffen hier ein einzigartiges Erlebnis für unsere Marketingseite oder einem Dashboard eine einzigartige Persönlichkeit zu verleihen. Versuchen wir also, ein einzigartiges Muster zu finden. Wir können nach etwas wie Pinterest suchen. Und die Leute haben hier tatsächlich alle Arten von verschiedenen Texturen und Mustern hochgeladen . Und wir könnten dies zur Inspiration verwenden, oder wir könnten vielleicht einfach einige Texturen kopieren, die wir gefunden haben. Wir werden in Kürze ein wenig über den Unterschied zwischen einer Textur und einem Muster sprechen . Aber zuerst schaue ich mir Texturen an. Jetzt ist hier das Design, das ich ein bisschen früher erstellt habe. Und was wäre, wenn ich diese gerade Linie so in eine coole handgemalte Textur auf dem Bildschirm umwandle . Jetzt persönlich denke ich, dass es sofort super cool aussieht. Es gab eine langweilige Linie auf der Seite, und jetzt sieht es wirklich interessant aus, aber dieses Interesse zieht unsere Aufmerksamkeit auf sich. Es erzeugt eine große Menge an Kontrast an einem Ort , der nicht sehr wichtig ist, und es ist fast jetzt das erste, was ich auf dieser Seite merke, denken Sie daran, der einzige Grund, warum wir eine andere Farbe haben der Hintergrund, während wir die Seite nach unten scrollen, um die visuelle Monotonie aufzulösen , tun Sie es idealerweise mit einer Art Rhythmus. Daher ist die gerade Linie im Hintergrund , in der wir von Weiß zu Lila wechseln , nicht besonders wichtig oder interessant. Und wenn überhaupt, wollen wir weniger darauf aufmerksam machen, nicht mehr. Vielleicht ist dies ein wirklich schlechter Ort, um eine Textur zu verwenden. So etwas wie die Topographie könnte viel wichtiger sein. Wahrscheinlich ist das Wichtigste, dass wir von überall, jederzeit und jederzeit lernen können. Meiner Meinung nach wäre der beste Ort, um mehr Kontrast zu ziehen zu spezifische Wörter in dieser Überschrift, hier ein bisschen Textur machen, wahrscheinlich der beste Ort, an dem wir etwas setzen könnten. Wir könnten möglicherweise auch einige interessante Texturen zu dieser seltsamen Illustration einer Katze hinzufügen einige interessante Texturen zu , die ich habe. Weil wir an dieser Illustration bereits ein gewisses visuelles Interesse haben. Wir wollen wahrscheinlich keine wirklich raue Textur, wirklich komplizierte Textur wie diese. Wir könnten diese Textur vielleicht weicher oder vereinfachen , also ist sie etwas weniger hart. Aber auch hier ist es ein Hintergrundkreis. Vielleicht ist dies nicht der wichtigste Ort, um Textur zu setzen. Was ich hier gemacht habe, ist, dass ich der Illustration direkt etwas Textur hinzugefügt habe. Es gibt ihm ein bisschen taktiler und macht es optisch interessanter. Ich habe das tatsächlich direkt in einem Zeichenprogramm gemacht , damit es sehr einzigartig aussieht. Ich öffne einfach die Illustration in Procreate auf dem iPad, wähle eine Textur aus und kritzelte einfach einige der Farben ein wenig über einige Bereiche. Dies fügt jedoch sehr einfach eine einzigartige Textur hinzu. Und das ist jetzt ein brandneuer Ball. Ich habe hier unten einige andere kleinere Illustrationen, fast Icons, aber ein bisschen zu groß und komplex, um als Icons betrachtet zu werden. Ich kann jetzt die gleichen Pinsel hinzufügen und Dinge werden dieser Top-Illustration verwendet um diesen etwas Textur zu verleihen, wodurch sie sich besser ausgerichtet fühlen. In Anbetracht dessen, dass ich keine Illustrationen erstellt habe, fühlen sie sich ein bisschen mehr so an, als würden sie zusammengehören. Ich habe natürlich die Farben dieser Illustrationen bereits so angepasst , dass sie die gleichen Farben aussehen. Texturen können verwendet werden , wenn wir unsere Webanwendung oder Website sehr einzigartig anfühlen möchten . Wir können sogar eine sehr benutzerdefinierte handgezeichnete, handgemalte Textur finden oder sogar unsere eigene erstellen und sie importieren und in unseren Bildern verwenden. Es fühlt sich wahrscheinlich ein bisschen zu einzigartig an, um für eine sehr Unternehmensmarke verwendet zu werden. Für etwas, das ein bisschen unternehmerisch ist, könnten wir Texturen jedoch ganz subtil verwenden wie ich es bei der Katzenillustration in diesem Video getan habe. Und weil die Bildsprache so einzigartig ist, bedeutet dies, dass alle unsere Markenelemente zusammengefügt werden, all unsere verschiedenen Grafiken auf der gesamten Website werden dann wirklich einfach. Jeder Teil unserer Website fühlt sich sofort an, als gehöre er zu derselben Marke, da er eine Textur verwendet, die nirgendwo anders im Internet verwendet wird. 6. Muster: Jetzt unterscheidet sich ein Muster geringfügig von einer Textur oder ein Muster, das sich über einen großen Bereich wiederholt. Dies bedeutet, dass sie viel subtiler im Hintergrund von etwas verwendet werden können. Dies bedeutet, dass sie offensichtlich eine größere Fläche abdecken können, aber es hat auch einen Entwicklungsvorteil , nämlich dass es sich um ein besonders kleines Bild oder SVG handeln könnte , das sich über einen großen Bereich wiederholt. Das Originalbild ist also sehr, sehr klein und sehr schnell zu laden. Wenn wir zum Beispiel demselben Design ein Muster hinzufügen wollten demselben Design ein Muster , haben wir gerade auch Texturen hinzugefügt. Realistisch gesehen würde ich das wahrscheinlich nicht tun weil es vielleicht zu viel Komplexität im Design gibt. Vielleicht würde ich mich wieder für diese Dreieckskeilform entscheiden, die jetzt in meiner Illustration verwendet wird, sowie für meine Displayschrift. So könnte ich ein einfaches Wiederholungsmuster mit den etwas unterschiedlich farbigen Dreiecken haben. In diesem Fall würde ich vorschlagen, dass dieses Muster nicht funktioniert, da es viel zu wenig Kontrast zwischen dem Muster und der Schrift gibt. Sie verwenden nicht nur beide Keilformen, sie sind auch sehr geometrisch. Und aus diesem Grund habe ich das Gefühl, dass ich ein bisschen Kontrast brauchen würde ein bisschen Kontrast brauchen damit das Muster dem Design etwas hinzufügt. Da ich derzeit nicht glaube, dass dies etwas anderes als eine unnötige Komplexität hinzufügt , vielleicht ähnlich wie wir diese handgezeichnete Katze oben gewählt haben, wollen wir etwas mehr handgezeichnete Dreiecke . Wenn wir stattdessen eine etwas humanistischere Schrift oder etwas sogar Handgezeichnetes gewählt hätten eine etwas humanistischere Schrift , könnten die geometrischen Dreiecke etwas besser funktionieren. Aber mit all den scharfen Dreiecken in der Schrift glaube ich, dass die handgezeichneten Dreiecke im Hintergrund hier besser funktionieren werden. Und beachte, dass ich auch hinter dem Text ein kleines lila Feld hinzugefügt habe , sodass wir nicht die Ablenkung haben dass das Muster direkt hinter dem Text liegt. Ein Muster wird normalerweise viel subtiler sein. Es wird für einen Benutzer weniger ablenken , da es das Gebiet abdeckt. Technisch gesehen ist es auch weniger Arbeit. Es ist einfacher zu warten, es ist einfacher für die Webseite zu laden. Normalerweise können wir damit mehr über etwas unternehmenseres oder professionelleres Dashboard unserer Webanwendung davonkommen damit mehr über etwas unternehmenseres oder professionelleres Dashboard . Um es in irgendeiner Weise zu unterscheiden, machen Sie es einzigartiger und verleihen Sie ihm ein etwas mehr Premium-Gefühl. 7. Farbverläufe: Farbverläufe können eine sehr einfache Möglichkeit sein, eine visuelle Sprache zu erstellen , die etwas komplizierter ist als Grundfarben. Wenn Ihre Branding-Farben Orange und Blau waren, gibt es wahrscheinlich viele Unternehmen mit einem sehr ähnlichen Orange und einem sehr ähnlichen Blau. Aber wenn wir einen orange-blauen Farbverlauf auf einem bestimmten Niveau erstellen , sind wir möglicherweise das einzige Unternehmen das genau diesen Farbverlauf verwendet, wodurch sich unsere Anwendungen ein bisschen mehr anfühlen einzigartig und sei ein bisschen einprägsamer. Ich habe dieses Design früher erstellt , als wir über Formen gesprochen haben. Wir haben diese sehr kastenlose serifenlose Schrift. Wir wollen also wirklich, dass die Formen, die anderen Formen, die Muster oder Texturen, die wir damit verwenden, sehr fließend und flüssig sind. Arbeit mit einer solchen Schrift kann tatsächlich ziemlich viel Spaß machen, wenn Sie zu diesem Zeitpunkt kommen, weil wir uns für solch vereinfachte Schriften entschieden haben , wir können ein bisschen mehr Spaß mit dem Visuellen haben Sprache. Natürlich können wir diesen Formen und dem gesamten Hintergrund einige subtile Farbverläufe hinzufügen einige subtile Farbverläufe . Und hinter dieser Schrift lenkt es weniger ab weil wir viel mehr Raum haben, um Kontrast zu schaffen. Beachten Sie, dass diese Farbverläufe grundsätzlich zwischen leicht unterschiedlichen Blautönen liegen . Wir wollen sehr selten Farben an gegenüberliegenden Enden des Farbrads wählen . Wenn ich zum Beispiel einen gelben bis blauen Farbverlauf erstellen wollte, wissen wir bereits, dass der Mittelweg grau sein wird und wir möchten vermeiden unsere Designs grau werden wo immer möglich. Unsere Farbverläufe sollten sich idealerweise nicht zu weit um das Farbrad als Ganzes bewegen. Dies bedeutet, dass die von uns erstellten Farbverläufe von unseren Nutzern etwas weniger Aufmerksamkeit verlangen werden . Aber es bedeutet auch, dass die Farbe in der Mitte des Farbverlaufs immer noch irgendwie lebendig sein wird. Eine gute Lösung, wenn wir einen etwas komplizierteren Gradienten für kleinere Flächen erstellen wollten , ist, dass Sie natürlich einen dritten Stopp in die Mitte Ihres Farbverlaufs setzen können. Und dies wird etwas Einzigartigeres für unsere Marke schaffen , aber auch dafür sorgen, dass die Farbe in der Mitte immer noch ziemlich lebendig und nicht zu grau ist . Natürlich könnte es in meinem Beispiel hier möglicherweise einige Lesbarkeitsprobleme geben. Wir haben es nur mit drei Textzeilen zu tun , die so über dem Farbverlauf liegen. Es ist also weniger wichtig hier. Aber wir möchten immer darauf achten, dass es, selbst wenn der Farbkontrast zwischen Vordergrund und Hintergrund gut ist, wenn es im Hintergrund eine große Komplexität gibt , es immer noch schwieriger machen wird um den Text zu lesen. So etwas wie ein Farbverlauf ist nicht so kompliziert wie ein Muster. Und so ist es normalerweise in Ordnung. Jede erdenkliche Farbkombination wurde bereits irgendwo online für eine Marke verwendet. Es macht es Ihnen sehr schwer , ein einzigartiges Farbschema für Ihre Marke zu entwickeln , wenn Sie die andere Bildsprache nicht im Rest dieses Moduls verwenden die andere Bildsprache . Eine Sache, die Sie tun können, ist einen Farbverlauf zu erstellen. Farbverläufe sind sofort einzigartiger als nur eine flache Farbe und sie sind nicht viel technische Arbeit, die zu einer Website hinzugefügt werden muss. Wir wollen immer noch, dass diese subtil sind, also wollen wir fast immer Farben verwenden , die nahe beieinander am Farbrad liegen, was uns auch davon abhält, irgendwo in eine schreckliche graue Farbe zu bekommen irgendwo in eine schreckliche graue Farbe die Mitte unseres Gradienten. Und wenn wir einen Farbverlauf in unseren Designs übermäßig verwenden , insbesondere wenn es sich um einen Hintergrund handelt, möchten wir die Komplexität anderer Farben und Bilder reduzieren , die im Design verwendet werden. Und vielleicht möchten wir den Leerraum in anderen Bereichen vergrößern . 8. Symbole: Icons können einen großen Unterschied für eine Webanwendung ausmachen. Ich weiß, dass wir in diesem Kurs irgendwie später sind, aber unterschätze nicht, wie wichtig Icons sein können. Sie könnten leicht die gesamte Persönlichkeit eines Logos haben , um Ihre Markenbotschaft zu kommunizieren und dennoch zusammenzufassen, was etwas in einem einzigen Symbol bedeutet. Das bedeutet, dass die Leute es sehr schnell erkennen können , bevor sie etwas auf einer Seite lesen. Normalerweise finden Sie die Schaltfläche Speichern und die Schaltfläche „ Anhänge“. Und Icons übersetzen normalerweise Sprachen und Dialekte viel schneller als alles andere. Helfen Sie Menschen zu identifizieren , wo es ein Symbol gibt. Und um eine kohärente Botschaft zu bewahren, möchten wir, dass sich unsere Ikone so anfühlt, dass sie zusammen gehören. Wenn wir kein besonders großes Budget haben, kaufen wir normalerweise ein Icon-Set und passen es wahrscheinlich ein wenig an. Es gibt einige sehr einfach zu bedienende völlig kostenlose Icon-Sets wie Font Awesome und Hero Icon. Wir werden diese nur wirklich nur für das Prototyping verwenden. Sie haben nicht wirklich die einzigartigen Eigenschaften, die wir für unsere Icon-Sets wünschen. Wenn wir diese Anwendungen sehr schnell verwenden, sieht es aus wie zehn andere Anwendungen, die Sie bereits gesehen haben. Aber es ist wirklich schwierig, unsere eigenen Icon-Sets zu erstellen. Wir möchten, dass sie auf unserer Website konsistent aussehen. Wir möchten, dass sie manchmal in verschiedenen Größen arbeiten. Und wir brauchen sie, um leicht etwas zu kommunizieren. Sie werden also auch sehr selten einen von Grund auf neu erstellen. Während wir nach einem Icon-Set suchen, möchten wir diese Marken-Keywords immer in unserem Gehirn behalten , aber wir möchten auch wissen unsere Schrift aussieht. Auch hier, weil diese immer neben einigen Texten sitzen werden. Wir wollen, dass sie überhaupt nicht zu viel Kontrast zur Topographie haben . Fast so, als gehörten sie zur Typografie. Wenn unsere Typografie also ziemlich geometrisch ist, möchten wir vielleicht ein ziemlich geometrisches Symbol daneben. Wenn es handgezeichnet aussieht oder ein humanistisches Element hat, möchten wir vielleicht eine etwas humanistischere Ikone daneben. Oder wenn ich diese beiden Schriften hier verwende, hat eine von ihnen viel Kontrast, dicke und dünne Linien. Vielleicht möchten wir diesen Kontrast in den Symbolen beibehalten. Wenn wir die andere Schrift für unsere Schaltflächen und allgemeine Benutzeroberflächen verwenden würden , möchten wir vielleicht ein Symbol mit einer konsistenten Linienstärke haben . Meiner persönlichen Meinung Suche nach Icon-Sets möchten Sie bei der Suche nach Icon-Sets die Formen und Eigenschaften Ihrer Typografie betrachten , insbesondere die, die in den nächsten beiden Symbolen verwendet wird. Und das ist wahrscheinlich wichtiger als Ihre Branding-Keywords. Sobald Sie ein Icon-Sets gekauft haben, das Sie ausgewählt haben, gibt es kostenlose Icons. Sie haben oft 200 Icons oder eine verrückte Zahl wie diese im Set. Du willst sie nicht wirklich alle benutzen. Sie möchten diejenigen auswählen, die für die spezifische Anwendung nützlich sein werden , die Sie erstellen. Sie verwenden eine Teilmenge dieser Symbole, die Sie mit anderen Designern oder Entwicklern teilen , wenn Sie neue Dinge erstellen. Wenn ich entscheide, was jedes Symbol bedeutet, finde ich es normalerweise nützlich , zu Google Images zu gehen und zum Beispiel Anhänge zu schreiben. Dafür ist es relativ einfach. Jedes einzelne Bild, das zurückkommt, ist von einer Büroklammer. Manchmal eine Büroklammer mit einem kleinen Plus oder einem Kreuz daneben, was wahrscheinlich etwas anderes bedeutet. Wenn Sie zu Google Images gehen und nach etwas wie einem Warnsymbol suchen, mindestens die Hälfte der Bilder dasselbe Symbol. Du weißt irgendwie, dass das ein allgemein akzeptiertes Symbol für dieses Ding ist. Denn so haben Menschen ihre Bilder auf ihren eigenen Websites markiert . Ich kann mir kein einziges Beispiel vorstellen in dem ich das gemacht habe und kein ziemlich schlüssiges Ergebnis gefunden , für welches Symbol ich für etwas verwenden sollte. Sobald wir unsere Icon-Untermenge haben und wir entschieden haben , was jedes Symbol für uns bedeutet. Wir werden wahrscheinlich einige Anpassungen vornehmen wollen . Sie erhalten selten ein Icon-Set , das perfekt zu Ihrer Schrift und Ihrer Branding-Nachricht passt. Vielleicht müssen Sie die Kanten ein wenig abrunden oder dünnere Linien haben oder so. Ein häufiges Problem, besonders wenn ich ziemlich einzigartige Icon-Sets wie das habe, das ich habe, ist, dass ich irgendwann ein Symbol brauche , das ich einfach nicht in diesem Set habe. Also brauche ich zum Beispiel vielleicht ein Speichersymbol. Dieses Set hatte kein Speichersymbol. Ich habe eine Google-Image-Suche nach dem Symbol „ Speichern“ durchgeführt und festgestellt, dass es sich normalerweise um eine alte Diskette handelt. Jetzt habe ich das ursprüngliche Icon-Set durchgesehen und nach einigen Formen gesucht , mit denen ich eine Diskette erstellen könnte . Dann kann ich einfach ein paar subtile Bearbeitungen vornehmen, die Bits ausschneiden, die ich behalten möchte und einige kleine Anpassungen vornehmen, um eine neue Form einer Diskette zu erstellen , ohne neue Zeilen zu erstellen Kurven, Winkel oder irgendetwas von solchen Sachen. Sie möchten auch einige spezifische Regeln darüber erstellen welche Farbe sie haben können und welche Größe sie haben können. Dies ist eine sehr nützliche Sache, die Sie in Ihrem Designsystem dokumentieren können. Also andere Designer, die an derselben Anwendung arbeiten, gehen nicht und kleben Sie keine Symbole in der falschen Größe oder der falschen Farbe ein. Ein sehr häufiger Fehler, den ich bei verschiedenen Webanwendungsdesigns gesehen habe , ist dass Leute Symbole für die falsche Größe verwenden. Wenn du ein Icon hast, ist das sehr simpel und du sprengst es zu groß, es wird schlecht aussehen. Dies ist, als würde man eine sehr einfache Schrift bekommen und sie zu einer großen Überschrift machen. Ein sehr einfaches kleines Icon funktioniert nicht groß. Es hat nicht die Persönlichkeit und die Eigenschaften , um das zu erreichen. Ebenso wird ein sehr kompliziertes Symbol, mit mehr als einer Farbe, zum Beispiel mit mehr als einer Farbe, nicht allzu gut aussehen , wenn man es wirklich klein macht. Wenn Sie ein Symbol haben und es nur 30 Pixel mal 30 Pixel groß ist, können Sie dort keine unterschiedlichen Linienbreiten haben. Es wird einfach wie ein seltsames kleines Durcheinander aussehen. Wir müssen also Einschränkungen haben, wie unsere Icon-Sets verwendet werden können. Und ich bin sehr seltene Fälle bei einigen Anwendungen, wir möchten vielleicht, dass eine große Version des Symbols und eine kleine Version desselben Symbols an verschiedenen Orten verwendet werden. Wir möchten ein Icon-Set auswählen, das zu unseren Branding-Wörtern und unserem bestehenden Branding passt . Aber wir möchten auch, dass unser Icon-Set mit der Topographie übereinstimmt, die es bei der Auswahl unserer Schriften verwendet wird. Wir wählen lieber eine aus, Wir wählen lieber eine aus für die Sie bezahlen, um etwas Einzigartigeres zu erhalten und das ist ein bisschen professioneller und funktioniert unter mehr Umständen. Mit Icons. Dies gilt umso mehr, weil Sie nicht so viel Geld benötigen , um eine anständige Reihe von Symbolen zu erhalten. Wir möchten sehr spezifische Regeln dafür erstellen , welche Größen und Farben diese Symbole in unserer Anwendung oder unserer Website verwendet werden können . Andere Designer und Entwickler machen sie also nicht zu groß oder klein, wenn wir bereits wissen, dass sie so nicht funktionieren werden. 9. Zusammenfassung: Die Illustrationen, Fotos, Texturen oder Muster, die wir in unserem gesamten Design verwenden, kommunizieren wir alle die Markenbotschaft weiter. Wir möchten einen kohärenten Stil haben, den wir in allen unseren Designs für eine einzige Marke verwenden. Wenn wir uns für eine starke Schrift entschieden haben, haben wir ein einzigartiges Raster und eine interessante Farbpalette. Wir sollten unsere Bildsprache während unseres gesamten Designs nur sehr sparsam verwenden müssen . Die wichtigsten Orte, an denen wir die Bildsprache verwenden, sind auf unseren Marketingseiten oder unserer Anwendung, der Homepage, wo wir zusätzliche Arbeit benötigen, um Aufmerksamkeit der Menschen zu erregen und die Werte unserer Marke zu kommunizieren . Für ein Dashboard oder einen Admin-Bereich unserer Website verwenden wir die visuelle Sprache viel sparsamer, aber das bedeutet nicht, dass sie nicht existieren wird. Zum Beispiel kann der Ikonenstil ziemlich einzigartig sein, um zu unserer Marke zu passen und gut mit unserer Typografie zu arbeiten. Jede Anwendung hat irgendeine Art von Marketingseiten oder Homepage und Über uns Seite eine Kontaktseite. Dies sind Seiten, die Menschen sehen, wenn sie sich noch nicht viel mit Ihrem Unternehmen oder Ihrer Marke befasst haben. Es gibt weniger vertraut mit der Persönlichkeit oder der Bedeutung der Marke. Dies sind jedoch die Bereiche, in denen unsere Bildsprache am wichtigsten sein wird. Und wir möchten Illustrationen oder Fotografien beziehen , die nicht nur einzigartig sind, sondern wirklich kommunizieren, wer wir sind.