Learning Xcode 5 As a Designer

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

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.

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.

And an Assets Library.

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 click on Start 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.

Download the Xcode Project

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. :)