...

Partikel in der UI

...

UI Design Tools

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.

[Beispiele]

-zeigen: Basic layout in figma, inspector

Styles

Mit 

Komponenten

Ein großartiges Feature sind die sog. Komponenten. Kurz gesagt kann man mit ihnen UI-Elementen wie z.B. einen Button fertig designen und diesen Button dann in vielen verschiedenen Designs oder Projekten wiederverwenden. Der ursprüngliche Button ist dann die Hauptkomponente und alle weiteren sind Kopien, die mit der Hauptkomponente verknüpft sind.

Der Clou an der Sache ist, das man Kopien nach belieben lokal abändern kann, ohne die Hauptkomponente zu beeinflussen. Beispielsweise könnte der Button immer gleich groß sein, aber in manchen Panels ist er rot und in anderen Blau.

[Beispiel]

Spannend wird es, wenn sich das grundlegende Design des Buttons ändert. Nehmen wir mal an, dass er nun größer sein soll als vorher - vielleicht haben Tests ergeben, dass er tatsächlich zu klein war. In diesem Fall wird einfach die Hauptkomponente angepasst, worauf alle Kopien ebenfalls verändert werden.

[Beispiel]

Fazit: Komponenten sind ein mächtiges Werkzeug, das zu Anfang kompliziert erscheinen mag, aber dafür sehr viel Iterationsgeschwindigkeit bietet.

Prefabs

Die Safe Zone

Spätestens mit der Ankündigung des iPhone X wurden sogenannte "edge-to-edge" oder randlose Displays zu einem weitverbreiteten Design auf der Mobile-Plattform. Damit die UI nicht von Notches oder Flächen für Gesten (z.B. iPhone Home-Geste) überlagert wird, gibt es die Safe Zone. Innerhalb der Safe Zone ist garantiert, dass Elemente bedienbar und vollständig sichtbar sind.

...