So finden Sie das richtige Mockup-Tool

Die typische Herangehensweise beim Erstellen einer Website ist in Grundzügen nahezu immer identisch: In der Konzeptionsphase werden die Grundfunktionen der Website bestimmt, die wichtigsten Navigations- und Site-Elemente herausgearbeitet und ein erste Design-Entwurf erstellt. Je nach eigenen Vorstellungen beziehungsweise den Kundenwünschen muss man als Webdesigner dann oft den goldenen Mittelweg finden, der Mögliches mit Wünschenswertem verbindet.

Doch wie erstellt man diese ersten Entwürfe, ohne dabei bereits zu viel Energie in die weitere Website-Gestaltung zu stecken? Viele Webdesigner greifen bei der Entwicklung erster Prototypen zu Grafikprogrammen. Doch dieser Weg ist aus verschiedenen Gründen umständlich. So lässt sich beispielsweise die grafische Entwicklung kaum eins zu eins übernehmen. Auch können damit nicht einfache Navigationssysteme oder eine Site-Navigation entworfen werden.

An diesem Punkt setzen sogenannte Mockup-Tools an. Sie eignen sich hervorragend für das Erstellen eines Website Prototyps. Der Einsatz solcher Werkzeuge bringt gleich mehrere Vorteile: Der Einsatz solcher Werkzeuge ist einfach und man gelangt innerhalb kürzester Zeit zu brauchbaren Ergebnissen. Diese ersten Entwürfe sind bestens geeignet, um sich das Feedback des Auftraggebers beziehungsweise anderer in das Projekt involvierter Personen zu holen.

Sind mehrere Personen oder Abteilungen involviert, kann man gemeinsam an der Verfeinerung oder an grundlegenden Änderungen arbeiten. Man kann Mockup-Tools als eine Art Vermittler zwischen Webentwickler und Benutzern verstehen. Die (Zwischen-)Ergebnisse sind in der Regel eine hervorragende Diskussionsgrundlage und vereinfachen die weitere Entwicklung spürbar. Ein weiterer Pluspunkt: Sie richten den Fokus wieder mehr auf die inhaltliche Ausrichtung anstelle der grafischen Gestaltung.

Ratgeber: Fehlersuche mit Firebug

Für den Einsatz von Mockup-Tools, die gelegentlich auch als Wireframes bezeichnet werden, spricht auch, dass man sich das Hantieren mit Stift und Papier spart, die digitalen Entwürfe per E-Mail oder auf anderem Weg mit Dritten austauschen und gemeinsam bearbeiten kann. Häufig werden die beiden Begriffe Wireframe und Mockup als Synonyme verwendet.

Ganz korrekt ist das nicht, denn ein Wireframe beinhaltet im Gegensatz zu einem Mockup noch keine Farben, Typographie, Bilder oder Grafiken. Es handelt sich also mehr um eine skizzenartige Darstellung von Funktionen und Layout. Es bildet damit den Rahmen für die spätere Design-Ausarbeitung.

Die Qual der Wahl

Verspricht der Einsatz eines Mockup-Programms die Optimierung und Vereinfachung der Website-Entwicklung, so stellt sich als Nächstes die Frage, welches die optimale Lösung ist. Inzwischen gibt es eine Vielzahl von Spezialisten. Manche sind rein webbasiert, andere als Browser-Plug-in verfügbar und wieder andere genügen auch höchsten Ansprüchen.

Die Bandbreite der Prototypspezialisten ist beeindruckend. Für den Einstieg in die Materie genügt oft schon ein einfaches Werkzeug wie das webbasierte Mockingbird, das bei der Entwicklung eines Projekts mit bis zu zehn Seiten kostenlos ist.

Den meisten Mockup-Werkzeugen gemein ist, dass sie eine Objektbibliothek bereitstellen, aus der Sie das Grundgerüst der Website (meist) per Drag-und-Drop zusammenklicken. Leistungsfähigere Werkzeuge wie beispielsweise Balsamiq stellen Ihnen Schablonen zur Verfügung, mit denen Sie es in kürzester Zeit zu einem brauchbaren Prototypen bringen. Außerdem kann das Programm externe Datenquellen und Projektmanagementtools integrieren.

Wieder andere Programme stellen Ihnen eine Exportfunktion zur Verfügung, mit der Sie Ihren Entwurf beispielsweise nach PDF exportieren und an Dritte weitergeben können. Noch einen Schritt weiter geht Azure: Dieses Programm erlaubt sogar die Implementierung von einfachen HTML- und Javascript-Aktionen.

Andere Tools wie Hotgloo sind oftmals teamfähig, und erlauben die Kooperation von verschiedenen Webentwicklern. Dafür fallen allerdings von der Anzahl der Entwickler abhängige monatliche Gebühren an.

Welches im Einzelfall die ideale Lösung ist, hängt von verschiedenen Faktoren an. Das beste Verhältnis aus Funktionsumfang und Kosten dürfte Balsamiq bieten. Für rund 80 US-Dollar bekommt man hier ein praxistaugliches Programm, das alle wichtigen Mockup- Funktionen bietet.

Mockup mit Balsamiq

Bei Balsamiq handelt es sich um eine Adobe-Air-basierte Applikation, die für alle gängigen Betriebssysteme verfügbar ist und sogar in einer speziellen Terminalserver-Variante angeboten wird. Damit steht auch einem Einsatz in Teams mit einer heterogenen IT-Plattform nichts im Wege.

Balsamiq verwendet für das Erstellen von Website-Skizzen und Prototypen Elemente, die wie von Hand gezeichnete Objekte aussehen. Damit hat man das Gefühl, als würde man den Entwurf am Zeichenbrett oder am Schreibtisch erstellen. Das Besondere an diesem Mockup-Tool: Sie können im Team an Ihren Entwürfen arbeiten - und zwar in Echtzeit.

Ratgeber: Was tun bei Content-Klau?

Die Balsamiq-Benutzerschnittstelle präsentiert Ihnen verschiedene Registerkarten, auf denen die gängigsten Website-Elemente wie Bild- und Textfelder, Schaltflächen, Formulare und so weiter zur Verfügung stehen. Wenn Sie die Arbeit an einem ersten Prototypen beginnen, platzieren Sie zunächst über die Registerkarte Containers das Element Window/Dialog auf dem Arbeitsbereich. Sie können das Fensterelement per Maus oder aber über den Eigenschaftendialog anpassen, den Sie mit einem Doppelklick auf das Element öffnen.

Über den Eigenschaftendialog können Sie dem ersten Element nicht nur die pixelgenaue Größe zuweisen, sondern auch die Ebene bestimmen und diesem Fensterelement beispielsweise eine Scroll-Leiste zuweisen. Als Nächstes können Sie ein Navigationssystem in den Entwurf einfügen. Dazu öffnen Sie die Registerkarte All und wählen das Element Accordion aus. Fügen Sie es ein und editieren Sie die vorgefertigten Einträge. Im Textkasten können Sie mit der Verwendung von Bindestrichen vor einem Eintrag ein Unterelement erzeugen.

Mithilfe der Maus können Sie die Position und Ausdehnung des Navigationssystems exakt anpassen. Auch die Einträge des Navigationssystems sind nahezu frei anpassbar. Die Auswahl einer Controls ist über das Quick-Add-Feld im Kopfbereich von Balsamiq einfach: Geben Sie einfach die Anfangsbuchstaben in das Formularfeld ein und wählen Sie aus der Ausgabe das gewünschte Element aus.

Balsamiq stellt Ihnen über 70 verschiedene Control-Elemente zur Verfügung. Sie könnten beispielsweise für die Produktauswahl auf Ihrer Startseite das Cover-Flow-Element verwenden. Dabei handelt es sich um eine virtuelle 3D-Umgebung für grafische Elemente, die man insbesondere als Navigation für Musiksammlungen kennt, die aber auch immer häufiger in Online-Shops für die Präsentation aktueller Highlights verwendet werden. Um das Cover-Flow-Element mit Bildern zu füttern, klicken Sie doppelt in das Element und bestimmen im Dialog Load Image das erste Bild.

Erweiterte Elemente verbauen

Über die Registerkarte Forms stellt Ihnen Balsamiq alle gängigen Formularelemente zur Verfügung. Sie können einfache Schaltflächen einbauen und diesen beliebige Positionen, Ausdehnungen, Farben und Links zuweisen. Das Mockup-Tool unterstützt auch den Einbau vom Checkbox-Gruppen, mit denen Sie beispielsweise Umfragen realisieren könnten.

Weitere wichtige Elemente finden Sie auf der Registerkarte Layout. Mit dem Element Link-Bar können Sie eine typische horizontale Navigationsleiste erstellen. Mit dem Element Site Map platzieren Sie eine typische Übersicht im Dokumentenbereich.

Alle textspezifischen Elemente finden Sie auf der Registerkarte Text. Hier können Sie Tabellen anlegen, Links erzeugen und beliebige Textrahmen und Listen anlegen. Diese Textrahmen können Sie dann per Copy-und-Paste einfach mit vorgefertigten Inhalten füllen. In den Textelementen finden Sie sogar eine Tag Cloud.

Beim Prototyping entstehen meist mehrere Mockups, die unterschiedliche Bereiche einer Website repräsentieren. Diese verschiedenen Entwürfe können Sie miteinander verbinden, um einen klickbaren Prototypen zu erzeugen oder aber um eine Präsentation zu generieren.

Das Verbinden zweier Mockups ist einfach: Editieren Sie einfach das Element, beispielsweise eine Schaltfläche, die auf einen anderen Entwurf verlinkt, öffnen Sie den Eigenschaftendialog und wählen Sie aus dem Auswahlmenü Link den gewünschten Entwurf aus. Das funktioniert auch bei den Elementen, die mehrere Ziele vorsehen, beispielsweise bei Navigationselementen. Hier stellt Ihnen das Link-Menü weitere Untermenüs für die Auswahl zur Verfügung.

Balsamiq für Fortgeschrittene

Wenn Sie Ihren ersten Entwurf fertiggestellt haben, können Sie diesen Dritten zur Verfügung stellen. Balsamiq erlaubt den Export in verschiedene Exportformate. Führen Sie dazu den Befehl File/ Export to aus. Das Dateimenü stellt Ihnen den Export nach PNG, PDF und XML zur Verfügung. Der XML-Export ist dann interessant, wenn man die Daten auf anderen Balsamiq-Installationen importieren will.

Sollte bei der Standardinstallation nicht das gewünschte Exportformat dabei sein, können Sie Ihre Balsamiq-Installation über spezielle Plug-ins erweitern. Im Support-Bereich der Balsamiq-Website finden Sie eine Zusammenstellung von Plug-ins. Für den Export des Mockups nach HTML/CSS, Flash und mobile Plattformen stehen Ihnen entsprechende Exporterweiterung zur Verfügung.

Auch das Zusammenspiel mit Twitter, Facebook und Wikis ist realisierbar. Balsamiq bietet in der aktuellen Version noch keine Funktionen, um mehrere Dateien zu einem Projekt zusammenzufassen. Aber sie können diese Einschränkungen umgehen, in dem Sie verschiedene Dinge beachten.

Grundsätzlich empfiehlt es sich, eigenen Ordner für einzelne Mockup-Projekte anzulegen und darin die verschiedenen Dateien abzulegen. Das vereinfacht gerade auch die Verlinkung der verschiedenen Entwürfe. Es bietet sich außerdem an, ein durchgängiges Bezeichnungsmuster für die BMML-Dateien zu verwenden, die beim Speichern der Entwürfe erzeugt werden.

Ein beliebtes Muster ist die Bezeichnung von Dateinamen mit 10_, 20_, 30_ und so weiter. Innerhalb eines Projektordners sollten Sie die Medien beispielsweise in media-Ordnern ablegen. Wenn Sie verschiedene Medien oder Dateitypen verwenden, sollten Sie diese in spezifische Ordner packen.

Wenn Sie an Ihren Entwürfen mit Dritten arbeiten wollen, ist das bislang nicht mit Balsamiq-eigenen Funktionen möglich, aber das Tool interagiert hervorragend mit Dropbox. Die Entwickler arbeiten außerdem an einer speziellen Variante mit der Bezeichnung myBalsamiq. Auch damit ist Zusammenarbeit mit Dritten möglich.Für Webdesigner ist heute die Beschäftigung mit Responsive Design zwingend, denn Websites müssen mehr und mehr auch für den mobilen Zugriff optimiert werden. Balsamiq kann Ihnen auch hierbei eine wertvolle Hilfe sein. Sie können damit beispielsweise einen Entwurf für einen Desktop-Rechner, ein typisches Tablet und ein Smartphone erzeugen. Weisen Sie den verschiedenen Entwürfen für die Zielgeräte jeweils die typische Größe zu und machen Sie sich an die Umstrukturierung der Elemente.

Fazit

Mit Balsamiq steht Ihnen eine benutzerfreundliche Lösung für das Erstellen von Prototypen zur Verfügung. Dank der umfassenden Elemente- und Komponentenbibliothek ist es einfach, alle gängigen Site-Elemente nachzubilden und mit Grundfunktionen zu versehen. Der moderate Preis spricht für dieses Mockup-Programm.