Oliver, seit August 2007 bei SinnerSchrader, arbeitet im Team Creative Concept. Er machte am SAE Institute den Bachelor in Multimedia Arts und dozierte dort auch. Im SAE Magazine veröffentlichte er diesen Artikel, den ich euch nicht vorenthalten möchte:
Wireframes in Action
Zu Beginn eines jeden Projektes steht die Konzeptionsphase. In dieser Phase werden Ideen und Elemente der zukünftigen Website entwickelt und sowohl mit dem Kunden als auch mit dem eigenen Projektteam abgestimmt. Ein bewährtes Hilfsmittel hierzu und Inhalten sind Wireframes, mit deren Hilfe komplexe Sachverhalte besser veranschaulicht werden können.
Ein Wireframe ist ein konzeptioneller Prototyp einer Website, ähnlich einem Drahtgittermodell in der 3D-Produktion oder einem „Mock-up" in der Gestaltung. Die einzelnen Elemente wie Navigation und Inhaltsbereich der Website werden abstrakt dargestellt. Dies erlaubt es, die Websitefunktion in einem sehr frühen Projektstadium zu planen und zu erproben, ohne sich bereits in Details zu verlieren. Dank dieser Eigenschaft lassen sich Wireframes während des gesamten Projektes auf unterschiedliche Weise einsetzen.Es gibt zwei unterschiedliche Arten von Wireframes. Statische Wireframes sind schematische Darstellungen der Website. Man kann sie mit relativ wenig Zeitaufwand direkt per Hand zeichnen oder mit Hilfe eines Tools am Computer erstellen. Bei der Betrachtung eines statischen Wireframes sollte das konzeptionelle Grundlayout erkennbar sein, ohne jedoch auf Designelemente einzugehen. Es eignet sich besonders gut, um in Meetings grundlegende Dinge zu besprechen, Milestones abzustimmen und komplexe Funktionen zu erklären, um diese in einem Konzeptdokument für die Umsetzung festzuhalten.
Dynamische Wireframes bestehen aus mehreren, zu einem interaktiven Prototyp verbundenen Seiten. So lassen sich weit vor der technischen Umsetzung die Funktion und das Zusammenspiel der Navigation und des Inhaltsbereiches testen.
Der größte Vorteil von Wireframes ist die Zeitersparnis. Kurzfristige Änderungen, neue Navigationsideen und alternative Layoutvorschläge lassen sich schnell einbauen, ohne ganze Designs zu verwerfen. Es können mühelos mehrere Seiten erstellt werden, um ganze Klickpfade und zusammenhängende Inhalte zu erklären und besser verständlich zu machen. Auch im späteren Projektverlauf helfen Wireframes Zeit einzusparen. Sowohl beim Design als auch in der technischen Umsetzung können sich die jeweiligen Verantwortlichen auf ihre eigentliche Aufgabe konzentrieren und müssen sich nicht erst grundlegende Gedanken über die Funktion machen.
Ein weiterer Vorteil ist die Kommunikation zum Auftraggeber. Kunden können sich mit Hilfe der Wireframes meist leichter die Ideen des Projektteams vorstellen und fühlen sich nicht übergangen. Gleichzeitig ermöglichen Wireframes eine ständige und direkte Abstimmung mit dem Kunden und reduzieren die Gefahr einer zeitraubenden und teuren Fehlentwicklung.
Allerdings müssen bei der Arbeit mit Wireframes ein paar Dinge beachtet werden. Da es sich um eine sehr reduzierte Darstellung einer Website handelt, sollten Wireframes nicht ohne Beschreibung an andere weiter- gegeben werden. Zum besseren Verständnis können sie auch durch Flussdiagramme und Sitemaps ergänzt werden.
Wireframes können mit jedem Programm, das über eine Zeichenfunktion verfügt, erstellt werden. Angefangen von PowerPoint oder Keynote über Visio bis hin zu Photoshop und Illustrator. Letztere haben allerdings den Nachteil, dass sie zu komplex sind und somit eine schnelle Änderung meist nicht so einfach realisierbar ist. Letztendlich ist es eine Frage der persönlichen Präferenz und des Prozesses, welches Programm am besten geeignet ist. Ich benutze Omnigraffle auf dem Mac. Auf dem PC habe ich bereits mit Axure recht gute Erfahrungen sammeln können.
Bei der Erstellung der Wireframes geht man Schritt für Schritt vor. Startpunkte sind ein Raster und eine grobe Aufteilung der Flächen. Mit verschiedenen Grautönen wird die Gewichtung der einzelnen Elemente dargestellt.
Ist der grundlegende Aufbau geklärt, werden nach und nach die Details in den Wireframe eingearbeitet. Wichtig ist, bei einer einheitlichen Darstellung zu bleiben und sich nicht zu sehr in Details zu vertiefen. Wie detailliert ein Wireframe letztendlich sein muss ist abhängig vom Projekt und sollte je nach Situation bestimmt werden.
Die am Computer erstellten Wireframes eignen sich gut für Konzeptdokumente, Abnahmen und Präsentationen. In Workshops oder Ideenfindungsphasen kann es aber auch von Vorteil sein, Wireframes per Hand zu erstellen. Neben der Tatsache, dass man diese so sehr schnell erstellen kann, helfen Sie auch, sie nicht zu detailliert zu gestalten.
Durch Ausschneiden und Kleben können auch diese Wireframes weiter ausgearbeitet werden. Das schieben und zeichnen hilft zusätzlich kreativ zu arbeiten, um neue Ansätze zu finden. Diese Methode ist auch hervorragend dazu geeignet, Kunden innerhalb eines Workshops direkt in die Wireframe-Erstellung mit einzubinden.
Ich persönlich möchte und kann mir eine Arbeit ohne Wireframes nicht mehr vorstellen. Die Qualität unserer Projekte ist dank der Wireframes um ein Vielfaches gestiegen. Sie sind zu einem nicht mehr wegzudenkenden Werkzeug in unseren Projektteams geworden.
Jetzt kommentieren