BTK-FH Logo

Informationsarchitektur

Wireframes

Heutiges Thema sind Wireframes. Wireframes sind eine schematische bzw. funktionale Darstellung eines Interfaces. Eine gängige deutsche Übersetzung existiert nicht, manchmal liest man Drahtmodell bzw. Drahtgittermodell. Hintergrundinformationen zu Einsatz, Vor- und Nachteilen findet ihr z.B.bei Webkrauts oder bei eResult. Interessant auch der Artikel von ThinkVitamit “20 steps to better wireframing“.

Wireframes können mit einer Software (s.u.) erstellt werden, per Hand gemalt werden oder mit Klebezetteln zusammengesetzt werden. Eine umfangreiche Sammlung von Wireframes aus der Praxis findet ihr bei FlickR unter I love Wireframes.

Standardsoftware zur Erstellung von Wireframes sind:

Mit diesen Programmen lassen sich Sitemaps, Flow-Charts und Wireframes erstellen und exportieren.

Professionelle Unternehmen nutzen zunehmend Axure (PC und wahrscheinlich auch bald Mac).  Dieses Programm beherrscht zusätzlich in der neuesten Version die Möglichkeit, remote in verteilten Teams an den Entwürfen zu arbeiten. Die Möglichkeiten der “Programmierung” (Login, Übergabe von Daten z.B. bei Einkaufsprozessen etc.) sind wesentlich ausgereifte. Und man kann die Wireframes während des Erstellens leicht verlinken und so schnell einen Prototypen zum Testen generieren. Leider sind die Lizenzen entsprechend teuer.

Jan Jursa von T-Online MMS (ihr kennt sicher seinen Blog The Hot Strudel) wird uns voraussichtlich am 18.6. Axure persönlich vorstellen.

Nachtrag von Sebastian Waters (Danke!): Und für eine Erweiterung der Linkliste bzgl Wireframes:

http://wireframes.linowski.ca/ Wireframe-Magazine

http://konigi.com/notebook/wireframes-wicked-slides

http://www.uxbooth.com/blog/complete-beginners-guide-to-information-architecture/#resources

speak up

Add your comment below, or trackback from your own site.

Subscribe to these comments.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*Required Fields