Wireframe

Jeder Unternehmer benötigt heutzutage eine ansprechende und suchmaschinenoptimierte Webseite als digitale Visitenkarte. Doch ebenso wie bei einem Hausbau, muss das Fundament dieser Seite stark und zuverlässig sein, bevor der schöne Anstrich folgt.

Wireframe – Hilfsmittel zur Konzeption Deiner Website

Dabei dient der Wireframe als Grundgerüst und ist damit die Basis für die Erstellung und Gestaltung Deiner Webseite. In diesem Artikel bekommst Du einen umfassenden Überblick.

Was ist ein Wireframe?

Ein Wireframe bedeutet übersetzt „Drahtgerüst“ und meint den ersten schematischen und konzeptionellen Entwurf einer Webseite. Noch bevor die Webseite gestaltet, gecodet und betextet wird. In der frühen Planungsphase legt der Webdesigner ein solches Gitter über die spätere Webseite, um verschiedene Planquadrate der Seite zu definieren und zu gliedern. Der Wireframe ist also eine visuelle Darstellung der späteren Struktur und Funktion einer Webseite. Diese wird meist in verschiedenen Graustufen dargestellt. Farben würde in dieser Phase nur ablenken.
Bei einem Wireframe wird auf ein grafisch ansprechendes Design verzichtet. Der Fokus liegt auf der Beziehung zwischen den einzelnen Elementen, die später auf einer Webseite zum Einsatz kommen sollen. Zum Beispiel:

  • das Layout
  • das Navigationsmenü
  • die Art des Contents
  • interne Links
  • Formulare
  • Textblöcke
  • Blöcke für Grafiken, Logos und Bilder

Ein Wireframe ist also stark vereinfacht, reduziert und statisch. Trotzdem macht er aber die spätere Struktur der Webseite deutlich. Dabei bezieht er Farben, Bilder, Videos, Schriftarten und den tatsächlichen Content jedoch noch nicht mit ein. Allerdings wird bei einem Wireframe häufig schon ersichtlich, auf welche Areale der Webseite, die Aufmerksamkeit der Kunden gelenkt werden soll. Diese Bereiche werden meist dunkler oder größer dargestellt. Die Visualisierung kann mit Hilfe von HTML und CSS, mit speziellen Software-Tools oder auch nur mit Papier und Bleistift erfolgen. Falls Du allgemein Interesse am Aufbau einer guten Webseite hast und wissen willst was z.b. Website Marketing, Website Traffic, Website Design, Website Performance oder was ein Website Relauch ist dann schau in unseren Blogs nach.

Wer aufhört zu werben, um Geld zu sparen, kann ebenso seine Uhr anhalten, um Zeit zu sparen.

Henry Ford

Der Zweck von Wireframing

Der Wireframe bildet die Basis für die grundlegende Strukturierung einer Webseite. Bevor die eigentlichen Inhalte und Gestaltungselemente eingepflegt werden. Er bestimmt die Positionierung und die Größe der einzelnen Elemente der Page. Hierbei wird jedoch nicht nur das rohe Layout festgelegt. Durch die Anordnung der Elemente wird auch die zukünftige Interaktion zwischen User und Page simuliert. Hierbei geht es um Logik und Situationen Benutzer die einzelnen Funktionen verwenden können. Neben der Strukturierung dient der Wireframe also auch der Benutzerführung – aber eben nicht dem Design.
Somit ist der Wireframe als Kommunikationsgrundlage zwischen Designer und CEO beziehungsweise auch innerhalb des Entwicklerteams. So können eventuelle Unstimmigkeiten während der Planung ausdiskutiert werden. Wünsche können einbezogen und schnell im Wireframe abgeändert werden.

Am Online Marketing im Bereich Wissen, Ratgeber SEO, Wireframe arbeitet das Team von Kundenwachstum bestehend aus Christian, Patrick und Christian.

Weiterhin sind erste Tests möglich, welche die Benutzerführung und Usability checken. So können beispielsweise Linkbeziehungen, Klickpfade und Navigationen überprüft werden. Falls Du mehr über Links wissen möchtest wie Z.b. Link Building, Linkaufbau, Back Link ( Backlingaufbau, Backlink Test) oder Deep Links wissen möchtest dann schau in unserem Blog nach.

Die Ziele des Wireframes auf einen Blick:

  • Veranschaulichung von Struktur und Aufbau der Seite
  • Planung der logischen Benutzerführung
  • Grundlage für die Abstimmung im Team
  • Vorlage für die grafische Gestaltung

Dabei ist es jedoch immer wichtig, im Vorfeld das Ziel des Projektes festzulegen und zu bestimmen, welchen Zweck die Website überhaupt verfolgt. Nur so können alle Beteiligten schon im frühen Prozessverlauf hilfreiches Feedback geben.

Bring Dein Online-Marketing 2024 ein Level weiter!

90 Minuten gratis Beratung

SEO
Optimierung

Nachhaltig mehr Reichweite und Sichtbarkeit in Deiner Zielgruppe erreichen!

Content
Marketing

Direkt, optimiert und zielgerichtet Inhalte Deiner Zielgruppe präsentieren!

Marketing
Automation

Erstklassige Benutzererlebnisse für höhere Kundenbindung und Conversion!

Wie funktioniert ein Wireframe?

Wireframes dienen als eine Art Blaupause für den frühen Entwicklungsprozess einer Webseite. Der Auftraggeber oder CEO kann direkt entscheiden, ob der Entwurf seinen Vorstellungen entspricht. Der Designer hat eine Entwurf für das spätere Mockup. Und der Programmierer bekommt ein Listing mit allen wichtigen Elementen, Darstellungen, Formen und Funktionen an die Hand.
Alle beteiligten Personen haben in der Konzeptionsphase eine Grundlage, um über Möglichkeiten, Ziele und Grenzen zu diskutieren.

Dafür weist der Wireframe folgende Bereiche auf:

  • Layout: die konzeptionelle Struktur der Hierarchie und Verknüpfung einzelner Informationen dient dem zukünftigen visuellen Designkonzept
  • Webseite-Elemente: Header, Body, Footer, Formulare, Listen und interne Verlinkungen werden als Grundstruktur definiert und angeordnet
  • Content-Arten: Text als Lorem Ipsum und Grafiken als Kästchen dienen als Abschätzung der Layout-Proportionen
  • Benutzerführung: die Elemente werden so miteinander verknüpft, dass sie die kognitive Informationsaufnahme der User unterstützen und deren Nutzungsmuster aufgreifen

All diese Funktionsweisen haben schließlich eine Auswirkung auf die zukünftige Informationsstruktur der Webseite. Zwar dient diese als Diskussions-Grundlage zwischen dem Auftraggeber und des Webdesigners, doch die grundlegende Rolle spielt sie letztendlich für die Kunden. So ist die Usability, also die Benutzerfreundlichkeit ein wichtiger Aspekt für die Funktionsweise des Wireframes. Dieser wird so optimiert, dass die Aufnahme von Informationen durch die Strukturierung der Seite unterstützt, gelenkt und vereinfacht wird. Es soll in jedem Falle eine optimale Benutzerführung garantiert werden. Um diese zu gewährleisten und den Erwartungshaltungen Deiner Zielgruppe gerecht zu werden, kannst Du im Vorfeld Usability-Studien, wie Eye Tracking oder Befragungen durchführen.

Welche Arten von Wireframes gibt es?

Wireframes können dabei in ihrer Darstellung und der Vollständigkeit der Ausarbeitung von einzelnen Details variieren. Es gibt zwei grundlegende Arten von Wireframes:

  • Low Fidelity Wireframes: Diese Art von Wireframe reduziert alle verwendeten Elemente auf das Wesentliche. Dieser statische Wireframe ist meist der allererste Entwurf, der auf einer einzigen Seite definiert, welche Elemente sich überhaupt auf der Webseite befinden sollen. Dieses Schema ist noch sehr rudimentär und soll noch kein vollständiges Design abbilden.
  • High Fidelity Wireframes: Der dynamischen High Fidelity Wireframe ist dagegen ein Modellentwurf, welcher der späteren Form und Funktion der Seite schon viel näher kommt. Der Entwurf besteht hier meist schon aus mehreren Seiten, welche einer hierarchischen Ordnung und Organisationsstruktur folgen. Die interaktiven Verknüpfungen der einzelnen Seiten sind hier meist schon gesetzt, sodass eine Navigation bereits möglich ist. Trotzdem folgt auch dieser Ansatz nur einer grundlegenden Gliederung und grafische Elemente werden nur vereinfacht dargestellt. Auch wenn der dynamische Wireframe weniger Vorstellungskraft als der Low Fidelity Wireframe erfordert, befinden wir uns noch immer in der Konzeptionsphase.

Wie gestaltet man Wireframes?

Der Prozess des Wireframings verläuft meist in folgenden Schritten:

Bevor Du mit dem eigentlichen Wireframing beginnst, schau Dich am besten zuerst nach Webseiten um, die dir vom Aufbau gefallen und deren Strukturierungen logisch und benutzerfreundlich sind. Diese können Dir als Vorlage dienen. Auch beispielhafte Wireframes findest Du im Netz zur Genüge. Außerdem kannst Du Dir sogar Live-Websites als Wireframe-Versionen anzeigen lassen. Durch eine solche Recherche wirst Du erst einmal ein Gefühl dafür bekommen, wie Du mit Wireframes vielfältige Informationen auf dem Bildschirm organisieren kannst.

Ob professionelle HTML-Programmierung oder eine Skizze mit dem Bleistift – jeder Wireframing-Prozess ist individuell. Du solltest daher Deine ganz persönliche Vorgehensweise entwickeln, die Deiner Arbeitsweise entspricht und Dir gut gelingt. Vielleicht musst Du dazu auch erst einmal mehrere Varianten ausprobieren, bevor Du Deinen eigenen Weg findest.

Es gibt unzählige Tools und Web-Anwendungen, die Dir beim Erstellen eines Wireframes helfen. Auch hier kommt es wieder darauf an, welche Vorgehensweise am besten zu Dir, Deinen Skills und Deiner Arbeistweise passt.
Mit folgenden Beispiel-Tools lassen sich Wireframs erstellen und gestalten:

  • Axure
  • Adobe CS
  • Illustrator
  • Keynote
  • Powerpoint
  • Fireworks
  • Omnigraffle
  • Balsamiq
  • Mockflow
  • Hotgloo
  • Mockingbird
  • Adobe Photoshop
  • Indesign
  • ProtoShare
  • u.v.a.

Den nächsten Schritt beim Wireframing bildet die Erstellung der schematischen Darstellung des Gerüstes. Das sogenannte Grid ist das Raster, in dem Du die einzelnen Elemente Deiner Webseite positionieren und anordnen kannst. All die genannten Tools sind in der Lage, ein solches Raster selbst zu erstellen, doch auch online findest du genügend Vorlagen und Templates für solche Wireframe-Grids.

Nun kannst Du einzelne Kästchen und Boxen auf Deinem Raster platzieren. Dabei ist es wichtig, dass Du hier schon die Reihenfolge beachtest, in der Du Deinen Usern die Informationen präsentieren möchtest. Arbeite Dich am besten von links nach rechts beziehungsweise von oben nach untern durch. Versuch dabei immer so zu denken, wie Deine Kunden.

Wenn die Anordnung der Kästchen passt, werden diese mit Inhalten gefüllt. Hier gilt es nicht, den finalen Text oder echte Grafiken einzufügen, sondern mit grundlegenden Elementen zu experimentieren: mit Überschriften, Unterüberschriften, Schriftgrößen, Informationsebenen, Tags, Share- und Like-Buttons, Suchfeldern, Logos u.s.w. Achte auch hier wieder auf eine sinnvolle Strukturierung und teste am besten mehrere verschiedene Versionen aus. Stück für Stück wirst Du so sicher zur besten Anordnung finden. Stell Dir dabei immer die Frage, wie sich Deine Besucher von einem Inhalt zum nächsten bewegen sollen.

Um Deinen einzelnen Elementen Gewichtungen zu verleihen, kannst Du sie in verschiedenen Graustufen schattieren. Wohin soll die Aufmerksamkeit Deiner Besucher gelenkt werden? Graustufen reichen dabei erst einmal völlig aus, um Wahrnehmungsreihenfolgen zu testen oder besondere Akzente zu setzen. Dieser Schritt erleichtert Dir später den Design Prozess, in dem Du Dich um Farben kümmern kannst.

Wenn du möchtest, hast Du nun die Chance, nach und nach die Qualität Deines Wireframes zu erhöhen. Dazu kannst Du weitere Details oder Elemente hinzufügen, Originaltexte und Bilder einfügen oder die optimale Schriftgrößen schon bestimmen. So näherst Du Dich immer mehr der finalen Version an und kannst Dich bei der Erstellung der Webseite bestens an Deinem Wireframe orientieren.

Der letzte Schritt beinhaltet die Codierung des Grundgerüsts in das finale Layout. Hierzu kannst Du selbstverständlich einen professionellen Entwickler mit genügend Know-How in diesem Bereich beauftragen.

Am Online Marketing arbeitet das Team von Kundenwachstum bestehend aus Patrick.
Am Online Marketing arbeitet das Team von Kundenwachstum bestehend aus Patrick.
Patrick Roso

Gutes Webdesign besteht nicht daraus, einfach ein paar „Kauf“-Buttons auf der Website zu platzieren und dann zu erwarten, dass Deine Besucher kaufen werden.

Was sind die Vor- und Nachteile?

Die Erstellung von Website-Wireframes hat unheimlich viele Vorteile. So erleichtern sie in erster Linie natürlich die Arbeit des Web-Designers und sparen ihm viel Zeit. Er kann Änderungen ohne großen Aufwand vornehmen, häufigere Abstimmungen veranlassen und unterschiedliche Entwürfe der Webseite anfertigen, welche wiederum als Diskussions- und Entscheidungsgrundlage dienen. So bekommen auch andere Mitarbeiter im Unternehmen einen guten Einblick, was wo auf der Webseite stehen wird und welche Inhalte miteinander verknüpft werden. Gerade bei komplexen Pages mit vielen Unterseiten kann die weitere Konzeption sonst schnell unübersichtlich werden. Somit ist Wireframing das wichtigste Mittel, um eine Webseite im Vorfeld zu abstrahieren – und das funktioniert sogar ohne technisches Verständnis. Du vermeidest Fehlplanungen, die wiederum Aufwand, Zeit und Kosten bedeuten würden. So können Projekte in kürzerer Zeit und mit weniger Budget abgewickelt werden.

Doch es gibt auch einen Nachteil an der Erstellung eines Wireframes. Nach der Gestaltung des Drahtgerüstes fällt es oft schwer, den Blick wieder auf das große Ganze zu richten – weg von Boxen, Gittern und Kästchen. Die einzelnen Bereiche und Informationen müssen wieder zu einer Einheit zusammengefügt werden, sowohl optisch als auch inhaltlich. Dies fällt Dir aber leichter, wenn Du erste Entwürfe wieder vorskizzierst, den Wireframe zur Seite legst und dabei das „Kästchen-Denken“ mal außer Acht lässt.

Der Unterschied von Wireframe und Mockup

Wireframes werden häufig mit Mockups verwechselt. Auch ein Mockup ist der Entwurf einer Seite im Web. Allerdings enthalten Mockups schon visuelle Details, wie Bilder, Grafiken, Farben und Schriftarten – sie folgen also nach der Erstellung von Wireframes, welche vorerst die Struktur der Seite definieren. Mockups verschönern also die Wireframe-Skizze auf visuelle Weise und auch für diese findest du zahlreiche Mockup-Tools im Web.
Sowohl Wireframes als auch Mockups dienen jedoch der Planung und Koordination im Team. Beide werden verwendet, um erste Gestaltungs-Entwürfe einer Webseite zu präsentieren.
Die erste technische Umsetzung der ganz konkreten Website wird schließlich Prototyp genannt. Dieser liegt meist schon als Quellcode in HTML oder CSS vor.

Detaillierte Auswertung und direkte Optimierungs-
vorschläge, komplett kostenlos und unverbindlich.

Detaillierte Auswertung und direkte Optimierungsvorschläge, komplett kostenlos und unverbindlich.

Fazit

Wireframes verbessern die Qualität einer Webseite und erleichtern die Arbeit an dieser enorm. Durch solche Grundgerüste entsteht ein erster Eindruck von der grafischen Gestaltung, sowie der späteren Bedienbarkeit Deiner Seite.
Du solltest den Wireframe dabei immer als Experiment betrachten. Du kannst ihn immer wieder verschieben, verändern und anpassen. So lange, bis es zu Dir und Deinen Kunden passt. Teste verschiedene Tools und Arbeitsabläufe. Wenn Du so weit bist intuitiv weiterzuarbeiten, dann kannst Du das ganze Team mit einbeziehen. Dabei solltest Du immer wieder verinnerlichen, dass die Webseite auch Deinen festgelegten Zielen entspricht und benutzerfreundlich ist.
Ob Du dabei einen statischen oder dynamischen Wireframe erstellst. Ob Du diesen per Hand oder per Tool gestaltest. Oder ob Du direkt einen Grafik-Designer mit diesen Aufgaben vertraut machst. Das alles liegt dabei ganz bei dir und der Komplexität Deiner Seite.

Du hast Fragen zum Wireframe?
Hier findest Du passende Antworten!

Du möchtest noch mehr Wissen?

Weitere Tipps und interessante Artikel findest Du in unserer Ratgeber-Übersicht.

Beginnen Sie mit der Eingabe und drücken Sie Enter, um zu suchen