Mit Mockups und Prototypen Ideen visualisieren

Mockups und Prototypen sind fester Bestandteil unserer Projekte. Schon nach den ersten Workshops beginnt die Prototypenentwicklung. Damit kombinieren wir deine Ideen mit unserer Erfahrung und kommen früh in einen Rhythmus aus Entwurf, Feedback und Überarbeitung, solange Änderungen noch günstig sind.

Mockup oder Prototyp?

Ein Mockup ist ein digitales Modell eines Systems oder einer Website. Es zeigt Aufbau, Inhalte und Funktionsumfang in hoher Detailtiefe und unterscheidet sich genau dadurch von einem Wireframe, das nur die grobe Struktur einer Seite absteckt.

Ein Prototyp ist ein Arbeitsmodell des späteren Systems. Er dient ebenfalls der Demonstration, wird aber über den Projektverlauf iterativ weiterentwickelt, bis hin zum vollständigen System.

Drei Detailgrade

Prototypen werden üblicherweise in drei Fidelity Levels eingeteilt:

• Low Fidelity. Skizzen auf Papier, sehr früh im Projekt. Günstig und in Minuten geändert oder weggeworfen.
• Mid Fidelity. Digital und klickbar. Zeigt User Flow und Funktionalität; der Markenauftritt spielt hier noch keine Rolle.
• High Fidelity. Sieht aus wie die fertige Anwendung, ist an das Corporate Design angepasst und vollständig klickbar. Die Grundlage für Tests mit echten Nutzern.

Wir arbeiten überwiegend zwischen Mid und High Fidelity. Unsere Mockups sind bereits in einer frühen Projektphase detailliert ausgearbeitet und an dein Corporate Design angepasst. So beurteilst du, was du später tatsächlich bekommst, und nicht eine graue Abstraktion davon.

Vom Style Guide zum abgenommenen Entwurf

Jedes Projekt startet mit einer Übersicht zu Farben, Typografie und den Zuständen der wichtigsten Elemente. Sie orientiert sich am Corporate Design deines Unternehmens, damit das fertige System zur Marke passt und wiedererkennbar bleibt.

Auf dieser Basis entstehen die ersten User Interfaces. Sobald Funktionen und Elemente stehen, gehen wir sie gemeinsam durch und schärfen nach. Danach werden Elemente verlinkt, sodass sich der User Flow zwischen den einzelnen Interfaces durchklicken lässt. Sind alle Details eingearbeitet, dient das Mockup der Freigabe. Erst danach geht das Projekt in die Entwicklung.

Wiederkehrende Elemente wie Tabellen, Diagramme, Paginierungen, Buttons und Navigationen pflegen wir in einer Bibliothek. Entsteht ein neues Element, das auch in anderen Projekten vorkommen kann, wandert es dorthin. Und kommt derselbe Inhalt auf mehreren Seiten eines Mockups vor, definieren wir ihn als Komponente: Eine Änderung an einer Stelle schlägt automatisch auf alle übrigen durch. Die Zeit, die das spart, fliesst in die Analyse der Anforderungen und in die Umsetzung.

Was Prototypen im Projekt bringen

• Sie machen komplexe Sachverhalte früh sichtbar und damit besprechbar.
• Sie lassen sich günstig an neue oder geänderte Anforderungen anpassen: ein Entwurf ist schneller umgebaut als eine fertige Applikation.
• Sie sind die Entscheidungsgrundlage für oder gegen eine Funktion, auch gegenüber Stakeholdern und Geldgebern.
• Sie erlauben Tests einzelner Funktionen mit echten Nutzern, bevor die erste Zeile Code entsteht.
• Sie definieren die Anforderungen so genau, dass die anschliessende Entwicklung weniger Rückfragen produziert.

Am Ende dieser Phase hast du gesehen, wie deine Plattform aussieht und wie sie sich bedient, bevor nennenswertes Entwicklungsbudget gebunden ist. Das ist der eigentliche Zweck der Übung.