Getting started

wireframing
(V3.2)

Your first steps to wireframing and prototyping with HotGloo.

2008-2014 HotGloo GbR. All rights reserved.

Working with HotGloo

Welcome dear wireframe rookie, sensei, guru or ninja. No matter which level you
are at guess we all agree that getting started with a new tool takes some time.
We created this guide to keep the learning curve as short as possible. It takes
about 60min to read and test-drive the various steps of this guide.
With this guide you will learn:
- How to get started.
- How to add and edit pages in the sitemap.
- How to add and edit UI elements.
- How to add interactions.
- How to create and use master elements.
- How to wireframe together with others.
- How to add feedback notes.
- How to import premade UI stencils to your account.
- How to create responsive wireframes.
- How to use shortcuts.
We are putting our heart and soul into offering the best web-based experience
when it comes to wireframing. If you have any questions, feedback, ideas or just
want to say hi - contact us at http://www.hotgloo.com/contact.
For the best user experience we recommend accessing HotGloo via Chrome or
Safari.
Now its time to get started! Let them wires bleed :)

2008-2014 HotGloo GbR. All rights reserved.

Page 2

The Wireframe Editor

Canvas
The canvas size expands automatically or it can
be easily adjusted to a fixed size within
SETTINGS.

Upper Toolbar
Sitemap

Sitemap
Add, edit, delete, duplicate pages or drag and
drop to reorder.

Canvas

Libraries
Lower Toolbar

2008-2014 HotGloo GbR. All rights reserved.

Upper Toolbar
Switch from EDIT to REVIEW to test your
wireframes interactions or to annotate feedback notes. Youll also find all standard commands (undo/redo, cut/copy/paste/duplicate/
delete, align, bring to front/send to back,
group/ungroup), states, layers, responsive
wireframing, settings (including a custom grid
system), versioning und much more.

Libraries
The ELMENT LIBRARY features all common
standard and interactive elements, 2000+
icons and much more. Switch to the MASTER
LIBRARY in order to create master templates,
to the SHARED MASTER LIBRARY for sharing
masters across your account. The WIDGET LIBRARY offers readymade UI widgets and mobile
templates. Upload and image to the IMAGE
LIBARY and use them in your projects.
Lower Toolbar
The lower toolbar displays the team collaboration status, screen views (when wireframing
responsively) and various canvas settings (grid,
snap to grid, rulers, guides).
Page 3

EDIT mode - where the wireframe magic is happening.

(1) Toolbar
switch from edit/review; select all, cut/copy/paste/
duplicate/delete; align; bring forward/send backward/
bring to front/send to back; group/ungroup; undo/
redo; zoom in/out; settings (canvas size/grid); states;
layer; responsive wireframing; versoning; help.
(2) Sitemap (add, sort, duplicate and delete pages)
(3) Properties window
2008-2014 HotGloo GbR. All rights reserved.

overall (rename, change position/size, lock element)

look (background/border color, stroke width ...)
content (font/padding/indent/leading, add image)
interactions
(4) Libraries (standard UI elements, master elements,
shared master library, widget library, image library)
(5) Project & collaboration info / chat with team
(6) Switch between different responsive screen views

Page 4

Switch to REVIEW mode to test your wireframes and to comment.

5
In Review all your interactions are coming to life.
Test your interactive wireframes or walk your
client through a working protoype. Collaborators
can leave feedback via notes delivered right to
the DASHBOARD and to your email inbox.

2008-2014 HotGloo GbR. All rights reserved.

(1) Hide notes

(2) Add notes
(3) Export to png/pdf; export notes to rtf
(4) Add to-do (Basecamp, Asana connect)
(5) Change screen views (default/mobile/tablet)
(6) Show/hide sidebar

Page 5

Part 1: Say hello to your new wireframe tool.

Step 1: Editing layout settings

When opening a project for the first time take a look at the
projects settings. In SETTINGS you can adjust the page size, center the wireframe in review mode, set up a grid system or choose a
background color.

Step 2: Enabling canvas settings

In the lower toolbar youll find helpful canvas settings.
The GRID is the perfect alignment tool for design. By combining the
use of the GRID with the SNAP TO GRID feature, you can perfectly
align objects along grid lines.
The RULER feature helps you position elements precisely across the
width or length of a page. You can also drag auxiliary lines out of
the RULER for an even more precise workflow.
GUIDES are automatically displayed auxiliary lines to enable precise
layout and alignment of items on the canvas.

2008-2014 HotGloo GbR. All rights reserved.

Page 6

Step 3: Adding UI elements to the canvas

The element library features a wide range of standard elements
(rectangle, circle, triangle, lines, symbols ...) but also smart elements that are highly interactive (viewstack, tab, accordion, group
box, menu) and many more. Youll even find pre-made sets of elements with the pre-made UI stencils, located in the Master Library
in the upper toolbar.
To add elements to your wireframe just drag and drop them from
the library onto the canvas.
Learn more about interactive elements by watching the
tutorial video: http://vimeo.com/hotgloo/viewstack

2008-2014 HotGloo GbR. All rights reserved.

Step 4: Editing UI elements

Click an element to resize and to access the properties window.
Right-click an element to edit the label text, to copy, paste, duplicate, cut or delete it. Double-click an element to add text to it.
In the properties window you can rename elements, change the
position/size, lock the position, choose border color, fill, edit stroke
strength and opacity, add gradient overlay, add rounded corners,
edit font (size, color) and add interactions or tie an observer to the
element.
Note: The properties window differs, depending on the selected
element.

Page 7

Step 5: Adding and editing pages in the sitemap

The sitemap is a set of pages on a web site, organized in hierarchical order. Add a new page by clicking the "+ New Page" button,
name your new page and hit return. Duplicate or delete pages by
clicking the appropriate button. To reorganize the sitemap, hover
over a page name, click on the 3 horizontal lines (located on the
right) and drag and drop a page. Dragging a page onto an existing
page will transform the page to a child page.

Learn more about the sitemap by watching the tutorial

video: http://www.vimeo.com/hotgloo/sitemap

2008-2014 HotGloo GbR. All rights reserved.

Step 6: Adding a menu bar

There are two different versions of menu elements available: a
horizontal and a vertical menu. Place a menu element onto the canvas and choose from various settings:
Type: the menu element is set to automatic by default (whole sitemap will be displayed in the menu). To define your own tabs just set
it to "Manual".
Page: choose a page from the dropdown to display only this designated page in the menu. This feature also allows to hide the starting
page from the menu.
Visible Sub-levels: choose how much detail you need.
Border: choose a border color.

Page 8

Step 7: Adding images

Upload images and use them in a selected project or across your
account. Click on IMAGE LIBRARY. Select the PROJECT tab to make
an image available for the current project only or choose ACCOUNT
to share an image across projects.
Click UPLOAD IMAGES. Select an image from your disk and click
OPEN. The image is being uploaded to your image library and will
appear in the tab prior selected. To insert an image just drag and
drop it onto the canvas.

2008-2014 HotGloo GbR. All rights reserved.

Page 9

Part 2: Interactions turn your wireframes into working prototypes.

Step 1: Add interactions to elements

To add an interaction click the element that should trigger the
interaction, select INTERACTIONS in the PROPERTIES window and
make your selection. Test interactions in Review mode.

triggering an action:
- got to page
- show message
- go to URL

Set up interactions for an element, activated on:

- click (interaction is fired upon element click)
- init (interaction is fired upon init event)
- over (interaction is fired upon cursor over)
- out (interaction is fired upon cursor out)
- change (interaction is fired upon element change)
- focus in/out (interaction is fired upon focus change)
- keyboard enter (interaction is fired upon keyboard enter)
- item click (interaction is fired upon item click)

or triggering another element:

- change element visibility (show/hide/toggle other elements)
- change state value (to a predefined state set)
- change container view (available for viewstack, accordion, tab)
- select item (available for buttonbar, linkbar, list element)
- set value (available for slider, progress bar, rating bar)
- change selection (available for radio button, checkbox)

2008-2014 HotGloo GbR. All rights reserved.

Learn more about interactions by watching the tutorial

video: http://www.vimeo.com/hotgloo/interactions
Page 10

Step 2: States & Observers

With the observer function you can simulate different sets of states. An observer links an element to a determined state and an
interaction is being carried out when this state is reached.
e.g. You created a sign-in panel and want to set up different states.
A state could be a distinction between a signed-in customer versus
a website visitor. You want the customer experience the website
differently from a visitor by displaying different views of a menu or
a different website content.

Learn more about states by watching the tutorial video:

http://www.vimeo.com/hotgloo/states

2008-2014 HotGloo GbR. All rights reserved.

Page 11

Part 3: Using master templates to speed up your wireframe workflow.

Step 1: What are masters?

Masters (=master elements) are reusable templates you can quickly
add to any page in your sitemap. The huge benefit of wireframing
with masters is that you edit them in one place but changes are
being applied globally across your project on every page the master
has been added to.

Step 2: Setting up masters

To create a master element just select the MASTER tab in the
element library and click ADD MASTER and name your new master
template.

Use masters for headers, footers, menu, sign-in boxes ...

2008-2014 HotGloo GbR. All rights reserved.

Page 12

Step 3: Editing/placing masters

Edit masters the same way as pages. Drag and drop elements onto
the masters canvas.
Once you are finished editing, close the masters view via the "X"
button.

Step 4: Module Vs. template

Master elements can be used as templates or modules:
Templates are set to fixed positions. You cant reposition templates
on a page. To repostion them you need to open the masters editor.
Modules arent locked to a position. Click and reposition them like
any other element on the page.

Now its about time to add your master template to a page in your
sitemap. Select the page you want to add your master to. Click "+"
next to the preferred master element and it will be added to the
selected page.

2008-2014 HotGloo GbR. All rights reserved.

Page 13

Step 5: Global Changes

To edit Masters simply double klick them or enter the masters edit
mode by clicking the pencil icon within the PROPERTIES window.
Apply changes and close the master editor. Changes are now being
carried out globally across your project.

Step 6: Widget Library

The WIDGET LIBRARY offers a fast growing selection of UI widgets
such as: iPhone, iPad UI elements, sign-up forms, webshop forms,
login panels, modular dialogues and many more. Simply enter the
library, explore and add widgets to your project to use them with
your wireframes.
Shared Master Library
The SHARED MASTER LIBRARY is a collection of all your previously
uploaded and shared masters. Upload your own master elements
and share them across your account.

Learn more about masters by watching the tutorial

video: http://www.vimeo.com/hotgloo/masters

2008-2014 HotGloo GbR. All rights reserved.

Page 14

Part 4: Wireframe with your team. Review with stakeholders.

Step 1: Invite others to your account

Invite team members or stakeholders to co-work on projects by
inviting them to your account.
To add a new person just go to the PEOPLE page. Click the ADD A
NEW PERSON button and fill out the details. We will send an invitation with further instructions to the person added.

Step 2: Assign people to a project

After youve added people you can assign them to projects. Click
the SETTINGS button of the project you want to assign a person
to. Now select the people you want to assign from the list, choose
which permission you want to give them (Editor or Reviewer permission) and click ADD.

TIP! You can give someone admin access when adding them.

An EDITOR can co-work on projects, but has no project or account

management rights. A REVIEWER can view projects and leave notes.

An ADMIN can
create and edit projects
add and manage people
change project settings

An ADMIN cant
- upgrade, downgrade, archive
or cancel the account
- update the billing info
- view the billing statements

2008-2014 HotGloo GbR. All rights reserved.

TIP! Generate a preview link and email it to clients to preview the

current project state. You can generate a previewlink on the PROJECTS -> SETTINGS page.

Page 15

Part 5 : Review wireframes with the help of feedback notes.

Step 1: Adding notes and commenting on notes

When in Review mode you can easily attach feedback notes to a
particular element or area you want to discuss in depth with team
members.
Click and drag a new note from the ADD NOTE button. Pick a color,
choose a subject (min. 1 character), message (min. 3 characters) and
click SAVE NOTE.

Step 2: Export feedback notes

You can export all feedback notes of a project to a single rich text
format file.
Switch to REVIEW. Click on the export icon in the upper toolbar and
choose EXPORT TO RTF. Select all pages or single pages you want
to export the notes from and click START EXPORT. Click DOWNLOAD RTF and youll have all the notes from your project saved to
one document ready for further usage.

Unless disabled, each team member on the project receives new

feedback notes or comments also via email notifications. Comment
by replying to email notifications or click the note on the projects
dashboard or the note icon in REVIEW.

2008-2014 HotGloo GbR. All rights reserved.

Page 16

How to communicate wireframes

Links & resources

When communicating/presenting your wires to a client, we recommend using the page HOME for setting up a brief manual:
Make your point and explain that they are looking at wireframes
not at visual design.

Visit the HELP page for more infos

Explain further (if you havent already) what wireframes are and
why they are important.

Watch the tutorial videos

Have you built a working prototype, make a short description on

how to interact with it, which steps a reviewer should take.

Follow us on Twitter

Encourage them to leave feedback via feedback notes. Explain to

them how feedback notes work and how the feedback process will
look like.

Like us on Facebook

Offer assistance. If your client is reviewing wireframes for the first

time, take them by the hand and walk them through the first steps
together.

2008-2014 HotGloo GbR. All rights reserved.

Page 17

HotGloo Shortcuts Cheat Sheet

Backspace/Del/Entf
CTRL+A
CTRL+D
CTRL+G
SHIFT+CTRL+G
CTRL+S
CTRL+C
CTRL+V
SHIFT+CTRL+V
CTRL+X
CTRL+Z
CTRL+Y
CTRL+.

Interaction Shortcuts (in Review only)

Navigation

Common Shortcuts
delete
select all
duplicate
group
ungroup
save
copy
paste
paste at cursor
cut
undo last action
redo last action
toggle sidbebar

CTRL+PLUS
CTRL+MINUS
CTRL+B
CTRL+.
CTRL+SHIFT+.
ESC

zoom in
zoom out
toggle sidebar
toggle ruler guides
lock ruler guides
exit current group

SHIFT+1
SHIFT+2
SHIFT+3
SHIFT+4

show active state values on stage

show all interactions on stage
show all observers on stage
show all elements on stage

Hold Space Bar hold space bar to

move the canvas

Tip! To keep an image from stretching too far vertically or horizontally simply click and hold SHIFT - then click on one corner of an element. Hold
SHIFT and drag the corner of the element. To select multiple elements press and hold SHIFT then click on the elements you want to select.
If you are on a Mac just use CMD instead of CTRL. Shortcuts heavily depend on your Browser, OS and keyboard type. It could also happen that some
shortcuts do not work in all browsers because the browser has already reserved a shortcut for a different action (i.e. Internet Explorer doesnt support shortcuts at all, thats why we are not recommending it).

2008-2014 HotGloo GbR. All rights reserved.

Page 18