In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
Als Übung, um das strukturierte arbeiten mit Figma zu lernen, sollte eine beliebige App gewählt werden. Aus dieser dann die Elemente wie Schriften, Farben und Komponenten/Module erkannt, und nachgebildet werden.
Eine beliebige App sollte nachgebaut werden. Für mich kam eine meiner lieblings Apps in Frage. Da diese nicht auf jedem Handy zu finden ist und über ein sehr gelungenes UI verfügt. Mein Ziel war es die Farbe von allen Flächen mit nur einem Klick farblich zu ändern.
Zunächst wurden die Hauptelemente, aus denen der Appscreen aufgebaut ist, mittels Screenshots herausgefiltert.
Danach wurden die Schriften, Farben und Icons extrahiert oder ähnliche verwendet. Icons wurden als 24 x 24 px Komponente angelegt, um diese einfacher austauschen zu können.
Die Diversen Stilvorgaben erhielten alle generische Namen zur besseren Zuordnung.
Angelegte Komponenten steuern alle child / Schwester Komponenten. So können mit einer Änderung der Main / Eltern Komponente alle child Komponenten gesteuert und verändert werden.
Besonders bei häufig auftretenden Elementen und großen Projekten spart das Zeit.
Die Komponenten wurden passend benannt und geordnet. So sind Buttons, Icons oder Navigation einfacher zu finden und einzufügen.
Aus den diversen Komponenten wurden Module gebildet.
Diese wurden dann auf einem App Layout zusammengefügt.
Um ein späteres responsive Layout darstellen zu können, wurden die Komponenten mit Constrains versehen. So bleibt ein Objekt an der Stelle an, welcher es sich befindet oder vergrößert sich mit dem Layout.
Der Prototyp vom Userfolw ist im Folgenden Video dargestellt.
Zum Anfang des Kurses habe ich ausschließlich mit Adobe XD gearbeitet. FIGMA war mir nur ein geläufiger Begriff Programmes das in letzter Zeit häufiger in großen Unternehmen genutzt wird.
Das Kollaborative, strukturierte und einfache arbeiten ohne Abstürze oder Bugs gefiel mir sehr gut. Von 1/10 In FIGMA auf 8/10 Basiswissen in 2 Wochen. Prototyping und ein paar Kleinigkeiten werde ich mir noch selbst beibringen.
Beim Projekt war die fachliche Kompetenz von Phillip und das realitätsnahe Wissen sehr hilfreich. Vielen Dank :).