Prototyping with iOS
Storyboard
Introduction
Very often
We are tasked to create
iOS prototypes
To test look and feel
Introduction
So we did quick and dirty
work using PNGs given to us
Introduction
 With Photoshop
Introduction
 Balsamiq
Introduction
 Powerpoint
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...
Storyboard
Enter Storyboard
It’s helps designers and
developers
To create prototypes
That can be deployed on devices
Storyboard
You can create a quick prototype
Using storyboard
And deploy on a device for
testing
Storyboard
With the layout
You can sit down with the client
And create the app flow
In a visual manner
That is easy t...
Storyboard
Storyboards are awesome
You can take pngs of mockups from your
clients
Put it as a UIImage
Paste it in your...
Storyboard
Voila and your prototype is ready
Storyboard
 Is like Xib on steroids
 Without all the nasty side effects
Storyboard
Best thing is that all these can be done
relatively easily
Plus, most developers knows their way
around XCode...
Storyboard
Best part is that
With the storyboard prototype
You can immediately put the logic into it
Once the client i...
Storyboard
Those areas marked in red in
the previous slide are the
icons indicating the transition
They are known as Seg...
Things to remember
Always remember to select
the User Storyboards option
when creating a new project
File extension is ....
Next
Remember to set a
storyboard to be the initial
view controller
Go to View -> Utilities ->
Show Attributes Inspector
Last
Add Navigation View to your
initial view controller
Select your initial view
Go to Editor -> Embed In ->
Navigatio...
Creating New Storyboard
Just drag a new view
controller to the storyboard
screen
Link storyboard screens
together part 1
Just select your button
Which will trigger the transition
Then right click and ...
Link storyboard screens together
part 2

Using code
You need to give the segue an
identifier
Then write some code
The code to write

[self
performSegueWithIdentifier:
@"SecondViewSegue"
sender:self];
Storyboard prototyping
Storyboard prototyping
Storyboard prototyping
Storyboard prototyping
Storyboard prototyping
Storyboard prototyping
Storyboard prototyping
Storyboard prototyping
Upcoming SlideShare
Loading in …5
×

Storyboard prototyping

638 views

Published on

Published in: Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
638
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Storyboard prototyping

  1. 1. Prototyping with iOS Storyboard
  2. 2. Introduction Very often We are tasked to create iOS prototypes To test look and feel
  3. 3. Introduction So we did quick and dirty work using PNGs given to us
  4. 4. Introduction  With Photoshop
  5. 5. Introduction  Balsamiq
  6. 6. Introduction  Powerpoint
  7. 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. 8. Storyboard Enter Storyboard It’s helps designers and developers To create prototypes That can be deployed on devices
  9. 9. Storyboard You can create a quick prototype Using storyboard And deploy on a device for testing
  10. 10. 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
  11. 11. 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
  12. 12. Storyboard Voila and your prototype is ready
  13. 13. Storyboard  Is like Xib on steroids  Without all the nasty side effects
  14. 14. 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
  15. 15. 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
  16. 16. Storyboard Those areas marked in red in the previous slide are the icons indicating the transition They are known as Segues Pronounced as Segway
  17. 17. Things to remember Always remember to select the User Storyboards option when creating a new project File extension is .storyboard
  18. 18. Next Remember to set a storyboard to be the initial view controller Go to View -> Utilities -> Show Attributes Inspector
  19. 19. Last Add Navigation View to your initial view controller Select your initial view Go to Editor -> Embed In -> Navigation Controller
  20. 20. Creating New Storyboard Just drag a new view controller to the storyboard screen
  21. 21. 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
  22. 22. Link storyboard screens together part 2 Using code You need to give the segue an identifier Then write some code
  23. 23. The code to write [self performSegueWithIdentifier: @"SecondViewSegue" sender:self];

×