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

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.

9b54e5324785eb939bcc8f15c724baf9?s=128

Curtis Herbert

January 08, 2015
Tweet

Transcript

  1. Curtis Herbert @parrots (without going crazy) Designing for @1x -

    @3x
  2. Curtis Herbert @parrots Pissing off every designer in the room

    (°□° ━
  3. None
  4. None
  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

  14. None
  15. None
  16. None
  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)
  22. None
  23. Use asset catalogs in Xcode for vector support Embrace template

    images for icon coloring
  24. None
  25. None
  26. None
  27. None
  28. None
  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
  30. None
  31. None
  32. 1:1

  33. 1:1

  34. 1:1

  35. 1:1

  36. 1:1

  37. None
  38. None
  39. None
  40. None
  41. None
  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’