MockUps
Blogeintrag
05
Ratgeber

MockUps, zahlreichen Möglichkeiten der Anwendung

Veröffentlicht: 13. Juli 2020

Lesen

Übersicht

Mockups sind ein nützliches Mittel im Webdesign, um aus Ideen ein individuelles und passendes Design zu entwickeln. Als Basis für Mockups dienen häufig händischen Skizzen oder Wireframes. Häufig entsprechen sie bereits dem «Look and Feel» des fertigen Webdesigns. Je nach Grad der Ausarbeitung werden somit bereits die endgültigen Farben, Typographien, Bilder und Grafikelemente verwendet. In kleinen Projekten wird häufig auf Mockups verzichtet. Hierbei werden Templates direkt in HTML/CSS erstellt oder fertige Templates auf Wunsch und nach Möglichkeit angepasst.

Der Zweck eines Mockups

Bei gut ausgearbeiteten Mockups ist es in der Regel nur noch ein kleiner Schritt zum pixelgenauen Webdesign, welches schließlich als Vorlage für die Programmierung dient. Umfangreiche, mehrteilige Mockups können auch als Basis für Prototypen verwendet werden. Diese verhalten sich dann fast identisch, wie die fertige Website oder Webapplikation. In professionellen Mockup-Tools sind solche Möglichkeiten bereits integriert und sogenannte Click-Dummies relativ kostengünstig realisierbar.

Vergleich: (1) Wireframe, (2) MockUp, (3) Prototyp

Die Begriffe Mockup, Wireframe und Prototyp werden in der Praxis oft gleichgesetzt, stellen jedoch drei verschiedene Arten von Entwurfsdarstellungen im Rahmen des Rapid Prototyping dar und werden in unterschiedlichen Phasen der Konzipierung vor der eigentlichen Programmierung verwendet.

(1) Ein Wireframe stellt dabei die einfachste Form der Vorlage dar und beinhaltet in Absetzung zum Mockup noch keine Farben, Typografien, Bilder oder Grafiken. Dieser erste, skizzenähnliche Entwurf kann von Hand oder am Computer erstellt sein. Funktionalität fehlt in dieser Darstellungsart gänzlich. Daher werden Wireframes zu den Low-Fidelity-Entwürfen gezählt. (2) Mockups können auf der Struktur eines eventuell vorhandenen Wireframes aufbauen und diesen weiterentwickeln. Durch die Integration von Farben, Typographien, Bildern und Grafiken kommen sie dem endgültigen Design sehr nahe bzw. bilden dieses bereits ab. Daher werden sie bevorzugt zu Präsentationszwecken eingesetzt. Ein klassisches Mockup beschreibt einen statischen Entwurf. Mittlerweile müssen Mockups diese Eigenschaften nicht mehr zwingend erfüllen, sondern können durchaus eine gewisse Dynamik aufweisen. Dadurch wird eine Abgrenzung zur nächsten Konzeptionsphase, dem Prototyping, zunehmend schwieriger. Moderne Mockup-Tools ermöglichen die Integration einfacher Funktionen wie etwa Verlinkungen, so dass sie je nach Komplexität zu den Middle- bis High-Fidelity-Entwürfen gerechnet werden können und die Grenzen zum Prototypen fließend sind.

Komplexe, mehrteilige Mockups können als Basis für (3) Prototypen, die je nach Ausarbeitung ebenso zu den Middle- bis High-Fidelity-Entwürfen zählen, herangezogen werden. In Absetzung zu den klassischen, statischen Mockups sind Prototypen immer interaktiv und beinhalten meist schon alle Funktionen der geplanten Website bzw. App.[4]

Elemente festlegen

Der wichtigste Grund dafür, überhaupt ein Mockup zu erstellen ist, in der Designgestaltung flexibel zu bleiben. Insofern ist es auch am wichtigsten, alle Elemente, die sich noch (stark) ändern könnten, als Platzhalter zu gestalten, während Dinge, die bereits feststehen oder sehr leicht änderbar sind, schon in die (voraussichtlich) finale Version eingearbeitet werden können. Die nachfolgenden Elemente werden oft im Ersten schritt mit vorgefertigten blankid Platzhaltern umgesetzt:


  • Fotos und Illustrationen
  • Diagramme
  • BackLog
  • Tabellen
  • längere Textblöcke
  • Call-to-Action-Schaltflächen
  • Formulare
  • Zeit- Linien

Elemente anordnen

Sind alle Elemente, die Sie voraussichtlich für die Mockup- Erstellung benötigen festgelegt, geht es um in die Erstellung eines ersten Entwurfes. Hierfür werden die Elemente solange hin-/ und hergeschoben oder skaliert, bis das prinzipielle Layout das wiedergibt, was der Designer sich vorgestellt hat. Dabei sollte man stets auf die Informationsdichte und den Lesefluss im Mockupdesign berücksichtigen. Ein Mockup soll Ihnen dabei helfen, Zeit zu sparen. Zusätzlich kann es Sie aber auch inspirieren. Aus diesem Grund können Sie in der Mockup-Phase ruhig mutig sein und mehrer Ideen und vollkommen unterschiedliche Varianten ausprobieren. Das Verschieben und Skalieren Ihrer Elemente kostet deutlich weniger Zeit als eine vergleichbare Umprogrammierung, kann Ihnen aber völlig neue Sichtweisen auf Probleme oder Möglichkeiten bieten, die Sie ohne diese visuelle Hilfe gar nicht erst gesehen hätten.

Funktionalität hinzufügen

Sofern das MockUp ausschließlich für eine Drucksache erstellt werden soll, dann werden im Mockup in der Regel keine erweiterten Funktionen benötigt. Sollte das Mockup allerdings vorbereitend für ein Projekt zur Erstellung eines Online-Auftritts oder einer Performanzen Softwarelösung dienen, so sollen am Ende der Mockup- Gestaltung noch zusätzliche Funktionen wie beispielsweise Tooltips (welche erscheinen, wenn man die Maus über bestimmte Flächen navigiert), Menüs, CTA- Schaltflächen, Verlinkungen oder Formulare ergänzt werden. Der Sinn hinter der abschließende Ergänzung rudimentärer Funktionalitäten liegt darin, dass in dem Mockup auch gleich zu sehen ist, ob beispielsweise Tooltips wichtige andere Elemente überlagern und deshalb anders angeordnet werden sollten, ob Menüs intuitiv gefunden und navigiert werden können, oder ob Formulare auf allen Bildschirmgrößen – vom Handy bis zum PC-Monitor – leserlich und sinnvoll dargestellt werden.

Welche Rolle spielt Responsive Webdesign?

Mit dem immer stärker in den Fokus tretenden Responsive Webdesign hat sich auch die Komplexität von Wireframes und Mock-ups grundsätzlich erhöht. War früher eine einzige Skizze absolut ausreichend, gehört heute die Anfertigung mehrerer Versionen für die unterschiedlichen Displaygrößen quasi zum Pflichtprogramm. Hinzu kommen funktionale Unterschiede wie Eingabemittel (Maus, Tastatur, Touchscreen) und verschiedene technische Voraussetzungen (Datenübertragung etc.), die ebenfalls bei der Konzept-Visualisierung berücksichtigt werden müssen.

Bitte scrollen Sie nach unten, bis 100% erreicht sind...

Zurück zum Blog Zurück zum Blog

100%