HotGloo_QuickStartGuide

8/9/2019 HotGloo_QuickStartGuide

1/18

Getting started

wireframing(V3.2)

2008-2014 HotGloo GbR. All rights reserved.

Your first steps to wireraming and prototyping with HotGloo.


2/18

2008-2014 HotGloo GbR. All rights reserved. Page 2

Welcome dear wirerame rookie, sensei, guru or ninja. No matter which level youare 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 takesabout 60min to read and test-drive the various steps o 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 wirerame together with others.- How to add eedback notes.

- How to import premade UI stencils to your account.- How to create responsive wirerames.- How to use shortcuts.

We are putting our heart and soul into offering the best web-based experiencewhen it comes to wireraming. I you have any questions, eedback, ideas or justwant to say hi - contact us at http://www.hotgloo.com/contact.

For the best user experience we recommend accessing HotGloo via Chrome or

Saari.

Now its time to get started! Let them wires bleed :)

Working with HotGloo
http://www.hotgloo.com/contacthttp://www.hotgloo.com/contact


3/18


CanvasThe canvas size expands automatically or it canbe easily adjusted to a fixed size withinSETTINGS.

Upper ToolbarSwitch rom EDIT to REVIEW to test yourwirerames interactions or to annotate eed-back notes. Youll also find all standard com-mands (undo/redo, cut/copy/paste/duplicate/delete, align, bring to ront/send to back,group/ungroup), states, layers, responsivewireraming, settings (including a custom gridsystem), versioning und much more.

SitemapAdd, edit, delete, duplicate pages or drag and

drop to reorder.

LibrariesThe ELMENT LIBRARY eatures all commonstandard and interactive elements, 2000+icons and much more. Switch to the MASTERLIBRARY in order to create master templates,to the SHARED MASTER LIBRARY or sharingmasters across your account. The WIDGET LIB-RARY offers readymade UI widgets and mobile

templates. Upload and image to the IMAGELIBARY and use them in your projects.

Lower ToolbarThe lower toolbar displays the team collabo-ration status, screen views (when wireramingresponsively) and various canvas settings (grid,snap to grid, rulers, guides).

The Wireframe Editor

Upper Toolbar

Lower Toolbar

Sitemap

Libraries

Canvas


4/18


EDIT mode - where the wireframe magic is happening.

(1) Toolbarswitch rom edit/review; select all, cut/copy/paste/

duplicate/delete; align; bring orward/send backward/bring to ront/send to back; group/ungroup; undo/redo; zoom in/out; settings (canvas size/grid); states;layer; responsive wireraming; 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 ino / chat with team

(6) Switch between different responsive screen views


5/18


5

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

In Review all your interactions are coming to lie.

Test your interactive wirerames or walk yourclient through a working protoype. Collaboratorscan leave eedback via notes delivered right tothe DASHBOARD and to your email inbox.

(1) Hide notes

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


6/18


Step 1: Editing layout settingsWhen opening a project or the first time take a look at theprojects settings. In SETTINGS you can adjust the page size, cen-ter the wirerame in review mode, set up a grid system or choose abackground color.

Step 2: Enabling canvas settingsIn the lower toolbar youll find helpul canvas settings.

The GRID is the perect alignment tool or design. By combining theuse o the GRID with the SNAP TO GRID eature, you can perectlyalign objects along grid lines.

The RULER eature helps you position elements precisely across thewidth or length o a page. You can also drag auxiliary lines out o

the RULER or an even more precise workflow.

GUIDES are automatically displayed auxiliary lines to enable preciselayout and alignment o items on the canvas.

Part 1: Say hello to your new wireframe tool.


7/18


Learn more about interactive elementsby watching thetutorial video: http://vimeo.com/hotgloo/viewstack

Step 3: Adding UI elements to the canvasThe element library eatures a wide range o standard elements(rectangle, circle, triangle, lines, symbols ...) but also smart ele-ments that are highly interactive (viewstack, tab, accordion, groupbox, menu) and many more. Youll even find pre-made sets o ele-ments with the pre-made UI stencils, located in the Master Libraryin the upper toolbar.

To add elements to your wirerame just drag and drop them rom

the library onto the canvas.

Step 4: Editing UI elementsClick an element to resize and to access the properties window.Right-click an element to edit the label text, to copy, paste, dupli-cate, cut or delete it. Double-click an element to add text to it.

In the properties window you can rename elements, change theposition/size, lock the position, choose border color, fill, edit strokestrength and opacity, add gradient overlay, add rounded corners,edit ont (size, color) and add interactions or tie an observer to the

element.

Note: The properties window differs, depending on the selectedelement.


8/18


Step 5: Adding and editing pages in the sitemapThe sitemap is a set o pages on a web site, organized in hierar-chical order. Add a new page by clicking the "+ New Page" button,name your new page and hit return. Duplicate or delete pages byclicking the appropriate button. To reorganize the sitemap, hoverover a page name, click on the 3 horizontal lines (located on theright) and drag and drop a page. Dragging a page onto an existingpage will transorm the page to a child page.

Step 6: Adding a menu barThere are two different versions o menu elements available: ahorizontal and a vertical menu. Place a menu element onto the can-vas and choose rom various settings:Type: the menu element is set to automatic by deault (whole site-map will be displayed in the menu). To define your own tabs just setit to "Manual".Page: choose a page rom the dropdown to display only this desig-nated page in the menu. This eature also allows to hide the starting

page rom the menu.Visible Sub-levels: choose how much detail you need.Border: choose a border color.

Learn more about the sitemapby watching the tutorialvideo: http://www.vimeo.com/hotgloo/sitemap


9/18


Step 7: Adding imagesUpload images and use them in a selected project or across youraccount. Click on IMAGE LIBRARY. Select the PROJECT tab to makean image available or the current project only or choose ACCOUNTto share an image across projects.

Click UPLOAD IMAGES. Select an image rom your disk and clickOPEN. The image is being uploaded to your image library and willappear in the tab prior selected. To insert an image just drag and

drop it onto the canvas.


10/18


Learn more about interactionsby watching the tutorialvideo: http://www.vimeo.com/hotgloo/interactions

Step 1: Add interactions to elementsTo add an interaction click the element that should trigger theinteraction, select INTERACTIONS in the PROPERTIES window andmake your selection. Test interactions in Review mode.

Set up interactions or 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)- ocus in/out (interaction is fired upon ocus 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 or viewstack, accordion, tab)- select item (available or buttonbar, linkbar, list element)- set value (available or slider, progress bar, rating bar)- change selection (available or radio button, checkbox)

Part 2: Interactions turn your wireframes into working prototypes.


11/18


Step 2: States & ObserversWith the observer unction you can simulate different sets o sta-tes. An observer links an element to a determined state and aninteraction 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 versusa website visitor. You want the customer experience the websitedifferently rom a visitor by displaying different views o a menu ora different website content.

Learn more about statesby watching the tutorial video:http://www.vimeo.com/hotgloo/states


12/18


Step 1: What are masters?Masters (=master elements) are reusable templates you can quicklyadd to any page in your sitemap. The huge benefit o wireramingwith masters is that you edit them in one place but changes arebeing applied globally across your project on every page the masterhas been added to.

Use masters or headers, ooters, menu, sign-in boxes ...

Step 2: Setting up mastersTo create a master element just select the MASTER tab in theelement library and click ADD MASTER and name your new mastertemplate.

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


13/18


Step 3: Editing/placing mastersEdit masters the same way as pages. Drag and drop elements ontothe masters canvas.

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

Now its about time to add your master template to a page in yoursitemap. Select the page you want to add your master to. Click "+"

next to the preerred master element and it will be added to theselected page.

Step 4: Module Vs. templateMaster elements can be used as templates or modules:Templates are set to fixed positions. You cant reposition templateson a page. To repostion them you need to open the masters editor.Modules arent locked to a position. Click and reposition them likeany other element on the page.


14/18


Step 5: Global ChangesTo edit Masters simply double klick them or enter the masters editmode by clicking the pencil icon within the PROPERTIES window.

Apply changes and close the master editor. Changes are now beingcarried out globally across your project.

Learn more about mastersby watching the tutorialvideo: http://www.vimeo.com/hotgloo/masters

Step 6: Widget LibraryThe WIDGET LIBRARY offers a ast growing selection o UI widgetssuch as: iPhone, iPad UI elements, sign-up orms, webshop orms,login panels, modular dialogues and many more. Simply enter thelibrary, explore and add widgets to your project to use them withyour wirerames.

Shared Master LibraryThe SHARED MASTER LIBRARY is a collection o all your previously

uploaded and shared masters. Upload your own master elementsand share them across your account.


15/18


Step 1: Invite others to your accountInvite team members or stakeholders to co-work on projects byinviting them to your account.To add a new person just go to the PEOPLE page. Click the ADD ANEW PERSON button and fill out the details. We will send an invita-tion with urther instructions to the person added.

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

Step 2: Assign people to a projectAfer youve added people you can assign them to projects. Clickthe SETTINGS button o the project you want to assign a personto. Now select the people you want to assign rom the list, choosewhich permission you want to give them (Editor or Reviewer per-mission) and click ADD.

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

tes.

TIP! Generate a preview link and email it to clients to preview thecurrent project state. You can generate a previewlink on the PRO-JECTS -> SETTINGS page.

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

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

An ADMIN cant - upgrade, downgrade, archiveor cancel the account- update the billing ino- view the billing statements


16/18


Step 1: Adding notes and commenting on notesWhen in Review mode you can easily attach eedback notes to aparticular element or area you want to discuss in depth with teammembers.

Click and drag a new note rom the ADD NOTE button. Pick a color,choose a subject (min. 1 character), message (min. 3 characters) andclick SAVE NOTE.

Unless disabled, each team member on the project receives neweedback notes or comments also via email notifications. Commentby replying to email notifications or click the note on the projectsdashboard or the note icon in REVIEW.

Step 2: Export feedback notesYou can export all eedback notes o a project to a single rich textormat file.

Switch to REVIEW. Click on the export icon in the upper toolbar andchoose EXPORT TO RTF. Select all pages or single pages you wantto export the notes rom and click START EXPORT. Click DOWN-LOAD RTF and youll have all the notes rom your project saved toone document ready or urther usage.

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


17/18


Links & resourcesHow to communicate wireframesWhen communicating/presenting your wires to a client, we recom-mend using the page HOME or setting up a brie manual:

Make your point and explain that they are looking at wireframesnot at visual design.

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

Have you built a working prototype, make a short description onhow to interact with it, which steps a reviewer should take.

Encourage them to leave feedback via feedback notes. Explain tothem how eedback notes work and how the eedback process willlook like.

Oer assistance. If your client is reviewing wireframes for the rsttime, take them by the hand and walk them through the first stepstogether.

Visit the HELP page or more inos

Watch the tutorial videos

Follow us on Twitter

Like us on Facebook


18/18


Tip!To keep an image rom stretching too ar vertically or horizontally simply click and hold SHIFT - then click on one corner o an element. HoldSHIFT and drag the corner o the element. To select multiple elements press and hold SHIFT then click on the elements you want to select.

I you are on a Mac just use CMD instead o CTRL. Shortcuts heavily depend on your Browser, OS and keyboard type. It could also happen that someshortcuts do not work in all browsers because the browser has already reserved a shortcut or a different action (i.e. Internet Explorer doesnt sup-port shortcuts at all, thats why we are not recommending it).

HotGloo Shortcuts Cheat Sheet

Interaction Shortcuts (in Review only)

SHIFT+1 show active state values on stageSHIFT+2 show all interactions on stageSHIFT+3 show all observers on stageSHIFT+4 show all elements on stage

Navigation

CTRL+PLUS zoom inCTRL+MINUS zoom outCTRL+B toggle sidebarCTRL+. toggle ruler guidesCTRL+SHIFT+. lock ruler guidesESC exit current group

Hold Space Bar hold space bar tomove the canvas

Common Shortcuts

Backspace/Del/Ent deleteCTRL+A select allCTRL+D duplicateCTRL+G groupSHIFT+CTRL+G ungroupCTRL+S saveCTRL+C copyCTRL+V pasteSHIFT+CTRL+V paste at cursor

CTRL+X cutCTRL+Z undo last actionCTRL+Y redo last actionCTRL+. toggle sidbebar

Documents

HotGloo_QuickStartGuide