Über die Unterschiede und warum sowohl Wireframes als auch Mockups wichtig sind
Schon mal vor lauter Enthusiasmus angefangen zu programmieren und später festgestellt, dass die nachträgliche Anordnung von Buttons, Text und Bildelementen ziemlich viel Zeit frisst?
Dann solltest Du dringend über die Erstellung von Wireframes und Mockups nachdenken.
Wireframe – das Drahtgerüst
Ein Wireframe ist der konzeptionelle Entwurf Deiner Anwendung. Das „Drahtmodell“ stellt das Grundgerüst dar und enthält in einer reduzierten Darstellungsweise die erforderlichen Elemente – keine Farben, kein Design, nur die Anordnung von Elementen und die Benutzerführung spielen hier eine Rolle.
Wireframes können mit Tools wie draw.io, wireframe.cc oder Balsamiq erstellt werden.
Im Design-Prozess der Anwendung steht das Wireframe an erster Stelle. Ein Wireframe (eine einzelne konzipierte Seite) steht für sich allein und ist statisch. Verbindet man zwei Wireframes, ergibt es das sogenannte Clickdummy.
Sind alle Wireframes erstellt und zu einem Clickdummy verbunden, kann man über das optische Design der App oder der Anwendung nachdenken und das sogenannte Mockup erstellen.
Mockups – ein visueller Design-Entwurf
Mockups bauen auf der Struktur des zuvor entwickelten Wireframes auf und werden üblicherweise in einem Bildbearbeitungsprogramm oder einem vektorbasierten Tool entworfen und prototypisiert. Ein Mockup ist ein visueller Design-Entwurf, der die Struktur von Informationen darstellt und den Inhalt visualisiert. Dabei wird an dieser Stelle ein Augenmerk auf Farben, Schriftarten und Bildtonalität gesetzt.
Mockups können mit Tools wie Figma, Sketch oder Adobe XD erstellt werden.
Warum Wireframes und Mockups wichtig sind
Zugegeben, etwas ähnlich klingt das ganze schon – warum auch ein Wireframe erstellen, wenn man gleich mit dem Mockup anfangen kann? Weil beide Schritte ihre ganz individuelle einzigartige Bedeutung im Design-Prozess besitzen!
Wireframes können eine starke visuelle Unterstützung in der Beschreibung der Funktionen sein – und das ganz ohne App-/Web-Designer. Sie können bei der Organisation der Ideen und bei der Kommunikation zwischen Dir und Deinen Kollegen oder zwischen Dir und Deinen Kunden helfen.
Was Wireframes allerdings nicht können, ist das „Look-and-Feel“ zu vermitteln, das Zusammenspiel zwischen Schriften und Farben zu verdeutlichen und aufzeigen, wie eine bestimmte Bildtonalität für Harmonie und Sympathie in und für die Anwendung sorgt. Und hier kommt das Mockup ins Spiel.
Mockups geben eine sehr realistische Visualisierung der Anwendung – auf diese Art ist es möglich, beispielsweise Fehler in der Darstellung frühzeitig zu erkennen und nicht erst im Nachgang gezwungen zu sein, den Code umschreiben zu müssen.
Auch Mockups können zu Clickdummys zusammengeführt werden. Ein Mockup-Clickdummy kann hervorragend präsentiert werden und hinterlässt eine konkrete Vorstellung über Funktionen und Aussehen der zukünftigen Anwendung.
Außerdem können Mockups der Qualitätskontrolle dienen, indem sie für Usability-Tests eingesetzt werden. Ist die Interaktion erst einmal sichtbar gemacht, kann ein potentieller User nach Feedback befragt werden, der Kunde kann sich vorab ein Bild machen und Kollegen können zurate gezogen werden. Der Mehrwert eines völlig design-fertigen „Vorab-Prototypen“ ist erstaunlich.
Wer noch einen Schritt weiter gehen möchte, kann sich nun an die Entwicklung eines Prototyps machen.
So können Kommunikationswege verkürzt, Entscheidungsprozesse beschleunigt und wertvolle Coding-Zeit gespart werden.
