Einleitung

Zum WiSe 21/22 bekamen wir die Möglichkeit in den Projektwochen den Kurs „Figma: Eine Einführung“ zu besuchen. Der Kurs wurde durch den Master-Student Malte Völkner geleitet. Ziel war das Erlernen und Vertiefen von grundlegenden Kompetenzen in Figma, einem wichtigen Programm für das Gestalten von Interfaces.

Hierfür trafen wir uns für zwei Wochen an insgesamt 6 Terminen in Präsenz an der FH Potsdam. Zusätzlich erarbeiteten wir zwischen den Veranstaltungen in Heimarbeit zum jeweils nächsten Termin erst vorgegebene Aufgaben, im weiteren Verlauf dann selbstständig gewählte Projekte.

Kursinhalte

Zu Beginn beschäftigten wir uns mit den Grundlagen von Figma, erhielten einen Einblick in die verschiedenen Tools und nutzten dieses Wissen dann in ersten Aufgaben. Im Fokus stand hier das Nachbauen von verschiedenen Inhalten, Typo, Tabellen und Icons. Wir übten das Anlegen und richtige Beschriften von Text, Color Styles und Components und daran anschließend, wie man diese in Variants und Instanzen anlegen kann. In der letzten Phase erlernten wir den Umgang mit Autolayout und Prototyping.

Währenddessen wendeten wir das in den Lerneinheiten erworbene Wissen an komplexeren Zusammenhängen, wie das Nachbauen von Apps oder Websites, an. In der zweiten Woche arbeiteten wir selbstständig an unser Abschlussprojekten und präsentierten diese vor dem Kurs. Dieses Projekt stelle ich in dem folgenden Abschnitt vor.

Abschlussprojekt

Redesign: iOS Calendar App

Die Aufgabenstellung war hier das Nachbauen und Verbessern einer App unserer Wahl, die wir bestenfalls regelmäßig nutzen. Hier lag der Fokus auf der Verbesserung einer oder mehrerer Pain Points aus UX Sicht sowie das Anwenden des über den Zeitraum der Projektwoche erlernten Wissens.

Themenwahl:

Ich entschied mich für die mobile Kalender App von Apple. Hier sah ich Verbesserungspotential in der Übersichtlichkeit der Termine in der Monatsansicht. Mich reizte dabei die Auseinandersetzung mit einer hauseigenen App von iOS und stellte mir die Frage, wie und warum Apple bestimmte Design–Entscheidungen getroffen hat und wie diese im Detail ausgestaltet sind.

Umsetzung:

Zuerst analysierte ich die verschiedenen Elemente der App und legte diese anschließend in Sammlungen/kategorischen Übersichten an:

• Font– und Color Styles

• Icons

• sich wiederholenden Elemente, die sich als Components eignen würden

• Komponenten innerhalb dieser components für das Nutzen von Variants und Instances

Als die Library angelegt war, begann ich die Screens nachzubauen. Auf dem Weg begegneten mir weitere Font und Color Styles die dann mein bereits bestehendes System nach und nach erweiterten. Hierbei legte ich viel Wert auf die richtigen Beschriftungen der einzelnen Komponenten.

Nun widmete ich mich dem Entwurf meiner UX/UI Verbesserung. Ich experimentierte mit Schriftgrößen und Farben und ließ mich von dem Google Kalender sowie der macOS Version des Kalenders inspirieren. In diesen Applikationen war das Feature, wie ich es mir vorstellte, bereits ausformuliert. Bei Analyse des Google Kalenders stellte ich fest, dass die verwendeten Schriftgrößen und Farben teils nicht mit den Guidelines von Apple kompatibel waren, sodass ich das Konzept vom Material Design der Gesamtübersichten der Timelines und der Termine übernahm und in die iOS Guidelines umwandelte — eine Gratwanderung.

Nach einiger Zeit war ich mit dem Ergebnis zufrieden, baute die restlichen Screens und widmete mich darauffolgend dem Prototyping.

Das Ergebnis

Fazit

Meine Vorkenntnisse, die ich in diesem Programm hatte, wurden durch diesen Kurs stark erweitert. Die reichhaltigen Aufgabenstellungen waren genauso zeitintensiv wie lehrreich. Malte zeigte uns viel Neues und führte uns mit seiner humorvollen und kompetenten Art durch die verschiedenen Methoden und Techniken in Figma. Ich freue mich sehr, diesen Kurs besucht zu haben und denke, dass es ein sehr guter Start in mein Studium als Interfacedesigner gewesen ist.