Design Systems für Screen Design

designsystem_screen_design

Ein Design System ist eine Sammlung von UI Komponenten und dient als „Single Source of Truth“ – also was dort festgelegt wird, gilt. Was genau und wie viel dort inkludiert wird, ist unterschiedlich und kommt auf das Projekt und die beteiligten Personen an.

Ein solches System zu definieren kann schon bei kleineren Projekten mit wenigen beteiligten Personen viel Arbeit, Ärger und Zeit sparen. Je größer das Projekt und je mehr Leute daran arbeiten, desto wichtiger ist ein durchdachtes und möglichst vollständiges System.

Verwendet man eine moderne Screendesign-Software ­– wie in meinem Fall Sketch – ist es möglich, die verwendeten Elemente direkt dort zu definieren und eine Art Bibliothek – „Symbol Library“ in Sketch – anzulegen, auf die dann jederzeit zurückgegriffen werden kann. Die Komponenten können auch in einem externen File gespeichert werden, dass dann alle beteiligten Designer als globale Bibliothek einbinden können. Wird dort ein Element, wie z.B. die Farbe oder Form von Buttons, geändert, wirkt sich das auf alle Projektdateien aus.

Add as Library Kontextmenue

Zusätzlich kann das Design System auch mit Hilfe von Invsion Design System Manager und Craft for Invison in Sketch erstellt und anderen Teammitgliedern zur Verfügung gestellt werden.

Invision Design System Manager

Farben

Ganz am Anfang lege ich Farbswatches in meinem Projekt als Symbole an. Wichtig ist dabei in Sketch die Benennung: Mit „swatch/…“ zu Beginn der Benennung sammeln sich alle Farbfelder innerhalb der Symbole in der Gruppe „swatch“.

Designsystemkomponenten Farben
Kontextmenue Symbole

Anhand der Symbol-Overwrite Funktion kann dieser dann bei Bedarf einfach und bequem geändert werden.

Nested Symbol Button

Buttons

Buttons sollten auch inkludiert werden, da sie einen wichtigen Bestandteil des Designs darstellen und an mehreren Stellen eingesetzt werden.

Falls ich im Lauf des Designprozesses alle Buttons von rechteckig auf abgerundet ändern möchte, kann ich das in Sketch bequem an einer Stelle ändern und alle Instanzen des Buttons ändern sich mit.
Designsystemkomponenten Buttons

Icons

Alle Icons kopiere ich als svg-Datei in die Symbols Seite von Sketch. Dabei ist darauf zu achten, dass sie in jeweils einem Artboard mit derselben Pixelgröße platziert werden. Auch hier sollte die Benennung einheitlich also z.B. „icon/search“ sein.

Designsystemkomponenten Icons

Fonts, Textstyles

In Sketch hab ich die Möglichkeit Textstyles zu defnieren. Sie funktionieren im Grunde wie Formatvorlagen im Microsoft Word. Auf diese Weise lassen sich auch Änderungen an der Typografie der Seite rasch umsetzen.

Textstyles

Header/Footer

Auch Header und Footer sind Elemente, die logischerweise auf jeder Seite des Designs eingesetzt werden. Es macht Sinn, auch diese in ein Symbol umzuwandeln. Zusätzlich sollten Header und Footer auch für andere Ausgabeformate (z.B. Mobile und Tablet) definiert werden.

Öfter verwendete Komponenten

Andere wiederkehrende Elemente im Design werden ebenfalls als Symbol festgelegt. Beispielsweise Teaser, Formular-Elemente, Akkordeon-Elemente etc. Mit der „Overwrite Funktion“ können einzelne Attribute in Sketch bequem ausgetauscht werden, ohne die Masterkomponente selbst angreifen zu müssen. Änderungen am Master selbst ändern sich allerdings wieder übergreifend im gesamten Dokument ab.

Designsystemkomponenten Elements

Rating: 5.0/5. Von 1 Bewertung.
Bitte warten...

Hinterlasse einen Fingerabdruck für die Ewigkeit: Ein Kommentar bei LimeSoda!

(*) Pflichtfeld

Bewirb dich bei uns!

LimeSoda.
Digitalagentur in Wien.

Bewirb dich jetzt!
Beate

Verpasse nicht den nächsten Blog-Post von Beate!

Jetzt zum LimeSoda-Newsletter anmelden