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.
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 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 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.
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.
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.
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.
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.
The Toolbar exposes various quick editing actions:
Actions in order of their appearance are:
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.
Some actions are also available from the main application menu. There is the View menu:
The Object menu:
And the Format menu:
Some of the actions can also be found in File and Edit menus.
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:
Use the Palette to add widgets to a screen. A widget can be added in several different ways:
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.
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.
To delete selected widgets just hit Del. The same operation is available from the context menu and from the toolbar.
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.
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.
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.
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- | |
~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 # Numbered ## List |
|
h1. Heading 1 h2. Heading 2 h3. Heading 3 h4. Heading 4 h5. Heading 5 h6. Heading 6 |
![]() |
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:
Insert \n sequence inside the text to break it in multiple lines. Use Shift+Enter shortcut to do it without typing.
The Image widget lets you use image files in your wireframes. You can use several methods to add an image:
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:
If you would like to see other icons added please don’t hesitate to contact me.
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.
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 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.
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.
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.
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.
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 | |
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 |
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 |
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.
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.
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.
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.
Use the Print action to directly print your wireframes and storyboards. Printing works best with IDEs based on Eclipse Galileo (3.5) and later.
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.
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
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.
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.
The palette can be customized using its context menu. The following customizations can be applied:
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!