This presentation was given at the Adobe Design Event 2012 in Antwerp. It provides a set of tips & tricks to help and inspire designers who want to learn more about iOS interfaces and mobile design.

1. Does size really matter?
Interface Design Guidelines for iOS.
Thomas Joos | Little Miss Robot
@thomasjoos

2. Thomas Joos
Multimedia & Communication, Kortrijk
Mobile Consultant, Boulevart
Freelance Mobile UX Design, Gladiator
Experience Director & Partner, Little Miss Robot
@thomasjoos

6. “ It’s not just what it looks like and feels like.
Design is how it works. “
- Steve Jobs

7. Concept & Storytelling
User Experience Design
Designing mobile experiences
Interface Design
Development

9. “ My issue with this whole situation is that it seems that designers
were against even learning, just a little bit, about how to be a programmer.
It's like the mere notion of them stepping outside their comfort zone
was an affront to their talents, when nothing could be further from the truth. “
- Mike Rundle, flyosity.com

10. Does size really matter?
Interface Design Guidelines for iOS.

11. 1. The basics.

12. iPhone 3g, 3gs iPhone 4 (retina display) iPad
320x480 640x960 768x1024
480x320 960x640 1024x768

13. PROXIMUS 3G 13.37
PROXIMUS 3G 13.37 PROXIMUS 3G 13.37
iPhone 3g, 3gs iPhone 4 (retina display) iPad
320x460 640x920 768x1004
480x300 960x600 1024x748

14. Retina is not so bad...

17. Full Screen Default.png
480x320
640x960
1024x768

18. Multitouch Gestures

19. Minimal hit area
regular: 22x44
retina: 44x88

23. recommended by @vknt

24. Make sure to deliver your fonts!

25. 2. iOS interface components.

26. 2.1 UIButton

27. UISegmentedControl

29. Standard Mode
Highlight Mode

32. 2.2 UITabBar

33. Application structure
{
1. Web
Root 2. Mobile
3. Installations
4. Video
1 2 3 4
No standard landingspage!

34. Current View
=
View 2 Content
(mobile)
Navigation
1 2 3 4

36. 2.3 UIToolbar

37. Toolbar can contain:
- Title
- Navigation Button
- Call To Action (contextual)

39. 2.4 UITableView

40. Title + subtitle
Thumbnail Accessory Arrow
Highlight Color (standard blue)

41. http://cocoawithlove.com/2009/04/easy-custom-uitableview-drawing.html

42. 2.5 UIScrollView

45. 2.7 UISearchBarController

47. 2.8 Some others

48. UIActionsheet UIPickerView UIAlertView Keyboards

49. Ok, time for a test.

51. U
Background image
Custom UIButtons
UIScrollView

53. Custom Toolbar
- UISearchBarController
- Custom UIButton
Custom UITableView
Custom UITabBar

54. 3. The workflow

55. uistencils.com