Sponsored By

iMockups: Effortless Mobile App UI Design

Use your iPad to quickly assemble user interfaces for mobile apps with no programming skill required.

Todd Ogasawara

February 10, 2012

3 Min Read

The ability in iMockups to link to other mocked-up app screens or Web pages is what lets you create a wireframe model that simulates navigation and other actions. In the example below, the Nav tab is linked to the second app screen in this project. When the model is run in interactive mode, tapping the Nav tab displays the second screen. The triangular "run" button is seen in the upper right of the screenshot.

You can see what the linked tab looks like in design mode in the enlarged section of the iPhone template below. The linked area is any designated area of the template. It is not actually linked to the visual object itself.

The screenshot below shows how the area around the Home tab in the second project screen is highlighted by a link editor in design mode. When the wireframe model is run in interactive mode, tapping this area of the display takes the tester back to the first screen. The ability to quickly assemble screen and Web page layouts with basic interactive abilities is key to quickly and easily testing layout ideas, user navigation, and other simulated simple activities.

The two screenshots below show the container templates for an iPad and a Web page.

Note that the Web page template is part of the same project that contains the two iPhone screens used in earlier examples. iMockups for iPad allows you to mix elements in visual containers or different visual containers in a project.

A possible final step after creating either a prototype or final design is to get the design out of the iPad and off to a colleague or client. iMockups for iPad provides four export file types that can be shared via email: JPEG, PDF, Balsamiq Mockups Markup Language (BMML), and native iMockups files for recipients who have the iMockup app on their iPad.

BMML is a file format developed by Balsamic Studios, a company that sells a mockup-wireframe product for the desktop called Balsamic Mockups. BMML is based on XML and contains all the information related to a mockup design. Software developers can build custom software to work with this XML-based markup language to potentially automate processes such as reporting and even code generation.

I bought iMockups for iPad a month after the first iPad was released in 2010. It has been a go-to tool in my mobile toolkit since then. The app was originally priced at $9.99. However, it recently dropped to $6.99. Designers, developers, and project managers--and anyone who works with these professionals--can find value in learning to use iMockups for iPad.

Name: iMockups for iPad
Price: $6.99.

iMockups for iPad lets anyone quickly create wireframe models of graphical interface mockups for iPhone apps, iPad apps, and Web pages. No knowledge of HTML or programming languages is necessary.

Pro:

  • Costs just $6.99.

  • No knowledge of HTML or programing required.

  • No experience with Adobe PhotoShop or other image editors required.

  • Exports to JPEG, PDF, and BMML (Balsamiq Mockups Markup Language), the last of which creates XML output you can use in your own custom app designs.

  • Compatible with the professional mockup desktop software Balsamiq Mockups ($79).

Con:

  • No desktop version.

About the Author(s)

Todd Ogasawara

Contributing Editor

Todd Ogasawara is a Contributing Editor for BYTE.

Never Miss a Beat: Get a snapshot of the issues affecting the IT industry straight to your inbox.

You May Also Like


More Insights