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.
