Designing for @1x - @3x (without going crazy)

As iOS developers/designers there is a lot we can learn from the workflow changes of responsive web design. I'm sharing my current workflow that's made designing for @1x - @3x more manageable.

Transcript

1. Curtis Herbert @parrots (without going crazy) Designing for @1x - @3x
2. Curtis Herbert @parrots Pissing off every designer in the room (°□°
    ━
5. Learning from the web
6. 2007 Desktop site, scaled to fit Mobile sites
7. ~2010 Media queries
8. #1: Design at breakpoints Mobile Tablet Desktop Desktop Wide
9. #2: Use vector media
10. #3: Think in terms of relationships Mobile Tablet Desktop Desktop Wide
11. #4: Tweak smaller details in code
12. The mobile landscape
13. http://opensignal.com/reports/fragmentation.php
17. http://oleb.net/blog/2014/11/iphone-6-plus-screen/
18. TL;DR? Pixel-perfect is !
19. TL;DR? Need adaptive layouts
20. My workf low
21. Two “breakpoints” I design for: iPhone 6 and iPad Work at @1x Stick to vector where possible in design (especially icons)
23. Use asset catalogs in Xcode for vector support Embrace template images for icon coloring
29. Interface builder + autolayout all the things Tweak for iPhone 3.5”, 4”, and iPhone 6+ in simulator Size classes can help, a lot, for universal apps
32. 1:1
33. 1:1
34. 1:1
35. 1:1
36. 1:1
42. Key recommendations • Give working in vector a try (Sketch does help with this) • Work at @1x • Don’t waste time mocking up every device • Think ahead on relationships and resizing during design-time • Embrace autolayout
43. References • http://www.paintcodeapp.com/news/ultimate-guide-to-iphone- resolutions • http://sketchapp.com • pod ‘Masonry’