Start

Meine Kenntnisse über Figma waren zu Beginn bei null. Dieser war also meine erste Begegnung.

shazam_app-1.png

App Research

Meine App der Wahl ist Shazam, eine App für mobile Geräte und Personal Computer, die durch die Möglichkeit, laufende Musik zu erkennen.

Anfangs fiel es mir sehr schwer eine Struktur aufzubauen, obwohl wir sie genau analysiert hatte, wusste ich nicht ganz wo und wie ich beginnen sollte.

app research.png

Element Analyse

Wir haben erst die App im Detail betrachtet und auseinandergenommen und einzelne Elemente analysiert. z.B die Schriftarten, Farben, Icons, Bildformat etc.

Dann sollten wir uns einen Screen aus der App heraussuchen und dort erst Elemente erkennen, welche wir dann selbst erstellen und in Styles umwandeln.

Danach beschäftigten wir uns als mit Komponenten. Hierbei haben wir diese zuerst erkannt, dann selber realistisch nachgebaut.

shazam_app_ui (3)-3.png

Style Guide

Zu Beginn habe ich meine  Komponenten angelegt. Hierbei sind mir viele Fehler unterlaufen, die sich später durch ein detailliertes Tutorial von Phillip selbst erklärt haben. Danach habe ich Icons  als Komponente angelegt und die Tochter-Komponente im nächsten Schritt in einer neuen Komponente eingebaut.

Anfangs hatte ich Schwierigkeiten beim Resizing meiner Icons. Nachdem ich mich noch einmal mit dem Thema auseinandergesetzt und Tutorials dazu gesehen habe, hat es sich doch erledigt.

shazam_app_ui (3)-4.png

Components

Nachdem nun mein Style-Guide angelegt war, habe ich meine Komponenten vom originalen App-Screen Step by Step nachgebaut.

shazam_app_ui (3)-5.png

Result

In diesem Kurs habe ich folgendes gelernt:

- beide Seiten meines Gehirns einzusetzen (logisch und kreativ)

- strukturiertes und komponentenbasiertes, systematisches Arbeiten

Ich hätte mir gewünscht, dass ich schon früher gut mitgekommen wäre, da ich bis zum vorletzten Tag sehr überfordert war.

Alles in Einem bin ich sehr froh, dass ich diesen Kurs belegt habe und werde Figma mit Sicherheit zukünftig nutzen. Ich kann Philipp nur herzlich loben für seine Geduld und Kompetenz.

shazam_app_ui (3)-6.png

Insgesamt habe ich zwei Module nachgebaut. Hier sind meine fertigen Ergebnisse.

Fazit

success-1030x578.jpg