iOS design: a case study

110
iOS design: a case study CocoaHeads, Antwerp, March 26th 2012

description

Case study of the ConcertWall iPhone app by http://www.wolfslittlestore.be (design) & http://www.coin-c.com/ (development)

Transcript of iOS design: a case study

Page 1: iOS design: a case study

iOS design: a case studyCocoaHeads, Antwerp, March 26th 2012

Page 2: iOS design: a case study

I would like to give some context to this presentation. These slides are from a 30 minute presentation called iOS design: a case study.

Page 3: iOS design: a case study
Page 4: iOS design: a case study

If I make presentations, some slides only contain a few words or images so the slides won’t distract from what is being said. This “web” version contains sticky notes (like this one) that summarize what I talked about when displaying the slide during the original talk.

Page 5: iOS design: a case study

iOS Design: a case study is about how we built ConcertWall.

Kristof, developer@ahigherugliness

Johan, interface designer@wolfr_

Page 6: iOS design: a case study

Let’s go through the process of designing ConcertWall, from initial brief to final result.

Page 7: iOS design: a case study

Introduction

Page 8: iOS design: a case study

My name is JohanWolf or @wolfr_ on the internet

Page 9: iOS design: a case study

I read all day

Page 10: iOS design: a case study

I like to play video games

Page 11: iOS design: a case study

I love to write

Page 12: iOS design: a case study

I have an interest in photography

Page 13: iOS design: a case study
Page 14: iOS design: a case study

So this is my company’s website, ( http://wolfslittlestore.be/ ). Notice how the graphics on the homepage are @2x retina :)

Under work you can see what I do: interface design, web design, branding and identity, HTML & CSS, photography and design for mobile devices.

Companies evolve and this is actually a little bit outdated - I specifically want to focus more on the interface design part. The next website will reflect this!

Page 15: iOS design: a case study

Design for mobile

Page 16: iOS design: a case study

Design for mobile

These days I design a lot of interfaces for mobile: iPhone, iPad, Android, Windows Phone 7 or for custom hardware.

Page 17: iOS design: a case study

First iPhone owned:Number of iPhones owned so far:Favorite application:Most used application:Number of apps currently on iPhone:Number of iPhone apps designed:Number of iPad apps designed:

iPhone 3G3

Tweetie (original)Reeder

10442

Page 18: iOS design: a case study

First iPhone owned:Number of iPhones owned so far:Favorite application:Most used application:Number of apps currently on iPhone:Number of iPhone apps designed:Number of iPad apps designed:

iPhone 3G3

Tweetie (original)Reeder

10442

I’ve always used an iPhone as my primary phone since it came out, now on my third one. Out of all platforms it’s my favorite one to design for.

Page 19: iOS design: a case study

Case study

Page 20: iOS design: a case study

Initial brief

• Redesign of existing Last Concerts iPhone app• Design of extra functionality to be added• Website: add polish

Page 21: iOS design: a case study

Proposal• Complete redesign and rebranding of Last Concerts

iPhone app• New marketing strategy: new website & app icon• Further ideas: great iTunes copy, offline ads (in concert

halls)

Page 22: iOS design: a case study

This is the old Last Concerts website. [http://www.lastconcerts.com/]

Page 23: iOS design: a case study

This is the old app design. Notice how it doesn’t look too bad (albeit a bit standard) because the defaults Apple provided are excellent.

Page 24: iOS design: a case study

Wireframing &interaction design

Page 25: iOS design: a case study

To kick off the project we sat down with a giant sheet of paper. I bought a big roll of paper in the paper shop. Drawing together is one of the best ways to get to define what is going to be built.

Page 26: iOS design: a case study

Not going to bore you too much with this part, but of course before designing or wireframing anything you need to know:

* Why are we building this, for who…?

* What are the goals of people using the app?

Page 27: iOS design: a case study

On the train home I thought a bit about the marketing... the initial app name idea was “Gigfind” (rejected later). We kept the poster idea.

Page 28: iOS design: a case study

The next process was putting everything I learned in the wireframes. This is my style of wireframing where I put everything in a giant document. This one was made in OmniGraffle but recently I switched over to Illustrator for making these.

Page 29: iOS design: a case study

This is a detailed view of part of the wireframe. Notice the notes that outline my thoughts surrounding the screens I’m designing.

Page 30: iOS design: a case study

I generally use this template called Touch Gesture reference guide to show if there is any specific movement required on a screen. [http://www.lukew.com/ff/entry.asp?1071]

Page 31: iOS design: a case study

This is another template (by Teehan+Lax). I don’t use it personally but I included it here show the difference between the interaction design and visual design. A “sketch” style is used here to show that this part of the design is NOT about the visual. [http://www.teehanlax.com/blog/ipad-sketch-elements-ai/]

Page 32: iOS design: a case study

interaction design visual design

Page 33: iOS design: a case study

interaction design visual design

Another technique that helps to make the distinction is to make your UI elements gray and unappealing just to make sure you concentrate on the interaction design first.

Page 34: iOS design: a case study
Page 35: iOS design: a case study

Sometimes it might make more sense to wireframe with a good kit of default UI and build a working app first, based on the default UI patterns. This is especially true when you are developing an app for Android, iPhone and WP7 at the same time.

If you are doing client work, this will mean educating your clients, and possibly your boss too. The default UI can be implemented relatively fast and is 100% tested. Going custom is hard.

Page 36: iOS design: a case study

Visual design & user interface customization

Page 37: iOS design: a case study

People always forget things.

Custom is hard.

Page 38: iOS design: a case study

I often hit this iceberg when I stray from native controls. For example, Ajax interactions require more polish than basic web pages. Custom mobile menus require more polish than the built-in version. If the team doesn’t have the time to polish custom UI, it’s often better to stick to the boring native controls that work.Braden Kowitz, Designer at Google

Page 39: iOS design: a case study

Very simple example:a dark interface

Page 40: iOS design: a case study

Let’s say you were to make a “dark” iOS interface. Maybe a developer would start with a simple grouped table view in Xcode.

Page 41: iOS design: a case study

You could set a new background color, but now your other UI elements don’t match the background.

Page 42: iOS design: a case study

You can now go look for ways to customize the other UI elements. In OS5 some interface elements can be given a “tint” color.

Page 43: iOS design: a case study

There are tutorials out there that show you how to change the default UI completely. The end result of most of these tutorials is mediocre at best.

Page 44: iOS design: a case study

Even famous apps like Instapaper don’t implement a version that is 100% “right”.

There is no default list view for dark interfaces in the iOS SDK, so a lot of iOS dev time is probably spent reinventing the wheel (i.e. coloring an existing UI element)

The lines between items have too much contrast, the font for table views is supposed to be bold, and the frame of the table view should have more contrast.

Kudos to Marco for implementing a dark table view when in Dark mode, which is a detail many apps would forget. I am using Instapaper as an example now but trust me, there are a apps out there that are a LOT worse. I <3 Instapaper and by many accounts it’s a leading example.

Page 45: iOS design: a case study

How to make a grouped table view thats fits right in? Start by looking at the one that Apple made. The key to a great iOS design is knowing the platform. Look carefully at how the default apps are built.

Page 46: iOS design: a case study

Non retina graphic

Highlight text shouldbe white

Non retina graphic

Non retina graphic

Work those details (not like this app).

Inconsistent language

Page 47: iOS design: a case study

In the end, if you want a custom design that is great, you’re going to need to implement your own version of certain UI parts using custom assets.

Page 48: iOS design: a case study

List item 1

List item 2

List item 3

Here’s my version the grouped table view... you could say: not much difference? I say - fits right into iOS! [Download PSD: http://dribbble.com/shots/233036-iPhone-list-PSD ]

Page 50: iOS design: a case study

List item 1

List item 2

List item 3

This “dark UI” design works on any background - even disco style backgrounds (using PNG transparency to achieve this).

Page 51: iOS design: a case study

If what you are building can’t be built with the default UI elements take a close look at what the leaders in a particular field are doing e.g. FourSquare recently decided to switch over to MapBox for their maps. [http://mapbox.com/]

Page 52: iOS design: a case study

True business cost of customization: both UI elements took at least several hours & iterations to get right

Page 53: iOS design: a case study
Page 54: iOS design: a case study

This was done by Mike Matas, Bret Victor and their team. Two names you should definitely remember if you’re into interface design. [http://www.mikematas.com/] [http://worrydream.com/]

But if nobody took any UI risk there would not be any innovation out there, so it depends on what you’re doing. This screenshot is from Al Gore’s Our Choice, in my opinion the best e-book there is on iPad, interaction design-wise that is (then Apple took these ideas and made iBooks author... that’s life!) [ http://www.youtube.com/watch?v=U-edAGLokak ]

Page 55: iOS design: a case study
Page 56: iOS design: a case study

The Tapbots guys are famous for their custom interfaces. Their business is practically based on the fact that their apps are 100% custom. I love how they think of power users. [http://tapbots.com/] [http://tapbots.com/software/tweetbot/ipad/]

Page 57: iOS design: a case study

A common interactiondesign mistake

Page 58: iOS design: a case study

Web style form iOS style form (better!)

Page 59: iOS design: a case study

Web style form iOS style form (better!)

It took me a while to learn how to handle forms on iOS. Take a close look at Calendar (add new event), Contacts (edit/add contacts) and Settings to get a good grasp on what to do.

Page 60: iOS design: a case study

Test your design (!)

Use Skala preview http://bjango.com/mac/skalapreview/ by Bjango to view your design while making it. This should give you a better sense of what you’re doing than the huge retina PSD you are working in.

Page 61: iOS design: a case study

Design resources

Page 62: iOS design: a case study
Page 64: iOS design: a case study
Page 65: iOS design: a case study

The Teehan+Lax PSD template is your best friend when designing for iOS. It’s an almost perfect representation of Apple’s UI elements in the form of a PSD. [ http://www.teehanlax.com/blog/iphone-4-gui-psd-retina-display/ ]

Page 66: iOS design: a case study

Design: lessons learned

Page 67: iOS design: a case study

• Custom vs. native is a tough balance - stick to the standards where possible

• “Coloring” UIKit makes more sense than re-inventing the wheel

• Don’t think you can do better than Apple (unless you can invest the same time)

Page 68: iOS design: a case study

• Give your app personality through:• Splash screen• App icon• App content

Page 69: iOS design: a case study

• Don't try to give your app personality through:• Custom interaction design• Ignoring standards and good defaults (e.g. standard sizes of

elements, 44px “touch” area)

Page 70: iOS design: a case study

Final designs

Page 71: iOS design: a case study
Page 72: iOS design: a case study
Page 73: iOS design: a case study
Page 74: iOS design: a case study
Page 75: iOS design: a case study

App icon

Page 76: iOS design: a case study

Iterations

Page 77: iOS design: a case study

Iterations

Since illustration is not my forte we hired an illustrator, Mattias Lundin from Sweden: http://dribbble.com/inkgraphix

Page 78: iOS design: a case study

It’s easy to go overboard with app icon designs. The guys from Spice Invaders made 50 variants... a bit too much.

Page 80: iOS design: a case study

Speaking of “behind the scenes”, here’s another cool one: http://www.repeattimerapp.com/how/

Page 81: iOS design: a case study

In the end we ran with this icon, showing 2 posters, a Woodstock reference, bold colors & a reference to music through the notes & guitar.

Page 82: iOS design: a case study
Page 83: iOS design: a case study

Michael Flarup’s template is the best template out there for designing your app icon. Recently a new version came out “supporting” the new iPad. [ http://appicontemplate.com/ ]

Page 84: iOS design: a case study

Keep in mind that this is the size most people are going to see your icon at, I can only advise to use a simple glyph/form instead of a super detailed representation. Perhaps this design is still too detailed.

Page 85: iOS design: a case study

These icons are super clear and to me still look attractive:

Page 86: iOS design: a case study

Assets & specification

Page 87: iOS design: a case study

You can’t just deliver a PSD to a developer, there’s no way that’s going to work. This part of the presentation is about preparing assets and the way I try to communicate the design.

Page 88: iOS design: a case study

Some tools to work faster when making assets: Prepo is a Mac app to easily convert @2x images to regular sized images (“@1x”). [Prepo: http://wearemothership.com/work/prepo/]

Page 89: iOS design: a case study

Here’s the assets for ConcertWall. Takes some work to export them all, especially crisp assets in both retina and non-retina versions.

Page 90: iOS design: a case study

I use some automator actions to make my life easier e.g. this does about the same thing as the Prepo app (convert @2x to @1x)

Page 91: iOS design: a case study

This action just adds text to multiple files, if you forget to add @2x to the names (like I always do :))

Page 92: iOS design: a case study

I write a spec for the developer in which I explain which images to use where, which fonts to use where etc. You can’t possibly describe the whole design but basic stuff like which asset belongs where is very helpful for a developer.

Page 93: iOS design: a case study

## Lists: thumbnails

Use glow.png for the glow on last.fm images.

* The thumbnails are 54x55 pixels* Use a black 54x55 thumbnail if no image can be found/images are still loading* When an image gets loaded, slight fade in animation would be nice

This is an example of a “specification” for thumbnails in lists in the Concertwall app.

Page 94: iOS design: a case study

A design has to be communicated

Merely sending the mockups is not enough.

Page 95: iOS design: a case study

The app I use to make these is called Mou (http://mouapp.com/), on the left side you write in Markdown, on the right side you immediately see your output. This way you can easily reference asset images directly in the spec. The app allows you to export to HTML and PDF, so when you deliver the spec to the developer he/she can open it up in a separate window (e.g. on a second screen) and have it handy at all times.

Page 96: iOS design: a case study

Marketing: website

Page 97: iOS design: a case study

Here’s a simple way to make a good looking iPhone asset for your marketing website:

Page 98: iOS design: a case study

Download Mikael Eidenberg’s iPhone template, open it in Photoshop, and edit the smart object inside of it (http://www.mikaeleidenberg.se/page/free-iphone-template)

Page 99: iOS design: a case study

This is what it should look like.

Page 100: iOS design: a case study

Now put your own design in there...

Page 101: iOS design: a case study

Bam! A nice graphic for the website.

Page 102: iOS design: a case study

Here’s an early version of the website design. I got tired of the “feature list” type design talking about how great the app is.

Page 103: iOS design: a case study

The new approach is simpler: since the app is free anyway we want to lead people to download right away. Why not let the app speak for itself?

Page 104: iOS design: a case study
Page 105: iOS design: a case study

This is the current version which we are still looking to improve, we would like a “happy” version with a festival background.

Page 106: iOS design: a case study

This shows some of the steps involved in creating this design: photography, logo and icon creation forego the design process. You can’t make anything cool without materials.

Page 108: iOS design: a case study

ResourcesWeb content mentioned in this talkLastConcerts http://www.lastconcerts.com/Touch gesture reference guide: http://www.lukew.com/ff/entry.asp?1071The making of Spice Invaders http://on-5.com/2012/01/the-making-of-spice-invaders/Repeat timer pro case study http://www.repeattimerapp.com/how/ App icon template pixel resort http://appicontemplate.com/Teehan + Lax iPhone 4 GUI PSD http://www.teehanlax.com/blog/iphone-4-gui-psd-retina-display/ Teehan + Lax iPad sketch elements http://www.teehanlax.com/blog/ipad-sketch-elements-ai/Teehan + Lax iPhone sketch elements http://www.teehanlax.com/blog/iphone-sketch-elements-ai/iPhone UI Vector Elements http://www.mercuryintermedia.com/blog/index.php/2009/03/iphone-ui-vector-elements/Skala preview http://bjango.com/mac/skalapreview/Prepo app http://itunes.apple.com/us/app/prepo/id476533227?mt=12Automator (continued) http://wolfslittlestore.be/2012/03/07/automator-continued/ Designing for iOS http://wolfslittlestore.be/2012/02/29/designing-for-ios-continued/Mou app http://mouapp.com/List view PSD on Dribbble http://dribbble.com/shots/233036-iPhone-list-PSDMapbox http://mapbox.com/

Other essential web content around the subjectApple iOS HIG http://developer.apple.com/library/mac/#documentation/UserExperience/Conceptual/AppleHIGuidelines/Intro/Intro.htmlDesign then Code http://designthencode.com/Almost everything on the Bjango blog: http://bjango.com/articles/

Page 110: iOS design: a case study

Hire me.If you like what you’re seeing, I can apply my knowledge to your application too. Get in touch: [email protected]