WireframeSketcher Tutorial

Last updated on 26. Januar 2014

Auf der Suche nach einem Tool um Mockups zu erstellen bin ich auf WireframeSketcher gestoßen. Es kann sowohl eigenständig als auch als Eclipse-Plug-in installiert werden. In diesem Artikel möchte ich WireframeSketcher kurz vorstellen und ein kleines Einführungstutorial geben.

Wo bekomme ich das Tool?

Hier kann man sich die Standalone-Variante herunterladen. Eclipse-Nutzer können über den Marketplace nach WireframeSketcher suchen und es von dort aus einfach installieren. Es ist sowohl für Linux, Windows als auch Mac verfügbar.

Erste Schritte

Da ich selbst nur mit der Eclipse-Version arbeite, gibt es die Einführung hier für Eclipse.

Um ein neues Mockup zu erstellen geht man wie folgt vor:

File > New > Other > WireframeSketcher > Screen

Dort angekommen wählt man den Ort aus an dem die Datei gespeichert werden soll und beendet den Vorgang mit Finish.

Via Drag & Drop kann man nun die einzelnen Elemente in den weißen Bildschirm ziehen und nach Belieben anordnen.

Links setzen

Um einen Link auf eine andere Seite des Mockups zu setzen und es damit interaktiv werden zu lassen, klickt man mit der rechten Maustaste auf das gewünschte Element, wählt im auftauchenden Menü „Links“ aus und gibt die entsprechenden Dokumente an, die für die jeweiligen Elemente zugeordnet werden sollen.

Exportfunktionen

Um das fertige Mockup nun als PDF oder PNG zu exportieren kann man auf verschiedene Vorgehensweisen zurückgreifen.

1. ShortCuts:  Shift+Strg+I (PNG)  oder Shift+Strg+P (PDF)
2. Rechtsklick > Export to Image / Export to PDF
3. Icons in der Menüleiste

Leider hat man beim Export der Bilder ein Wasserzeichen in der Zieldatei im Hintergrund des Mockups zu sehen.

Präsentationsmodus

Den Präsentationsmodus kann man über F5 oder das Icon in der Menüleiste starten. Mit dem Präsentationsmodus lässt sich eine interaktive Darstellung des Mockups vorführen, da die Links, die man zuvor gesetzt hat, dort verwendbar sind.

Ob es eine Möglichkeit gibt, den Präsentationsmodus ohne dem Programm aufzurufen habe ich aktuell noch nicht gefunden, werde es aber hier im Blog nachtragen, sobald ich es in Erfahrung gebracht habe.