Websites auf Papier zu entwerfen funktioniert. Wichtig sind allerdings klare Ziele. Möglichkeiten und Beschränkungen des Mediums müssen beachtet werden. Dr. Web erläutert, wie sie von der Arbeit mit den einfachsten Mitteln profitieren können und wie Sie Ihr Repertoire erweitern.
Noch vor kurzem habe ich an dieser Stelle Werbung für die Arbeit mit Papierentwürfen gemacht. Auf den ersten Blick mag das unsinnig wirken. Ist eine Website nicht gerade als digitales Medium viel zu weit davon entfernt? Und sind die vielen interaktiven, multimedialen Elemente überhaupt darstellbar? Moderne Websites setzen doch heutzutage auf dynamische Elemente mit Ajax und eingebettete Flashelemente. Mag sein, aber schon seit vielen Jahren sind Papierentwürfe ein Klassiker unter Designern, die Wert auf saubere Planung und ausführliche Tests legen, bevor sie eine schicke Seite zusammenzimmern. Alte und neue Schule widersprechen einander nicht; sie können sich hervorragend ergänzen.
Warum?
Auf den zweiten Blick sind die vielen Vorzüge nicht schwer zu erkennen. Papierentwürfe schrecken niemanden ab. Viele Kunden sind sogar erleichtert, wenn Sie einfach mal in einem Entwurf herum malen dürfen. Endlich können sie auf einfache Art zeigen, was sie sich wünschen. Von der Mitwirkung ohne technisches Vorwissen profitieren auch Ihre Kollegen. Gerade mit Textern oder Grafikdesignern, die wenig Ahnung von den Hintergründen einer Website haben, kann die Kommunikation belebt werden. Die Arbeit am Bildschirm ruft bei vielen Menschen immer noch Respekt hervor. Dabei sind offene Worte im Gestaltungsprozess wichtig. Wenn Kunden ihre Änderungswünsche früh klarmachen, profitieren beide Seiten. Das geht am besten über ein Ambiente, in dem man einander gut versteht, und in dem niemand eingeschüchtert wird. Oft ist es mir passiert, dass ich mit einem recht ausgefeiltem Entwurf Diskussionen eher abgewürgt habe. Weil alles schon gut und fertig aussah, blieb Kritik aus. Vor einer schnellen Skizze hat niemand Respekt.
Änderungen sind immer schnell vorgenommen. Zettel hin- und herschieben, Elemente neu skizzieren – das geht innerhalb einer Besprechung. Anstatt sich Stichpunkte zu machen und das nächste Mal die neue Version zu präsentieren, schaut man sich gemeinsam die neue Skizze an. So fallen schnell wieder neue Details und Probleme ins Auge. Auf dem Papier mag eine Website immer anders aussehen, als auf dem Bildschirm, aber darin liegt auch ein großer Vorteil. Papierentwürfe sind übersichtlich, zum Anfassen und intuitiv zu manipulieren.
Schließlich kann gerade die technische Reduktion helfen, sich auf Wesentliches zu konzentrieren. Weder typographische Details noch das genaue Farbschema, noch Multimediales hat auf dem Papier etwas zu suchen. Gutes Layout der Elemente einer Site und ihre Nutzbarkeit stehen im Vordergrund. Das ist immer ein gutes Fundament für den komplexen Prozess des Webdesigns; bevor man sich in Details verliert, muss das Grundsätzliche geklärt sein.
Wofür?
Im Laufe der Jahre haben sich die verschiedensten Anwendungsformen für Papierentwürfe etabliert. Für einige eignet sich Papier besonders gut: Noch bevor die erste Zeile Code getippt wurde, kann es sinnvoll sein, sich mit Stift und Papier zusammenzusetzen und sich über Grundlagen abzustimmen. Allein kann man durch Skizzieren zu einem klareren Konzept und Ziel gelangen. In der Zusammenarbeit mit Kollegen oder Kunden kann man gewährleisten, dass alle am selben Strang ziehen. Eine gemeinsame Vision zu formulieren, die man sehen und anfassen kann, hilft ungemein.
Aufwendigere Projekte profitieren von Usabiltytests mit Papier. Jakob Nielsen und Morgan Kaufman sind zwei Autoritäten auf dem Gebiet, die auch online viel von Ihrer Erfahrung teilen. Grundlage kann hier etwa sein, Menschen mit dem Stift als ‚Maus‘ die Nutzbarkeit eines Designs nachvollziehen zu lassen. So lassen sich die Fundamente eines Designs sinnvoll testen, bevor viele Stunden in die Erarbeitung eines Entwurfs investiert wurden.
Egal, in welchem Stadium: Brainstorming bei der Arbeit im Team kann fast immer von Papier profitieren. Wenn man in einer Sackgasse steckt, ist es einfach besser, wenn jeder auf die Schnelle Zettel hin und herschieben, Elemente durchstreichen, neue Ideen skizzieren kann, als wenn eine Menschentraube dem Webdesigner im Nacken sitzt und ihn mit Vorschlägen bombardiert. So wird schnell eine kreative, entspanntere Atmosphäre geschaffen.
Auch, wenn schon Handfestes gestaltet wurde, kann der Schritt zurück auf das Papier helfen. Ist das Projekt in eine Sackgasse geraten? Wollen Sie zu grundsätzlichen Entscheidungsebenen zurück finden? Dann sollten Sie ausdrucken, was bisher gestaltet wurde, und zur Bastelstunde rufen. Auch Revisionen sind auf dem Papier oft intuitiver vorzunehmen. Und auch fortgeschrittenes Design lässt sich auf Papier darstellen.
Womit?
In der Wahl der Mittel gibt es viele Möglichkeiten. Mit verschiedenen Projekten und Besprechungen werden ganz andere Mittel sinnvoll. In jedem Fall sollte jeder der Beteiligten einen Stift haben, Zugriff auf Schere, Klebstoff und reichlich Papier. Neben dem billigsten und einfachsten Material, DIN A4-Blättern gibt es viele sinnvolle Mittel, mit der die Arbeit am Papierentwurf konkreter und anschaulicher wird.
Farben: Schrift und Hintergründe findet man schließlich auch im Web in allen Farben des Spektrums. Verschiedene Stifte und gefärbtes Papier können das nicht in allen Feinheiten wiedergeben. Aber Grundsätzliches ist darstellbar. Wo Signalfarben Orientierung schaffen sollen, Links erkennbar werden müssen, ist die Arbeit mit farbigen Arbeitsmaterialien sinnvoll. Auch für die funktionale Trennung können Farben helfen. Die dynamischen Elemente einer Seite, Navigationselemente, selbst ein ‚Browserfenster‘ können so dargestellt werden.
Formate: Wer nur mit A4-Blättern arbeitet, beschränkt die eigenen Möglichkeiten. Besonders nahe liegen kleine Zettel, mit denen sich das Layout einer Seite wirklich modular darstellen und verändern lässt. Die Elemente können übereinander gelegt, zusammen geklebt, auseinander geschnitten werden. So verdeutlichen sie oft die Gemeinsamkeiten und Unterschiede der Einzelseiten einer Website besser, als eine Livedemo das könnte. Auch Karteikarten bieten sich an, um eine beliebte Metapher der Navigation umzusetzen: die Navigation mit Karteireitern. Das Grundlayout passt (auch vom Seitenverhältnis) gut auf ein quer gelegtes A4-Blatt. Kleinere Formate werden darüber gelegt und verdeutlichen Änderungen.
Haftnotizen: Die kleinen farbigen Zettel nehmen schnell eine Sonderrolle bei der Arbeit ein. Sie dienen erstens dazu, Kommentare über die Seite festzuhalten. Schließlich ist es hilfreich, wenn optisch eine klare Trennung zwischen dem Entwurf und Kommentaren dazu besteht. Die Versuchung ist groß, Dinge auf den Entwurf zu kritzeln, die nicht auf der späteren Seite stehen sollen. So geht Übersicht verloren. Zweitens können die Klebezettel Pop-Up-Fenster simulieren: Bestätigungen, Fehlermeldungen, Loginfelder. Idealerweise sollten sich die beiden Zwecke nicht mischen.
Ausdrucke: Findet die Besprechung statt, nachdem schon Elemente gestaltet wurden, sollten die natürlich vorliegen. Um nicht an dem Stand der Entwicklungen vorbei zu reden oder immer wieder zum Computer zurückkehren zu müssen, können mehrere Ausdrücke der Designelemente helfen. Die zu zerschneiden, neu zusammenzufügen und zu ergänzen, ohne je eine CSS-Datei von innen zu sehen, kann auch auf Webdesigner befreiend wirken. Zusätzlich könnten Vorlagen zum Einsatz kommen. Ein paar Textblöcke, Bildelemente, Logos der Firma zum freien Platzieren zu haben, kann viel Gekritzel ersparen und ist für die weniger künstlerisch Begabten eine Erleichterung.
Arbeitshilfen: Natürlich sollten ausreichend Scheren, Stifte, Klebstoff und vor allem eine Digicam zur Hand sein. So kann man Änderungen schnell vornehmen, und erleichtert allen Beteiligten die Interaktion. Per Kamera werden Ergebnisse schnell und einfach festgehalten.
Drunter und Drüber: Alle Beteiligten sollten auf die Arbeitsfläche Zugriff haben. Ein riesiger Konferenztisch kann behindernd wirken, wenn nicht alle gut sehen, was gerade passiert, oder nicht jeder an die Entwürfe herankommt. Ohnehin können bei der Arbeit mit Papier zu viele Köche den Brei verderben. Zur Fixierung der Elemente kann ein Whiteboard oder eine Pinnwand gute Dienste leisten. Auf dem Whiteboard könnten dann noch Notizen zum Design Platz finden. Oder Folien werden für Anmerkungen über den Entwurf gelegt; die sind allerdings auch teuer, rutschen schnell und reflektieren bei Blitzlichtaufnahmen. In jedem Fall verdient die Arbeitsumgebung ein paar Vorüberlegungen. Mit der Erfahrung entwickeln sich dann Vorlieben und Gewohnheiten.
Ausprobieren
Mit diesen Mitteln haben Sie schon eine Menge Möglichkeiten. Aber mit etwas Kreativität und Erfahrung lassen sich auch die noch erweitern. Auch, wenn Ihre Arbeitsumgebung in Zukunft nicht aussieht, wie eine Bastelstunde im Kunstunterricht, können Ihnen einige der hier gemachten Anregungen hoffentlich weiterhelfen. So mancher Kunde und Kollege wird erst skeptisch auf ‚gemeinsames Basteln‘ als wichtigen Schritt im Gestaltungsprozess reagieren. Aber die Überzeugungsarbeit kann sich lohnen. Schließlich ist gute Kommunikation und saubere Planung eine der ewigen Hürden im Webdesign. Da ist jede Hilfestellung wertvoll. ™
Material zum Thema:
- Paper Prototyping – A List Apart
- PaperPrototyping
- Dr. Web Artikel: Vier Wege zum perfekten Prototyp
Erstveröffentlichung 05.03.2007
