Roy Stanfield

Senior Product Designer on the mobile team at Etsy. Recovering artist. Adventures in code.

Read this first

Creating a scroll view – Beginning iOS Programming (Post 4)

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

When prototyping you may need to mockup an activity feed, and to have this feel realistic in the prototype you’ll need to know how to make the activity feed scroll. Let’s create a UIScrollView instance and add an image of an activity feed that is scrollable.

finished_scrollview.gif

Create a new Xcode project by pressing cmd + shift + N and select the Empty Application template. Name your project and save it. Next make a new class by pressing cmd + N and select the Objective-C class and name this something like ScrollViewController. Make sure it is a subclass of UIViewController.

Next you’ll need an image to scroll, so make something the width of an iPhone, but taller, and add it to your project. For the purposes of the prototype you can probably just supply a retina (@2x) image, but to be thorough I always make a non-retina image too.

Drag your...

Continue reading →


Adding an image on screen – Beginning iOS Programming (Post 3)

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.

phone_post.png

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.

add_to_app_delegate.png

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

Continue reading →


Custom views – Beginning iOS Programming (Post 2)

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.

phone_1.png

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.

objective_c_class.png

Fill in the Subclass of...

Continue reading →


Native iOS prototyping

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

Continue reading →


Beginning iOS programming (Post 1) – changing the iPhone’s screen color

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.

empty_application.png

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.

product_name.png

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

Continue reading →


Multi-Screen UX Prototyping Tools… or, gosh, what should we call these things?

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.

tap_it.png

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

Continue reading →


What I’m looking for in a mobile app prototyping tool

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

Continue reading →