Wireframes, Mockups und Prototypen finden in so gut wie jedem Softwareentwicklungsprozess Anwendung, jedoch ist nicht immer so ganz klar, was sich hinter den Begriffen verbirgt. Um was genau handelt es sich bei Wireframes und warum sind sie notwendig?

Wireframes

Wireframes sind eine sehr vereinfachte Darstellung eines digitalen Produkts. Sie beinhalten den grundlegenden Aufbau und dienen in erster Linie dazu, ein gemeinsames Bild hinsichtlich der Features und der Struktur des finalen Produkts zu generieren.

Wireframes können sowohl von Projektleiter:innen als auch von UX-Designer:innen angefertigt werden, empfehlenswert ist es aber unbedingt den Product Owner oder Stakeholder hierbei mit einzubeziehen. Zu diesem Zeitpunkt wird das erste Mal sichergestellt, dass auf ein gemeinsames Ziel hingearbeitet wird und keine wichtigen Aspekte des Produkts vergessen werden.

Gerne werden Wireframes auf Papier gezeichnet, es bieten sich aber auch Whiteboards, Flipcharts oder passende digitale Tools dafür an. Durch die bedienungsfreundliche Natur analoger Mittel, sind diese immer noch de facto Standard.

Der große Vorteil von Wireframes sind die geringen Kosten und die schnelle Durchlaufzeit. Außerdem können hier bereits erste Meinungen von außen eingeholt werden und die grundlegende Idee bereits ansatzweise validiert werden.

Mockups

Mockups sind der nächste logische Schritt nach Wireframes. Was zuvor schematisch gezeichnet wurde, wird nun von einem/einer UX-Designer:in mit entsprechendem (Dummy-)Inhalt befüllt und in eine präsentable, aber statische, Form gebracht.

Im Gegensatz zu Wireframes wirken Mockups auf den ersten Blick bereits wie fertige Produkte - Schriften, Farben, Formen und Designrichtlinien finden hier also bereits Anwendung. In erster Linie geht es in diesem Schritt darum, das visuelle Auftreten des Produkts zu testen und zu validieren. Hierzu werden auch gerne bereits Endnutzer:innen zu Rate gezogen, um herauszufinden ob die Nutzeroberfläche ansprechend gestaltet ist.

Prototyp

Wenn ein Mockup ein 3D-Modell eines Rennautos wäre, ist der Prototyp die Testfahrt auf der virtuellen Strecke. Ein Prototyp ist bereits sehr nahe am finalen Produkt, hier sind Aufbau und Aussehen des Produkts bereits definiert und der volle Fokus des/der UX-Designer:in gilt der Bedienung durch den User.

Nutzer:innen können das Produkt bereits testen und Feedback zur Bedienung, Nutzerfreundlichkeit und Verständlichkeit der Benutzeroberfläche abgeben. Damit sind Prototypen der letzter Schritt bevor ein Produkt schlussendlich in die programmiertechnische Umsetzung geht, da bis zu diesem Punkt im Normalfall keine Zeile Code geschrieben wurde.

Was braucht mein Projekt jetzt gerade?

Wireframes, Mockups und Prototypen beschreiben einzelne Schritte auf dem gleichen Weg. Da das ultimative Ziel eines Produkts meist immer auf glückliche Nutzer zurückzuführen ist, benötigt es beinahe immer eine Kombination aller drei.

Wireframes werden zuerst angefertigt. Hierbei wird eine Idee oder ein Konzept kosten- und zeitschonend greifbar gemacht.

Mockups dienen anschließend dazu, das Produkt vor Endnutzer:innen und Investor:innen zu präsentieren um das Design zu validieren und Begeisterung zu generieren.

Prototypen spiegeln das endgültige Produkt wieder und bieten die Möglichkeit die Nutzerführung und Bedienung zu testen.

Warum nicht sofort mit der Programmierung starten?

Wer sich diese Frage stellt, ist nicht alleine. Auch ich bin bereits auf die Idee gekommen einen oder mehrere dieser Schritte wegzulassen, das hat sich jedoch nur selten als wirklich sinnvoll herausgestellt. Im Endeffekt ist diese Überlegung immer durch zwei Aspekte motiviert: Zeit und Geld.

Der Designprozess kann einige Zeit in Anspruch nehmen, die ja für die Programmierung genutzt werden könnte. Ebenso entstehen hier Kosten, ohne dass das Produkt an sich (weiter)entwickelt wird. Warum also nicht gleich mit der Umsetzung starten und diesen gesamten Prozess umgehen?

Die Antwort darauf ist erneut Zeit und Geld:

In der Planung

Die größte Gefahr zu Beginn eines Software-Projektes ist Featuritis. Stell dir ein schweizer Taschenmesser mit 200 verschiedenen Funktionen vor. So ein Messer passt nicht mehr in deine Hosentasche, ist nicht mehr handlich und wahrscheinlich auch nicht erschwinglich. Genau so verhält es sich auch bei Software. Anfangs will man immer alles reinpacken was einem einfällt. Wenn man hier nicht smart priorisiert und die Features gut absteckt ist die Gefahr groß ein nicht verwendbares schweizer Taschenmesser zu erzeugen.

Um dieser Gefahr entgegenzuwirken eignen sich Mockups am besten, da hier der gesamte Aufbau der Software aus User-Sicht abgesteckt wird.

In der Entwicklung

Ein guter Prototyp spart den Entwickler:innen viel Zeit bei der Umsetzung, da sie sich voll auf die Entwicklung der Software konzentrieren können. So gesehen nimmt der/die UX-Designer:in den/der Entwickler:in viel Arbeit ab. Außerdem sind die Änderungen während des Entwicklungsprozesses minimal, da ja bereits beim Prototyp alle wichtigen Inhalte berücksichtigt wurden. (Änderungen würden schon dort stattfinden)

Beim Markteinstieg

Änderungen im Projekt können durch vielerlei Gründe motiviert sein, zum Beispiel durch schlechte Bedienbarkeit, niedrige Nutzerakzeptanz oder inkonsistentes Design. Ohne den Nachweis, dass der Markt das Produkt wirklich will, fehlt jedoch oft das Budget für diese notwendigen Änderungen und gute Ideen gehen schon zu Beginn schief.

Wenn man hier zuvor schon einen guten Prototypen designt hat kann man direkt den Markt befragen und Fehler vorbeugen.

"Denn die schönsten Fehler sind die, die man nicht begeht."

Wrap-Up

Wireframes, Mockups und Prototypen sind für erfolgreiche Produkte nicht wegzudenken. Mit den Wireframes kannst du auch bereits selber loslegen, aber mach dich darauf gefasst, dass sich zu diesem Zeitpunkt noch viel drehen und ändern kann.

Jeder Euro, den du in dieser Phase investierst, spart dir in der Entwicklung ein Vielfaches davon ein. Und gutes Wireframing und Prototyping kann dein Projekt um Wochen oder Monate beschleunigen und die Zeit bis sich dein Produkt rentiert massiv verkürzen.

Eine gute Designphase ist natürlich noch immer kein Garant dafür, dass die Idee im Endeffekt auch wirklich funktioniert. Wie man richtig MVPs entwickelt, kannst du in diesem Beitrag nachlesen. Manchmal braucht es dafür auch nicht mehr, als ein einfaches Video, wie es Dropbox damals bewies.

‍

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Das ist ein Test

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Das ist ein Test

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Das ist ein Test

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Das ist ein Test

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Das ist ein Test

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Test Image Caption kinda long maybe not, nice

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is a point
I'm making another
and another

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

this is my first point
and my second
and third point

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.