Über Wireframes, Mockups und Moods

Was bitteschön sind denn Wireframes, Mockups und Moods? Schon oft von Agenturen und Consultants gehört und in Emails gelesen, aber die Bedeutung  ist nicht eindeutig? Diese Bezeichnungen werden innerhalb der Entwicklung von Websites gebraucht und sorgen bei den Beteiligten oft für Verwirrung oder werden teilweise fälschlicherweise synonym verwendet.

Sie bezeichnen generell verschiedene Darstellungsarten von Konzepten einer Seite in einer frühen Phase der Entwicklung. Zudem werden sie in unterschiedlichen Stadien der Konzeption verwendet (Ideation, Creation, Detailed Design).

Sie stellen also Hilfsmittel zur Visualisierung vor der eigentlichen Programmierung eine Website dar.

Mood

Ein Mood ist eine „Collage“, die dem eigentlichen Design-Prozess vorausgeht. Moods werden eingesetzt wenn es darum geht, erste Vorschläge eines Konzeptes zu visualisieren und die Stilrichtung zu konkretisieren, bevor das Konzept in ein detailliertes Mockup überführt wird. Im Gegensatz zu einem Wireframe geht es bei der Erstellung von Moods um Stilelemente wie Farben, Design, Typografie und Grafiken. In einem Mood werden abstrakte Begriffe, Stimmungen, Eindrücke und Ideen in etwas Greifbares umgewandelt und visualisiert, die für ein bestimmtes Produktkonzept in Frage kommen. Dadurch wird eine gemeinsame Basis zwischen den Beteiligten der Produktentwicklung zur weiteren Abstimmung geschaffen. Meist werden mehrere Moods zu einem Konzept erstellt, um die Vorlieben verschiedener Zielgruppen bzw. Personas darzustellen und auf Verwendbarkeit zu analysieren.

Wireframe

Ein Wireframe beinhaltet im Gegensatz zu einem Mockup noch keine Farben, Typografie, Bilder oder Grafiken. Es handelt sich um eine skizzenähnliche Beschreibung und Darstellung von Funktionen und Layout und setzt dadurch den Rahmen für die spätere Ausarbeitung des Designs. Wireframes dienen zudem auch zu einer ersten Überprüfung der Machbarkeit, des Navigationskonzepts, der Informationsarchitektur und der Usability.

Mockup

Ein Mockup ist im Gegensatz zu einem Mood oder Wireframe weiter in der Entwicklung und zeigt die Formen, das Design und das Aussehen einer Seite im Detail. Ein Mockup ist der Folgeschritt der Wireframes und Moods. Sie werden somit auf Basis der Wireframes und Moods mit dem abgestimmten Design, der Informationsarchitektur und Wording gestaltet. Es ist zudem ein reines Grundgerüst der Bedienelemente ohne weitere Funktionalität. Ein Mockup bietet sich außerdem meist besser für eine Präsentation an, da ein Wireframe über das Look and Feel nichts aussagt, dahingehend sogar neutral gehalten wird. Mockups eignen sich zudem auch für Usability-Tests im Labor mit Probanden.

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: