Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » UX Design » Was ist eigentlich … ein Wireframe?

Was ist eigentlich … ein Wireframe?

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Keine Kommentare
Lesedauer: 3 Minuten
  • von Markus Berger
  • 17. September 2009
Bookmarke mich
Share on pocket

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.

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Markus Berger

Markus Berger

Agenturpartner

Wee Media | Webdesign Agentur

Dernbach

PRIMA LINE

Berlin

pictibe – Werbeagentur & Marketingagentur

Köln

SEOlist.IO Frankfurt – SEO-Spezialist & SEO-Freelancer

Frankfurt am Main

Evergreen Media

Innsbruck

Alle Agenturpartner

Jobs

System Engineer – Managed Service

Karlsruhe

Senior Online Marketing Manager

München

Webtexter für SEO Agentur

Salzburg (Österreich)

Online Marketing Manager

München

Frontend Development & Project Management

Remote

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

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.

 →   

Mal was anderes: Mondrianismus im Webdesign

Kennst du Mondrian? Nein, wirst du vermutlich sagen. Das ist unwahrscheinlich. Zumindest sein Kunststil wird dir bekannt vorkommen. Schau selbst. Wie hilfreich war dieser Beitrag?

 →   

Faktor Mensch: Warum gibt es so viel schlechtes Design?

Schlechtes Design ist überall, gutes Design immer noch Mangelware. Woran liegt das? Gibt es nicht genügend Experten? Wird von irgendwoher fehlgesteuert? Liegt es in der

 →   

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.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

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

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.