Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
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

Inhaltsverzeichnis

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

shortways communications

München

Logo der Online Solutions Group. Motto: Your Link to Success.

Online Solutions Group

München

Trend Maker Marketing Agentur Regensburg Logo

Trend Maker Marketing – Webdesign Agentur Regensburg

Regensburg

Arit Services Logo.

ARIT Services GmbH

Laatzen

Logo für Opus Marketing aus Bayreuth. Links zu sehen ist eine schwarze Schachfigur, der schwarzer Turm. Daneben in Großbuchstaben die Buchstaben OPUS.

OPUS Marketing

Bayreuth

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.

→
SEO Agentur

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.

→
Foto der Inhaberin einer Social Media Agentur, umrahmt von einem Laptop und zur Linken zwei Bewertungen der Agentur.
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.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen 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

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

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 ↑