Erstellen Sie Ihre visuelle Bibliothek: Designtipps und Herausforderungen

Einer der großen Unterschiede zwischen einem erfahrenen und einem Junior-Designer ist die visuelle Bibliothek, die er / sie erstellt.

Was ist eine visuelle Bibliothek?

Dies ist das Zeug in Ihrem Kopf, wenn es um UI-Elemente und UX-Praktiken geht. Was Sie gebaut haben und ein Verständnis dafür haben, wie es funktioniert. Je umfangreicher Ihre Bibliothek ist, desto schneller können Sie vor Ort Lösungen finden.

Geben wir ein Beispiel: Als Designer haben Sie die Aufgabe, eine neue Website zu erstellen.

Welche Website? Sie könnten fragen. Nun, das sind alle Anforderungen, die Sie haben. Eine Herausforderung von einem Kollegen. Oh, außerdem hast du eine Stunde Zeit dafür. Dies ist eine Herausforderung, die wir bei DevriX gemacht haben. Hier ist eines der Ergebnisse nach 3600 Sekunden:

Entwurf von Alex Dimitrov

Es war nicht viel Zeit, um über das Thema nachzudenken, also war es direkt in der Kopfzeile. Welche Komponenten hat ein Header?

• Ein Titel sicher
• Navigation
• Suchleiste
• Einige soziale Links
• Einige rufen Aktionsschaltflächen auf, hauptsächlich um sich zu registrieren und / oder ein Konto zu erstellen
• Einige Navigation, um es interessant zu machen

Woher kam das alles? Es war eine leere Seite vor. Zunächst gab es nicht einmal ein Thema. Dies alles geschah aufgrund der visuellen Bibliothek, die der Designer im Laufe der Jahre beim Erstellen von Websites, Anwendungen und allem, was damit zu tun hatte, erstellt hatte.

Auf wie viele Arten können Sie einen Header entwerfen? Hunderte von Möglichkeiten. Es gibt so viele verschiedene Arten von Elementen, Topografien, Farben, Überlagerungen, Schaltflächen, Elementen und vielem mehr. Es ist ein interessantes Experiment.

So erstellen Sie eine visuelle Bibliothek

Während die einfachste Antwort lautet: „Mehr Designs erstellen“, ist sie nicht sehr zufriedenstellend, nur weil viel mehr dahinter steckt. Wichtiger ist die Vielfalt. Verschiedene Designs bauen. Eine direkte Möglichkeit, dies zu erreichen, besteht darin, große Websites neu zu gestalten.

Hier einige Beispiele:

Facebook:

Bildquelle: Dribbble

Google Mail:

Bildquelle: Dribbble

Twitter:

Bildquelle: Dribbble

Es gibt einfach so viele Beispiele. Je komplexer das Design ist, desto schneller kommen Sie voran. Aber wie funktioniert das genau?

Schauen wir uns als Beispiel eine Liste an. Eine Liste kann eine Überschrift haben, die sie benennt. Sie kann Symbole enthalten, die farbig, ähnlich im Design oder unterschiedlich im Design sein können. Es kann auch einen größeren Titel und Untertitel haben, möglicherweise ein Etikett mit einer Nummer. Anschließend können Sie Schwebezustände, Elemente, die ausgewählt oder deaktiviert werden können, usw. hinzufügen. Mit all diesen Variationen können Sie eine Vielzahl von Listendesigns erstellen.

Bildquelle: Dribbble

Um so viele Konfigurationen und Layouts erstellen zu können, muss eine gute visuelle Bibliothek vorhanden sein. Zu wissen, dass Sie es so machen können. Es ist, als hätte man jemanden neben sich, der sagt: "Zeichne mir eine Schachtel", dann "Füge einen Titel hinzu" und du machst es ohne nachzudenken. Alle diese Entscheidungen werden getroffen, weil Sie es zuvor getan haben. Es folgt zwar auch den Grundlagen des Designs, aber Sie können nicht immer auf Ihre Notizen oder Bücher zurückgreifen. Es ist wie beim Trainieren einer KI - Sie müssen Muster mithilfe einer „erfolgreichen Reihenfolge von Elementen“ erstellen.

Alle bildenden Künstler müssen Bibliotheken erstellen

Ein gutes Beispiel dafür ist Kim Jung Gi - ein Genie, das aus jeder Perspektive lebensechte Kunstwerke schaffen kann.

Kunst von Kim Jung Gi

In einem Interview erzählt er, wie er sein ganzes Leben lang alle Objekte um sich herum betrachtet und versucht hat, ihre Form zu verstehen und sie aus einer anderen Perspektive zu zeichnen. Mit dieser Fähigkeit kann er jetzt alles zeichnen, was Sie im obigen Bild sehen, indem er einfach von einem weißen Stück Papier ohne Referenzen ausgeht.

Oder besser gesagt - ohne Referenzen, nach denen er greifen kann, weil seine Referenzen in seinem Kopf sind - seine visuelle Bibliothek. Dies ist ein Beispiel für die Arbeit eines Meisters, was ein großes Ziel ist, einen Designer anzustreben.

So wie Webdesigner etwas über Schaltflächen, Listen, Karten, Eingabefelder, Popups und vieles mehr lernen, lernen Digitalkünstler Materialien, Beleuchtung, Silhouetten, wie Muskeln funktionieren, wie die Schwerkraft Sie nach unten zieht und Ihre belastet Körper und so weiter.

Grafik von Suzanne Helmigh

Dies ist ein Beispiel dafür, wie Digitalkünstler verschiedene Materialien kennenlernen, indem sie versuchen, sie auf eine Kugel anzuwenden. Magma, Holz, Fell, Wein, Ei, Käse, alles ist gültig. Wenn Sie davon lernen, es mit Ihren Händen tun, prägen Sie es nach und nach in Ihr Gehirn ein. Und wenn es an der Zeit ist, dieses Material auf ein echtes Gemälde anzuwenden, haben Sie jetzt ein besseres Verständnis dafür, wie es wirklich funktioniert und wie das Endergebnis realistisch aussehen sollte.

Hier ist ein Beispiel, bei dem Haut, Leder, Metall und Haare verwendet werden, um ein sehr gut aussehendes Endprodukt herzustellen. Das Fehlen eines grundlegenden Verständnisses dieser Materialien könnte dazu führen, dass das Metall wie Kunststoff, lederähnliches Papier usw. aussieht.

Bildquelle: Artstation

Herausforderungen für Webdesign-Komponenten

Schauen wir uns nun noch einmal einige gängige Komponenten an, die Sie häufig im Webdesign verwenden, und einige Vorgehensweisen:

1 - Tasten

Eine der grundlegendsten Komponenten einer Website. Knöpfe gibt es in allen Formen und Größen. Sie können Farbverläufe festlegen, Farben ändern, Textschatten hinzufügen, Ränder (mehr als einen) hinzufügen, Glanzstil hinzufügen, Konturen erstellen, ihre Form ändern (quadratische, abgerundete Ecken, Kreis). Einige sind mit Symbolen versehen, andere haben Symbole getrennt Unterklickbarer Bereich.

Bildquelle: Dribbble

Aufgabe : Entwerfen Sie eine Schaltfläche in 20 verschiedenen Stilen. Je größer der Unterschied zwischen ihnen, desto besser. Befolgen Sie für jeden die besten Entwurfspraktiken in Bezug auf Kontrast, Ausgewogenheit usw.

2 - Karten

Karten oder Schachteln sind eine weitere sehr häufige Komponente. Es kann jede Art von Inhalt enthalten, obwohl einige häufig verwendete Elemente eine Kopf- / Fußzeile + Hauptinhalt sein können.

Bildquelle: Dribbble

Aufgabe : Verwenden Sie den Inhalt, bilden Sie die obigen Karten, entwerfen Sie 10 Variationen, idealerweise so unterschiedlich wie möglich. Ändern Sie den Stil, fügen Sie neue Elemente hinzu, drehen Sie sie, verwenden Sie Farbverläufe, Schatten, Symbole und Illustrationen. Versuche wild damit zu werden.

3 - Kommentare

Fast alle Blogs haben eine Art Kommentarsystem. Aber haben Sie gedacht, dass die Kommentarkomponente möglicherweise nicht wirklich einen tatsächlichen Kommentar enthält, sondern eher eine Statusänderung?

Bildquelle: Dribbble

Aufgabe: Das obige Beispiel zeigt genau das. Versuchen Sie nun, alles zu finden, was mit einer Kommentarkomponente zusammenhängt - Kommentare von Benutzern, Status der Aufgabenaktualisierung (die sich im Kommentarbereich befinden), Chat-ähnliche Kommentare, alles. Alles zwischen 7 und 10 Variationen wäre eine gute Zahl. Versuchen Sie erneut, sie alle unterschiedlich zu halten. Mehr recherchieren, Ideen finden, Websites durchsuchen.

Das Ziel dieser Übungen ist es, Wege zu finden, um gemeinsame Elemente auf neue Weise zu tun, von denen Sie vorher nichts wussten .

4 - Schieberegler

Schieberegler sind eine der Komponenten, die viele Front-End-Entwickler aufgrund der Vielzahl von Problemen, die sie verursachen, sowie des starken JavaScript, das möglicherweise im Hintergrund ausgeführt wird, hassen. Das heißt aber nicht, dass Sie keinen machen müssen.

Bildquelle: Dribbble

Aufgabe: Durchsuchen Sie das Web und verschiedene Designs, um mehr über die verschiedenen Layouts und Ansätze zu erfahren. Vielleicht werfen Sie einen Blick auf JS-Bibliotheken, in denen sie Folien erstellen, um zu sehen, was sie haben. Entwerfen Sie von dort aus 10-15 verschiedene Designs für Schieberegler. Versuchen Sie erneut, jedes Design so unterschiedlich wie möglich zu gestalten. Verwenden Sie nicht nur geringfügige Verbesserungen.

5 - Eingabeformulare

Eingabeformulare sind ein weiterer zentraler Bestandteil fast jeder Website. Interessant für sie ist, dass sie Informationen erhalten, anstatt eine auszugeben.

Bildquelle: Dribbble

Aufgabe: Ihre Aufgabe hier ist es, die seltsamsten Informationen zu finden, die jemand auf einer Website benötigt. Laden Sie eine PDF- oder PSD-Datei hoch (wählen Sie eine aus), geben Sie Kreditkarteninformationen an, fügen Sie ein Rezept für Cookies hinzu, berechnen Sie die Farbmischungsverhältnisse und erstellen Sie einen Autohauskonfigurator. Alles, was mir in den Sinn kommt, je einzigartiger, desto besser. Surfen Sie erneut auf Websites, um echte Lösungen zu finden. Entwerfen Sie mindestens 10 verschiedene einzigartige Formen mit einzigartigen Designs.

Zusammenfassung

Der Aufbau einer Designbibliothek als Designer ist einer der wichtigsten Schritte zur Verbesserung Ihres Workflows, zur schnellen Erstellung von Designs, zur Lösung von Problemen für Ihre Kunden und zur Entwicklung einzigartiger und genialer Methoden zur Verbesserung der Benutzererfahrung. Wenn Sie anfangen, jedes Element im Web zu durchsuchen und genau zu betrachten, beginnen Sie, die Aktionen des Benutzers zu berücksichtigen, was er sieht und wie dies verbessert werden könnte.

Wenn Sie die oben genannten Aufgaben als Hausaufgaben verwenden, können Sie Ihr Portfolio auffüllen. Beschränken Sie sich nicht nur auf die 5 genannten Aufgaben, gehen Sie raus, durchsuchen Sie Websites, führen Sie Neugestaltungen durch, studieren Sie sie und entwickeln Sie Ihre Design-Sinne weiter und bauen Sie Ihre eigene visuelle Bibliothek auf!