Einführung

Tools für UI- oder UX-Design, je nach dem wie genau man mit dem Namen ist, helfen massiv bei der Arbeit an UI. Von Wireframes bis hin zu Click-Prototypen kann man damit alles erstellen und das meistens sogar kollaborativ. Entwickler können später als Betrachter hinzugefügt werden, damit sie alle Layouts, Abstände und Größen genauestens ins Spiel bringen können.

Figma ist ein cloudbasiertes UI-Tool, was ich in den meisten meiner Projekte verwendet habe. Hier ist ein sehr kurzes Erklärvideo zu dem Tool:

Im Folgenden möchte ich vor allem zwei Funktionalitäten von Tools wie Figma hervorheben, die meiner Meinung nach den größsten Mehrwert für Projekte darstellen, da sie die Iterationsgeschwindigkeit stark erhöhen.

Komponenten

Abbildung 1a: Ein schlichter schwarzer Button mit Text als Komponente

Abbildung 1b: Der Button wird im Portrait- und Landscape-Design verwendet

Komponenten sind wiederverwendbare Elemente im eigenen Design. Sie können alles Mögliche sein, von einem simplen Button (Abbildung 1a), bis hin zu einer kompletten Navigationsleiste. Ein paar der geläufigsten Kandidaten für Komponenten sind:

• UI Elemente (Button, Toggle, Slider etc,)
• Icons
• Firmenlogos oder andere Markenzeichen
• Platform Komponenten (für Android, iOS)
  

Sobald man eine Komponente erstellt hat, kann man Kopien von dieser im Projekt verwenden - anstatt immer wieder das gleiche Element zu copy pasten, zieht man sie aus dem "Assets"-Tab auf das Canvas (Abbildung 1 a/b). Die Kopien der sog. Master-Komponente sind mit ihr verbunden, das heißt wenn sich die Master-Komponente ändert, werden sich auch alle Kopien entsprechend verändern. Die Kopien selbst können aber immer noch lokal geändert werden - so kann ein und derselbe Button an verschiedenen Stellen in unterschiedlicher Farbe erscheinen, vielleicht auch nur um rumzuprobieren. Man kann dann später die lokalen Änderungen auf die Master-Komponente anwenden, wenn man sie für alle Kopien übernehmen will.

Ein weiterer Vorteil ist, dass man Komponenten auch schachteln kann.

Im Grunde genommen kann man sich so eine eigene Bibliothek an UI-Elementen aufbauen, die dann in vielen Designs verwendet werden.

Mit Komponenten kann man sich viel Arbeit sparen, indem man Designs und Strukturen wiederverwendbar macht, während Änderungen am gesamten Design mit wenig Aufwand möglich sind.

Styles

Styles sind ähnlich wie Komponenten, nur das mit ihnen das Aussehen bzw. Eigenschaften von Elementen festgelegt werden. Dazu gehören Dinge wie Farben, Textgröße, Schlagschatten oder gar Einstellungen von Layout-Grids.

Abbildung 2: Die Farbe FFD66B wird im Projekt das Gelb sein.

Der Vorteil ist dann, dass man durch Änderungen am Style alle Elemente verändert, die diesen Style verwenden. So könnte man beispielsweise den im Projekt verwendeten Font für Seitentitel austauschen oder ein anderes Gelb als das in Abbildung 2 festlegen.

Neben der erhöhten Iterationsgeschwindigkeit kann man so auch bestimmte Teile des eigenen Designs benennen, um z.B. die Verwendung einer Farbe deutlich zu machen, kann man einen Style mit dem Namen "Highlight Color" erstellen. Jedes neue Teammitglied, dass am UI-Design arbeitet kann dann diesen Style nutzen und seine Verwendung verstehen, was hilft die Designs konsistent zu halten.