Case study of the ConcertWall iPhone app by http://www.wolfslittlestore.be (design) & http://www.coin-c.com/ (development)
Text of iOS design: a case study
iOS design: a case study CocoaHeads, Antwerp, March 26th 2012
I would like to give some context to this presentation. Theseslides are from a 30 minute presentation called iOS design: acase study.
If I make presentations, some slides only contain afew words or images so the slides wont distractfrom what is being said. This web version containssticky notes (like this one) that summarize what Italked about when displaying the slide during theoriginal talk.
iOS Design: a case study is about how we built ConcertWall. Kristof, developer Johan, interface designer @ahigherugliness @wolfr_
Lets go through the process of designing ConcertWall,from initial brief to nal result.
My name is JohanWolf or @wolfr_ on the internet
I read all day
I like to play video games
I love to write
I have an interest in photography
So this is my companys website, ( http://wolfslittlestore.be/ ). Notice how the graphics on thehomepage 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 bitoutdated - I specically want to focus more on theinterface design part. The next website will reect this!
Design for mobile
Design for mobile These days I design a lot of interfaces for mobile: iPhone, iPad, Android, Windows Phone 7 or for custom hardware.
First iPhone owned: iPhone 3GNumber of iPhones owned so far: 3Favorite application: Tweetie (original)Most used application: ReederNumber of apps currently on iPhone: 104Number of iPhone apps designed: 4Number of iPad apps designed: 2
First iPhone owned: iPhone 3GNumber of iPhones owned so far: 3Favorite application: Tweetie (original)Most used application: ReederNumber of apps currently on iPhone: 104Number of iPhone apps designed: 4Number of iPad apps designed: 2 Ive always used an iPhone as my primary phone since it came out, now on my third one. Out of all platforms its my favorite one to design for.
Initial brief Redesign of existing Last Concerts iPhone app Design of extra functionality to be added Website: add polish
Proposal Complete redesign and rebranding of Last Concerts iPhone app New marketing strategy: new website & app icon Further ideas: great iTunes copy, ofine ads (in concert halls)
This is the old Last Concerts website. [http://www.lastconcerts.com/]
This is the old app design. Noticehow it doesnt look too bad (albeita bit standard) because thedefaults Apple provided areexcellent.
Wireframing &interaction design
To kick off the project we sat down with a giantsheet of paper. I bought a big roll of paper in thepaper shop. Drawing together is one of the bestways to get to dene what is going to be built.
Not going to bore you too much with this part,but of course before designing or wireframinganything you need to know: * Why are we building this, for who? * What are the goals of people using the app?
On the train home I thought a bit about themarketing... the initial app name idea wasGignd (rejected later). We kept the posteridea.
The next process was putting everything Ilearned in the wireframes. This is my style ofwireframing where I put everything in a giantdocument. This one was made in OmniGrafebut recently I switched over to Illustrator formaking these.
This is a detailed view of part of the wireframe.Notice the notes that outline my thoughtssurrounding the screens Im designing.
I generally use this template called TouchGesture reference guide to show if there is anyspecic movement required on a screen. [http://www.lukew.com/ff/entry.asp?1071]
This is another template (by Teehan+Lax). I dontuse it personally but I included it here show thedifference between the interaction design andvisual design. A sketch style is used here toshow that this part of the design is NOT aboutthe visual. [http://www.teehanlax.com/blog/ipad-sketch-elements-ai/]
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 rst.interaction design visual design
Sometimes it might make more sense towireframe with a good kit of default UI and builda working app rst, based on the default UIpatterns. This is especially true when you aredeveloping an app for Android, iPhone and WP7at the same time.If you are doing client work, this will meaneducating your clients, and possibly your bosstoo. The default UI can be implemented relativelyfast and is 100% tested. Going custom is hard.
Visual design & user interface customization
Custom is hard. People always forget things.
I often hit this iceberg when I stray from nativecontrols. For example, Ajax interactions require morepolish than basic web pages. Custom mobile menusrequire more polish than the built-in version. If theteam doesnt have the time to polish custom UI, itsoften better to stick to the boring native controls thatwork.Braden Kowitz, Designer at Google
Very simple example: a dark interface
Lets say you were to make a dark iOSinterface. Maybe a developer would start with asimple grouped table view in Xcode.
You could set a new background color, but nowyour other UI elements dont match thebackground.
You can now go look for ways to customize theother UI elements. In OS5 some interfaceelements can be given a tint color.
There are tutorials out there that show you howto change the default UI completely. The endresult of most of these tutorials is mediocre atbest.
Even famous apps like Instapaper dontimplement a version that is 100% right.There is no default list view for dark interfaces inthe iOS SDK, so a lot of iOS dev time is probablyspent reinventing the wheel (i.e. coloring anexisting 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 morecontrast.Kudos to Marco for implementing a dark tableview when in Dark mode, which is a detail manyapps would forget. I am using Instapaper as anexample now but trust me, there are a apps outthere that are a LOT worse. I