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
380
4
Share
myGrid
Twitter:
http://twitter.com/jurajivan
Presented on Dribbblesk meetup #3
jurajivan
December 11, 2012
More Decks by jurajivan
See All by jurajivan
1136 – sneak peek of next iPhone resolution
jurajivan
0
470
iOS 6 UI – what is new
jurajivan
26
43k
Other Decks in Design
See All in Design
社長の宿題への回答 「新卒×AI」が生み出す価値
saki822
2
140
UI生成の鍵は要件整理 -デザインプロセスのエッセンスを プロンプト作成に取り入れよう-
abokadotyann
3
800
2026年の勢い / Momentum for 2026
bebe
0
440
タイル紹介サイト「タイルだもんで」
calpin
0
130
「余白」と「欲望」を味方につける ——AI時代のデザインエンジニアリングと「越境」の作法 #KNOTS2026
koyaman
1
1.8k
研修担当者が一番伸びた 熊本市役所✕AI『泥臭いAI研修』のワークショップ設計について
garyuten
2
370
図じゃなく言語で描く - Common Ground for Design AI Operations.
kazukiikeda
2
830
【優秀賞+特別賞】くまモン食いしん坊弁当「くまモンの魔法の柑橘弁当」最終審査資料
shoko_seven11
0
160
OJTで学んだ 「心を動かす」ファシリテーション
saki822
1
300
改正JISを見据えた、企業のアクセシビリティ対応ロードマップ
securecat
1
370
文化のデザイン - Soft Impact of Design
atsushihomma
0
200
AI時代に必要な アイデアの形
uxman
0
180
Featured
See All Featured
Exploring anti-patterns in Rails
aemeredith
3
360
Code Reviewing Like a Champion
maltzj
528
40k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
helenjbeal
1
180
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
0
120
It's Worth the Effort
3n
188
29k
Ten Tips & Tricks for a 🌱 transition
stuffmc
0
110
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
260
Paper Plane
katiecoart
PRO
1
50k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
47
8.1k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
auna
0
140
Fireside Chat
paigeccino
42
3.9k
Technical Leadership for Architectural Decision Making
baasie
3
370
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