Was ist eigentlich der genaue Unterschied zwischen einem Wireframe und einem Mockup? Bei der Entwicklung von Websites stößt man in der Konzeptionsphase wahrscheinlich auf beide Begriffe. Oft werden sie allerdings verwechselt oder sollen das selbe meinen: grobe Skizzen, Entwürfe oder Vorformen einer Website zur Konzeption, Veranschaulichung und Abstimmung mit dem Kunden. Dennoch gibt es grundlegende Unterschiede zwischen beiden Instrumenten:
Wireframe – function & layout
Zum Thema Wireframes habe ich bei der Vorstellung einiger webbasierter Tools schon ein bisschen was geschrieben. Es gibt keine vorgeschrieben Richtlinien, was ein Wireframe beinhalten muss oder nicht darf, über die meisten Punkte herrscht allerdings weitgehend Einigkeit.
Ein Wireframe fällt in das Aufgabenfeld eines User Experience Designers und beinhaltet im Gegensatz zu einem Mockup noch keine Farben, Typography, Bilder oder Grafiken. Es handelt sich um eine skizzenähnliche Beschreibung und Darstellung (Gittermodell) von Funktionen und Layout und setzt den Rahmen für die spätere Ausarbeitung des Designs. Wireframes dienen zudem auch zu einer ersten Überprüfung der Machbarkeit, des Navigationskonzepts und der Usability.
Der Detailgrad kann sich dabei von Projekt zu Projekt stark unterscheiden. Es sollte nur das Nötigste dargestellt werden, um die oben genannten Punkte zu erfüllen.
Variation: Ab und zu findet man Wireframes auch in Verbindung mit so genannten Mood Boards. Ein Mood Board soll mit Farben und Fotos den Stil und das “Gefühl” des fertigen Endprodukts vermitteln. In Kombination mit einem Wireframe kann man so in einigen Fällen das Erstellen von Mockups überspringen. Wer mehr über Mood Boards lesen will, dem empfehle ich den Artikel von Jakub Linowski über Wireframe Mood Boards.
Tools zum Erstellen von Wireframes: Diagramm-Software, z.B. OmniGraffle oder verschiedene Online Tools
MockUp – form, design & visual
Ein Mockup ist in der Webentwicklung im Prinzip der nächste Schritt nach dem Wireframing und baut auf dessen Struktur auf. Hier ist nun der Designer an der Reihe und darf mit Farben, Typography, Bildern und Grafikelementen arbeiten und so ein vorläufiges Design mit einzelnen visualisierten Elementen entwickeln. Der Detailgrad ist um einiges höher als in Wireframes und das Mockup sollte im besten Fall schon look and feel der fertigen Website vermitteln, stellt aber noch nicht das finale Design dar.
Ein MockUp bietet sich daher meist besser für Kundenpräsentationen an, da ein Wireframe über look and feel (meistens sehr wichtig für den Kunden) so gut wie nichts aussagt. Trotzdem sollte man sich in Acht nehmen und gut kommunizieren in welcher Entwicklungsphase sich der Entwurf befindet, da ein Mockup vom Kunden leicht als fast fertiges Produkt interpretiert werden könnte und dann oft Diskussionen über kleinste Details und Formulierungen beginnen.
Tools zum Erstellen von Mockups: gängige Grafikprogramme, wie z.B. Photoshop oder Fireworks
Häufig wird bei kleineren Projekten nur eines dieser Instrumente genutzt. Auch bei 37signals hat man sich dazu entschieden, die Erstellung eines Mockups in Photoshop einfach zu überspringen und gleich einen HTML/CSS-Prototypen zu bauen.
Die Erstellung eines Prototypen (auch Click-Dummy genannt) wäre der nächste Schritt im Entwicklungsprozess. Er ermöglicht bereits Interaktion und macht die Entwürfe so navigierbar. Viele Tools bieten mittlerweile auch die automatische Generierung eines Prototypen aus den Wireframes oder Mockups an.
Das beste Tool für Mockups ist übrigens http://www.balsamiq.com/
Danke Christian, das schaue ich mir momentan auch genauer an. Ich bin gerade dabei meinen Post über die Online-Tools zu aktualisieren und ein paar mehr Tools aufzunehmen :)
Wireframes online erstellen geht auch super mit http://www.hotgloo.com/
Und der Klick-Dummy gelingt recht flott mit dem chronisch unterschätzten Fireworks …
Danke Michael, werde Fireworks dafür mal testen :)
@ Martin, hotgloo hatte ich im Artikel über online wireframe tools (aktualisiere ich momentan) auch vorgestellt, ich fand das auch ganz gut.
Hallo Niclas,
ich bin über google auf Deinen Artikel gestoßen und habe ihn mit Interesse gelesen.
Wir diskutieren hier intern auch über die unterschiedlichen Definitionen von wireframe und mockup.
Allerdings wird es hier eher umgekehrt wahrgenommen. Dies wird aktuell auch im entsprechenden wikipedia-Artikel so beschrieben:
http://de.wikipedia.org/wiki/Mockup#Mock-up_in_der_Softwareentwicklung
“Ein Mock-up in der Softwareentwicklung bezeichnet einen rudimentären Wegwerfprototypen der Benutzerschnittstelle einer zu erstellenden Software. Mock-ups werden insbesondere in frühen Entwicklungsphasen eingesetzt, um Anforderungen an die Benutzeroberfläche in Zusammenarbeit mit Auftraggeber und Anwendern besser ermitteln zu können. Es handelt sich meist um ein reines Grundgerüst der Bedienelemente ohne weitere Funktionalität.”
Es scheint also so zu sein, dass beide Begriffe synonym gebraucht werden. Aber Deine Beschreibung klingt plausibel und macht auch Sinn.
Gruß
Wolfgang
Danke Wolfgang für deinen Kommentar. Sicherlich kann man über die genaue Bedeutung auch streiten, da es keine eindeutige Definitionen gibt. Außerdem muss man wohl auch das Tätigkeitsfeld berücksichtigen. In der Softwareentwicklung scheint es da noch mal anders zu sein als im Bereich Design.
Wie sind denn eure Ergebnisse und in welchem Bereich nutzt ihr die Begriffe?
@Niclas
Wir unterscheiden für die Verwendung der Begriffe nicht wirklich innerhalb Web-Design und Web-Entwicklung. mock-up und wireframe werden schlicht synonym verwendet. Das empfinde ich als ungünstig, da ich es sprachlich gerne präzise habe :-)
Aber es scheint wohl keine standardisierte Definition zu existieren.
Free tool to create clickable wireframes for mobile and web apps http://tiny.cc/Free-Prototyper
Hallo,
übersetzen würde ich mock-up mit Attrappe und wireframes mit Gitternetzmodell. Die Attrappe ist für mich eher ein Prototyp, das Modell eher genereller. Das Wort mock-up nutze ich eher für Klick-Dummys und Prototypen.
Danke Robert fuer deinen Kommentar. Es gibt wirklich gravierende Unterscheide bei der Nutzung der verschiedenen Begriffe. Das merke ich immer wieder in Gespraechen und auch hier in den Kommentaren ist das ja schon erkennbar.
Deine Sicht aehnelt ja schon stark der von mir beschriebenen. Nur den Click-Dummy ordne ich persoenlich noch anders ein, da fuer mich der Schritt vom Drahtgittermodell zum wirklich klickbaren Protoypen einfach zu gross ist. Daher sehe ich Mockups als weitere Zwischenstufe.
Ich persönlich finde Deine Definition beider Begriffe logisch und genauso sieht es auch Smashing Magazine, wie in diesem Artikel zu lesen:
http://www.smashingmagazine.com/2011/06/22/following-a-web-design-process/
Genau wie hier, scheint es auch im Web Uneinigkeit bei der Definition von Mock Up selbst zu geben. Mal wird ein Mock Up zur reinen detaillierten Darstellung einer Schnittstelle verwendet (GUI) und ein anderes Mal wird es zur Simulierung von Verhalten verwendet (Software-Prototyping + GUI). In beiden Fällen sind es oft nur Teilbereiche einer ganzen Anwendung.
Ob Software-Entwicklung oder Webdesign, die Ziele von Mock Ups sind gleich: geringere Fehlentwicklung im laufenden Prozess, frühzeitige Erkennung von Änderungswünschen, bessere Einschätzung von Aufwand und Kosten. Deshalb schlage ich vor Mock Up´s mit Prototypen und Click Dummies gleich zu stellen. Wobei Click Dummies meistens eine geringe grafische Detaillierung haben.
@Robert: Damit schliesse ich mich Dir an.
@Wolfgang: Wireframes & Mock Ups als Synonyme sehe ich nicht, da Wireframes nicht nur Schnittstellen sondern auch Content, Layout und Struktur skizzieren. Außerdem ist die Detaillierung bei Wireframes weit niedriger, als es bei Mock Ups vorgesehen ist.