Prototyping & Mockups

Applications, Workflows und Websites vorab testen


Ob eine Idee hält, was sie verspricht, weiß man, wenn man sie testet. Nun ist es natürlich nicht möglich, gleich eine komplette Website oder Web-Application umzusetzen, um zu sehen, ob die Idee es wert ist, ausgebaut zu werden. Doch dafür gibt es zum Glück Prototypen und Mockups.

Eine Internetagentur, die Prototypen liebt

Wir lieben Prototypen, wir lieben Mockups. Insbesondere HTML-Prototypen sind perfekt, um neue Ideen zu testen. So lassen sich Bedienprinzipien oder auch Content-Konzepte schnell erlebbar machen. Und außerdem wir sind mit dem HTML-Prototypen auch gleich da, wo wir hin wollen: Im Browser. User können damit bereits durch die Seite navigieren und Teams können schnell Feedback sammeln. In einer ersten Iteration fließt das gesammelte Feedback wieder an uns zur Verbesserung des Prototypen zurück.

Was ist eine Prototyp?
Ein Prototyp bezeichnet im Kontext des Web eine klickbare Website oder Application, in der noch nicht alle Funktionen ausgearbeitet sind, aber die Bedienprinzipien und Ausgestaltung bereits sichtbar wird. So können beispielweise Menüpunkte oder Funktionen ausgelöst werden, haben aber nicht unbedingt eine Auswirkung. In einem Bestellprozess können z.B. bereits Formularfelder ausgefüllt werden, auch wenn beim Absenden keine Speicherung der Daten erfolgt. Oder es gibt auf einer Website einen Menüpunkt "Unsere Produkte", der aber mehrfach das gleiche Produkt zeigt. Das Ziel eines Prototypen ist es, ein "Gefühl" für die Bedienung zu erhalten, um die gewünschte User Experience in einem frühen Stadium bewerten zu können.

Vom Prototyp zur Application oder Website
Das Tolle an HTML-Prototypen ist, dass sie kein Wegwerfprodukt sind. Nach den Tests und Anpassungen des Prototypen kann dieser im Projekt weiter genutzt werden. Man kann ihn beispielsweise nach und nach zu einem sogenannten "High-Fidelity Prototype", also einem detaillierten Prototypen ausbauen, der im Anschluss dann zur fertigen Website oder Web-Application erweitert werden kann. Er bildet also den perfekten Einstieg in ein Projekt.

Prototype als HTML oder Sketch
In der Internetagentur unterscheiden wir zwei Typen von Prototypen. Auf der einen Seite gibt es die bereits besprochenen HTML-Prototypen. Diese bestehen aus HTML und CSS, Bildern, Texten und können in jedem Browser aufgerufen werden. So lassen sich beispielsweise auch Tests auf Smartphones oder Tablets durchführen. Alternativ gibt es Prototypen auf Basis von Sketch (vergleichbar zu Photoshop). Mit Sketch werden statische Layouts erstellt, die man sich ähnlich wie Screenshots vorstellen kann. Mit Hilfe von InVision verknüpfen wir die unterschiedlichen Screenshots dann miteinander, um aus statischen Screenshots navigierbare und damit erlebbare Seiten zu machen.

Prototyp vs. MockUp
Was ist der Unterschied zwischen einem Prototype und einem Mockup, und müsste eine Internetagentur hier nicht aufklären? Ja, aber so einfach ist das leider nicht. Die Grenzen sind hier sehr fließend und die Verwendung der Begriffe sind in der Branche nicht konsistent. Prinzipiell bezeichnet ein Mockup eher eine Attrappe, während ein Prototyp eher ein - wenn auch eingeschränkte - funktionsfähiges Beispiel darstellt. Prinzipiell lässt sich festhalten, dass ein Mockup eher auf das Design an sich ausgerichtet ist, während ein Prototype den Fokus stärker auf die Funktionsweise richtet.

Sinnvoller Einsatz
Natürlich ist nicht in jedem Projekt die Nutzung von Prototypen oder Mockups sinnvoll, aber in den meisten. Insbesondere wenn ein Web-Projekt stark auf die Interaktion mit dem User ausgerichtet ist, ist der Start mit einem Prototypen empfehlenswert, also vor allem bei Web-Applicationen, E-Commere Sites, Anmeldeprozessen, Logins oder Seiten mit komplexen Strukturen. Der Erfahrung nach verbessert hier ein Prototyp das spätere Ergebnis deutlich im Bezug auf Usability und User Experience.

helllicht unterstützt durch Prototyping

Ob Mockup, Prototyp oder Dummy. Sprechen Sie einfach mit uns und wir beraten Sie gerne, in welchen Bereichen sich welche Konzepte zielführend einsetzen lassen. Da wir unterschiedliche Workflows zur Erstellung von Prototypen nutzen, finden wir für fast jeden Anwendungsfall das richtige Modell. Jetzt Beratungstermin vereinbaren


Auf einen Blick

  • Prototypen und Mockups für Websites und Applications
  • Erstellung auf Basis von HTML/CSS oder Sketch/InVision
  • Test von Prozessen und Abläufen zur Optimierung
  • Test von komplexen Navigationsstrukturen
  • späterer Ausbau von Prototypen zu fertigen Produkten



LOADING