Der Fahrplan für die Produktion: Das Konzept

Wichtig ist, das Team von Anfang an auf den richtigen Kurs zu bringen. Dabei hilft das Konzept, das schon im Team im Austausch mit allen für die Umsetzung erforderlichen Spezialisten erstellt werden sollte. Es bildet den Bauplan für die Website und legt die Marschrichtung fest. Dazu gehören Ziele der Website, Zielgruppe, Features, Technik für die Umsetzung und Inhalte sowie erste Entwürfe der Informationsarchitektur, also was in den Haupt- und Untermenüs stehen wird.

Beim Erstellen eines Konzepts gibt es verschiedene Prozessmodelle und Theorien für das Vorgehen. Die sehen jedoch in der Praxis bei jedem Projekt anders aus. Dennoch gibt es Gemeinsamkeiten und eine einfache Formel, die über allem steht: Stellen Sie den Anwender in den Mittelpunkt! Das so genannte "User Centered Design" definiert Zielgruppen, sprich Beschreibungen von Personen und definiert, wie sich diese verhalten und was sie wie auf der Website erledigen möchten. Auf dieser Basis entwickelt man ein Konzept - hier hilft unsere Checkliste am Ende. Gibt es einen Auftraggeber, hilft er beim Definieren der Ziele und Zielgruppen (er kennt die Zielgruppe am besten und oft schon seit Jahren). Ist die Zielgruppe noch unbekannt, helfen Nutzerbefragungen. Das klappt zum Beispiel günstig über E-Mails, Online-Umfragen oder Social-Media-Plattformen wie Facebook.

Ein Konzept sollte schriftlich ausgearbeitet und in der Umsetzungsphase noch verfeinert werden. Vorüberlegungen kosten Zeit (Faustregel: bis zu 30 Prozent der gesamten Produktionszeit), zahlen sich aber doppelt und dreifach aus, wenn die anschließende Produktion schneller, effizienter und mit weniger Problemen über die Bühne geht.

Agiles Arbeiten statt "der Reihe nach"

Immer schön eins nach dem anderen: Was in vielen Lebensbereichen prima funktioniert, hat sich im Webdesign nicht bewährt. Die alte Methode ist unter dem Begriff "Wasserfall"-Prozess bekannt: Erst die Strategie, dann Design, dann Front- und Backend, Testen, Launch, Analyse usw. Das Lineare ist jedoch ein Problem in sich: Wenn in einem Schritt eine Komplikation auftritt - sich ein geplantes Feature der Website beispielsweise als nicht programmierbar herausstellt - geht es zunächst einen kompletten Schritt zurück. Hier also: Neues Design ausarbeiten, dann erst weiter programmieren. Die Wasserfall-Methode ist daher langsam und riskant.

Besonders im Webdesign gibt es aber kein Konzept, was auf Anhieb funktioniert - Fehler gehören zum natürlichen Prozess. Die moderne "agile" Methode ist ein ständiger Kreislauf aus schnellen, aufwändigen Entwürfen, frühen User-Tests und daraus abgeleiteten Verbesserungen. Agiles Web-Development arbeitet Anforderungen und Ideen heraus, setzt sie schnell um und verbessert sich permanent. Das Konzept gibt klare Rahmenbedingungen vor, schafft aber gleichzeitig Freiraum für Ideen und Kreativität. Das Konzept ist der übergeordnete Leitfaden für die Erreichung der Ziele, wird aber ständig weiterentwickelt und verändert. Dennoch braucht auch agiles Arbeiten eine konsequente Projektsteuerung.

Schnelle Entwürfe, frühes Testen

Entwürfe können schnell und einfach erstellte "Wireframes" sein, in Sekunden gezeichnete "Drahtgitter"-Modelle, die nur mit Linien skizzieren, wo Textblöcke, Menüs, Bilder, Überschriften und Videos platziert sind. Mit Bleistift auf Papier gezeichnete Wireframes oder ausgeschnittene Papierschnipsel sind fürs Prototyping völlig ausreichend. Schon in dieser Phase sind User-Tests möglich (Eine Testperson sagt "Ich klicke hier..." - dann kommt das nächste Blatt usw.).

Wer es etwas komfortabler haben möchte, kann Wireframes per Software erstellen. Inzwischen gibt es viele Programme, die das Zeichnen erleichtern, zum Beispiel Microsoft Visio, Omnigraffle oder Axure. Omnigraffle ist seit einiger Zeit auch als App auf dem iPad unterwegs, die im Meeting Website-Entwürfe möglich macht. Die Tablet-App Adobe Proto erstellt in Sekunden mit dem Finger gezeichnete Prototypen auf dem iPad und Android-Tablets und macht damit einfaches "Durchtesten" sogar im Webbrowser möglich. Der Clou: Funktionierende Entwürfe können nach dem Test automatisch in CSS-Layouts gewandelt und in Webeditoren wie Dreamweaver weiterverwendet werden.