myGrid

08aeeb2db9899894c4b6b7796845b038?s=47 jurajivan
December 11, 2012

 myGrid

Twitter: http://twitter.com/jurajivan
Presented on Dribbblesk meetup #3

08aeeb2db9899894c4b6b7796845b038?s=128

jurajivan

December 11, 2012
Tweet

Transcript

  1. myGRID iOS, Android, Web

  2. Grid Theory

  3. “The 44-pixel block is, in many ways, the basic unit

    of measurement for the iPhone interface, establishing the visual rhythm of many iPhone apps. That metric is significant as the recommended minimum size to make a tap target (like a button or list item) easily and reliably tappable.” Josh Clark
  4. New Visual Proportions for the iOS User Interface @Aen http://aentan.com/design/new-visual-proportions-for-the-ios-user-interface/

  5. iOS default grid is 10x11pt min touch size of 44pt

  6. http://developer.apple.com/library/ios/#documentation/userexperience/ conceptual/mobilehig/UEBestPractices/UEBestPractices.html

  7. Android default grid is 8x8pt min touch size of 48pt

  8. http://developer.android.com/design/style/metrics-grids.html

  9. myGrid is 4x4pt

  10. ‛ highly flexible ‛ fits iOS and Android guidelines ‛

    good guide for programmer when implementing design 4x4pt gird is ‛ it just works
  11. 1pt = 1dp = 2px 4x4pt grid = 8x8px

  12. Same grid used on both platforms

  13. Same grid used on both platforms

  14. None
  15. 4x4 grid in detail

  16. Apple’s Passbook app is also in 4x4 gird

  17. 4x4 grid used in web application

  18. One more thing

  19. Typecast is a browser-based app that takes the pain out

    of designing typography for the web http://typecast.com
  20. Design typography with baseline grid tool and great fonts collection

  21. Thank you @jurajivan