Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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

788 views

Published on

Published in: Technology, Art & Photos
  • Be the first to comment

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

×