Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Figma: Eine Einführung - MADE Redesign

In dem Kurs "Figma: Eine Einführung", der von dem Master Student Malte Völkner geleitet wurde, konnten wir erste Erfahrungen mit dem Programm sammeln.

Zunächst wurde uns Figma jedoch von Grund auf erklärt. Erst dann starteten wir mit kleineren Übungen. So bauten wir beispielsweise erst ein Kalender-Icon nach, dann den Screen einer frei gewählten Website und wagten uns schließlich an eine App mit mehreren Screens. Spannend wurde es, als wir die Aufgabe bekamen, die einzelnen Seiten mithilfe des Prototyping-Tools zu vernetzen. Für einen Anfänger wie mich gar nicht so leicht. Aber dazu später mehr;)

Erste Schritte...

Basics

Gestartet haben wir den Kurs damit, uns die Benutzeroberfläche sowie die grundlegenden Funktionen des Programms anzusehen. Was sind Pages, was sind Frames? Wie erstelle ich Formen und Texte? Und natürlich die Frage, wie ich das Ganze ordentlich strukturiere und benenne, sodass auch ein zukünftiger Kollege sich in meiner Datei zurechtfindet.

Components, Autolayout und Variants

Anschließend lernten wir mehr über das Verwenden von Components, Autolayout und Variants und welche Vorteile dies mit sich bringt. So konnten wir viel schneller und mit weniger Arbeitsaufwand Screens zu unserer App hinzufügen und Änderungen direkt im Master-Component vornehmen, ohne jede Komponente einzeln verändern zu müssen. 

Color- und Fontstyles

Viel Spaß hat mir außerdem das Arbeiten mit Color- und Fontstyles bereitet. Auch diese Arbeit hat einen wichtigen Bezug zum späteren Arbeitsalltag. Ohne das Verwenden von Color- und Fontstyles können beispielsweise Entwickler, die ein Projekt später realisieren, nicht nachvollziehen, welche Farben bzw. Schriften verwendet werden sollen, um das Corporate Design eines Kunden einzuhalten.

Abschlussprojekt - MADE Redesign

MADE ist ein online Einrichtungshaus, das in Zusammenarbeit mit unabhängigen Designern und Manufakturen Möbel und andere Einrichtungsgegenstände ohne den Preisaufschlag anbietet.

Rebuild

Als "Flow" habe ich den Vorgang gewählt, einen Artikel zu seiner Favoriten-Liste hinzuzufügen. Von den insgesamt vier Screens, die für diesen Vorgang benötigt werden, habe ich drei exakt gleich mithilfe von Components, Autolayout und Variants nachgebaut. Natürlich wurde darauf geachtet, passende Color-und Fontstyles zu hinterlegen. 

Redesign

Außerdem habe ich drei weitere Screens hinzugefügt, um die Nutzerfreundlichkeit zu optimieren. So wird die Favouriten-Liste in der neu gestalteten App automatisch in Kategorien eingeteilt. Vor allem bei einer hohen Anzahl an Artikeln in der Liste ist das Interface durch die klare Strukturierung einfacher zu verstehen und bedienen.

Prototyping

Zuletzt mussten die einzelnen Screens nur noch miteinander verbunden werden. Wir sollten die überarbeitete App ja am Ende des Kurses auch bedienen können. Zur Veranschaulichung wurden dem Projekt Fotos sowie ein Youtube-Video beigefügt, in dem der Prototyp getestet wurde.

Fazit

Obwohl mich der Kurs bei Malte anfangs mehr gefordert hat als erwartet (Figma Newbie), bin ich rückblickend unfassbar froh, meine Projektwoche sinnvoll genutzt zu haben. Die Tatsache, dass ich innerhalb von nur zwei Wochen die Figma Basics gelernt habe, motiviert mich sehr und steigert die Vorfreude auf die kommende Zeit. Auch Maltes Begeisterung für die Arbeit des Interfacedesigners und seine zahlreichen Tipps und Tricks waren sehr wertvoll und vielleicht wird ja aus Malte Völkner noch irgendwann Prof. Malte Völkner;)