Nichts geht über die Basics

Basisfunktionen

Malte machte uns zuerst mit der Benutzeroberfläche vertraut und wie wir ganz grundlegende Objekte wie Frames, Rectangles oder Texte anlegen. 

Arbeiten mit Components, Variants und Autolayout

Es wurde schnell klar, dass das Nachbauen und Ändern einzelner Elemente recht zeitintensiv sein kann und weswegen wir als nächstes Components, Instances und Variants kennen lernten. 

Der Component stellt hierbei einen Grundbaustein mit Instances als dessen Kopien dar. Bei Änderungen am Component werden diese automatisch auf alle Instances übertragen. Erweitert wird dieses Prinzip mit Variants, wodurch schnell zwischen Variationen eines Objekts gewechselt werden kann. Um das ganze abzurunden sorgt die Anwendung von Autolayouts für eine einheitliche Struktur zwischen den einzelnen Objekten.

Farb- und Fontstyles

Das gleiche Prinzip lässt sich auch auf wiederkehrende Farben, Fonts und Schriftgrößen übertragen. Dabei legt man für jede Farbe und jeden Font einen Style an, welcher sich mit geeigneter Benennung schnell wiederfinden und bearbeiten lässt.

Prototyping

Das Prototyping ist der letzte Schritt, um das eigene Design in eine bedienbare und animierte Simulation umzuwandeln.

Abschlussprojekt: eBay Kleinanzeigen Redesign

Die letzte Aufgabe des Kurses bestand darin, ein Redesign einer Website oder App in Figma zu erstellen und dabei UI/UX-Flaws eines typischen User-Flows zu lösen. 

Für das Abschlussprojekt wählte ich die App „eBay Kleinanzeigen“. Ich suche und verkaufe gerne Gegenstände auf dieser Plattform, jedoch fällt mir immer wieder die komplizierte Benutzung und das veraltete Interface auf wodurch bestimmt viele UserInnen scheitern. Da ich das Prinzip der App jedoch als sehr wichtig erachte war es mir deswegen umso wichtiger die vielen Hindernisse eines eigentlich so einfachen Prozesses zu beseitigen.

Als User Flow wählte ich das Suchen und Rumstöbern in Anzeigen.

Analyse

Mein Erster Arbeitsschritt bestand darin, jeden Einzelnen Screen aber auch den Flow als Ganzes zu analysieren und nach Problemen zu zerlegen. Dabei markierte ich diese ganz grob und fügte Notizen und schon mögliche Lösungsansätze bei. Dies erleichterte es mir im späteren Redesign einen Überblick zu behalten.

Components & Variants 

Nachdem ich mich für das Design einzelner Elemente entschieden habe, legte ich diese als Components mit Nested Components an. Aus den jeweiligen Components erstellte ich dann wiederum Variants um wie zum Beispiel bei der Navbar problemlos zwischen dem ausgewähltem Menü wechseln zu können.

Meine Components und Variants gruppierte ich letztendlich in verschiedene Kategorien, um diese schnell wieder zu finden.

Farb- und Fontstyles

Eine gleiche Ordnung versuchte ich bei den Farb- und Fontstyles ebenfalls. Jedoch mit zurückblickend mäßigem Erfolg, aber dazu mehr im Fazit

Optimierungen des Interfaces

• Icons der Navbar und der Kategorien verändert
• Anzeigen neu gestaltet, damit jede Anzeige einen eigenen Raum für sich bekommt und sich einfacher von anderen separieren lässt

• Verwirrendes & unpassendes Hamburgersymbol für Alle Kategorien in ein einfaches „ALLE KATEGORIEN“ geändert

•  Filter als einfliegendes Overlay mit Dropdown Menu statt ewigem reinklicken in unterschiedliche Optionen

• Neue Anordnung und Sortierung der Filter

Optimierungen in der Nutzerführung

• Hinzufügen einer „Deine Favoriten“-Sektion, da diese ein wichtiger Bestandteil der Plattform darstellt und nicht versteckt sein sollte
• Kategorien von Startseite in Suchen verschoben 
• Besseres User-Feedback nach auswählen von Filtern

In den folgenden Anhängen sind die Screens und der Prototyp zu sehen. (Leider ist der Clickcursor bei dem Video aus irgendeinem Grund „verrutscht“ und klickt deswegen immer ein bisschen daneben)

Fazit

Obwohl ich Figma in der Vergangenheit schon für eigene Projekte und meine Bewerbungsmappe genutzt habe, konnte ich mir durch Maltes Einführungskurs sehr viel hilfreiches Wissen aneignen. Speziell Variants, Autolayout und SmartAnimate waren mir vorher fremd. 

Jede Funktion wurde durch Malte verständlich erklärt und immer durch die direkte Anwendung im Anschluss vertieft. Ausserdem fande ich Maltes kleine Ausflüge in Themen wie zum Beispiel Human Interface Guidelines sehr spannend und habe dadurch Lust auf mein bevorstehendes Studium und letztendlich auch Berufsleben bekommen. 

Wie schon vorher angedeutet bin ich zurückblickend jedoch nicht mit meiner Benennung und Organisation einzelner Styles zufrieden. Ich freue mich aber darauf mich in die Thematik der Benennung von Color- und Fontstyles einzulesen und dieses Problem in Zukunft möglichst zu vermeiden.

Alles in allem bin ich sehr froh diesen Kurs gewählt zu haben, da die Arbeit mit Figma und die Unterrichtseinheiten bei Malte sehr viel Spaß gemacht haben und ich viel Wichtiges gelernt habe.