360iDev - Designing for @1x - @3x without going crazy

9b54e5324785eb939bcc8f15c724baf9?s=47 Curtis Herbert
August 18, 2015

360iDev - Designing for @1x - @3x without going crazy

Watch the talk online: https://vimeo.com/137561771

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

August 18, 2015
Tweet

Transcript

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

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

    (°□° ━
  3. None
  4. None
  5. None
  6. None
  7. The mobile landscape

  8. None
  9. http://opensignal.com/reports/fragmentation.php

  10. http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

  11. http://oleb.net/blog/2014/11/iphone-6-plus-screen/

  12. Pixel-perfect is !

  13. None
  14. None
  15. Need adaptive layouts

  16. "

  17. Learning from the web

  18. 2007 Desktop site, scaled to fit Mobile sites

  19. ~2010 Media queries

  20. #1: Design at breakpoints Mobile Tablet Desktop Desktop Wide

  21. #2: Use vector media

  22. #3: Think in terms of relationships Mobile Tablet Desktop Desktop

    Wide
  23. #4: Tweak smaller details in code

  24. Thanks, Apple

  25. Asset Catalogs (iOS7) Auto Layout (iOS6) Size Classes + Universal

    Storyboards (iOS8)
  26. My workf low

  27. None
  28. vs

  29. @1x 375 x 667

  30. http://xscopeapp.com +

  31. None
  32. None
  33. None
  34. None
  35. None
  36. None
  37. 1:1

  38. None
  39. None
  40. None
  41. None
  42. None
  43. None
  44. None
  45. None
  46. It’s worth it!

  47. Relationships, not pixels iPhone vs iPad @1x Auto Layout Vector-based

    designs
  48. @parrots Slides at curtisherbert.com Thanks!