Entwicklung digitaler Prototypen

Low-Fidelity

Designvorlagen in verschiedenen „Fidelities“ (kann man sich wie unterschiedliche Auflösungen vorstellen) ermöglichen die Auswahl und ggf. auch Anpassung eines Detailgrads. Dadurch ist es einfacher, auf Änderungsvorschläge einzugehen und die Produktentwicklung weiterzuführen. Aus der Perspektive von Entwicklern, die zur Umsetzung die Vorlagen erhalten, fallen oft Fachbegriffe, die im Folgenden erläutert werden:in Low-Fidelity Prototyp hat eine niedrige Auflösung. Oft werden schnelle Skizzen zu Papier gebracht, um die Wünsche darzustellen. Auf diese Art und Weise kann man schnell und einfach die Ideen sammeln und festhalten. Auch ist es möglich, verschiedene Seiten miteinander zu kombinieren und so einen ersten Eindruck für den Kunden zu vermitteln.

Medium-Fidelity

In dieser Stufe gibt es schon konkrete Anforderungen und Ideen für das Endprodukt. Hier werden Anordnungen visualisiert und konkrete Platzierungen verschiedener Komponenten ausgearbeitet. Man spricht dabei von Wireframes, also Blaupausen des Systems, die mit einfachen Mitteln die Vision in mittlerer Auflösung darstellen sollen.

High-Fidelity

In der hochauflösenden Variante nennt man die Ergebnisse Designvorlagen. Sie bilden eine konkrete, nicht-funktionale Kopie dessen ab, was der Benutzer im fertigen Produkt zu sehen bekommt. In dieser späten Phase sind Kriterien und Styles fertig definiert und werden in fast fertigem Zustand geliefert. Aus technischer Sicht wird anhand dieser Vorlage das Produkt entwickelt und fertiggestellt. Insbesondere ist es wichtig, das Verhalten auf verschiedenen Endgeräten zu berücksichtigen. Dabei unterstützen Richtlinien, die Abstände, Farbzuweisungen, Anordnungen, etc. definieren.

Falls Sie sich fragen, mit welcher Software oder auf welcher Webseite das einfach und schnell gemacht werden kann, gibt es hier ein paar Vorschläge:

Es gibt verschiedene Software-Lösungen, die im professionellen Umfeld verwendet werden. Dazu gehören weit verbreitete Tools wie etwa Sketch oder Axure RP. Doch welche Alternativen könnte man verwenden, wenn man unabhängig von Betriebssystemen sein möchte? Aus eigener positiver Erfahrung möchte ich nun genauer auf zwei Systeme eingehen:

Adobe XD

Adobe XD ist eine vektorbasierte Grafiksoftware zum Entwurf grafischer Benutzeroberflächen für Web-Apps und Mobile Apps. Es ist Bestandteil der Creative Cloud von Adobe. Nach einer langen Betaphase seit 2015 hat es seine Marktfähigkeit bewiesen und wird im professionellen Umfeld von UX und UI-Designern zur Erstellung von high-fidelity Prototypen und funktionellen Prototypen verwendet.

Aufgrund der offenen Schnittstellen und Creative Cloud Anbindung ist es einfach, bspw. mit Adobe Illustrator, Photoshop und direkt mit Adobe Experience Manager Designs direkt grafisch zu bearbeiten und in Webseiten umzuwandeln. Zudem ist der ebenen- und komponentenbasierte Aufbau eines Prototyps von Vorteil, um die Wiederverwendbarkeit der Bibliothek zu gewährleisten. Somit können in kurzer Zeit diverse Screens entworfen und bearbeitet werden. Mithilfe der Vorschaufunktion ist es zudem möglich, eine funktionelle Version im Browserfenster mit einem Link zu teilen und so Feedback einzuholen. Grafische Lösungen lassen sich in allen möglichen Auflösungen entwerfen und teilen. Als kleinen Nachteil kann man aufführen, dass im Vorfeld die Software installiert werden muss.

Figma

Figma ist ein kollaboratives Design-Tool zur Erstellung von Designs (für Web, Mobil, UI und UX). Mithilfe dieses Tools können sowohl klassische Designfunktionen und Designsysteme entwickelt als auch digitale Prototypen erstellt werden. Es handelt sich um ein plattformunabhängiges System, das sowohl als Browser-, Desktop- und Mobile-Application verfügbar ist. Die eigene Collaboration-Cloud ermöglicht die Echtzeitbearbeitung im Team, als auch in der privaten Nutzung.

Die Ursprünge dieser Software reichen ins Jahr 2012 zurück. Informatik-Studenten der Brown University hatten die Idee, eine Software unter dem Motto "anyone be creative by creating free, simple, creative tools in a browser." zu entwickeln. Sie wollten die Kreativität der Nutzer steigern, indem sie eine Plattform zur Verfügung stellen, mit der sich Kreativität in einem Browser Fenster entfalten lässt. Heute, also 10 Jahre später, ist die Software bereits in der Lage, Font-Systeme, Designsysteme und Analytics-Bibliotheken einzubinden. Eine weitreichende Community liefert zudem eine Reihe an vorgefertigte Module, die zur gemeinsamen Nutzung freigegeben sind. Zudem wird auch ein Whiteboard mitgeliefert, das man für Brainstorming und Ideensammlungen verwenden kann. Figma ist sowohl im kommerziellen Bereich als kostenpflichtige Version mit mehr Funktionalität, als auch im privaten Bereich als kostenlose Version mit Grundfunktionalitäten einsetzbar.

Eine breitgefächerte Auswahl an Software und Tools gewährleistet maximale Flexibilität im Arbeitsumfeld. Unter diesem Aspekt wollte ich mit diesem Blogeintrag einen kurzen Einblick in die Welt der Grafikverarbeitung und Design-Systeme geben. Ich bin der Meinung, dass man kreative Gedanken nicht nur schnell als analoge Skizze auf einem Blatt Papier erfassen können sollte. Es sollte auch mit digitalen Werkzeugen möglich sein, schnelle Skizzen gleich digital anzufertigen. Die Erfahrungen mit den vorgestellten Tools waren in der Vergangenheit sehr zufriedenstellend. Die weiteren Entwicklungen und ständigen Verbesserungen der Applikationen sind mit Spannung weiterzuverfolgen und werden in Zukunft noch interessanter. Auch wir bei eggs unimedia sind nah an diesen Themen dran, um weiterhin auf dem neusten Stand zu blieben.