Storyframing
Jahr
2023 (4. Semester)
Programme
Adobe XD, Photoshop, ProCreate
Kategorie
UX/UI Design
Projektart
Einzelarbeit
// Aufgabenstellung
Die Aufgabe bestand darin, eine Website auszuwählen, die inhaltlich relevant ist, deren visuelle Gestaltung jedoch Optimierungspotenzial aufweist. Die Website konnte dabei frei gewählt werden.
Diese sollte zunächst mithilfe von Wireframes analysiert und neu strukturiert werden. Darauf aufbauend sollten Storyframes entwickelt werden, um die Wireframes visuell ansprechender und erzählerischer darzustellen.
// Schritt 1
Themenfindung
Zu Beginn des Projekts wurde eine inhaltlich relevante Website gesucht, die gestalterisch und visuell Optimierungspotenzial aufweist. Außerdem sollte die Website ein persönliches Interessensgebiet/Hobbys abdecken.
Da ich seit meiner Kindheit Ski fahre und mehrere Jahre im Skiclub Plochingen aktiv war entschied ich mich für die Website des Deutschen Skiverbands (DSV).
// Schritt 2
Analyse des Ist-Zustands
Im zweiten Schritt wurde der bestehende Aufbau der Website analysiert und als Wireframe in Adobe XD nachgebaut. Ziel war es, Struktur, Inhalte und Nutzerführung losgelöst von der visuellen Gestaltung darzustellen und so Probleme und Potenziale sichtbar zu machen.
ℹ️ Hinweis: Die Wireframes entsprechen dem Stand der Website im Zeitraum März bis September 2023. Die Website wurde inzwischen überarbeitet.
// Schritt 3
Problemdefinition und konzeptionelle Überarbeitung
Auf Basis des erstellten Wireframes wurden zentrale Probleme der bestehenden Website identifiziert.
Mithilfe von User Storys wurden typische Nutzungsszenarien beschrieben, um Schwächen in Struktur, Priorisierung und Nutzerführung aus Sicht der Nutzer*innen herauszuarbeiten.
Darauf aufbauend wurde ein überarbeiteter Wireframe entwickelt, der diese Probleme adressiert und eine verbesserte Struktur sowie klarere Nutzerführung aufzeigt.
// Schritt 4
Visuelle Ausarbeitung
Im letzten Schritt wurden die Wireframes in Storyframes überführt.
Für diesen Schritt wurden passende Bildreferenzen recherchiert und mithilfe dieser Illustrationen mit Fineliner erstellt. Anschließend wurden die Skizzen eingescannt und mithilfe von Adobe Photoshop und ProCreate bearbeitet und koloriert.
// Schritt 5
Ergebnis & Learnings
Das Ergebnis des Projekts ist eine überarbeitete Website, die mithilfe von illustrierten Storyframes umgesetzt wurde. Diese zeigen einen neuen Seitenaufbau sowie die optimierte Nutzerführung.
Für mich war das Projekt ein wichtiger Schritt, um zu verstehen, wie Storytelling und Struktur zusammenwirken: Erst durch die Trennung von Wireframe (Struktur) und Storyframe (Emotion) wurde deutlich, wie stark visuelle Erzählweise die Nutzerführung unterstützen kann.
