Projektmanagement für Web-Entwickler

Nichts ändert sich so dynamisch wie das Web und damit die Gestaltung von Websites. War vor noch wenigen Jahren der Desktop-PC und verschiedene Browser das Maß aller Dinge, sind heute Surfer zunehmend mit Smartphones und Tablets unterwegs. Die Zeiten, als dafür noch mobile Spezialversionen einer Website erstellt wurden sind vorbei: Könner schaffen heute mit HTML 5 und CSS 3 ein so genanntes "Responsive Design". Das bedeutet: Es gibt nur noch eine Universal-Version. Sie erzeugt ein Layout, das flexibel reagiert (daher "responsive") und sich so an jeden Bildschirm anpassen kann. Ergebnis: Die Website funktioniert auf jedem Gerät und sieht überall gut aus (siehe Bilderstrecke).

Website = Summe der Elemente

Trotz ständiger Veränderung in Sachen Technik: Webseiten sind heute immer noch die Summe ihrer Bestandteile, ob sichtbar (wie Text, visuellem Design, Farben, Bildern) in der Informationsarchitektur (Gliederung und Aufteilung der Information) oder unsichtbar (sauberer und schlanker Code, gute Datenbank im Hintergrund, schneller Server etc.). Der Webdesigner und spätere Typekit-Gründer Jeffrey Veen hat dieses Zusammenspiel in seinem Standardwerk "The Art & Science of Webdesign" schon im Jahr 2000 als Spannungsverhältnis zwischen "Words", "Code" und "Pictures" beschrieben, (das empfehlenswerte Buch gibt es kostenlos als PDF-Download).

Spielen alle Elemente perfekt zusammen, ergibt das ein gutes Nutzererlebnis. Gerät etwas aus der Balance - zum Beispiel tolle Inhalte, die dröge optisch präsentiert werden oder bei einem eigentlich guten Shop mit einer lahmen Datenbankanbindung -, strapaziert die Website im schlimmsten Fall die Nerven des Users, der Gesamteindruck leidet. Nur wenn sich alle Einzelteile ergänzen, stimmt das Gesamtbild.

Der richtige Start: Ausgewogene Teams und Kommunikation

Die Elemente einer Website werden von Spezialisten mit unterschiedlichen Kompetenzen erstellt: Designer, Programmierer, Redakteure, Konzeptioner und Marketiers gestalten eine gute Website gemeinsam und halten sie nach dem Start am Laufen. Nicht selten kommen auch Spezialisten für Video, Sound oder Animation dazu. Darüber hinaus mischen oft ein oder mehrere externe Auftraggeber und deren Teams mit. Das Problem ist deshalb nicht nur, dass hier völlig unterschiedliche Denkweisen und Menschentypen aufeinandertreffen: Verschiedene Kompetenzen arbeiten gerne für sich alleine oder bilden Grüppchen. Der Projektmanager muss schon beim Start der Arbeit darauf achten, dass jede Kompetenz in einem ausgewogenen Team vertreten ist und ab dem ersten Tag miteinander kommuniziert. Ein Projekt sollte also nicht nur mit dem Kundenkontakter starten, der die Website verkauft.

Die Kommunikation ist in der Praxis oft nicht einfach, da Programmierer und Designer sehr unterschiedlich denken. Hier muss der Projektmanager moderieren und für einen regelmäßigen Austausch sorgen - nicht nur in Meetings, sondern per E-Mail oder mit spezieller Projektsoftware oder Task-Managern für Teams wie zum Beispiel Asana. Das macht es einfacher, Aufgaben zu delegieren und deren Status (erledigt oder nicht, wie lange, Kommentare etc.) weiterzusagen.

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.

Erst Mobile, dann Desktop

Kombiniert mit der anfangs erwähnten "Responsive-Design"-Methode, ändert sich nicht nur die lineare Arbeit im Projekt in einen agilen Kreislauf. Die alte Denke "erst einmal die Desktop-Version, dann die fürs Handy" wird umgedreht: Heute heißt es "Mobile first". Das Wichtigste einer Website muss aufs Smartphone-Display passen, auf Tablet und Desktop-PC kommen dann weitere Elemente hinzu.

Fazit: Flexibles Design erfordert flexiblen Workflow

In einer Welt sich ständig ändernden Web-Technologien, Endgeräten und damit verbundenen Browsern, Bildschirmgrößen und Betriebssystemen, muss nicht nur das Weblayout flexibel sein. Es geht darum, den Prozess von Design und Entwicklung effizient und flexibel zu gestalten. Der zeitgemäße Ansatz besteht aus richtigem Projektstart, Kommunikation, Freiraum für Ideen und konsequenter Projektsteuerung. (sh)

Jeder Webdesigner und jede Agentur hat einen Ablauf für die Phasen eines Webprojekts. Im Allgemeinen können Sie dieser Checkliste folgen und ein Projekt in drei Phasen einteilen:

Checkliste: Vorgehen Webdesign-Prozess