Einmal "Look and Feel" zum Mitnehmen, bitte!
Für uns bedeutet maßgeschneiderte Software nicht nur qualitative Funktionalität, sondern auch angenehmes, individuell angepasstes Design.
Mit modernen Anwendungen, wie Adobe Xd (Experience Design) ist es möglich, einen klickbaren Prototyp zu erstellen. Anhand der Erstinformationen eines Projekts und des dazu erstellten Mock Ups (Grundgerüst/Template mit Anordnung der Grundelemente) entwerfe ich ein Design und verknüpfe die jeweiligen grafischen Oberflächen und die beinhalteten Elemente. Ziel ist es, darzustellen, wie die zukünftige Anwendung aussehen könnte.
Erfahrungsgemäß können wir diesen Prototypen bereits beim ersten Meeting präsentieren, sodass Fehlinterpretationen des Workflows oder Vorstellungen der Optik gleich abgestimmt oder Fragen unsererseits geklärt werden können.
Mit einem generierten Link kann der Prototyp verschickt und auf jedem Endgerät angezeigt werden - für Kunden sehr praktisch, wenn sie intern noch etwas besprechen wollen. Denselben Link gebe ich dann auch exklusiv für unsere Entwickler frei, die sich daraus die verwendeten Design-Spezifikationen, wie: Schriften, Farben, verwendete Assets (Bilder, Icons, Formen) und einen generierten CSS-Code entnehmen können.
Aber nach so viel virtuellem Gerede zeig ich euch mal am besten, wie das so aussehen kann:
Klick aufs Bild!
Kaum zu glauben, dass hier keine Zeile Code geschrieben wurde, oder?
Seminar “UX Design & Playful Prototyping
Am 05. und 06. Dezember war ich Teilnehmerin beim Design-Workshop in Wien, organisiert von The Tomorrow Academy.
Mich erwarteten die top organisierte und sehr freundliche Gründerin und CEO der The Tomorrow Academy: Mag. Anja Abicht, die meine Vorfreude bereits Tage zuvor mit nützlichen Begriffen und Videos, einem Erwartungsfragebogen und der Agenda gefüttert hat, die bemerkenswerten Speaker Cornelia Hasil (UX-Expertin und Frontend Developer bei Erste Bank Österreich, Wien) und Jens Schmidt (Kreativdirektor und Interfacedesign-Experte, Berlin) und 11 andere interessante und talentierte Teilnehmer.
In einer gemütlichen Wohnzimmeratmosphäre waren wir in 4 Gruppen aufgeteilt und nahmen die Herausforderung an, einen sogenannten *Designsprint in 2 Tagen durchzulaufen und am Ende des Seminars einen funktionalen Prototypen (wie bereits oben erklärt) zu präsentieren.
// Nerdtalk
*Ein Designsprint ist ein mehrtägiger Prozess mit dem Ziel, ein Produkt oder die Weiterbildung eines Produktes in kürzester Zeit, unter Zuhilfenahme von Team- und User-Input zu realisieren. Hierbei liegt der Fokus auf der Herausarbeitung eines visuellen Konzeptes für die Benutzerführung.
Der Sprint unterteilt sich in 4-6 Schritte, die in den 5 Tagen des Design-Sprints durchgeführt werden: Understand, Define, Prototype, Validate.
Am ersten Tag ging’s noch ganz „retro“ ans Werk mit Papier und Stift und wir näherten uns mittels verschiedenster, für mich sehr interessanter und sinnvoller Methoden immer näher dem Ziel, den Fokus auf die wichtigsten Elemente zu legen und gleichzeitig ein bestmögliches Nutzererlebnis, sowie optimale Nutzerführung zu bieten.
Angefangen haben wir damit, dass jeder im Team für sich notierte, welche möglichen Probleme auftreten könnten (was wäre wenn? „How might we?“). Gemeinsam haben wir dann gleich im Vorhinein geklärt, wie wir diese umgehen können.
Eine andere Methode war, im Schnelldurchlauf (1 Minute pro Screen (8), also quasi Höchstgeschwindigkeit) eine Sektion (in unserem Fall: der Login Bereich) in verschiedensten Variationen zu sketchen. Kurz darauf folgte schon die eigene Erstellung eines skizzierten Wireframes, wo wir noch einmal all unsere Ideen einbringen konnten.
Nach jeder Methode haben wir im Team unsere Entwürfe ausgetauscht und mittels Dot-Votings die
wichtigsten Ideen priorisiert und gekennzeichnet. Am Ende haben wir alles zusammen gemerged und es hat sich sozusagen „the best of the best“ herauskristallisiert! Cool, oder?
Am nächsten und leider schon letzten Tag wurden uns nützliche Programme, Tools und Plug-Ins vorgestellt, die uns in der Zusammenarbeit mit Entwicklern hilfreich sein könnten und weitere Design Tools wie Sketch wurden Adobe Xd gegenübergestellt und verglichen.
Das Highlight jedoch war, mit der Umsetzung des digitalen Prototypen im Team starten zu können, auch hier standen uns Conny und Jens tatkräftig zur Verfügung!
Bei der Präsentation ließen wir uns nochmal von den anderen Entwürfen inspirieren, diskutierten sie und nahmen wichtige Erkenntnisse mit.