Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
myGrid
Search
jurajivan
December 11, 2012
Design
4
360
myGrid
Twitter:
http://twitter.com/jurajivan
Presented on Dribbblesk meetup #3
jurajivan
December 11, 2012
Tweet
Share
More Decks by jurajivan
See All by jurajivan
1136 – sneak peek of next iPhone resolution
jurajivan
0
450
iOS 6 UI – what is new
jurajivan
26
43k
Other Decks in Design
See All in Design
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
430
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
ikeyatsu
2
1.8k
札幌の雪を観光資源に変える:デザインプログラムSESSAの挑戦
ittyann
0
260
Cyber Heart Online Book
hjnasby
0
130
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
450
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
310
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.5k
株式会社バクタム 会社説明資料
bactum
0
250
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
480
Storyboard Honey
rocioparronrubio
0
280
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
460
デザイナーとPMの両ロール_3つのポイント
toy1618
1
330
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Fireside Chat
paigeccino
37
3.5k
What's in a price? How to price your products and services
michaelherold
246
12k
Music & Morning Musume
bryan
46
6.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
A better future with KSS
kneath
238
17k
Documentation Writing (for coders)
carmenintech
72
4.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Gamification - CAS2011
davidbonilla
81
5.4k
GraphQLとの向き合い方2022年版
quramy
49
14k
Transcript
myGRID iOS, Android, Web
Grid Theory
“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
New Visual Proportions for the iOS User Interface @Aen http://aentan.com/design/new-visual-proportions-for-the-ios-user-interface/
iOS default grid is 10x11pt min touch size of 44pt
http://developer.apple.com/library/ios/#documentation/userexperience/ conceptual/mobilehig/UEBestPractices/UEBestPractices.html
Android default grid is 8x8pt min touch size of 48pt
http://developer.android.com/design/style/metrics-grids.html
myGrid is 4x4pt
‛ highly flexible ‛ fits iOS and Android guidelines ‛
good guide for programmer when implementing design 4x4pt gird is ‛ it just works
1pt = 1dp = 2px 4x4pt grid = 8x8px
Same grid used on both platforms
Same grid used on both platforms
None
4x4 grid in detail
Apple’s Passbook app is also in 4x4 gird
4x4 grid used in web application
One more thing
Typecast is a browser-based app that takes the pain out
of designing typography for the web http://typecast.com
Design typography with baseline grid tool and great fonts collection
Thank you @jurajivan