Was ist der Unterschied zwischen Prototyp, Mockup und Wireframe?
Das ist eine gute Frage und Walter Binder hat sie kurz und präzise beantwortet.
GIF: tenor
Vielleicht hilft dir noch mein zusätzlicher Input weiter.
Zum Prototypen: wir differenzieren zwischen zwei möglichen Prototypen.
Es existieren "digitale" und "analoge" Prototypen. Digitale Prototypen sind für das visuelle Konzept von Apps oder Websites zu empfehlen. Dafür eignen sich Tools wie Adobe XD (kostet) oder Figma (kostenlos). Bei dem Prototypen sind auch schon alle gestalterischen Elemente wie die:
Heading
Sub-Heading
Bild
Body Text
Call to Action (CTA)
uvm.
vorhanden und diese suggerieren die finale Form deines Projekts. Zudem können auch alle genannten Elemente interaktiv sein und diese Interaktivität kann dann ganz einfach auf dem Desktop oder auf einem anderen Device getestet und präsentiert werden.
Hier ein kurzer Einblick in einen alten interaktiven Prototypen von mir in Adobe XD:
Ein kurzer Exkurs zu dem "analogen" Prototypen: das geht wiederum mehr in Richtung Hardware & Produktdesign/-entwicklung. Hier könnte man zuerst mit Hilfe von einer CAD-Software (3D Software) den Prototypen (auch digital) entwickeln und im nächsten Schritt kann er dann mit Hilfe eines 3D-Druckers (analog) gedruckt werden.
Mein Arbeitskollege arbeitet mit CAD (kostet & branchenübliche Software), ich arbeite wiederum mit Blender (kostenlos & gut für Animationen). Hier ein kurzer Einblick in die Blender-Software:
Hier ein Beispiel ohne "Umrisse":
Zu den Unterschieden und den Entwicklungsschritten eines Prototypen habe ich vor kurzem einen Beitrag
verfasst:
https://www.infinize.de/blog/prototypenbau
Zum Mockup: auch hier gibt es zwei verschiedene Arten von Mockups. Zum einen haben wir den low-fidelity Mockup, zum anderen den hi-fidelity Mockup. Wie man bereits anhand der Namen (low & hi) vermuten mag, unterscheiden sich beide in ihrer Art der detailreichen Gestaltung.
Bei dem low-fidelity Mockup werden nur grob die relevanten UI-Elemente in den jeweiligen Frame angeordnet. Hier benutzt man nur Striche, einfache Formen wie ein Rechteck oder Viereck und keinen konkreten (Text)-Inhalt.
Dasselbe wird auch bei dem hi-fidelity Mockup gemacht. Nur geht man hier genau ins Detail und benutzt auch konkrete Farben, Abbildungen, Hierarchien und Inhalte, die dem finalen Projekt sehr Nahe kommen. Jedoch muss keine Interaktivität vorhanden sein.
Last but not least: der Wireframe.
Ein Wireframe ist ebenfalls nicht interaktiv. Er kann sowohl analog (Papier und Stift), als auch digital erstellt werden und veranschaulicht das mögliche Layout der Website/App. Hier können wir aber auch schon genauer auf den Inhalt eingehen.
Jetzt noch ein letzter Tipp! Deine Frage beinhaltet eigentlich drei Elemente eines möglichen Designprozess.
Vielleicht hast du sonst direkt mit den Skizzen und der Erstellung eines low-fidelity Prototypen oder eines Wireframes angefangen. Ich empfehle dir beim nächsten Mal diese Reihenfolge:
User Research
Priority Guides
Intent Frames
Mockup/Wireframe
User Flows
Prototypen
Du hast natürlich auch die Möglichkeit dich direkt an die digitale Umsetzung deiner App/Website zu setzen, jedoch rate ich dir davon ab. Je besser du dich mit den oben genannten Punkten vorbereitest, desto weniger Probleme wirst du am Ende haben. Zudem sparst du dir durch bessere Vorbereitung auch extrem viel Zeit!
Ich hoffe, dass ich dir irgendwie weiterhelfen konnte. Für weitere Fragen stehe ich dir jederzeit zur Verfügung! :)
Liebe Grüße und viel Erfolg,
Christian von infinize