The Intersection of Design and Development for iOS

iOS never stops evolving, so it's important for designers and developers to stay up-to-date on platform features that allow them to deliver better experiences with less work and fewer lines of code.

In this session, we'll discuss specific ways in which designers and developers can work together to achieve pixel-perfect user interfaces. This talk will have something for everyone, from designers who are approaching native app design for the first time to hardcore iOS developers who want to stay on top of new features in iOS 5 and 6.

Transcript

1. the intersection of DESIGN& DEVELOPMENT for iOS presented by Warren Moore
2. Background image credit: appsafari.com. Used with permission. Icons are the property of their respective owners.
3. i am not a designe .
4. gripe su e ion
5. DESIGNER
6. DESIGNER DEVELOPER
7. DESIGLOPER
8. Image credit: Tenso Graphics (tensographics.com)
9. the spectrum screens stretching buttons waiting... failing app icons launch images marketing shots layer comps &c.
10. the spectrum
11. stock custom
12. stock custom
13. stock custom
14. stock custom
15. screens
16. 320x480 640x960 768x1024 1536x2048
17. 320x480 640x960 768x1024 1536x2048 640x1138
18. Image credit: Matt Gemmell. Used with permission (CC BY-SA 2.0)
19. Image credit: Matt Gemmell. Used with permission (CC BY-SA 2.0)
20. Figured adapted from Pro iOS Table Views for iPhone, iPad, and iPod Touch by Tim Duckett UIViewAutoresizingFlexibleTopMargin UIViewAutoresizingFlexibleBottomMargin UIViewAutoresizingFlexibleRightMargin UIViewAutoresizingFlexibleLeftMargin UIViewAutoresizing FlexibleWidth UIViewAutoresizing FlexibleHeight
21. Image credit: Simon Germain. Used with permission (CC-BY-SA). stackoverflow.com/questions/12840332/autolayout-to-keep-view-sizes-proportional
22. stretching
23. [UIImage imageNamed:@”blue-button-background-normal”] = Button with non-stretchable image background
24. [UIImage imageNamed:@”blue-button-background-normal”] = Button with non-stretchable image background GROSS
25. [UIImage imageNamed:@”blue-button-background-normal”] = [image stretchableImageWithLeftCapWidth:capWidth topCapHeight:0] =
26. [UIImage imageNamed:@”blue-button-background-normal”] = [image stretchableImageWithLeftCapWidth:capWidth topCapHeight:0] = DEPRECATED
27. [UIImage imageNamed:@”dialog-background”] = UIEdgeInsets insets = UIEdgeInsetsMake(top, left, bottom, right); [image resizableImageWithCapInsets:insets] =
28. buttons
31. NSInteger state = UIControlStateNormal; [button setBackgroundImage:image forControlState:state]; NSInteger state = UIControlStateSelected|UIControlStateHighlighted; [button setBackgroundImage:image forControlState:state];
32. Source: https://twitter.com/ashfurrow/status/208237844865622016
33. Image credit: Steve Baranski and Adam Burkepile. raywenderlich.com/21703/user-interface-customization-in-ios-6
34. waiting...
35. Image credit: Matej Bukovinski. Used with permission.
36. Image credit: Matej Bukovinski. Used with permission.
37. Image credit: Matej Bukovinski. Used with permission.
38. failing
39. Image credit: Lee Whitney. Used with permission (CC-BY-SA) stackoverflow.com/questions/969130/nslog-tips-and-tricks
42. app icons
43. Icons are the property of their respective copyright holders.
44. Image credit: Sebastien de With. Used with permission. http://blog.cocoia.com/2010/iphone-4-icon-psd-file/ iTunesArtwork
45. Image credit: Sebastien de With. Used with permission. http://blog.cocoia.com/2010/iphone-4-icon-psd-file/ iTunesArtwork@2x
46. Image credit: Sebastien de With. Used with permission. http://blog.cocoia.com/2010/iphone-4-icon-psd-file/ 572 722 1142 1442
47. Image credit: Neven Mrgan. mrgan.tumblr.com/post/708404794/ios-app-icon-sizes
49. launch images
50. Default.png Default@2x.png Default-568h@2x.png Default~ipad.png Default-UpsideDown~ipad.png Default-LandscapeLeft~ipad.png Default-LandscapeRight~ipad.png Default@2x~ipad.png Default-UpsideDown@2x~ipad.png Default-LandscapeRight@2x~ipad.png Default-LandscapeLeft@2x~ipad.png
51. Skype
57. marketing shots
58. Image source: http://itunes.apple.com/us/app/mynyte/id495561334?mt=8
59. layer comps &c.
62. select visible layers create new layer comps
64. in conclusion
65. thank you.
67. feedback spkr8.com/t/17191 contact email: wm@warrenmoore.net twitter & github: @warrenm slidedeck: speakerdeck.com/u/warrenm/p/URLHERE