Wireframe

Definition Wireframe

Wireframe bedeutet übersetzt „Drahtgerüst“ und bezeichnet die Visualisierung eines Website-Konzeptes. Es zeigt den grundlegenden Aufbau, die Navigation und Benutzerführung. Ein Wireframe zeigt also nur das Layout und die Art der Elemente, die den Nutzer über die Website lenken. Wireframes können einfach per Hand angefertigt werden, oder es kann ein spezielles Tool verwendet werden.

Allgemeines

Wireframes sind abstrahiert, das heißt, es gibt keine detaillierten grafischen Elemente, Farben oder Schriftarten. Der endgültige Content wird hier außen vor gelassen. Es geht allein um die Struktur und das Layout der Website.
Wireframes können in dem nächsten Schritt zu MockUps weiterentwickelt werden. MockUps enthalten im Vergleich zu Wireframes schon Bilder, Farben und Schriftarten.

Ziele

Das Hauptziel eines Wireframes ist es, als Designer einen Überblick über die Struktur der Website zu erhalten. Dies hilft später bei der Ausarbeitung des Designs. Ein Wireframe ist die Vorstufe des MockUps und der technischen Umsetzung (Prototyp).

Funktionsweise

Das sogenannte Wireframing besteht aus folgenden Bereichen:

  • Layout: Grundlegende Struktur, Informationshierarchie
  • Elemente: Header, Body, Footer und Formulare, Listen und interne Links
  • Content-Arten: Die verschiedenen Arten von Content werden auf bestimmte Art und Weise dargestellt. Texte bspw als Lorem ipsum, Bilder und Grafiken als Boxen mit einem Kreuz darin. Dies ist wichtig, um die Proportionen der Elemente darzustellen.
  • Benutzerführung: Die Elemente werden miteinander verknüpft, um aufzuzeigen, wie der Nutzer sich auf der Website bewegen soll/wird.

Bedeutung

Ein Wireframe ist die Diskussionsgrundlage und Basis für den Entwicklungsprozess einer Website. Es kann die Vorstellungen des Kunden abbilden und gleichzeitig das Fachwissen der Designer und Entwickler beinhalten.

Für die Usability ist ein Wireframe von großer Bedeutung, da hier die gewünschte Nutzerführung und damit auch die Usability der Website festgelegt wird. Durch die Struktur der Website kann bestimmt werden, welche Informationen vom Nutzer als erstes wahrgenommen werden.

Quellen

https://de.ryte.com/wiki/Wireframing
https://netzstrategen.com/blog/webwissen-wireframes