Erfolgreiche Website Tipp 5 – Warum Wireframing wichtig ist und welche Vorteile es dir bietet

Wireframing ist auch heute noch ein wichtiger Schritt in jedem Screen-Design-Prozess. Es bietet eine schnelle und kostengünstige Möglichkeit, die Struktur einer Website zu planen. Die vorteilhaften Möglichkeiten von Wireframing darf nicht unterschätzt werden.

Was ist Wireframing

Wireframing ist ein Hilfsinstrument für die Visualisierung eines Website-Konzepts bei der Erstellung und Gestaltung einer neuen Website, ähnlich einer Blaupause. Ob auf Papier, einem Whiteboard oder in einem Tool. Wo es umgesetzt wird, spielt dabei absolut keine Rolle. Es zeigt Teile der Informationsarchitektur, der Benutzerführung und Benutzerwege ebenso der Website-Navigation.

Wusstest du schon?
Informationsarchitektur befasst sich mit der Organisation und Strukturierung von Inhalten einer Website und ist für jeden Designer wichtig.

Wireframing ist im UI-Design unerlässlich und somit ein wichtiger Teil des Interaktionsdesignprozesses. Es hat den Vorteil, das es viel einfacher anzupassen ist, als ein Konzeptentwurf. Änderungen können folglich schneller und kostengünstiger vorgenommen werden. Das ganze könnte auch als Grundriss einer Website bezeichnet werden. Jedoch ohne visuelle Design- und Branding-Elemente.

Designer scheinen über Wireframing gemischte Ansichten zu haben. Während die einen nicht ohne arbeiten, wird es hingegen von anderen als pure Zeitverschwendung bezeichnet. Meiner Meinung nach ist es ein sehr nützliches Instrument. Mir persönlich hat es bei so manchen Projekten viel Zeit und erspart.

Warum Wireframing und was ist das Ziel

Ein Wireframing hilft dem Designer durch das strukturelle Modell der Website bei der Gestaltung. Es erfolgt vor dem grafischen Design und der technischen Umsetzung. Das ganze hilft bei der Planung und der Interaktion von Schnittstellen, ohne dabei von Farben, Schriftbild oder von Texten abgelenkt zu werden. Es hilft dir Usability-Probleme zu erkennen und vereinfacht das spätere designen. Voraussetzung ist, dass das Ziel der Website und die Benutzerführung bekannt ist.

Wusstest du schon?
Benutzerführung bedeutet den Website-Besucher schnellst möglich zu einem bestimmten Inhalt zu navigieren.

Verwende aber keine Farben. Farben können ablenken. Ist es dem Benutzer anhand eines Wireframing in schwarz-weiß und mittels Feinabstimmung von Graustufen nicht möglich sich zurechtzufinden, wie er agiert und navigieren muss, spielt es folglich keine Rolle, welche Farben oder grafische Elemente auf einer Website vorkommen.

Wer nutzt Wireframing und was beinhaltet es

Vorwiegend wird es von Interaktionsdesigner, UX-Designer, Grafikdesigner und Entwickler verwendet. Kurz gesagt, ist es in Verwendung profitieren alle davon, die etwas mit der Website Umsetzung zu tun haben. Da es responsive visualisiert wird ist es unabhängig von der Größe des Projekts anwendbar.

Beim Wireframing solltest du auf unnötige Details verzichten und den Blick auf das Wesentliche möglich machen. Bilder sind mit Platzhalter und Kommentaren gefüllt und ihr Ziel beschrieben. Anmerkungen helfen die Ideen schneller zu erfassen und zu verstehen. Ein Raster vereinfacht das Anbringen einzelner Elemente und hilft zusätzlich bei der gezielten Wahrnehmung der Website-Benutzer.

Ein Wireframing könnte folgende Elemente enthalten:

  • Logo
  • Navigation
  • Suchfeld
  • BreadCrumb
  • Navigation
  • Inhalte in Form von Dummy Texten
  • Social Media Icons
  • Kontakt Informationen
  • Footer mit internen/externen Links und anderen Elementen
Warum Wireframing wichtig ist und welche Vorteile es dir bietet
Warum Wireframing wichtig ist und welche Vorteile es dir bietet

Vorteile von Wireframing

Das Tolle daran ist, das du dir keine Gedanken über Stil und Design machen musst. Neben der Zeit und Kostenersparnis hat ein Wireframing weitere Vorteile. Demzufolge verschafft es ein klares Bild von der Struktur der Website. Zusätzlich sorgt es für Klarheit aller Interaktionen und Layout-Anforderungen. Folglich gestaltet sich die Planung von Inhalten dadurch deutlich einfacher. Durch die klaren Vorgaben an den Designer und Entwickler sind somit die Entwürfe kalkulierbarer.

Probleme werden viel früher wahrgenommen, also sonst. Ebenso zeitraubende technische Herausforderungen und knifflige Details. All diese Vorteile helfen dir dabei effektiver und erfolgreicher zu arbeiten. Änderungen oder neue Ideen lassen sich sehr leicht und schnell einarbeiten. Dank der skizzenhaften Darstellung ist alles einfacher zu ändern als bei Designvorschläge in komplexen Photoshop Dateien. 

Nachteile von Wireframing

Auf jeden Fall hat ein Wireframing auch Nachteile. Ein großer Nachteil ist, dass es kein Design enthält. Es enthält auch keine technischen Aktionen, die durchgeführt werden. Daher ist es für den Kunden nicht immer einfach, das Konzept dahinter zu erfassen. Der Designer könnte dadurch etwas an seiner Kreativität eingeschränkt sein, da er sich an die Vorgaben es Wireframing halten muss.

Erfahrung mit Wireframing

Wireframing kann manuell oder mit digitalen Tools erstellt werden. In digitaler Form wirkt es für den Kunden nochmals detaillierter und realistischer. Meine Erfahrung zeigt, dass Wireframing ein wichtiger Bestandteil des Webprozesses ist und auf keinen Fall übersprungen werden sollte. Stell dir einmal vor, du müsstest ein Haus ohne Bauplan bauen. Möglich ist es sicher, das Ergebnis lässt sicher zu wünschen übrig.

Mit dem ersten Wireframing starten

Wenn du nun mit deinem ersten beginnen möchtest, rate ich dir davon ab gleich mit einem digitalen Design-Tool zu starten. Ich würde dir raten zu Beginn mit Stift und Papier zu beginnen. Die Papier- und Bleistift Methode, ist vermutlich am einfachsten. Ein Blatt Papier und los gehts. Wer sehr oft an Responsive Designs herum scribbelt so wie ich, dem empfehle ich fertige Vorlagen. Uistencils bietet neben Rasterlineale und Stiften auch sogenannte „Sketch Pads“ an.

Sammle damit deine ersten Erfahrungen. Skizziere dir zuerst deine Ideen und wechsle danach erst zu einem digitalen Werkzeug. Nimm dir genügend Zeit und lerne. Im Laufe der Zeit wirst du darin immer besser werden.

Mit anderen Worten, du benötigst ein Gespür, um erfolgreiche Wireframes zu erstellen. Konzentriere dich nicht allzu sehr auf das Aussehen. Es ist kein fertiger Designentwurf, kein Kunstwerk. Konzentriere dich nicht auf den Inhalt der Website. Halte dich stattdessen an den „Mobile-First“ Ansatz. Hole dir Inspirationen. Im Netz gibt es bereits haufenweise Beispiele.

Online-Tools zum erstellen gibt es viele, ich bevorzuge jedoch Bleistift und Papier. Mein Werkzeug hierfür stammt von www.uistencils.com.

Fazit

Wenn ein Wireframing sehr früh in ein Projekt einfließt, erspart es durchaus viel Zeit und Geld in der Test- und Korrekturphase eines Website-Projekts. Der genannte Nachteil muss nicht immer ein Nachteil sein. Selbst dieser kann bei enger Zusammenarbeit zwischen Designer und Texter dennoch Vorteile mit sich bringen.

Sobald für die zentralen Seiten die Website-Struktur vorliegt und vom Kunden abgenommen wurde, startet die visuelle Gestaltung in Form eines interaktiven Prototypen (Clickdummy).

So geht es weiter

Beim 6. Tipp der Artikelserie geht es um „Auswahl des geeigneten Content Management System (CMS)„.

Wenn dir der Beitrag gefallen hat, empfiehl ihn bitte weiter oder hinterlasse einen Kommentar:

Add a Comment

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Shares