Learning Xcode 5 As a Designer

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

Meng To
Meng To
Nov 29, 2013 · 6 min read

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

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.


Your First Screen

Type a Message UI

Navigation Bar

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!

Linking To Another Screen

1px Lines

Toolbar Navigation

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

Scrolling

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!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store