Du hörst oft Begriffe wie Skizze, Wireframe, Mockup und Prototyp, wenn du mit einer Webentwicklungsfirma zusammenarbeitest, aber verstehst du wirklich, was diese Begriffe bedeuten? Würdest du wissen, wann du einen Wireframe oder einen Prototyp verwenden solltest?

Lass uns mit den Gründen beginnen, warum du mit einer Skizze, einem Wireframe, einem Mockup oder sogar einem Prototyp beginnen solltest:

Um zu brainstormen oder herauszufinden, was du bauen willst. Sie helfen dir, deine Erwartungen zu definieren.
Spare Geld für Entwickler und beschreibe klar, was du bauen lassen willst.
Nutze sie, um Investoren, erste Kunden und Mitgründer zu pitchen.
Es ist entscheidend für dich, diese Begriffe zu unterscheiden, wenn du mit einem Entwicklerteam kommunizierst.

Unserer Erfahrung nach sind 2-3 Telefonate und ca. 2,5 Stunden Business-Analyse nötig, um herauszufinden, was genau gebaut werden muss. Während Mockups mindestens 5-8 Stunden für eine einfache mobile App benötigen.

Wie sieht der Prozess der Entwicklung einer App aus?
Die untenstehende Grafik zeigt alle Phasen der typischen Entwicklungsreise der Designdarstellung. Es ist wichtig, diesen Schritten jedes Mal zu folgen, wenn du ein neues Produkt erstellst.

Prozess der Erstellung von Skizze, Wireframe, Mockup oder Prototyp

TL;DR
Beginne mit einer einfachen Skizze auf einem leeren Blatt Papier. Erstelle dann einen Wireframe, der den Inhalt und die Funktionen deiner App organisiert. Füge Farben, Icons, Bilder und Logos zu deinem Wireframe für das Mockup hinzu. Zum Schluss erweckst du deine Mockups mit interaktiven Elementen zum Leben.

Was ist der Unterschied zwischen Skizze, Wireframe, Mockup und Prototyp?

1 Skizze

Es ist im Grunde nur eine grobe Freihandzeichnung auf einem Stück Papier, die dir eine Low-Fidelity-Darstellung deiner App gibt. Es ist der schnellste Weg, um deine Idee für ein Brainstorming bereit zu machen. Selbst eine einfache Skizze kann deine Idee besser beschreiben als Worte. Generiere Ideen, verändere Details, visualisiere, was du im Kopf hast; es ist alles deiner Fantasie überlassen. Dieser Schritt ist essentiell, um in die Wireframe-Phase zu kommen.

Mein Lieblingswerkzeug dafür: Stift und Schablonen auf Papier.

2 Was ist ein Wireframe?

Ein Wireframe ist gleichbedeutend mit dem Skelett oder der einfachen Struktur deiner Website/App. Es wird verwendet, um die Funktionalität eines Produkts sowie die Beziehungen zwischen den Ansichten zu beschreiben (was passiert, wenn du auf einen bestimmten Button klickst). Die Entscheidungen darüber, was (Inhalte/Features) und wo auf der Website oder App platziert werden soll, werden normalerweise in dieser Phase getroffen. Dieser Schritt umfasst nicht das Design des Produkts.

Mein Lieblingstool dafür: Balsamiq

3 Was ist ein Mockup?

Bei Qlando beginnen wir nie mit dem Bau einer App, bevor nicht ein Mockup fertiggestellt ist. Mit dieser Darstellung kannst du in den Entwicklungsprozess einsteigen und der Entwickler kann deine Mockups in die Realität umsetzen. Jedes Mockup bietet eine medium-fidelity Darstellung. Füge Farben, Schriftarten, Text (Lorem ipsum), Bilder, Logos und alles andere hinzu, was dein Wireframe prägt. Dein Ergebnis ist eine statische Karte der App. Denke über User Interface Practices nach, während du diesen Schritt gestaltest. Wenn du nicht die Möglichkeit hast, deine Wireframes in die nächste Phase zu bringen, dann lagere sie einfach aus.

Mein Lieblingstool dafür: Sketch .

4. Prototyp

Prototypen bieten eine High-Fidelity-Darstellung deiner App. Es ist wie ein Mockup, angereichert mit UX-Teilen, Interaktionen, Animationen und allem anderen, was du gerne beim Klicken auf Buttons erleben würdest. Dieser Schritt ist nicht immer notwendig, um eine App zu erstellen. Wenn du kein Entwickler bist, empfehle ich dir, einen Prototyp zu haben, um deine Idee vor Freunden, Familie und potentiellen Investoren zu pitchen. Das einzige, was noch fehlt, ist die Funktionalität. Es kann dir ein Gefühl geben, eine echte App zu benutzen, aber es sind nur Bilder, die miteinander verbunden sind.

Hol dir Feedback von deinen Kunden mit einem Prototyp und messe.

Mein Lieblingstool dafür: UXPin