Entwicklungskosten senken

Bei einem Website-Projekt kommt es bereits früh darauf an, zu einer eindeutigen und klar umrissenen Aufgabenstellung zu gelangen. So vermeidet man, mit viel Zeitaufwand Designvarianten im Detail auszuarbeiten, die dann verworfen werden müssen, oder Code zu schreiben, der nicht benötigt wird. Der Weg zur Effizienzsteigerung führt über die Erstellung von Prototypen.

Workflow-Ansätze

Eine Agentur, die ihre Rentabilität erhöhen will, kann dies auch ohne Preiserhöhung erreichen, indem sie mehr Aufträge in der gleichen Zeit bei gleichbleibender Qualität ausführt. Dies setzt aber eine zielgerichtete und zweckgemäße Ressourcenzuweisung und eine systematische Vermeidung von Unwirtschaftlichkeit voraus. Um diese Voraussetzungen zu erfüllen, werden in der Praxis zunehmend Wireframes, Mockups und Prototypen eingesetzt.Einige Designer erstellen heute noch Mockups auf Papier, doch im Zeitalter verteilter Arbeitsplätze wird dieser Ansatz zunehmend zugunsten computergestützter Tools verworfen. Einige Webentwickler, die sich mit der Erstellung von Mockups in Photoshop - einer Software, die dafür nicht vorgesehen ist - nicht anfreunden können, gehen zum anderen Extrem über, indem sie ihre interaktiven Prototypen manuell in HTML und CSS coden.Zur Visualisierung mehrerer Versionen des CSS-Designs auf Basis ein und desselben Markups kommen oft Erweiterungen wie das jQuery-Plug-in Polypage zum Einsatz (code.new-bamboo.co.uk/ ).

Während manuelles Codieren von Prototypen sicherlich schnell zum Ziel führt, resultiert es in tendenziell sehr textlastigen Layouts, bietet kaum Freiraum für Teamarbeit und gewährleistet nicht die Überprüfbarkeit von Meilensteinen. Spezialisierte Prototyping-Tools bieten diese Funktionen und einiges mehr.Lösungen für Website-Mockups und -Prototypen fallen in eine von drei Kategorien. Auf der einen Seite gibt es Applikationen wie Balsamiq, die sich auf die blitzschnelle Erstellung von Wireframes und Mockups spezialisieren. Diese Tools meistern jedoch nicht die Erschaffung von klickbaren Website-Prototypen, die sich für das Usability-Testing verwenden ließen. Somit wird die kurze Einarbeitungszeit mit dem Preis eines geringeren Funktionsumfangs erkauft.Einen anderen Ansatz befolgen Prototyping-Tools wie Adobe Fireworks CS5.1 und Pidoco der Berliner Pidoco GmbH. Deren Ansatz sieht mehrere Prototyping-Phasen vor, von Wireframes über Mockups, interaktive Click-Through-Simulationen und Prototypen bis hin zum finalen Design. Dieser Ansatz erlaubt eine weitreichende Spezialisierung und erleichtert die Aufteilung von Projekten in Arbeitsgruppen.Was Fireworks von anderen Lösungen abhebt, ist die Fähigkeit, nicht nur wie Pidoco mit wiederverwendbaren Datenbeständen zu arbeiten, sondern auch wiederverwendbare visuelle Datenbestände eigenständig (also ohne den Einsatz von Photoshop) zu erzeugen und interaktiv zu verlinken. Eine weitere Kategorie stellen Projektmanagementlösungen dar, welche die Verwaltung durch den Fokus auf Flussdiagramme mit Meilensteinen das Projektmanagement erleichtern wollen. Ein Beispiel für diesen Ansatz ist Creately (Creately.com ).Diese Applikationen zeichnet oft eine flache Lernkurve aus und stellt einen vergleichsweise geringen Beitrag zur eigentlichen Gestaltung der Website dar. Lobenswerte Ausnahmen im Hinblick auf Einarbeitungszeit und praktischen Nutzen stellen Omnigraffle der Omni Group (leider nur auf dem Mac oder iPad verfügbar) und das Cogtool der Carnegie-Mellon-Universität dar.

Balsamiq Mockups

Balsamiq Mockups ist eine fast schon legendär leicht zu bedienende Software, mit der sich Wireframes im Stil von Freihandskizzen und vollwertige, obwohl nur statische, Mockups erstellen lassen. Die einzelnen Designelemente entnimmt der Benutzer der Objektleiste und ordnet sie mittels Drag-und-Drop auf der Leinwand an.Hier lassen sich die einzelnen Teilstücke gruppieren und auf verschiedenen Ebenen überlappend anordnen. Interaktives Verknüpfen von Objekten ist leider genausowenig vorgesehen wie die Ausgabe von Prototypen für das Usability-Testing. Projekte lassen sich am Bildschirm im Präsentationsmodus vorführen ebenso wie exportieren. Hierbei kommen die Formate XML, PDF oder PNG in Frage. Das kleine und agile Programm läuft in der Adobe-AIR-Laufzeitumgebung und ist damit sowohl unter Windows als auch unter Mac OS X einsatzfähig. Es erfordert eine nur minimale Einarbeitungszeit, was aber angesichts des vergleichsweise geringen Funktionsumfangs auch nicht weiter verwundert.

Pidoco

Pidoco ist eine webbasierte Rapid-Prototyping-Software zur Erstellung klickbarer Wireframes und Prototypen per Drag und Drop im Browser. Die Bearbeitung von Prototypen erfolgt in zwei Ansichten: einer zur Erstellung von Wireframes und einer weiteren zur Visualisierung von Navigationsprozessen, Anwendungs-szenarien oder Sitemaps (Seitengruppen). Die Stärken von Pidoco liegen im Bereich der Zusammenarbeit zwischen den verschiedenen Projektpartnern. So können Sie Notizen an Seitenelemente anhängen, um Feedback einzuholen, Einladungen versenden und die Zugangsrechte auf Ihre Projekte verwalten.

Fireworks CS 5.1

Fireworks CS 5.1 ist ein vielseitiges Tool für Rapid Prototyping mit der Fähigkeit, interaktive Prototypen zu bauen, welche die resultierende Website und deren Navigationselemente in allen gewünschten Zuständen abbilden. Die Stärken des Programms liegen in der Vielseitigkeit seiner leistungsfähigen visuellen Werkzeuge zur Gestaltung von Grafiken und Interaktivität.