Getting started prototyping with HotGloo.

Your first steps to a whole new prototype experience.

Welcome dear prototype 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:

We are putting our heart and soul into offering the best web-based experience when it comes to prototyping. If you have any questions, feedback, ideas or just want to say hi - get in touch with us.

We hope our tool will help you to become more productive at prototyping,

The Prototype Editor

Canvas

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

Upper Toolbar

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

Sitemap

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

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 LIBRARY and use them in your projects.

The lower toolbar displays the team collaboration status, screen views (when prototyping responsively) and various canvas settings (grid, snap to grid, rulers, guides)..

EDIT mode - where the prototype 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 prototyping; versoning; help.

(2) Sitemap

add, sort, duplicate and delete pages

(3) Properties window

  • 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

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

In REVIEW all your interactions are coming to life. Test your interactive prototypes or walk your client through them. Collaborators can leave feedback via notes delivered right to the DASHBOARD and to your email inbox

(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

Part 1: Say hello to your new prototype tool.

Step 1: Set up a page size

When opening a project for the first time take a look at the project's settings. In SETTINGS you can adjust the page size, center the prototype in review mode, set up a grid system or choose a background color for the canvas, the auxiliary lines and the off canvas section.

Step 2: Enabling canvas settings

In the lower toolbar you'll 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.

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. You'll 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 prototype just drag and drop them from the library onto the canvas.

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.

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.

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.

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.

Part 2: Interactions turn your mockups 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.

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)

triggering an action:

  • got to page
  • show message
  • go to URL

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)

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.

Part 3: Using master templates to speed up your prototype 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 prototyping 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.

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

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.

Step 3: Editing/placing masters

Edit masters the same way as pages. Drag and drop elements onto the master's canvas.

Once you are finished editing, close the master via the "X" button.

Now you can 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.

Step 4: Module Vs. Template

Master elements can be used as templates or modules:

Templates are set to fixed positions. You can't reposition templates on a page - only in the master's view.

Modules aren't locked to a position. Click and reposition them like any other element on the page.

Step 5: Global Changes

To edit Masters simply double klick them or enter the master's 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 prototypes.

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.

Part 4: Prototype 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.

TIP! You can give someone admin access (create & edit projects, add & manage people, change project settings) when adding them.

Step 2: Assign people to a project

After you've 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.

An EDITOR can co-work on projects, but has no project or account management rights. A REVIEWER can view projects and leave notes.

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.

Part 5: Review prototypes 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. 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 project's dashboard or the note icon in REVIEW.

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 you'll have all the notes from your project saved to one document ready for further usage.

How to communicate prototypes?

When communicating/presenting your wires to clients, we recommend using the page HOME for setting up a brief manual:


  • Make your point and explain that they are looking at prototypes not at visual design.
  • Explain further (if you haven't already) what prototypes are and why they are important.
  • If you have built a working prototype, make a short description on how to interact with it, which steps a reviewer should take.
  • Note that they can leave feedback through feedback notes. Explain to them how feedback notes work and how the feedback process will look like.
  • Offer assistance. If your client is reviewing prototypes for the first time, take them by the hand and walk through the first review together.