Introduction

Welcome to the WireframeSketcher User Guide. This guide is also available directly in Eclipse and can be found at Help > Help Contents > WireframeSketcher User Guide. If you feel that you don’t need to read user guides then try at least skimming through the Keyboard Shortcuts section to get an idea of what’s available. It is also a good idea to familiarize yourself with the Wiki Syntax.

top

User Interface

To get started open the Sketching perspective in Eclipse using Window > Open Perspective > Other… > Sketching. The screenshot below shows all the important views used by WireframeSketcher. These views are opened by default in Sketching perspective:

Screen Editor

Screen Editor

Screen Editor is where you create or modify your wireframes. The editor works along with other views like Palette, Properties, Links and Outline. Double-click the editor’s tab to maximize it and gain some precious screen space.

Project Explorer

Project Explorer view is where you can explore the contents of your projects. Screen files (files with .screen extension) have a distinctive icon in this view. Double-click the file to open it using the Screen Editor.

Palette

The Palette view is where you’ll find the widgets to use in your wireframes. You can change it’s position to the left side of the Screen Editor.

Various palette layout settings can be adjusted from the context menu. Right-click inside the palette to get access to it. You can make thumbnail icons smaller and make widgets display in a list.

You can place your own widgets and images in the palette by placing them in the “assets” folder in the root of your project.

The palette can also be opened in its own Eclipse view using Window > Show View > Palette. This gives you more layout options. You can even make the palette float above the editor area using detached views.

Two non-widget items available in the palette are the selection tools: Select and Marquee.

Properties

The Properties view allows you to quickly edit the properties of the selected objects. If multiple objects are selected then the view lets you edit just the common properties of those objects.

If you prefer to work with your editor maximized you can detach the Properties view so it can float above the editor canvas.

Outline

The Outline view displays the overview of the edited screen contents. Widgets are displayed in their Z-order, those in the back being at the start of the list and those in the front being at the end.

Widgets can be reordered using drag and drop. Other edit operations like copy&paste and delete are also available.

Links

The Links view is used for linking screens. When you select an object that supports linking the Links view will let you edit links for that object.

Toolbar

The Toolbar exposes various quick editing actions:

Screen Editor Toolbar

Screen Editor Toolbar Cont.

Actions in order of their appearance are:

Context Menu

Most of the actions available in the Toolbar are also available from the context menu. To open the context menu right-click on selected widgets.

Menu

Some actions are also available from the main application menu. There is the View menu:

View Menu

The Object menu:

Object Menu

And the Format menu:

Format Menu

Some of the actions can also be found in File and Edit menus.

top

Working with Screens

Creating a New Screen

Ensure that you have at least one project in your workspace. To create one use File > New > Project. Then create a new screen by selecting File > New > Screen:

New Screen Wizard

Adding Widgets

Use the Palette to add widgets to a screen. A widget can be added in several different ways:

Selection

To select a widget just click on it. For multiple selection hold the Control key while clicking to toggle the selected state of a widget. Hold Shift while clicking to add a widget to the current selection.

The Marquee tool in the Palette gives you another selection method. Use it to drag a bounding box around widgets you want to select. Marquee tool activates automatically when you start dragging in an empty space of the editor canvas. If the screen is crowded and has little empty space then use F4 keyboard shortcut to quickly activate the Marquee tool. Use F3 to go back to the Select tool.

You can also select widgets in the Outline view which keeps in sync with the editor’s selection.

Moving and Resizing

To move selected widgets just drag them using the mouse. Use Arrows to adjust the position of widgets in increments of 2px using the keyboard. Ctrl+Arrows let you adjust the size. Shift+Arrows and Shift+Ctrl+Arrows let you do the same thing in increments of 20px.

To resize selected widgets just grab with the mouse one of the small black squares and drag it. Some widgets cannot be resized in one or both directions. In this case black squares will only appear for directions that work.

Move and resize operations snap to guides, grid and geometry (smart guides). Use Alt key to temporarily disable snapping. Snapping behavior can be disabled in plugin’s preferences.

Most of the widgets are capable of calculating their size automatically. For example the Button widget will adjust its size to fit the text. If a widget is resized explicitly then it will keep this new size. You can use the Auto-Size action to turn back on the auto-sizing behavior.

During the move and resize operations you can see the resulting position and size displayed in the status bar. The same information is also displayed in a small overlayed tooltip when the widget’s size allows it.

For more precision use Align, Size and Distribute actions available from the from the Toolbar and the Context Menu.

You can lock widgets in place (Ctrl+L) to avoid moving or resizing them by accident.

Deleting Widgets

To delete selected widgets just hit Del. The same operation is available from the context menu and from the toolbar.

Ordering Widgets

When layed on the canvas widgets are drawn from back to front. Widgets placed in the front cover widgets placed in the back. To change the order in which widgets are drawn you can use the Send Backward and Bring Forward, Alt+Ctrl+Shift+B and Alt+Shift+Ctrl+F respectively. Widgets can also be reordered using drag and drop in the Outline view.

Grouping Widgets

You can group widgets so that they can be manipulated all at once. This is also useful for creating reusable components. Hit Ctrl+G to group the selected widgets. Use Ctrl+Shift+G to ungroup.

Duplicating Widgets

You can use Copy and Paste, Ctrl+C and Ctrl+V respectively to quickly duplicate the selection. This works both in the same screen and across multiple screens.

Another option is to use Duplicate with Ctrl+D. Duplicate is a bit smarter than a simple Copy and Paste. When you duplicate some widgets, move them and then duplicate them again, the duplicate action records the relative position of your first copy to the original and then positions the second copy relative to the first copy in the same way.

Yet another option is to press Ctrl and then drag the selection to quickly clone it.

Editing Text

Some widgets can display text. You can quickly edit this text in-place. To open the in-place editor just double-click the widget or hit Enter. When finished with editing press the Enter key.

When editing widgets that with multi-line text the Enter key serves to make new lines. In this case use the Ctrl+Enter combination to close the editor.

You can cancel the current edit by hitting the Esc key.

Certain widgets allow multiple items to be entered using comma (,) or newline as separator. When required, commas can be escaped using the \, syntax.

You can force multiple lines in widgets like Table, Placeholder, Button, Link and others by using the \n sequence.

Additionally, a wiki-like markup can be used to style the text.

What you type What it looks like
*bold text* bold text
_italicized text_ italicized text
+underlined text+ underlined text
-struck out text- struck out text
~disabled text~ disabled text
%(color:red)colored text% colored text
%(color:FF0000)colored text% colored text
+*_combine styles_*+ combine styles
[link] link
{icon-name} insert the icon named “icon-name”
${screen-name} insert the name of the current screen
${screen-path} insert the path of the current screen
\*escape markup\* *escape markup*
* A
* Bullet
** List
  • A
  • Bullet
    • List
# A
# Numbered
## List
  1. A
  2. Numbered
    1. List
h1. Heading 1
h2. Heading 2
h3. Heading 3
h4. Heading 4
h5. Heading 5
h6. Heading 6
Headings

Hit Ctrl+Space to insert an icon from the built-in icon library using auto-completion. To narrow down the list of icons just continue typing a search keyword directly in the text. Auto-completion is smart enough to recognize what you are trying to do.

Icons can also be inserted using text symbols. The same text symbol can render a different icon depending on the context. Here’s an example:

Name,Last\nName,Age v,Kids,Likes,Actions
Peter,Severin,33,[x],{computer},[Edit] [View]
Cristina,Severin,33,[x],{shopping-cart},[Edit] [View]
Henri,Severin,2,[],{note},[Edit] [View]
[-] You can even
  [+] Have
  [+] Treetable

Which renders to this:

Styling example

Insert \n sequence inside the text to break it in multiple lines. Use Shift+Enter shortcut to do it without typing.

Using Images

The Image widget lets you use image files in your wireframes. You can use several methods to add an image:

Using Icons

WireframeSketcher comes with 140+ contour, black & white icons that you can use in your wireframes. Icons come in 4 different sizes.

Here’s a list of widgets that let you use icons: Icon, Label, Button, Circle, Menu, Rectangle. Additionally there is a wiki syntax that lets you embed icons in any text. Some widgets will let you to change the icon color.

To explore available icons just use the Icon property in Properties View to open the Icon Chooser dialog:

Icon Chooser

If you would like to see other icons added please don’t hesitate to contact me.

Master Screens

Master screens let screens to include other screens. This is helpful for creating reusable bits like navigation, headers and footers. The reusable bits can then be used by other screens without resorting to copy&paste. Changes to the included screen are automatically reflected in every place it is used.

Like images, master screens can be added using two methods. You can either add the Master Screen widget from the palette and then use the Properties view to choose the screen to include. Or you can drag&drop screen files directly from the Project Explorer view into the editor.

Master screens let screens to include other screens. This is helpful for creating reusable bits like navigation, headers and footers. The reusable bits can then be used by other screens without resorting to copy&paste. Changes to the included screen are automatically reflected in every place it is used.

Like images, master screens can be added using two methods. You can either add the Master Screen widget from the palette and then use the Properties view to choose the screen to include. Or you can drag&drop screen files directly from the Project Explorer view into the editor.

Custom Properties

You can set custom id and data properties on widgets. You can extract these properties later from the screen XML file using your own or 3rd party tools.

To set custom properties use the Custom Properties… action from the Context Menu.

Mockups Gallery

Mockups Gallery is a user-contributed website for reusable wireframes, mockups, templates, stencils and components. Among other resources here you’ll find iPhone, iPad and Android stencils; grid system templates; additional widgets like calendar, wizard and others.

Use Mockups Gallery to jump-start your work and save some valuable time. Share your own resources by simply using your email client.

top

Working with Storyboards

A storyboard is a list of screens that shows how the UI changes in time as the result of user actions. For example you can use them to show the steps of a checkout process or prototype a wizard dialog. You can also use them for more complex things like UI animations produced by AJAX events in a web application.

You can also use storyboards for their multi-page PDF export capability. Just create a storyboard with the desired screens and then export them into a single PDF document.

Storyboards are created using the Storyboard Editor. A storyboard is saved in a file with a .story extension.

To add a screen to a storyboard you can use two methods. First method: use the Add Screen… action available in the context menu. The second method consists in simply dragging .screen files from the Project Explorer view and dropping them into the editor. Drag&drop can also be used to rearrange screens in a different order.

Use F5 to launch a full-screen presentation of your storyboard.

top

Linking Screens

Linking support lets you create interactive prototypes for your website or software application.

To link two screens select a widget and then specify the linked screen using the Links view. Widgets with multiple items allow you to specify a link target for each item. A small yellow icon lets you quickly see where your links are. You can click it to edit the linked screen.

Links

To test your prototype use the full-screen presentation mode. Clickable areas are highlighted and clicking on them takes you to the linked screen. You can disable link highlighting from the context menu. Arrow keys let you go back to the previous screen.

You can also create clickable PDF documents. To do so put all the linked screens of your prototype into a storyboard and then export it to PDF.

top

Keyboard Shortcuts

Here is the table that lists the the defined shortcuts. You can change these shortcuts and define new ones using the standard Eclipse Keys preference page. Open this page and then type WireframeSketcher in the filter field to list all the available actions. Mac OS X users, please also read the Keyboard Shortcuts on Mac OS X section.

Sequence Action
Editing
Ctrl+Z Undo the last operation
Ctrl+Y Redo the last undone operation
Ctrl+C Copy the selection
Ctrl+X Cut the selection
Ctrl+V Paste the contents of the clipboard
Ctrl+D Duplicate selected widgets
Del Delete the selection
Ctrl+G Group the selected widgets
Ctrl+Shift+G Ungroup the selected group
Ctrl+L Lock/Unlock the selected widgets
Ctrl+Space Quick add
Ctrl+B Toggle bold style
Ctrl+I Toggle italic style
Ctrl+U Toggle underline style
Ctrl+] or Ctrl+> Increase font size
Ctrl+[ or Ctrl+< Decrease font size
Ctrl+Alt+0 Reset font size to default
Ctrl+Shift+F Bring the selected widget to front
Alt+Ctrl+Shift+F Bring the selected widget one level forward
Ctrl+Shift+B Send the selected widget to back
Alt+Ctrl+Shift+B Send the selected widget one level backward
Inline Text Editing
Enter, Ctrl+Enter, F2 or double-click Edit the text of the selected widget
Esc Cancel the current edit
Enter Commit the current edit
Ctrl+Enter Commit the current edit for widgets with multiline text
Ctrl+Space Insert an icon
Shift+Enter Insert the \n multi-line separator
Moving and Resizing
Arrows Nudge selection by 1px
Shift+Arrows Nudge selection by 10px
Ctrl+Arrows Nudge resize selection by 1px
Ctrl+Shift+Arrows Nudge resize selection by 10px
Esc Cancel the current move/resize operation
Holding Alt Disable snapping
Holding Ctrl Centered resize
Holding Shift Constrained move. Move horizontally, vertically or on a diagonal.
. and > Cycle between resize/move handles. Once selected a handle use arrows to move/resize.
Selection
Shift+Click Add to the selection
Ctrl+Click Toggle the selected state of a widget
Ctrl+Drag Clone the selected widgets
Ctrl+A Select all widgets
F3 Activate the selection tool
F4 Activate the marquee tool
Zoom
Ctrl++ Zoom In
Ctrl+- Zoom Out
Ctrl+1 Actual Size
Ctrl+0 Zoom to Fit
Ctrl+MouseWheel Zoom In and Zoom Out
Other
Ctrl+P Print
Ctrl+Shift+I Export to image
Ctrl+Shift+P Export to PDF
F5 Launch full-screen presentation mode
Alt+Enter Open widget’s properties
Ctrl+S Save the changes
Space+Drag Scroll around using panning mode
MouseWheel Vertical scroll
Shift+MouseWheel Horizontal scroll
Presentation Mode
Arrows,N,Page Down,Space Go to the next screen
Arrows,P,Page Up,Backspace Go to the previous screen
Ctrl+L Toggle link highlighting
Spy Plugin
Alt+Shift+F5 Export the wireframe of the current window/dialog into the clipboard

Mac OS X

If you are a Mac OS X user then you can generally replace Ctrl with Command key in the above table. Shortcuts that do not fall under this rule are listed below:

Sequence Action
Editing
Ctrl+Space Quick add. This can come in conflict with Spotlight. You can change the shortcut used by Spotlight in System Preferences. A good alternative is Command+Space.
Selection
Alt+Drag Clone the selected widgets
Moving and Resizing
Holding Ctrl Centered resize

top

Exporting Your Work

Exporting to Image

To show off your screens you can produce PNG images from your screen files. To export a screen to PNG use the Export to Image action. This action can be invoked from the Toolbar, Context Menu or just by pressing Ctrl+Shift+I shortcut.

The exported image can be saved to clipboard or to a file.

Exporting to PDF

Another option for sharing your work is PDF format. You can export to PDF both screens and storyboards. To export a screen to PNG use the Export to PDF action. This action can be invoked from the Toolbar, Context Menu or just by pressing Ctrl+Shift+P shortcut.

Batch Image Export

To export multiple screen files to PNG images all at once use the Batch Image Export wizard which you can open by selecting: File > Export… > WireframeSketcher > Batch Image Export.

Batch PDF Export

To export multiple screen and storyboard files to PDF all at once use the Batch PDF Export wizard which you can open by selecting: File > Export… > WireframeSketcher > Batch PDF Export.

Printing

Use the Print action to directly print your wireframes and storyboards. Printing works best with IDEs based on Eclipse Galileo (3.5) and later.

XML

Screens and storyboards are saved directly using XML. The XML format is straightforward and its rules can be easily inferred. See XML Format Specification for more details.

Command Line

You can use command line to automate the exporting of your screens and storyboards. The executable that you launch and pass options to is eclipsec.exe on Windows and eclipse on Mac OS X and Linux. Here are a few examples that show how this works:

eclipsec.exe
 -application com.wireframesketcher.ui.screenExport \
 -data c:\eclipse\workspace \
 -noSplash
 -source c:\eclipse\workspace\mockups \
 -dest c:\mockups
 -format PNG
eclipsec.exe 
 -application com.wireframesketcher.ui.screenExport \
 -data c:\eclipse\workspace \
 -noSplash
 -source c:\eclipse\workspace\mockups\Mockup.screen \
 -dest c:\mockups
 -format PDF

top

Presenting Your Work

The presentation mode lets you show off wireframes and storyboards in a full-screen mode. The presentation can be launched using F5 keyboard shortcut. While in presentation mode, keyboard shortcuts like Arrows, Space, Backspace, Page Up and Page Down can be used to navigate between screens.

top

Preferences

Various aspects of the plugin can be customized using Eclipse preferences. To open the preferences dialog select Window > Preferences > WireframeSketcher.

The main page lets you to enter your license key if you have one. Here you’ll also find the Report a Bug button which helps you to email bug reports with all the necessary information.

The Screen Editor subpage is where you can customize the snapping behavior, the visibility of the rulers and grid, and the grid size.

Palette Preferences

The palette can be customized using its context menu. The following customizations can be applied:

top

SWT Spy Plugin

SWT Spy plugin allows you to convert your existing SWT UI into a wireframe that you can edit and revise afterwards.

To get started, open the dialog or window you want to mockup. Press Alt+Shift+F5 and the XML of the mockup will be copied into the clipboard. Open the “New Screen” wizard, and on the second page paste the XML. Hit Finish and you are done! Note that you can also paste the XML directly into a screen.

Technically Spy functionality is provided as a separate plugin: com.wireframesketcher.spy. You need to make sure that this plugin is included in your environment when you launch your Eclipse plugin or RCP application.

For more information and a video screencast please see the Spy plugin announcement.

There is swing2mockup community project that lets you do the same thing with your Swing UI!

top