Presentation on prototyping iOS apps, with emphasis on lean design and development processes, and the tools used for prototyping. Many of the slides were in the form of small videos, which unfortunately cannot be shown in the PDF format uploaded here. Presentation given by Tom Bowden, CEO of Eventacular, at Tokyo iOS Meetup in December 2015. Presentation on YouTube: https://www.youtube.com/watch?v=vN82aIGMxLQ

1. Prototyping iOS Apps
Tom Bowden
Tokyo, November 2015

2. Defining a Prototype
• A prototype is an initial model of an object built to test a
design. The word comes from a Greek word for “primitive
form”. (UXL Encyclopedia of Science, 2015)
• Prototypes are not meant to be perfect versions of the
designed products. The process results in a prototype that
is not exactly what the final design will contain, but that is
close enough to let the designers see if it will work or not.
• ‘Testing the design’ is built into the meaning of a
prototype.
1/18

3. Why Prototype Apps?
• Get your ideas into app ‘form’ quickly
• Get feedback from others (‘test the design’)
• Be able to improve (‘iterate’) quickly
• Test several ideas without investing too much time or
money. Develop the business strategy in parallel.
• Not be worried about throwing out the entire prototype
and starting again, since little time and money invested
2/18

4. ‘Lean’ Approach
Central to the Lean Startup approach is Validated
Learning:
“Startups exist not just to make stuff, make money, or
even serve customers. They exist to learn how to build a
sustainable business. This learning can be validated
scientifically by running frequent experiments that allow
entrepreneurs to test each element of their vision.”
(The Lean Startup, Eric Ries, 2011)
3/18

5. Who Should Prototype?
• Everyone: Over the last 12 months, app prototyping has
become accessible to anyone who wants to make an app
Designers – Engineers – People on Business-Side
• Engineers: even though you have the ability to make the
actual app, take a step back and prototype first – your product
will be better if you do so
• Business-People: you have no more excuses not to be able to
make a simple prototype in order to better convey your app
ideas and get buy-in
4/18

6. There are now dozens of prototyping tools on the market:
Prototyping Tools
Proto.io
Pixate
Origami
Avocado
Framer
Flinto
InVision
Keynote
POP Fluid UI
Briefs
Form
Mockup.ioMarvel
Balsamiq
Keynotopia
Prott AxureRP
Indigo Studio
Principle
5/18

7. Page-based
In a page-based tool,
you lay out different
screens, and then you
make hotspots or
buttons to connect
them together.
You tap a button or
hotspot somewhere
on one screen to go
to another screen.
Types of Prototyping Tools
Layer-based
Each layer on a page
can be made
tappable, swipe-able,
and draggable, with
animations if desired.
Usually used for
single-page designs,
since there are
generally fewer
options to create the
entire flow of an app.
Code-based
Use code (text-based
or visual-node-based)
to give you more
control than layer-
based prototypes.
Again, usually used
for single page micro-
interactions, otherwise
you might as well
build the actual app.
6/18

8. Which Tool is Best?
In my humble opinion: Principle for Mac.
• It offers both page-based and layer-based advantages.
• It is possible to lay out the entire flow of the app, and also
create micro-interactions on a page.
• It is easy to learn how to use Principle, and it is easy to share
Principle prototypes.
• The Preview window shows the results of changes live.
• It is also relatively inexpensive (US$ 99).
7/18

9. Screenshot of Principle
8/18

10. Output of Principle
9/18

11. Creating a Scrollable View in Principle
10/18

12. Creating a Horizontal Scroll View in Principle
11/18

13. Page Views and “Drivers” in Principle
12/18

14. Drivers in Principle
Drivers connect properties to each other using keyframes. Drivers
work within an artboard.
Drivers work on the following properties of a layer or group of
layers, based on their X or Y position:
• X
• Y
• Width
• Height
• Scale
• Angle
• Opacity
• Radius
• Stroke Width
13/18

15. Animation View in Principle
The Animate timeline is used to customize animations between artboards.
14/18

16. Full Prototype in Principle
15/18

17. Weak Points of Principle
• Cannot access sensors of the mobile device
• Can only work with static images
• No way to group together related artboards, so you
need many artboards in order to prototype an entire
app
• No simple way of extracting layer coordinates and
animation timings from the app to communicate with
engineers
16/18

18. Some Tips
• For pixel-perfect designs, use Sketch 3 with Principle. They work very well
together.
• Design @1x (i.e. design in ‘points’), not @2x.
• Start design based on the physical device you have for live testing. E.g. if
you have a 4.7-inch iPhone for testing, start your designs based on that.
• Later, mock up designs for multiple device sizes (iPhone 4-inch, 4.7-inch,
5.5-inch, iPad).
• Make use of the many UI templates available on the net for free.
• Use Lookback for recording user tests on the device (note: requires a
jailbroken device).
17/18

19. Thank You for Listening!
tom@eventacular.net
http://eventacular.net
Now: Q&A
18/18