Cogtool

Fireworks bietet ein umfassendes Funktionsspektrum von der Erstellung von Wireframes über komplexe Mockups, interaktive Website-Prototypen bis hin zur Ausgabe der Daten für die Weiterbearbeitung in einem Webeditor. Im Anschluss an die Prototyping-Phase kann Fireworks unter anderem voll funktionsfähigen HTML- und CSS-Code samt weboptimierter Bilder und Javascript-Interaktivität ausgeben.

Zur Erstellung von Wireframes in Fireworks kommen Objekte aus dem Bedienfeld Allgemeine Bibliothek zum Einsatz. Diese Palette beinhaltet unter anderem vollständig editierbare Navigationselemente, Schnipsel von HTML-Code und Flex-Komponenten und kann um benutzerdefinierte Symbole erweitert werden. Fireworks meistert die Erstellung komplexer grafischer Elemente, ihre Aufteilung in Segmente (Slicing), das Verschalten von Interaktivität und die abschließende Optimierung für das Web.Das Programm unterstützt die Verwendung von Platzhaltern für dynamische Inhalte und das Einfügen auch solcher Quelltextschnipsel, die erst zu einem späteren Zeitpunkt, nach dem CSS- und HTML-Export, genutzt werden können. Zu den Highlights von Fireworks CS 5/CS 5.1 zählt eine durchdachte Automatisierung. Der Benutzer kann unter anderem Protokollschritte als Befehle erfassen und in der Stapelverarbeitung benutzen.Wenn es darum geht, grafische Design-elemente eines interaktiven Website-Layouts abzustimmen und wiederverwendbar zu machen, Interaktivitätszustände zu bearbeiten und Freigaben einzuholen, sucht Fireworks CS 5.1 seinesgleichen.

Cogtool

Bei Cogtool handelt es sich um eine quelloffene Software für das Usability-Testing und das Benchmarken von Prototypen. Cogtool erlaubt es, mehrere verschiedene Prototypen eines Website-Designs zu erstellen und als Storyboards zu visualisieren. Die Software bietet dem Designer die Möglichkeit, die Funktionsweise alternativer Click-Through-Prototypen interaktiv vorzuführen, um Benutzerinteraktionen als Funktion der Zeit zu erfassen und die so erstellten Resultate zu vergleichen. So lassen sich beispielsweise zwei Modelle eines Bestellformulars direkt vergleichen.Cogtool arbeitet auf Basis von Storyboards, die sich aus Einzelbildern - den so genannten Frames - zusammensetzen. Frames repräsentieren die einzelnen Zustände des jeweils aktiven (Browser-)fensters. Jeder der Einzelzustände kann über Widgets verfügen (also Bedienelemente wie Schaltflächen, Menüs oder Verknüpfungen) und außerdem auch über ein Eingabegerät wie die Tastatur oder ein Mikrofon gesteuert werden. Der Benutzer kann die einzelnen Wireframes entweder direkt in Cogtool erstellen oder aus einer externen Datei einlesen. Cogtool versteht sich auf den Import und Export von HTML und kann eigenständig Websites crawlen, um die so erfassten Daten in Storyboards umzuwandeln.

Potenzielle Stolperfallen

Der Einsatz von spezialisierten Prototyping-Tools hat auch durchaus seine Tücken. Vor allem interaktive Website-Prototypen auf Basis weit gediehener Mockups sind ein zweischneidiges Schwert. Einerseits ist es sehr wünschenswert, die Usability der Website vorab an dem nahezu finalen Design interaktiv testen zu können. Andererseits birgt diese Entwicklungsphase ein hohes Potenzial für Missverständnisse zwischen der Agentur und dem Auftraggeber. So kann beim Auftraggeber schon einmal der Eindruck entstehen, das Projekt sei bereits abgeschlossen, obwohl der Click-Through-Demonstration noch nicht der benötigte Code zu Grunde liegt, um sie funktionsfähig zu machen.Es gilt daher unbedingt vorab abzuklären, dass nach der Freigabe des Prototyps für die dann noch bevorstehende Entwicklung des eigentlichen Codes möglicherweise nicht unerhebliche Kosten anfallen werden. Der Auftraggeber sollte sich im Klaren darüber sein, dass es sich bei dem Prototyp um einen Meilenstein handelt und noch nicht um eine einsatzfähige Anwendung.

Fazit

Website-Mockups und -Prototypen senken die Entwicklungskosten von Webprojekten deutlich. So lassen sich mit den passenden Tools Konzepte entwickeln, testen und präsentieren, ohne lauffähigen Code zu verwerfen.

Produktivitätstipps

1. Mit Wireframes im Scribble-Stil Feedback einholenViele Auftraggeber verlieren sich gerne in Details wie die Wahl von Farben oder Schriftarten in einer frühen Projektphase. In dieser gilt es allerdings vielmehr, den grundsätzlichen Seitenaufbau schriftlich festzuhalten. Webdesigner sind daher gut beraten, anfangs mit Wireframes zu arbeiten, bevor sie dem Auftraggeber visuell ansprechende Designvarianten (Mockups) vorlegen.

Praxiserfahrungen deuten darauf hin, dass gerade Wireframes im Stil eines computergenerierten Scribbles - im Gegensatz zu Wireframes auf Basis perfekter Formen - bestens dafür geeignet sind, die Aufmerksamkeit des Auftraggebers auf die wesentlichen Komponenten des Seitenaufbaus zu lenken und die Ideenfindung anzuregen. Das Design sieht ja eindeutig nach einer Baustelle aus, so dass der Auftraggeber eher dazu geneigt ist, Änderungswünsche zu äußern. Indem Sie das Design erst einmal anhand bewusst unfertiger, scheinbar handgescribbelter Wireframes ausführlich besprechen (und die Freigabe einholen) vermeiden Sie, dass der Auftraggeber in einer späteren Projektphase plötzlich seine Meinung ändert.