Die Herangehensweise an ein neues Web-Projekt fällt oft unterschiedlich aus. Rasch nehmen erste Entwürfe im Kopf Gestalt an. Doch statt sofort in die Produktions- und Design-Phase zu starten, kann es nützlich sein, einen Prototyp der Website mittels Wireframes zu erstellen. Der Kunde benötigt keinesfalls möglichst zeitnah ein grafisches Ergebnis. Vorab beginnen Planung und Konzeption. Dem Design widmen wir im späteren Projektverlauf Aufmerksamkeit.
Viele Projekte scheitern, wenn grundlegende Planungen nicht ausreichend durchgeführt werden. Meist sind viele Änderungen während der Umsetzung dafür verantwortlich. Irgendwann ist der Zeitpunkt erreicht, wo das Ursprüngliche Konzept keinen oder nur noch einen geringen Einfluss auf das Projekt ausübt.
Wireframes unterstützen Planung und Konzeption
Abhilfe schaffen hier Wireframes, mit dessen Hilfe du ein Projekt gerade in der Anfangsphase konzeptuell durchplanen kannst. Die Ideen werden auf einfach Weise dokumentiert.
Mittels eines Wireframes behältst du die Orientierung und kannst ein Projekt für die Design-Phase vorbereiten. Dadurch bist du noch nicht dem Aufwand der grafischen Umsetzung ausgeliefert. Content-Boxen, Buttons und Elemente können schnell angelegt, bei Bedarf modifiziert und neu positioniert werden. Bei einigen Tools besteht die Möglichkeit, Links anzulegen und ein komplettes Klickmodell einer Website zu erzeugen. Außerdem kann dem Kunden ein fertiger, klickbarer, Prototyp der Website präsentiert werden. So erhältst du im Vorfeld einen ersten Eindruck über die Bedienbarkeit der Website.
Ansicht eines typischen Wireframes einer Startseite mit Slider und Content-Boxen.
Auch wenn teilweise die Möglichkeit besteht, Wireframes mit Grafiken und Bildern anzureichern, solltest du hiervon Abstand nehmen. Es könnte sich schnell ein falsches Bild im Kopf des Kunden einprägen, da es sich aus einer Vermischung von Layout-Elementen und echtem Inhalt handelt. Der Fokus liegt hier ausschließlich auf Layout und Bedienung. Die bunten Bildchen kommen später.
Lohnender Aufwand
Der Aufwand eines solchen Prototyps steht dem Nutzen später in nichts nach. Zum einen erhältst du wertvolle Informationen über die Bedienbarkeit und das Layout der Website. Zum anderen bildet dies die Grundlage für sämtliche weiterer Prozesse des Projektes. Hierauf kann sich später berufen werden.
Wireframes sind äußerst hilfreich und müssen nicht zwingend in umfangreicheren Projekten eingesetzt werden. Auch für kleinere Web-Projekte kann sich der Einsatz eines solchen Tools lohnen.
Hier ein paar Links zu Wireframing-Tools, mit denen ich Erfahrung sammeln konnte:
Axure
Bei Axure handelt es sich um eine umfangreiche Desktoplösung, mittels dessen vollständige Klickmdelle erstellt werden können.
Link: www.axure.com
Pencil Project
Ebenfalls als Desktopanwendung erhältlich ist das Tool Pencil Project. Hierbei handelt es sich um ein Open Source Projekt. Zusätzlich gibt es dieses Toll als Firefox Add-On.
Link: http://pencil.evolus.vn
Pidoco
Ein Webbasiertes Wireframing-Tool. Mit Unterstützung für die Zusammenarbeit bietet diese Software gute Möglichkeiten für teamorientiertes Arbeiten.
Link: https://pidoco.com/de
