Drücke die Tasten ◄ ► für weitere 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.

1 3 4
Autor:
12 Shares bis jetzt –Dankeschön!

Bewerten
VN:F [1.9.22_1171]
5 Antworten
  1. von Fundstücke und Lesenswertes: Wireframes… am 25.11.2009 (12:30Uhr)

    [...] Website-Projekte mit Wireframes visualisieren Autor: Oliver Annen Quelle: t3n Magazin [...]

  2. von Björn am 25.11.2009 (13:46Uhr)

    Interessanter Überblick übers Thema Wireframing.

  3. von WD Becvar am 27.11.2009 (12:57Uhr)

    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

  4. von FRONTAND » Archiv » Wirefram… am 09.01.2010 (19:02Uhr)

    [...] t3n.de gibt es einen guten Artikel zum Thema Wireframes, der Generelles, Vor- und Nachteile [...]

  5. von Linkdump for 02. Februar 2010 Links syna… am 03.02.2010 (08:07Uhr)

    [...] Ein Bild sagt mehr als tausend Worte: Website-Projekte mit Wireframes visualisieren » t3n Maga... – (Tags: Wireframe dev Webdesign ) [...]

Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Ähnliche News
Kickstarter-Projekt für mehr Effizienz: 372 Photoshop-Shortcuts auf einer Tastatur
Kickstarter-Projekt für mehr Effizienz: 372 Photoshop-Shortcuts auf einer Tastatur

In Photoshop lässt sich vieles per Shortcut erledigen, die aber nicht immer leicht zu behalten sind. Sorin Neica will mit Shortcut-S, einer Shortcut-Tastatur, Abhilfe schaffen. Das Projekt soll... » weiterlesen

Pinguin 2.0: Google rollt Algorithmus-Update aus [Update]
Pinguin 2.0: Google rollt Algorithmus-Update aus [Update]

Google hat Pinguin 2.0 weltweit ausgerollt, bestätigt Matt Cutts. Das Algorithmus-Update richtet sich insbesondere gegen Blackhat-Techniken wie Spamlinks und Cloaking. Im englischsprachigen Raum... » weiterlesen

10 SEO-Prognosen von Google-Guru Matt Cutts [Video]
10 SEO-Prognosen von Google-Guru Matt Cutts [Video]

Woran arbeitet Google? Was erwartet die SEO-Szene in den kommenden Monaten? Diese und ähnliche Fragen beantwortete Matt Cutts, Chef des Webspam-Teams von Google, am vergangenen Montag in einem rund.. ... » weiterlesen

Kennst Du schon unser t3n Magazin?

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