Teaser – Verschiedene Ausschnitte des User Flows bestimmter Funktionen
Prozess
Zuerst habe ich überlegt, welche Schritte notwendig sind, um bestimmte Ziele zu erreichen. Dazu habe ich mich intensiv mit User Flows beschäftigt und die einzelnen Schritte analysiert, um auf dieser Grundlage die Grundstruktur der mobilen Anwendung zu skizzieren. Wichtig zu erwähnen ist, dass ich mich zunächst bewusst gegen die Integration von Community-Features entschieden habe. Mein Fokus lag auf einem System, das es ermöglicht, Inhalte einfach und übersichtlich zu speichern und wieder aufzurufen – und das allein ist bereits komplex genug.
Im nächsten Schritt skizzierte ich grobe Layouts, um die Platzierung der Elemente sowie die benötigten interaktiven Funktionen zu bestimmen. Zusätzlich erstellte ich eine Farbpalette, um das Layout und die Interaktionen durch gezielten Farbeinsatz klar und übersichtlich darzustellen.
Hier seht ihr verschiedene Varianten eines User Flows. Sie haben mir sehr geholfen, die benötigten Features und Services zu identifizieren und ermöglichten es mir, unterschiedliche Nutzungsszenarien gedanklich durchzuspielen, um Aufbau und Interaktionen sinnvoll zu gestalten.
Mithilfe von Skizzen habe ich erste Ideen für die Komponenten entwickelt, um herauszufinden, worauf ich achten muss, und um bereits erste Einschätzungen zur Umsetzbarkeit zu gewinnen.
Zusätzlich seht ihr digitale Skizzen, in denen ich die einzelnen Seiten und Komponenten grob in einem Layout angeordnet habe.
Ergebnis
Zum Schluss habe ich ein Konzept innerhalb von Figma entwickelt. Dabei begann ich, ein Designsystem zu erstellen, das unter anderem Styles, Variablen und Tokens umfasst. Dadurch konnte ich die erstellten UI-Elemente effizient vereinheitlichen. Interessant war auch die Möglichkeit, verschiedene Modi anzubieten, um den Nutzern eine Personalisierung zu ermöglichen, was ebenfalls in der Gestaltung berücksichtigt werden musste.
Schließlich habe ich basierend auf typischen Nutzungsszenarien einen interaktiven Prototyp erstellt.
| Konzeptentwicklung | FigJam |
| UI Design | Figma Design |
Zum Abschluss seht ihr einen Zusammenschnitt aller Funktionen, die ich bisher in Figma umgesetzt habe. Durch dieses Projekt habe ich Figma und seine Möglichkeiten noch einmal besser kennengelernt und praxisnah angewendet. Ich bin überzeugt, dass mir diese Erfahrung auch in zukünftigen Projekten von großem Nutzen sein wird.
Hinweis – Im Rahmen meines Prozesses habe ich zusätzlich reale Bilder verwendet, um eine realitätsnahe Vorstellung davon zu vermitteln, wie die Anwendung aussehen könnte. Aus rechtlichen Gründen seht ihr hier jedoch keine Screenshots oder Videos, da ich hauptsächlich Bilder aus dem Internet genutzt habe.
Hinweis – Im Rahmen meines Prozesses habe ich zusätzlich reale Bilder verwendet, um eine realitätsnahe Vorstellung davon zu vermitteln, wie die Anwendung aussehen könnte. Aus rechtlichen Gründen seht ihr hier jedoch keine Screenshots oder Videos, da ich hauptsächlich Bilder aus dem Internet genutzt habe.
Wenn du Interesse hast, dir den Prototyp in Figma anzusehen, dann melde dich einfach bei mir.
Zurück nach oben
Sei nicht traurig – die aktuellen Projekte sind erst der Anfang, es kommt noch viel mehr.
