Mit Wireframing lassen sich schematische Entwürfe für Webseiten erstellen. Wichtig ist das, weil Webdesigner beim Entwurf sich stets fragen müssen, was wo und wie dargestellt wird. Es geht nicht allein um die Art der vermittelten Information, sondern auch darum, wie die Struktur darzustellen ist, damit der User komfortabel navigieren kann. Da Wireframe beschreibt modellhaft die Struktur von Webseiten, Apps und Softwareanwendungen.
Was leistet das Wireframe?
Als schematischer Entwurf definiert es, welche Elemente wo zu platzieren sind und wie zwischen den Elementen die Navigation verläuft. Der Prozess der Erstellung eines Wireframes ist das Wireframing. Es ist ein Design der Verknüpfung von Information, Interface und Navigation. Übersetzt bedeutet der Begriff Wireframe „Drahtgerüst“, visuell stellt es sich durchaus so dar. In dieses Gerüst baut der Webdesigner und/oder Programmierer die Informationsarchitektur ein. Ein Wireframe deckt drei designerische Bereiche ab:
- Information Design
- Interface Design
- Navigation Design
Es gibt für die Anwendung alternative Begriffe Screen Blueprint, Page Schematics, Seitenschema oder Bildschirmplan.
Konzeption beim Wireframing
Der Webdesigner muss seinen Entwurf zunächst abstrahieren, um damit zu einer Struktur der Darstellung zu gelangen. Für die optimale Benutzerführung wird er evaluieren, welche konkreten Inhalte die Webseite enthalten soll, ohne dass er die Texte, Bilder, Videos und Grafiken im Detail kennen muss. Es genügt, wenn er ihre Bedeutung und in etwa die erforderlichen Größen einzelner Elemente kennt. Dann kann er mithilfe von Wireframing online die Elemente wie den Header, ein Logo, Überschriften, Such- und Textfelder, Formulare, Bilder, Videos und Grafiken einfügen. Für die Navigation verwendet er Menüs im Header und Footer oder per Bread-Crumb. Auch installiert er Befehle mit linker und rechter Maustaste sowie per Tastatureingabe und Short-Codes. Zur Berücksichtigung der gefragten Corporate Identity gibt es unterschiedliche Meinungen. Vielfach herrscht die Auffassung vor, dass Formate, Schriftarten und Farben nicht in ein Wireframe, sondern in ein Mockup gehören. Andere Autoren verweisen darauf, dass es aufwendiger sei, diese nachträglich hinzuzufügen, anstatt sie gleich im Wireframe zu verwenden.
Arten von Wireframes
Wireframes gibt es in den beiden Varianten
- Low Fidelity Wireframes
- High Fidelity Wireframes
Low Fidelity Wireframes sind einfachste Entwürfe, die sich auch mit dem Stift auf Papier zeichnen lassen. Natürlich ist das ebenfalls mit einer Software möglich. Zentral ist dabei der Fokus auf das Wesentliche, was meistens die Auswahl und Anordnung der wichtigsten Elemente betrifft. Für eine einfache Homepage kann dieser kostengünstige, auf schlichter Abstraktion basierende Ansatz sogar genügen. Low Fidelity Wireframes verwenden praktisch immer den Blindtext Lorem ipsum als Platzhalter, allerdings gibt es diesen auch in High Fidelity Wireframes. Diese sind allerdings eine deutlich ausgereiftere, technisch und optisch detailliertere Variante. Wichtig sind in ihnen Informationen zur konkreten Dimension eines Elements, zu dessen Verhalten und zu möglichen Aktionen von interaktiven Elementen. Diese Darstellung ist zeitlich und damit für den Auftraggeber finanziell aufwendiger. Der große Vorteil besteht darin, dass sich mit einem High Fidelity Wireframes schon direkt die User Experience testen lässt, während das Low Fidelity Wireframe ohne konkreten Inhalt noch relativ nichtssagend wirkt.
Besuchen Sie für weitere erstaunliche Updates weiterhin Nachrichten Morgen.
