Designer-Handbuch zum Arbeiten mit Style Guides & Style Tiles
Ein ... Erstellen Markenidentität ist keine leichte Aufgabe. Das erfordert harte Anstrengungen, ist aber auch eine der lohnendsten kreativen Aufgaben. Webprojekte oft Mix Branding mit Interface Design. Dies kann verwirrend sein, da in beiden Bereichen so viel zu tun ist. Style-Anleitungen und Stilfliesen sind großartige Ressourcen für Webdesigner, und auch wenn sie sich ähnlich anhören, leisten sie doch gute Dienste zwei verschiedene aufgaben.
In diesem Beitrag möchte ich auf beides eingehen und die Vorteile abdecken, die Sie mit diesen kreativen Ressourcen erzielen können. Nicht jeder muss (oder ähnliches) Stilvorlagen oder Stilkacheln erstellen. Aber jeder Designer sollte zumindest verstehen, was diese sind und wie sie funktionieren.
Style Guides für das Web
Ich habe unterschiedliche Meinungen zu Stilführern gelesen. Einige sagen, dass dies digitale Modelle sind, während andere sagen, dass Code-basierte Style-Guides am nützlichsten sind.
In jedem Fall ist das Ziel eines Style Guides für das Web dasselbe wie für jedes andere Projekt. Es definiert konsistente Muster, UI-Module und kreative Einstellungen im Designprozess verwendet. Sie können für bestimmte Elemente sehr spezifische und pixelgenaue Messungen festlegen, oder Sie können locker bleiben und Richtlinien anhand von visuellen Beispielen anbieten.
Es gibt keinen richtigen Weg, um einen Style Guide zu erstellen. Der einzig falsche Weg ist, einfach eine Ressource zu erstellen kann nicht von anderen verstanden werden.
Ziel ist es, einen Vermögenswert zu schaffen, der dies tun wird Bestehen Sie den Test der Zeit. Es sollte sein offen für Änderungen wenn neue Ressourcen erstellt werden. Es sollte auch für jeden zugänglich sein, der sich dem Team anschließt, um problemlos in den Guide einzutauchen.
Ein Styleguide sollte sein so detailliert wie für das Projekt benötigt. Normalerweise gehört dazu wiederverwendbare Vermögenswerte, B. Typografie, Schaltflächen, Farbfelder, Texturen und allgemeine Seitenelemente.
Wir haben kürzlich gedeckt Lebensstil-Leitwerkzeuge Das kann Ihnen dabei helfen, Ihren Lebensstil von Grund auf zu erstellen. Diese Living Guides sind eher für Frontend-Entwickler gedacht, können aber für Designer genauso nützlich sein. Weitere Informationen zu diesem Thema finden Sie in diesem Beitrag des Smashing Magazine.
Meine absolute Lieblingsressource ist StyleGuides.io. Es umfasst die Grundlagen der Styleguides für das Web, einschließlich Live-Beispiele und Fallstudien.
Die Musterbibliothek von MailChimp ist eines der besten Beispiele, die Sie bei StyleGuides.io finden können. Es ist ein Online-Live-Style-Guide Definiert das Raster, die Typografie und die Seitenelemente von MailChimp.
Wenn Sie einen Style Guide für ein Web-Unternehmen entwerfen, ist es üblich, alles online zu stellen, aber Sie können auch einen erstellen interne Führungen, und halten Sie sie in einem lokalen Intranet oder hosten Sie sie hinter einer Benutzeranmeldeseite. Die Art und Weise, wie Sie auf einen Style Guide zugreifen, spielt keine Rolle. Sie alle dienen demselben Zweck, bestimmte Farben, Muster und Bilder zu vermitteln passen Sie das Thema eines Webprojekts an.
Weitere Informationen zu diesem Thema finden Sie in den folgenden Beiträgen in Style-Guides:
- Style-Guides für Front-End (24ways.org)
- Erstellen Sie einen Website-Styleguide (creativebloq.com)
- So erstellen Sie den Perfect Web Design Style Guide (dtelepathy.com)
Verzweigung in Stilfliesen
Fliesen gestalten sind ein ganz anderes Tier. Diese Fliesen sind Kreative Elemente, die in der frühen Designphase verwendet werden wenn Sie versuchen, eine bestimmte Ästhetik festzumachen.
Die Style Tiles-Website wurde von Samantha Warren erstellt und bietet alles, was Sie möglicherweise wissen müssen. Es gibt keine spezifische Vorlage zum Entwerfen einer Stilfliese. Aber die Beispiele von Samantha verwenden Überschriften und Absatztypen, Links, Muster, und mögliche Farbauswahl zusammen mit einem Logo mit Logo.
Wenn Sie mit Stilplättchen arbeiten, ist es letztlich Ihr Ziel präsentieren Sie 2-3 verschiedene Stilfliesen zum Kunden oder Kreativdirektor. Diese Fliesen sind detaillierter als ein Moodboard, noch viel weniger detailliert als ein vollständiges Modell.
Fliesen sollten gerade so detailliert sein, dass sie ein Gefühl für das geben Identität und Stimmung der Website. Samantha ermutigt mit Adjektiven um jede Fliese im Detail zu beschreiben.
Kunden können Schauen Sie durch die verschiedenen Fliesen, und Wählen Sie ihre Lieblingsstücke aus. Diese spart Zeit Beim Entwerfen, weil der Kunde bereits Vermögenswerte gesehen hat, die ihm gefallen, so ist die Wahrscheinlichkeit schwerwiegender Änderungen geringer.
Hier ist ein tolles Zitat von der Style Tiles-Website:
Der Vergleich von Stilfliesen mit dem Toolkit eines Innenarchitekten ist durchaus die passende Analogie. Sie möchten sich nicht in ein pixelgenaues Modell stürzen, nur damit der Kunde erkennt, dass er die meisten Farben und Schriftarten hasst.
Verwenden Sie stattdessen Stilkacheln, um eine zu finden gemeinsames Thema oder Bildsprache auf der gesamten Website verwendet werden. Dies kann einschließen Branding / Identität könnte aber auch einschließen UI-Funktionen, B. Dropdown-Menüs oder CTA-Tasten.
Sie sollten diese als verwenden lieferbare Vermögenswerte früh im Prozess. Wenn Sie ein vollständiges Modell abgeschlossen haben, müssen Sie die Stilkachel wirklich nicht mehr referenzieren. Trotzdem können Stilfliesen zu Beginn entscheidend für den kreativen Prozess sein die Designerzeit sparen und Dem Kunden stehen viele Optionen zur Auswahl.
Wenn du möchtest mehr in Stilfliesen eintauchen Schau dir diese verwandten Beiträge an.
- Stilfliesen und wie sie funktionieren
- Stilfliesen: Eine Alternative zu Full Design Comps
- Erstellen von Stilkacheln: Ein einfacher Ansatz für eine Designrichtung
Style Guides vs. Style Tiles
Der Unterschied zwischen Style-Guides und Style-Kacheln ist vage, aber eindeutig. EIN Gestaltungsrichtlinie ist viel mehr detailliert und sollte als verwendet werden ständiger Nachschlagewerk für das Kreativteam. EIN Stil Fliese kann als verwendet werden Moodboard zu Ideen visuell darstellen für dich oder den Kunden. Sie sind oft gewöhnt Ideen entdecken, und wenn das Projekt abgeschlossen ist, haben sie keinen großen Zweck.
Stilfliesen sind an den Rändern oft viel rauer und werden verwendet nur im frühen kreativen Prozess. Ein Style Guide soll verwendet werden während des gesamten Designprozesses und auch später zum Nachschlagen für andere Designer, die möglicherweise auf der Website arbeiten.
Beide haben ihre Vor- und Nachteile. Stilfliesen sind schnell und lustig, aber flüchtig in der Natur. Styleguides sind gründlich und benehmen Sie sich wie visuelle Dokumentation, aber sie auch erfordern viel Arbeit.
Welches sollte man verwenden? Es letztendlich hängt vom Projekt ab.
Kleinere Projekte Wie für kleine Unternehmen funktionieren Websites mit Stilkacheln besser. Die Erstellung eines gesamten Style-Guides für kleine Unternehmen würde viel zu viel Arbeit und abrechnungsfähige Stunden erfordern. Dies ist für die meisten Kunden wahrscheinlich nicht die Kosten wert.
Jedoch a großes Projekt Eine Neugestaltung der NY Times würde sowohl von Stilfliesen als auch von Stilführern profitieren.
Sprache und Stimmung finden für ein neues Projekt ist immer ein wertvoller Prozess. Das macht Stilfliesen perfekt für fast jedes Szenario.
Sie können auch durchkommen ohne eines dieser Vermögenswerte zu erstellen. Einige Designer gehen mit direkt von Wireframes zu detaillierte Modelle. Und einige Kunden möchten nicht einmal einen Style Guide, weil sie sich nicht daran gewöhnen.
Arbeiten Sie pro Projekt und entscheiden Sie, was für jedes Projekt am besten ist.
Live-Beispiele
Lassen Sie uns dies abdecken, indem wir abdecken Beispiele sowohl der Stilführer als auch der Stilfliesen. Ich habe diese Designs beim Durchsuchen von Dribbble gefunden, und ich denke, sie veranschaulichen die Qualität, die Sie in Ihren eigenen Style-Guides oder Style-Kacheln wünschen.
Style Guides
Dieser unglaubliche Airbnb-Styleguide wurde von Derek Bradley erstellt. Es ist sehr einfach, aber es zeigt deutlich das Hauptmuster, Farben und Seitenelemente im Design zu finden.
Hier ist ein viel größerer digitaler Styleguide, der vom Designer Naoshad Alam erstellt wurde. Dieses Beispiel ist viel mehr organisiert mit Abschnitte für Farben, Typografie, Formulare, Oberflächenelemente und andere Funktionen der Benutzeroberfläche.
Ausführlichere Style-Guides würden all diese Gestaltungselemente ins Internet stellen und Codeausschnitte einschließen für jeden.
Designer Cupi Wong hat diesen Leitfaden für AfterShip erstellt. Typografie, Schaltflächen, Farbauswahl und allgemeine Seitenelemente werden sorgfältig erstellt und zusammen in Abschnitten organisiert.
Dies könnte auch ins Internet portiert werden und ist viel umfangreicher als Online-Referenzdokumentation.
UI-Designer Greg Dlubacz teilte seinen eigenen UI-Styleguide für ein Webprojekt. Dieses Ding ist wirklich riesig. Die Vollbildvorschau ist 21.000 Pixel hoch!
Absolut einer der besten digitalen Styleguides, die ich je gesehen habe. Dies könnte auch auf eine Online-Dokumentationsseite portiert werden, auf die die Teammitglieder verweisen können.
Stil Fliesen
Der UI / UX-Designer Abdus Salam entwarf diese Stil-Kachel für eine Bio-Lebensmittel-Website. Es ist sehr einfach mit flache Designelemente, einige kleinere UI-Funktionen, und ein Farbpalette.
Der Designer Adrian Cantelmi hat sich mit seiner Veräußerungskachel sehr gut ausgearbeitet. Es hat Farben und Typografie, beinhaltet aber auch Vektorzeichnungen.
Diese Vektoren helfen dabei Definieren Sie die Marke, die Stimmung und das Gesamtfarbschema der Website.
Die Neugestaltung der Weltmeisterschaftsberater erhielt eine eigene Stilfliese mit sehr grundlegenden Funktionen. Ein paar Icons, einige Farbauswahl und ein paar Button-Designs. Einfachheit ist der Name des Spiels.
Wenn Sie ein Gefühl dafür bekommen, wie die Site aussehen könnte auf einen Blick dann machst du es richtig.
Hier ist ein lustiges Beispiel für ein abgelehntes Stil-Plättchen, das für ein Reiseprojekt verwendet wird. Der Designer Brennan Gleason stellt nur eine kleine Probe der Fliese zur Verfügung, aber Sie können es trotzdem Machen Sie sich ein Bild vom Ambiente der Website.
Letzte Worte
Wenn Sie im Internet suchen, finden Sie viele weitere Beispiele, Tipps und Ressourcen für Bauhandbücher und Stilfliesen. Ich hoffe jedoch, dass dieser Artikel eine Fibel für beide sein kann und Sie fließend in das Verständnis und die Erstellung dieser Design-Assets bringen kann.
