Documentation

Getting to Know UXToolbox

The following sections will introduce you to UXToobox, give you an idea of where everything is and what it is all used for.

Launching UXToolbox

After installation double-click the UXToolbox icon on your Desktop or click ‘Start|All Programs| softandGUI - UXToolbox 3|UXToolbox’ to launch UXToolbox.

After a few brief moments the UXToolbox splash screen will appear, shortly followed by the UXToolbox Welcome Screen (see below).

What’s What and What is it Used For

So you have managed to successfully install and launch UXToolbox, the next step is to find out where everything is and what is used for. The illustration above depicts UXToolbox’s main window divided up into its significant panels and areas. These sections are as follows;

1. The Canvas Panel
2. The Wireframe Panel
3. The UI Elements Panel
4. The Annotation Panel
5. The Properties Panel
6. The Objects Panel
7. The Toolbar

Before delving into creating our first set of wireframes (we call this a Solution) and prototypes we are going to spend a few moments getting to know each of these areas.

The Canvas Panel

The Canvas Panel takes up the majority of UXToolbox’s main window and is where all the fun happens. It is also where you will most likely spend most of your time bringing all of your ideas to life. It consists of a row of tabs across its top and the main drawing area underneath. Once you have created a new solution and selected a wireframe template you will be able to start dragging-and-dropping UI elements from the UI Elements panel onto the drawing area and designing the layout and content of your wireframes.

The simplest and maybe best way to think of the drawing area is like a big sheet of paper. Dragging an UI element onto the drawing area is just like drawing a picture of that element on the paper. By drawing lots of different UI elements and maybe adding some text and pictures here and there you can create a pictorial representation of your user interface. The good news is, unlike paper, you don’t have to reach for a rubber each time you change your mind and want to move, resize, customise or even delete something. To make drawing your screens quicker and easier the drawing area contains lots of features such as rulers, guidelines, grids etc. to help you.

Measurements on the rulers, visible on the left and top edges of the drawing area, are specified in pixels and are zeroed to the top left corner of the selected wireframe template’s screen; this is important as it allows for UI elements to be arranged and positioned with exact precision.

Software applications very rarely consist of just one page or screen. In order to design applications with more than one screen or window UXToolbox allows you to add multiple wireframes to your Solution. Each time you open or add a wireframe to a Solution a new tab will appear along the top of the Canvas Panel . Each tab correlates to an open wireframe in your solution and enables you to quickly switch between the different wireframes of your design. Think of that sheet of paper again with your wireframe drawn onto it. Now imagine that sheet of paper is part of a big pad filled with lots of sheets of paper all containing different wireframe drawings. The tabs at the top of the Canvas Panel simply allow you to switch between the different pages in your pad.

The Wireframes Panel

The Wireframes Panel is located on the left-hand side of the main window and comprises of a small toolbar across its top and a list of all of the wireframes in the current Solution underneath. Each wireframe is depicted as a thumbnail and is updated in real-time, meaning any changes to a wireframe’s design or layout will be instantly reflected in the wireframe’s thumbnail. Unlike the tabs along the top of the Canvas Panel, which only show which wireframes are open in the Solution, the Wireframe Panel displays thumbnail representations of all of the wireframes in the Solution. The number in brackets in the panel’s title bar reflects the total number of wireframes in the current Solution.

Double-clicking on a thumbnail in the Wireframes Panel will select and open the corresponding wireframe in the drawing area.

One of the wireframe thumbnails in the list will always contain a small ‘S’ shaped start icon in its top right corner. The start icon indicates which wireframe in the current Solution UXToolbox’s prototype presentations will begin with. By default the starting wireframe will always be the first wireframe added to the Solution, however a prototype can start with any of the wireframes contained within the Solution. To change which wireframe a prototype should begin with either select the intended wireframe and click the ‘Starting Wireframe’ button in the toolbar at the top of the Wireframes Panel, or right-click in the thumbnail of the desired wireframe and select ‘Set as Starting Wireframe’ from the popup menu that appears. More Information on creating Prototype Presentations can be found in the section ‘Turning your Wireframes into Prototypes’.

The Wireframes Panel Toolbar also contains shortcuts to some of the more commonly executed tasks relating to wireframes such as; adding a new wireframe to the Solution and duplicating or deleting the currently selected wireframe.

The Wireframes Panel can also be used to re-order or rename the wireframes in a Solution. To reorder the list of wireframes simply select the wireframe you wish to move and drag-and-drop it up or down the list. When you let go the list will be reordered with the selected wireframe in its new location. Renaming a wireframe can be achieved by double clicking on the wireframe’s name (underneath its thumbnail and entering a new one).

The UI Elements Panel

The UI Elements Panel is where you can find all of the UI elements and controls that you can be used to design your wireframes and applications. The elements are categorized into logical groups or families depending upon the style and appearance of the UI element. The groups are sorted alphabetical to make finding the UI element or control you are looking for as easy as possible.

The UI Elements Panel only displays the UI elements from one element group or family at a time. The available element groups are located in a list in the bottom section of the UI Elements Panel. To select a group simply click on its name in the list and its member elements will be displayed in the top half of the panel. The selected group is always highlighted blue.

There are two ways a UI element can be added to a wireframe. The first is to select the element you desire and simply drag-and-drop it onto you wireframe template in the Canvas Panel. Alternatively, simply double-click an element in the list and it will be automatically placed on the wireframe for you.

Don’t worry if your element starts off in the wrong place as you can simply move it to the position you want later.

The UI Elements Panel also contains a Search Box located at the top of the panel that can be used to search for a specific UI element or control in the list. Even with UI elements sorted alphabetically into groups it can still sometimes be difficult to find the control or UI element you are looking for. To use the search box simply start typing the name of the UI element or control you are looking for into the box. As you start typing the elements in the list will be filtered so that the element list only contains the controls and elements that match your search criteria. Once you have found the element in the search results you were looking for drag-and-drop it from the list onto the canvas panel as you would normally.

To return the control list to its normal state, (i.e. displaying all the available controls in the selected group) simply delete the text in the search box.

The Annotation Panel

The Annotations Panel enables you to add text descriptions and annotation to the wireframes in your solution.

To add a text description to a wireframe open the wireframe in the canvas panel and type the text you wish to enter into the Annotation Panel’s text area. The text will be automatically associated with the wireframe and be available to read or edit each time the wireframe is opened in the canvas panel.

The Annotation Panel also enables you to add Annotation Tags to your wireframes. An Annotation Tag is a small marker that can be placed on top of your wireframes to describe or document localised areas of interest, complexity or to provide additional information about part of the wireframe. e.g. ‘the values on this screen are retrieved from the database’, or ‘the banner advert is linked to ‘...’ and will change each time someone visits the page’, etc. To edit the text of an annotation tag, first select it on the Canvas Panel (the annotation panel will display the annotation tag’s text), then enter/edit the new text in the panel. As soon as you deselect the annotation tag or the Annotation Panel looses focus, the text displayed will be committed to the tag.

The toolbar along the top of the Annotation Panel can be very useful when annotating your wireframes. Stating from the left the toolbar enables you to you to; show/hide the annotation tags, add new annotation tags to your wireframes, navigate around the annotation tags on your wireframes and also sort the order of your annotation tags, or rather the way in which they are labelled (this can be quite useful if you have already added a few annotation tags to a wireframe then realise you need to add a new one near at the top of your wireframe).

The toolbar also allows you to edit the visual appearance of the annotation tags (so you can avoid situations such as having blue annotation tags over the top of a blue screen). Finally, the last button on the toolbar enables you to delete any annotation tags you may selected on the Canvas Panel.

More information regarding the Annotation Panel can be found in the section ‘Documenting Your Wireframes’.

The Properties Panel

The visual and behavioural properties of all of the UI elements and controls supported by UXToolbox can all be edited using the Properties Panel. This means you do not have to use the UI elements and controls as they appear straight out of the UI Elements Panel; instead you have free reign to customise their appearance as much or as little as you like.

The Properties Panel also makes it possible to view and edit the properties of the wireframe templates you have added to your solution.

To edit the properties of a UI element, first select the element(s) in the Canvas Panel. The contents of the Properties Panel will be automatically updated to reflect the properties of the selected UI element(s). Note; only the properties common to all of the selected UI elements will be available for editing. The number of properties available to edit will also depend upon the type of UI elements or controls that have been selected. To edit the values in the Properties Panel simply click on the value of the desired field and type or select a new value.

To edit the properties of a wireframe template make sure nothing in the Canvas Panel is selected. Having nothing selected in the Canvas Panel will result in the wireframe template’s properties being displayed in the Property Panel.

The Objects Panel

The Objects Panel displays a list of all of the UI elements and controls currently placed on the active wireframe. Similarly to the Wireframes Panel, the total number of controls and UI element on the active wireframe is depicted by the number in brackets in the Objects Panel’s title bar. The Objects Panel enables the user to visualise the order (layers) of the elements on the wireframe and also provides pictorial information about, and the ability to perform simple editing to, some of the elements properties such as its visibility and lock/unlock status.

It is also possible to select UI elements and controls by clicking on them inside the Object Panel.

The Objects Panel can also be used to re-order the elements on a wireframe. To reorder a UI element simply select it in the Object Panel and drag it up or down the list, once the element reaches the desired location drop it. The list will be reordered and the moved element will be in its new location.

Creating a New Solution

In order to design a wireframe or prototype in UXToolbox you must first create or open a Solution. A Solution is just a file and is our way of grouping all the wireframe you will create together. Good practice would be to create a new solution for each project/application you work on. By default UXToolbox will prompt you to either open or create a new solution each time it is launched. You will not be able to work on or design a new wireframe unless you have created or opened a Solution first.

A new Solution can be created at any time by selecting ‘File|New|Solution’ from the menu bar or by clicking the ‘New Solution’ button in the Toolbar. This will open the ‘Select Initial Wireframe Template’ dialog window (see below), which should be used to select the initial wireframe template that will be used for the first wireframe in the new Solution.

UXToolbox comes with a wealth of Wireframe Templates enabling you to create wireframes and prototypes for all manner of devices including; Games Consoles, MP3 Players, Mobile Phones, Tablets, Web Browsers, Wearables and of course Windows Applications. The Device Types list on the left of the ‘Select Initial Wireframe Template’ dialog window is used to help filter UXToolbox’s collection of wireframe templates. UXToolbox will only display the wireframes templates associated with the selected device type or group in this list. To make life a little easier and so you don’t have to go searching each time you need a new wireframe, UXToolbox will also create a Recent group and fill it with all of the wireframe templates you have used most recently.

Once you have found the wireframe template you wish to use in the Templates list, click on it to select it. If you are happy with your choice, hit the OK button and a new wireframe, based on the wireframe template you have selected, will be created and added to your solution.

It is also possible to change the name of the new wireframe by typing a new name in the Wireframe Name textbox before clicking OK. Wireframe names in UXToolbox have to be unique and UXToolbox will automatically populate this field with a unique name each time you add a new wireframe. Do not worry if you forget to enter your own unique name for your wireframe, wireframe names can easily be changed at any time by using either the Wireframes Panel or Properties Panel on the main UXToolbox window.

Adding Additional Wireframes to a Solution

Adding additional wireframes to a Solution is handled in much the same way as selecting the first wireframe of a new Solution. Select ‘File|New|Wireframe’ from the main menu to open the 'Add New Wireframe' dialog window, or simply click on the 'New Wireframe from Templates' button in the Wireframes Panel’s toolbar. The New Wireframe from Templates dialog window works exactly the same as the Select Initial Wireframe Template dialog window.

An even quicker way of adding a new wireframe to a Solution is to hit the 'New Wireframe' button on the Wireframes Panel toolbar. Chances are most of the wireframe templates you will be using in a Solution will be the same; clicking this button with create a new wireframe base upon the Wireframe Template of which ever wireframe is currently selected in the Wireframe Panel.

Duplicating Wireframes

UXToolbox also enables users to duplicate wireframes in a Solution. When a wireframe is duplicated a new exact copy of the wireframe, including all of the UI elements and controls it contains, is created and added to the Solution. To duplicate the selected wireframe click the 'Duplicate' button in the Wireframes Panel’s toolbar or right-click on the thumbnail of the wireframe you want to duplicate in the Wireframe Panel and select 'Duplicate'.

Deleting Wireframes from a Solution

Occasionally it might be necessary to remove a wireframe from a Solution. To accomplish this you can either right-click on the wireframe in the Wireframes Panel and select 'Delete' or click on the 'Delete' button in the Wireframes Panel’s toolbar. You can also select ‘Wireframe|Delete’ from the main menu. It is important to note, deleting a wireframe cannot be undone.

Renaming Wireframes

Sometimes a situation might arise when you would like to rename a wireframe(s) in your Solution. Maybe it wasn’t named correctly when it was first created or maybe the functionality of the wireframe has changed since its inception and its current name is no longer appropriate. Whatever the reason, wireframes can be easily renamed by either, deselecting all of the UI elements in the Canvas Panel and editing the Wireframe’s 'Name' property in the Properties Panel . Or, by double-clicking on the wireframe’s name in the Wireframes Panel, then entering the new name in the popup text box that appears.

Reordering Wireframes

The Wireframes Panel can also be used to re-order the wireframes in a Solution. Simply select the thumbnail of the wireframe you wish to move and drag-and-drop up or down the list of wireframes to the new position. When you let go the list will be reordered with the selected wireframe in its new location.

Swapping Wireframes Templates

Users of UXToolbox can swap the wireframe template used by a wireframe without losing or changing the UI elements that have been placed upon it. To swap a wireframes’s template, right-click on the wireframe in the Wireframes Panel and select ‘Swap Template...’ from the pop-up menu. This action will open the 'Swap Wireframe Template' dialog window from which the replacement wireframe template can be selected. This feature is great if you are looking to quickly change your Solution from, say an iPhone 5 app into an iPad App or Android app, etc.

Adding Wireframes to the Repository

UXToolbox contains another powerful feature; the ability to add wireframes to a repository. The astute amongst you may have already noticed a 'Repository' tab on the 'Add New Wireframe' dialog window. UXToolbox’s repository is a way to store wireframes independently from a Solution. This allows for commonly used wireframes that you may want to reuse over and over to be easily stored and shared amongst multiple Solutions. Repository items can also be used in situations where all of the wireframes in a Solution contain the same set of UI elements or theme. By storing a wireframe containing these UI elements in the repository a new wireframe with all of these UI elements pre-loaded can be quickly and easily selected and added to the Solution. Repository items can even be exported and shared with other users on other machines.

To add a wireframe to the repository right-click on the intended wireframe in the Wireframes Panel and select ‘Add to Repository...’ in the popup that appears. Alternatively, select ‘Wireframe|Add to Repository...’ from the main menu.

Working with UI Elements

Adding UI Elements to a Wireframe

UXToolbox comes with a wealth of fully customisable UI elements and controls that can be used to design and build your wireframes. These UI elements and controls can all be found on the UI Elements Tab and can be added to the active wireframe (the one displayed in the Canvas Panel) by dragging-and-dropping them from the UI Elements Panel onto the drawing area. Alternatively, you can double-click a UI element in the UI Elements Panel and let UXToolbox place it onto the active wireframe for you.

UI elements are stored alphabetically into groups. UXToolbox only displays the UI elements from one of these groups at a time. To view the UI elements from an alternate group; click on the group’s name (located in a list at the bottom of the UI Elements Panel) to select it and display its associated elements. UI element groups can be hidden in the UXToolbox’s Options dialog window, so if you are a bit short of space or have groups of elements that you rarely or never use you can free up some extra real-estate.

Finding UI Elements

The UI Element Panel contains a search box located at the top of the panel that can be used to search for specific UI elements. To search for a UI element simply click in the search box and start typing the name or type of UI element you are looking for. As you start typing the element list will update to reflect the results of the search. Once you have found the element you would like to use simply double-click it or drag-and-drop it onto the drawing area as you would normally.

It is important to note that whilst the search box is populated the element groups at the bottom of the UI Element Panel with be disabled and the UI Elements Panel will only display the results of the search.

To return the UI Elements Panel to its normal state (i.e. displaying all the elements and controls for the selected element group) simply delete the text in the search box.

Selecting UI Elements

By default a UI element is selected when it is first added to a wireframe. Selected UI element(s) and controls can be identified by 8 small squares that float around the bounding edges of the element(s). UI Elements can be selected via a number of different methods:

• Clicking on a UI element in the Canvas Panel will select the element and deselect all other elements that were previously selected.
• Clicking on an unselected UI element whilst holding SHIFT will add the element to the current list of selected elements. Conversely, clicking on a selected UI element whilst holding SHIFT will remove the element from the list of selected elements.
• UI Elements can also be selected by dragging a bounding rectangle around the element you wish to select. Only the element(s) completely encapsulated by the bounding rectangle will be selected.
• Lastly, UI elements can be selected by clicking on their name(s) in the object list contained within the Objects Panel. As with the drawing area, multiple elements and controls can be selected or deselected by holding SHIFT whist clicking on the desired object.

UI Elements must be selected in order to edit their property values in the Properties Panel. Multiple elements and controls can be selected and edited at the same time via the Properties Panel; in this situation only the properties common to all of the selected UI elements and controls will be available for modification in the Properties Panel.

Moving UI Elements

UI elements must be selected before they can be moved. Once selected, they can be dragged around the drawing area by clicking on them and moving the mouse or by editing the values of their positional properties in the Properties Panel.

It is also possible to nudge controls by one pixel in any direction by first selecting them then tapping the appropriate keyboard cursor key. To give the controls a bigger nudge (5 pixels) press and hold ALT whilst tapping the keyboard cursor keys.

Aligning and Distributing UI Elements

UXToolbox provides a number of different options to enable you to align and distribute UI elements placed onto a wireframe.

• If you select multiple elements you can align them all in any direction by selecting ‘Arrange|Align’ and then the alignment option you want (e.g. Align Left). Utilizing the same menu, it is also possible to align one or more elements to the horizontal and vertical centres of the wireframe’s screen.
• Another method for positioning multiple UI elements is to use the Distribute commands on the ‘Arrange|Distribute’ menu. Distributing elements is a great way to quickly and easily space a collection of elements evenly either horizontally or vertically across the drawing area.
• The Canvas Panel’s Grid can also be used to help align elements. The grid acts like a layer of semi-transparent graph paper laid over the drawing area and can be displayed or hidden using the ‘View|Grid’ menu item.
• Using the ‘Edit|Snap’ menu it is possible to make UI elements jump and align themselves to the edge of a wireframe template’s screen or other objects if you move them close enough to the appropriate edge.
• UXToolbox’s drawing area also supports guidelines. Clicking and dragging from one of the rulers surrounding the drawing area onto the drawing area will add a guideline to a wireframe. Guidelines can either be horizontal or vertical (depending upon which ruler you drag from) and can be placed in a precise location on the drawing area. Utilizing guidelines is a great way to align an element or a number of elements to a certain location. Similar to the Snap to Screen and Snap to Object options mentioned above, it is also possible to snap objects to guidelines using the ‘Edit|Snap|To Guidelines’ menu command.

Resizing UI Elements

Most UI Elements can be resized quickly and easily, by clicking and dragging one of the 8 little boxes that surround the selected element(s) in the direction you want. To resize the element(s) in the X and Y axis at the same time click and drag on one of the corner boxes.

To keep the same scale (aspect ratio) whilst you are resizing, press and hold the CTRL button whilst dragging.

UI elements can also be resized by selecting them in the Canvas Panel or Objects Panel and editing their properties in the Properties Panel.

Some UI elements cannot be resized, or can only be resized in one direction or in certain step sizes. This is by design to make sure the control in question conforms to its design criteria set by the manufacturer (e.g. an iPhone On/Off control, etc.).

Deleting UI Elements

Sometimes you may want to remove or delete a UI element(s) from a wireframe. To remove a UI element(s) first select it and then hit either the 'DELETE' or 'BACKSPACE' key on the keyboard. It is also possible to delete the selected element(s) by selecting ‘Edit|Delete’ from the main menu.

Layering UI Elements

As a general rule UI elements are drawn onto the drawing area in the order they were created. This is known as the z-order and can sometimes be a problem if you have already added a number of UI elements to a wireframe then decide that you would like to add a new element behind them. The z-order of the UI elements and controls on a wireframe is depicted by the order of the elements shown in the Object Panel.

To solve this problem it is possible to change the z-order that the UI elements and controls are drawn onto the wireframe. To achieve this, first select a UI element, or group of elements, then select either; 'Up One', 'Back One', 'To Front' or 'To Back' from the ‘Arrange|Order’ menu.

Alternatively, it is possible to select a UI element in the Objects Panel and drag it up or down the elements list to a new location. When the element is dropped the list will be redrawn to reflect the new z-order of the elements on the Wireframe.

Locking UI Elements

There is nothing worse than carefully aligning and positioning a number of UI elements, then with a careless drag of the mouse scattering them across the drawing area. OK, we might be exaggerating the problem here but just in case, or to merely stop the odd UI element moving when you don’t want it to, it is possible to lock a UI element so that its property values cannot be changed.

To lock a UI element and stop any of its values being changed or modified, select ‘Arrange|Lock’ from the main menu. Alternatively, you can click the second column for the corresponding UI elements in the Object Panel.

When a UI element has been successfully locked a little padlock will be displayed in the second column of the Object Panel. Also, when the element is selected, instead of 8 little squares, 8 little padlocks will be drawn around its bounding edge, indicating that it is locked and cannot be edited.

To unlock a UI element simply select it and click ‘Arrange|Unlock’ from the main menu. Alternatively, click on the corresponding padlock icon in the Object Panel or edit the UI elements Locked property in the Properties Panel.

Grouping UI Elements

Sometimes, especially if you are working with a complicated design, you may want to group a number of UI elements together. This can be achieved by selecting the collection of UI elements and controls that you would like to group together and selecting ‘Arrange|Group’ from the main menu.

Once grouped the collection of UI elements will behave like a single element and will appear as a single (Grouped) entry in the Objects Panel. Grouped elements can be selected by clicking on any one of the UI elements within the group and moved, aligned and resized as if they were a single control.

To ungroup a grouped collection of UI elements select the group and click ‘Arrange|UnGroup’ from the menu bar.

Hiding UI Elements

UI elements can be hidden on the drawing area without having to delete them simply by clicking on the UI element’s visible (eye) icon in the Object Panel.

To make the UI elements visible again, simply click in the column where the icon used to be.

UI Element Editors

As discussed previously, UI elements can be edited and customised by first selecting them, then changing their property values in the Properties Panel. For most UI elements this works great, but some of UI elements supported by UXToolbox are a little more complicated than a simple rectangle or a button and need a bit more. These UI elements require their own unique editors to make them truly useful and customisable. Editors can be used to perform for all sorts of purposes and tasks e.g. editing the items in a list control, a quick way to edit the text on a button, or change the picture in an image.

Spotting a UI Element that has a dedicated Editor

UI elements that have their open special editors can be easily identified by looking at the top-left blue selection square when the element is selected. If the UI element or control has a dedicated editor the little blue square that is normally visible will have been replaced by a special little ‘Editor’ icon. The Editor icon is UXToolbox’s way of letting you know that the UI element has an additional editor associated with it.

Accessing a UI Element’s Editor

Accessing a UI element’s editor is easy; simply double-click on the element in the drawing area and its editor will open. You can also right-click on the UI element on the drawing area or in the Objects Panel and select ‘Edit...’ from the popup menus.

Working with Text

UXToolbox supports two different text elements; the 'Label' UI element and the 'Paragraph' UI element. These UI elements work quite differently and it is important to understand their differences, how they work and what they are intended for. As you would expect, both UI elements allow you to modify the colour, size and type of the font used to draw the associated text.

Label UI Element

The 'Label' UI element is intended to be used for the creation of titles and sub-titles or for labelling UI elements such as text boxes and dropdown list (basically, anything that requires a short blocks of text). When a Label element is resized the text depicted within its boundary grows or shrinks to match the size of the element (see illustration).

The text displayed in a Label UI element can be edited either by double-clicking on the element to open its editor, or by selecting the element and entering a new value into its Text property inside the Properties Panel.

Paragraph Text UI Element

The 'Paragraph' Text UI element is intended for when you want to add big chunks of paragraph text to a wireframe.

By default the Paragraph Text UI element is pre-populated with Lorem Ipsum when it is first placed on a wireframe. The Lorem Ipsum text merely acts as a place holder and can be easily replaced with real text as and when you have it via the Paragraph Text UI element’s editor.

When a Paragraph Text UI element is resized, instead of the text characters growing or shrinking as they do with the Label UI element, the text in a Paragraph Text UI element wraps to fill the new bounding space of the element. Note, it is still possible to resize the text of a Paragraph Text element. This is achieved by editing its Font values in the Properties Panel.

Working with Images

The Image UI Element

UXToolbox supports an Image UI element that can be used to place or indicate an area where an image will appear on a wireframe.

When an image UI element is first placed onto a wireframe the image element will appear, by default, as a simple image place holder; either a rectangle with a cross through it or a blank photo, depending upon the Draw Mode . To change the pictures displayed in an Image UI element simply double-click the Image UI element to open its editor (a file open dialog) and select the image you wish to use. You can also select the image used by an Image UI element by editing the Image’s ‘Filename’ property in the Properties Panel.

In addition to adding an Image UI element to a wireframe by via the UI Elements Panel, images can also be added by selecting ‘File|Import|Image...’ from the main menu and using the ‘Import Image’ dialog window to select the image file you would like to add to the active wireframe.

The Image UI element contains a ‘Layout’ property that determines how the selected image will be drawn in the control. The Layout property has the following 4 options.

• Auto - The image is drawn onto the wireframe at its actual size. Resizing the image element merely crops the bottom-right edges of the image
• Stretch - Scales or stretches the image to fit the size of the image UI element
• Tiled - Tiles the image in the X and Y axis to fill the image element’s area. The size of the image UI element must be bigger than the size of the image to notice the effect
• Centre – Centres the selected image in the image UI element’s area

In addition to allowing users to add pictorial images to a wireframe, image UI elements can also be used to place drawings of custom or complex UI elements that are not supported by UXToolbox onto a wireframe.

The Icon UI Element

The Icon UI element is very similar to the Image UI element except that it cannot be resized freely and can only assume standard icon sizes (e.g. 16x16, 24x24, 32x32, 48x48, etc.).

Unlike the image UI element, by default, Icon UI elements are depicted as squiggles until an actual image file has been specified.

Click Regions

The 'Click Region' UI element is a special UI element specifically designed to aid the interactive prototyping of a Solution . Click Regions can be moved and resized just like any other UI element or control, but unlike all the other UI elements it is only visible on the drawing area when you are designing your wireframes. During a Prototype Presentation or in exported images it is completely invisible and cannot be seen.

What is a Click Region used for?

All controls have a ‘Click’ property which is used to form interactive links between the wireframes in a Solution. During a prototype presentation a user can click on a UI element that has had its ‘Click’ property set and UXToolbox will present the user with the wireframe representation of the linked wireframe specified by the Click property. Using this technique it is possible to and wire up button clicks, etc. that open new windows or take the user to a new screen, simulating the behaviour of an application.

Let us imagine that there is a region of a wireframe, perhaps over the top of an image, which needs to have several links to different wireframes added to it. You could use lots of Button controls to achieve this requirement, but then you would not be able to see the image underneath. So, instead you would use a number of Click Region UI elements.

Each Click Region UI element could be resized and positioned over the different parts of the image that require a click action and linked to a corresponding wireframe accordingly. Then, during a presentation when the image is displayed, users viewing the presentation would only see the image, but would still be able to click on the different regions of the image covered by the Click Regions, navigating to different wireframes just as though there were lots of buttons there instead.

iOS and Android

Designing Wireframes for iOS

iOS8 UI elements and controls come in all shapes and sizes depending upon the type of device that they are being displayed on. Despite having the same first-glance appearance, each UI element is individually scaled to correctly fit the screen of the device displaying it, giving the same or very a similar appearance for the UI element across the entire Apple range. Consequently, an iPhone 5 message box is not the same size and shape as an iPhone 6 message box which in turn is not the same size and shape as a iPad message box, etc.

By default UXToolbox renders all of its iOS8 controls so that they are accurately scaled and look correct on an iPhone 5 device. This means that if you are designing your wireframes for any type of device other than an iPhone 5 all of the UI elements and controls you add to your wireframe will be incorrectly sized and scaled.

To combat this, each of UXToolbox’s iOS8 UI elements and controls have a Device property enabling the target device type for the UI element to be set so that it correctly matches that of the wireframe template being designed. Setting the Device property scales the corresponding UI element/control to the correct size and appearance for the selected device.

To set the device type of an iOS8 element or control, first select the intended element so that its properties are displayed in the Properties Panel. Looking down the list of properties click on the Device property and select a new device type from the list of available values. The UI element/control will be resized to correctly represent how it would appear on the selected device.

Selecting the device type every time you add an iOS8 control to a wireframe would quickly become tedious and a burden. UXToolbox relieves this problem by remembering the chosen device type each time it is changed and defaulting the device type of any new subsequent iOS8 UI elements and controls added to the wireframe to the selected type thereafter.

Designing Wireframes for Android

The Android platform runs on a huge variety of devices that all offer different screen sizes and densities. Like Apple iOS, Android caters for these devices by providing a consistent development environment that performs most of the work to adjust each application's user interface to the screen on which it is displayed.

Android achieves this by defining a virtual (density-independent) pixel unit that is used to define the UI layout and express layout dimensions and position in a density-independent way.

Android’s density-independent pixel (dp) is equivalent to one physical pixel on a 160 dpi screen. This is the baseline density assumed by Android for a "medium" density screen. At runtime, Android transparently handles any scaling of the dp units, as necessary, based on the actual density of the screen in use. The conversion of dp units to screen pixels is simple: px = dp * (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels.

To simplify the way its user interfaces are designed, Android divides the range of actual screen sizes and densities into four generalized groups: small, medium, large, and xlarge.

In order to accommodate these groups and the range of different screen sizes and devices available to Android, UXToolbox’s Android UI elements and controls all contain a Density property that allows their screen density to be specified ensuring that they are correctly scaled to the selected wireframe template. The Density property ties in with the Android guidelines allowing users to specify an element or control’s density in terms of small, medium, large, and xlarge.

Similar to the iOS8 UI elements and controls, UXToolbox remembers the selected density value and will default the value of all new additional Android UI elements and controls to that density.

Draw Modes

As you work, UXToolbox lets you render your wireframes and UI elements in three different drawing modes; Wireframe Mode, High-Res Mode and Hybrid Mode. Wireframe mode displays a simplified (almost sketched) outline of the wireframes and UI elements in your solution. High-Res mode renders the wireframes and UI elements as high-resolution graphics, basically providing an as realistic as possible depiction. Hybrid mode fits somewhere between the other two. The wireframe’s template is rendered in simple wireframe mode whilst the UI elements placed on top are rendered in High Res mode, helping to focus attention onto the wireframe’s screen and not the surrounding area.

The illustration below shows the same Wireframe rendered in the three different draw modes.

As a user, you can swap between draw modes whenever and as often as you like. To swap draw mode select View from the main menu bar, then select either; Wireframe, Hybrid, or High Res. The selected draw mode is indicated by the tick next to the corresponding draw mode in the View menu. It is also possible to determine which draw mode is active by looking in the status bar.

Wireframe Mode

The simplistic, almost sketched, look and feel of the Wireframe Mode is great for quickly getting ideas onto paper without getting bogged down and heavily distracted by what the screen should look like. Wireframe mode makes it much easier to concentrate on screen content and functionality. It can also be more helpful and beneficial in the early stages of a project when you are trying to collect feedback. Users and stake-holders often find it much easier to be subjective when asked to critique a low fidelity wireframe.

High-Res Mode

The realistic, ultra-high fidelity of High-Res Mode provide a much more polished look and feel to your wireframes. Think of it as a building block that sits on top of the wireframe draw mode taking your wireframes one step further. High-Res Mode turns your wireframes into mock-ups. This can be extremely useful to give users a clearer impression of how the finished UI will look, feel and work, especially when running through a prototype presentation.

Hybrid Mode

Hybrid Mode is pretty much the same as High-Res Mode. It’s another way of turning a wireframe into a more realistic mock-up. Which one you choose is up to you; some people prefer the all round high fidelity of High-Res mode whilst others prefer to produce mock-ups that are a mixture of the two.

Probably the most common approach employed when designing wireframes and prototypes is to start off the design using the low fidelity wireframes, then switching to either the more realistic and accurate High-Res Mode or Hybrid mode as you iteratively enhance and refine the design.

Changing the Wireframe Font and Highlight Colour

On some occasions you may wish to change the highlight colour of the UI elements rendered in Wireframe Mode; maybe you have a personal preference, or wish to tie in with a customer presentation or your corporate identity. Whatever the reason, this is achieved by selecting ‘Tools|Options...’ from the main menu to open the Options dialog window then selecting Wireframes from the left hand panel.

In Addition to changing the wireframe highlight colour, it is also possible to change the font used to render the wireframe UI elements. Again this might be for personal preference. Changing the wireframe font will affect all UI elements that include text in their depiction.

Similar to changing the wireframe highlight colour the wireframe font can be edited by selecting ‘Tools|Options...’ from the main menu and selecting Wireframes in the Options dialog window.

Adding Notes

Notes are a quick and easy way to capture your thoughts and ideas whilst working on a wireframe. They can also be used in meetings to capture everybody’s thoughts and suggestions or to give yourself a little reminder.

Taking the form of computerised post-its stuck over the top of your wireframes, notes can be moved and resized just like regular UI elements. Notes sit in their own layer so that they do not interfere with the rest of the UI elements on your wireframe and can be displayed and hidden at the click of a button.

Notes come in a choice of 6 different colours so, just like you would in the real world, you can assign different colour notes to different people or to capture different types of information (e.g. questions, ideas, comments, requirements etc.). To set the colour of a notes simply double-click the note and select the desired colour in the note’s editor or with the note selected change its colour in the Properties Panel.

It is also possible to add an icon to a note so you can quickly identify the type of information it contains without having to read it. Notes support the following icons; questions, ideas, comments, requirements, reminders and user journeys. You don’t have to add an icon to a note if you choose not to; just leave the field blank when you are creating/editing the note.

The simplest way to work with Notes in UXToolbox is to make use of the Add Note and Show/Hide Notes buttons in the Toolbar.

Adding Notes

To add a Note to a wireframe simply click the ‘Add Note’ button in the Toolbar. This action will open the Add Note dialog window allowing you to enter whatever it is you want to capture or are thinking. Once happy, click OK and the new note will be added to the wireframe.

Once added, the note can be moved and resized just like any other UI element. If you later to choose to make changes to the note simply double-click it to reopen its editor and update the note as you see fit.

Deleting Notes

Notes can be removed from a wireframe in exactly the same way as any other UI element. First select the note then hit the DELETE or BACKSPACE key. Alternatively, with the note selected, select ‘Edit|Delete’ from the main menu.

Hiding and Showing Notes

Notes added to a wireframe can be displayed or hidden at any time by toggling the ‘Show/Hide Notes’ button on the main Toolbar.

Customizing Your Notes

As well as being able to select the colour and icon for your notes, it is also possible to change the font, font colour and icon size used on the note. To achieve this, open the Options dialog window and select Notes from the left hand panel on the window. All the settings to allow you to configure your notes will be made visible.

Annotating Wireframes

UXToolbox enables its users to quickly and easily annotate their wireframes in the form of Wireframe Descriptions and Annotation Tags. A Wireframe Description can be added to a wireframe to provide general information or an overview describing the wireframe. Annotation Tags are used to highlight key areas of interest or to add detailed explanations about areas of complexity on the Wireframe. Each Annotation Tag has a unique Identifier that is used to pair the tag with its corresponding text description. Similar to Notes, Annotation Tags can be displayed and hidden at your discretion so they will not get in the way when all of your intention is focused on designing your wireframe.

Both of these types of annotation can be included in a prototype presentation or if you choose to export your solution to HTML or Word. This is a great way of forming the basis for a specification document or a customer quote.

Adding Wireframe Descriptions

To add a Wireframe Description to a wireframe make sure the wireframe is active (i.e. it is visible in the drawing area) then simply enter the text you wish to write in the Annotation Panel’s text area. That’s it! The text you enter will be automatically associated with the Wireframe.

To add or edit the Wireframe Description of a different wireframe simply open the new wireframe in the drawing area and start typing in the Annotation Panel again. The Annotation Panel automatically updates and is paired with the wireframe description for which ever wireframe is visible in the drawing area.

Adding Annotation Tags

As mentioned above, Annotation Tags are small markers that can be placed onto a wireframe enabling the user to write localised information or descriptions about areas of the wireframe or specific UI elements. Annotation Tags often provide additional information about the wireframe design that would not otherwise make sense, or would be ambiguous if they were included in the wireframe description. An example of something that could be written in an Annotation Tag could be; ‘When the user clicks the button the values are checked against the database’, or ‘The banner advert changes every time someone visits the page’, etc.

To add an Annotation Tag to a wireframe, click the Add Annotation Tag button in the Toolbar, or on the Annotation Panel. A new Annotation Tag will be added to the wireframe. Annotation Tags are similar to UI elements in that they can be selected and moved to any given location.

When an Annotation Tag is selected its text is loaded into the Annotation Panel, allowing for editing. To commit any modified text back to the Annotation Tag and switch the Annotation Panel back to displaying the wireframe’s description, simply deselect the Annotation Tag in the drawing area.

Deleting Annotation Tags

To remove an Annotation Tag from a wireframe simply select it and press the DELETE key, alternatively, with the Annotation Tag selected, click the Delete button in the Annotation Panel.

Showing and Hiding Annotation Tags

As with Notes, any Annotation Tags added to a wireframe can be displayed or hidden at any time by toggling the Show/Hide Annotation Tag buttons located either on the main Toolbar or the small toolbar located along the top of the Annotations Panel.

Sorting Annotation Tags

As previously mentioned, Annotation Tags each have their own unique identifier used to pair the annotation tag on the wireframe with its text description. This is a great way of keeping all of the annotation on the wireframe as unobtrusive as possible whilst at the same time collating all of the text descriptions and information concerning the wireframe into one place. However, traditionally this approach could get a bit messy and disorganised.

Imagine a wireframe that has already had several Annotation Tags added to it before the author before realises that they need to add an additional tag near the top of the design. If they add the new Annotation Tag the sequence of tags and their descriptions will instantly muddled up. Luckily, one of the great features of UXToolbox is its ability to sort and reorder the Annotation Tag identifiers removing all of the pain of trying to reorder them yourself manually.

To reorder the identifiers of a wireframe’s Annotation Tags hit the Sort button on the Annotation Panel’s toolbar. UXToolbox will scan through all of the tags on the selected wireframe from top-to-bottom, left-to-right, sequentially relabeling their identifiers as it goes.

Customizing the Appearance of Annotation Tags

Annotation Tags are a great way to focus peoples’ attention and document or describe a localised area of a wireframe. Sometimes however the colours on your wireframe may conflict or even be indistinguishable from the colour of the Annotation Tags. Everybody will struggle to spot them and they will lose their effectiveness.

Luckily UXToolbox helps with this situation too. UXToolbox enables users to specify the colour it uses to render the Annotation Tags. It also enables user to change the size of the Annotation Tags too. User can take advantage of these features and re-colour and re-size their Annotation Tags as they see fit, optimizing the appearance of the Annotation Tags to best suit their wireframing needs.

To change the size and colour of the Annotation Tags, simply click the Edit button on the Annotations Panel to open the Options dialog window on the Annotations Tags settings.

Turning Wireframes into Prototypes

A truly great feature of UXToolbox is its ability to take a collection of wireframes and turn them into simple working prototypes of your intended applications. Application prototypes provide stakeholders with a true sense of how an application will work, how the individual wireframes will link together and how users will attempt to interact with them. They can be a real asset to a project giving a genuine sense of the intended goal of the project and what everybody is aiming for. They can also be used to help identify design and interface problems before any significant work has taken place.

Linking Wireframes Together

Before a Solution can be prototyped it is necessary to link the various wireframes within the Solution together. These links tell UXToolbox which wireframes lead onto which and what to display next when the user clicks on a UI element such as a Button or a Menu Item.

Links between wireframes can be created by first selecting a UI element (or a sub-item of a UI element) in the drawing area then specifying a value for its Click property in the Properties Panel, or in its editor. The Click property will contain a pre-populated list filled with the names of all of the wireframes in the current Solution. Simply select the wireframe you would like to display when the user clicks the UI element and you are done. The UI element will now have a link to the chosen wireframe.

Remember these links will only work when you run the Solution as a prototype so you can still move, resize and modify the UI element or control in the drawing area in exactly the same way as you did before without any worry of jumping to the other wireframe.

In addition to the pre-populated list of wireframe names the Click property also contains an optional >previous< value that can also be selected. When encountered, UI elements with their Click value set to >previous< will cause the prototype to go back to whichever wireframe was being displayed prior to the current wireframe (containing the UI element) being presented. This property value is most useful if you have a wireframe that can be accessed from lots of different places in your application prototype.

Running a Prototype Presentation

Once you have wired up the wireframes in your Solution you are ready to run and test your prototype. UXToolbox uses a browser to display its prototype presentations; to make sure you can access all of the features available in the prototype please make sure your browser is up-to-date and you have Javascript enabled. To launch the prototype presentation select ‘Solution|Run’, hit F5 or click the Run button on the main Toolbar.

An example illustration of what a prototype presentation looks like in the browser window can be seen below.

A Prototype Presentation consists of three distinct parts; the Presentation Area, the Annotation Panel and the Presentation Toolbar. The appearance of both the Presentation Area and Annotation Panel can be controlled via the Presentation settings in the Options dialog window.

The active wireframe in the prototype presentation is always displayed in the centre of the Presentation Area. Viewers of the prototype are able to interact with the wireframe in the centre of the presentation area as though it was a working application .The wireframe displayed will seamlessly change and update as you work though your prototype by interacting with the various UI elements that have been linked to other wireframes.

The Annotation Panel is where the active wireframe’s Title (its name) its Description and the text of any Annotation Tags associated with the active wireframe will be displayed. It acts as a narrative providing additional information about the current Wireframe. You can hide the Annotation Panel by hitting the Show/Hide Annotation Tags button on the Presentation Toolbar.

The Presentation Toolbar is a small toolbar that floats over the top of the top left corner of the Presentation Area. Most of the time the toolbar is invisible; this is so it does not intrude on the wireframes being displayed in the presentation area. To display the presentation toolbar simply move the mouse cursor into the top left corner of the screen and it will appear. Moving the mouse cursor away from the top left corner of the screen will make the toolbar disappear again. The purpose of the toolbar is to provide a set of useful features and commands to aid users of the prototype presentation. Starting from left to right the Presentation Toolbar allows users to;

• Increase or decrease the size of the font used in the Annotation Panel
• Show and hide any Notes that are visible over the wireframe
• Show and hide the any Annotation Tags and the Annotation Panel
• Navigate linearly to the next or previous wireframe in the solution (note: this is based upon the order of the wireframes as they appear in the Wireframes Panel in UXToolbox’s main window (not the order the wireframes are clicked through in the prototype presentation).

Changing the Start Wireframe

Prototype Presentations always start with the start wireframe indicated by the ‘S’ like start icon sitting on top of one of the wireframe thumbnails in the Wireframe Panel. By default, the start wireframe is always set to the first wireframe added to the solution. However, in some situations, this may not to be the wireframe you would like to start your prototype presentation with.

UXToolbox enables its users to change the wireframe that will be used to start the Prototype Presentations. To change the starting wireframe, select the intended wireframe in the Wireframes Panel and click the ‘Make Start Wireframe’ button. Alternatively, right-click the intended wireframe and select ‘Set as Starting Wireframe’ from the pop-up menu. Both of these methods will cause the start icon to jump to the newly selected start wireframe.

Custom Prototype Presentations

UXToolbox provides the ability for users to customise the appearance and behaviour of a prototype presentation. The Prototype Presentations section accessible in the Options dialog window (shown below) enables users to customise and personalise the appearance of their prototype presentations. Users have full control over the following features and properties;

• The destination folder where all the files needed for the prototype presentation will be written to.
• The prototype presentations background
• The size (scale) of the wireframes displayed in the prototype presentation
• The background and text colours of the presentation’s annotation panel
• Whether or not Notes are included in the Prototype Presentation
• Whether or not the Prototype Presentation should include Interaction Cues to help identify areas where the user can interact with the wireframes being presented
• If the UI elements should be clipped to the wireframe’s screen area
• Whether or not to include Fingertip Emulation in the prototype presentation
• What type of scrolling behaviour the prototype presentation should use

Fingertip Emulation

UXToolbox has a great feature enabling the emulation of a user’s fingertip instead of a mouse pointer in its prototype presentations. Emulating a fingertip can be a fantastic resource when designing and prototyping wireframes and mock-ups for touch screen devices. It provides an excellent method to realise the accessibility of the UI elements placed on your wireframes and how easy your wireframes will be to navigate and interact with.

Fingertip Emulation is achieved by replacing the standard Window’s mouse cursor with a semi-transparent circular disk representing the typical surface area of a user’s fingertip (see illustration below).

To use Fingertip Emulation in a prototype presentation, open the Prototype Presentations section in the Options dialog window and tick Fingertip Emulation.

It’s all about the Fold

Another of UXToolbox’s unique features is the ability to produce scrollable prototypes and include the Fold on the wireframes it produces. The Fold refers to an unseen boundary line that cuts across a screen or webpage. Everything positioned above the Fold will be instantly visible to the user viewing the screen or window when the real-life implementation of the wireframe is created. Everything below the Fold will require the user to scroll in order to see.

On a typical wireframe there is no need to indicate the location of the Fold because its location is determined by the bottom edge of the screen or window. However, in today’s world, a lot of websites and applications require an arbitrary amount of scrolling to either view the entire content of the webpage or to view and select items in a list, etc. UXToolbox enables users to design and produce wireframes and prototypes for these types or screens by enabling users to extend the lower and right-hand boundaries of the wireframe’s screen area and thus create scrollable prototypes.

Increasing the screen boundary effectively makes the wireframe’s screen surface area larger allowing for the complete content of page, screen or window to be designed in one go. As soon as a wireframe’s screen boundary in increased the Fold line will appear.

Increasing a Wireframe’s Screen Boundary

The process of increasing a wireframe’s screen boundary and displaying the Fold(s) is simple and straight forward. To increase the screen boundary open the wireframe in the Canvas Panel and click on the wireframe’s screen border. The border will turn blue indicating that it has been selected. Now position the mouse over either the screen’s bottom or right-hand edge. The mouse cursor should change to a set of arrows indicating the directions in which the screen can be resized. Click and drag the screen’s border in the chosen direction . That’s it. It’s that simple. The screen area has been resized and now when you prototype the wireframe the wireframe’s screen and any UI elements placed onto it will be scrollable.

To return the wireframe back to a static, non-scrollable wireframe simply repeat the process above but this time drag the mouse in the opposite direction.

The Fold line appears automatically as soon as the wireframe’s screen area is resized; it will also disappear automatically whenever the screen area is returned to its original size. When active, the Fold(s) can also be displayed of hidden by selecting ‘View|Show|Folds’ from the main menu or clicking the Show/Hide Folds button on the Toolbar.

Scrollable Prototypes

Let’s assume as per the instructions above that we’ve extended the size of a wireframe’s screen and created a scrollable wireframe. This wireframe will now be scrollable in any subsequent prototype presentations that are run. UXToolbox supports two different types of scrolling; Standard and Velocity. Standard scrolling sets the behaviour of the wireframe’s screen to scroll in synch with the mouse’s movements. Any movement of the mouse up will make the wireframe’s screen scroll up and any movement of the mouse down will make the wireframe’s screen scroll down. Velocity scrolling sets the screen’s scrolling to accelerate and decelerate with a flick similar in behaviour to a popular mobile phone. The type of scrolling used can be set in the Prototype Presentations section in the Options dialog window.

Scroll with Screen

Sometimes you may want to create a scrollable wireframe prototype but not want all of the UI elements that are on the screen to scroll. Maybe some of the UI elements on the wireframes screen, such as a Header Bar or and Status Bar should be fixed. What then?

Each UI element has a property called ‘Scroll with Screen’. By default this property is selected (ticked) and the UI element will scroll with the wireframe’s screen if it has been extended. If you deselect this property the next time you run the prototype presentation the UI element will be static and cease to scroll with the rest of the screen. UI elements that have had their Scroll with Screen property turned off are always displayed over the top of UI elements that have it selected.

Custom Wireframe Templates

UXToolbox comes with a wealth of Wireframe Templates enabling the design of applications for all manner of device types including; Games Consoles, MP3 Players, Mobile Phones, Tablets, Wearables, Web Browsers and of course Windows Applications. On some occasions this won’t be enough. Sometimes you may be required to design an application for an entirely different device or a new device type that isn’t included in UXToolbox’s collection of templates e.g. the menu system for a Smart TV or Sat Nav. Whatever the project, don’t worry UXToolbox can help.

Creating Custom Templates

As well as supporting a large number of Wireframe Templates, UXToolbox also enables users to create and share their own custom Wireframe Templates. To create a custom wireframe template you will need, at a minimum, an image file of the desired device . Once you have an image simply click on ‘Tools|Create Template’ from the main menu to open the Wireframe Template Wizard (see below).

The first step of the Wireframe Template Wizard is to specify a Name for the new Wireframe Template being created and its Type and Manufacturer. You can select either an existing value for these last two fields or simply enter new ones. Click Next when you are happy.

The next step is to select the image you would like UXToolbox to use as the High-Res render of the new template. This is achieved by specifying the file path to the image of the high-res version of the device. Once selected, a preview of the chosen image will be displayed in the preview area of the wizard’s window.

Moving on, it is now necessary to specify the image that UXToolbox will use to render the template in the Wireframe and Hybrid draw modes. UXToolbox will attempt to help you here by providing the option to create the image itself, based upon the High-Res image specified in the previous step. Alternatively, you can specify your own image in exactly the same way as the previous step, by specifying the file path to the image you wish to use.

When selecting the image that UXToolbox will use in the Wireframe and Hybrid draw modes, it is important to make sure the specified image is exactly the same pixel size as the High-Res image and the features contained within the two images are precisely aligned otherwise there will be problems when users of the template switch between draw modes. Again, once happy click ‘Next’.

It is now time to specify the region on the image(s) that corresponds to the screen area of the device. To do this either, specify the coordinates of the screen area using the labelled Screen Coordinate fields located near the top of the wizard or, using the mouse, position and resize the screen marker in the Preview Area.

Taking time to correctly specify the screen coordinates is important and will enable users of the template to take advantage of UXToolbox features like ‘Snap to Screen’ and to set the wireframe’s Background colour when they design wireframes using the new template.

The final step of the process is to set whether or not it will be possible to rotate the new wireframe template and also its PPI resolution. The correct PPI resolution for the template is needed in order for Fingertip Emulation to work accurately. UXToolbox uses this PPI value to calculate the size of the circular disc, representing the user’s finger tip, within the prototype presentations. Failure to provide the correct value for the new wireframe template’s PPI value will result in an incorrectly sized disc whilst running the prototype presentation.

Once all of the details for the new wireframe template have been confirmed, the newly created template will be added to UXToolbox’s wireframe template collection and accessible via the ‘Add Wireframe’ dialog window. It’s location within the dialog will depend upon the template Name, Type and Manufacturer that were specified when the wireframe template was created.

Using Custom Templates

The process for selecting and using a Custom Wireframe Template is exactly the same as the process for selecting a standard Template. Open the ‘Add Wireframe’ window by either selecting ‘File|New|Wireframe’ command from the main menu, or clicking on the ‘New Wireframe’ button in the Wireframes Panel’s toolbar.

Sharing Wireframe Templates

UXToolbox allows Wireframe Templates to be shared amongst different users and different instances of UXToolbox. To share a Wireframe Template with a different user open the Options window and navigate to the Templates section in the left-hand side. Now simply select the Wireframe Template you wish to share and click ‘Export’. UXToolbox will prompt you for a destination folder for the selected template, and once specified, will write a UXToolbox Template File containing the wireframe template to the location.

Importing a UXToolbox Template File is just as easy as exporting one. With UXToolbox closed, simply double-click of the UXToolbox Template File you wish to import and UXToolbox will launch and register the new wireframe template, adding it to its wireframe template list.

Alternatively, navigate to the Templates section in the left-hand side of UXToolbox’s Options dialog window and click the ‘Import’ button. UXToolbox will prompt you for the location of the UXToolbox Template File containing the wireframe template and then import it once specified.

Printing

UXToolbox enables users to print their work using UXToolbox’s built in print functionality. To print one or more wireframes or an entire Solution simply open the Solution in UXToolbox and select ‘File|Print...’ from the main menu to display the Print dialog window (shown below).

The Print dialog window enables users to select the wireframes contained in the Solution they are printing and the layout option they would like to use to print them. It also contains options to specify whether or not to include Notes and Annotation Tags within the printouts and the size of the paper’s print margins.

To select a wireframe for printing simply tick the box next to the wireframe’s name in the ‘Wireframes to Print’ list. The list will contain the names of all of the wireframes in the Solution; wireframes with a tick next to their name will be printed.

One of three layout options can be selected at the top of the Print dialog window and are as follows;

• Wireframe and Annotation prints each wireframe (including Annotation Tags) alongside the wireframe’s description and annotation text placed in a column down the right-hand side of the page (similar in appearance to a Prototype Presentation)
• Wireframe and Text Area prints each wireframe with a column of blank lines down the right-hand side of the page so that users can write their own notes/mark-up
• Wireframe Only prints each wireframe centred on a separate sheet of paper

Exporting

UXToolbox supports a number of different export formats including; PNG image files, Word documents, HTML and XML files.

Exporting Wireframes to PNGs

UXToolbox can export an entire Solution or a number of wireframes within a Solution to a series of PNG image files. To export wireframes to PNG image files simply open the chosen Solution and select ‘File|Export|toPNGs...’ from the main menu. This action will open the ‘Export Solution to PNGs’ dialog window.

The ‘Export Solution to PNGs’ dialog window enables the user to select the destination folder that the exported PNG files will be written to and also the wireframes within the current Solution that will be exported.

The dialog window also contains options to select whether or not Notes and Annotation Tags should be included as part of the PNG files, in addition to controlling the size (scale) of the exported PNG files.

A quick and easy alternative to export a single wireframe to a PNG file is to right-click on the thumbnail of the wireframe in the Wireframes Panel and select ‘Export to PNG...’ in the popup menu that appears . Another option is with the wireframe open and visible in the Canvas Panel, right-click on an empty area in the drawing area (away from a UI element) and select ‘Export to PNG...’ from the drawing areas popup menu.

Exporting to Word

As well as having the ability to export wireframes to PNG files, UXToolbox also supports exporting its Solution files to Word documents. Solutions exported to Word will include all of the Wireframe Descriptions and Annotation Tags that have been associated with or placed onto the wireframes.

To export a Solution to Word, select the ‘File|Export|to Word...’ command from the main menu.

The Export Solution to Word dialog window will be displayed allowing the user to select the filename for the new Word document and also which wireframes contained within the Solution will be included in the exported Word document. As with the Export to PNGs dialog window, all of the wireframes contained within the Solution will be listed and only the wireframes with ticks against their names will be included in the generated Word document.

UXToolbox’s Word export also contains a set of advanced options available by clicking the ‘Advanced...’ button on the Export Solution to Word dialog window or by selection the ‘Word Export’ settings in the Option dialog Window.

The Advanced Word Export settings give users complete control over the Titles, Headers and Footers included within the exported document. User can choose from a selection of built in options for each field or select their own custom values as appropriate.

Exporting to HTML

Exporting a Solution to HTML is a great way to share your wireframes with a third party that does not have access to UXToolbox. UXToolbox supports two different type of HTML export; Interactive Presentation or Device Optimised Prototype. Both of these exports are accessible from the ‘File|Export|to HTML...’ menu option on the main menu. This section of the guide will concentrate on the first type of HTML export, the Interactive Presentation export. More information regarding the Device Optimised Prototype Export will be covered in the chapter ‘Device Prototypes’.

As mentioned above, UXToolbox enables its users to export their Solutions as fully interactive HTML presentations. Viewers of these HTML pages are able to click and interact with the all of the UI elements on the wireframes in exactly the same manner as they would in a prototype presentation. The HTML export also contains the same annotation panel and optional notes that are also present in a prototype presentation so viewers viewing the HTML export will literally share the same interactive experience as the users running a prototype presentation through UXToolbox.

To export a Solution to a HTML Interactive Presentation, open the Solution in UXToolbox and select ‘File|Export|to HTML...’ from the main menu. The ‘Export to HTML’ dialog window will be displayed (illustrated above). It is important to make sure Interactive Presentation is selected otherwise a device optimised prototype will be generated instead of the intended interactive presentation.

The Export to HTML dialog window contains a number of options providing users with control over settings such as the Destination Folder for the HTML export, whether or not Interaction Cues are displayed or Fingertip Emulation is enabled, etc. Users also have control over the Scale (size) of the exported images; reducing the size of the images can help to make sure the exported HTML pages will fit onto the end users screen and will also reduce the bandwidth required to download the pages if they are to be uploaded to a server. Users are also able to control the type of scrolling used by the wireframes in the HTML export. Once happy with the choice of settings, clicking the OK button will cause UXToolbox to write all of the files needed to run the HTML Interactive Presentation to the destination folder and prompt the user to open the HTML export when it has completed.

To view an exported HTML Interactive Presentation at a later time or date, simply navigate to the destination folder in Windows Explorer and double-click on the ‘index.htm’ file .

Exporting to XML

Sometimes you may wish to use the data contained in the UXToolbox Solution files for some other purpose; maybe to integrate with another package, application or as the basis for generating user documentation, etc. Whatever your intention, UXToolbox enables you to export Solution files as XML (eXtensible Markup Language) for just this purpose.

To export a Solution to XML, select ‘File|Export|to XML...’ from the main menu. UXToolbox will prompt you for a destination file name. Once provided UXToolbox will write the contents of the Solution to the XML file.

The ‘Tag’ Property

The astute amongst you may have noticed every wireframe template and UI element supported by UXToolbox contains a mysterious ‘Tag’ property that does not appear to do or affect anything. No matter what value is entered into this property field nothing happens to the corresponding UI element or wireframe. This is because the purpose of this property is to provide users with the ability to include their own mark-up data within the exported XML stream for a given wireframe or UI element.

You can literally write whatever you like into a wireframe’s or UI element’s Tag property; a single value, a whole line of information or your very own nested fragment of XML. It’s completely up to you! Whatever is written will be included inside the XML document the next time it is exported.

Exported XML File Format

The template below provides a simplified guide to the file structure and key elements of the XML export.

<?xml version="1.0" encoding="UTF-8"?>
<Solution>
  <FileVersion>File Version</FileVersion>
  <Settings>
    <RenderMode <!-- RenderMode attributes --> />
    <Notes <!-- Notes attributes --> />
    <WireframeStyle <!-- WireframeStlye attributes --> />
    <AnnotationTags <!-- Annotation Tag attributes --> />
    <VisualElements <!-- VisualElements attributes --> 
    <Snaps <!-- Snaps attributes --> />
    <PresentationSettings <!-- Presentation attributes --> />
    <WordExportSettings <!-- Word Export attributes --> />
  </Settings>
  <Guidelines />
  <StartWireframe>XXXX</StartWireframe>
  <Images>
    <Image ID="XXXX" Filename="XXXX" Modified="XXXX">
      <Stream>XXXX</Stream>
    </Image>
    <!-- repeat --> 
  </Images>
  <OpenItems SelectedItem="WireframeID">
    <Item ID="WireframeID" />
    <!-- repeat --> 
  </OpenItems>
  <Wireframes>
    <Wireframe ID="XXXX" Template="TemplateID" Name="XXXX" Orientation="XXX" ScreenWidth="XXXX" ScreenHeight="XXXX">
      <Description>XXXX</Description>
      <ScreenExtent Width="XXXX" Height="XXXX" />
      <Objects>
        <Object Type="XXXX" Name="XXXX" <!-- Object attributes --> > 
          <Tag>XXXX</Tag>
        </Object>
        <!-- repeat --> 
      </Objects>
      <Annotation>
        <Object Type="XXXX" <!-- Annotation Tag attributes --> > 
          <Tag>XXXX</Tag>
        </Object>
        <!-- repeat --> 
      </Annotation>
      <Notes>
        <Object Type="XXXX" <!-- Note attributes --> > 
          <Tag>XXXX</Tag>
        </Object>
        <!-- repeat --> 
      </Notes>
      <Tag>XXXX</Tag>
    </Wireframe>
    <!-- repeat --> 
  </Wireframes>
</Solution>

Device Prototypes

One of UXToolbox’s truly unique and most powerful features is its ability to generate interactive prototypes that run and work like real applications on targeted, external devices such and mobile phones and tablets. This functionality really takes prototyping to the next level.

Creating Device Prototypes

To generate a Device Optimised Prototype create or open a Solution and wire up its wireframes to create a prototype as you would normally. Once happy everything is as you would like, select ‘File|Export| to HTML...’ from the main menu to open the Export to HTML dialog window.

As we saw earlier in the Exporting chapter, UXToolbox enables users to export their Solutions to Interactive HTML presentations. UXToolbox also enables its users to turn these HTML exports into Device Optimised Prototypes. A Device Optimised Prototype is an interactive HTML prototype that has had all of the additional content such as the background Wireframe Templates, Notes, Annotation Tags, toolbars, etc. removed. What you are left with is the bare-bones content of each wireframe screen, all still fully interactive but now missing all the additional page content that made up the interactive presentation.

The true magic occurs when the files generated by UXToolbox’s Device Optimised Prototype HTML export are uploaded to a web server so that the can be access from the intended device. When accessed using the device’s web browser the exported files fill the devices screen making the prototype look as though it is a real application running on the phone or tablet. This is a fantastic way to test or demo the prototype and provides a true sense of how the final application will works in the real world and whether its content is fully accessible. A lot of devices these days also allow for a shortcut bookmark to the URL of the device prototype to be added the device’s homescreen/desktop making for a truly realistic experience.

Activating and Deactivating UXToolbox

When first installed UXToolbox will run in demonstration mode until it has been successfully activated. Demonstration mode restricts the number of wireframes that UXToolbox will be able open, or add to, a Solution. In addition, UXToolbox will cease to work completely 14 days after the date it was first installed have elapsed unless successfully activated. To activate UXToolbox a valid User Licence must be purchased and successfully entered via the Product Activation Window.

Activating UXToolbox

Whilst running in demonstration mode the Product Activation dialog window will be displayed shortly after the Splash Screen has appeared each and every time UXToolbox is launched. The Product Activation Screen is also accessible from the Help menu.

To activate UXToolbox you must have access to an internet connection and must have a valid Product Activation Code. Product Activation Codes are obtained by successfully purchasing one or more User Licences from the softandGUI website . Each successful purchase generates an email receipt containing the details of the purchase and a valid Product Activation Code. You must enter this code into UXToolbox’s Product Activation screen when prompted. Once entered, UXToolbox will connect to the internet to verify that the Licence Code is valid and register the product. Before attempting to activate UXToolbox please make sure UXToolbox’s connection to the internet is not blocked by a firewall.

Once successfully registered the Product Activation Code will be displayed in UXToolbox’s About dialog window for future reference.

Deactivating UXToolbox

If at some point you choose to deactivate UXToolbox you can do so by selecting ‘Help|Deactivate...’ from the main menu. Before deactivating you will be prompted to confirm your intention. Once UXToolbox has been deactivated it will cease to work until a valid Product Activation Code has been successfully resubmitted. Again you will need access to a working internet connection to deactivate an instance of UXToolbox.