Von der Idee zur User Experience
Design ist das eine – Funktionalität und Usability das andere. Wie schafft man es, schnell und zielführend eine Brücke zwischen Idee und Digitalprodukt zu bauen? Wir stellen euch die Prozesse auf der digitalen Baustelle näher vor.
Skizze – Wirefame – Prototyp
Bevor wir uns Gedanken über Farbwelt, Bildsprache oder Produktplatzierung machen, benötigen wir ein Konzept. Denn genau wie die Einzelelemente eines Bauwerks zunächst grob skizziert werden, müssen auch wir wissen, über welche Elemente die zukünftige Website, die gewünschte App oder die geplante Software verfügen soll. Ein Wireframe hilft uns dabei, den ersten Prototypen des neuen Produkts zu durchdenken, indem wir die einzelnen Seitentypen funktional skizzieren, die gewünschten Elemente in grobe Raster anordnen und gleichzeitig eine erste Struktur festlegen. Richtig gute Wireframe-Tools kommen bereits mit den wichtigsten UX-Elementen um die Ecke, mit denen schon im ersten Schritt ein optimales Nutzererlebnis definiert werden kann. Der Wireframe ist also der essentielle erste Schritt von der Idee zur User Experience, auch UX genannt.
Wireframes können einfach und statisch, aber auch in Form von Click Dummies komplex und dynamisch aufgebaut sein. In der App-Entwicklung nutzen wir dynamische Mockups, um die UX grundlegend zu definieren.
Es gibt jede Menge Wireframe-Tools, manchmal reicht aber schon eine einfache Handzeichnung aus.
Wireframe-Software – Unsere Favoriten:
- Sketch: Der Tausendsassa unter den Prototyping Tools. Von der Skizze über Mockup bis hin zum fertigen UX-Design kann Sketch alle Stufen des Designprozesses für Websites und Apps abbilden. Kollaboratives Zusammenarbeiten im Team inklusive.
- Die InVision App arbeitet Hand in Hand mit Sketch. Hier können Prototypen erstellt, dynamische Hotspots definiert und Feedbackschleifen mit den Kunden umgesetzt werden. InVision eignet sich perfekt für den Freigabeprozess innerhalb des Teams und zwischen uns und den Kunden.
- Gliffy: Als Extension für Google Chrome oder Confluence ist Gliffy ein kleines, schlankes Tool, um schnell und einfach Flow Charts und Wireframes zu erstellen. Der HTML5-Editor ist leicht zu bedienen. Die grundlegenden Funktionen sind kostenlos. Mehr Item-Auswahl und Speicherfunktionen gibt es allerdings nur in der Bezahlversion.
- Lucidchart: Die Erweiterung für die G Suite ist perfekt für die einfache Erstellung von Flussdiagrammen geeignet.
- Adobe XD: Das Prototyping-Herz schlägt schneller. Platzhirsch Adobe hat mit XD eine Wunderwelt für UX-Designer entwickelt. Neben Websites und Apps können hier auch Prototypen für Games und Voice UI gebaut werden. Teams können in Echtzeit an ein und demselben Designprojekt arbeiten. Dank Animationen und Interaktionselementen wird dem Digitalprodukt bereits in der Prototypingphase richtig viel Leben eingehaucht.
Kreative Ideensammlung und unmittelbare Umsetzung gewünscht? SpringWORK begleitet euch im kreativen Prototyping-Prozess – moderierend, strukturierend, programmierend.
Dynamische Wireframes, Mockups und Click Dummies helfen nicht nur uns, sondern auch unseren Kunden. Ausgewählte Klickpfade werden innerhalb der Layoutgrafik klickbar gemacht. So decken wir mögliche Logikfehler auf, die noch vor Beginn der Entwicklungsphase behoben werden können.
Jetzt wird’s schön.
Sobald die Wireframes stehen, darf die Design Unit mit dem Feinschliff loslegen. Anhand der Vorgaben für Anordnung und Nutzerführung entwerfen unsere Designerinnen und Designer vollendete Layouts für alle Seitentypen und Screens. Hier entstehen Farb-, Schrift- und Bilderwelten. Buttons, Formularen, Galerien und Navigationselementen wird Leben eingehaucht.
Sketch ist auch hier neben Adobe Photoshop das Tool unserer Wahl, um nicht nur Webdesigns von Grund auf perfekt zu designen, sondern auch, um App- und Software -Interfaces nutzerfreundlich zu designen.
Das Resultat: Ein Nutzer-Erlebnis.
Sind Wireframes, Prototypen und Layouts im Kasten, wird das ganze Paket der Development Unit übergeben. Unsere Entwicklerinnen und Entwickler gießen nun Elemente, Funktionen und Layout in den passenden Code.
Eine Website kann nach Abschluss der Entwicklungsphase direkt gelauncht werden. Etwas anders verhält es sich oftmals in der Software- und App-Entwicklung, da bei diesen Produkten der Entwicklungsprozess quasi nie abgeschlossen ist. Iteratives Arbeiten gebietet, dass der Entwicklungsprozess in Etappen geschieht. Um direkt ein Feedback von Kunden, Markt und Usern zu erhalten, empfehlen wir, Anwendungen zunächst als MVP, dem “Minimum Viable Product” zu testen. Das Minimalprodukt ist ein lauffähiger Prototyp und die Feuertaufe am Markt. Es verfügt über die Grundfunktionen und bietet den Usern einen ersten Einblick in das, was noch kommen mag. Ein MVP ist für uns essentiell, um Funktionen umfassend zu testen und unmittelbares handlungsrelevantes Feedback vom Markt zu erhalten.
Übrigens…
Wir unterstützen euch mit unseren Teams bei der Konzeption, dem Design und der Umsetzung eurer Web-, App- und Software-Projekte. Sagt einfach Bescheid.
