In drei Schritten zum Erfolg

Der Kurs setzte sich aus drei Übungseinheiten und einer Abschlussaufgabe zusammen. 

Basisfunktionen

In der ersten Übungseinheit wurde uns zunächst die Benutzeroberfläche von Figma erläutert und dabei auf grundlegende Funktionen wie das Erstellen und Bearbeiten eines Frame, Rectangle und Text eingegangen. Zur Vertiefung bauten wir vorgegebene Screenshots mit den genannten Elementen möglichst detailgetreu nach.

Arbeiten mit Autolayout, Components und Variants

Bereits in der ersten Übungseinheit fiel auf, dass sich innerhalb eines Interfaces, bestimmte Objekte wiederholen. Damit die gleichen Objekte bei Veränderungen nicht einzeln bearbeitet werden müssen, erlernten wir den Umgang mit Components und Variants. Das Component dient hierbei als Grundlage für alle darauf basierenden Kopien. Das bedeutet, verändert man das Components, verändern sich alle damit verknüpften Objekte. Variants ist eine Weiterführung davon, wobei nur geringfügig unterscheidende Components als Variation von einandern angelegt werden und sich somit im entworfenen Interface auswechseln lassen. Final sorgt Autolayout dafür, dass die Objekte einheitlich im Layout angeordnet werden.

Durch Aufgaben, in den wir selbstausgesuchte Apps und Webseiten nachbauten, erhielten wir ein Gefühl dafür, wann diese Funktionen zu verwenden sind.

Colourstyles, Fontstyles und Prototyping

nicht nur Objekte wiederholen sich innerhalb eines Interfaces, auch Farben, Fonts und Schriftgrößen. Dafür gibt es Colour- und Fontstyles. Diese werden in einer Übersicht angelegt und speichern die jeweiligen Eigenschaften. Dadurch können die bereits verwendeten Styles auf neue Inhalte im Interface angewendet werden.

Das Prototyping ist der finale Schritt, in dem Flows erstellt werden, welche mithilfe von unterschiedlichen Animationen eine reale und funktionsfähige Benutzeroberfläche simulieren.

Das Abschlussprojekt

Fürs Abschlussprojekt habe ich mir die App „mehr Tanken“ ausgesucht. Sie dient dem Vergleich von Kraftstoffpreisen und listet alle sich in der Nähe befindenden Tankstellen auf. Weiterhin können Informationen zur Tankstelle selbst abgerufen werden sowie die jeweilige Preisenentwicklung eines Kraftstoffes. Die Original-App sieht wie folgt aus:

Color Styles

Bei der privaten Nutzung der App hat mich vor allem die Unübersichtlichkeit der App gestört. Somit war es mein Ziel, das Interface aufzuräumen und überschaubar zu machen, das bekannte Erscheinungsbild dabei jedoch zu erhalten. Aus diesem Grund begann ich damit Color Styles anzufertigen, welche ich aus der Original App übernahm und im Laufe der weiteren Erarbeitung vervollständigte. Somit erhielt ich das bekannte Farbschema von „mehr Tanken“

Components & Variants

Im nächsten Schritt begann ich damit Components und Variants anzulegen. Die App besteht ausschließlich aus sich wiederholenden Objekten und ähnelnden Inhalten, somit war die Nutzung von Components die logische Schlussfolgerung. Variants nutzte ich für Drop Down Menüs oder für Inhalte innerhalb der Components selbst. Zum Beispiel für das jeweilige Logo der App. Dabei sortierte ich meine Components und Variants nach dem jeweiligen Screen. Bedeutet: Startseite (Screen 1), Detailansicht (Screen 2) und die Preisentwicklung (Screen 3).

Ausgestaltung und Autolayout

In der Component Übersicht sind bereits einige Designänderungen zu sehen, welche dazu beitragen, dass das Interface übersichtlicher und verständlicher wird. Daraufhin habe ich die Components in den jeweiligen Screens mithilfe von Autolayout eingefügt und somit die neue Benutzeroberfläche zusammengesetzt. 

Folgende Optimierungen habe ich im Interface vorgenommen:

• Header und Navigation Bar auf eine Ebene mit dem Hintergrund

• Kraftstoffauswahl als Dropdown Menü (anstatt Overlay)

• Informationen in Rectangles gesetzt, mit Abstand zueinander 

• Button „Preisentwicklung“ als Button kenntlich gemacht

• Graphen aufs wesentliche reduziert

Die ausgestalteten Screens sind im Folgenden zu sehen.

Prototyping

Im finalen Schritt habe ich mich dem Prototyping gewidmet und alle relevanten Flows im Interface animiert und somit die Benutzerführung im System simuliert. Daraus ist folgender Prototyp resultiert.

Fazit

Vor dem Einführungskurs hatte ich keine Berührungspunkte mit Figma und war somit nicht mit der Benutzeroberfläche vertraut. Durch den Kurs bei Malte Völkner und der intensiven Auseinandersetzung während den Hausaufgaben konnte ich mir den Umgang mit Figma Schritt für Schritt aneignen und will die Funktionalitäten des Programmes auch nicht mehr missen.

Zudem konnte Malte uns durch passende Beispiele und thematischen Ausflügen ein Ausblick auf unser Studium und die Welt des Interfacedesigns bieten.

Ich bin froh, den Kurs gemacht zu haben, und bin der Meinung, hiermit eine gute Grundlage für mein Studium gebildet zu haben.