Was ist der Unterschied? • BUOM

21. Oktober 2021

UX-Designer, Projektmanager und andere Design- oder Softwareentwicklungsteams erstellen Produkte häufig mithilfe visueller Anleitungen wie Wireframes und Mockups während der Produktion. Diese visuellen Leitfäden helfen Designern, grundlegende Konzepte zu entwickeln, mit Interessenvertretern zusammenzuarbeiten und andere Produktfunktionen zu besprechen. Wenn Sie sich für UX, Webdesign, Softwareentwicklung oder Projektmanagement interessieren, kann es hilfreich sein, sich über die Gemeinsamkeiten und Unterschiede zwischen diesen visuellen Leitfäden zu informieren. In diesem Artikel besprechen wir, was ein Wireframe ist, was ein Mockup ist und vergleichen ein Wireframe mit einem Mockup.

Was ist ein Rahmen?

Ein Wireframe ist ein Entwurf einer Anwendung oder Website, der Designern und potenziellen Benutzern hilft, die grundlegendsten Komponenten des Designs zu erkennen. Diese minderwertige Illustration kann die Gesamtstruktur oder das Layout, wichtige Inhalte und die Hauptbenutzeroberfläche oder Benutzeroberfläche umfassen. Mithilfe von Wireframes können Designer häufig erste Ideen skizzieren, bevor sie sich auf ein bestimmtes Design festlegen. Sie können diese Zeichnungen digital erstellen und sie sollen das grundlegende Konzept einer Anwendung oder Website vermitteln.

Was ist ein Layout?

Ein Mockup ist eine visuelle Darstellung, wie ein Produkt nach der Produktion aussieht. Dies ist normalerweise eine Anzeige mittlerer bis hoher Qualität. Mockups sollen einen schnellen Überblick über das Endprodukt vermitteln. Sie helfen Designern häufig bei der Auswahl von Farbschemata, Typografie, visuellem Design oder dem Gesamtstil des fertigen Produkts. Designer können den Kunden auch Modelle zur endgültigen Genehmigung oder Bearbeitungsanfragen für ihre Produkte senden. Dies ist eine detailliertere Version des Wireframes, die zeigt, wie das Endprodukt aussehen könnte.

Rahmen vs. Layout

Hier ist eine Liste der Aspekte, in denen sich Wireframes und Mockups unterscheiden:

Ziel

Der Zweck eines Wireframes besteht darin, die Idee eines Designers schnell in einer Illustration zu vermitteln, die der Designer mit einem Team oder Manager teilen kann. Dadurch kann der Designer Feedback oder Vorschläge zum Aussehen des Produkts erhalten. Ein Framework ist oft ein Werkzeug für die Zusammenarbeit und die Erzielung eines Konsenses über das Layout und die Struktur eines Projekts. Mockups bieten detailliertere Designkonzepte und beabsichtigte Funktionalität. Designer präsentieren ihren Teams, Managern oder Stakeholdern oft Modelle, um Kritik zum Gesamtlayout, der Funktionalität und möglichen Änderungen oder Verbesserungen des Produkts zu erhalten.

Produktionsphase

Designer erstellen Rahmen als ersten oder zweiten Schritt im Herstellungsprozess. Manchmal erstellen Designer eine sehr einfache Skizze, bevor sie sie in einem Drahtmodell mit Markierungen und sauberen Linien organisieren. Sie erstellen Modelle oft in der Mitte oder gegen Ende des Produktionsprozesses, um ein besseres Verständnis der Produktfunktionen, der Gesamtstruktur, des Inhalts oder der beabsichtigten Benutzer zu erlangen.

Erstellungswerkzeuge

Designer können Papier und Bleistift oder digitale Werkzeuge verwenden, um Wireframes zu erstellen. Diese Zeichnungen sind in der Regel äußerst einfach zu erstellen, da sie keine komplexen Details erfordern, sodass Benutzer herkömmliche Materialien zum Zeichnen des Grundlayouts verwenden können. Für Mockups sind in der Regel digitale Werkzeuge wie Software erforderlich, da sie viel komplexer sind und häufig technische Fähigkeiten für die Erstellung erfordern. Mockups erfordern häufig auch die allgemeine Erfahrung von Personen mit zumindest einigen Programmier- oder Grafikdesignkenntnissen.

Aussehen

Wireframes sind typischerweise Schwarz-Weiß-Bilder eines Produkts. Sie können einfache Felder mit Platzhaltertext oder leere Formulare enthalten, in die der Designer später im Erstellungsprozess Bilder, Schaltflächen oder Logos hinzufügt. Modelle umfassen häufig Farben, Textfelder mit realistischem Beispieltext sowie tatsächliche Bilder und Logos. Dazu können auch individuell gestaltete Schaltflächen gehören.

Beispielsweise könnte das Layout eines Profils eines sozialen Netzwerks in einer neuen App ein Standardfoto einer Person, fiktive Details wie Benutzername und Stadt sowie Beispielbeiträge oder Fotos mit Bildunterschriften enthalten. Es kann auch Beispiellinks zu anderen Social-Media-Apps enthalten. Das Wireframe für dieselbe Profilseite enthält möglicherweise nur Felder mit Beschriftungen, die die Art des Inhalts angeben, der in jedes Feld einfließt.

Zeitinvestition

Normalerweise verbringen Designer nicht viel Zeit damit, ein Wireframe zu erstellen, da es nicht darauf ausgelegt ist, eine komplexe Interpretation eines Produkts zu beinhalten. Die Fertigstellung minderwertiger Wireframes kann zwischen fünf Minuten und einer Stunde dauern, abhängig von der Größe des Projekts und der Anzahl der Wireframes, die der Designer erstellen muss. Die Erstellung von Modellen dauert oft länger, da es sich um qualitativ hochwertigere Bilder des Produkts handelt. Die Erstellung eines Layouts kann für einen Designer mehrere Stunden oder einen ganzen Tag dauern, da er häufig nach echten Bildern sucht, fiktive Informationen erstellt und echte Formulare, Schaltflächen und Textfelder entwirft.

Schöpfer

Aufgrund seiner Einfachheit kann fast jeder ein Wireframe erstellen, aber Projektmanager oder User Experience (UX)-Designer entwickeln diese Blaupausen normalerweise. Projektmanager können Wireframes erstellen, um ihrem Team eine erste Idee zu präsentieren oder ihrem Team einen groben Überblick über die Wünsche des Kunden zu geben. UX-Designer können ein Wireframe erstellen, um ihre ersten Ideen zu veranschaulichen oder Unterstützung für das Design eines anderen Teammitglieds anzubieten. UX-Designer neigen auch dazu, Wireframes zu erstellen, da sie in der Regel über die technischen und gestalterischen Fähigkeiten verfügen, die erforderlich sind, um dem Auftrag ein professionelles Erscheinungsbild zu verleihen.

Gemeinsame Anstrengungen

Selbst wenn das Projekt groß ist, erfordern Wireframes kaum oder gar keine Zusammenarbeit, da es sich um einfache Designs und das grundlegendste Produktkonzept handelt. Modelle können eine gewisse Zusammenarbeit zwischen Teammitgliedern erfordern, da sie in der Regel komplexer sind als ein Wireframe. Für Mockups sind häufig Fähigkeiten oder Kenntnisse in den Bereichen Codierung, Design oder Softwareentwicklung erforderlich. Durch die Zusammenarbeit kann auch der Erstellungsprozess beschleunigt werden, sodass das Team nach der Erstellung des Layouts mit den nächsten Schritten fortfahren kann.

Kosten

Rahmen sind in der Regel kostengünstig, da Designer sie aus beliebigen Materialien herstellen können. Sie können sogar frei erstellt werden, wenn das Unternehmen bereits über die Materialien für ihre Herstellung verfügt. Selbst wenn ein Unternehmen nicht über genügend herkömmliche Materialien verfügt, kann es Büromaterialien zur Herstellung von Rahmen verwenden. Büromaterial ist in der Regel günstiger als die Programme, mit denen Designer Layouts erstellen. Das bedeutet, dass die Erstellung von Mockups oft teurer ist als die Erstellung von Wireframes. UX-Mockup-Software kann zwischen 99 und 400 US-Dollar kosten, wobei einige Unternehmen monatliche Abonnements für 19 bis 150 US-Dollar anbieten.