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: a...
If I make presentations, some slides only contain afew words or images so the slides won’t distractfrom what is being said...
iOS Design: a case study is about how we built ConcertWall.      Kristof, developer      Johan, interface designer      @a...
Let’s go through the process of designing ConcertWall,from initial brief to final result.
Introduction
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 company’s website, ( http://wolfslittlestore.be/ ). Notice how the graphics on thehomepage are @2x retina :)...
Design for mobile
Design for mobile                    These days I design a lot of interfaces for mobile:                    iPhone, iPad, ...
First iPhone owned:                         iPhone 3GNumber of iPhones owned so far:                       3Favorite appli...
First iPhone owned:                                                     iPhone 3GNumber of iPhones owned so far:          ...
Case study
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• F...
This is the old Last Concerts website. [http://www.lastconcerts.com/]
This is the old app design. Noticehow it doesn’t look too bad (albeita bit standard) because thedefaults Apple provided ar...
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 tog...
Not going to bore you too much with this part,but of course before designing or wireframinganything you need to know: * Wh...
On the train home I thought a bit about themarketing... the initial app name idea was“Gigfind” (rejected later). We kept th...
The next process was putting everything Ilearned in the wireframes. This is my style ofwireframing where I put everything ...
This is a detailed view of part of the wireframe.Notice the notes that outline my thoughtssurrounding the screens I’m desi...
I generally use this template called TouchGesture reference guide to show if there is anyspecific movement required on a sc...
This is another template (by Teehan+Lax). I don’tuse it personally but I included it here show thedifference between the i...
interaction design   visual design
Another technique that helps to make the                     distinction is to make your UI elements gray and             ...
Sometimes it might make more sense towireframe with a good kit of default UI and builda working app first, based on the def...
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 we...
Very simple example:  a dark interface
Let’s 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 don’t 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 tutoria...
Even famous apps like Instapaper don’timplement a version that is 100% “right”.There is no default list view for dark inte...
How to make a grouped table view thats fits rightin? Start by looking at the one that Apple made.The key to a great iOS des...
Work those details (not like this app).                                                                    Non retina grap...
In the end, if you want a custom design that isgreat, you’re going to need to implement yourown version of certain UI part...
List item 1List item 2List item 3              Here’s my version the grouped table view... you              could say: not...
list_view_top@2x.png list_view_middle@2x.pnglist_view_bottom@2x.png
List item 1List item 2List item 3              This “dark UI” design works on any background -              even disco sty...
If what you are building can’t be built with thedefault UI elements take a close look at what theleaders in a particular fi...
True business cost of customization: both UIelements took at least several hours & iterationsto get right
But if nobody took any UI risk there would not be anyinnovation out there, so it depends on what you’redoing. This screens...
The Tapbots guys are famous for their custominterfaces. Their business is practically based on thefact that their apps are...
A common interaction   design mistake
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             eve...
Test your design (!)             Use Skala preview http://bjango.com/mac/             skalapreview/ by Bjango to view your...
Design resources
For the Illustrator guys like me check out theiPhone Vector UI elements template http://www.mercuryintermedia.com/blog/ind...
The Teehan+Lax PSD template is your best friendwhen designing for iOS. It’s an almost perfectrepresentation of Apple’s UI ...
Design: lessons learned
• Custom vs. native is a tough balance - stick to the  standards where possible• “Coloring” UIKit makes more sense than re...
• Give your app personality through: • Splash screen • App icon • App content
• Dont try to give your app personality through: • Custom interaction design • Ignoring standards and good defaults (e.g. ...
Final designs
App icon
Iterations
Iterations       Since illustration is not my forte we hired an       illustrator, Mattias Lundin from Sweden: http://    ...
It’s easy to go overboard with app icon designs.The guys from Spice Invaders made 50 variants...a bit too much.
You should read their “making of” blog post onhttp://on-5.com/2012/01/the-making-of-spice-invaders/
Speaking of “behind the scenes”, here’s anothercool one: http://www.repeattimerapp.com/how/
In the end we ran with this icon, showing 2posters, a Woodstock reference, bold colors & areference to music through the n...
Michael Flarup’s template is the best templateout there for designing your app icon. Recently anew version came out “suppo...
Keep in mind that this is the size most people aregoing to see your icon at, I can only advise touse a simple glyph/form i...
These icons are super clear and to me still lookattractive:
Assets & specification
You can’t just deliver a PSD to a developer,there’s no way that’s going to work. This part ofthe presentation is about pre...
Some tools to work faster when making assets:Prepo is a Mac app to easily convert @2x imagesto regular sized images (“@1x”...
Here’s the assets for ConcertWall. Takes somework to export them all, especially crisp assets inboth retina and non-retina...
I use some automator actions to make my lifeeasier e.g. this does about the same thing as thePrepo app (convert @2x to @1x)
This action just adds text to multiple files, if youforget to add @2x to the names (like I alwaysdo :))
I write a spec for the developer in which I explainwhich images to use where, which fonts to usewhere etc. You can’t possi...
## Lists: thumbnailsUse glow.png for the glow on last.fm images.* The thumbnails are 54x55 pixels* Use a black 54x55 thumb...
A design has to be  communicatedMerely sending the mockups is not enough.
The app I use to make these is called Mou(http://mouapp.com/), on the left side you writein Markdown, on the right side yo...
Marketing: website
Here’s a simple way to make a good lookingiPhone asset for your marketing website:
Download Mikael Eidenberg’s iPhone template,open it in Photoshop, and edit the smart objectinside of it (http://www.mikael...
This is what it should look like.
Now put your own design in there...
Bam! A nice graphic for the website.
Here’s an early version of the website design. Igot tired of the “feature list” type design talkingabout how great the app...
The new approach is simpler: since the app isfree anyway we want to lead people to downloadright away. Why not let the app...
This is the current version which we are stilllooking to improve, we would like a “happy”version with a festival background.
This shows some of the steps involved increating this design: photography, logo and iconcreation forego the design process...
Thank you!Follow me: @wolfr_ on TwitterE-mail me: mail@wolfslittlestore.beRead the blog: wolfslittlestore.be/journalSubscr...
ResourcesWeb content mentioned in this talkLastConcerts http://www.lastconcerts.com/Touch gesture reference guide: http://...
If you liked this presentationCheck out my previous presentations:Designing better user interfaceshttp://www.slideshare.ne...
Hire me.If you like what you’re seeing, I can apply my knowledge to yourapplication too. Get in touch: mail@wolfslittlesto...
iOS design: a case study
iOS design: a case study
iOS design: a case study
iOS design: a case study
iOS design: a case study
iOS design: a case study
iOS design: a case study
iOS design: a case study
iOS design: a case study
iOS design: a case study
iOS design: a case study
iOS design: a case study
iOS design: a case study
Upcoming SlideShare
Loading in...5
×

iOS design: a case study

142,362

Published on

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

21 Comments
352 Likes
Statistics
Notes
  • @Muthuraman Jayaraman Download Free Management Case Study Projects here- http://goo.gl/OZeb2U
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @BrixTec Web Solutions, LLC. Download Free Management Case Study Projects here- http://goo.gl/OZeb2U
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @Lucas Fernandes Download Free Management Case Study Projects here- http://goo.gl/OZeb2U
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Development for iPhone, iPad, iPod is going for new heights with launch of iOS6. Let us review some of great features of iOS6
    http://www.slideshare.net/SojoSolutions/features-ofios6
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Great slides for a developer to get to know how ui design works.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
142,362
On Slideshare
0
From Embeds
0
Number of Embeds
53
Actions
Shares
0
Downloads
3,088
Comments
21
Likes
352
Embeds 0
No embeds

No notes for slide

iOS design: a case study

  1. 1. iOS design: a case study CocoaHeads, Antwerp, March 26th 2012
  2. 2. I would like to give some context to this presentation. Theseslides are from a 30 minute presentation called iOS design: acase study.
  3. 3. If I make presentations, some slides only contain afew words or images so the slides won’t 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.
  4. 4. iOS Design: a case study is about how we built ConcertWall. Kristof, developer Johan, interface designer @ahigherugliness @wolfr_
  5. 5. Let’s go through the process of designing ConcertWall,from initial brief to final result.
  6. 6. Introduction
  7. 7. My name is JohanWolf or @wolfr_ on the internet
  8. 8. I read all day
  9. 9. I like to play video games
  10. 10. I love to write
  11. 11. I have an interest in photography
  12. 12. So this is my company’s 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 specifically want to focus more on theinterface design part. The next website will reflect this!
  13. 13. Design for mobile
  14. 14. Design for mobile These days I design a lot of interfaces for mobile: iPhone, iPad, Android, Windows Phone 7 or for custom hardware.
  15. 15. 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
  16. 16. 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 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.
  17. 17. Case study
  18. 18. Initial brief• Redesign of existing Last Concerts iPhone app• Design of extra functionality to be added• Website: add polish
  19. 19. 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)
  20. 20. This is the old Last Concerts website. [http://www.lastconcerts.com/]
  21. 21. This is the old app design. Noticehow it doesn’t look too bad (albeita bit standard) because thedefaults Apple provided areexcellent.
  22. 22. Wireframing &interaction design
  23. 23. 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 define what is going to be built.
  24. 24. 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?
  25. 25. On the train home I thought a bit about themarketing... the initial app name idea was“Gigfind” (rejected later). We kept the posteridea.
  26. 26. 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 OmniGrafflebut recently I switched over to Illustrator formaking these.
  27. 27. This is a detailed view of part of the wireframe.Notice the notes that outline my thoughtssurrounding the screens I’m designing.
  28. 28. I generally use this template called TouchGesture reference guide to show if there is anyspecific movement required on a screen. [http://www.lukew.com/ff/entry.asp?1071]
  29. 29. This is another template (by Teehan+Lax). I don’tuse 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/]
  30. 30. interaction design visual design
  31. 31. 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.interaction design visual design
  32. 32. Sometimes it might make more sense towireframe with a good kit of default UI and builda working app first, 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.
  33. 33. Visual design & user interface customization
  34. 34. Custom is hard. People always forget things.
  35. 35. 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 doesn’t have the time to polish custom UI, it’soften better to stick to the boring native controls thatwork.Braden Kowitz, Designer at Google
  36. 36. Very simple example: a dark interface
  37. 37. Let’s say you were to make a “dark” iOSinterface. Maybe a developer would start with asimple grouped table view in Xcode.
  38. 38. You could set a new background color, but nowyour other UI elements don’t match thebackground.
  39. 39. You can now go look for ways to customize theother UI elements. In OS5 some interfaceelements can be given a “tint” color.
  40. 40. There are tutorials out there that show you howto change the default UI completely. The endresult of most of these tutorials is mediocre atbest.
  41. 41. Even famous apps like Instapaper don’timplement 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 <3 Instapaper andby many accounts it’s a leading example.
  42. 42. How to make a grouped table view thats fits rightin? Start by looking at the one that Apple made.The key to a great iOS design is knowing theplatform. Look carefully at how the default appsare built.
  43. 43. Work those details (not like this app). Non retina graphicInconsistent languageNon retina graphic Highlight text should be whiteNon retina graphic
  44. 44. In the end, if you want a custom design that isgreat, you’re going to need to implement yourown version of certain UI parts using customassets.
  45. 45. List item 1List item 2List 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 ]
  46. 46. list_view_top@2x.png list_view_middle@2x.pnglist_view_bottom@2x.png
  47. 47. List item 1List item 2List item 3 This “dark UI” design works on any background - even disco style backgrounds (using PNG transparency to achieve this).
  48. 48. If what you are building can’t be built with thedefault UI elements take a close look at what theleaders in a particular field are doing e.g.FourSquare recently decided to switch over toMapBox for their maps. [http://mapbox.com/]
  49. 49. True business cost of customization: both UIelements took at least several hours & iterationsto get right
  50. 50. But if nobody took any UI risk there would not be anyinnovation out there, so it depends on what you’redoing. This screenshot is from Al Gore’s Our Choice, inmy opinion the best e-book there is on iPad,interaction design-wise that is (then Apple took theseideas and made iBooks author... that’s life!) [ http://www.youtube.com/watch?v=U-edAGLokak ]This was done by Mike Matas, Bret Victor and theirteam. Two names you should definitely remember ifyou’re into interface design. [http://www.mikematas.com/] [http://worrydream.com/]
  51. 51. The Tapbots guys are famous for their custominterfaces. Their business is practically based on thefact that their apps are 100% custom. I love how theythink of power users. [http://tapbots.com/] [http://tapbots.com/software/tweetbot/ipad/]
  52. 52. A common interaction design mistake
  53. 53. Web style form iOS style form (better!)
  54. 54. 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.Web style form iOS style form (better!)
  55. 55. 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.
  56. 56. Design resources
  57. 57. For the Illustrator guys like me check out theiPhone Vector UI elements template http://www.mercuryintermedia.com/blog/index.php/2009/03/iphone-ui-vector-elements
  58. 58. The Teehan+Lax PSD template is your best friendwhen designing for iOS. It’s an almost perfectrepresentation of Apple’s UI elements in the formof a PSD. [ http://www.teehanlax.com/blog/iphone-4-gui-psd-retina-display/ ]
  59. 59. Design: lessons learned
  60. 60. • 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)
  61. 61. • Give your app personality through: • Splash screen • App icon • App content
  62. 62. • Dont try to give your app personality through: • Custom interaction design • Ignoring standards and good defaults (e.g. standard sizes of elements, 44px “touch” area)
  63. 63. Final designs
  64. 64. App icon
  65. 65. Iterations
  66. 66. Iterations Since illustration is not my forte we hired an illustrator, Mattias Lundin from Sweden: http:// dribbble.com/inkgraphix
  67. 67. It’s easy to go overboard with app icon designs.The guys from Spice Invaders made 50 variants...a bit too much.
  68. 68. You should read their “making of” blog post onhttp://on-5.com/2012/01/the-making-of-spice-invaders/
  69. 69. Speaking of “behind the scenes”, here’s anothercool one: http://www.repeattimerapp.com/how/
  70. 70. In the end we ran with this icon, showing 2posters, a Woodstock reference, bold colors & areference to music through the notes & guitar.
  71. 71. Michael Flarup’s template is the best templateout there for designing your app icon. Recently anew version came out “supporting” the newiPad. [ http://appicontemplate.com/ ]
  72. 72. Keep in mind that this is the size most people aregoing to see your icon at, I can only advise touse a simple glyph/form instead of a superdetailed representation. Perhaps this design isstill too detailed.
  73. 73. These icons are super clear and to me still lookattractive:
  74. 74. Assets & specification
  75. 75. You can’t just deliver a PSD to a developer,there’s no way that’s going to work. This part ofthe presentation is about preparing assets andthe way I try to communicate the design.
  76. 76. Some tools to work faster when making assets:Prepo is a Mac app to easily convert @2x imagesto regular sized images (“@1x”). [Prepo: http://wearemothership.com/work/prepo/]
  77. 77. Here’s the assets for ConcertWall. Takes somework to export them all, especially crisp assets inboth retina and non-retina versions.
  78. 78. I use some automator actions to make my lifeeasier e.g. this does about the same thing as thePrepo app (convert @2x to @1x)
  79. 79. This action just adds text to multiple files, if youforget to add @2x to the names (like I alwaysdo :))
  80. 80. I write a spec for the developer in which I explainwhich images to use where, which fonts to usewhere etc. You can’t possibly describe the wholedesign but basic stuff like which asset belongswhere is very helpful for a developer.
  81. 81. ## Lists: thumbnailsUse 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 stillloading* 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.
  82. 82. A design has to be communicatedMerely sending the mockups is not enough.
  83. 83. The app I use to make these is called Mou(http://mouapp.com/), on the left side you writein Markdown, on the right side you immediatelysee your output. This way you can easilyreference asset images directly in the spec. Theapp allows you to export to HTML and PDF, sowhen you deliver the spec to the developer he/she can open it up in a separate window (e.g. ona second screen) and have it handy at all times.
  84. 84. Marketing: website
  85. 85. Here’s a simple way to make a good lookingiPhone asset for your marketing website:
  86. 86. Download Mikael Eidenberg’s iPhone template,open it in Photoshop, and edit the smart objectinside of it (http://www.mikaeleidenberg.se/page/free-iphone-template)
  87. 87. This is what it should look like.
  88. 88. Now put your own design in there...
  89. 89. Bam! A nice graphic for the website.
  90. 90. Here’s an early version of the website design. Igot tired of the “feature list” type design talkingabout how great the app is.
  91. 91. The new approach is simpler: since the app isfree anyway we want to lead people to downloadright away. Why not let the app speak for itself?
  92. 92. This is the current version which we are stilllooking to improve, we would like a “happy”version with a festival background.
  93. 93. This shows some of the steps involved increating this design: photography, logo and iconcreation forego the design process. You can’tmake anything cool without materials.
  94. 94. Thank you!Follow me: @wolfr_ on TwitterE-mail me: mail@wolfslittlestore.beRead the blog: wolfslittlestore.be/journalSubscribe to the blog: http://feeds.feedburner.com/Wolfslittlestore
  95. 95. 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/
  96. 96. If you liked this presentationCheck out my previous presentations:Designing better user interfaceshttp://www.slideshare.net/Wolfr/designing-better-user-interfacesDesign for Developers.http://www.slideshare.net/Wolfr/design-for-developersonlineversionlong
  97. 97. Hire me.If you like what you’re seeing, I can apply my knowledge to yourapplication too. Get in touch: mail@wolfslittlestore.be
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×