The purpose of prototyping in Xcode is to be able to create a super high fidelity flow using the exact same software that builds i OS Apps. You can embed beautiful interactions, transitions, animations and sounds to produce a true native experience.
In this tutorial, I will focus on the Storyboard feature, a powerful tool in Xcode that allows you to build an App without a single line of code.
You will be able to create a functional prototype in a matter of hours.
The end goal is to eventually be able to implement your own designs for i OS.
Just like learning CSS for the Web, this will immensely help developers overcome their struggle with UI work and push the collaborative work between designers and developers. Designing static images is not enough, you need to bring them to life. The user interface is overwhelming at first, so let’s focus on the crucial parts that apply to Storyboard.
Have your App screens ready without the status bar.
To add them, create a “Group”, then “Add Files To…”. Make sure you have “Copy items into destination group’s folder” and “Add to targets” enabled. Resize the button to fit the entire dimension of the screen.
Now that we have the basic setup done and the images added, we can finally start Storyboarding. When you select the button, you should see properties appearing in the Attributes inspector.
Set Type to Custom, Title to nothing and Image to your first screen (type the name of your image and it will autocomplete). To create a second screen, simply drag and drop a View Controller, then repeat the previous step.
Xcode connects screens by a link they call “segue”.
To create a segue, hold the “Control” key on your keyboard with your mouse pointer on the first screen and drag and drop on the second screen. This will create a transition that slides the second screen from the bottom.
You can customize the transition by clicking on the segue (circle symbol between the two screens) and set the Transition to Cover Vertical, Flip Horizontal, Cross Dissolve or Partial Curl.
Or, you can uncheck “Animate” if you don’t want any animation.
The Push segue doesn’t work without a Navigation Controller.