The document discusses using Storyboard to create iOS prototypes that can be deployed on actual devices. Storyboard allows designers and developers to create prototypes visually with layouts, images, buttons and basic logic. This captures touch interactions better than other tools like Photoshop or PowerPoint. Storyboards are easier for most developers to work with compared to other tools. Prototypes can then be tested on devices and the logic can be kept for the actual app, saving time and money.

1. Prototyping with iOS
Storyboard

2. Introduction
Very often
We are tasked to create
iOS prototypes
To test look and feel

3. Introduction
So we did quick and dirty
work using PNGs given to us

4. Introduction
 With Photoshop

5. Introduction
 Balsamiq

6. Introduction
 Powerpoint

7. But there is a catch
All these tools do a pretty OK job
But they do not capture the touch
And feel
Of the prototype on an actual
device
Such as swipes on a device

8. Storyboard
Enter Storyboard
It’s helps designers and
developers
To create prototypes
That can be deployed on devices

9. Storyboard
You can create a quick prototype
Using storyboard
And deploy on a device for
testing

11. Storyboard
With the layout
You can sit down with the client
And create the app flow
In a visual manner
That is easy to understand

12. Storyboard
Storyboards are awesome
You can take pngs of mockups from your
clients
Put it as a UIImage
Paste it in your Storyboard
Drag and drop a few buttons
Link them to your other screens
Add in some hard coded data

13. Storyboard
Voila and your prototype is ready

14. Storyboard
 Is like Xib on steroids
 Without all the nasty side effects

15. Storyboard
Best thing is that all these can be done
relatively easily
Plus, most developers knows their way
around XCode better than Photoshop
Prototypes get done faster
Clients can test it on your device at home

16. Storyboard
Best part is that
With the storyboard prototype
You can immediately put the logic into it
Once the client is happy with the prototype
Saves time and money

18. Storyboard
Those areas marked in red in
the previous slide are the
icons indicating the transition
They are known as Segues
Pronounced as Segway

19. Things to remember
Always remember to select
the User Storyboards option
when creating a new project
File extension is .storyboard

21. Next
Remember to set a
storyboard to be the initial
view controller
Go to View -> Utilities ->
Show Attributes Inspector

23. Last
Add Navigation View to your
initial view controller
Select your initial view
Go to Editor -> Embed In ->
Navigation Controller

25. Creating New Storyboard
Just drag a new view
controller to the storyboard
screen

27. Link storyboard screens
together part 1
Just select your button
Which will trigger the transition
Then right click and drag the
Trigger Segues outlet
And pull it to the storyboard that
you want to link

29. Link storyboard screens together
part 2
Using code
You need to give the segue an
identifier
Then write some code

31. The code to write
[self
performSegueWithIdentifier:
@"SecondViewSegue"
sender:self];