Mockups – auch Wireframes genannt – dienen dazu, Webseiten schon in der Phase der Konzeptionierung zu visualisieren und einen ersten Eindruck der Gestaltung zu erhalten. Zwar entstehen die ersten Entwürfe meist noch mit Stift und Papier, verfeinert werden sie aber immer häufiger unter Einsatz der sogenannten Mockup -Tools. Die Grafikabteilung hat sich 5 dieser Tools angeschaut und auf Herz und Nieren geprüft…

Vor der technischen Umsetzung einer Webseite, braucht man zunächst ein Konzept. In dieser Phase werden die Grundfunktionen, die Navigation und Inhaltsarchitektur festgelegt. Auch die ersten Entwürfe entstehen in dieser Phase. Setzt man dafür ein Grafikprogramm (z.B. Photoshop) ein, steckt man möglicherweise zu viel Zeit in die Entwicklung eines Prototyps, der gar nicht benutzt wird. Und Time ist ja bekanntlich Money! Werden die Ideen dagegen in einem Mockup/Wireframe festgehalten, so kann deutlich schneller und einfacher das Feedback der Kunden und anderer projektbeteiligter Personen umgesetzt und der Prototyp angepasst werden. Ein weiteres Plus ist eine höhere Konzentration auf die Inhalte und Funktionen der Seite, da man nicht unnötig durch die grafische Gestaltung abgelenkt wird.
Hat man sich für den Einsatz von Mockups entschieden, stellt sich jedoch immer noch die Frage, welches der zahlreichen Tools man benutzen sollte. Wir stellen euch 5 Tools vor, die uns am meisten angesprochen haben.

Balsamiq

Balsamiq Mockups

Balsamiq Mockups. Bildquelle: balsamiq.com

Balsamiq ist eines der bekanntesten Mockup-Tools, die es derzeit gibt. Die Vielfalt der vorhandenen Elemente, welche man per Drag & Drop auf die Arbeitsfläche ziehen und zu einem Layout anordnen kann, lässt fast keine Wünsche offen: Man findet alles, angefangen von Navigationen über Bild- und Videobereiche bis hin zu Formularen. Alle Elemente sehen unter Standard-Einstellungen wie von Hand gezeichnet aus und sind detailarm. Gerade aus diesem Grund eignet sich Balsmiq perfekt für frühe Konzeptphasen. Farben und Größen kann man ebenfalls definieren und einzelne Wireframes mit Kommentaren versehen. Diese werden außerhalb des Mockups gelagert und durch Pfeile mit dazugehörigen Elementen verbunden.
Leider bietet Balsamiq wenige Möglichkeiten, Interaktionen in den Prototyp einzubauen. So ist es zwar möglich, mehrere Wireframes mit Hilfe von Tabs in einem Fenster zu bearbeiten und diese mit einander zu verlinken, aber mehr wird darüber hinaus jedoch nicht angeboten.
Nichtsdestotrotz zählt Balsamiq zu den besten Tools für die Erstellung von Wireframes. Balsamiq wird als Desktop-Version für Windows, Mac und Linux angeboten und kann außerdem als Plugin für Google Drive, Confluence und JIRA installiert werden.
Plattform: Windows, Mac, Linux
Kosten: ab 79 $
Webseite: www.balsamiq.com

Axure

Axure RP

Axure RP. Bildquelle: axure.com

Axure verfügt über umfangreiche Möglichkeiten von Interface Prototypen aus vorgefertigten Elementen, die man passend konfigurieren kann, z. B. den Stil des Mockups von einem pixelgenauem Design zu einer „handgemalten“ Skizze zu ändern.
Außerdem kann man zu den abgebildeten Elementen einfache Aktionen hinzufügen, wie z.B. Tooltips, Flyout-Navigationen oder Lightboxes. So bekommt man nach dem Export einen funktionsfähigen Prototyp, der eine gute Alternative zu einem komplett programmierten Clickdummy darstellt.
Ein weiterer Vorteil : Mit Axure Pro kann man Erklärungen und Fußnoten zu den Wireframes hinzufügen, die später als Word-Dokument exportiert und super als Konzeptpapiere verwendet werden können. Auch das Teilen der Projekte unter den Mitgliedern des Projektteams ist in dieser Version möglich. So können alle an einem gleichen Mockup arbeiten, ohne die Änderungen der anderen zu verpassen oder zu überschreiben.
Das Tool ist dank seines Umfangs sehr hilfreich, aber braucht genau deswegen genug Einarbeitungszeit und kann bei schlechter Projektorganisation sehr schnell unübersichtlich werden. Wenn man einen Prototyp mit hohem Grad an Interaktivität erstellen möchte, kommt man außerdem nicht um Programmierkenntnisse herum.
Plattform: Windows, Mac
Kosten: ab 289 $
Webseite: www.axure.com

Pencil

Pencil Project

Pencil Project. Bildquelle: pencil-project-firefox.en.softonic.com/

Pencil basiert auf der Gecko-Engine des Webbrowsers Firefox und kann deswegen einfach als Browsererweiterung installiert werden. Das Tool ist zwar ein OpenSource-Programm und wird kostenlos angeboten, bietet aber trotzdem eine umfangreiche Bibliothek an UI-Elementen für verschiedene Plattformen (iPhone, iPad oder Android Smartphone). Auch die zahlreichen Formen, Diagramm-Elemente und vektorbasierten Clip-Art Icons sind vorhanden. All diese Elemente können per Drag-and-Drop in das Programmfenster gezogen und dort bequem eingeordnet werden.
Eines der Features, welches Pencil von anderen Mockup-Programmen unterscheidet, ist die Möglichkeit Diagramme und Ablaufschemata direkt im Programmfenster zu erstellen.
Außerdem unterstützt Pencil Verlinkungen zwischen einzelnen Screens und kann dadurch einfache Funktionen der Seite sowie unkomplizierte Nutzungsabläufe nachbilden. Diese Links bleiben auch nach dem Export bestehen und ermöglichen so die Erstellung einer „kompletten“ Mockup-Webseite mit uneingeschränkter Seitenanzahl.
Leider verfügt Pencil über keine gute Dokumentation sowie eine eingeschränkte Usability, weil einige der gängigen Tastaturkürzel nicht unterstützt werden. Auch die Abstimmung einzelner Elemente kann etwas schwer fallen: Manche UI-Elemente lassen sich nicht richtig skalieren, andere kann man nicht umfärben. Trotzdem stellt dieses Mockup-Tool eine gute Alternative zu den lizenzpflichtigen Programmen dar und kann für den Start in die Welt der Prototypenherstellung oder für die Konzipierung einfacher Webseiten gut genutzt werden.
Plattform: Windows, Mac, Linux
Kosten: gratis (Open Source)
Webseite: pencil.evolus.vn

Moqups

Moqups

Moqups. Bildquelle: moqups.com

Moqups ist eine schnelle HTML5-App, die im Browser funktioniert und ohne den Einsatz von Flash oder Java-Plugins auskommt. Man kann einzelne Widgets und Seiten verlinken und den Prototyp ganz schnell an das Projektteam verschicken.
Zudem kann man Personen zu einem Projekt einladen und damit das gemeinsame Bearbeiten und Kommentieren ermöglichen. Die Updates erfolgen in Realtime und man sieht sofort auf dem eigenem Bildschirm, wenn einer der Teammitglieder etwas geändert hat. Auch eine Integration von DropBox und Google Drive ist vorhanden.
Es werden verschiedene Widgets und Icons angeboten. 960Grid Raster, die Ausrichtung einzelner Elemente an Raster oder andere Objekte sowie eine automatische Größenanpassung der Elemente werden unterstützt. Um die Mockups schöner zu gestalten, ist es möglich, eigene Bilder hochzuladen.
Auch die Gestaltung von Formen, Texten und Icons bietet viele verschiedene Möglichkeiten, dank eines eingebauten Farbwahlwidgets, bei welchem man nicht nur die Farbe, sondern auch Konturen und Durchsichtigkeit der Elemente steuern kann.
Was diese Applikation von allen anderen unterscheidet, ist der schnelle Einstieg. Mann kommt auf die Webseite des Anbieters und gelangt sofort zu der Bearbeitungsfläche. Die Erklärungen zum Programm werden direkt als einzelne Elemente des Playground-Projekts dargestellt und man kann sofort mit dem Wireframe beginnen.
Zwar hat Moqups in Vergleich zu den anderen Tools eine begrenzte Auswahl an Elementen (etwa 60) und Icons (ca. 160), dafür aber eine sehr breite Palette an nützlichen Features. Und ständig kommen auch neue dazu. Viele dieser Features können auch ohne Registrierung benutzt werden. Die freie Version, die nach Registrierung zugänglich wird, erlaubt das Erstellen von zwei aktiven Projekten und beschränkte Kooperations-Möglichkeiten. Die komplett unbeschränkte kostenpflichtige Version ist ab 9 Euro pro Monat erhältlich.
Plattform: Windows, Mac, Linux
Kosten: freie Version kostenlos, Premium Version ab 9 Euro monatlich
Webseite: moqups.com

Wireframe.cc

Wireframe.cc

Wireframe.cc. Bildquelle: wireframe.cc

Hierbei handelt es sich um ein sehr minimalistisches Tool zum Herstellen von Wireframes. Die Auswahl der Optionen ist begrenzt, aber dadurch ermöglicht diese Web-Applikation eine schnelle und unkomplizierte Gestaltung. Ohne Ablenkung erstellt man innerhalb von Sekunden klare, ordentliche Layouts. Auf diesem Wege versuchen die Hersteller, die Idee und die Funktionalität einer Seite in den Vordergrund zu Rücken.
Bei Wireframe.cc findet man keine Toolbars mit einer Auswahl an Elementen, sondern klickt auf die Arbeitsfläche und zieht die Maus. Für die entstehenden Formen schlägt die App automatisch mögliche Elemente vor: Zieht man z. B. einen längliches Rechteck auf, wird beispielsweise ein Slider, ein Drop-Down oder ein Textfeld angeboten. Auch beim Bearbeiten der Elemente bekommt man nur die Funktionen angeboten, die für dieses Element sinnvoll sind. Zudem ist es möglich die einzelnen Elemente zu verwandeln und z. B. aus einem Rechteck einen Textabsatz zu erstellen.
Es stehen verschiedene Seitengrößen zur Verfügung: So kann man mit Wireframe.cc Skizzen für Browserfenster, Tablets und mobile Geräte entwerfen.
Auch das Speichern und Teilen von Entwürfen wird leicht gemacht. Jedes gespeicherte Wireframe erhält eine eigene URL, die man als Lesezeichen speichern oder weiterverschicken kann. So kann man jederzeit mit dem Design dort weitermachen, wo man aufgehört hat, da jedes Element weiterbearbeitet, verändert und transformiert wird.
Plattform: Windows, Mac, Linux
Kosten: gratis
Webseite: wireframe.cc

Welche Erfahrungen haben Sie mit Mockup-Tools gesammelt? Benutzen Sie selber welche? Schreiben Sie uns ein Kommentar – wir freuen uns auf Ihre Meinung!

Bildquelle Titelbild: Geckotree // dribbble.com