Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Visuals

Aufrechterhaltung der Konsistenz mit einem Website-Styleguide

by
Length:LongLanguages:
This post is part of a series called All About Style Guides.
50 Style Guide Tools, Articles, Books and Resources
Style Tiles: An Alternative to Full Design Comps

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

Die Entwicklung von Styleguides wird für Webdesigner schnell zur gängigen Praxis, insbesondere beim Umgang mit inhaltsintensiven Websites. Mit einem Website-Styleguide können Designer ein Erscheinungsbild festlegen und beibehalten, indem sie eine Reihe von Regeln erstellen, denen das Design folgt. Der Prozess wird flexibel, leicht aktualisierbar und konsistent.

In diesem Tutorial werde ich zeigen, wie Sie einen Styleguide in Ihrer eigenen Site oder Ihrem eigenen Projekt installieren können.

Was genau ist ein Styleguide?

Es gibt eine ganze Weile von Styleguides. Es gibt eine ganze Weile von Styleguides. Noch bis Web mussten die Unternehmen häufig konsistente und einheitliche Grafiken für ihre Marke erstellen. Das wurde und wird durch die Verwendung von Marken- oder Identitätsrichtlinien erreicht. Solche Richtlinien sind normalerweise in einem Dokument enthalten und können nächste Information haben, so wie:

  • Markenfarben
  • Typografie wie Schriftarten, Größen, Zeilen usw.
  • Logo-Positionierung und Verwendung in verschiedenen Situationen, z.B. das Druck-Layout kann vom Web-Layout abweichen
  • Tonfall

Was genau in einem Marken-/Identitätsleitfaden enthalten ist, hängt vom Unternehmen ab. Es kann alles sein, von einem einseitigen Dokument bis hin zu einem umfassenden Dokument wie dem englischen TV-Kanal, dem Styleguide von Channel 4.

C4 style guide

Web-Style-Guides funktionieren ähnlich wie Marken-/Identitätsrichtlinien. Der einzige Unterschied besteht darin, dass Sie keine Identität für eine Marke erstellen, sondern eine Identität für eine Website. Die Marke ist die Website, und wird ein Styleguide erstellt, um Konsistenz und Einheitlichkeit im Design einer Website zu schaffen.

Wann kann ich einen Style Guide verwenden?

Ich sage nicht, dass für jede Website, an der Sie beteiligt sind, ein Styleguide geschrieben werden sollte, aber manchmal ist es sehr sinnvoll, einen zu erstellen.

Zum Beispiel könnte es eine gute Idee sein..

  • ..wenn eine Website inhaltsintensiv ist und viele Inhalte enthält, die auf unterschiedliche Weise angezeigt werden müssen.
  • ..wenn Sie in großen Teams auf einer Website arbeiten. Ein Leitfaden kann nützlich sein, da jede Komponente der Site konsistent erstellt werden muss, unabhängig davon, welches Mitglied des Teams sie erstellt hat. Auch wenn das Mitglied des Teams ein Neuling ist. Ein weiterer Vorteil für Teams besteht darin, dass Sie durch feste Definitions- und Namenskonventionen für jede Website-Komponente klarer und effektiver genau kommunizieren können, auf welche Modulkomponente verwiesen wird.
  • ..wenn eine Site einfach aktualisiert werden muss oder häufig neue Funktionen hinzugefügt werden.

Die Art und Weise, wie wir Websites gestalten, verändert sich derzeit. Wir verstehen, dass das Entwicklung von Websites unter bestimmten Umständen nicht mehr die geeignete Lösung ist. Durch die Erstellung eines Systems und einer Struktur, wie Styleguides, können wir einen Überblick bekommen, wie eine Website zusammenpassen kann, wodurch der gesamte Prozess der Aktualisierung der Website viel einfacher zu handhaben ist.

Nachdem Sie ein wenig mehr über den Styleguide einer Website verstanden haben, werfen wir einen Blick auf einige Beispiele.

Beispiele für Website-Style-Guides

Twitter Bootstrap

Twitter Bootstrap style guide

Die bekanntesten Stilregeln für eine Website finden Sie in Twitter Bootstrap. Obwohl es kein spezieller Styleguide für twitter.com ist, finden Sie eine Reihe seiner Komponenten auf twitter.com und werden häufig für die internen Anwendungen von Twitter verwendet.

Github

Github style guide

Github ist ein gutes Beispiel für eine Website, für die ein Styleguide verwendet werden muss. Github hat ein Team von Designern und Entwicklern, die an seinem Produkt arbeiten. Daher ist es wichtig, die Konsistenz aufrechtzuerhalten, unabhängig davon, wer an neuen Funktionen und Abschnitten für die Website arbeitet.

MailChimp

Mailchimp style guide

Wenn Sie sich dieses Bild des MailChimp-Styleguides ansehen, sehen Sie verschiedene Komponenten auf der MailChimp-Website. Eine Sache, die Sie vielleicht bemerkt haben, ist die benutzerfreundliche menschliche Herangehensweise von MailChimp an den Dialog, den es auf seiner Website verwendet. Dies ist konsistent, da Mailchimp eine Reihe von Regeln erstellt hat, die dieser Tonfall einhalten muss.

Erstellen eines Website-Styleguides in Photoshop

Was Sie in Ihren Styleguide aufnehmen möchten, hängt von der Site ab, für die Sie entwerfen. Eine Website für soziale Netzwerke hat andere Komponenten als eine Website für Filmkritiken.

Sie können so detailliert oder kurz sein, wie Sie möchten, aber je detaillierter Sie sind, desto einheitlicher wird Ihr Design.

Beim Erstellen eines Style Guides ist es wichtig, alle Situationen zu berücksichtigen, in denen sich ein Element oder eine Komponente möglicherweise befindet. Beispielsweise sollten Sie unterschiedliche Status für Schaltflächen und Eingaben sowie aktuelle Menüelemente usw. berücksichtigen. Diese sollten in Ihrer .PSD-Datei demonstriert werden.

Tipp: Mit Layer Comps können Sie verschiedene visuelle Status in Photoshop umschalten. Schauen Sie sich unser aktuelles Tutorial zu diesem Thema an.

Schritt 1: Die Vorbereitung

In diesem Beispiel werde ich einen Styleguide für ein Blog erstellen. Der Blog Style Guide besteht aus Komponenten - diese sind:

  • Autorenkarte
  • Blogeintrag
  • Kommentar
  • Tasten
  • Seitennummerierung
  • Formularelemente
  • Tabellen

Ich werde auch die folgenden sechs Farben verwenden:

  • blau #a4d4e8 - Dies wird als Primärfarbe verwendet
  • grün #aee1a3 - Dies wird als Sekundärfarbe verwendet
  • rot #f67f77 - Dies wird als Sekundärfarbe und für Fehlerwarnungen verwendet
  • schwarz #474747 - Dies wird als primäre Textfarbe verwendet
  • dunkelgrau #919191 - Dies wird als sekundäre Textfarbe verwendet
  • hellgrau #e7e2de - Dies wird für Konturen verwendet

Alle Eingaben und Schaltflächen verwenden einen Rahmenradius von 5 Pixel, während alle Komponenten-Widgets einen Rahmenradius von 0 Pixel haben, wodurch sie eine rechteckige Form haben.

Schritt 2: Einrichten unseres Dokuments

Setting up photoshop grid

Richten Sie einen neuen Dokumentarbeitsbereich ein. Ich stelle meine auf 580px Breite ein. Das ist passende Größe zum Bearbeiten und sie hat einen ausreichend großen Raum für ein modulbasiertes Design.

Ich verwende ein Raster (Ansicht > Anzeigen > Raster), um mich bei meinem Design zu unterstützen und alles gut auszurichten. Ich habe mich für ein 20px x 20px-Raster mit einer Unterteilung alle 10px entschieden. Dies kann geändert werden, indem Sie zu Einstellungen > Hilfslinien, Raster und Slices gehen.

Sie sehen dann den Bildschirm unten. Hier können Sie den Rasterabstand nach Belieben ändern, aber ich finde, dass eine 20-Pixel-Rasterlinie mit auf 2 eingestellten Unterteilungen gut funktioniert. Ich habe auch einige Anleitungen mit einer Breite von 460 Pixel auf beiden Seiten meines Dokuments eingerichtet, um mir zu helfen. Darüber hinaus kann es sinnvoll sein, "Fang" zu aktivieren, indem Sie auf "Ansicht" > "Fang" klicken. Dies stellt sicher, dass Ihre Elemente exakte Pixelmaße erhalten und nicht mit streunenden Subpixel-Messungen abwandern.

photoshop preferences grid

Schritt 3: Die Autorenkomponente

author component web site style guide

Das erste, was wir erstellen werden, ist das Autorenkomponentenmodul. Soziale Netzwerke wie Twitter haben diese Autorenkarten in letzter Zeit sehr beliebt gemacht, und ich dachte, es wäre vielleicht schön, sie als Teil unseres Website-Styleguides zu verwenden. Auf diese Weise kann jeder Autor unseres Blogs seine eigene Autorenkarte haben.

Wählen Sie zunächst das Formwerkzeug aus und wählen Sie eine Vordergrundfarbe Weiß aus. Erstellen Sie mit dieser Option ein Rechteck mit einer Größe von 380 x 250 Pixel. Sobald dies erstellt wurde, klicken Sie mit der rechten Maustaste auf die Ebene für diese Form und wählen Sie "Mischoptionen". Das Mischoptionsfenster sollte jetzt angezeigt werden. Wählen Sie in der linken Seitenleiste des Popups "Strich" und geben Sie ihm eine Strichgröße von 1 Pixel. Die Farbe, die wir verwenden werden, ist das hellgraue #e7e2de aus unserem Farbset.

Wählen Sie nun 'Äußeres Leuchten' und stellen Sie die Farbe des äußeren Glühens auf dieselbe Farbe ein, verringern Sie jedoch die Deckkraft auf 80. Stellen Sie die Streuung des Glühens auf 100% und die Größe auf 4. Dies gibt unserer Komponente a Grenze mit einem dicken Schein, der als Grenze getarnt ist.

Photoshop layer styles

Die Ebenenstile, die wir gerade erstellt haben, werden häufig in anderen Elementen verwendet, die wir später erstellen. Hier ist jedoch ein kurzer Tipp, wie Sie dieselben Ebenenstile für jedes andere Element verwenden können. Wenn Sie mit der rechten Maustaste auf die Ebene des gerade erstellten Elements klicken und auf "Ebenenstile kopieren" klicken. Dies macht genau das, was es sagt und ermöglicht es Ihnen, es auf jeder anderen Ebene einzufügen, die Sie haben. Klicken Sie dazu einfach mit der rechten Maustaste auf die Ebene, zu der Sie den Stil hinzufügen möchten, und wählen Sie "Ebenenstil einfügen". Notieren Sie sich dies, da wir es in diesem Tutorial ziemlich oft verwenden werden. Wir werden diesen bestimmten Ebenenstil für dieses Element als "main layer style" bezeichnen.

Nehmen Sie für den Autoren-Avatar ein Beispiel für ein Foto und ändern Sie die Größe auf 75 x 75 Pixel. Wählen Sie dann das Werkzeug "Elliptisches Auswahlrechteck" und ziehen Sie den Mauszeiger über das Bild, beginnend von der oberen linken Ecke nach unten rechts. Halten Sie dabei die Umschalttaste gedrückt, um die Proportionen zu beschränken und einen perfekten Kreis zu erstellen. Wenn Sie eine Auswahl über dem Bild erstellt haben, kopieren Sie diese und fügen Sie sie in Ihr Styleguide-Dokument ein. Kopieren Sie unser Element 'main layer style' und fügen Sie es ein. Bearbeiten Sie dann die Ebenenstile und entfernen Sie den Strich.

Um die drei Statistikfelder zu erstellen, erstellen Sie zunächst drei weiße Rechteckformen, die gleichmäßig auf die 380 Pixel aufgeteilt werden können. Wenn Sie dies getan haben, nehmen Sie eine davon und öffnen Sie das Ebenenstile-Bedienfeld erneut, indem Sie mit der rechten Maustaste auf die Ebene klicken. Wählen Sie dann 'Innerer Schatten'. Stellen Sie sicher, dass der Mischmodus auf Normal und die Deckkraft auf 100% eingestellt ist. Stellen Sie den Winkel auf '-90' und ändern Sie den Abstand auf 5px. Verwenden Sie für die Farbe unsere primäre blaue Farbe #a4d4e8. Wiederholen Sie diesen Vorgang dann für die anderen 2 Statistikfelder, aber ändern Sie diesmal ihre inneren Schattenfarben in jede unserer Sekundärfarben; grün #aee1a3 und rot #f67f77. Fügen Sie dann den Text für jede Statistik hinzu. In meinem habe ich mich entschieden, die Anzahl der Follower, Follower und Posts anzuzeigen.

Photoshop inner shadow style

Um den Text und die Biografie des Autors hinzuzufügen, habe ich "Droid Sans" verwendet, das als Google-Webschrift verfügbar ist.

Erstellen Sie für das kleine Eckdreieck oben rechts auf der Autorenkarte ein Quadrat mit einer Größe von 50 x 50 Pixel mit unserer Grundfarbe Blau und wählen Sie dann das Werkzeug "Polygonales Lasso" aus. Zeichnen Sie eine gerade Linie von links oben auf dem Quadrat nach rechts unten und zeichnen Sie dann um den linken Teil des Quadrats. Sobald dies erledigt ist, wählen Sie Ebene > Ebenenmaske > Auswahl ausblenden und das Dreieck wird erstellt.

Wählen Sie für den Stern das Formwerkzeug 'Polygon'. Stellen Sie sicher, dass die Seiten im oberen Menü auf '5' eingestellt sind. Wählen Sie dann den kleinen Pfeil aus, der sich neben dem Wort "Seiten" befindet. Wählen Sie Stern und Seiten einrücken um 50%. Zeichnen Sie dann einen weißen Stern über das Dreieck und platzieren Sie ihn in der oberen rechten Ecke der Autorenkarte.

Schritt 4: Die Blogpost-Komponente

Die Blogpost-Komponente wird auf die gleiche Weise erstellt, wie wir das Hauptelement der obigen Autorenkarte erstellt haben.

Blog post component

Ich habe dann den 'main layer style' hinzugefügt. Die Miniaturansicht des 70 x 70 Pixel großen Bildes befindet sich links davon. Ich habe drei verschiedene Textstile erstellt. die Hauptüberschrift, das Datum und den Absatztext. Unten rechts habe ich eine Schaltfläche "Mehr lesen" hinzugefügt. Siehe Schritt 6 zum Erstellen der Schaltflächen.

Schritt 5: Die Kommentarkomponente

Um die eigentliche Kommentarblase zu erstellen, erstellen Sie ein abgerundetes Rechteck mit einer Größe von 316 x 90 Pixel und fügen Sie dem 'main layer style' hinzu.

Blog comment component

Erstellen Sie eine quadratische Form von 15 x 15 Pixel und drehen Sie diese Option Bearbeiten > Pfad transformieren > Drehen. Drehen Sie sie dann im Optionsmenü um 45 Grad. Wählen Sie die tatsächliche Formebene aus und gehen Sie zu Bearbeiten > Kopieren. Gehen Sie dann zu dem großen abgerundeten Rechteck, das wir gerade erstellt haben. Stellen Sie sicher, dass das Quadrat an einer beliebigen Stelle ausgerichtet ist, an der die Spitze angebracht werden soll. Gehen Sie dann zu Bearbeiten > Einfügen, um die beiden Formen zusammenzuführen. Fügen Sie den Hauptebenenstil hinzu und es gibt die Sprechblase!

rotate shape photoshop

Ich habe beschlossen, zwei Komponenten für Post-Kommentare hinzuzufügen. Eine ist eine Standardkommentarkomponente und die andere ein Autorenkommentar. Für das Autorenbeispiel habe ich den Strich so geändert, dass er die primäre blaue Farbe ist.

Schritt 6: Tasten

Die Schaltflächen sind relativ einfach zu erstellen, da wir einige Richtlinien festgelegt haben, bevor wir mit unserem Styleguide beginnen.

Blog button component

Um eine große Schaltfläche zu erstellen, wählen Sie das Werkzeug "Abgerundetes Rechteck". Stellen Sie in der Leiste "Optionen" sicher, dass der Radius auf "5 Pixel" eingestellt ist, und zeichnen Sie ein primäres blaues Rechteck mit 125 x 40 Pixel. Fügen Sie dann den Text Ihrer Wahl hinzu. Duplizieren Sie die Ebene, indem Sie mit der rechten Maustaste auf die Ebene klicken und "Ebene duplizieren" auswählen. Sobald Sie dies getan haben, ändern Sie die Farbe in eine unserer Sekundärfarben. Wiederholen Sie diesen Vorgang für die Schaltfläche mit der anderen Sekundärfarbe. Wiederholen Sie diesen Vorgang auch für die kleinen Schaltflächen, aber machen Sie diesmal die Rechtecke 30 x 105 Pixel und für die Schaltfläche "Handlungsaufforderung" 374 x 40 Pixel.

Für die Schwebezustände habe ich einen subtilen Verlauf hinzugefügt, indem ich einen Ebenenstil "Verlaufsüberlagerung" hinzugefügt habe. Stellen Sie den Farbmodus auf "Normal" und die Deckkraft auf 10%, wobei der Farbverlauf von Schwarz nach Weiß wechselt. Dies ist nur ein Hinweis darauf, dass ein Benutzer über die Schaltfläche gerollt hat.

Erstellen Sie für den gruppierten Schaltflächensatz ein abgerundetes Rechteck mit einer Breite von 380 x 30 Pixel und teilen Sie es dann in vier gleich große Schaltflächen auf. Sie können dies entweder durch Zeichnen einer 1-Pixel-Bleistiftlinie oder durch Ausschneiden von Abschnitten mit einem 1-Pixel-Werkzeug für rechteckige Auswahlrechtecke tun.

Schritt 7: Paginierung

Die Paginierung wird auf ähnliche Weise wie das oben erstellte gruppierte Schaltflächenset erstellt. Anstatt diesmal vier gleich große Schaltflächen zu erstellen, erstellen Sie zehn gleich große quadratische Schaltflächen, wobei die Pfeiltasten an beiden Enden etwas größer sind. Das Bild unten zeigt dies. Für die Pfeile habe ich einige vorgefertigte Formen verwendet, die speziell für Webdesign-Pfeile bestimmt sind.

Schritt 8: Formulare

Inzwischen sollten Sie erkannt haben, wie einfach wir uns das Leben machen, indem wir viele Elemente und Stile wiederholen. Das Tolle daran ist, dass es Konsistenz in unserem Design schafft.

Blog form component

Die Eingaben und Textbereiche für diesen Satz werden mit den zuvor verwendeten Methoden erstellt. Zeichnen Sie für die Eingaben ein abgerundetes Rechteck mit 380 x 40 Pixel und wenden Sie die Strichfarbe an. Erweitern Sie die Höhe des Textbereichs ein wenig auf etwa 90 Pixel. Für den Fokus auf die Elemente habe ich unseren 'main layer style' verwendet und ein zusätzliches Element für Fehler- und Erfolgsmeldungen hinzugefügt.

Abschluss

Es liegt an Ihnen, wie viele Elemente Sie für Ihren Styleguide erstellen möchten. Sie kennen die Anforderungen für die Site, an der Sie arbeiten, und wissen, was Sie dafür benötigen und was nicht. Das Tolle an der Erstellung eines Styleguides ist, dass alle Elemente, die Sie in Zukunft einführen, Regeln und Praktiken haben, die eingehalten werden müssen, und dass dies Konsistenz ermöglicht.

Es schafft Vertrautheit mit den Benutzern und ermöglicht eine insgesamt bessere Erfahrung sowohl ästhetisch als auch funktional.

Weitere Links, Lesen und Ressourcen

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.