Learning Xcode 5 As a Designer

It’s time for designers to implement their own iOS designs.

6 min readNov 29, 2013

--

For the past month, I woke up at 7am, consistently worked until 7pm weekdays and Sundays to get Ripple out while maintaining a full-time job at Carshare.hk. This month, it’s all about the iOS experience — my challenge is to release both iOS Apps by the end of the year while playing an instrumental role as a designer/front-end.

Download the functional Xcode prototype here: http://cl.ly/2A0m0j0i0g1K

Embracing Xcode Storyboard

Along the way, I’ve met a fantastic iOS Engineer that embraces the use of Storyboard. I’ve used Storyboard to prototype before, but my dream has always been to build a functional iOS App. With his help, I was able to tremendously simplify iOS development by allowing him to focus on the more advanced interactions while I would pixel-perfect, animate and lay out the design as far as I could. Lucky for me, the documentation from Apple is world-class. Additionally, a quick visit to Stackoverflow will show you that the community is large. But we won’t be coding this time.

Simplifying for Designers

As designer, having to juggle between UX, Visual design and front-end, I can’t allow Complexity in. Part of being an efficient designer is to be able to say no. If I have to learn the entire Objective-C language, I would lose motivation. In this article, I won’t focus on the complicated part as I think that others are already doing a good job at explaining it. Instead, I will connect first on the things that designers are already familiar with and work my way into Storyboard.

iOS7 and Xcode 5

With iOS7, the visual design play a much smaller role, allowing designers to focus more on the function behind the style. With this massive update, Apple released Xcode 5, a much friendlier development tool. It now has Assets Library, Automatic Configuration (Finally, easier to test on your iPhone), Open Quickly (Yep, like SublimeText), SpriteKit and a much more robust Storyboard.

Getting Started With Xcode

After you’ve installed Xcode, create a new Project.

Choose Single-View Application and give it a name.

With every new project, you have a Storyboard.

Every iOS designer is familiar with the AppIcon and LaunchImage. To populate, simply drag and drop.

Assets Library, my Favorite

Exporting Assets to Mobile used to be the biggest communication problem between designers and developers. Developers had to learn Sketch or Photoshop to get the assets themselves or had to communicate how assets should be exported. For most designers, it’s a must-do, spending valuable time on documenting the Assets. Then, there’s the dreaded Stretchable Assets. You had to know how to make them — it was so complicated that many wrote guides about them.Well, no more. Xcode 5 will create those stretchable assets for you.

From Sketch, Export all your assets in 2x and half size. Sketch will do the naming for you.

Now Import all your assets from Sketch. Xcode will automatically match them.

For Stretchable assets, click on Show Slicing.

Then one of the 3 buttons depending on how you want your asset to be stretched.

Voila, Xcode did all the work for you! Then, do the Slicing for all your buttons and bubbles.

Your First Screen

Let’s create the first screen. In your Storyboard, drag and drop the Image View from Objects Library.

Then, go to Attributes Inspector and change the Image. Xcode will autocomplete if it finds it in your Assets Library.

Try dragging in another Image View and set it to bubble-white. As you resize it, you’ll notice how it nicely stretches.

Next, create the avatar. If you hold Alt, you’ll notice a familiar Sketch feature. ;)

Now drag in a Label to set the text inside. You can set the Lines to 0 so that you can have unlimited lines.

Go to Size Inspector and resize using numbers instead, it’s more precise.

Being the perfertionist that you are, you’ll make it as faithful to the design as possible. :)

For fonts, you will want to select a thinner iOS7-appropriate Helvetica Neue Light.

Type a Message UI

Let’s drag in the View. It’s almost like a folder because you can put anything inside it. It has its own Attributes and is super versatile.

The Text Field has properties that you will be familiar with if you’ve done some CSS. Make sure that the Border style is none.

Then, the infamous Button. Notice the Highlighted state properties.

Navigation Bar

Here’s a neat trick. Go to Help and find “Embed”, then select Embed in Navigation Controller.

Want a title? Edit your View Controller’s Navigation Item’s properties.

Yep, Navigation Bar can have Action buttons. The Object is at the very end of the Library. Make sure to Edit the Tint color since Xcode will take the liberty to tint your images by default.

Rounded Corners

Often in CSS, you don’t want to use images for basic things like rounded corners. Well, in Xcode 5, you can programmatically set the rounded corners. It’s super useful!

Set the layer.cornerRadius Runtime Attribute with these settings. It’s a hack!

While it won’t show up in Storyboard, you’ll see it when you use the Simulator.

Linking To Another Screen

Create an Empty button and place it in your View.

From that button, hold Ctrl and drag it to the other screen. Choose Push. Make sure that on the root screen, you have a Navigation Bar, or it won’t work.

1px Lines

Xcode works in pt units. You can’t really create a View and set it to 0.5pt or 1px. So in order to create that hair line, you have to manually create a one pixel asset.

Toolbar Navigation

iOS’s stock toolbar is pretty customizable, allowing you to change the colors, texts and icons.

With your View Controller selected, search Embed again, but this time select Tab Bar.

Just like the Navigation Bar, you have options for each View Controller.

Sometimes, you don’t want the Navigation Bar or the Toolbar, so you must hide them by Selecting Bottom Bar to None and check “Hide Bottom Bar on Push”.

Scrolling

Everyone loves that Bounce back scroll that iOS has. But in order to achieve that, you must have a Table View as a container. The structure is: Table View / View (full) / Your objects.

Careful, Table Views and Views come preloaded with a White background. Make sure to set to Clear color.

It can be interesting to have a Scrolling area in parts of the screen.

Download the Xcode Project

Go ahead, play with the Ripple Xcode functional prototype and edit the styling as you wish: http://cl.ly/2A0m0j0i0g1K

No Codes

If you look past the complex parts, Xcode is way friendly than HTML/CSS/SCSS/Javascript. It has a powerful UI that allows you to edit most of the visual elements of your App. In a way, it’s what WYSIWYG should have been. Next time, I will discuss the use of third-party Libraries using CocoaPods and enabling custom Fonts, sounds and animations with as little coding as possible. If you’d like to follow the development of these Xcode tutorials or Ripple, feel free to follow me: @mengto on Twitter. :)

Discuss on Designer News

Special thanks to @jamztang for teaching me all of these Xcode tricks!