Vorheriger Artikel Nächster Artikel

Ein Bild sagt mehr als tausend Worte: Website-Projekte mit Wireframes visualisieren

Aus dem
t3n Magazin Nr. 17

09/2009 - 11/2009

Jedes Website-Projekt beginnt mit der Konzeptionsphase, in der Ideen, Inhalte und Funktionen entwickelt werden. Doch wie erklärt man Kunden und dem eigenen Team das Geplante am besten? Ein bewährtes Hilfsmittel sind Wireframes, die das Veranschaulichen komplexer Sachverhalte erleichtern.

Von Hand gezeichnete Wireframes haben einen entscheidenden Vorteil: Für den Betrachter ist sofort offensichtlich, dass diese kein Designvorschlag sind.
Von Hand gezeichnete Wireframes haben einen entscheidenden Vorteil: Für den Betrachter ist sofort offensichtlich, dass diese kein Designvorschlag sind.

Ähnlich einem Drahtgittermodell in der 3D-Produktion oder einem „Mock-up" in der Gestaltung stellen Wireframes als konzeptionelle Prototypen einer Website die verschiedenen Elemente wie Navigation und Inhaltsbereich abstrakt dar. Je nach Projekt kann der Detailgrad eines Wirframes von sehr oberflächlich bis hin zu ausformulierten Texten und Funktionen reichen. Damit sind Wireframes gut geeignet, um sich bereits in einem sehr frühen Projektstadium ein Bild der Funktionsweisen zu machen, ohne sich in Detail- und Geschmacksdiskussionen zu verlieren.

Verschiedene Arten von Wireframes

Man unterscheidet statische und dynamische Wireframes voneinander. Statische Wireframes sind schematische Darstellungen der Website, die mit wenig Zeitaufwand direkt per Hand gezeichnet oder mit Hilfe eines Tools am Computer erstellt werden können.

Dynamische Wireframes sind interaktiv und bestehen aus mehreren, zu einem Prototyp verbundenen Wireframes. Dies erlaubt es, die Funktion und das Zusammenspiel von Navigation und Inhalt weit vor der technischen Umsetzung zu testen. Abhängig von den darzustellenden Funktionen kann die Erstellung von dynamischen Wireframes viel mehr Zeit in Anspruch nehmen, als es bei der statischen Variante der Fall wäre.

Die Vorteile

Mit Wireframes lassen sich komplexe Informationen wie Klickpfade oder detaillierte Funktionen schnell visualisieren. Durch die abstrakte Darstellung werden die komplexen Vorgänge der späteren Website auf das Wesentliche reduziert, um die eigentliche Idee hinter der Website zu erklären. Dies ermöglicht es allen Beteiligten, bereits vor der Designphase einen konkreten Eindruck der späteren Website zu bekommen. Besonders Kunden, die in der Regel nicht über das nötige Fachwissen verfügen, hilft die visuelle Darstellung der Funktionsweise enorm. Sie können sich die zukünftige Website anhand der Wireframes besser vorstellen und sich dadurch besser in das Projekt einbringen.

Hänge dich jetzt an unsere Facebook-Seite und sichere dir deinen #Wissensvorsprung!
t3n gefällt mir!
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
2 Antworten
  1. von Björn am 25.11.2009 (13:46 Uhr)

    Interessanter Überblick übers Thema Wireframing.

    Antworten Teilen
  2. von WD Becvar am 27.11.2009 (12:57 Uhr)

    Hallo,

    Toller Artikel, muss inhaltlich voll und ganz zustimmen! Endlich wird das Thema Konzeption von Webprojekten mit Hilfe von Wireframes auch in Deutschland medial aufgearbeitet. Möchte natürlich die Gelegenheit nutzen um auf HotGloo hinzuweisen.

    HotGloo ist eine webbasierte Wireframe Anwendung und wurde speziell von Informationsarchitekten für Informationsarchitekten designt um in frühen Projektphasen konzeptionelle Prototypen online zu erstellen.

    Vorteile:
    webbasiert (daher Plattformunabhängig), hohe Interaktivität, Echtzeit-Kooperation + Chat Funktion, individuelle Template Gestaltung, Simulation verschiedener Zustände mit Hilfe von Status und Viewstacks, PNG/PDF Export und momentan als gratis Betaversion zum Vorab-Test verfügbar.

    Wichtig ist auch zu erwähnen, dass wir sehr User fokussiert arbeiten, Feedback sehr ernst nehmen und HotGloo täglich verbessern um die Usability noch stärker in den Mittelpunkt zu rücken.

    Wir sich mal einen Überblick verschaffen möchte und HotGloo testen will:
    http://www.hotgloo.com

    Viel Spaß beim Wireframen!

    Gruß,
    Wolf Dieter
    @HotGloo

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Ähnliche News
t3n-Aktion: Jetzt Abo mit Buch „Praxiswissen WordPress“ sichern!
t3n-Aktion: Jetzt Abo mit Buch „Praxiswissen WordPress“ sichern!

WordPress überzeugt seit Jahren durch seine einfache Handhabung, doch genau dieser Vorteil birgt auch ein hohes Fehlerpotential. Wie du dein Blog- oder Website-Projekt korrekt in die Praxis umsetzt, … » weiterlesen

Responsive Webdesign für lau: Diese Website bündelt mehr als 500 Templates
Responsive Webdesign für lau: Diese Website bündelt mehr als 500 Templates

Du willst deine Website mit einem Responsive Webdesign versehen oder eine neue damit launchen? Dann solltest du einen Blick auf W3Layouts werfen. Die Website bündelt über 500 kostenlose … » weiterlesen

Die Geschichte der Icons: Eine spannende Design-Reise durch 4 Jahrzehnte
Die Geschichte der Icons: Eine spannende Design-Reise durch 4 Jahrzehnte

Ein Bild sagt mehr als tausend Worte – komisch eigentlich, dass es 40 Jahre gedauert hat, bis Computer eine grafische Oberfläche spendiert bekamen. Ein Design-Projekt erzählt jetzt die spannende … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?

t3n 40 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen