Learning Xcode 5 As a Designer
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!