Wireframing on iPad done right: Iterate beta is now available
Good news, friends: the very first version of Iterate, our digital sketchbook app for UX designers, is available to the public.
If you’ve missed the story, Iterate is a handy iPad app that speeds up and simplifies the wireframing and ideation phase of your design creation.
Let’s start…
You’ll need
- an iPad running iOS 12
Anything from iPad Mini to iPad Pro will do the job. iPhone and Windows/Android devices are not supported. - an Apple Pencil
It’s not a must, but very handy. - a beta download link to install the app.
There’s no in-app help system for Iterate yet, but the following steps should help you get started.
And don’t forget that it’s a beta, so there will be bugs (feel free to report any you find).
Create a new project
Open the app and tap +.
Select the device type, screen size and orientation. These parameters don’t just set a nice preview frame, but help you mimic the target device on your iPad’s screen with high accuracy.
For example, in preview mode your iPhone 7 wireframes would look very close to what you could have seen on the iPhone 7 itself (if you had one).
The beta version has 3 iPhone sizes and 4 iPad sizes. No fancy iPhone XS models or newest iPads, but we’ll be able to expand the list later.
Create a wireframe
Adding elements to your wireframe is easier than you think, you just need to draw them…
There are two ways to do this:
- draw with an Apple Pencil
- draw with your finger or “dumb” stylus while holding the 🖋 icon
Most left-side buttons are quasi-modal, i.e. you need to keep holding them while drawing.
There are five basic shapes you may draw:
- Rectangle (add round corners if you wish)
- Image (same as a rectangle)
- Circle (and that’s intentionally a circle, not an oval)
- Paragraph
- Header or single line of text
Once the shape is drawn, you may move or resize it with your fingers or change its properties (opacity, colour, etc…) by using the bottom property panel.
The magic here is that these shapes can be freely transformed into one another. You could create a layout with just rectangles and then transform these rectangles into images and paragraphs. Or swap a paragraph and an image by just changing the shape type. It’s easy.
Need to remove a shape?
- Select the shape and tap 🗑 or
- Cross it out as you often do on a paper
Preview the result
You could preview your wireframe in real size by tapping the ▶︎ button on the top-right corner.
It’s very handy for testing tap areas of the buttons or just knowing how your wireframe may look on the actual device.
Export and share
Need to share your sketch with others? Tap the “share” from the drawing screen or select and share multiple ones from the Projects.
In addition to sharing your wireframe via messages or e-mail, you may print it, save it as a hi-res PDF or export to Marvel.
You heard it right, Iterate beta has an early support for Marvel API: all your wireframes will be stored within an Iterate project on Marvel and you can use the web app to create clickable prototypes or continue your work in Marvel itself.
A few more tricks
You’ve seen some basics, but there are a few more things to try…
Advanced Undo/Redo
Iterate supports infinite, nonlinear Undo and Redo. In other words, you may freely experiment with your wireframes without being afraid of breaking something: you can always return to any previous step.
Freehand drawing
Getting tired of coloured boxes? Hold down the “freehand” button while sketching to create arrows, icons or whatever else you need to make your wireframe more usable.
Guides
Hold down the # button to enter the guide mode. Now
- draw horizontal or vertical lines and they will automatically turn into guidelines
- move guidelines by, well, moving them
- remove the guidelines by erasing (cross out, like with any other shape)
Release the #. Keep working.
Smart guides
We tried to make the smart guides really smart.
Aside from just helping you align your shapes to edges they let you know that certain shapes have the same width or height and even help you evenly distribute a multiple objects.
Layers and selection
Managing multiple objects can be tricky. So there’s a list of all the objects you have on your canvas. It’s not indispensable for casual work, but very handy if you need to temporarily hide or lock something or just change the z-order of an object.
And if there’s a bunch of overlapping shapes, tap and hold down the intersecting part and you’ll see the full list of objects below your fingers.
