Wireframe, Mockup und Prototyp

Wireframes und Mock-ups aller Seiten

Nach der Einigung ĂĽber das vorläufige Webseiten-Layout nehmen die Entwickler die nächste Stufe in Angriff – die Entwicklung von Wireframes und Mock-ups. Zuerst wollen wir erklären, was unter diesen Begriffen verstanden wird:

Wireframe ist die schematische Karte der internen Seiten aller Typen ohne jegliche Spezifikationen, die nur die Lage der Elemente und Links unter ihnen angibt. Dieses Vormuster ist mit dem Kunden vereinbart, so dass sowohl dieser als auch der Entwickler eine klare Struktur der zukĂĽnftigen Webseite vor Augen haben, die ihre Ziele rundum erfĂĽllt.

Unter Mock-up versteht man die Präsentation des Designs der Unterseiten der Webseite. Bei Betrachtung dieser statischen Sitemap sollte der Klient ein klares Verständnis davon bekommen, wie das Webseiten-Design aussieht und wie die einzelnen Elemente auf den Unterseiten funktionieren. 

Richtig gemacht visualisiert das Mock-up zukünftige Inhalte, präsentiert die Webseitenstruktur, zeigt die wichtigsten Funktionalitäten und ermöglicht eine vollständige Überprüfung des visuellen Projektteils.
So werden durch die Erstellung von Wireframes und darauffolgend Mock-ups sowohl Kunden als auch Entwickler klare Antworten auf folgende Fragen finden:

  1. Welche Materialien werden auf der Webseite platziert und was sind die Haupttypen des Inhalts?
  2. Wo befinden sich die einzelnen Elemente und wie wird die Informationsstruktur aussehen?
  3. Wie wird der Benutzer mit dem Web-Interface interagieren?

Mockup Webseite

Kombinieren der Materialien und Erstellen des funktionsfähigen Prototypen

Sind Wireframes und Mock-ups einvernehmlich vereinbart, kommen wir zu dem entscheidenden Teil der Arbeit, der eine zuverlässige Säule für die zukünftige Webseite darstellt. Die Rede ist von der Erstellung des Prototypen, also einer Arbeitsversion der zukünftigen Webseite, die bereits alle Arten von internen Seiten enthält.
Der Webseiten-Prototyp enthält bereits einige Designentscheidungen, beinhaltet aber keine Animationen, komplexe 2D- und 3D-Illustrationen oder Promo-Videos. Wenn der Prototyp der zukünftigen Webseite korrekt erstellt wird, ermöglicht er es dem Entwicklerteam, Zeit zu sparen und eine Reihe wichtiger Aufgaben betreffend das Layouts verschiedener Elemente, deren Aussehen, Standort und Verknüpfung zu lösen. Gleichzeitig erhalten Designer und Programmierer die Möglichkeit, in der Frühphase der Entwicklung verschiedene Ansätze auszuprobieren, um die beste Lösung zu finden.

Als Ergebnis wird dem Kunden ein dynamischer Webseiten-Prototyp präsentiert, anhand dessen der Nutzer nachvollziehen kann, wie er mit dem Interface interagieren kann und auch was die Grundelemente des Designs ausmacht.

Einmal mit dem Kunden vereinbart, ist der Prototyp ein Leitfaden für das Team von Designern, Content-Managern und Programmierern. Nach der endgültigen Abnahme des Prototypen durch den Kunden können Korrekturen an seiner Struktur nur unter bestimmten vorab vereinbarten Bedingungen vorgenommen werden.

Webseite Wireframe


War diese Seite hilfreich? Teilen Sie uns Ihrer Meinung mit:

Bewertung: 5 von 5. Abstimmungsergebnisse: 133
Letzte Aktualisierung: 24.07.2017
Worte: 400
Geschätzte Lesezeit: 2 Minuten