"Best Practice"
iPhone SDK App Design
           Bess Ho
    UI & iPhone Developer
     Silicon Valley Code Camp (SVCC)
  ...
UI Developer / Architect
   Spock             Bess



   Half Vulcan    Half Developer
   Half Human     Half Designer
   ...
Spock                      Bess



   Complex Mind          Complex Background
“It would be illogical to assume that all c...
Dancing Piano   Dancing Drum    Dancing Steel Drum




        Doctor Tricorder   Sound Tricorder
Founder of
    Silicon Valley Web Builder (SVWB)




                 Mentor
  Google Technology User Group (GTUG)
Open So...
1st Book on Myspace


Technical Editor      1st Book on Open Social




          Building OpenSocial Apps: A
          Fi...
One-Girl-Shop

          References
   Blog Featured by WordPress
   Based on “Objective-C” Tag
  http://webbuilders.wordp...
What are we going
  Learn?
No. 1
One-Girl-Shop
Shorten your design & development cycle
             Tips & Tricks
2
No.

          Submission Requirements
         Apple Store Review Process
      Increase Your Chance of Approval
      ...
3
No.


         Product Definition
         Design Better App
      Improve User Experience
No.4
         Backup
  Anything impossible would be possible
  Backup your Artwork & Xcode projects
Approval Process
  Based on approvals process for iPhone applications, in a
filing to the US Federal Communications Commiss...
Controversial Apps
  Based on approvals process for iPhone applications, in a
filing to the US Federal Communications Commi...
App Submission


Required Images
 512x512 JPG (Promotional Image)

 480x320 JPG (Landscape App Image)

 320x480 JPG (Portr...
iPhone SDK App

Required Images
 57x57 PNG Icon.png (App Icon)

 29x29 PNG Icon-Small.png (Setting & Search Icon)

 480x32...
Prepare Images
The standard bit depth for icons and images
 is 24 bits (8 bits each for red, green, and
     blue), plus a...
Prepare Icons
Start with highest resolution quality image
     Create 512x512 160+ dpi artwork
        Convert them into 3...
App Icon Design
            57x57 160+ dpi Icon.png
                 By default
          1) Apply round-corners
         ...
Info.plist
App Icon Design
          29x29 160+ dpi Icon-Small.png

          Used to be Icon-Setting.png

Every application should s...
App Icon Design
        57x57 160+ dpi Icon.png
      Remove default shine
Add the UIPrerenderedIcon key to your
applicati...
App Icon Design
             57x57 160+ dpi Icon.png
 Recommend to add your app name to your
icon if your app name is too ...
Prepare Backgrounds
        Improve User Experience
Make your loading image similar to your App
 Background if your app re...
Image Location
Icon.png, Icon-Setting.png, Default.png are
suggested to saved at the root of Xcode
project

Organize image...
System-Provided
       Buttons & Icons
Toolbars & Navigation Bars Icon




                       UIBarButtonSystemItem
Toolbars & Navigation
      Bars Icon
                UIBarButtonSystemItemDone,       UIBarButtonItemStylePlain,
        ...
System-Provided
          Buttons & Icons

Tab Bar Tabs Icon   Table Rows
System-Provided
      Buttons & Icons
 Use pure white with appropriate alpha

 Do not include a drop shadow

 Use anti-ali...
iPhone Human Interface
       Guidelines
 http://developer.apple.com/safari/library/
 documentation/InternetWeb/Conceptual...
Prepare Audio
   Most Popular Audio Methods
   AudioServicesPlaySystemSound
   AVAudioPlayer
Do Not
DO NOT Copy-Right Materials (Image, Audio, etc)

DO NOT use License Materials unless you have
written documents to ...
Debug & Audit
Test your app in both iPhone Simulator & Device

Test your app in both iTouch & iPhone

        50% users ar...
1st / 2nd App
Sound Tricroder & Doctor Tricorder

        1st iPhone SDK
        Trekkie from TV to Movies
        Star Tr...
Explanation

  In Review
  3 months         Instead of crying
                   Or beating up Apple
                   iP...
Product Definition

   Solve a sticky problem

   Create your own niche

   Create new market
Product Definition
Solve a sticky problem    Apple won’t approve SDK
                         app that is similar to web
Cr...
Design Rules
Keep it Simple

  Design for Dummies

  No Guessing

  Picture worths thousand words

Do One Thing Really Wel...
Design Rules


Make it Fun

  Use interesting images

  Use movements

  Engage users
Product Definition
   Dancing Series - Use Accelerometer
                               Interests
  Target
                ...
Product Strategy
    Dancing Series
      Music Band




    Dancing Piano
    Dancing Drum
    Dancing Steel Drum
    Dan...
Competition: Leading Drum Apps in Top 100

      Drum Kit                 DigitDrummer
      $1.99 / Free             $0.9...
Marketing Positioning:
 Competitive Differentiation
                    1st Drum App uses
Dancing Drum          Accelerome...
Drum Kit

           Drum Kit Lite Free Rank: 12
           Drum $1.99 Rank: 55



DigitDrummer

           DigiDrummer Li...
Dancing Drum

          Dancing Drum $0.99 Rank: 1496




   Not Perfect
     Shorten Development Cycle
     Release Early...
Drum Kit                        DigitDrummer                        Dancing Drum




    6 Drums 5 Cymbals           4 Dru...
DEMO
Rank within Top 100   Rank: 1495
DigitDrummer          Dancing Drum




Drum Kit
Once In Your Lifetime
 Don’t make any        Apple won’t allow you to
mistakes in           change Release Date once
submi...
6 Major Types of
Mockup / Prototype
  Paper Prototype

  Online Prototype

  Sketching

  iPhone SDK IDEs

  iPhone SDK Fr...
Mockup Tools
          Paper Prototype
      1     Paper + Pen
      2     Metal Stencil $
  3       Online Prototype
    ...
Mockup Tools
     iPhone SDK IDEs

11     Dash Code (Drag & Drop)

12     Xcode’s Interface Builder (Drag &
       Drop)

...
Mockup Tools
     iPhone Webkit Frameworks

17     iUI (HTML / CSS / JS)

18     CiUI (HTML / CSS / JS)

19     JQTouch (H...
6 Major Types of
Mockup / Prototype
  Paper Prototype

  Online Prototype

  Sketching

  iPhone SDK IDEs

  iPhone SDK Fr...
Paper Prototype
            Pen + Paper




http://www.designcommission.net/stencils/
        iphone_stencil_paper.pdf
Paper Prototype
                Downloadable .PDF letter or
                A4 sized printable template




http://www.des...
Paper Prototype




http://labs.boulevart.be/index.php/2008/06/05/
    sketch-paper-for-the-mobile-designer/
6 Major Types of
Mockup / Prototype
  Paper Prototype

  Online Prototype

  Sketching

  iPhone SDK IDEs

  iPhone SDK Fr...
Online Prototype




http://iphonemockup.lkmc.ch/
6 Major Types of
Mockup / Prototype
  Paper Prototype

  Online Prototype

  Sketching

  iPhone SDK IDEs

  iPhone SDK Fr...
Blue Print
http://www.flickr.com/photos/flingmedia/2734477874/
Balsamiq
http://www.balsamiq.com/
Omnigraffle Stencils
http://www.graffletopia.com/search/iphone
Adobe
      Illustrator & Photoshop




             http://                   http://
 www.mercuryintermedia.com/      ww...
Adobe Firework
                    CS3 & CS4




http://blog.metaspark.com/2009/02/fireworks-toolkit-for-
              cre...
Yahoo! Design Stencil Kit
OmniGraffle, Visio (XML), Adobe Illustrator (PDF and
        SVG), and Adobe Photoshop (PNG)




...
6 Major Types of
Mockup / Prototype
  Paper Prototype

  Online Prototype

  Sketching

  iPhone SDK IDEs

  iPhone SDK Fr...
iPhone SDK Dash Code




http://developer.apple.com/iphone/library/documentation/AppleApplications/
Conceptual/Dashcode_Us...
Xcode’s Interface Builder
6 Major Types of
Mockup / Prototype
  Paper Prototype

  Online Prototype

  Sketching

  iPhone SDK IDEs

  iPhone SDK Fr...
No.4
         Backup
  Anything impossible would be possible
  Backup your Artwork & Xcode projects
iPhone SDK Frameworks
      HTML CSS JavaScript
   Titanium                  PhoneGap




http://www.appcelerator.com/ htt...
iPhone SDK Frameworks
MonoTouch      Corona
 C# .NET        Lua




http://monotouch.net/ http://www.anscamobile.com/
6 Major Types of
Mockup / Prototype
  Paper Prototype

  Online Prototype

  Sketching

  iPhone SDK IDEs

  iPhone SDK Fr...
iPhone WebKit Frameworks
        jQTouch




           http://www.jqtouch.com/

       CiUI                      iUI
http...
Mockup / Prototype
Business            Developers
 Paper Prototype   Paper Prototype

 Sketching         iPhone SDK IDEs

...
Rapid Prototyping
        Developers
Paper Prototype (Fast)

iPhone SDK IDEs (Drag & Drop)
Family Project
    Design App             Prepare Assets
Paper     Online / Desktop
                               Audio
 ...
sumopaint.com




   Free Images
http:/ /www.freephotosbank.com/
http://www.everystockphoto.com/
   http://www.imageafter....
Testing Code on Device




http://www.mobileorchard.com/iphone-
       development-provisioning/
$99   iPhone Developer
       Program Portal
       Vibration
       Location Manager
       Mail Application
       Map A...
iPhone Developer
1. Add Device
              Program Portal


                    2. Xcode Organizer
iPhone Developer
           Program Portal
3. Create Developer Certificate

                                 4. Add to Keyc...
iPhone Developer
           Program Portal
5. Create Apple ID
                     6. Create
                     Provisio...
iPhone Developer
            Program Portal
7. Add Provisioning Profile to Xcode Organizer


                              ...
Case
Study
A
No.
B
No.
C
No.
Tell Me Which is Best & Why
myStarbucks
                            Find a Starbucks Coffee   Sep 16, 2009 Version 1.0
                            Aug...
Q&A
Upcoming SlideShare
Loading in...5
×

Best Practice iPhone SDK App Design

36,989

Published on

This session is presented by Bess Ho at Silicon Valley Code Camp (SVCC) at Foothill College in 2009 Fall. This session covers the Apple review and submission procession and requirements. It reviews the image requirements, mockup and templates for iphone app.

Published in: Technology, Business
10 Comments
186 Likes
Statistics
Notes
No Downloads
Views
Total Views
36,989
On Slideshare
0
From Embeds
0
Number of Embeds
44
Actions
Shares
0
Downloads
0
Comments
10
Likes
186
Embeds 0
No embeds

No notes for slide

Best Practice iPhone SDK App Design

  1. 1. "Best Practice" iPhone SDK App Design Bess Ho UI & iPhone Developer Silicon Valley Code Camp (SVCC) Oct 3-4, 2009 Foothill College Los Altos CA Twitter: bayareaparty
  2. 2. UI Developer / Architect Spock Bess Half Vulcan Half Developer Half Human Half Designer Pointed Ears Pointed Eyes “I am a Developer, Not a Designer”
  3. 3. Spock Bess Complex Mind Complex Background “It would be illogical to assume that all conditions remain stable.” - Spock “It would be illogical to assume that a good developer can’t design.” - Bess
  4. 4. Dancing Piano Dancing Drum Dancing Steel Drum Doctor Tricorder Sound Tricorder
  5. 5. Founder of Silicon Valley Web Builder (SVWB) Mentor Google Technology User Group (GTUG) Open Source Project “Chief Medical Officer” based on Google Health
  6. 6. 1st Book on Myspace Technical Editor 1st Book on Open Social Building OpenSocial Apps: A Field Guide to Working with the MySpace Platform Authors: Chris Cole, Chad Russell, Jessica Whyte Published Oct 23, 2009 Publisher: Addison-Wesley Professional. Part of the Developer's Library series.
  7. 7. One-Girl-Shop References Blog Featured by WordPress Based on “Objective-C” Tag http://webbuilders.wordpress.com/ Powerpoints http://www.slideshare.net/bess.ho Code Examples http://code.google.com/p/iphonebuilder/
  8. 8. What are we going Learn?
  9. 9. No. 1 One-Girl-Shop Shorten your design & development cycle Tips & Tricks
  10. 10. 2 No. Submission Requirements Apple Store Review Process Increase Your Chance of Approval Do & Do Not Lists
  11. 11. 3 No. Product Definition Design Better App Improve User Experience
  12. 12. No.4 Backup Anything impossible would be possible Backup your Artwork & Xcode projects
  13. 13. Approval Process Based on approvals process for iPhone applications, in a filing to the US Federal Communications Commission (FCC) in 2009 95% apps are approved within 14 days of submission Apple has 40 Full Time trained reviewers studying 8,500 new apps a week 20% “not approved as original submitted” but sent back to developer for tweaks & changes http://www.mobile-ent.biz/news/34116/Apple-reveals-some-details-about-App- Store-approval-process
  14. 14. Controversial Apps Based on approvals process for iPhone applications, in a filing to the US Federal Communications Commission (FCC) in 2009 “established an App Store executive review board that determines procedures and sets policy for the review process, as well as reviews applications that are escalated to the board because they raise new or complex issues.” The board meets once a week. http://www.mobile-ent.biz/news/34116/Apple-reveals-some-details-about-App- Store-approval-process
  15. 15. App Submission Required Images 512x512 JPG (Promotional Image) 480x320 JPG (Landscape App Image) 320x480 JPG (Portrait App Image)
  16. 16. iPhone SDK App Required Images 57x57 PNG Icon.png (App Icon) 29x29 PNG Icon-Small.png (Setting & Search Icon) 480x320 PNG Default.png (Landscape Loading Image) 320x480 PNG Default.png (Portrait Loading Image)
  17. 17. Prepare Images The standard bit depth for icons and images is 24 bits (8 bits each for red, green, and blue), plus an 8-bit alpha channel. The PNG format is recommended, because it preserves color depth and supports an embedded alpha channel. No need to constrain your palette to web- safe colors
  18. 18. Prepare Icons Start with highest resolution quality image Create 512x512 160+ dpi artwork Convert them into 3 sizes Save them to Apple preferred names Apple expects consistency in images 512x512 72 dpi app_icon.jpg 57x57 160+ dpi Icon.png 29x29 160+ dpi Icon-Small.png
  19. 19. App Icon Design 57x57 160+ dpi Icon.png By default 1) Apply round-corners 2) Apply shine 3) Apply Drop shadow Best investment Pick a color to position your app on the rainbow wall Apple tends to select & feature app with good icon design in stores, conferences and Ads Avoid using images similar to Apple icons & images
  20. 20. Info.plist
  21. 21. App Icon Design 29x29 160+ dpi Icon-Small.png Used to be Icon-Setting.png Every application should supply a small icon that iPhone OS can display when the application name matches a term in a Spotlight search. Applications that supply settings should also supply this icon to identify them in the built-in Settings application.
  22. 22. App Icon Design 57x57 160+ dpi Icon.png Remove default shine Add the UIPrerenderedIcon key to your application’s Info.plist file
  23. 23. App Icon Design 57x57 160+ dpi Icon.png Recommend to add your app name to your icon if your app name is too long to show on iphone home screen By default Bundle display name use your Xcode Project name Add App name to Info.plist file
  24. 24. Prepare Backgrounds Improve User Experience Make your loading image similar to your App Background if your app requires a longer loading time Default.png (Loading Image) background.png (App Background Image)
  25. 25. Image Location Icon.png, Icon-Setting.png, Default.png are suggested to saved at the root of Xcode project Organize images & audio files in Groups under “Resources” folder Drag & Drop entire folders into Xcode Project
  26. 26. System-Provided Buttons & Icons Toolbars & Navigation Bars Icon UIBarButtonSystemItem
  27. 27. Toolbars & Navigation Bars Icon UIBarButtonSystemItemDone, UIBarButtonItemStylePlain, UIBarButtonSystemItemCancel, UIBarButtonItemStyleBordered, UIBarButtonSystemItemEdit, UIBarButtonItemStyleDone UIBarButtonSystemItemSave, UIBarButtonSystemItemAdd, UIBarButtonSystemItemFlexibleSpace, UIBarButtonSystemItemFixedSpace, UIBarButtonSystemItemCompose, UIBarButtonSystemItemReply, UIBarButtonSystemItemAction, UIBarButtonSystemItemOrganize, UIBarButtonSystemItemBookmarks, UIBarButtonSystemItemSearch, UIBarButtonSystemItemRefresh, UIBarButtonSystemItemStop, UIBarButtonSystemItemCamera, UIBarButtonSystemItemTrash, UIBarButtonSystemItemPlay, UIBarButtonSystemItemPause, UIBarButtonSystemItemRewind, UIBarButtonSystemItemFastForward, UIBarButtonSystemItemUndo, / iPhoneOS 3.0 / UIBarButtonSystemItemRedo, / iPhoneOS 3.0 /
  28. 28. System-Provided Buttons & Icons Tab Bar Tabs Icon Table Rows
  29. 29. System-Provided Buttons & Icons Use pure white with appropriate alpha Do not include a drop shadow Use anti-aliasing Toolbar Icons Navigation Bar Icons Tab Bar Icons 20 x 20 pixels 30 x 30 pixels
  30. 30. iPhone Human Interface Guidelines http://developer.apple.com/safari/library/ documentation/InternetWeb/Conceptual/ iPhoneWebAppHIG/Introduction/ Introduction.html
  31. 31. Prepare Audio Most Popular Audio Methods AudioServicesPlaySystemSound AVAudioPlayer
  32. 32. Do Not DO NOT Copy-Right Materials (Image, Audio, etc) DO NOT use License Materials unless you have written documents to prove your ownership DO NOT use any Brand or Trademark names DO NOT use any images too similar to iphone system icons DO NOT submit app with warnings & errors DO NOT treat Apple Review Team as QA
  33. 33. Debug & Audit Test your app in both iPhone Simulator & Device Test your app in both iTouch & iPhone 50% users are on iTouch No Warning Console No Error Xcode Device
  34. 34. 1st / 2nd App Sound Tricroder & Doctor Tricorder 1st iPhone SDK Trekkie from TV to Movies Star Trek Movie Release in May Loyal Star Trek Fans Worldwide Tricorders in App Store Suck Poor Interface Old Generation Tricorder Few Low-quality Sound Barely Any Animations Entertainment Only
  35. 35. Explanation In Review 3 months Instead of crying Or beating up Apple iPhone Review Team Convert my anger & frustration to creating new app 2 months wait Shorten Development Not related to Cycle & Release Early technical issues
  36. 36. Product Definition Solve a sticky problem Create your own niche Create new market
  37. 37. Product Definition Solve a sticky problem Apple won’t approve SDK app that is similar to web Create your own niche app Create new market Apple won’t approve your app if it is similar to existing app in App Store Apple won’t approve your app if it doesn’t have enough features
  38. 38. Design Rules Keep it Simple Design for Dummies No Guessing Picture worths thousand words Do One Thing Really Well Less Touch = Clicks Fewer Screens = Page Load Fast Loading Lower Latency
  39. 39. Design Rules Make it Fun Use interesting images Use movements Engage users
  40. 40. Product Definition Dancing Series - Use Accelerometer Interests Target Strengths Want anyone without music I love music training can play I play music for years It is more entertaining and engaging to design app I love dancing involved movement I love design Music is universal with no language barrier All age groups All genders
  41. 41. Product Strategy Dancing Series Music Band Dancing Piano Dancing Drum Dancing Steel Drum Dancing Tambourine
  42. 42. Competition: Leading Drum Apps in Top 100 Drum Kit DigitDrummer $1.99 / Free $0.99 / Free Volume Control No Volume Control (Flip View) Pay $1.99 Extra Recording Recording
  43. 43. Marketing Positioning: Competitive Differentiation 1st Drum App uses Dancing Drum Accelerometer $0.99 Volume Control - Same View Brighter Cheerful More Sound Touch Play Motion Play Casual Play - All Ages Accelerometer > Record
  44. 44. Drum Kit Drum Kit Lite Free Rank: 12 Drum $1.99 Rank: 55 DigitDrummer DigiDrummer Lite Free Rank: 14 DigiDrummer Micro $0.99 Rank: 485 DigiDrummer $0.99 Rank: 62
  45. 45. Dancing Drum Dancing Drum $0.99 Rank: 1496 Not Perfect Shorten Development Cycle Release Early 1st Release 1.0 Bad Timing OS2.2.1 - OS3.0 Buried at the bottom in Release Date due to inexperience
  46. 46. Drum Kit DigitDrummer Dancing Drum 6 Drums 5 Cymbals 4 Drums 4 Cymbals 5 Drums 6 Cymbals + 5 Extra DigiDrummer Lite Free Rank: 14 Dancing Drum $0.99 Rank: 1495 Drum Kit Lite Free Rank: 12 DigiDrummer Micro $0.99 Rank: 485 Drum $1.99 Rank: 55 DigiDrummer $0.99 Rank: 62 2.2 Versions 1.0 Versions 2.6 Versions 1.1 Versions 54266 ratings 0 ratings 3035 ratings 18207 ratings 1.7 Versions 3.3 Versions 1212 ratings 2904 ratings Data from Moblix 6/22/09
  47. 47. DEMO Rank within Top 100 Rank: 1495 DigitDrummer Dancing Drum Drum Kit
  48. 48. Once In Your Lifetime Don’t make any Apple won’t allow you to mistakes in change Release Date once submitting your app the date is past Don’t keep changing Apple won’t allow you to get Release Date into Newly Release category after re-submit for update Save the right Category Prepare for your Launch & Marketing Campaign
  49. 49. 6 Major Types of Mockup / Prototype Paper Prototype Online Prototype Sketching iPhone SDK IDEs iPhone SDK Frameworks iPhone Webkit Frameworks
  50. 50. Mockup Tools Paper Prototype 1 Paper + Pen 2 Metal Stencil $ 3 Online Prototype Sketching 4 Balsamiq stencils 5 Omnigraffle stencils 6 Visio template 7, 8, 9 Adobe Photoshop, Illustrator, Firework 10 Yahoo! Design Stencil Kit
  51. 51. Mockup Tools iPhone SDK IDEs 11 Dash Code (Drag & Drop) 12 Xcode’s Interface Builder (Drag & Drop) iPhone SDK Frameworks 13 Titanium (HTML / CSS / JS) 14 Phone Gap (HTML / CSS / JS) 15 Corona (Lua) 16 MonoTouch (C# .NET)
  52. 52. Mockup Tools iPhone Webkit Frameworks 17 iUI (HTML / CSS / JS) 18 CiUI (HTML / CSS / JS) 19 JQTouch (HTML / CSS / JS)
  53. 53. 6 Major Types of Mockup / Prototype Paper Prototype Online Prototype Sketching iPhone SDK IDEs iPhone SDK Frameworks iPhone Webkit Frameworks
  54. 54. Paper Prototype Pen + Paper http://www.designcommission.net/stencils/ iphone_stencil_paper.pdf
  55. 55. Paper Prototype Downloadable .PDF letter or A4 sized printable template http://www.designcommission.com/shop/iphone- stencil-kit/
  56. 56. Paper Prototype http://labs.boulevart.be/index.php/2008/06/05/ sketch-paper-for-the-mobile-designer/
  57. 57. 6 Major Types of Mockup / Prototype Paper Prototype Online Prototype Sketching iPhone SDK IDEs iPhone SDK Frameworks iPhone Webkit Frameworks
  58. 58. Online Prototype http://iphonemockup.lkmc.ch/
  59. 59. 6 Major Types of Mockup / Prototype Paper Prototype Online Prototype Sketching iPhone SDK IDEs iPhone SDK Frameworks iPhone Webkit Frameworks
  60. 60. Blue Print http://www.flickr.com/photos/flingmedia/2734477874/
  61. 61. Balsamiq http://www.balsamiq.com/
  62. 62. Omnigraffle Stencils http://www.graffletopia.com/search/iphone
  63. 63. Adobe Illustrator & Photoshop http:// http:// www.mercuryintermedia.com/ www.teehanlax.com/ blog/index.php/2009/03/iphone- blog/?p=1628 ui-vector-elements/
  64. 64. Adobe Firework CS3 & CS4 http://blog.metaspark.com/2009/02/fireworks-toolkit-for- creating-iphone-ui-mockups/
  65. 65. Yahoo! Design Stencil Kit OmniGraffle, Visio (XML), Adobe Illustrator (PDF and SVG), and Adobe Photoshop (PNG) http://developer.yahoo.com/ypatterns/about/stencils/
  66. 66. 6 Major Types of Mockup / Prototype Paper Prototype Online Prototype Sketching iPhone SDK IDEs iPhone SDK Frameworks iPhone Webkit Frameworks
  67. 67. iPhone SDK Dash Code http://developer.apple.com/iphone/library/documentation/AppleApplications/ Conceptual/Dashcode_UserGuide/Contents/Resources/en.lproj/Introduction/ Introduction.html
  68. 68. Xcode’s Interface Builder
  69. 69. 6 Major Types of Mockup / Prototype Paper Prototype Online Prototype Sketching iPhone SDK IDEs iPhone SDK Frameworks iPhone Webkit Frameworks
  70. 70. No.4 Backup Anything impossible would be possible Backup your Artwork & Xcode projects
  71. 71. iPhone SDK Frameworks HTML CSS JavaScript Titanium PhoneGap http://www.appcelerator.com/ http://phonegap.com/ products/titanium-mobile/
  72. 72. iPhone SDK Frameworks MonoTouch Corona C# .NET Lua http://monotouch.net/ http://www.anscamobile.com/
  73. 73. 6 Major Types of Mockup / Prototype Paper Prototype Online Prototype Sketching iPhone SDK IDEs iPhone SDK Frameworks iPhone Webkit Frameworks
  74. 74. iPhone WebKit Frameworks jQTouch http://www.jqtouch.com/ CiUI iUI http://code.google.com/ http:/ code.google.com/ / p/ciui-dev/ p/iui/wiki/Introduction
  75. 75. Mockup / Prototype Business Developers Paper Prototype Paper Prototype Sketching iPhone SDK IDEs iPhone SDK Frameworks iPhone Webkit Frameworks
  76. 76. Rapid Prototyping Developers Paper Prototype (Fast) iPhone SDK IDEs (Drag & Drop)
  77. 77. Family Project Design App Prepare Assets Paper Online / Desktop Audio iPhone 3Gs Audacity aviary.com Swatch.app Images GIMP pixlr.com sumopaint.com picnik.com aviary.com
  78. 78. sumopaint.com Free Images http:/ /www.freephotosbank.com/ http://www.everystockphoto.com/ http://www.imageafter.com/
  79. 79. Testing Code on Device http://www.mobileorchard.com/iphone- development-provisioning/
  80. 80. $99 iPhone Developer Program Portal Vibration Location Manager Mail Application Map Application Safari Application Device Orientation Accelerometer Audio Performance Overall Performance
  81. 81. iPhone Developer 1. Add Device Program Portal 2. Xcode Organizer
  82. 82. iPhone Developer Program Portal 3. Create Developer Certificate 4. Add to Keychain
  83. 83. iPhone Developer Program Portal 5. Create Apple ID 6. Create Provisioning Profile
  84. 84. iPhone Developer Program Portal 7. Add Provisioning Profile to Xcode Organizer 8. Test Code
  85. 85. Case Study
  86. 86. A No.
  87. 87. B No.
  88. 88. C No.
  89. 89. Tell Me Which is Best & Why
  90. 90. myStarbucks Find a Starbucks Coffee Sep 16, 2009 Version 1.0 Aug 9, 2009 Version 2.0 Free $0.99 Go Grande - Find your nearest Starbucks Feb 6 2009 Version 1.0.0 $0.99
  91. 91. Q&A

×