An overview of the editor

As soon as you open a .storyboard or .xib file, Xcode presents you with the Interface Builder editor:

You can easily notice three different areas marked with numbers in the preceding image. They represent the following:

1. The document outline contains a tree structure that represents all the view controllers and elements available in the Storyboard/XIB file. It is a handy way to select specific elements, especially when the user interface is crowded with different components.
2. In the center of the screen, you can see the interface editor. From this area, you can create new view controllers, place and move elements inside views, define navigation flows, and connect UI components to your classes.
3. The utilities panel allows you to add details to the UI elements: you need to first select an element from the interface editor or document outline, and then you can access and set all the element properties through six different subsections of the utilities panel:
   

Let's take...