iMockups: Effortless Mobile App UI Design - InformationWeek

InformationWeek is part of the Informa Tech Division of Informa PLC

This site is operated by a business or businesses owned by Informa PLC and all copyright resides with them.Informa PLC's registered office is 5 Howick Place, London SW1P 1WG. Registered in England and Wales. Number 8860726.

Government // Mobile & Wireless
05:20 PM
Connect Directly

iMockups: Effortless Mobile App UI Design

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

Designing--or redesigning--a mobile app or Web page often starts with a pen and paper or whiteboard. Those with photo editing skills might use Adobe PhotoShop to mock up a design. Now, if you have an iPad, iMockups for iPad will let you quickly create these design mockups with input from co-workers or clients anywhere--as you stand in the hallway or sit in a coffeeshop.

There's an added bonus to using IMockups. This tool can also create interactive wireframe models for building visual elements which, for example, link to another app screen or Web page.

iMockups starts with a blank sheet for your iPhone app, iPad app, or Web page. The left and right sidebars seen below can be pushed away to dedicate the width of the display to your design work. The left sidebar displays the screens and Web pages associated with the current project; the right sidebar shows available mockup design elements.

First step: place the main design target on the sheet to create a visual frame of reference. You can see an iPhone template below.

Some of the design elements available for Web, iPhone, and iPad mockups are shown below. You can use any of these elements at any time. For instance, you can use an iPhone map element in your Web page template.

Tapping one of the design elements in the right side bar places it on the template. Elements can be dragged into position after that. Tapping on an element brings up an option bar like the one seen below.

Tapping the Info tab on a visual element's option bar brings up a configuration window specific to the element. The Tab Bar Info window seen below, for example, lets you change the number of tabs and the text label for each tab. It also lets you change font size and color; link to a different screen view; and tweak other other aspects of the tab bar.

We welcome your comments on this topic on our social media channels, or [contact us directly] with questions about the site.
1 of 2
Comment  | 
Print  | 
More Insights
IT Careers: Top 10 US Cities for Tech Jobs
Cynthia Harvey, Freelance Journalist, InformationWeek,  1/14/2020
Predictions for Cloud Computing in 2020
James Kobielus, Research Director, Futurum,  1/9/2020
What's Next: AI and Data Trends for 2020 and Beyond
Jessica Davis, Senior Editor, Enterprise Apps,  12/30/2019
White Papers
Register for InformationWeek Newsletters
Current Issue
The Cloud Gets Ready for the 20's
This IT Trend Report explores how cloud computing is being shaped for the next phase in its maturation. It will help enterprise IT decision makers and business leaders understand some of the key trends reflected emerging cloud concepts and technologies, and in enterprise cloud usage patterns. Get it today!
Flash Poll