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.
We are putting our heart and soul into offering the best experience when it comes to wireframing. If you have any questions, feedback, ideas or just want to say hi - contact us.
For the best user experience we recommend accessing HotGloo via Chrome, Firefox or Safari.
Now it‘s time to get started! Let them wires bleed :)
The canvas size expands automatically or it can be easily adjusted to a fixed size within
Switch from EDIT to PREVIEW in order to test your wireframe‘s interactions. You‘ll also find all standard commands (undo/redo, cut/copy/paste/duplicate/delete, align, bring to front/send to back, group/ungroup), responsive wireframing, settings (including a custom grid system), share project, add variables, export to HTML and online help/support.
The sidebar features the sitemap, layers view, page notes and comments. The sitemap represents the hierarchical order of your project‘s pages. Edit, delete, duplicate pages. Drag and drop to reorder.
The element library features all common UI elements but also Symbols (interactive elements and masters) and many more. Elements are grouped by categories.
Select an element and you can edit its settings within properties: add color, change size and position or add interactions.
switch from edit/preview; select all/cut/copy/paste/duplicate/delete; group/ungroup; bring forward/send backward/bring to front/send to back; align; add viewports; undo/redo; add variables; export; share project; settings (canvas size/grid); help
add, sort, delete, duplicate, delete page
responsive wireframing mode
In Preview all your interactions are coming to life. Test your interactive wireframes or walk your client through a working prototype. You audience can leave feedback via comments delivered right to the editor, your account dashboard and to your email inbox.
 Change screen views
 Show/hide sidebar
 Show/hide page notes
 Show/hide/add comments
Pro tip: click shift to highlight all interactions.
When opening a project for the first time take a look at the project‘s settings. In SETTINGS you can activate ruler, smart guides, change the layer visibility, add a canvas background color and much more.
The element library features a wide range of standard elements (rectangle, circle, triangle, lines, ...) but also interactive elements that are highly interactive (viewstack, tab, formfields) and many more. You‘ll even find pre-made sets of interactive elements like signup boxes or date pickers.
To add elements to your wireframe just drag and drop them from the library onto the canvas.
Click an element to resize and to access the properties panel. Some elements you can double-click to add text to it or access their layers like with the Viewstack.
In the properties panel you can rename elements, change the position/size, lock the position, choose border color, fill, edit stroke strength and opacity, 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.
The sitemap is a set of pages on a web site, organized in hierarchical order. Add a new page by clicking the "+ Add 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.
Upload images and use them in your project by simply drag and dropping them on the canvas. Or use the image placeholder and drag images from your desktop on the imageplaceholder whenever you are ready. Images will also be stored in the image library of the project. Access the image library by clicking on any image in your project or by dragging the image element to the canvas.
To add an interaction click the element that should trigger the interaction, select INTERACTIONS in the properties panel and make your selection. Test your interactions by switching to preview.
Set up interactions for an element, activated on:
...triggering an action:
e.g. You want to send a user to a specific page in your wireframe after clicking the "Sign-in Button". Click the button and add a "Go to Page" interaction and select the page you want to forward the user to. After setting up an interaction you can immediately switch to preview to test-drive it.
With the variable builder you can simulate different sets of varia- bles. An observer links an element to a determined variable and an interaction is being carried out when this variable is being executed.
e.g. You created a sign-in panel and want to set up different variables. A variable 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. Now you can set up a variable set with the role: Users and the variables: visitors & customers. Use a sign-in button to flip to customers and tie an obersver to a viewstack element to show a different view when this variable is executed.
Symbols are reusable templates you can quickly add to any page in your sitemap. The huge benefit of wireframing with them is that you edit them in one place but changes are being applied globally across your project on every page this element has been added to.
Use smart elememts for headers, footers, menu, sign-in boxes ... they work like masters you are probably familiar with from working with desktop tools.
To create a Symbol just select the according tab in the element library and click ADD SYMBOL. In the Symbol canvas you can edit them. Once you are finished editing, close the master via the „X“ button. Add them on a page by simply drag and dropping it to the canvas like any other element. For editing it again, double click the Symbol on the canvas or in the Symbols list.
Once you add a new project you can choose which viewport you‘d like to set up as your default viewport. Choose a standard desktop width or if starting with a mobile rst approach then you‘d select one of the mobile preferences (you can also choose a custom page width for your default viewport).
Throughout your wireframing process you might want to add ano- ther viewport. You can do so by choosing ADD VIEWPORT in the upper le toolbar and choose your viewport.
In a second step you can also choose if this viewport should copy/ paste any content from a previous viewport or if you‘d like to start with a blank page again. In the example above there are already two mobile viewports been wireframed. For adding a desktop viewport you‘d select WEBISTE and copy elements from either the iPhone viewort or the iPad viewport.
Invite team members or stakeholders to co-work on projects by inviting them to your account or by sending them share links. To add a new person just go to the PEOPLE page. Click the ADD PERSON button and fill out the details. We will send an invitation with further instructions to the person added. And don‘t forget to add them to a project!
TIP! You can give someone admin access when adding them.
An ADMIN can …
An ADMIN can't …
Generate a share link right out of the editor or on the project page and email it to clients to preview the current project state. Choose if you want to share a particular page or screen view only. Decide i f you want to show the sidebar and page notes, passwort protect your link and give the receiver the right to read/write comments on your designs.
Easily attach feedback comments to a particular element or area you want to discuss in depth with team members.
Click and drag a new comment from the sidebar. Pick a color, choose your audience, a subject, message and click SAVE.
Unless disabled, each team member on the project receives new comments also via email notifications. Comment by replying to email notifications or click the note on the project‘s dashboard or the note icon in the editor.
You can export all comments of a project to a single pdf file.
Click on the export icon in the upper toolbar and choose EXPORT TO PDF.
When communicating/presenting your wires to a client, we recommend using the page HOME for setting up a brief manual:
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.
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 doesn’t support shortcuts at all, that’s why we are not recommending it).