Wireframes verstehen und nutzen – Die Anleitung für deinen Website-Prozess

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 Wireframes 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.

Da grafische Elemente wie Farben, Formen, Bilder oder Typografie hier noch keinerlei Rolle spielen, liegt der Fokus auf den Inhalten, deren Anordnung und der 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 Wireframes bekommst du schnell einen Überblick, wie viele Inhalte und Elemente es auf der Webseite gibt und wie sich diese anordnen lassen.“

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

Vorteile von Wireframes

Hier findest du weitere Vorteile, die für den Einsatz von Wireframes sprechen. Durch diese Methode kannst du …

• eine Geschichte erzählen:
  Das Erkunden einer gut gestalteten Nutzeroberfläche ist wie die Lektüre einer großartigen Story. Was will die Website vermitteln? Wie geht sie auf die Bedürfnisse der Zielgruppe ein?
• Konzepte vertiefen:
  Für die Erstellung des Wireframes analysierst du den Wettbewerb, gehst Anforderungen des Auftraggebers durch und arbeitest Konzepte (weiter) aus.
• schnell und einfach Dinge testen:
  Wireframing ist die wohl günstigste Methode für Schnelltests deiner Ideen. Und auch für einfache Anpassungen, bevor es in die nächste Phase geht.
• Funktionen konkretisieren:
  Du visualisierst Benutzerpfade, Features und Navigation – und machst sie so für dein Gegenüber greifbarer. Was funktioniert gut? Was kann weg? Und was muss neu gedacht werden?
• Website-Architektur aufzeigen:
  Mit einem Wireframe kannst du die Hierarchie und Kategorisierung von Inhalten, sowie die Navigation darstellen.
• Fokus behalten:
  Bei den reduzierten Skizzen fokussiert ihr euch erstmal nur auf Aufbau und Inhalt. Keine Farben, Formen und Gestaltungselemente lenken ab.
• Zeit sparen:
  Überspringst du das Wireframing, läufst du Gefahr, Änderungen im fertigen Design vornehmen zu müssen. Das ist deutlich aufwändiger als die Anpassung am Wireframe durchzuführen.
• Usability priorisieren:
  Das schönste Design taugt nichts, wenn die Website nicht gut bedienbar ist. Daher solltest du dir zwei Fragen stellen: Welche Möglichkeiten gibt es, das Problem der Zielgruppe zu lösen? Und wie finde ich heraus, welche am besten funktioniert?
• Skalierbarkeit und Flexibilität prüfen:
  Ein Wireframe zeigt auf, wie gut sich eine Website anpassen und erweitern lässt, wenn zukünftig zusätzliche Inhalte dazukommen.

Wireframes im Webdesign-Prozess und Projektablauf

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

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 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 veranschaulichen, wie jede Seite in die Gesamtstrategie passt. 

Sind Wireframes und Stylescapes erstellt, hat der Designer eine Vorlage, mit der 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 technisch angelegt werden. Die optischen Anpassungen per CSS sind dann „fast“ nur noch Feinarbeit.

Wireframes 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?!

Ein Wireframe ist nützlich, weil es allen 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 findest du eine Reihe von Möglichkeiten, wie verschiedene Designer den Prozess vom Entwurf bis zur Implementierung strukturieren können:

Die Kombination von Sitemap und Wireframe

Bei der Website-Gestaltung müssen wir Webdesigner nicht nur relevante Inhalte und Funktionen in das Design einbringen, sondern diese auch logisch organisieren. Für einen möglichst effizienten User Flow. Dafür ist ein Wireframe, erstellt auf Basis einer Sitemap, ideal.

Für den Geamtprozess schaust du dir zunächst die Websiteziele und Nutzerbedürfnisse an. Und leitest daraus notwendige Inhalte und Funktionalitäten ab. Diese Herangehensweise, bei der Inhalt von Design und Technik steht, nennt sich Content-Out-Methode.

Im nächsten Schritt geht es an die Definition der Sitemap selbst. Hier bildest du die Informationshierarchie, die Rangfolge von Funktionen und Beziehung von Elementen zueinander in einer Art Diagramm ab. Sie gilt als Bauplan der Website und stellt die Basis für alle weiteren Phasen dar. Danach folgt das Wireframing.

Content-Zones & beschriftete Skizzen

Aus dem Konzept und der Sitemap kannst du Content Zones, also Platz für Inhalte ableiten. Das hilft dir dabei, jede Seite hierarchisch zu ordnen. Stell dir dafür die Frage, wie du inhaltliche Blöcke so verteilen kannst, dass sie schnell erfasst werden können. Diese Inhaltszonen kannst du als Kästchen oder Labels darstellen.

Eine zusätzliche Beschriftung macht es noch anschaulicher. Durch einfache Skizzen und konkrete Stichpunkte kann dein Auftraggeber bzw. das Team deinen Entwurf besser verstehen. Verzichte dabei auf abstrakte Formulierungen wie CTA oder Verkaufsargument. Anschaulicher sind explizite Beschriftungen wie „Log in“ oder gar konkrete Slogans.

Weitere Tipps beim Wireframing

1. Wireframing überhaupt erst in den Webdesign-Prozess aufnehmen: Die Vorteile dürften jetzt bekannt sein. Auch wenn es verführerisch wirkt, diese Stufe zu skippen: Tu es nicht! Diese Methode erspart Zeit, Geld und Korrekturschleifen. 😉
2. Ziele für das Wireframing setzen: Finde mehr über die Zielgruppe, ihre Bedürfnisse, Herausforderungen und Ziele heraus, bevor du startest. Und gehe auch der Aufgabenstellung selbst, Business-Zielen und möglichen Einschränkungen auf Auftraggeberseite auf den Grund.
3. Finger weg von Farben: Erinnern wir uns an eins der Ziele von Wireframes „Voller Fokus auf Struktur und Inhalt!“ Und genau dieser Fokus geht verloren, wenn du jetzt schon Farben einsetzt.
4. Nutze simple Formen: Achte auf eine einfache Ausgestaltung deines Wireframes ohne viele Details oder „schmuckes Beiwerk“.
5. Konzentriere dich auf die relevanten Inhalte. Wenn du zu kleinteilig arbeitest, wird dein Entwurf unübersichtlich.
6. Setzte „echten“ Inhalt ein. Lorem ipsum und andere Platzhalter können andere Beteiligte irritieren. Nutze vorhandenen Content oder erste Content-Entwürfe, wenn die Inhalte noch nicht final sind.
7. Testen, testen, testen! Prüfe dein Konzept, indem du dir Feedback einholst und andere deine Entwürfe testen lässt.
8. Erweitere deinen Entwurf zum Prototypen: Insbesondere bei komplexen Projekten darf eine Interaktionsmöglichkeit nicht fehlen. Alternativ könntest du die Funktionen skizzieren, aber bei hoher Komplexität wird das gerne mal zum Roman und kann so vereinfacht werden.
9. Achte auf Responsivität: Mobile first ist für die meisten nichts neues, trotzdem solltest du die verschiedenen Device-Darstellungen beachten und abbilden.
10. Wireframing ist kein Allheilmittel! Wie erwähnt, kann ein bloßes statisches Wireframe in manchen Fällen nicht anschaulich genug sein. Das hängt zum einen vom Projekt selbst ab, aber auch von der Gruppe an Menschen, denen du es vorstellst ab. Hier heißt es ausprobieren und beobachten: Wie reagieren die Beteiligten? Musst du viel zusätzlich erklären? Tauchen Missverständnisse auf?

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 von Inhalten jeweils dargestellt werden soll. 

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 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 es. 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. 

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 machen, 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 auf der späteren Website gleich deutlich, ohne dass er überlegen muss, ob er durch Klick auf diese Elemente zu einem Artikel kommt oder nicht. 

Anmerkungen in Wireframes

Ausformulierte Hinweise im Wireframe können helfen, Funktionen, Design und Inhalt deines Entwurfs besser zu verstehen. Denn bei diesem Modell handelt es sich ja um einen statischen, sehr reduzierten Entwurf. Ohne weitere Hinweise, weiß der Kunde nicht, welche Schaltfläche interaktiv genutzt werden kann oder wo welcher Inhalt platziert wird. Und auch für Entwickler, Texter oder andere Beteiligte sind deine Anmerkungen hilfreich.

Folgende Aspekte kannst du in den Anmerkungen erläutern:

• Alle Elemente, die durch etwas bedingt werden (z. B. Checkboxen)
• Funktionsweisen und Ziele von Links und Buttons (auch Hover-Effekte & co.)
• Alles was aus Platzmangel weggelassen wurde (z. B. lange Dropdown-Elemente
• Funktionen mit geschäftlichen, logischen oder technischen Einschränkungen (z. B. Passwort-Länge)

So gestaltest du deine Anmerkungen im Wireframe

Um sinnvolle, übersichtliche Annotationen zu machen, solltest du sie kategorisieren, z. B. in „Inhalt“ und „Funktion“. Achte bei der Formulierung stets darauf, wer die Anmerkungen lesen und verstehen soll. Während einem Entwickler die bloße Info „Breadcrump“ reicht, kann ein fachfremder Kunde nicht so viel damit anfangen und benötigt eine kurze Definition.

Oft wird eine Nummerierung im Wireframe verwendet, die dann zu den entsprechenden Hinweisen verweist. Damit bleibt dein Entwurf reduziert und man läuft nicht Gefahr, den Überblick zu verlieren.

Was nicht in ein Wireframe gehört

Ein Wireframe ist KEIN konkreter Design-Entwurf!

Daher sollte alles, was diese Assoziation auslösen könnte, wegbleiben. Gerade für Wireframe-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 dem Designer in dir in den Fingern juckt. 

Ein anderer Punkt sind die Texte: „Lorem 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 dazu 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 einem meiner 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.

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.

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-Wireframes, sind aber in der Praxis nach wie vor sinnvoll. Die Ausarbeitung von High-Fidelity-Wireframes hängt dann vom eigenen Webdesign-Prozess ab.

Lies hier weiter:
Wireframes erstellen – mit diesen Methoden und Tools gelingt es

Überblick Wireframes im Webdesign

Wann sollte man Wireframes einsetzen?
UX-Design und Webdesign ist ein Prozess und Wireframing kann eine 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 Designs und Technik nachher auf diesem sprichwörtlichen Grundgerü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 erstellen. 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