Was ist der Unterschied zwischen Wireframes und Mockups?

Bei einem Wireframe geht es um Funktionalität. Es kann eine wirklich einfache Skizze sein, die zeigt, was Sie in Ihrem Design tun können. Beispielsweise zeigt ein Wireframe einer Website die Navigation, die Hauptschaltflächen, die Spalten und die Platzierung verschiedener Elemente. Sie können es sich wie eine Blaupause für eine Website vorstellen.

Ein Mockup ist eine realistische Darstellung dessen, wie das Produkt aussehen wird, in diesem Fall: eine Website. Das Endergebnis kann genau wie das Mockup aussehen oder nach Versionsrevisionen eine Variation davon sein. Während einige Leute die Mockups lieber mit Grafiksoftware zeichnen, tun andere dies direkt in HTML/CSS.

Ich verwende Balsamiq für Wireframes und entweder Photoshop / Illustrator oder HTML + CSS (je nach Komplexität) für Mockups.

Ein Beispiel für ein Wireframe:

Drahtgitter sind rudimentäre Formen oder Linien, die nur zur Bezeichnung von Position und/oder Größe verwendet werden. Das Ziel jedes Wireframes ist es, die Elemente in ein Layout zu "einpassen", nicht anzugeben, wie Elemente tatsächlich in einem endgültigen Design erscheinen können, sondern nur, wo sie sich befinden werden.

Mockups werden auf Wireframes aufgebaut und gehen darüber hinaus, um Aspekte des Gesamterscheinungsbilds eines Designs zu zeigen, einschließlich Typauswahl, Farbauswahl usw. Das Ziel eines Mockups ist es, so genau wie möglich zu zeigen, wie alle endgültigen Erscheinungsbilder gerendert werden.

Ich unterstütze die detaillierte Antwort von @Yisela, auch um diese in der folgenden Präsentation vorgestellte Vision hinzuzufügen

Hier ist eine kurze Zusammenfassung eines Artikels von Marcin Treder :

Drahtmodell

Ein Wireframe ist eine Low-Fidelity-Darstellung eines Designs. Es sollte deutlich zeigen:

1. • Die Hauptinhaltsgruppen (was?)

2. • Die Informationsstruktur (wo?)

3. • Eine Beschreibung und grundlegende Visualisierung der Interaktion zwischen Benutzer und Benutzeroberfläche (wie?)

4. Betrachten Sie sie als das Rückgrat Ihres Designs und denken Sie daran, dass Wireframes eine Darstellung aller wichtigen Teile des Endprodukts enthalten sollten.

Attrappe, Lehrmodell, Simulation

1. Ein Mockup ist eine statische Designdarstellung mit mittlerer bis hoher Wiedergabetreue. Sehr oft ist ein Mockup ein visueller Designentwurf
2. Stellt die Struktur von Informationen dar, visualisiert den Inhalt und demonstriert statisch die Grundfunktionalitäten
3. Ermutigt die Leute, die visuelle Seite des Projekts tatsächlich zu überprüfen

Wireframes werden verwendet, um das Framework und die Informationshierarchie zu definieren, den Arbeitsablauf zu demonstrieren, Details zu den Bildschirminhalten und eine Beschreibung der Funktionsweise einer Komponente bereitzustellen (Anmerkung). Abhängig von der Komplexität der Anwendung oder Site sollten Wireframes auf einer anderen zu liefernden Anforderung aufbauen; Prozessmodelle. Wireframes können verwendet werden, um Anforderungen von einem Kunden zu erheben und schließlich Anforderungen mit einem Kunden zu bestätigen. Wireframes sind ein visuelles Modell der Struktur einer Website oder Anwendung. Sie definieren nicht die Schriftart, die verwendet wird, die Füllung, die Farbe, den Stil usw. Sie sind nicht maßstabsgetreu und haben keine Töne oder Farbverläufe. All dies muss mit dem Kunden kommuniziert werden, damit er den Prozess und den Kontext der Wireframe-Leistung in Verbindung mit anderen Anforderungsleistungen versteht.

Ein Mock-up wird normalerweise in Photoshop erstellt und basiert zwar auf der Struktur oder dem Rahmen des bestätigten Wireframe-Ergebnisses, ist aber ein eigenständiges Ergebnis mit einem eigenen Zeitplan und Genehmigungsprozess. Mock-ups oder Kompositionen definieren den visuellen Stil oder Ton der Benutzeroberfläche. Nach der Annahme werden Mock-ups in eine Reihe zusätzlicher Anforderungen oder Arbeitsergebnisse übersetzt, z. B. CSS-Code, Styleguides, grafische Elemente usw.

Wireframes dürfen niemals Mock-ups sein. Mock-ups könnten als Wireframes verwendet werden, aber dies hätte Auswirkungen auf eventuell erforderliche Überarbeitungen und einen erheblichen Einfluss auf Ihr Budget.

Quelle: 15 Jahre als Kommunikationsdesigner, UX Lead, Business Analyst in einem Unternehmensumfeld, das Websites und Anwendungen entwickelt. Und der geliebte BABOK

Ich habe noch nicht den Ruf, mich zu Dave Kayes Antwort zu äußern, also musste ich direkt antworten. Es lohnt sich sehr, seine Antwort im Vergleich zu Racurus brillanter Antwort zu erwähnen.

Bei einer Interpretation moderner Phrasen könnte/sollte die Erklärung des Laien sein;

1. Wireframes sind "das Design"
2. Mockups sind "gerenderte Demos"

Die eigentliche Terminologie stammt aus den 80er Jahren. Damals hatte man nicht die Rechenleistung, um Echtzeitbilder zu produzieren, aber man konnte „Drahtmodelle“ von Grafiken in Echtzeit auf dem Bildschirm herumschweben sehen. Eine richtige "Demo" musste über Nacht gerendert werden usw.

In diesen Zeiten stellt ein „Drahtmodell“ ein Skelett „Design“ dar, und mit einem guten iterativen Designprozess sollten die Leute Mockups aus dem Drahtmodell erstellen, Feedback erhalten und dieses zurückgeben, um das Drahtmodelldesign zu verbessern.

Leider steht den Kunden heutzutage eine Menge Software zur Verfügung, mit der sie Mockups entwerfen können, die nichts verwenden, was direkt von Programmierern verwendet werden kann. Häufig bauen andere auf ihren Entwürfen auf, sodass das Mockup privat erweitert wird, anstatt zu den Programmierern zurückgebracht zu werden, um sie in große Entwürfe einzubeziehen.

Ich denke, das war effektiv das, was Dave etwas höflicher erwähnte :-)

Keith

Um es einfach auszudrücken:

Wireframes : Skelett/Struktur

Mockups : Haut/visueller Aspekt

Wie einige Leute bemerkt haben, gewinnen Wireframes heutzutage immer mehr an Bedeutung, während Mockups zu Prototypen verschmelzen.

Ich muss einen Punkt hinzufügen, den die Leute nicht gemacht haben ... diese Antworten geben alle anständige technische Beschreibungen, aber in einer Arbeitsumgebung sind die Unterschiede nicht immer so klar. Einige Unternehmen fügen einem Mockup möglicherweise Funktionen hinzu, und andere stellen möglicherweise Designanforderungen auf hoher Ebene in ein Wireframe. Ich würde vorsichtig sein, mich nicht zu sehr auf eine Antwort darauf einzulassen, was die Dinge sein sollten, da das allererste Unternehmen, zu dem Sie gehen, etwas tun könnte, das keines von beiden ist!

Nach meinem Wissen sind Mockup-Bildschirme die endgültige Darstellung der Benutzeroberfläche, Look and Feel. Was wird der normale Fluss sein und was wird der alternative Fluss sein? Ich denke, das kann eine Art Web-Prototyp sein, der hauptsächlich in HTML und CSS erstellt wurde. Wir machen dann meistens während der HLD-Phase, um zu zeigen und vom Kunden akzeptiert zu werden.

Wireframes als Vergleich konzentrieren sich eher auf Flussdiagramme, bei denen eine allgemeine Beschreibung vorhanden ist. Wenn nicht, sind einige Detailbeschreibungen wie das, was beim Klicken auf ein Ereignis passiert, ein Ereignis ändern und ähnliches dargestellt. Sie werden meistens von SA/BA erstellt und Modelle werden von Designern/Entwicklern erstellt. Darüber hinaus hängen einige Leute technische Spezifikationen mit Wireframes wie DB an, die an dieser bestimmten Benutzeroberfläche beteiligt sind.

Aber auch hier hängt es von Projekt zu Projekt ab. In unserem Fall sind Wireframes die Quelle der Wahrheit.

Darin verstehe ich einen Unterschied

Ein Wireframe kann ein Mockup sein. Ein Mockup kann als Wireframe betrachtet werden. Während sie manchmal getrennte Dinge sind (wie andere gesagt haben), sind sie genauso oft keine getrennten Dinge.

Früher dachte man vielleicht an Wireframes, die Visio erstellen würde. Und Mockups wären das, was PhotoShop erstellen würde.

Aber heute, mit der Bandbreite an Werkzeugen, die wir haben, handelt es sich oft um dasselbe eigentliche Dokument. Am Anfang mögen sie als Wireframes (reines Layout und Funktion) beginnen, werden aber im Laufe der Zeit immer detaillierter, bis sie als Mockup betrachtet werden können. Und wenn man ein interaktives Tool wie Axure verwendet, könnte man es ab einem bestimmten Punkt als Prototyp betrachten.

Es ist also ein Spektrum mit vielen Überschneidungen.

Drahtgitter

Wenn Sie beabsichtigen, eine mobile Anwendung oder eine Webanwendung zu entwerfen, benötigen Sie zunächst eine Skizze, wie jede Seite aussehen wird. Nur basierend auf Geschäftskonzepten kann ein Designer den Anwendungsfluss und einen ersten Entwurf des Designs definieren, der eine Skizze enthält, wie es aussehen wird, welche Schaltflächen vorhanden sein werden, welche Felder vorhanden sein werden usw. Das ist Wireframe gedacht für.

Modelle

Mockups sind lebendigere Bilder. Sie sind optisch ansprechender, haben Farben, Schriftarten, Themen, Schaltflächen, Logo usw. In diesem Stadium werden Beschriftungen der Felder, Notizen, Schriftarten, Navigationsmenüs usw. im Design festgelegt. Es ist eine genaue Darstellung, wie die mobile App aussehen wird oder wie Webseiten aussehen werden.

Einen detaillierten Vergleich zwischen Wireframes und Mockups finden Sie in diesem informativen Artikel: Der Unterschied zwischen Wireframes, Mockups und Prototypen