WireframeSketcher Tutorial

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

New-Wizard

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

wizard2

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

Arbeitsumgebung

Beispielhaftes Mockup
Beispielhaftes Mockup

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.

Links definieren
Links definieren

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

Exportieren eines Bildes
Exportieren eines Bildes

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

Exportiertes Bild mit Wasserzeichen
Exportiertes Bild mit Wasserzeichen

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.

Marlene Knoche Verfasst von:

Informatikerin mit Hang zur Kunst. - Theaterbegeistert, mag Katzen und Kaffee.

2 Comments

  1. 21. März 2012
    Reply

    Hi Marlene,

    It’s nice tutorial you wrote there. For exporting clickable presentations you should take a look at storyboards. Using those you can produce clickable PDFs and HTML.

    • Marlene Knoche
      21. März 2012
      Reply

      Hi Peter,
      thank you for your compliment and thank you for your hint with the storyboards. I will check this out later.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Time limit is exhausted. Please reload CAPTCHA.