Wireframe

Das Gerüst für digitale Projekte

 

Was ist ein Wireframe?

Wireframes sind einfache Prototypen mit denen Designer das Grundgerüst einer Webseite oder Web-App gestalten. Der Wireframe ist ursprünglich ein Gitter (wie ein Drahtzaun), welches die Webseite in Planquadrate unterteilt. Im Designprozess bestimmt das Team, mit welchem Inhalt ein Quadrat später befüllt wird. Dadurch ergibt sich eine grobe Aufteilung der Webseite, zum Beispiel in Raum für Texte, Bilder, Buttons oder Flächen, die frei bleiben sollen. Ein Wireframe kann in etwa mit einer Architektenskizze beim Bau eines Hauses verglichen werden. Man weiß, welche Grundform das Haus hat, wo welche Räume sein sollen, wo die Versorgungsschächte liegen, aber noch nicht, welche Farbe das Parkett hat und wie genau der Kabelbaum für die Elektrik aussieht.

Wofür Wireframes da sind

Grundsätzlich beantwortet der Wireframe die Fragen:

  • Welche Hauptinhalte stehen auf der Seite?

  • Wo stehen welcher Inhalt und wie viel Raum nehmen die Inhalte ein?

  • Welche Grundregeln gibt es für die Nutzerinteraktion?

Unabhängig von späteren Farben und den ausgewählten Grafiken strukturiert ein Wireframe den Inhalt des späteren Endprodukts. Dadurch ergibt sich eine Hierarchie der Informationen. Wichtige Informationen sollten grundsätzlich viel Raum einnehmen und dort platziert, wo sie besonders viel Aufmerksamkeit auf sich ziehen. Die Hierarchie des Wireframes kann dann mit den Kommunikationszielen des Auftraggebers abgeglichen werden.

Statische und dynamische Wireframes

Es gibt aus technischer Sicht zwei Arten von Wireframes: statische Wireframes und dynamische Wireframes. Was sind jeweils die Eigenschaften?

Ein statischer Wireframe ist ein sehr früher Entwurf einer Webseite. Er definiert erstmal, welche Elemente auf der Webseite enthalten sein sollen. Der statische Wireframe ist noch ein einfaches Konzept. Inhalte und grafische Gestaltung sind noch unwichtig.

Ein dynamischer Wireframe ist schon komplexer. Der Prototyp umfasst bereits mehrere Seiten. Die Seiten sind geordnet und haben eine hierarchische Ordnung. Der Designer verknüpft die verschiedenen Seiten über Links. Dadurch kann auch die Navigation zwischen den Seiten getestet werden.  Häufig wird parallel auch ein Baum- oder Flussdiagramm erstellt, um die die Organisationsstruktur der Webseiten zu veranschaulichen.

Dennoch befinden wir uns auch bei dynamischen Wireframes immer noch in der Konzeptionsphase. Das Design spielt lediglich eine untergeordnete Rolle. Einzelne grafische Elemente werden nur vereinfacht dargestellt, da es lediglich um die grundlegende Gliederung eines Internetauftritts und seiner Websites geht. Bei Tests können Nutzer von einer zur anderen Seite navigieren und manchmal sogar die Suchfunktion verwenden

Für welche Produkttypen und in welchen Phasen werden Wireframes eingesetzt?

Heute wird Wireframe als Begriff vorwiegend bei der Konzeption und Gestaltung von Webseiten und Webapps eingesetzt. Also digitale Produkte, die zum Beispiel Navigationselemente, Logos, Suchfunktionen, Fußnoten und Menüleisten umfassen.

Wireframes haben den größten Nutzen in der frühen Phase der Entwicklung. Der Product Owner weiß, was er machen möchte. Das Entwicklungsteam steckt noch ab, in welche Richtung das Design später gehen soll.

Wenn der Wireframe abgenommen ist, kann das Entwicklungsteam im Anschluss z.B. eine Liste der notwendigen Elemente erstellen. Das Team weiß dann, welche Buttons oder Animationen entwickelt werden müssen. Weil aber noch keine visuellen Designs und detaillierte Interaktionen definiert sind, ist die Frage nach dem „wie“ noch unbeantwortet.

Mit Wireframes können Teams die Vollständigkeit einer Webseite überprüfen. Falls ein Element fehlt, können die anderen Element mit wenig Aufwand neu arrangiert werden bis wieder eine stimmige Gesamtstruktur hergestellt ist.

Wireframes werden eingesetzt, um das Risiko zu verringern, mit einem Projekt komplett in die falsche Richtung zu laufen. Projekte werden dadurch schneller und günstiger fertiggestellt.

Wann sollten Wireframes eingesetzt werden, wann eher nicht?

Aus gutem Grund werden Wireframes heute fast immer entwickelt, wenn Experten eine Webseite oder Web-App entwickeln. Sie eignen sich besonders in frühen Entwicklungsphasen und für den Austausch im Team, nicht für die isolierte Arbeit von Design-Emeriten.

Wireframes sind nicht gut geeignet, um detailliertes und realistisches Nutzerfeedback zur tatsächlichen User Experience einzuholen.

Einschätzung Wireframes

Nutzendimensionen

Eignung für Use Cases

Physische Produkte

Digitale Produkte

Prozesse und Services

Geschäftsmodelle

Plattformen

Zeitaufwand

niedrig

Anspruch

mittel

Was sind die Stärken von Wireframes?

Wireframes enthalten wenige Infos und wenige Details. Das heißt, die Produktion ist günstig machbar. Wenn Änderungen erforderlich sind, können diese ebenfalls für kleines Geld eingebaut werden. Es müssen nur Kästchen verschoben, vergrößert oder verkleinert werden und nicht viele Elemente neu programmiert oder gestaltet werden.

Der Fokus liegt klar auf der Struktur, dadurch verhindert der Designer, das Aufmerksamkeit zu früh auf Details wie Farben oder Animationen verschwendet wird. Bei großen Projekten ist es gerade für Laien schon schwer genug, über die Struktur nachzudenken. Zusätzliche Gimmicks überfordern Auftraggeber und Testnutzer häufig. Zuerst entscheidet man, was kommuniziert werden soll und mit welcher Struktur das am besten gelingt. Erst danach wird Energie für das Styling der Webseite aufgewendet.

Wireframes sind fast selbsterklärend und setzen keine technische Expertise voraus. Dadurch können alle Stakeholder mit dem Wireframe arbeiten und ihr Feedback einbringen.

Was sind die Schwächen von Wireframes?

Vereinfachung als größte Stärke ist gleichzeitig eine Schwäche von Wireframes. Kunden sind teilweise von Wireframes enttäuscht, weil sie mit mehr Feuerwerk rechnen. Wireframes transportieren nicht die Emotionen, die das spätere Nutzererlebnis auslösen wird. Das verlangt Auftraggebern viel Disziplin, eine hohe Abstraktionsfähigkeit und Vertrauen in den Designprozess ab.

Die Aufteilung des Produkts in einzelne Quadrate oder zusammenhängende Bereich verführt auch dazu, die einzelnen Teile später unabhängig voneinander zu designen. Der Designer muss später bewusst daran arbeiten, dass das Ergebnis wie „aus einem Guss“ wirkt und nicht wie ein Mosaik aus Planquadraten.

Wireframes sind nicht gut für Nutzertests. Feedback durch Nutzer wird vor allem mit der Frage: „Was denkst Du?“, und nicht mit der Frage „Wie fühlt sich das an?“ gesammelt. Vor allem bei statischen Wireframes kann man schlecht ausgehend vom Wireframe Rückschlüsse auf die spätere User Experience ziehen.

Wie viel Aufwand ist notwendig, um einen Wireframe zu erstellen?

4 – 8 Stunden. Mit viel Druck auch schon mal ein halber bis ganzer Tag 😊

Wer kann den Wireframe-Prototypen bauen?

Ausgestattet mit Stift und Papier kann theoretisch jeder Wireframes zeichnen. Praktisch sollte aber ein Web-/UX-/UI-Designer dabei helfen, den Prototypen auszuarbeiten. Nicht wegen der erforderlichen Handfertigkeiten, sondern weil eine gute Struktur zum Teil auch Erfahrungssache ist.

Wer ist beteiligt?

Wie bei allen Prototypen empfehlen wir ein Team aus Designern, Fachexperten und Repräsentanten der späteren Nutzer. Weil ein Wireframe einfach und schnell gemacht ist, können sich hier Auftraggeber noch stark einbringen und „selbst Hand anlegen.“

Mit welchen Tools werden Wireframes entwickelt?

Die Tools reichen von Stift, Papier und Lineal über allgemeine Tools für Webdesign bis zu speziellen Wireframe-Tools. Die populärsten Tools sind:

  • Balsamiq

  • Invison

  • MarvelApp

  • Axure

  • Sketch und Adobe XD

Sie brauchen Wireframes für Ihr Projekt?

Fordern Sie jetzt Informationen an!

Wo gibt es gute Beispiele für Wireframes?

Wozu noch mal schreiben, was schon mal jemand treffend formuliert hat? Deswegen empfehle ich Euch den Artikel „Wireframes by Top UX Designers​“ von Emma Drews.

Wie setzt man Wireframes so ein, dass sie den größten Nutzen bringen?

Wir haben vor allem drei Tipps. Der erste lautet, verschiedene Wireframes zu gestalten, die sich stark voneinander unterscheiden. Jeder Wireframe sollte in eine komplett andere Richtung gehen und alle Wireframes zusammen sollten den ganzen Lösungsraum abdecken. Hierdurch provoziert der Wireframe Dissenz über grundsätzliche Fragen. Noch mal: Ein Wireframe soll verhindern, dass das Entwicklungsteam in eine ganz andere Richtung denkt, als vom Auftraggeber oder den Nutzern erwartet. Es geht nicht darum, eine Idee im Kleinen zu optimieren. Damit die Richtung geändert werden kann, müssen die gezeigten Prototypen auch wirklich unterschiedliche Optionen sein.
Wenn mit dem Wireframe die Grundsatzfragen zu Struktur, Hauptinhalten und Nutzerinteraktion geklärt sind, werden die Details mit anderen Prototypen vertestet und verfeinert.
Deshalb lautet unser zweiter Tipp: Streitaxt statt Nagelfeile. Das heißt, das Design sollte wirklich grob bleiben und gar nicht erst zu Diskussionen über Details verleiten. Zusatzaufwand für mehr Details im Wireframe stiften kaum Mehrwert. Ein detaillierterer Wireframe macht es nur noch schwerer, eine Idee vollständig zu verwerfen und spart einem im nächsten Prototpying-Sprint, z.B. bei der Erstellung eines Mock-ups, keine Arbeit.
Erst wenn die Struktur des Wireframes von den Stakeholdern durch positives Feedback bestätigt wurde, sollte an Details gearbeitet werden.
Wir sehen aber, durchaus ein, dass es vor allem für Laien schwer ist, das potenzielle Feuerwerk hinter den Planquadraten zu sehen. Deshalb lautet unser dritter Tipp, Wireframes mit anderen Prototypen, wie z.B. einer mitreißenden Produktvision oder Moodboards zu verbinden. Die anderen Prototypen regen die Fantasie an und anhand der Wireframes kann ohne Enttäuschung über fehlende „Wow-Momente“ über die Struktur des Endprodukts diskutiert werden.

Was sollte man vermeiden, wenn man mit Wireframes arbeitet?

Stürmt nicht mit einem fertigen Wireframe in das Büro Eures Designers und beauftragt in damit, Euren Wireframes einfach mal zu illustrieren. Eure Wireframes sind nur eine mögliche Herangehensweise für Euer Problem oder Eure Produktvision. Es gibt möglicherweise Alternativen, die ihr nicht seht, ein Profi mit Talent und/oder Erfahrung aber schon. Kein Designer mit Selbstachtung möchte einfach als stumpfer Handlanger die Wireframes von anderen umsetzen. Ich persönlich würde auch nicht mit einer Bierdeckelskizze zu einem Architekten gehen und sagen: „Mach mir da einfach mal einen Bauplan und Ausschreibungsunterlagen draus.“ Ich würde eher nach einem Experten suchen, der meine Ideen aus der Perspektive eines Experten weiterentwickelt und dabei die Erfahrung aus anderen Projekten einbringt.

Verzichtet wirklich auf grafische Elemente. Farben, Bilder und Typografie lenken vom Hauptziel des Wireframes (Struktur und Co.) ab. Nutzt sinnvolle Texte und keine Lore-ipsum-Texte. Wireframes helfen dabei, die Informationen auf Eurer Seite zu strukturieren und zu priorisieren. Deshalb ist es fast unerlässlich, Näherungswerte für die späteren Inhalte schon im Wireframe zu verwenden. Sonst wird es extrem schwierig, die Hierarchie der Informationen mit sinnfreien Texten abzugleichen.

Missverständnisse im Zusammenhang mit Wireframes

Bei der Recherche für diesen Text sind wir häufig auf einen dreistufigen Prototyping-Prozess aus den Schritten Wireframe, Mock-up und Prototyp gestoßen. Das halten wir für Spökes. Für uns sind Wireframes und Mock-ups aber Teilmengen der Gesamtmenge „Prototypen“. Jeder Wireframe ist ein Prototyp, aber nicht jeder Prototyp ist ein Wireframe.

Über den Autor

Daniel Herrmann

Ehemaliger Business-Kasper | Ausgewildertes Spielkind

Ich bin Game Thinker, Consultant und fanatischer Anhänger der Theorie Y. Meine Frau findet mich unfreiwillig komisch. Maximal 2 von 100 Menschen werden in Gesprächen mit mir dümmer.

Co-Founder von Monokel Consulting, Serious PlayScape und RokaEnergy.

Mehr zum Thema Game Thinking lesen:

parkinsonsche Gesetze

parkinsonsche Gesetze angst vor der digitalen transformation

Schon einmal gefragt, warum die Mitglieder des Vorstands so ungern über die digitale Transformation reden, aber dafür umso lieber über das Buffett auf der Weihnachtsfeier? Oder in diesem Jahr darüber, ob die wegen Corona eingesparten Kosten für das Buffett an die Mitarbeiter ausgezahlt werden?
Der Verwaltungsforscher Cyril Northcote Parkinson hat schon vor Jahrzehnten festgestellt, dass Entscheidungsgremien länger über Trivialitäten reden, als über komplexe Sachverhalte. Je weniger finanzielle Auswirkungen ein Thema hat, desto länger dauert die Diskussion darüber.

Weiterlesen
Thesen trollen trompeten

thesen trolllen und trompeten #1 – Matthias Lenssen

Thesen, Trollen & Trompeten ist ein Austauschformat zwischen klugen Köpfen und mir, Daniel Herrmann.

Mein erster Dialogparnter ist Matthias Lenssen.

Er schreibt mit mir über Purpose, Coaching, Design Thinking und darüber wie man es mit seinem Gewissen vereinbaren kann, Geld von Konzernen zu nehmen, obwohl man sich eigentlich eine enkelfähige Welt wünscht.

Weiterlesen
hirnflattern 5 titel

hirnflattern-nummer-5-Thors-Hammer-Sap

Thor hatte seinen Hammer, Captain America seinen Schild, Jordan seine Nike’s und Felix Baumgartner hatte eine Dose Red Bull.

Eure Mitarbeiter haben im Homeoffice SAP auf einem alten Notebook.

Müssen Werkzeuge für Wissensarbeiter so schlecht sein?

Weiterlesen