This post is part of a series on native iOS prototyping.

So now taking custom views a step farther, let’s add a full-screen image to a new iOS project. Because I like to monkey around and get meta, I’ll be adding a full-screen image of an iPhone to our iPhone app.

Press Command + Shift + N in Xcode and create a new empty application and call it ImageView. Press Command + n on the keyboard and create an new class that is a subclass of UIViewController. Go back to the AppDelgate.m file and import the new ViewController.h file so that the app delegate is aware of the new class.

In the application:didFinishLaunchingWithOptions: method create a new instance of the view controller and add it as the rootViewController.

Making retina images

Currently for your app to be backwards compatible with older iPhones, iPads and iPod Touches you will need to produce retina and non-retina images...

This post is part of a series on native iOS prototyping.

UIView is the smallest unit used to build a user interface in iOS. UIViews can have other views embedded in them to construct a hierarchy of multiple views on one screen. Let’s create a custom UIView in a new Xcode project.

So press cmd + shift + N and create a new Xcode project. Name the project and pop open that AppDelegate.m file. Change the window background color to red. We’ll do this to prove that we’ve later covered the background screen with our own UIView.

self.window.backgroundColor = [UIColor redColor];

Run it and you’ll see our red iPhone screen in the simulator.

Creating a new class

Next, press cmd + n to create a new file that we will add to the project. In the popup window select Cocoa Touch in the left column and Objective-C class in the template selector area. Click Next.

Fill in the Subclass of...

Sometime last year Chesley Andrews, Paul Lau and I started coming into work an hour early everyday to study Objective-C Programming: The Big Nerd Ranch Guide. After the first 20 chapters – completed at roughly a chapter a day – I began to feel I knew enough Obj-C to move into iOS programming.

But there was a catch. The next BNR book in the series, iOS Programming: The Big Nerd Ranch Guide, concentrated on Interface Builder. While I’m sure working with IB and Storyboards are a great way to make iOS apps none of the apps in the Etsy codebase are built using them. If the mobile team’s designers want to be able to work in code on our own apps we’re going to need to know how to create UI through code.

So I’ve moved on to Programming iOS 7, 4th Edition which is focused mostly on code. I’m going to start posting here as a way to take notes, document my own progress and provide a trail for...

This is part of a series of posts building the skills needed for Native iOS Prototyping.

Changing the iPhone’s screen color

Press Shift + Cmd + N to create a new Xcode project. And select Empty Application from the project menu.

Add a title for your project in the Product Name field. None of the other fields matter all that much. Company Identifier should be your website address with .com first. Class Prefix should 3 capital letters – possibly your initials. Device should be set to iPhone.

Then click Next. Now you’ll see the Xcode workspace. Obj-C files are split into both a header file (marked with a .h extension) and an implementation file (marked with a .m extension). The header file is for declaring the names of properties and methods while the implementation file is where the properties and methods are defined and used. The AppDelegate.m is the first file loaded by our app...

Mobile app prototyping tools can illustrate user experience flows over multiple screens, or they can help a designer concentrate on detailed, animated interactions for just a single screen. I’m more interested in the latter, as this kind of prototype can help bring my graphic designs to life. Still, here’s a brief aside about these tools.

Multi-Screen UX Prototyping Tools

Often a well laid out Photoshop, Sketch or Illustrator file that already illustrates flow can save a designer from having to make multi-screen user flow prototypes, but there are times when your team may need this extra level of clarity. To me, the two most interesting options are iOS Storyboards and Flinto.

iOS Storyboards

iOS Storyboards are native for iPhone development. Designers can use them to string together mockups using realistic push segue transitions between screens. There’s a bit of overhead in that...

Like most mobile app designers, I’ve been investing time and thought in how to best prototype animations for iOS. If you need to be convinced that animation should play a role in your app designs read Transitional Interfaces and watch this talk by Pasquale D'Silva.

Until now I’ve relied upon Photoshop documents, keyframe drawings and the occasional CSS3/Javascript prototype to communicate with the developers on our projects. I could use these tools – while pointing to the mockup containing several keyframe screens on my monitor – to ignite a collaborative conversation about how best to accomplish a particular custom transition. Really, it seemed that by leaving room for a developer to collaborate on the details of an animation that we could become a tighter team.

But recently I used Quartz Composer and Facebook’s Origami to create a custom animation for the navigation in a new Etsy...