Zum Inhalt wechseln
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
  • Beste Agentur finden
    • 3D-Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online-Marketing-Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
Menü
  • Beste Agentur finden
    • 3D-Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online-Marketing-Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt

< dr. web > » UX Design » Was ist eigentlich … ein Wireframe?

Was ist eigentlich … ein Wireframe?

  • Aktualisiert am 23. Januar 2022
  • von Markus Berger
  • UX Design
  •  

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.

Es kam zu einen Fehler. Wahrscheinlich ist das unsere Schuld. Schreiben Sie uns gerne an hallo@drweb.de
✓ Sie haben sich erfolgreich zum Dr. Web Newsletter angemeldet

Dr. Web Newsletter

Tipps, Tricks, Tools und Ratgeber. Einmal im Monat frisch gedruckt in deinem Mail-Postfach.

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

Inhaltsverzeichnis

Lust auf mehr?

Webdesign: Die Basics guter Informations­architektur

Lineare Informationsarchitektur bezeichnet eine Konstruktion, in der es stets nur einen vordefinierten Weg zum Ziel gibt. Nutzer in linearen Systemen arbeiten Aufgaben entlang der vorgegebenen Pfade ab und können nur so und nicht anders zum Ziel zu gelangen. Diese Vorgehensweise ist aus Sicht des Designers nicht uninteressant.

Vollkommen geschmacklos: So stellst du fest, ob ein Design gut oder schlecht ist

Dein eigener Geschmack ist ein schlechter Ratgeber in der Frage der Beurteilung, ob ein Design nun gut oder schlecht ist. Lass uns da mal objektiver ran gehen.

Design: Was für Sprach-Interfaces der Zukunft wichtig ist

Seit fast zwei Jahren besitze ich einen Amazon Echo. Das Gerät zeigt mir seitdem eindrucksvoll, wie limitiert heutzutage Sprach-Interfaces sind. Da muss sich was tun. Amazon hat das schon erkannt und statt einer Verbesserung des Sprachinterfaces zwei Echo-Geräte mit Bildschirm ins Rennen geschickt.

Schreibe einen Kommentar Antworten abbrechen

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

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

Für Unternehmer: Finden Sie Ihre Agentur in…

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

Agentur nach Schwerpunkt finden

  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden
  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden

Aus unserem Magazin

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Kunden-Login
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Kunden-Login
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen