Wireframes (web based tools)

Beim Thema Website-Konzeption taucht immer wieder eine Frage auf: Wireframes? Sinnvoll oder Zeitfresser?

Ich sage: “Definitiv sinnvoll!” Wireframes sind nützliche Hilfsmittel um komplexe Strukturen und Sachverhalte zu veranschaulichen und anderen zu erläutern. Das kann hilfreich sein für Präsentationen beim Kunden, um in der Konzeptionsphase den Überblick zu behalten oder um in der Entwicklungsphase genaue Vorgaben und Ideen zu visualisieren und festzuhalten. Wireframes bilden eine Schnittstelle zwischen Konzeption und Design/Umsetzung. Genaue Aufgaben und Funktionen können definiert und im Nachhinein überprüft werden.

Im Gegensatz zu einem Mock-Up, das schon Farben, Look&Feel und Design-Elemente enthalten kann, wird bei einem Wireframe in der Regel nur die Struktur, das “Drahtgitter”, einzelner Seiten definiert. Das heißt, die Anordnung, die Positionierung im “Raum”, Reihenfolgen werden skizziert und diskutiert. Eine genaue Definition, wie ein Wireframe auszusehen hat, gibt es allerdings nicht, so können Wireframes sich im Detailgrad teilweise stark unterscheiden.

Ich habe mich in lezter Zeit verstärkt mit Wireframes und dem Erstellen solcher beschäftigt. Dabei habe ich einige hilfreiche Tools und Quellen gefunden, die ich euch nicht vorenthalten möchte:

Wie für fast alle Aufgaben gibt es mittlerweile auch einige Tools, um Wireframes online zu erstellen. Ich habe acht interessante davon rausgesucht.

Wireframe.cc (kostenlos)

Ganz aktuell ist Wirefram.cc ein sehr einfaches und hübsches browserbasiertes Tool.

hotgloo

hotgloo-wireframes

Pidoco

pidoco-wireframe-tool

Mockingbird

mockingbird-wireframes

iPlotz

iplotz-online-wireframe

Gliffy

gliffy

MockFlow

ProtoShare

Lumzy (kostenlos)

Solidify (30 Tage Trail, dann ab $19/Monat)

Posted by

My name is Niclas and I'm an UX Designer from Hamburg, Germany, currently working at Geometry Global. You can follow me on Twitter and Facebook.