Ich bin Designer
Wie kann der Styleguide als Designer optimal genutzt werden? Welche Vorgaben bzw. Freiheiten gibt es bei der Erstellung von Designs? Diese und weitere Fragen werden hier beantwortet.
1. Starter-Pack herunterladen
Du möchtest mit dem Styleguide loslegen? Mit diesem Starter Paket hast du alles was du brauchst.
2. Mit dem Styleguide optimal arbeiten
Die Vorgaben für das digitale Design sind wie im Seitenmenü zu sehen ist unterteilt in Design-Basics, Interface-Elemente und Komponenten.
Auf den Unterseiten gibt es eine Unterscheidung zwischen Design- und Entwickleransicht. Vorausgewählt ist hier jeweils die Design-Ansicht. Hier stehen wesentlichen Informationen für die Designerstellung.
3. Schriftarten herunterladen + installieren
Um Designs nach Styleguide-Vorgaben zu erstellen, werden Schriftdateien benötigt. Im Bereich Typografie ist beschrieben, wie die Schriften eingesetzt werden sollen.
4. Abstände
Eine saubere Übergabe an die Entwicklung ist ein wichtiger letzter Schritt im Design-Prozess. Dabei sind die folgenden Abstände zu verwenden. In Ausnahmefällen können auch andere Abstände gesetzt werden, dabei ist es wichtig, dass diese durch 5 teilbar sind.
Besonderheiten bei Abständen zwischen Textelementen
Bei Abständen zwischen Texten wird weniger Abstand benötigt, da Textboxen immer schon automatisch einen Abstand haben, welcher sich durch die line-height ergibt.
Bei einem Abstand zu einem Textelement können daher 5 Pixel pauschal abgezogen werden. So wird zwischen 2 Textelementen nur ein Abstand von 10px benötigt, damit sich ein tatsächlicher Abstand von 20px ergibt.
5. Handoff
Die verwendeten Assets sollten dem Design im .svg-Format beiliegen. Die Namen der Assets sollten an entsprechender Stelle im Design vermerkt sein. Hierfür eignet sich die Kommentar-Funktion in InVision sehr gut.
Was ist in diesem Style Guide nicht enthalten? Vorgaben zum User-Flow, Grid, Layout. Dies sind Entscheidungen, die das jeweilige Produktdesign im Kontext der Anwendung treffen muss.