Design Then Code ~ iPhone & iPad Interface Design Tutorials

The best iPhone, iPad and Mac interface design & development resources.
Learn how to design great interfaces in Photoshop, then how to build them in Xcode.

Follow @flyosity on Twitter
Screenshot 1 Zoom Screenshot
Screenshot 2 Zoom Screenshot
Screenshot 3 Zoom Screenshot
Screenshot 4 Zoom Screenshot
Screenshot 5 Zoom Screenshot

Just Getting Started?

Building iOS Apps From Scratch is an introduction to Objective-C and Cocoa for first-time coders. It explains Obj-C’s unique syntax, the Cocoa frameworks, creating and using objects, Model-View-Controller, and the basics of building an app’s interface. This is suggested reading before tackling project tutorials.

Screenshot 1 Zoom Screenshot
Screenshot 2 Zoom Screenshot
Screenshot 3 Zoom Screenshot
Screenshot 4 Zoom Screenshot
Screenshot 5 Zoom Screenshot
Screenshot 6 Zoom Screenshot

Interface Design Techniques

Lighting & Realism In Interface Design is an introduction to designing beautiful, realistic interfaces in Photoshop. It explains the physics of real world lighting, how gradients, shadows and highlights are created, and how to use Layer Styles to design buttons, panels and more. Finally, it steps through how to design interface elements from Twitter for Mac and Calcbot for iPhone.

Get the 30+ page guide and fully-layered PSD files bundled together.

Your First Project

Designing & coding the first screen from Texture!, a rustic, Old Western-themed background image app. Uses textures and blend modes to build up the background, then vector objects to create ribbon-shaped buttons. An introduction to view controllers, the view hierarchy, custom UIButtons and target-action. Newly updated for Xcode 4 and iOS 5!

Get the 70+ page guide, PSD & Xcode project all bundled together.
Or buy the design & code sections separately.
Screenshot 1 Zoom Screenshot
Screenshot 3 Zoom Screenshot
Screenshot 5 Zoom Screenshot
Screenshot 7 Zoom Screenshot
Screenshot 9 Zoom Screenshot
Screenshot 11 Zoom Screenshot
Screenshot 13 Zoom Screenshot

About Me

Mike RundleI'm Mike Rundle, a designer & software engineer, and I've been working on the web my whole career. When the iPhone SDK came out I learned Objective-C and started working on and writing about building Cocoa apps, specifically custom interface development.

I feel that all designers should learn how to code, all hackers should learn the basics of UI design, so Design Then Code is my way of trying to make that happen.

I write about interface design & development at Flyosity and post about Apple-related topics on Twitter. I live in Raleigh, NC with my wife Eleni and black labrador Dora.

Tutorial application design & content are © Flyosity, LLC.

Be notified when new Design Then Code tutorials are published.

Additional Resources

Crafting Subtle & Realistic User InterfacesThe underlying secret to beautiful user interface design is realism.

Tapworthy by Josh ClarkOne of the best books on iOS interface and user experience design.

Pictos IconsThe perfect icon set for your iOS applications.

Your Design Is Wrong (And Here's Why)How to identify and fix a design that has execution problems.

Kill The Settings, Build Opinionated SoftwareBuild software how you want to build it. You're the editor.

Dribbble: Popular ShotsSee what the best visual designers in the world are working on.

Cocoa Dev CentralScott Stevenson's excellent Cocoa resources site.