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.

dms 32e0b4d7ced58d9c75842852b19c7d66
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.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.

1 3 4
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

Superbowl statt Börsenparkett: Wie Squarespace von einer One-Man-Show zum Millionen-Startup wurde
Superbowl statt Börsenparkett: Wie Squarespace von einer One-Man-Show zum Millionen-Startup wurde

Andere hätten die Firma wohl längst aufs Börsenparkett geschubst. Anthony Casalena aber, CEO des erfolgreichen US-Startups Squarespace, hat anderes im Kopf: Er wirbt für sein Produkt lieber in … » weiterlesen

Kennst Du schon unser t3n Magazin?

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