Share
Das Erstellen von Style-Guides ist für Webdesigner schnell üblich, insbesondere bei 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 Ihnen zeigen, wie Sie einen Style Guide in Ihre eigene Site oder in Ihr Projekt integrieren können.
Styleguides gibt es schon eine ganze Weile. Bereits vor den Tagen des Internets mussten Unternehmen häufig konsistente und einheitliche Visuals für ihre Marke erstellen. Dies wurde und wird durch die Verwendung von Marken- oder Identitätsrichtlinien erreicht. Solche Richtlinien sind in der Regel in einem Dokument festgelegt und können Informationen enthalten wie:
Was genau in einem Marken- / Identitätsführer enthalten ist, hängt vom Unternehmen ab. Es kann alles von einem Dokument auf einer Seite bis hin zu einem umfangreichen Dokument sein, wie dem englischen Fernsehsender, dem Style Guide von Channel 4.
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. Dieses Mal ist die Marke die Website, und als solche wird ein Style Guide erstellt, um Konsistenz und Einheit im Design einer Website zu schaffen.
Ich sage nicht, dass ein Styleguide geschrieben werden sollte jeden Website, an der Sie beteiligt sind, aber manchmal ist es sinnvoll, eine zu erstellen.
Zum Beispiel könnte es eine gute Idee sein ...
Die Art und Weise, wie wir Websites gestalten, durchläuft derzeit eine Verschiebung. Wir beginnen zu erkennen, dass das Erstellen von Webseiten für einzelne Seiten unter Umständen nicht mehr die geeignete Lösung ist. Durch die Erstellung eines Systems und einer Struktur, z. B. eines Style-Guides, können wir den Gesamtzusammenhang einer Website erkennen und so den gesamten Prozess der Aktualisierung der Website einfacher handhaben.
Nun, da Sie ein wenig mehr über den Style Guide einer Website verstehen, wollen wir uns einige Beispiele ansehen.
Die wohl bekanntesten Stilregeln für eine Website können in Twitters 'Bootstrap gefunden werden. Obwohl dies kein spezifischer Style-Guide für twitter.com ist, sind einige seiner Komponenten auf twitter.com zu finden und werden häufig für interne Anwendungen von Twitter verwendet.
Github ist ein gutes Beispiel für eine Website, die einen Style Guide verwenden muss. Github hat ein Team von Designern und Entwicklern, die an seinem Produkt arbeiten. Daher ist es unerlässlich, die Konsistenz zu wahren, unabhängig davon, wer an neuen Funktionen und Abschnitten für die Website arbeitet.
Wenn Sie dieses Bild des MailChimp-Styleguides betrachten, sehen Sie verschiedene Komponenten rund um die MailChimp-Website. Sie haben vielleicht bemerkt, dass MailChimp den benutzerfreundlichen Umgang mit dem Dialog auf seiner gesamten Website nutzt. Dies ist konsistent, da Mailchimp eine Reihe von Regeln erstellt hat, an die sich dieser Tonfall halten muss.
Was Sie in Ihren Styleguide aufnehmen möchten, hängt von der Site ab, für die Sie einen Entwurf erstellen. Beispielsweise hat eine Website für soziale Netzwerke andere Komponenten als eine Website zur Überprüfung von Filmen.
Sie können so detailliert oder so kurz sein, wie Sie möchten, aber je detaillierter Sie sind, desto einheitlicher wird Ihr Design sein.
Bei der Erstellung eines Style-Guides müssen Sie alle Situationen einbeziehen, in denen sich ein Element oder eine Komponente befinden kann. Beispielsweise sollten Sie verschiedene Zustände für Schaltflächen und Eingaben sowie aktuelle Menüelemente usw. berücksichtigen. Diese sollten in Ihrem Style demonstriert werden. PSD-Datei.
Spitze: Sie können verschiedene visuelle Status in Photoshop mithilfe von Layer-Comps umschalten. Schauen Sie sich unser aktuelles Tutorial zu diesem Thema an.In diesem Beispiel werde ich einen Style Guide für ein Blog erstellen. Der Blog-Style-Guide besteht aus Komponenten - dies sind:
Ich werde auch die folgenden sechs Farben verwenden:
Alle Eingaben und Schaltflächen verwenden einen Randradius von 5 Pixeln, während alle Komponenten-Widgets einen Grenzradius von 0 Pixeln haben, so dass sie rechteckig sind.
Richten Sie zunächst einen neuen Dokumentarbeitsbereich ein. Ich habe mich entschlossen, meine auf 580px breit einzustellen. Dies ist eine angenehme Größe, an der gearbeitet werden kann, und bietet eine gute Größe für ein modulbasiertes Design.
Ich verwende ein Raster (Ansicht> Anzeigen> Raster), um mir bei der Gestaltung zu helfen und alles in Ordnung zu halten. Ich habe mich für ein 20px x 20px-Raster mit einer Unterteilung alle 10px entschieden. Dies kann über Voreinstellungen> Hilfslinien, Raster und Slices geändert werden.
Sie sehen dann den Bildschirm unten. Hier können Sie den Rasterabstand beliebig ändern, aber ich finde, dass eine 20px-Rasterlinie mit auf 2 eingestellten Unterteilungen gut funktioniert. Ich habe außerdem auf beiden Seiten meines Dokuments einige Hilfslinien mit einer Breite von 460 Pixeln eingerichtet, um mir eine helfende Hand zu geben. Darüber hinaus kann es sinnvoll sein, "Snap" über "Ansicht"> "Snap" zu aktivieren. Dadurch wird sichergestellt, dass Ihre Elemente bei exakten Pixelmessungen enden und bei streunenden Subpixel-Messungen nicht davonkommen.
Das erste, was wir erstellen werden, ist das Modul der Komponentenkomponente. Soziale Netzwerke wie Twitter haben diese Autorenkarten in letzter Zeit recht populär gemacht, und ich dachte, es wäre vielleicht schön, sie als Teil unseres Website-Style-Guides zu verwenden. Auf diese Weise kann jeder Autor unseres Blogs eine eigene Autorenkarte haben.
Beginnen Sie mit der Auswahl des Formwerkzeugs und wählen Sie die Vordergrundfarbe Weiß aus. Wenn Sie diese Option ausgewählt haben, erstellen Sie ein 380x250px-Rechteck. Nachdem Sie diese erstellt haben, klicken Sie mit der rechten Maustaste auf die Ebene für diese Form, und wählen Sie "Fülloptionen" aus. Das Fülloptionsfenster sollte jetzt angezeigt werden. Wählen Sie in der linken Seitenleiste des Popup-Fensters 'Stroke' und geben Sie eine Strichstärke von 1 Pixel. Die Farbe, die wir verwenden werden, ist die hellgraue # e7e2de aus unserem Farbsatz.
Wählen Sie nun "Äußeres Glühen" und stellen Sie die Farbe des äußeren Glühens auf dieselbe Farbe ein, verringern Sie jedoch die Deckkraft auf 80. Setzen Sie die Streuung des Glühens auf 100% und die Größe des Glühens auf 4. Dies gibt unserer Komponente ein Grenze mit einem dicken Schimmer, der als Grenze getarnt ist.
Die eben erstellten Ebenenstile werden häufig in anderen Elementen verwendet, die wir später erstellen. Es folgt jedoch ein kurzer Tipp, wie Sie dieselben Ebenenstile für andere Elemente verwenden können. Wenn Sie mit der rechten Maustaste auf die Ebene des gerade erstellten Elements klicken, klicken Sie auf "Ebenenstile kopieren". Dies wird genau das tun, was es sagt, und Sie können es auf jeder anderen Ebene einfügen, die Sie haben. Klicken Sie dazu einfach mit der rechten Maustaste auf die Ebene, der Sie den Stil hinzufügen möchten, und wählen Sie "Ebenenstil einfügen". Notieren Sie sich dies, da wir es in diesem Tut ziemlich oft verwenden werden. Wir bezeichnen diesen bestimmten Ebenenstil für dieses Element als "Hauptschichtstil"..
Nehmen Sie für den Autoren-Avatar ein Beispiel für ein Foto und ändern Sie es auf 75 x 75 Pixel. Wählen Sie dann das Werkzeug "Elliptical Marquee" aus und ziehen Sie den Mauszeiger über das Bild. Beginnen Sie dabei mit der oberen linken Ecke nach unten rechts. Halten Sie die Umschalttaste gedrückt, während Sie dies tun, um die Proportionen einzuschränken und einen perfekten Kreis zu erstellen. Sobald Sie eine Auswahl über dem Bild erstellt haben, kopieren Sie diese und fügen Sie sie in Ihr Styleguide-Dokument ein. Kopieren Sie das Element "Hauptschichtstil", fügen Sie es ein, bearbeiten Sie die Ebenenstile und entfernen Sie den Strich.
Um die drei Statistikfelder zu erstellen, erstellen Sie zunächst drei weiße Rechteckformen, die gleichmäßig zwischen den 380 Pixeln aufgeteilt werden können. Wenn Sie dies getan haben, nehmen Sie eine davon und öffnen Sie das Ebenenstilfenster 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 ein 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 Statistikboxen, ändern Sie jedoch dieses Mal 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 die Anzahl der Follower, der Follower und der Posts angezeigt.
Um den Text und die Biografie des Autors hinzuzufügen, habe ich 'Droid Sans' gewählt, verfügbar als Google-Webfont.
Erstellen Sie für das kleine Eckdreieck oben rechts auf der Autorenkarte ein 50px x 50px-Quadrat mit unserer Primärfarbe Blau und wählen Sie dann das "Polygonal-Lasso-Werkzeug" aus. Zeichnen Sie eine gerade Linie von links oben des Quadrats nach rechts unten und zeichnen Sie dann den linken Teil des Quadrats. Sobald dies erledigt ist, wählen Sie Ebene> Ebenenmaske> Auswahl ausblenden. Daraufhin wird das Dreieck 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%. Dann zeichnen Sie einen weißen Stern auf das Dreieck und platzieren Sie ihn in der rechten oberen Ecke der Autorenkarte.
Die Blogpost-Komponente wird auf dieselbe Weise erstellt, wie wir das Hauptelement der obigen Autorenkarte erstellt haben.
Ich habe dann den 'Hauptschichtstil' hinzugefügt. Das 70px x 70px-Bildminiaturbild befindet sich links davon. Ich habe drei verschiedene Textstile erstellt. die Hauptüberschrift, das Datum und der Absatztext. Rechts unten habe ich eine Schaltfläche "Weitere Informationen" hinzugefügt. Siehe Schritt 6 zum Erstellen der Schaltflächen.
Um die eigentliche Kommentarblase zu erstellen, erstellen Sie ein abgerundetes 316px x 90px-Rechteck und fügen Sie den 'Haupt-Layer-Stil' hinzu.
Erstellen Sie eine quadratische 15px x 15px-Form, und drehen Sie diese Option Bearbeiten> Pfad transformieren> Drehen. Drehen Sie sie anschließend 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. Vergewissern Sie sich, dass das Quadrat an den Stellen ausgerichtet ist, an denen die Spitze angebracht werden soll. Gehen Sie dann zu Bearbeiten> Einfügen. Dadurch werden die beiden Formen zusammengeführt. Fügen Sie den Hauptschichtstil hinzu und es gibt die Sprechblase!
Ich habe mich entschieden, zwei Postkommentarkomponenten hinzuzufügen. eine ist eine Standardkommentar-Komponente und die andere ist ein Autorenkommentar. Für das Autorenbeispiel habe ich den Strich in die primäre blaue Farbe geändert.
Die Schaltflächen sind relativ einfach zu erstellen, da wir einige Richtlinien festgelegt haben, bevor wir uns in unserem Style Guide befinden.
Um eine große Schaltfläche zu erstellen, wählen Sie das Werkzeug "abgerundetes Rechteck" aus. Stellen Sie in der Optionsleiste sicher, dass der Radius auf '5px' gesetzt ist, und zeichnen Sie ein 125px x 40px primäres blaues Rechteck. 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. Wenn 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 für die kleinen Schaltflächen, machen Sie diesmal jedoch die Rechtecke 30px x 105px und für die Schaltfläche "Aufruf zur Aktion" 374px x 40px.
Für die Hover-Zustände habe ich einen subtilen Farbverlauf hinzugefügt, indem ein Ebenenstil mit "Verlaufsüberlagerung" hinzugefügt wurde. Setzen Sie den Farbmodus auf "Normal" und die Deckkraft auf 10%, wobei der Verlauf von Schwarz zu Weiß wechselt. Dies reicht als Hinweis, dass ein Benutzer die Schaltfläche überrollt hat.
Erstellen Sie für den gruppierten Schaltflächensatz ein abgerundetes Rechteck mit einer Breite von 380px x 30px und teilen Sie es in vier gleich große Schaltflächen auf. Sie können dies tun, indem Sie entweder eine 1px-Bleistiftlinie zeichnen oder Abschnitte mit einem 1px-Werkzeug 'Rechteckiges Marquee' ausschneiden.
Die Paginierung wird auf ähnliche Weise wie der zuvor erstellte gruppierte Schaltflächensatz erstellt. Erstellen Sie jedoch nicht vier gleich große Schaltflächen, sondern 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 gedacht sind.
Inzwischen sollten Sie wissen, wie einfach wir uns das Leben machen, indem wir viele Elemente und Stile wiederholen. Das Tolle daran ist, dass es eine Konsistenz in unserem Design schafft.
Die Eingaben und Textbereiche für diesen Satz werden mit den zuvor verwendeten Methoden erstellt. Zeichnen Sie für die Eingaben ein abgerundetes Rechteck von 380px x 40px und wenden Sie die Strichfarbe an. Erweitern Sie die Höhe des Textbereichs etwas auf etwa 90px. Für den Fokus auf die Elemente habe ich unseren "Hauptschichtstil" verwendet und ein zusätzliches Element für Fehler- und Erfolgsmeldungen hinzugefügt.
Es liegt an Ihnen, wie viele Elemente Sie für Ihren Style Guide erstellen möchten. Sie kennen die Anforderungen für die Site, an der Sie gerade arbeiten, und wissen, was Sie dafür brauchen und was nicht. Das Tolle an der Erstellung eines Style-Guides ist, dass für alle Elemente, die Sie in der Zukunft einführen, Regeln und Praktiken gelten, die eingehalten werden müssen, und dass dies konsistent ist.
Es wird Vertrautheit mit den Benutzern schaffen und eine insgesamt bessere Erfahrung sowohl ästhetisch als auch funktional ermöglichen.
Accentsconagua