Wireframes, Mockups und Prototyping

Wir machen Ihr App-Konzept greifbar

Es ist unmöglich, von einer App-Idee in Ihrem Kopf zur vollständigen Entwicklung zu gehen, ohne zu veranschaulichen, was der Nutzer wann, wie und warum sieht. Deswegen versuchen wir gemeinsam mit Ihnen über Wireframes, Mockups und Prototyping herauszufinden, welcher Weg am besten für Ihre User funktioniert.

Der ehemalige Google Mitarbeiter Chris Sacca und Investor von Twitter und Uber bringt es auf den Punkt: „Ideas are cheap – Execution is everything.“ Deswegen sind wir überzeugt – Ihre fachliche Expertise und unsere mobile Expertise führen zu einer großartigen mobilen Lösung.

Visualisieren Sie Ihre Ideen mit Hilfe von
Wireframes und Mockups 

Es gibt viele Möglichkeiten ein User Interface-Konzept zu entwickeln: Wireframes, Mockups oder Prototypen. Im Grunde handelt es sich hierbei um Skizzen, welche den Übergang von der Idee zur Realisierung gestalten. Egal wie viel Zeit Sie in die Analyse stecken, vergessen Sie nicht, Ihre App-Konzeption zu skizzieren. Es klingt vielleicht etwas banal, aber es stimmt: Skizzieren geht über Studieren.

Das Skizzieren hilft über die User Experience nachzudenken und diese zu verbildlichen. Hierbei können Sie herausfinden, wie Ihre App von Screen zu Screen für die User funktioniert. Darauf aufbauend setzen wir gezielt vollständige und iterierte Wireframes, Mockups oder Prototypen zur Validierung Ihrer App-Idee ein. So können Sie große Erkenntnisse bezüglich der Ausgestaltung Ihrer App gewinnen, ohne sich dabei zeitlich oder finanziell zu überlasten.

Wireframes und Mockups bilden zudem auch die Grundlage eines Kostenvoranschlags. Anhand dieser Skizzen wird Ihre App-Idee samt aller relevanter Funktionen hinsichtlich der Benutzeroberfläche technisch 1 zu 1 übersetzt.

Wireframes für einzelne Screens

Wireframes sind abstrakte “Bleistift”-Skizzen der einzelnen Screens Ihrer App. Die einzelnen UI-Elemente, z.B. Eingabefeld, Button XY oder Profilbild werden in Zusammenhang gebracht und in ihrer Funktion beschrieben. Hier wird Ihre Idee greifbar veranschaulicht und erste Konzeptlücken können geschlossen werden (z.B. Zurück-Button fehlt). Wireframes zeigen auf einfache Weise, wie eine Idee in Form einer Benutzeroberfläche Gestalt annimmt.

Mockups zur Visualisierung

Mithilfe von Mockups können Sie ein schnelles Feedback zur allgemeinen Optik bei Ihren Usern einholen. Mockups stellen den visuellen Part Ihrer App dar. Hierbei werden Farben bzw. Farbkombinationen gegenübergestellt. Außerdem wird ein “Thema” für die Gestaltung – z.B. minimalistisch oder cartoon-artig – für Ihre App gefunden. Mockups zeigen, wie sich Ihre App optisch anfühlt. Um ein erstes Feedback für Look-and-Feel Ihrer App zu erhalten, müssen Sie nicht alle Screens pre-designen.

Prototypen vereinen

Durch die Verwendung von Prototyping kombinieren Sie Wireframes und Mockups. Dies ist gerade bei sehr umfangreichen Konzepten sinnvoll. Oder aber auch, wenn Sie noch auf der Suche nach potenziellen Stakeholdern sind. Prototypen sind eine Art klickbare Präsentation Ihrer App, die sich aber auch auf dem Smartphone präsentieren lassen. Das bedeutet, dass einzelne Screens (Mockups) vom Designer in Anlehnung an die Wireframes kreiert werden. Diese werden mit Klickflächen (ohne echte Funktionalität), Scroll-Möglichkeit und Animationen versehen. Besonders geeignet sind Prototypen für etwaige App-Pitches – egal ob intern oder extern. Schließlich präsentieren Sie Ihre Idee mithilfe von Prototypen auf eine überzeugende Art.

Wie Sie Wireframes und Prototypen gezielt in der App-Konzeption einsetzen können

Nun wollen wir tiefer darauf eingehen, wie wir mit Ihnen Wireframes, Mockups und Prototyen in der App-Konzeption einsetzen. Obwohl die einzelnen Schritte grundsätzlich optimal aufeinander aufbauen können, ist es je nach Use Case nicht zwingend notwendig alle Schritte zu gehen.

Wireframes in der App-Konzeption

Wireframes bieten die Möglichkeit Informationen so darzustellen, dass sie schnell und übersichtlich verstanden werden. Somit können Sie Entscheidungen gezielter treffen und Ideen festigen. Dies hat zur Folge, dass der Sprung ins Design keine großen Änderungen nach sich zieht. Behalten Sie daher im Hinterkopf, dass Wireframes keine Aspekte des Designs berücksichtigen. Farben und Schriften sind bei diesem Konzeptionsschritt unwichtig. Aussehen und Haptik des Layouts spielen später in Bezug auf das User Interface eine unheimlich große Rolle. Um hier keine falschen Eindrücke zu wecken, setzen wir bei Mockups Standardsymbole und Schwarz-Weiß-Optik ein.

Das übergeordnete Ziel ist es, einen detaillierten Plan für die Konzeption der App zu erstellen.

Aus ihm geht hervor, was jeder Bildschirm unter funktionalen Gesichtspunkten beinhalten wird. Zum einen beinhaltet dies Angaben zur Gruppierung und Anordnung von Inhalten. Zum anderen wird die Struktur der Informationen sowie die Funktion und Interaktion der Elemente untereinander beschrieben. Wireframes werden so gestaltet, dass sie von Personen ohne technischen Hintergrund verstanden werden können, aber auch informativ genug sind, um Fragen eines Entwicklers zu beantworten. So wie man ein Haus nicht ohne Baupläne bauen würde, sind Wireframes ein Schritt, der bei der Entwicklung einer Anwendung nicht übersprungen werden sollte. Wireframes helfen die Projektanforderungen detailliert zu dokumentieren, eine genaue Aufwands-Schätzung zu erstellen und eine Projektstruktur auszuwählen, die funktioniert.

Mockups in der App-Konzeption

Häufig werden Mockups mit Wireframes oder dem Prototyping verwechselt. Mockups werden nicht für den Aufbau funktionaler Anforderungen verwendet. Vielmehr handelt es sich um Entwürfe, die sich auf die visuellen Aspekte des Konzepts konzentrieren. Um bei der Hausbau-Metapher zu bleiben, kann man sich Mockups und Wireframes zusammen als Grundgerüst des Hauses vorstellen. Während Wireframes den Bauplan darstellen, sind Mockups die ersten visuellen Entwürfe der Inneneinrichtung und spiegeln so das äußere Erscheinungsbild wider, bevor der Bau beginnt. Konkret füllen Mockups Wireframes mit Farbpaletten, Typografie, individueller Ikonographie und Bildern.

Obwohl Mockups kein interaktives Tool sind, kommunizieren sie alles, was ein statischer Bildschirm kann.

Mit Mockups können Sie Ihre App-Idee und Ihr App-Design in Präsentationen oder Marketingunterlagen für jegliche Stakeholder veranschaulichen. Des Weiteren bieten Mockups die Möglichkeit Feedback für das Design der Anwendung zu erhalten, da sie das Endprodukt visuell veranschaulichen. Ein weiterer Vorteil ist die Flexibilität. Schließlich kann zu diesem Zeitpunkt jegliches Feedback zum Design schnell und ohne größeren Aufwand umgesetzt werden. Spätere Änderungen im Code wären deutlich aufwändiger und damit kostspieliger.

Prototyping in der App-Konzeption

Ein Prototyp bietet die Möglichkeit, mit den Elementen der Anwendung zu interagieren. Es gibt unterschiedliche Arten von Prototypen. Die beiden grundlegendsten Unterschiede symbolisieren Low-Fidelity- und High-Fidelity-Prototypen, kurz Lo-Fi und Hi-Fi-Prototypen. Während Lo-Fi-Prototypen oft mit analogen Hilfsmitteln gebaut werden, sind Hi-Fi-Prototypen oft schon klickbare “Mini-Apps”, die die grundlegende App-Idee beinhalten. Demnach schreiben wir hier das erste Mal Code. Das Ziel des Prototypings ist es, eine Simulation Ihrer App zu erstellen. Dies schließt auch die Abfolge der Bildschirme und deren Navigation ein. Mit Hilfe von Prototypen können User die App erstmals als Software testen. Somit kann ihr Feedback aufgenommen werden, bevor die eigentliche und viel umfangreichere, detaillierte App-Entwicklung beginnt. Je nach Projekt ist es sinnvoll, jeden Entwicklungsschritt mit Usern zu testen, damit Sie frühzeitig technische und visuelle Änderungen vornehmen. Dies minimiert die späteren Entwicklungskosten.

Die Durchführung von Prototyping kann zu Kosteneinsparungen führen.

Trotz allem ist Prototyping keine zwingende Voraussetzung für den Entwurf und die Entwicklung Ihrer App. Jedoch bietet es gerade bei Pitch-Präsentationen oder der Suche nach Investoren einen immensen Vorteil. Denn hiermit können Sie Ihre mobile Lösung erstmals konkret aufbereiten. Ein Prototyp ist demnach nicht für jede Anwendung notwendig.

Rapid Prototyping oder nicht?

Starten Sie nicht mit der App-Entwicklung bevor ein visuell und technisch durchdachtes Konzept steht. Ohne ein geprüftes Konzept kann es passieren, dass im schlimmsten Fall jeder Screen der Mobile App im Nachgang geändert werden muss.

Auch wenn Konzeptionszeit immer Geld kostet, gilt die Devise: Langsam und durchdacht ist kostengünstiger als “einfach mal machen” und später an die Zielgruppe anpassen.

Darüber hinaus kann das Erstellen eines Prototyps das finale Ergebnis sehr bereichern. Mit relativ geringem Arbeitseinsatz können Sie ein Ergebnis sehen und gegebenenfalls Änderungen vornehmen, die durch die Visualisierung der Idee überhaupt erst auffallen. Oft erkennt man z.B. dass einige Funktionen, die man sich vorher vorgestellt hat, nicht zielführend sind. Nutzen Sie daher Prototypen, um das grundlegende Konzept und die Usability zu testen.

Zusammenfassend: Wireframes, Mockups und Prototypen

Grundsätzlich plädieren wir für ein schnelles Agieren – denn Zeit ist Geld. Nichtsdestotrotz sollten Sie gemeinsam mit Ihrer Zielgruppe konzipieren, veranschaulichen, verwerfen und umgestalten – um es dann besser zu machen. Deshalb ist der iterative Prozess integraler Bestandteil der agilen Software-Entwicklung. Wie man beim Hausbau nicht mit dem Dach anfängt, sondern mit der Statik, ist in der App-Entwicklung ein gutes Konzept unabdinglich.

Mockups haben immer einen Wow-Effekt bei Usern, Stakeholdern und Vorgesetzten. Schließlich wird das Projekt hier zum ersten Mal konkret und das Ganze nimmt Gestalt an. Des Weiteren können Mockups dazu dienen Investoren anzulocken oder im Zuge des Stakeholder-Managements Vorgesetzte und Mitarbeiter abzuholen, die nicht von Anfang an in das Projekt involviert waren.

Mit Rapid Prototyping können Sie komplexe Funktionalitäten oder fragwürdige Schnittstellen vorweg testen. Bei umfangreichen oder innovativen Lösungen kommen Sie um Prototyping nicht herum. Hierbei werden die Wow-Effekte von Mockups nochmal verstärkt, weil wenig Abstraktionsfähigkeit von anderen Mitentscheidern Ihrer App-Idee notwendig ist.

Checkliste für Wireframes und Prototyping

  • Haben Sie Ihre Idee bereits auf Funktionalitäten heruntergebrochen und skizziert?
  • Haben Sie Ihre App-Idee bereits von Bildschirm zu Bildschirm durchdacht?
  • Welche User Experience haben Ihre Nutzer von Bildschirm 1 zu xy?
  • Gibt es weitere Investoren oder Stakeholder, die Sie für Ihre Idee begeistern wollen?
  • Wie groß schätzen Sie das Risiko ein, dass Ihre App-Idee nicht ausgereift ist?