Webdesign: Erstellen eines Styleguide für das Webdesign | Jake Fleming | Skillshare

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

Webdesign: Erstellen eines Styleguide für das Webdesign

teacher avatar Jake Fleming, Designer & illustrator

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

8 Einheiten (36 Min.)
    • 1. Einführung

      0:29
    • 2. Deine Aufgabe: Gestalte einen Web

      5:00
    • 3. Schrift und Ton

      7:56
    • 4. Layout und Raum

      4:06
    • 5. Farbe

      3:25
    • 6. Icons und Bilder

      2:43
    • 7. Formen und Knöpfe

      7:10
    • 8. Sample Page

      5:27
  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Alle Niveaus

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

5.114

Teilnehmer:innen

31

Projekte

Über diesen Kurs

Begleite mich in diesem essentiellen Kurs zum Erstellen eines Stil-Leitfaden Du lernst die Bausteine für eine schöne und nutzbare Website und erstellst einen Stilleitfaden für deine Website, der alle notwendigen Elemente eingeht: Typ, Raum, Farbe, Zeichen, Form, Knöpfe und mehr. Dieser Kurs bietet dir alles mit dem to und du kannst die Vision für dich oder dein Unternehmen im Web. Du wirst den Kurs mit einer kompletten web und einer Sample Page für deine Website fertigstellen.

Folge meiner Arbeit auf
Instagram | Twitter

Triff deine:n Kursleiter:in

Teacher Profile Image

Jake Fleming

Designer & illustrator

Kursleiter:in

Jake Fleming has been a designer and illustrator for most of his life. He currently designs for the web at Appiphony. His passion for design and video games helped fuel the creation of Piasa Games, an indie game studio he co-founded with Corey Warning and Mike Blazek.

Vollständiges Profil ansehen

Kursbewertungen

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%
Bewertungsarchiv

Im Oktober 2018 haben wir unser Bewertungssystem aktualisiert, um das Verfahren unserer Feedback-Erhebung zu verbessern. Nachfolgend die Bewertungen, die vor diesem Update verfasst wurden.

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen bei Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Einführung: Hey, ich bin Jake Fleming. Ich bin Designer und Front-End-Entwickler von Tag zu Tag auf Co-Gründer und Designer ATP. Ich sah Spiele bei Nacht in dieser Klasse ist die Erstellung eines Web-Design-Styleguide. Ich werde zuerst über das Warum und den Wind sprechen, um einen Styleguide zu verwenden, was genau enthalten sein sollte. Dann werden wir in den Prozess der tatsächlichen Erstellung des Leitfadens eintauchen. Lasst uns anfangen. 2. Deine Aufgabe: Gestalte einen Web: Also, was ist eigentlich ein Styleguide ? Und warum ich im Fenster einen brauche. Ein Styleguide ist eine Sammlung von Pre-Design-Elementen, Grafiken und Regeln zu befolgen, um sicherzustellen, dass jede Seite der Website wird aussehen und fühlen sich konsistent zu den Websites. Benutzer denken, ein Styleguide ist eine Toolbox, und Sie selbst ist der Handwerker. Wenn ein Handwerker etwas bauen muss, wird er immer in die Toolbox gehen und die richtigen Werkzeuge für den Job auswählen. Er wird nicht jedes Mal neue Werkzeuge kaufen, wenn er einen Stuhl bauen muss. Und wenn dieser Handwerker andere Leute hat, die helfen und Stühle bauen, wird er wollen, dass sie alle gleich aussehen. So wird er nicht nur eine Reihe von Werkzeugen haben, die sie verwenden können, sondern auch eine Reihe von Regeln. Wenn Sie vorhaben, eine Webseite zu erstellen, werden Sie diesen Leitfaden haben. Sie können das richtige Werkzeug für den Job referenzieren und auswählen, außer anstelle von Hämmern, Nägeln und Maßband, haben Sie Typografie, Komponenten und Abstand. Es ist wichtig, einen Styleguide zu haben, besonders wenn Sie in einem Team mit mehreren Designern und Entwicklern sind, alle an einer riesigen Website oder einer Anwendung mit vielen verschiedenen Zuständen arbeiten. Der Leitfaden wird dazu beitragen, sicherzustellen, dass die Menschen nicht nur Dinge erfinden, während sie gehen. Es wird Zeiten geben, in denen die Komponenten, die Sie in Ihrem Styleguide haben, den Job nicht erledigen, und Sie müssen etwas anderes hinzufügen. Aber mach dir keine Sorgen. Das ist vollkommen in Ordnung, solange die Zugabe wirklich benötigt wird. Wenn Sie in der Lage sind, HTML und CSS oder noch besser, SAS zu schreiben oder ein Teammitglied haben, das kann, wäre es eine gute Idee. Dakota belie Version des Style-Leitfadens, wo Entwickler auf greifen tatsächlichen Code gehen können, während Sie Ihre Designs zu entwickeln. Wenn Sie versuchen, eine Anleitung für Komponenten zu erstellen, die bereits vorhanden sind, aber nicht auf bestimmte Weise organisiert sind, kann Ihnen dieser Kurs helfen. Aber ich denke, Sie werden diesen Kurs auch hilfreich finden, wenn Sie von Grund auf mit einem neuen Projekt beginnen . Also, jetzt, wo Sie irgendwie verstehen, das Konzept hinter, warum Sie eigentlich wollen, um einen Styleguide verwenden , lassen Sie uns über die verschiedenen Komponenten des Styleguide sprechen sollte, bevor er beginnt. Das erste, was Sie in Betracht ziehen möchten, ist die Marke. Die Chancen stehen, wenn Sie diesen Kurs nehmen, haben Sie eine Website im Auge, dass Sie einen Styleguide für das erstellen möchten , was die Website darstellen wird? Was ist die Vision, die Mission, die Werte dieses Ortes? Diese Dinge sollten während des gesamten Prozesses im Auge behalten werden. Als nächstes wird mit der Marke im Auge wollen, um die Typografie zu definieren. Typografie ist einer der, wenn nicht der wichtigste Teil einer Website und kann schwierig sein, um richtig zu machen. Ich werde nicht in die verschiedenen Theorien hinter mir gehen. Typografie in diesem Kurs konzentriert sich nur auf die Definition einer Grundgröße Farbe und warten Body Copy Links, Buttons , Schlagzeilen, etc. Der Ton der Stimme ist ebenfalls wichtig. Anstatt Fülltext wie Laura MIPs zu verwenden, , ist es besser,Inhalte mit dem Ton zu schreiben, der mit Ihrem Markenfehlertext in einer Eingabe übereinstimmt . Zum Beispiel, anstatt Laure MIPS um zu verwenden oder einfach zu tippen, ist dies ein Fehler. Versuchen Sie etwas wie Entschuldigung, dieses Feld ist Pflichtfeld. ist eine gute Idee, eine allgemeine Regel für den Abstand zu erstellen. Dies wird Ihnen helfen, Ihren Rasterraum zwischen den Elementgrößen für Schaltflächen usw. zu finden. Farbe ist sehr wichtig, um Ihren Styleguide zu identifizieren. Sie möchten nicht, dass 50 verschiedene Blautöne auf Ihrer massiven Website erscheinen, weil Entwickler den Hex-Code einfach nicht zur Hand hatten. Durch die Definition von Primärfarben für Dinge wie Schaltflächen, Links und Nap Bars sowie eine sekundäre Farben für Warnungen, Fehler und Beschriftungen. Sie können diese Kopfschmerzen vermeiden. Icons können eine große Hilfe und die Kommunikation von Informationen an die Benutzer der Website sein. Einige Lufttexte in einem Feld sind dem Benutzer möglicherweise nicht klar, dass etwas nicht stimmt, aber das Warnungssymbol daneben setzen und es könnte klarer sein. Es ist wichtig, dass die Symbole, die Sie für Ihre Website auswählen, zur Marke passen. Wenn Sie versuchen, eine Vertrauens- und Stabilitätsbeziehung mit Ihrer Website zu erstellen, möchten Sie wahrscheinlich saubere und einfache Symbole verwenden. Wenn Sie versuchen, eine hippe, lustige und lebendige Atmosphäre zu schaffen , vielleicht gehen Sie mit etwas mutigeres und farbenfrohes. Bilder können auf vielfältige Weise auf einem Heldenbild verwendet werden, begleitet von einem Aufruf zum Handeln über einem Textblock, um den Leserkontext weiter zu helfen oder einfach von selbst, das Bild könnte ein Stockfoto, eine Momentaufnahme von Teamkollegen für die Info Seite oder Illustrationen helfen, Produkt zu beschreiben. In jedem Fall sollten Bilder zur Marke passen und als Werkzeug verwendet werden, um Benutzer zu engagieren. Es ist gut, Beispiele für diese Situationen in Ihrem Stil zu haben. Guide-Formulare ermöglichen es Benutzern, mit Ihrer Website zu interagieren, unabhängig davon, ob sie ein Kontaktformular ausfüllen oder eingeben, und Kreditkarteninformationsformulare sind von entscheidender Bedeutung. Sie möchten sicherstellen, dass alle verschiedenen Zustände für den Benutzer freigegeben sind. Wie sieht es aus, wenn der Benutzer auf eine Eingabe klickt oder eine ungültige E-Mail-Adresse eingibt? Was ist der Ton der Stimme, der verwendet wird, wenn er dem Benutzer Feedback gibt? Buttons können erstellt werden, indem wir unsere Farben, Abstände, Typografie und Tonauswahl verwenden Abstände, . Wir müssen auch verschiedene Zustände berücksichtigen, genau wie wir es bei den Formularen tun. Sie können dieselben Prinzipien verwenden, die zum Erstellen von Formularen und Schaltflächen verwendet werden, um alle anderen Komponenten wie Warnungen und Nap-Balken zu erstellen , um alle anderen Komponenten . Nun, da wir wissen, was in einen Styleguide geht, lasst uns anfangen, einen 3. Schrift und Ton: in diesem Video wird an einem Styleguide für ein kleines Nebenprojekt arbeiten, an dem ich gearbeitet habe namens Quote Boy. Die Idee hinter der Website war es, Freiberufler genauer zu einem Stunden- oder Projektarif zu erreichen , um Kunden in Rechnung zu stellen. Hier ist das Logo für Zitat Boy. Sie können sehen, dass es eine lustige Stimmung hat. Die Gesamtmarke ist cool, charismatisch und auf freischaffende Designer ausgerichtet. Ich will Zitat an Bord, fühlen Sie sich wie ein alter Freund, an den Sie sich wenden für wirklich solide Ratschläge. In diesem Video werden wir über Typografie und Ton sprechen. Wir beginnen mit Typografie, denn wenn Sie eine Website oder ein Nickerchen machen, sind die Chancen, dass Sie die Benutzer brauchen, um etwas Text zu lesen. Beginnen wir mit der Auswahl eines Spaßes. Ich möchte etwas, das einfach, robust, lesbar, hat viele Gewichte und passt gut mit dem Zitat Boy Logo. Bei der Auswahl eines Spaß, Ich in der Regel den Kopf über Googles Schrift-Sammlung und sehen, was ich finden kann, dass meine Bedürfnisse passen könnte . Google hat eine Menge freier Schriftarten zu verwenden. Sie können sie in Aktion sehen. Wählen Sie die verschiedenen Gewichte eines bestimmten Fonds, den Sie verwenden möchten, laden Sie sie herunter oder wenn Sie sie nur auf einer Website verwenden möchten, erhalten Sie einen Codeausschnitt, der Sie in den Kopftag Ihres HT-Mannes beantworten können. Ich habe einen gewissen Kampf im Kopf Roboto. Es ist einfach, sehr lesbar und hat viele Gewichte. Lassen Sie uns die Live-Vorschau verwenden, um verschiedene Größen auszuprobieren, um eine Größe zu finden. Wir denken, wir werden gut für unsere Körperkopie aussehen. 16. Sieht ziemlich gut aus. Das ist ziemlich Standard für Websites, also werden wir das für später im Hinterkopf behalten. Laden wir jetzt ihre Front herunter und installieren sie. Für diejenigen unter Ihnen, die nicht wissen, wie das geht, gehen Sie einfach in den Ordner, den Sie gerade heruntergeladen haben. Öffnen Sie es, wählen Sie alle Schriftartdateien und klicken Sie dann mit der rechten Maustaste und öffnen Sie sie mit Schriftbuch. Dann schnappen Sie einfach die Installationstaste, und wenn Sie es bereits installiert haben, erhalten Sie diese seltsame Luft. Ähm, aber ich werde sie einfach wieder installieren, und los gehst du. Es ist installiert, und jetzt können wir es innerhalb von Illustrator oder das Programm, das Sie verwenden. Okay, ich werde das einfach aus dem Weg kriegen. In Ordnung. Gehen wir nun zurück zu Illustrator und lassen Sie uns ein neues Dokument erstellen. Lassen Sie uns auch voran und nennen es, und ich werde meine Kunsttafel um 10 Uhr aufstellen. 24 Pixel x 7 68 Pixel. Außerdem werde ich unser Dokumentenraster einrichten, also gehe ich zu Illustrator-Einstellungen, Guides und Grid. Wenn wir durch Googles Schriftarten schauen und verschiedene Größen für unsere Schriftart ausprobieren, wir auf der Nummer 16 gelandet. Ich werde diese Zahl in zwei Hälften schneiden und unser Raster so einstellen, dass alle acht Pixel eine Linie hat und wir können es in einer Vorschau sehen und da ist unser Griff. Jetzt, da wir eine großartige Einrichtung haben, können wir versuchen, einige Textkörper und Schlagzeilen zu zeilen. Und der Grund, warum wir ein Raster aufgestellt haben, war, dass wir während der Erstellung unseres Styleguides versuchen wollen, einen angenehmen vertikalen Rhythmus beizubehalten. Das bedeutet, dass wir darauf abzielen, dass jedes Objekt oder Stück Text auf eine dieser Richtlinien fällt oder gut dazwischen liegt. Okay, also lasst uns weitermachen und ein Textfeld zeichnen. Und während wir diese Schritte durchlaufen, werde ich nicht wirklich erklären, wie Illustrator verwendet wird. Ich gehe davon aus, dass Sie bereits wissen, wie Sie es verwenden, oder Sie haben ein anderes Programm, das Sie verwenden. Gehen Sie einfach und geben Sie hier einen Text ein. Und stellen wir sicher, dass unsere Schrift Roboto ist, äh, bei Größe 16, und wir behalten sie zum regulären Preis. Es wird das in unser Netz bringen. Es könnte verlockend sein, einen Haufen Lauren Gypsum in Ihrem Styleguide zu verwenden, aber es ist eine bessere Idee, zu versuchen, eine Kopie in einem Ton der Stimme zu schreiben, der zur Marke passt und tatsächlich die Person informiert, die den Styleguide betrachtet. Also lassen Sie uns dies ändern von diesem Text zu etwas Sinnvolleres, etwas, das die Typografie für Räume beschreibt. Dazwischen sind Absätze. Ich werde eine Zahl wählen, die das 1,5-fache unserer Körperkopiegröße ist, die 24 sein wird und die dafür sorgt, dass unsere Absätze ein schönes Leerzeichen zwischen ihnen haben, aber auch, dass unsere Textzeilen immer noch auf das Gitter fallen, weil 24 ein Vielfaches ist von acht. In Ordnung, also lassen Sie uns auch eine Überschrift darüber hinzufügen, nur um ihm eine Art von ah Artikel Gefühl von einem Blogger oder so zu geben. Und ich werde 32 Pixel für unsere Größe unserer Überschrift wählen. Sie es einfach an das Gitter aus. Lass es uns auch fett machen. Das sieht ziemlich gut aus, Ordnung, jetzt, wo wir dabei sind, gehen wir weiter und machen unsere Schlagzeilen Größen. Also werde ich das einfach duplizieren und es an die Seite des Bildschirms ziehen. Verschieben Sie das ein bisschen. Nennen Sie diese Schlagzeile eins. Cool. Also lasst uns eine zweite Schlagzeile machen. Es wird das duplizieren und nach unten ziehen. Ich werde nur acht Pixel subtrahieren und 24 bekommen, das wird unser zweiter Überschrift Text sein. Sie können wählen, um diese Dinge wie Sie wollen, aber denken Sie daran, es ist eine gute Idee, sie auf das Gitter fallen zu lassen, um einen schönen vertikalen Rhythmus zu erhalten. Also gehen Sie weiter und wiederholen Sie diesen Schritt bis zu sechs Schlagzeilen, wenn Sie möchten. Sie müssen nicht alle sechs haben, aber Websites neigen dazu, H ein h zwei h drei h für H fünf h krank zu haben. Also in der Regel mag ich all diese in meinen Styleguide aufzunehmen. Nun, nicht jede Zahl, die Sie wählen, muss ein Vielfaches von acht sein. Stellen Sie einfach sicher, dass der Platz, den er besetzt, ein Vielfaches von acht ist. So sagen wir, zum Beispiel, diese Überschrift ist 20 Pixel, aber der Raum, den sie besetzt, ist 16. Sie könnten das mit einem Buchstaben wie einem G übergehen, der abgestiegen ist. Könnte unter die Linie Ihres Rasters fallen. Aber das ist in Ordnung. Nur so lange, wie die Grundlinie Ihres Typs auf die Linie fällt. Du bist gut, oder du könntest es zwischen diesen drei Gitterzellen nach unten verschieben. Es ist keine exakte Wissenschaft. Solange du versuchst, dem Gitter treu zu bleiben. Er wird in Ordnung sein. Lassen Sie uns jetzt eine Abschnittsüberschrift erstellen, um zu identifizieren. Dies ist der Typografie-Abschnitt des Style-Guide. Da werden wir eine Reihe von verschiedenen Komponenten auf einer einzigen Seite identifizieren. Also werde ich die Abschnittsüberschrift machen. Ich kenne die Überschrift drei Größe nicht. Es ist irgendwie hier oben. Ich werde das einfach runterziehen, Ordnung? Und wenn Sie alle mit diesem Abschnitt fertig sind, haben Sie vielleicht etwas, das so aussieht. Ich möchte auch erwähnen, dass wir, wenn wir unseren Styleguide erstellen, sicherstellen wollen, dass er super organisiert ist. Wenn jemand anderes dieses Dokument öffnet, soll er schnell finden können, wonach er gesucht wird. Also werde ich nur einige dieser Ebenen gruppieren und sie entsprechend benennen. Okay, im nächsten Video werden wir über Layout und Abstand sprechen. 4. Layout und Raum: in diesem Video wird schnell übergehen, wie man über den Raum zwischen Objekten sowie die allgemeine Dimension von Objekten zu entscheiden . Ich mach unser Kunstbrett ein bisschen größer. Lassen Sie uns auch diese Abschnittsüberschrift duplizieren. Es ist in der Regel eine gute Idee, eine kleine Beschreibung über den Abschnitt hinzuzufügen. Dies hilft, andere Zuschauer des Styleguides darüber zu informieren, was der Abschnitt ist, warum Sie die Entscheidungen getroffen haben, die Sie getroffen haben, und hilft ihnen, sich an Ihre Vision zu halten. Also sagen Sie eines Tages, dass Sie nicht der Designer für diese App oder Website sind, jemand anderes übernimmt. Sie werden in der Lage sein, in Ihren Styleguide zu gehen und es zu nutzen. Also werde ich nur einen Teil des Textkörpers, den wir hier oben haben, duplizieren und ihn für unsere Beschreibung wiederverwenden . In diesem Abschnitt werden wir den Raum zwischen Objekten demonstrieren. Wissen Sie, wenn Sie Spalten eines Rasters haben, wie fallen sie nebeneinander? Wie sieht das aus? Also werde ich nur eine kleine Beschreibung dazu eingeben. Also, hier habe ich getippt, wenn ich über die Menge des Raums zwischen Objekten sowie ihre Breiten und Höhen entscheide , verwenden Vielfache von acht. Lassen Sie uns also voran gehen und einige Rechtecke auf unser Gitter zeichnen. Ich gehe weiter und schalte das Pixelraster ein. Du wirst sehen, wie ich das von Zeit zu Zeit mache, um mir wirklich zu helfen, diese Objekte ins Netz zu bringen . Wissen Sie, genau, lassen Sie uns diese Spalten 48 Pixel hoch machen. Ich werde nur ein paar Arrangements von verschiedenen Kolumnenentscheidungen treffen. Ich wähle, 16 Pixel Abstand zwischen jeder Spalte zu setzen. Jetzt stütze ich das auf unsere Körperkopiergröße. Wenn Sie zum Beispiel eine andere Körperkopiegröße gewählt haben, haben Sie vielleicht 14 gewählt. Sie können Vielfache von sieben anstelle von Vielfachen von acht für Ihr Raster und alles andere verwenden. Statt 16 Pixel Abstand zwischen Objekten, vielleicht wählen Sie 14 Pixel Abstand zwischen Objekten oder vielleicht sogar sieben Pixel, liegt alles an Ihnen. Wie ich schon sagte, es ist einfach am besten, dass du an einem Gitter bleibst. Dadurch wird sichergestellt, dass alles, was Sie erstellen, einen ansprechenden vertikalen Rhythmus hat. Nachdem Sie fertig sind, haben Sie vielleicht etwas, das so aussieht, und Sie können sehen, ich habe hier einen Text hinzugefügt, um einige der Abstandsoptionen zu beschreiben, die wir unten getroffen haben Dieser Abschnitt ist nützlicher in einem Live Style Guide, der in HTML und CSS codiert ist die Leute sehen können, wie diese mit Änderung auf verschiedenen Seiten Bildschirme, aber für unsere statische Styleguide wird es einfach super einfach halten. Diese Methode zum Erstellen von Objekten auf der Grundlage des Textkörpers wird in jedem Element nützlich sein , das wir zum Styleguide hatten. Es wird dazu beitragen, dass wir einen schönen vertikalen Rhythmus haben. Jedes Stück passt gut zusammen auch etwas, das ich gerne einbinden möchte. Mein Style Guide ist eine Ebene namens Raum, und das ist, wo ich kleine Quadrate setzen kann mir helfen, eine Linie Dinge an das Gitter. Wie Sie sehen können, habe ich diese kleinen Quadrate von 48 Pixeln, und ich verwende sie, um den Abstand zwischen unseren verschiedenen Abschnitten zu bestimmen. auch sicher, Stellen Sie auch sicher,dass Ihre Organisation dieses Abschnitts genau wie er die Typografie Abschnitt gemacht hat, eine massive Datei wie diese kann wirklich schnell aus der Hand kommen. Daher ist es wichtig, alle Ebenen organisiert zu halten. Alles klar, das ist so ziemlich es für diesen Abschnitt. Als nächstes werden wir über Farbe sprechen 5. Farbe: Ok. Der Abschnitt, den wir gerade durchlaufen werden, dreht sich alles um die Farbe. Ich habe eine Reihe von Mustern für unser Zitat Boy Marke geöffnet. Ich habe sie hier oben und erinnere mich an die Logodatei, die ich dir vorhin gezeigt habe. Wir haben die Bildschirmfarbe und das Grün wird unsere Primärfarbe sein. Und ich werde nur eine kurze Beschreibung darüber eingeben, was das Ziel dieses Abschnitts ist. Also habe ich geschrieben, wird die primäre grüne Farbe für markierte Elemente wie Schaltflächen oder Links und dunkle Grau zum Kopieren verwenden . Sekundäre Farben werden für Dinge wie Airs und Warnungen sein. Jetzt, da wir das Ziel dieses Abschnitts kennen, um die Farben zu demonstrieren, lassen Sie uns weiter gehen und einige Farbfelder unten machen. Ich werde unser Primärgrün wählen und ein Quadrat machen. Normalerweise zeige ich die Beschriftung unter dem Farbfeld an, das den exakten Hex-Code der Farbe anzeigt . Wenn die Leute diesen Styleguide ansehen und nach Farben suchen, wissen sie genau, welche Farbe sie wählen sollen. Jetzt werden Sie feststellen, dass ich mehrere Schattierungen der Primär- und Sekundärfarben habe, ich dem Styleguide nicht hinzufügen werde, aber ich werde sie für Dinge wie Akzente verwenden. Zum Beispiel mache ich den Hex-Code. Bildunterschrift. Ich habe gerade einen dunkleren Farbton der Primärfarbe gemacht und lass uns einen Hintergrund für den Hex-Code machen und das zu einem hellgrünen machen. Sie können diese Farben, Uhren, wie Sie möchten, anzeigen . Es ist keine exakte Wissenschaft. Und jetzt, da wir eine grüne Farbe zu finden ist ein Musterfeld, können wir voran gehen und das gleiche für den Rest der Farben tun. Und wie ich schon sagte, ich werde diese verschiedenen Farben in ein paar Kategorien aufteilen. Also werde ich voran gehen und eine Unterüberschrift für diesen Abschnitt für jede der verschiedenen Kategorien erstellen. Alles klar, sobald Sie fertig sind, diese anderen Farbfelder zu erstellen und sicherzustellen, dass die Hex-Codes dort richtig , haben Sie vielleicht etwas, das so aussieht. Es sieht ziemlich gut aus. Lassen Sie uns voran und fügen Sie dem Rest des Styleguides etwas Farbe hinzu. Ich werde mit dem Text beginnen, um unsere Abschnittsüberschrift zu machen. Heben Sie sich mehr ab. Ich werde machen, dass die Primärfarbe sind. Verwenden wir unser Primärgrau für den Textkörper und machen diese Spalten hellgrau. Fühlen Sie sich frei, Ihre eigenen Farben auf dem Weg zu verwenden. Als Nächstes werden wir über Ikonographie und Bilder sprechen. 6. Icons und Bilder: mit der Marke im Auge wird über Ikonographie und Bildsprache nachdenken. Ich habe eine kleine Reihe von Symbolen für eine Zitatbuchmarke erstellt, und ich werde das jetzt öffnen. Wenn Sie ein Nikon-Set haben, das Sie selbst heruntergeladen oder erstellt haben, das Sie verwenden möchten, gehen Sie direkt vor. Außerdem bemerkte ich, dass ich diesem Abschnitt eine kleine Beschreibung gegeben habe, um zu beschreiben, was Symbol aussehen sollte, wenn auf der Straße jemand kommen will und erweitern unser Icon-Set, sie werden eine bessere Vorstellung davon haben, wie das Symbol aussehen sollte. Also werde ich voran gehen und öffnen Sie einfach unsere I Pistolen, dass ich nur werde, um sie alle auszuwählen und fügen Sie sie in unseren Styleguide. Jetzt könnten wir einfach nur ausrichten. Diese beiden sind jetzt großartig, so. Ihr Symbolsatz ist möglicherweise nicht bereits am Raster ausgerichtet. Vielleicht musst du ihn ein bisschen optimieren. Manchmal mache ich gerne eine kleine Kulisse für die Icons, nur um sie voneinander zu trennen und sie ein wenig hervorzuheben. Also gehe ich weiter und mache das. Jetzt wirst du bemerken, dass ich unserem Netz immer treu bleibe. Hören Sie, das ist so ziemlich es für diesen Abschnitt. Jetzt können wir Symbole greifen, wie wir sie brauchen, wenn wir unsere Seiten erstellen. Als Nächstes fügen wir Beispiele dafür hinzu, wie unsere Bilder auf unserer Website aussehen sollen. Ich habe einige einfache Bilder erstellt, die auf unseren Markenfarben basieren. Lassen Sie uns sie kopieren und in die Styleguide einfügen und sie am Raster ausrichten. Ich werde sie auch ändern, um sie ein wenig größer zu machen. Alles klar, das sieht ziemlich gut aus. Jetzt, wenn wir ein neues Bild brauchen, schwächen, referenzieren Sie den Stil hier, oder verwenden Sie einfach eines dieser ziemlich einfachen Recht. 7. Formen und Knöpfe: mit all den Dingen, die wir zuvor erstellt haben. Wir können jetzt Formulare und Schaltflächen in diesem Abschnitt anpacken. Wir möchten alle Formularelemente zeigen, die für unsere Website und alle ihre verschiedenen Zustände verwendet werden . Vier Augenblicke lang. Wir möchten ihren Standardstatus anzeigen. Sie sind fokussierter Zustand und ihr Luftzustand. Beginnen wir mit dem Erstellen einer Beschriftung. Ich werde diese Rubrik 6 für unser Label wiederverwenden. Wie ich bereits erwähnt habe, wollen wir nicht einfach Dummy-Text wie Texteingabe für unser Label verwenden. Machen wir es so etwas wie eine E-Mail-Adresse. In Ordnung, lassen Sie uns ein Rechteck für eine Texteingabe erstellen und es am Raster ausrichten. Ich möchte 40 Pixel hoch sein. Lassen Sie uns ein hellgrau für seinen Hintergrund wählen. Lassen Sie uns auch zeigen, wie der Platzhaltertext aussehen würde. Ich mache das 16 Pixel und auch das normale Gewicht. Lassen Sie uns auch ein hellgrau und nur zum Spaß machen. Fügen wir Nike auf der rechten Seite hinzu. Lasst uns es aus unserem Icon-Bereich holen. Dieses Label sieht für mich ein bisschen klein aus, also werde ich voran gehen und es auf die nächste Schlagzeilengröße stoßen. Das sieht ein bisschen besser cool aus. Das ist also eine grundlegende Texteingabe. Lassen Sie uns seinen Fokuszustand machen. Lassen Sie uns nun einen grünen Rahmen basierend auf unserer Primärfarbe erstellen und das Symbol auch in diese Farbe ändern . Ich werde auch den tollen Hintergrund rausfallen und ihn einfach weiß machen. Wir möchten auch zeigen, wie der Text aussieht, wenn Sie ihn eingeben. Also lassen Sie uns dies ändern, um unseren Körpertext zu entsprechen. Lassen Sie uns auch einen Mehrwert, wie jemand etwas hineintippt. Cool. Wiederholen wir den gleichen grundlegenden Prozess für die Luftaussage. Sie können diesen Vorgang für alle anderen Formularelemente wiederholen, die Sie möglicherweise benötigen. Ich habe mich entschieden, Texteingaben einzubeziehen, Textbereiche, Kontrollkästchen und Optionsfelder auszuwählen . Fügen Sie die Formularelemente hinzu, die Sie möglicherweise benötigen, aber stellen Sie sicher, dass sie an Ihrem vertikalen Raster ausgerichtet sind. Gehen wir zu den Schaltflächen. Dies wird der gleiche grundlegende Prozess sein. Wir wollen eine primäre Schaltfläche, die wir für die Hauptaktionen auf der Seite und, um, oder sekundäre flache Schaltfläche verwenden um, . Diese Art von sieht aus wie ein Link, den wir für weniger betonte Aktionen verwenden, schlägt vor, wie die Texteingabe ein Rechteck zeichnet, das am Raster ausgerichtet ist. Es ist normalerweise eine gute Idee, Ihre Tasten so groß wie Ihre Texteingaben zu machen, also werde ich mein Tastenrechteck 40 Pixel hoch machen. Dies liegt daran, dass Schaltflächen und Eingaben oft nebeneinander angezeigt werden und Sie möchten, dass sie ausgerichtet werden. Lassen Sie uns den Hintergrund der Tasten zu unserer Grundfarbe machen. Wir machen auch den Schaltflächentext 16 Pixel, um unseren Körpertext zu entsprechen, aber lassen Sie uns es weiß und gold machen. Ich mache auch gerne den Schaltflächentext in Großbuchstaben, damit er sich vom Haupttext abhebt, besonders wenn Sie einen flachen Knopf ohne Hintergrund haben. Als nächstes wird die Schaltfläche für ihren Hover-Zustand dupliziert. Ich werde nur ein hellgrün wählen und einen leichten Schlagschatten hinzufügen. Ich mache den Drop Shadow Hellgrau für Barce Uhren. Lassen Sie uns erneut duplizieren und den aktiven Zustand machen. Ich wähle ein dunkleres Grün für den Hintergrund und ein noch dunkleres Grün für den eingefügten Schatten . So sieht es so aus, als würde es nach unten gedrückt. Ein letzter Status, den Sie einschließen möchten, ist der deaktivierte Zustand. Wenn Sie denken, dass Sie Zustände für Ihre obigen Eingaben deaktiviert haben, wäre es auch eine gute Idee, diese Zustände auch einzubeziehen. Ich plane nicht wirklich, irgendwelche behinderten Zustände für meine Eingaben zu haben, also werde ich diese nur für den Moment auslassen. Wenn wir sie später hinzufügen müssen, ist das für den deaktivierten Zustand völlig in Ordnung. Ich werde ein wirklich hellgrün für den Hintergrund wählen. Ich werde den Text auch wie grün machen, aber immer noch dunkler als der Hintergrund. Okay, das sieht ziemlich cool aus. Wir können den gleichen grundlegenden Prozess wiederholen, um unsere flach aussehenden Tasten zu erstellen. Wie Sie sehen können, ist das keine Raketenwissenschaft. Eigentlich ist es wirklich, wirklich einfach. Es gibt keinen Grund, keinen Styleguide zu erstellen. Es hilft Ihnen, kritisch darüber nachzudenken, was Sie in Ihren Augen enthalten sind, und dient auch als Bibliothek, die Sie beim Erstellen von Seiten referenzieren und daraus entnehmen können. Wenn es sich um ein häufig verwendetes Element handelt, wie Warnungen oder ein Nickerchen, gehört es wahrscheinlich in den Styleguide. Sie können diese Prinzipien verwenden, um ein beliebiges Element zu erstellen und Ihrem Styleguide hinzugefügt zu werden. Als nächstes wird lernen, wie Sie all diese großartigen Elemente, die wir erstellt haben, nehmen und sie in eine Beispielseite 8. Sample Page: Jetzt, da wir all diese großartigen Elemente in unserem Styleguide haben, können wir eine Beispielseite zusammenstellen. Lassen Sie uns versuchen, eine einfache Anmeldeseite für Zitat Junge zu erstellen. Manchmal müssen Sie beim Erstellen einer Seite möglicherweise Dinge hinzufügen, die in der Styleguide nicht vorhanden sind. Sie können nach bestem Urteilsvermögen entscheiden, ob das Element, das Sie der Seite hinzufügen in den Stil gehört. Holen Sie sich oder nicht, versuchen Sie einfach, wachsam zu sein, wenn Sie keine neuen Elemente hinzufügen. Wenn es bereits ein klar zu findendes Element für diesen Anwendungsfall gibt. Okay, also lasst uns anfangen. Lassen Sie uns ein neues Dokument mit einem Kunstbrett erstellen, das bei 10 24 mal 7 68 heißt, ich werde es einfach verspotten. Okay, das erste, was wir brauchen, ist ein Nickerchen. Also lasst uns zu unserem Styleguide gehen und das packen und einkleben. Lassen Sie es uns am Raster ausrichten und an unsere Bedürfnisse anpassen. Wenn du es wolltest, könntest du diese Links ändern, aber ich werde ihnen einfach überlassen, wie sie sind, das sieht ziemlich gut aus. Ich denke, ich will, dass der Hintergrund ihrer Seite ein dunkelgrün ist, also mache ich einfach ein weiteres Rechteck und füge es hinter ihrem Nickerchen ein. Ich werde diese Schicht einsperren, damit ich mich nicht zufällig damit verwirre. Als Nächstes möchte ich ein Formular auf die Seite einfügen, mit dem der Benutzer seine E-Mail-Adresse und ihr Passwort eingeben und eine Schaltfläche drücken kann, um das Formular zu senden. Ich denke, ich möchte, dass das Formular in einer weißen Box ist. Dies ist eine dieser Situationen, in denen ich etwas hinzufügen werde, das im Styleguide nicht existiert . Wenn ich denke, dass wir dieses Element in der Zukunft brauchen könnten, dann könnte ich einen neuen Abschnitt namens Panels oder etwas machen, um seine Anwendungsfälle dort zu definieren. Dies könnte auch eine Situation sein, in der ich von diesen rosa Abstandshalter profitieren könnte, die wir in unserem Styleguide haben . Ich werde sie verwenden, um mir zu helfen, das Panel unter unserem Nickerchen zu positionieren. Sieht so aus, als hätte ich fast richtig erraten. Ich denke, ich will, dass das ein bisschen größer wird. Lassen Sie uns ein Bild aus dem Styleguide greifen, um in dieses Panel zu setzen, um es ein wenig spannender erscheinen zu lassen. Ich werde auch die Größe ein wenig anpassen und die Farben so ändern, dass sie der Seite entsprechen. Lassen Sie uns auch eine Überschrift zu diesem Panel hinzufügen, um anzuzeigen, dass das Formular unten dient, um Benutzer bei der Registrierung zu unterstützen . Nun lasst uns ein paar Eingaben aus unserem Styleguide holen, und lassen Sie uns auch einen Call-to Action-Button am unteren Rand hinzufügen, der ziemlich gut aussieht. Lassen Sie uns auch einen Hilfe-Link am unteren Rand hinzufügen, nur zum Spaß. Großartig. Also da hast du es. Wir haben eine Beispielseite aus einigen Elementen aus unserem Styleguide erstellt, und Sie können sehen, wie eine Anleitung beim Erstellen von Seiten eine große Hilfe ist. Hoffentlich mit diesen grundlegenden Richtlinien Ihren eigenen, können Sie mit diesen grundlegenden Richtlinien Ihren eigenen,sehr einzigartigen Web-Styleguide für jedes Ihrer zukünftigen Projekte erstellen, um Ihnen dabei zu helfen, sich und Ihr Team einheitlich zu halten Beim Entwerfen neuer Seiten für Ihre -Site, teilen Sie bitte Ihre Arbeit im Forum. Ich würde gerne sehen, was du dir einfällt. Fühlen Sie sich frei, Komponenten und Ihren eigenen Spin in der Styleguide hinzuzufügen. Immerhin ist das keine exakte Wissenschaft. Vielen Dank und bis zum nächsten Mal