Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Beste Agenturen
  • Magazin
  • Beste Agenturen
  • Magazin
Dr. Web Logo seit 1997.
  • Kontakt
  • Anmeldung
  • Newsletter
  • Beste Agenturen
  • Magazin
Menü
  • Beste Agenturen
  • Magazin
Suche
Agenturpartner werden →
Dr. Web » UX Design » Was ist eigentlich … ein Wireframe?

Was ist eigentlich … ein Wireframe?

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Keine Kommentare
Lesedauer: 3 Minuten
  • von Markus Berger
  • 17. September 2009

Ein Wireframe ist ein Gitter, das der Webdesigner in der Planungsphase über eine Webseite legt, um zu definieren, in welchem Planquadrat sich unterschiedliche Bereiche einer Website befinden. Durch einen Wireframe gliedert man so Bereiche mit Text und solche mit Abbildungen. Mit Hilfe von Wireframes werden auch die Areale auf Webseiten definiert, die die meiste Aufmerksamkeit des Betrachters oder Lesers bekommen sollen. Wichtige Bereiche sind deshalb größer.

Ein Wireframe wird zur grundlegenden Strukturierung einer Webseite eingesetzt und untergliedert eine Internetseite unabhängig von Grafiken oder Farben.

Die ursprüngliche Bedeutung

Im eigentlichen Sinne handelt es sich bei einem Wireframe um ein Drahtgitter, das die Konturen bestimmt. Ursprünglich ging es darum, mit Hilfe einer Drahtfigur als Schneiderpuppe Formen anzupassen. Heute hat man den Begriff auf das Internet übertragen. Das CAD Computer Aided Design war das erste, das mit Hilfslinien arbeitete, um dreidimensionale Objekte mittels eines Wireframes darzustellen.

Der Wireframe in der Website-Erstellung

Heute wird Wireframe als Begriff vorwiegend bei der Konzeption und Gestaltung von Webseiten verwendet. Als Wireframe oder Mock-up werden Entwürfe von Internetseiten in der Entwicklungsphase bezeichnet. Bevor die eigentlichen Inhalte eingestellt werden, wird mit Hilfe von Wireframes die Struktur der Webseite definiert. Dazu gehören bestimmte Inhaltsbereiche ebenso wie Navigationselemente, Logos, Suchfunktionen, Fußnoten, Menüleisten und vieles mehr. Technisch unterscheidet man zwei unterschiedliche Arten von Wireframes: den statischen und den dynamischen. Wie unterscheiden sich diese?

Der statische Wireframe

Als statischen Wireframe bezeichnet man einen Erstentwurf einer Webseite, der grundlegend definiert, welche Elemente auf der Webseite enthalten sein sollen. Hierbei handelt es sich um ein rudimentäres, konzeptionelles Schema. Inhalte und Design spielen in dieser Phase noch keine Rolle.

Der dynamische Wireframe

Anders ist dies beim dynamischen Wireframe. Hierbei besteht der Entwurf bereits aus mehreren Seiten, die auch schon in eine hierarchische Ordnung gebracht wurden. Die Verknüpfung zwischen den Seiten funktioniert bereits, so dass Funktionen wie beispielsweise Suche oder Navigation schon getestet und überprüft werden können. Ein so genannter Navigationsbaum oder ein Flussdiagramm geben Aufschluss über die Organisationsstruktur der Webseiten.

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.

Was kommt nach dem Wireframe?

Hat man sich auf die Struktur einer Webseite verständigt und will diese übernehmen, werden die Wireframes weiter bearbeitet. Nun werden Logos eingebunden, das Design entworfen, Inhalte formuliert und Farben festgelegt. In einem ersten Schritt verwendet der Webdesigner für den Entwurf in der Regel nur Graustufen. Sie reichen aus, um Wahrnehmungsreihenfolgen zu testen und gezielt Akzente zu setzen. Textabschnitte werden mit den berühmten Lorem ipsum Passagen versehen, um zu demonstrieren, wie die fertige Seite später aussieht.

Vorteile

Wireframes haben viele Vorzüge. Zum einen erleichtern sie es dem Webdesigner, Webseiten zu strukturieren. Andererseits bieten sie durch ihre Abstraktion gerade auch dem Laien eine gute Vorstellung davon, was wo auf einer Webseite stehen soll und welche Inhalte mit welchen anderen verknüpft werden sollen.

Bei einem Webauftritt mit vielen Unterseiten wird die Struktur ansonsten nämlich sehr komplex und unübersichtlich, so dass es schwer fällt, die Konzeption klar und verständlich zu halten. Da dies dem Leser oder Internetbesucher ebenso ergeht, ist die Phase der Konzeption und Strukturgebung besonders wichtig. Wireframes sind das wichtigste Abstraktions-Hilfsmittel bei der Gestaltung von Webseiten. Sie sind selbsterklärend und setzen keinerlei technisches Verständnis voraus.

Für den Webdesigner bedeutet dies eine enorme Zeitersparnis. Im Unterschied zum traditionellen Layout kann er nun in früher Phase bereits Änderungen ohne großen Aufwand vornehmen. Er kann auch viel leichter unterschiedliche Entwürfe einer Webseite anfertigen. Auf Kundenseite sorgt die Anschaulichkeit der Wireframes dafür, dass Entscheidungen bezüglich des Layouts und Designs sicherer und schneller getroffen werden. Aufwändige Fehlplanungen werden vermieden und sparen nicht nur Planungs- und Abstimmungszeit, sondern auch hohe Kosten ein.

Sicherheit für den Webdesigner

Für den Webdesigner bedeutet dies auch, dass er viel häufiger Abstimmungen mit dem Auftraggeber vornehmen kann. Damit ist das Risiko, in eine falsche Richtung zu planen, fast ausgeschlossen. Der Planungsprozess geht zudem sehr viel schneller in einen konkreten Layoutprozess über. Projekte können so in kürzerer Zeit abgewickelt und fertiggestellt werden.

Nachteile

Einen einzigen Nachteil haben Wireframes: Aufgrund der Darstellung innerhalb eines Planungsgitters wird man häufig dazu verleitet, in Kästchen zu denken. Für die Grundstruktur und den Entwurf einer Webseite ist dies absolut notwendig. Danach aber muss man wiederum den Blick auf das Ganze lenken und die einzelnen Bereiche zu einer optischen und inhaltlichen Einheit führen.

Kunden haben zudem die Eigenschaft, sich bei Wireframes häufig mit Kleinigkeiten aufzuhalten, die den Planungsprozess verzögerrn. Dies ist aber auch bei dem klassischen Layout der Fall und insofern kein Argument, das gegen Wireframes spricht. Wer einmal mit Wireframes gearbeitet hat, egal, ob als Webdesigner oder auf Kundenseite, wird sie nicht mehr missen wollen.

Markus Berger

Markus Berger

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

Khoa Nguyen SEO München Logo

Khoa Nguyen – Online Marketing Freelancer

München

hw brand experience logo.

H&W // Brand Experience

Schwäbisch Gmünd

Dunkel Design | Webdesign Grafikdesign Logodesign

Köln

Evergreen Media Innsbruck Logo.

Evergreen Media®

Innsbruck

Agentur novomyo Logo.

novomyo – Online Marketing Agentur

Hamburg

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Digitalagentur finden

Wir unterstützen Sie bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
Junger Mann, der in einer SEO-Agentur arbeitet arbeitet und in die Kamera lächelt.
SEO

SEO Agentur finden

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Inhaber einer WordPress-Agentur, am Tisch sitzt und in die Kamera schaut.
WordPress

WordPress Agentur finden

Wir unterstützen Sie bei der Auswahl Ihrer WordPress Agentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.
Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑