Wireframing and Prototyping with UX-App Part 1

Introduction

Prototyping is one of my favorite aspects of UX design. It’s where the rubber meets the road in a sense, it’s where decisions about IA and User Story research get translated into UI. This article will present some hints and tips for my prototyping application of choice, UX-App.

This will be a 3 part guide.

  • In Part 1 I will focus on basic tips that will speed up your use of the editor.
  • In the coming weeks I will publish parts 2 & 3 which will focus on advanced mobile components and the visual code editor.

If you’re interested in general tips for effective prototyping, then please check out my previous article.

Establishing a Hierarchy

In the early stages of product development I use the wireframe tools to help establish the visual hierarchy of a design. For example

Patient Information for a Health Care App

Simple blocks of color and contrast are used to experiment with an effective visual hierarchy for this screen.

Viewing on a Device

I find it incredibly useful to preview on a mobile device. Designs often look strikingly different on high pixel density screens. Obvious issues, such as the size of interactive elements like buttons become immediately apparent when viewed on a device.

UX-App allows me to publish my changes directly to a device and see changes as I edit the prototype. This is an invaluable feature.

Useful Components

My favorite components at this prototyping stage are

  1. Placeholder text
  2. Rectangle
  3. Icon

Tips

  • To quickly duplicate an element use the CTRL+D keyboard shortcut
  • Group multiple elements into a single unit by right clicking and choosing ‘Group’
  • When multiple elements are selected, use the Align & Distribute menu which appears at the bottom of the screen to quickly place elements
Align & Distribute menu at bottom of screen appears when multiple items selected
  • When editing an element’s stacking order, use the 
    CTRL+UP/DOWN ARROW keyboard shortcut
CTRL+UP/DOWN Arrow
  • The Component Properties panel is your friend. Many components have settings which can be changed using this panel
Component Properties for the Text Placeholder element
  • When wireframing, use the Opacity slider in the Component Properties panel to change the element’s weight. This is often quicker than modifying the color.
  • Use the Document Outline panel, it’s often the quickest way to modify nested components. You can edit most properties without having to double-click-to-edit the parent component. This is particularly useful for heavily nested designs.
Quickly editing nested components using the Document Outline

Let me know if you liked this quick tips article and I’ll be sure to share some more tips in the future.