Wireframes im Webdesign – Eine Anleitung wie du Wireframes im Website-Prozess gezielt einsetzt.

Letztes Artikel-Update:
13. März, 2020

Wireframes sind ein wichtiger Schritt im Webdesign-Prozess. Als Schnittstelle zwischen Konzeption und Umsetzung helfen Sie den Inhaltsaufbau zu visualisieren und zu optimieren.
4.9
(36)

Bevor sich ein Webdesigner an die optischen Feinheiten oder gar die technische Umsetzung eines neuen Website-Projektes macht, gilt es möglichst einfach und schnell Entwürfe anzufertigen. Mit Wireframes steht da eine mächtige Methode parat. Erfahre in dieser Anleitung wie und wofür genau du Wireframe einsetzen kannst und mit welchen Tools sich diese gut umsetzen lassen.

Was sind Wireframes überhaupt?

Ein Wireframe ist ein sehr früher konzeptioneller Entwurf der Website. Dabei geht es vor allem um die Anordnung und Positionierung der einzelnen Elemente einer Website und noch nicht um die konkrete visuelle Gestaltung und die Funktionalität.

Wireframes werden häufig schon in der Konzeptionsphase eingesetzt. Mit ihnen lässt sich die Inhaltsstruktur einer Einzelseite visualisieren.

Ein einfaches handgezeichnetes Wireframe.
Ein einfaches Wireframe, das die Anordnung der Elemente visualisiert

Da grafische Elemente wie Farben, Formen, Bilder oder Typografie hier noch keinerlei Rolle spielen, liegt der Fokus auf den Inhalten, deren Anordnung und die die Interaktion durch den Besucher. 

Ein häufiges Argument für Wireframes ist, dass es, wenn ein Benutzer nicht weiß, wo er auf einem einfachen handgezeichneten Diagramm der Website hingehen soll, irrelevant ist, welche Farben oder welcher Text letztendlich verwendet wird. Ein Button, ein Link oder sonstige Interaktionsmöglichkeit muss für den Benutzer klar erkennbar sein, auch wenn sie nicht grell gefärbt sind und blinken.

Warum man mit Wireframes arbeiten sollte!

Da es bei Wireframes rein um die Inhalte, bzw. deren Anordnung geht, können also die entscheidenden inhaltlichen Aspekte besprochen werden, bevor über einzelne Design-Entscheidungen diskutiert wird („Das Rot passt nicht“).

Gerade bei Seiten mit einem hohen Interaktionsgrad wie Shops, Landing Pages oder Startseiten sind Wireframes eine hilfreiche Technik. Sie erlauben, dass sich Kunde und Webdesigner auf die Inhalte und Funktionen konzentrieren:
Welche Inhalte kommen auf die Seite? Wo werden diese platziert? Welche Funktionen (Buttons etc.) sollen zur Verfügung stehen?

Frei von visuellen Einflüssen kann so die Struktur der einzelnen Seiten erarbeitet werden. Dazu lassen sich schneller verschiedene Layoutvarianten erstellen und ausprobieren, bevor detaillierte Designs erstellt werden, die so gar nicht funktionieren (können). 

„Dank Wireframe bekommst du schnell einen Überblick, wie viele Inhalte und Elemente es auf der Webseite gibt und wie sich diese anordnen lassen.“

Ein Wireframe für einen Website-Entwurf.
Ein Wireframe ist vergleichbar mit der Blaupause eines Architekten: Bevor Sie verstehen, wie Sie das Haus bauen sollen, müssen Sie es erst in einer zweidimensionalen Schwarz-Weiß-Zeichnung betrachten.

Kunden und Wireframes
Vor allem Kunden, die bisher mit Online-Projekten noch nicht so viel Erfahrung haben, müssen Sie die Bedeutung von Wireframes oft erst genau erklären. Fragen wie „Warum ist das Design so grau?“ können Sie mit einer solchen Aufklärung verhindern.

Wireframes im Webdesign-Prozess und Projektablauf

Das alte Schema: Kundengespräch, Designentwurf, Umsetzung ist nicht nur veraltet, es ist auch ungünstig und ineffektiv. 

Nach einer Konzeptionsphase sollte es nicht gleich an detaillierte Designentwürfe oder gar die technische Umsetzung gehen. Mit Methoden wie Wireframes, Moodboards und/oder Stylescapes lässt sich gezielter arbeiten.

Es werden zuerst die Inhalte strukturiert und die Designrichtung festgelegt und DANACH geht es erst an die konkrete technische und optische Umsetzung. 

Wireframes sollten sich also direkt aus der Inhaltsstrategie der Website ergeben, indem sie die Hierarchie der Inhalte auf jeder Seite zeigen und zeigen, wie jede Seite in die Gesamtstrategie passt. 

Sind Wireframes und Stylescapes erstellt, hat der Designer eine Vorlage, anhand derer er das Design erstellen kann. Dieser Ablauf kann jede Menge Zeit einsparen. Wird anstelle eines Wireframes gleich ein ausgearbeitetes Screendesign erstellt, wird bei der Beurteilung vor allem auf die Optik und weniger auf die Inhalte geachtet. Und wenn die Inhalte dann doch beurteilt und eventuell angepasst werden müssen, ist der Aufwand bei einem fein ausgearbeiteten Screendesign größer als bei einem Wireframe.

Ebenso kann die technische Umsetzung nach Abnahme der Wireframes beginnen. Zusammen mit einer Sitemap ist der inhaltliche Aufbau der Website klar. Die Seitenstruktur, einzelne Templates und Elemente können also technisch angelegt werden. Die optischen Anpassungen per CSS sind dann „fast“ nur noch Feinarbeit.

Wireframe sind also eine Art Kommunikationswerkzeug, das den Webdesign-Prozess optimiert, indem es Kunden, Designer und Entwickler ermöglicht, die Struktur einer Website ohne Ablenkung durch die visuelle Ästhetik zu beurteilen. Und im Grunde ist das ja auch schon Design: Die Auswahl und Anordnung der Elemente, ihr Bezug zueinander, ihre Bedeutung und Hierarchie aufgrund ihrer Positionierung – was ist Design, wenn nicht das?!

Wireframes im Webdesign

Ein Wireframe ist nützlich, weil es alles Projektbeteiligten ermöglicht, eine feste Seitenstruktur zu erstellen (und die Auswirkungen dieses Designs insgesamt zu verstehen), bevor das vollständige Seitendesign (einschließlich der Ästhetik) abgeschlossen ist.

In den folgenden Aufzählungspunkten finden Sie eine Reihe von Möglichkeiten, wie verschiedene Designer den Prozess vom Entwurf bis zur Implementierung strukturieren können:

Webdesign-Abläufe mit Wireframes.
Verschiedene Webdesign-Abläufe. Bei jedem lassen sich Wireframes einbauen.

Wie ein Wireframe aufgebaut sein sollte!

Es geht um die Inhalte und deren Anordnung. Also müssen zuerst die Inhalte der einzelnen Seiten gesammelt werden, für die ein Wireframe gestaltet werden soll. Es geht nicht darum, dass die finalen Inhalte (Texte, Bilder usw.) zur Verfügung stehen, sondern darum, welche Art an Inhalten jeweils dargestellt werden sollen. 

Inhalte:

Die erste Frage lautet daher: Was genau wird auf dieser Seite angezeigt? Es geht zuerst um die einzelnen Bereiche wie Kopf- und Fußzeile, Seitenleiste und Inhaltsabschnitte. Dann kommen die einzelnen Elemente. Das können z. B. sein (in loser Reihenfolge): Logo, verschiedene Navigationen, Headlines, Fließtexte, Bilder, Grafiken, Buttons, Links, Widgets, Seitenleisten, Footer, Suche usw. Und es können auch zusammengesetzte Inhaltselemente sein wie bspw. Kontaktfeld/-formular, Teaserblock oder ein Newsbereich.

Struktur:

Wie werden die Inhalte zusammengefügt? Wo stehen sie? Hier geht es um die konkrete Positionierung auf der Webseite. Und es geht darum wie Elemente „zusammengefügt“ werden. Je näher sich Elemente stehen, umso eher werden sie als Einheit wahrgenommen. Oder anders ausgedrückt: Was zusammengehört, sollte auch nah genug beisammenstehen. 

Hierarchie:

Welche Bedeutung haben die einzelnen Elemente?  Dies hängt von der Positionierung und Größe ab. Ganz allgemein lässt sich sagen, je weiter oben ein Element steht, umso wichtiger. Je weiter links es steht, umso wichtiger (da unsere Leserichtung von links nach rechts und von oben nach unten ist). Das ist natürlich nicht allgemeingültig und diesem „natürlichen Hierarchie-Empfinden“ lässt sich später durch die konkrete Ausgestaltung auch bei Bedarf entgegenwirken.

So lassen sich wichtige Elemente, die aber weiter unten und weiter rechts angeordnet sind, entsprechend aufmerksamkeitsstark gestalten, um in der Hierarchie quasi aufzusteigen. Und je größer ein Element gestaltet wird, umso gewichtiger ist. Und auch der Leerraum spielt eine große Rolle. Je mehr davon um ein Element vorhanden ist, umso bedeutender ist es. Wenn also ein Button besonders gut zur Geltung kommen soll, dann gib ihm viel Freiraum. 

Funktionalität & Verhalten:

Wie verhalten sich Elemente zueinander und mit dem User? Es geht bei einer Website ja nicht nur darum, dass der Besucher passiv irgendwelche Inhalte konsumiert. Im Idealfall interagiert er mit der Website. Er scrollt, klickt, und füllt vielleicht auch Formulare aus usw. 

Ein Wireframe kann dies schon verdeutlichen: Welche Elemente gehören zusammen und signalisieren dem User, was man mit ihnen machen kann. Als Beispiel können Artikel- oder News-Teaser auf der Startseite dienen. Zusammengesetzt aus verschiedenen Elementen wie Artikelbild, Headline, Vorschautext und „Weiterlesen“-Link ergeben sie ein größeres Ganzes. Dieses größere Ganze ist anklickbar, um zum entsprechenden Artikel zu gelangen, dies muss dem User später nicht nur die detaillierte optische Ausgestaltung deutlich sein, sondern am besten auch schon in einem Wireframe klar werden – aufgrund der Anordnung, Positionierung der Elemente.

Wenn das erreicht wird, dann ist dem Besucher dies auch auf der späteren Website gleich deutlich, ohne das er überlegen muss, ob er über durch Klick auf diese Elemente zu einem Artikel kommt oder nicht. 

Wireframes im Webdesign

Was nicht in ein Wireframe gehört!

Ein Wireframe ist KEIN konkreter Design-Entwurf!

Daher sollte auch alles, was diese Assoziation auslösen könnten wegbleiben. Gerade für mit Wireframes Unbedarfte (wie eben die meisten Kunden) ist es sonst schwierig(er) zu verstehen.

Also keine Farben, Grafiken, Icons, Bilder usw. einsetzen, keine ausgestalteten Elemente – selbst wenn es den Designer in dir in den Fingern juckt. 

Ein anderer Punkt sind die Texte: „Loren Ipsum“-Texte verleiten dazu den Text dem Design, bzw. dem Wireframe-Entwurf anzupassen. Es sollte aber andersherum sein. Die Texte und deren Länge geben den benötigten Platz vor. Nicht selten, dass in einem Wireframe, ebenso wie in späteren Design-Entwürfen schöne einzeilige Artikelteaser gestaltet werden. In der Praxis tauchen dann aber regelmäßig zwei- oder gar dreizeilige Artikelteasertexte auf und zerschießen das Layout.

Nicht aus ästhetischen Gründen verleiten lassen, ungünstige Blindtexte einzusetzen.

Klar, „Lorem ipsum dolor sit amet“ lässt sich halt angenehmer gestalten. Wenn die Realität aber „Flachdichtungen Form IBC – EN 1514-1/DIN 2690 für Flanschdichtfläche Form B“ heißt (kein Witz, kommt bei einer meinen Kunden so wirklich vor), dann lieber gleich die richtigen Texte nehmen. Das erspart später viel Zeit und unter Umständen auch Ärger.

Wireframes sollten nicht das endgültige Design der Webseite bestimmen. Sie sollten zeigen, wie die Seite funktionieren wird, nicht, wie die Seite aussehen wird.

Methoden um Wireframes zu erstellen

Mit welchen Methoden lassen sich Wireframes erstellen? Es gibt unterschiedliche Methoden, Wireframes zu erstellen, und auch der Detaillierungsgrad kann sich unterscheiden.

Papier-Wireframes

Die Arbeit mit Bleistift und Papier sollte kein Webdesigner scheuen. Trotz all der digitalen Tools sind die analogen Werkzeuge ein einfaches und effektives Hilfsmittel.

Erste Anordnungen können schnell und iterativ ausprobiert werden. Teilweise haben sie sogar Vorteile gegenüber digital erstellten Wireframes, da sie unfertiger und unverbindlicher wirken. Es wird so deutlich, dass es sich „nur“ um einen Prototyp handelt, der sich noch in einem frühen Stadium befindet und bei den Änderungen daher einfach umzusetzen sind. Er wirkt anregender, und Kommentare und Diskussionen sind dadurch meistens offener.

 Wireframes mit Papierschnipseln
Mit Papierschnipseln lassen sich Wireframes flexibel erstellen und unkompliziert neue Anordnungen austesten.

Papier-Wireframes können sehr grob und einfach gehalten sein und nach und nach immer feiner ausgearbeitet werden. Gerade bei ersten sehr einfachen Skizzen sind so schnell verschiedene Varianten ausprobiert – schneller, als sie sich digital erstellen ließen. Gerade die Anordnungen bei unterschiedlichen Bildschirmbreiten (Schlagwort Responsive Webdesign) lassen sich auf diese Weise gut umsetzen.

Handgezeichnete Wireframes

Für einen Webdesigner mag die Umsetzung mit Stift und Papier hilfreich sein, sich nicht schon auf konkrete Details der Gestaltung oder die feine Ausarbeitung wie passende Abstände oder Bündigkeit zu konzentrieren. Ein solcher Perfektionismus wäre an dieser Stelle noch viel zu früh.

Ein handskizziertes Wireframe.
Nicht schön, aber flott erstellt. Ein handskizziertes Wireframe liefert einen schnellen Überblick.
Wireframe-Templates und -Vorlagen.
Wireframe-Templates erleichtern die Arbeit enorm. Verschiedene responsive Ansichten bietet das Webdesign Survival Kit.

Zeichentalent
Die Ausrede, um keine Wireframes zu machen, heißt oft: „Ich kann nicht zeichnen.“ – Das ist aber auch gar nicht notwendig. Du sollst nur ein paar Kästen skizzieren und kein künstlerisches Gemälde. Perfektionismus wäre hier sowieso fehl am Platz. Wer einen Stift halten kann, kann auch Wireframes zeichnen!

Das Zeichnen auf einem völlig weißen Blatt Papier kann zu Beginn ungewohnt und irritierend sein. Es gibt Papiervorlagen, die eine Art „Rahmen“ in Form eines stilisierten Webbrowsers und teilweise auch mit Smartphone-Rahmen anbieten. Diese Form eines Rahmens kann beim Zeichnen Halt geben und Ihnen den Einstieg vereinfachen. Teilweise sind auch Rasterlinien vorhanden, was sehr hilfreich sein kann. Im Webdesign Survival Kit gibt es übrigens unterschiedliche Webdesign-Scribble-Vorlagen.

Wireframe-Übung
Ich gebe es zu, für Anfänger ist es nicht ganz einfach, mit Wireframes vertraut zu werden und auch die „Hürde“ vor dem weißen Blatt Papier zu nehmen. Daher folgender Übungsvorschlag zum „Warmwerden“:
Suchen Sie sich unterschiedliche Websites aus, und skizzieren Sie die Inhaltsbereiche nach. Zunächst grob nur mit Linien die Hauptbereiche, dann etwas detaillierter mit Texten.
Machen Sie das ruhig mit drei, vier, fünf unterschiedlichen Seiten.
Überlegen Sie sich dann neue Anordnungen der Inhalte der einzelnen Seiten, und skizzieren Sie diese. Jetzt wird die Umsetzung schon etwas freier, weil es nicht mehr um das reine „Nachskizzieren“ geht.
Innerhalb kurzer Zeit erstellen Sie auf diese Weise mehrere Blätter voller Wireframes. Der Anfang ist also schon mal gemacht …
Wenn Sie Websites als Vorlage brauchen, dann können Sie sich hier z. B. welche aussuchen: https://www.webdesign-journal.de/website-galerie/.

Digitale Wireframes

Wireframes können natürlich auch digital erstellt werden, entweder als Erweiterung/Vertiefung des Papier-Wireframes oder natürlich auch gleich zu Beginn.

Ein einfaches digitales Wireframe.
Die Website twitter.com als einfaches digitales Wireframe.

Im Vergleich zu händischen Varianten lassen sich diese natürlich sorgfältiger und auch eindeutiger umsetzen. Auch hier ist von schlichten bis zu sehr detaillierten Varianten alles möglich. Eventuelle kleinere Anpassungen lassen sich schneller durchführen, weil dann häufig nur die einzelnen Elemente verschoben oder abgeändert werden müssen, während bei Papier-Wireframes unter Umständen die komplette Skizze neu erstellt werden muss.

Digitale Wireframes haben den Vorteil, dass sich für quasi alle Webseitenelemente wie Navigationen, Buttons, Bilder etc. es jede Menge vorgefertigte Grafiken gibt, aus denen sich schnell ein Wireframe zusammensetzen lässt. So leidet das Wireframe dann nicht an unleserlichen Skizzen.

Wireframe und fertige Website.
So wurde aus einem Wireframe eine fertige Website.

Für Kundenpräsentationen sieht ein digitales Wireframe professioneller aus, was aber eben nicht immer von Vorteil sein muss. Zu schnell kann es wie ein (fertiger) Design-Entwurf wirken bzw. wie nicht mehr diskutabel.

Steht das Wireframe allerdings als fertiger Entwurf fest, so kann eine digitale Variante als Vorlage für das Design oder auch zur Freigabe mit dem Kunden verständlicher sein.

Es gibt genug Auswahl an vorgefertigten Elementen für digitale Wireframes, z. B. bei Free Photoshop Wireframe Kit.

Wie fein muss ein Wireframe ausgearbeitet sein?

Man kann Wireframes in zwei Varianten unterteilen, die vom Grad der Ausgestaltung abhängig sind:

Low-Fidelity-Wireframe

Dies haben sozusagen eine geringe Wiedergabetreue. Es geht erst einmal nur grob, um die Anordnung, ohne zu viel Details. Es wird die grundlegende Informationsarchitektur sichtbar – und das reicht hier auch. Low-Fidelity-Wireframes lassen sich daher eben recht schnell erstellen und verschiedene Varianten so gut austesten.  Das können also auch schon Handskizzen (siehe oben) sein, die naturgemäß nicht so fein sind.  

High-Fidelity-Wireframe

Wenn sich alle Projektbeteiligten auf ein Low-Fidelity-Wireframe geeinigt haben, wäre der nächste Schritt dann High-Fidelity-Wireframes, die eben feiner ausgearbeitet sind. Ein grobes Kästchen, dass Headlines oder Fließtext symbolisieren sollte, macht dann beispielsweise Platz für echte Texte.

Der Aufwand der Erstellung ist hier natürlich (deutlich) größer, dafür lässt sich die Interaktion deutlich besser testen und die Benutzerführung besser erkennen.  Dies passiert auch nicht selten in einem fortgeschrittenen Projektstadium, so dass der Übergang zu einem (High Fidelity-)Prototype fließend ist.

Bei einem High-Fidelity-Wireframe kann es dann auch schon vorkommen, dass (einzelne) Elemente feiner ausgestaltet werden, Logos, Bilder, Farben usw. zum Einsatz kommen. 

Low-Fidelity-Wireframe und High-Fidelity-Wireframe.
Ein Beispiel wie aus einem Low-Fidelity-Wireframe ein High-Fidelity-Wireframe wird.

Die Graue-Box-Methode

Die meisten Wireframes sind – aus Gründen – einfarbig. Es sind schwarz-weiße Diagramme, die die einzelnen Inhaltselemente darstellen. Als optimierte Methode hat der bekannte Designer Jason Santa Maria die Graue Box Methode entwickelt.

Einfache graue Kästen stellen die Inhaltsbereiche dar. Meistens werden die grauen Kästen allgemeiner gehalten als bei klassischen Wireframes. So wird der Arbeit des Designers wieder mehr Spielraum gegeben. Als Weiterentwicklung lassen sich mit den Kästen auch Schwerpunkte durch unterschiedliche Graustufen setzen. Je dunkler der Grauton eines Elements, desto eher fällt er dem Betrachter auf, umso gewichtiger ist dieser also. Dadurch nähert sich das Wireframe langsam dem späteren Design, denn auch hier müssen Schwerpunkte gesetzt werden.

Stellen Sie sich ein großes emotionales Teaser-Bild neben drei Absätzen Fließtext vor. In einem „normalen“ Wireframe würden beide Inhaltselemente in der gleichen grauen Farbe und vielleicht einer ähnlichen Größe abgebildet. Dies entspricht aber nicht ihrer visuellen Bedeutung. Bekommt der „Bild“-Kasten ein Dunkelgrau und der Absatz ein helleres Grau, wird die visuelle Hierarchie deutlicher.

Wireframes mit der Graue-Box-Methode.
Die Original-Website und daneben ein dazugehöriges Wireframe mit der Grauen-Box-Methode.

Die „Grey Box Method“ lässt sich sogar mit Papierschnipseln umsetzen, wie der Artikel Why Wireframe? Well… zeigt.

Bringe dein Webdesign-Business voran!

Mit den Webdesign Journal Angeboten:

Wireframe-Tools

Um Wireframes digital zu erzeugen, haben Sie unterschiedliche Möglichkeiten. Hier gibt es kein „besser“ oder „schlechter“. Mit allen Varianten lassen sich Wireframes erstellen. Und natürlich gibt es eigene Software, die extra für die Wireframe-Erstellung entwickelt wurde.  

Spezielle Wireframe-Software: 

Balsamiq Mockup

UI-Elemente von Balsamiq.
Eine große Auswahl an UI-Elementen bietet Balsamiq.

Wohl das bekannteste Wireframing Tools auf dem Markt. Die einfache Bedienung und der Wireframe-Look im Stile klassischer Handzeichnungen kennzeichnen das Programm. Auch Anfänger kommen mit dem Programm dank Drag & Drop schnell zurecht. Dafür lassen sich keine High-Fidelity-Wireframe erstellen und die Interaktionsmöglichkeiten sind auch beschränkt. Man kann das Tool kostenlos testen. Wer es länger einsetzen will, zahlt entweder einmalig ab $ 89 oder eine monatliche Nutzungsgebühr ab $ 9 / Monat. 
https://balsamiq.com/wireframes/

Axure

Die etwas größere Variante wäre Axure, dessen Funktionsumfang deutlich höher ist und sich damit auch eher an Fortgeschrittene wendet. Es steht eine riesige Auswahl an UI-Elementen und Widgets zur Verfügung. Dazu kommen noch die Möglichkeit u.a. Animationen, dynamische Inhalte und Code-Export einzusetzen. Damit ist das Tool wunderbar für High-Fidelity-Wireframe gedacht, braucht aber auch keine geringe Einarbeitungszeit. Und auch für (größere) Teams ist die Software gut geeignet mit entsprechenden Funktionsumfang. Wem die 30-Tage-Testversion zusagt, der kann das Axure ab $ 29 / Monat nutzen. 
Axure

Wireframes und User Flow bei Axure.
Wireframes und User Flow bei Axure.

Omnigraffle

OmniGraffle ist ein Design Tool, das für die Erstellung von Wireframes, aber auch Diagrammen, Grundrissen und ähnlichen Anforderungen ausgelegt ist. Für Mac-User bietet das Programm jede Menge Vorlagen und UI-Templates. High-Fidelity sieht das Ergebnis aber nicht aus und die Einarbeitungszeit ist auch nicht gering. Die Anwendung ist eher für Fortgeschrittene gedacht und mit Preisen ab $250 auch nicht ganz so günstig. 
Omnigraffle

Online-Tools: 

Natürlich gibt es auch Online-Applikationen für die Wireframe-Erstellung. Erwähnenswert sind folgende:

wireframe.cc

… ist ein sehr einfaches, intuitiv zu bedienendes und schlichtes Wireframing-Tool für Websites und mobile Anwendungen. Es bietet eine 7-tägige kostenlose Testversion. Danach sind Gebühren ab  $ 12 / Monat fällig.
wireframe.cc/

Mockingbird

… ist schon etwas umfangreicher als wireframe.cc und stellt mehr Elemente und Vorlagen in der UI Bibliothek zur Verfügung. Aber insgesamt auch (nur) für Low-Fidelity-Wireframe geeignet. Die Preise starten nach der Probezeit ab $ 12 / Monat.
Mockingbird

Frame Box

Ebenfalls ein einfach zu bedienendes Tool, das optisch etwas veraltet wird, was der Funktionalität aber keinen Abbruch tut. 
Frame Box

Prototyping-Tools

Dazu gibt es einige Prototyping-Tools mit denen sich natürlich auch gut Wireframes erstellen lassen. 

Moqups

Wireframe, Mockups (ein visuelles Modell des späteren Produktes) und Prototypen – Moqups ist sehr mächtig mit einer großen Auswahl an Vorlagen und Elementen. Die Bedienung ist intuitiv und Funktionen wie bspw. Realtime Collaboration, Export-Funktionen machen es zu einem Profi-Programm. Ab € 13 / Monat kann man das Programm nutzen.
Moqups

Wireframing mit Moqups.
Wireframing mit Moqups.

Justinmind

Ebenfalls ein sehr mächtiges Tool zur Erstellung von high-fidelity Wireframes und interaktiven Prototypen für (responsive) Websites und mobile Apps. Auch hier ist die Bedienung intuitiv per Drag & Drop mit vielen Vorlagen und Preisen ab $ 19 / Monat.
Justinmind

Die Benutzeroberfläche des Wireframing-Tools Justinmind.
Die Benutzeroberfläche des Wireframing-Tools Justinmind.

MockFlow

Wireframes, Styleguides und Prototypen lassen sich mit MockFlow erstellen. Auch mit vielen Vorlagen und intuitiver Bedienung. Es gibt eine kostenfreie Variante mit ein paar Einschränkungen. So „richtig“ geht es ab  $ 14 / Monat los.
MockFlow

High-Fidelity-Wireframes bei MockFlow.
High-Fidelity-Wireframes bei MockFlow.

UXPin

Was soll ich sagen: Ich Grunde wie die drei oberen Tools: Wireframes, Prototypen, viele Vorlagen, Drag & Drop, intuitiv bedienbar, dazu fast schon Standard-Zusatzfunktionen wie Real-time Collaboration oder Code-Export. Die Kosten sind ab$ 19 / Monat vergleichbar. 
UXpin

Wireframing und Prototyping mit UXPin.
Wireframing und Prototyping mit UXPin.

Grafiksoftware

Auch Grafiksoftware eignet sich für die Erstellung. Diese hat zwar nicht unbedingt die Funktionen wie spezielle Wireframe-Anwendungen, aber Webdesignern ist der Umgang mit ihnen meist besser vertraut. Und die typischen Wireframe-Elemente gibt es als Vorlage auf vielen Websites. Zu den Grafikprogrammen, mit denen sich auch gut Wireframes erstellen lassen, gehören natürlich die Adobe-Palette mit den Programmen XD, Illustrator, Photoshop oder sogar auch InDesign. Alternativ bieten sich auch gut Sketch, Marvel oder Figma an.

Office-Programme

Manchmal werden auch die sogenannten Office-Programme eingesetzt. Gerade auf Kundenseite erfreuen sie sich großer Beliebtheit, weil die Kunden damit täglich arbeiten. So lassen sich Wireframes auch mit Microsoft Word, PowerPoint, Excel oder mit Apples Keynote erstellen.

Wie fängt man mit Wireframes an?

Wie so oft: einfach anfangen, gar nicht groß überlegen. Ok, zumindest um mit den verschiedenen, oben vorgestellten Methoden, vertraut zu werden. Wenn du aber an einem konkreten Kundenprojekt sitzt und dafür Wireframes erstellen willst, dann helfen dir diese Fragen zur Vorbereitung und Kontrolle deiner Wireframes:

  • Was sind die Unternehmensziele, die Ziele der einzelnen Webseite/Unterseite?
  • Welches sind die Benutzerziele?
  • Zu was will ich den Benutzer auf dieser Seite veranlassen?
  • Was sollte der Besucher als erstes sehen, wenn er auf die Seite gelangt?
  • Wo stehen die üblichen Elemente wie Logo, Navigationen usw.?
  • Welche Handlungsaufforderungen wird es geben (CtA-Buttons usw.)?
  • Welche Inhaltsabschnitte soll es geben?

Vorteile und Grenzen von Wireframes

Zuerst die Inhalte und Funktionen, dann das Design – diesen Prozess unterstützen Wireframes. Im Vergleich zu einem ausgearbeiteten Design geht die Erstellung eines Wireframes sehr schnell. Eventuelle Fehlplanungen und unnütze Arbeit können durch Wireframes schon frühzeitig vermieden werden. 

Zwischen der Konzeption der Website samt Zielen, Zielgruppen und Inhalten und dem ausgearbeiteten Design entsteht dann kein Leerraum, der mit der Präsentation des fertigen Design-Entwurfs abgeschlossen wird. Unterschiedlich detailliert ausgearbeitete und abgestimmte Wireframes verhindern eine böse Überraschung bei der Beurteilung des Designs. So können Zeit und Kosten eingespart werden.

Mit den neu aufgekommenen Abläufen unter anderem durch das Responsive Webdesign sind Wireframes nicht mehr zwangsläufig ein hilfreiches Mittel. Durch den schnellen Einstieg in die Frontend-Umsetzung sind sie immer seltener notwendig – vielleicht noch als einfache Variante, die die grobe Aufteilung vor der Umsetzung vorgibt. 

Auch bei Interaktivitäten und sehr umfangreichen Inhalten sind sie kaum dienlich, da sie diese nicht oder nur schwer veranschaulichen können. Dies ist ja auch bei Screendesign-Bilddateien so.

Je nach eigenem Arbeitsprozess ist der Einsatz von Wireframes also unterschiedlich sinnvoll.

Bei manchen Webdesignern mögen das umfangreiche und detailliert ausgearbeitete Wireframes sein, bei anderen gar keine, weil sie direkt im Browser anfangen. Wenn die richtigen Inhalte zur Verfügung stehen, können diese auch schon in ein Wireframe eingebaut werden. So lässt sich relativ gut beurteilen, ob der eingeplante Platz ausreicht. Allerdings wird dann der Aufwand, Wireframes zu erstellen, wieder sehr groß – unter Umständen so groß, dass sich der Aufwand nicht mehr lohnt, sondern die direkte Umsetzung im Frontend effizienter ist.

Wireframes im Webdesign

Es gibt nicht wenige, die aus den genannten Gründen bereits vom Ende der Wireframes sprechen. Das ist vermutlich etwas weit gegriffen, aber für einen agilen Entwicklungsprozess sind Wireframes tatsächlich nicht zwangsläufig hilfreich.

Interaktive Prototypen sind meistens effektiver in einem flexiblen Prozess, bei dem eben zu Beginn noch nicht genau die einzelnen Inhalte, Anordnungen und Funktionen festgelegt werden können. Zumindest ein erstes Skizzieren, also einfache Low-Fidelity-Wireframe, sind aber in der Praxis nach wie vor sinnvoll. Die Ausarbeitung von High-Fidelity-Wireframes hängen dann vom eigenen Webdesign-Prozess ab.

Überblick Wireframes im Webdesign

Wann sollte man Wireframes einsetzen?

UX-Design und Webdesign ist ein Prozess, und Wireframing kann hilfreiche Methode darin sein – zwischen Konzeption und Design mit technischer Umsetzung angesiedelt. Statt gleich in die optische und/oder Umsetzung zu gehen, werden erst schematische Darstellungen des Inhaltes erstellt.

Welche Vorteile haben Wireframes?

Durch die Reduktion auf die Inhalte ohne gestalterische Merkmale können die Struktur und Hierarchie der Inhalte besser beurteilt werden. So lässt sich im Projektverlauf Zeit sparen, da eventuelle Design und Technik nachher auf diesem sprichwörtlichen Grundgrüst aufbauen können. Zusammen mit Moodboards oder Stylescapes können Wireframes so ein mächtiges und hilfreiches Instrument sein.

Welche Tools gibt es zur Erstellung von Wireframes?

Erste einfache Wireframes lassen sich schon sehr gut mit Papier und Stift erledigen. Wer es etwas fortgeschrittener und digitaler mag, für den gibt es Online-Tools wie Balsamiq Mockup, Axure oder wireframe.cc. Aber auch mit klassischer Grafik-Software wie Sketch, XD, Photoshop oder Illustrator lassen sich Wireframes gut erstellen. Mehr Tools gibt es im Artikel Wireframes im Webdesign

Bewertungsergebnis: 4.9 / 5. | Anzahl der Bewertungen: 36

Hole dir die Webdesign-CHECKLISTE mit über 90 Checkpunkten für Dein nächstes Projekt & den monatlichen Webdesign-NEWSLETTER:

Schließe dich über 2.560 Newsletter-Abonnenten an

Keine Sorge, Spam gibt es hier nicht, stattdessen regelmäßig Webdesign-Tipps, -Links und -Angebote von mir! Du kannst den Newsletter auch jederzeit problemlos abbestellen. Mehr Infos dazu:
(Beispiele, Datenschutz, Analyse und Widerruf)

Kommentare zum Artikel

6 Kommentare zu „Wireframes im Webdesign – Eine Anleitung wie du Wireframes im Website-Prozess gezielt einsetzt.“

  1. Hallo Martin,
    sehr ausführlicher Artikel auf jeden Fall! Danke dafür.

    Bisher haben wir hauptsächlich Handskizzen gemacht, um einen groben Überblick zu erhalten, daraufhin eine genaue Skizze am Computer und den Rest der Feinheiten haben wir bei der Programmierung „geregelt“. Manchmal ist das ein ziemlicher Aufwand, wenn man nur wegen des Layouts etliche Zeilen Code umschreiben muss. 🙂

    Wo ist denn jetzt genau der Unterschied zwischen einer Handskizze und einem handgefertigten Wireframe? Klingt der Name einfach besser oder gibt es da auch noch technische Unterschiede?

    Ich denke, dass viele Webdesigner von einem Entwurf des Layouts profitieren können. Da viele Websites einfach überladen sind und ich mich überfordert fühle, wenn ich das erste Mal auf so eine Seite komme. Wenn dann schon die Anordnung nicht auf das Wireframe passt, sollte man überlegen, ob wirklich alles wichtig ist.

    Viele Grüße
    Marvin Caris von MC-Mediadesign

    1. Hallo Marvin,
      wenn die „Handskizze“ die Inhaltsstruktur der Website schematisch darstellt, dann ist es wohl ein Wireframe 😉
      Nenne es wie du willst, die meisten nennen es halt „Wireframe“. Und ich denke vielen Kunden muss man es so oder so erklären. Wenn man denen sagt, man mache eine „Handskizze der Website“, gucken die vermutlich erst einmal doof…
      Gruss
      Martin

      1. Hallo Martin,

        dann hab ich wohl unwissend bisher immer ein „Wireframe“ angefertigt.
        Jetzt hab ich zumindest einen komplizierten Namen, um eine einfache Skizze zu benennen *lach* 🙂

        Trotzdem sehr schön, einen so informativen Artikel zu so einem „simplen“ Thema lesen zu können. Danke dafür!

        Viele Grüße
        Marvin von Mc-Mediadesign

        1. Du musst ja keine komplizierten Namen verwenden, er ist halt nur geläufig.
          Kannst deinen Kunden ja weiter sagen, du hättest da mal eine „sehr einfache Skizze gemacht“ 😉

  2. Guten Morgen Namensvetter. Ich muss gestehen, selbst gehöre ich noch zu der Generation Papier und Stift. Ich mag es halt, wenn ich in der Lage bin schnell Ideen festzuhalten und zu besprechen. Gerade wenn es in einem kleinem Team passiert oder auch erst einmal nur für mich. Wenn es dann hinterher darum geht, die Idee einer größeren Gruppe vorzustellen sollte es natürlich für alle auch „lesbar“ sein. Ich muss gestehen, du hast da jetzt für das ein oder andere Tool bei mir Interesse geweckt.

    Also einmal Dankeschön dafür.

    1. Hallo Martin,
      ja klar, fürs erste schnelle Ideen festhalten sind Zettel und Stift kaum verzichtbar. Für komplexere Themen, Präsentationen oder die Zusammenarbeit im Team sind digitale Hilfsmittel dann halt doch angemessener 😉

      Gruss
      Martin

Kommentar verfassen

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

Über den Autor

Martin Hahn ist Webdesigner, Dozent, Fachbuchautor und dreifacher Papa.
Seit vielen Jahren hilft er anderen effektivere Webdesigns zu erstellen – in Schulungen und mit Artikeln auf dieser Website.

Mehr über diese Website
und den Autor erfahren   →

Ähnliche Artikel

Entdecke Artikel aus den Bereichen:

Designwissen | Web-Entwicklung | Business-Entwicklung | Inspiration

Scroll to Top