All designers among us have most likely been in this situation: you’re on the road, but you don’t carry a paper and pen with you when an idea strikes. Or a customer needs a basic layout mailed, but you can’t get that piece of paper into his virtual inbox.
With iMockups for the iPad, moments like these are a thing of the past. Now you can create incredible mockups quickly and easily – and in the next release even post process and share them with other iMockups users!
Target Audience
iMockups is geared mainly towards web designers who need to visualize an idea quickly, either for themselves or for a client. The app offers a wide range of elements used in layouts (image, video & text placeholders, containers to block space, lines to separate content etc).
It now also offers GUI elements used for interface design, specifically the iPhone and iPad. It’s less geared towards visual app development, but more towards how a website could look on the mobile device.
Getting Started
When first loading iMockups, the app doesn’t look like much. Only after creating a new project will you see where the magic happens. The canvas in the middle is framed by the project view on the left where you can see all the pages associated with a project (eg. Home, Services, Portfolio, Contact) and the tools palette on the right.
In the current version the tools for web, iPhone and markup are handily divided into separate sliders, making it much easier to find what you’re looking for.
Canvas, project pane and tool palettes
Before you start your mockup, spend a second to decide whether you want your content to be distributed mainly horizontally or vertically on your website. You can easily adjust the size and orientation of the canvas by tapping the respective preview page on the left pane and then choosing canvas size. You can choose from three templates (small, medium, large) or set your own size.
Setting up your canvas size and orientation
Starting on a Blank Screen
Now that you’ve set up your project, you simply start by dragging and dropping elements (tools) from the right onto your canvas or by tapping them once in the tools palette. By tapping and holding an element on the canvas you can move it around.
Conveniently, iMockups presents you with orange guides that pop up when elements align (and for some reason they are impossible to capture in a screenshot). Sometimes it can get a bit tricky to place an element just right. That’s where the inspector comes in: double tap an element and then use the X/Y coordinates for placement or the W/H (width/height) fields for adjusting size.
Using the inspector for fine tuning
You need to use two fingers to move the canvas. Using one finger will move only the element that was selected last.
Ease of Use
In case you need to select multiple elements, for example to group them, just tap and hold down two fingers until a blue area appear between your fingertips. By moving your fingers around, you can adjust the size of the area and which elements it includes.
That way you can easily group elements that belong together. That comes in very handy when you need to move a group of elements around or if you want to replicate them quickly. Once you find the perfect spot for an element, lock it, thereby avoiding moving it accidentally.
Quick commands
There are also a number of other commands easily accessible by tapping on an element. One of the best time savers is the clone command which replicates an element instantly. If you copy an element, you can paste it onto a different page, which is especially helpful if there are design elements which repeat on multiple pages.
Another time saver is the built-in “lorem ipsum” generator. Most designers will rely on filler text to test layouts, and it’s incredibly helpful to have it in iMockups. It takes a couple of tries to figure out what the difference between the text options is, but once you’ve mastered them, you can quickly create headings and paragraphs to fill your layout.
Headings do not have line breaks while paragraphs do; lorem ipsum is pre-made text which expands when the containing field is enlarged, but you can’t change any of the text; links are the only underlined text.
Importing Images
A new feature to iMockup is the ability to import images into your designs. I use this feature in one of two ways. On the one hand, some images in a layout can help the client to better understand what you are trying to show. In my experience, clients can rarely think in the abstract shapes we designers can and have trouble to visualize the final look.
On the other hand, you can also use a screenshot as a blueprint for a layout (if you want to analyze the elements used or build on top of an existing site). Unfortunately, iMockup can’t properly scale images up to their original size during import (they start to pixel), but it’s ok for basic guidelines.
Once You’re Done
After having created your mockup, you can admire it full screen by making both the right and left pane disappear. If you’re satisfied with your work, you can choose between two export options: export page or export project.
Both options give you the choice of either saving your layout as an image to your photo gallery or emailing a PNG. The difference with exporting a project is that it automatically saves all the different pages without forcing you to do so manually.
Final layout
Verdict
iMockups is an incredibly useful tool for people who often need to layout web sites and share their mockups. It is easy to use once some of the app’s peculiarities are understood, and there’s always the help section to guide you.
The developers are very active and responsive to the community of users, pushing out regular updates and implementing requested features like the ability to import photos. The next release will feature even more icons (shapes like arrows, stars, etc) to give diversity to layouts, and it will enable you to share your mockups among other iMockups users and edit them.
Overall, the app delivers great value for the price!