myGrid - Speaker Deck

Slide 1

Slide 1 text

myGRID iOS, Android, Web

Slide 2

Slide 2 text

Grid Theory

Slide 3

Slide 3 text

“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 signiﬁcant as the recommended minimum size to make a tap target (like a button or list item) easily and reliably tappable.” Josh Clark

Slide 4

Slide 4 text

New Visual Proportions for the iOS User Interface @Aen http://aentan.com/design/new-visual-proportions-for-the-ios-user-interface/

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

myGrid is 4x4pt

Slide 10

Slide 10 text

‛ highly ﬂexible ‛ ﬁts iOS and Android guidelines ‛ good guide for programmer when implementing design 4x4pt gird is ‛ it just works

Slide 11

Slide 11 text

1pt = 1dp = 2px 4x4pt grid = 8x8px

Slide 12

Slide 12 text

Same grid used on both platforms

Slide 13

Slide 13 text

Same grid used on both platforms

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

4x4 grid in detail

Slide 16

Slide 16 text

Apple’s Passbook app is also in 4x4 gird

Slide 17

Slide 17 text

4x4 grid used in web application

Slide 18

Slide 18 text

One more thing

Slide 19

Slide 19 text

Typecast is a browser-based app that takes the pain out of designing typography for the web http://typecast.com