Start

Menu and
Toolbar This square yellow icon
indicates an attached note.
Your projects,
screens and WireframeSketcher
storyboards

Welcome
Palette,
Properties, widgets and
Links and Notes Here's what you
your assets
have on your
screen

Next screen
Outline

This round yellow icon

indicates a link.
Click it to continue.

Mockup Extend Link Share

Get extra stencils from Mockups Gallery Share your work
Here’s what you can do with WireframeSketcher
WireframeSketcher
File Edit View Object Format Run Window Help

http://wireframesketcher.com Welcome

Help Contents
WireframeSketcher Tour Install Blog Forum About wireframing-tutorial
Use links to add interactivity
Search
assets
icons Report a Bug...
Start Mockup Extend Link Share Export to PDF Export to PNG
Wireframing tool for 7-location-map.svg License Key...
9-av-shuffle.svg
Professionals Add Assets from Mockups Gallery...
logo.png
Create wireframes in minutes Check for Updates
Get quality feedback fast
logo.screen Use storyboards to organize user stories
Star.svg Install New Software...
Build better software Screenshot and screen flows
Involve your entire team!
About

Present (F5) Print

Add your own icons to the icon library
Try it now or Take a tour

Mockup anything Get results fast Collaborate effortlessly

Use SVG images for new shapes and icons Export to HTML
and share online
Next screen

Happy wireframing!
Next screen

Next screen Back to the beginning

 Menu and
Toolbar This square yellow icon
indicates an attached note.
Your projects,
screens and WireframeSketcher
storyboards

Welcome
Palette,
Properties, widgets and
Links and Notes
Here's what you
have on your your assets
screen

Next screen
Outline

This round yellow icon

indicates a link.
Click it to continue.
1. Start
This the start screen that shows all the main parts of the WireframeSketcher's user interface.
You can find out more detailed information about each part by consulting the integrated help that can
be opened using F1.
This description in particular is a screen note that you can edit using the Notes view.

# Note
1 Notes represent an alternative way to annotate your screens. Notes can be added to any object
and can contain additional description that should be attached to that object.
Objects that have an attached note are displayed with a small overlay icon in the top right
corner to indicate that.
Use Notes to provide things like descriptions, explanations, more extensive documentation, and
specifications to designers and developers.
 Here’s what you can do with WireframeSketcher
WireframeSketcher
http://wireframesketcher.com

WireframeSketcher Tour Install Blog Forum About

Wireframing tool for

Professionals
Create wireframes in minutes
Get quality feedback fast
Build better software Screenshot
Involve your entire team!

Try it now or Take a tour

Mockup anything Get results fast Collaborate effortlessly

Next screen
2. Mockup
This screen shows a typical wireframe that you can create using WireframeSketcher.
With WireframeSketcher you get a rough, unfinished, hand-drawn look for your mockups. This way
your stakeholders won't be distracted by little details and you can focus on what's important. When
needed, you can instantly switch to a clean look.
 Get extra stencils from Mockups Gallery
File Edit View Object Format Run Window Help

Welcome

Help Contents
wireframing-tutorial Search
assets
icons Report a Bug...
7-location-map.svg License Key...
9-av-shuffle.svg
Add Assets from Mockups Gallery...
logo.png
logo.screen Check for Updates

Star.svg Install New Software...

About

Add your own icons to the icon library

Use SVG images for new shapes and icons

Next screen
3. Extend
WireframeSketcher can be easily extended with custom assets.
Make use of the user-contributed Mockups Gallery to jump-start your mockups and to get inspiration
from. Find Android, iPhone, iPad, Windows Phone stencils, extra icons and other useful resources on
our website or directly under Help > Add Assets from Mockups Gallery....
Do you need a common template, a master for all your screens? Want to reuse that standard dialog
in multiple places? Use components to do just that. Changes to a component are instantly visible in
all screens that use it. You can put them in the palette and create your own stencils. Any screen can
be a used as a component. This means that creating screen variations is easy without any
duplication. Easy inheritance mechanism lets you alter component's instance without breaking the link
to its origin.
Missing a widget? Want to include a logo? WireframeSketcher lets you use your own images. Color
images can be conveniently drawn in black and white to blend in with the overall look of the
wireframe. And the best thing - you can use SVG vector graphic images which will even automatically
get the hand-drawn look.
 Use links to add interactivity

Start Mockup Extend Link Share

Use storyboards to organize user stories

and screen flows

Next screen
4. Link
Use linking to create interactive prototypes.
Present your prototypes in full-screen mode and click-through to show how the application or website
is supposed work.
Export your prototype to clickable, high-quality PDF and let your clients test it themselves.
Storyboard your use-cases and show how the UI responds to user actions and changes in time. Use
storyboards to make slideshow presentations and export multi-page, interactive PDFs or HTML.
 Share your work

Export to PDF Export to PNG

Present (F5) Print

Export to HTML
and share online

Happy wireframing!
Back to the beginning
5. Share
Need to discuss an idea without other apps getting in your way? Want to make a presentation of the
prototype to your client? Full-screen presentation mode is one click away.
Want to send around your wireframes and storyboards? Export your wireframes to high-quality PDF,
HTML or PNG and you are all set. Upload and share exported HTML online on WireframeSketcher
servers (wiresketch.com).
You can always print out your wireframes on paper and then discuss them with your clients face to
face.