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];