Website-Enfwürfe mit Wireframes und Mockups

Die Modelle, die auch als Wireframes bezeichnet werden, sind idealerweise bereits so miteinander vernetzt, dass sich die Grundfunktionen der Seiten erkennen lassen. Zugleich sollten sie aber schematisch genug sein, um nicht durch die optische Gestaltung von der eigentlichen Funktion abzulenken. So können sich alle am Projekt beteiligten Personen auf das Wesentliche konzentrieren.

Niemals im Code entwickeln

Die Entwürfe einer Site unmittelbar in Code zu entwickeln, ist nicht zu empfehlen. Dagegen spricht bereits der Zeitfaktor. Selbst Meister ihrer Programmierumgebung werden für klickbare Demos länger als mit den hier vorgestellten Tools benötigen. Änderungen an einer Studie lassen sich mit den Programmen extrem schnell durchführen und ganze Seiten binnen weniger Sekunden umstellen. Da die Wireframes recht abstrakt bleiben, kann rein über die Funktion und den Aufbau diskutiert werden. Langwierige Streitgespräche über die Gestaltung entfallen so.Schließlich besteht die Gefahr, an einer einmal gefundenen Problemlösung zu stark festzuhalten und keine einfacheren Alternativen zu finden. Deswegen sollten zunächst Form und Funktion endgültig festgelegt und erst dann mit der Umsetzung in Code begonnen werden.

Balsamiq Mockups

Die Anwendung gehörte zu den ersten Programmen seiner Art. Dieser Entwicklungsvorsprung macht sich im Umgang mit der Software schnell bemerkbar. Die Desktop- Version basiert auf Adobe AIR und ist damit auf Windows, Mac und Linux gleichermaßen lauffähig. Außerdem wird ein Plugin für die Wikis und Bugtracker aus dem Hause Confluence angeboten. Die Oberfläche wurde extrem intuitiv gestaltet.Aus einem Fundus an Gestaltungsformen und Elementen wählen Sie die passende Struktur aus und ziehen diese auf die Zeichenfläche. Diese Formen entwickeln einen eigenen Charme und die finale Zeichnung erinnert tatsächlich an eine per Hand gestaltete Skizze.Über eine Kontextpalette, die immer dann sichtbar wird, sobald der Mauszeiger über einem Element platziert wird, ändern Sie dessen Eigenschaften. Individuelle Beschriftungen für Menüs oder Listenfelder sind ebenfalls leicht zu platzieren. Die Formen verraten bereits beim Bearbeiten die notwendige Syntax. Balsamiq verfügt über eine Formenbibliothek für die Entwicklung von iPhone-Apps, hat seine Stärken aber eindeutig im Bereich Web-Design.Die Elemente eines Projekts lassen sich leicht miteinander verlinken, sodass am Ende eine klickbare Demo steht. Diese Funktionalität bleibt auch beim Export der Bildschirmseiten in das PDF-Format erhalten, sodass die Weitergabe auch an Nutzer möglich ist, die nicht im Besitz der Software sind. Daneben kann das Projekt oder Teile davon in das PNG-Format oder die Zwischenablage exportiert werden.

Flair Builder Desktop

Dieses Tool wurde ebenfalls auf Basis des AIR-Frameworks entwickelt. Im direkten Vergleich zu Balsamiq verhält es sich allerdings in der getesteten Version träger. Im Auslieferungszustand wirkt die angebotene Formensprache etwas übersichtlich. Wer auf der Suche nach weiteren Layout- Elementen ist, kann mit einem Klick auf die sogenannte Library weitere Formen einzeln aus dem Internet laden.Das Aussehen der Widgets kann über den Wechsel des Themes geändert werden. So lässt sich zumindest in Ansätzen ebenfalls der Eindruck einer Zeichnung erwecken. Die Software unterscheidet zwischen Design- und Vorschauansicht. Damit gesetzte Links auch klickbar werden, müssen die Anwender zunächst in die Vorschau wechseln. Mittels einer integrierten Skriptsprache können Nutzerinteraktionen sehr detailliert nachgestellt werden. Events, die beim Laden oder Verlassen einer Seite stattfinden, sind auf diese Weise integrierbar.Interessant ist das Konzept beliebig vieler Masterseiten bzw. Elemente. Damit brauchen stetig wiederkehrende Seitenbereiche nicht neu definiert werden, sondern lassen sich mit der Maus zusammenstellen. Bei der Weitergabe der Dateien zeigt sich Flair Builder verschlossen. Als Export steht lediglich die Weitergabe als Bilddatei zur Verfügung. Dennoch können an Kunden oder die Teilnehmer eines Projekts die Dateien weitergegeben werden. Auf der Seite des Herstellers wird ein kostenloser Viewer angeboten.

Hotgloo

Hotgloo ist ein reiner Online-Service, für dessen Nutzung ein aktuelles Flash-Plugin erforderlich ist. Die Zahl der angebotenen Widgets, die eine Zeichnungsanmutung besitzen, fällt allerdings etwas knapp aus. Dafür haben sich die Entwickler in Sachen Bedienung von Balsamiq inspirieren lassen. Die Optionen eines Objekts blenden sich automatisch beim Zeigen ein. Auch mit Hotgloo können Sie klickbare Demos erzeugen. Die Anwendung erlaubt das gleichzeitige Bearbeiten einer Zeichnung im Team.Um ein Projekt in eine Zeichnung oder ein PDF zu exportieren, ist es notwendig, in den Review-Modus zu wechseln. In diesem Zustand sind die gesetzten Links auch klickbar. Die finalen PDF-Dateien sind allerdings statisch. Wer Oberflächen für Software-Anwendungen gestalten möchte, greift besser zu einem anderen Werkzeug, denn die angebotenen Formen bieten keine Vorlagen für Smartphone-Apps oder andere Programme. Um konsistente Seiten zu gestalten und Arbeit zu sparen, können in HotGloo Masterseiten angelegt werden.

Mockingbird

Mockingbird verzichtet auf eine Installation und wird lediglich als SaaS-App im Web angeboten. Die Widgets sind in Zeichnungsoptik gehalten. Die Bedienung der Anwendung ist selbsterklärend. Sie ziehen das gewünschte Element aus der Seitenleiste auf die Zeichenfläche. Die Eigenschaften und Optionen des Objekts werden damit automatisch sichtbar und können bearbeitet werden. Mit einem Doppelklick ändern Sie die Optionen nachträglich. In der Zusammenarbeit mit anderen spielt eine Webanwendung natürlich ihre Stärken aus.Über die Funktion Share definieren Sie, wer die Datei sehen und bearbeiten kann. Dabei ist eine Abstufung möglich. So lässt sich definieren, dass Eingeladene lediglich die Seiten betrachten dürfen, während Teammitglieder auch das Recht zur Bearbeitung haben. Sehr elegant ist das Anlegen von Links zwischen bereits vorhandenen Seiten gelöst. Es genügt, das Ziel aus der Seitenübersicht auf das Element zu ziehen. Der Export der Arbeitsergebnisse ist direkt aus der Webanwendung heraus möglich.