Tablet Keylines and Spacing

Size: px

Start display at page:

Download "Tablet Keylines and Spacing"

Juniper Ross
6 years ago
Views:

1 Material Design Last updated 23 October 2014 Tablet Keylines and Spacing Use the layers palette to toggle keyline and spacing guides Vertical sizing key Fixed increments determine widths of structural UI elemtents. For tablet we use a 64dp increment. 8dp 16dp Vertical keylines determine placement of type and icons from edges of elements. dp 48dp Vertical sizing determines the height of content blocks. 64dp 56dp Horizontal margins determine spacing. 72dp 80dp 88dp

2 5X 12:30 16:9 Image Recent articles example.com Archive Completed A good article title Anthony Stevens Sent Trash Starred One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. Forums Updates "What's happened to me?" he thought. It wasn't a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather. Drops of rain could be heard hitting the pane, which made him feel quite sad. "How about if I sleep a little bit longer and forget all this nonsense", he thought, but that was something he was unable

3 My files Vacation itinerary Edited Jan 20, 2014 Title Owner Last Modified Photos Sandra Adams Jan 9, Recipes Sandra Adams Jan 17, Work Sandra Adams Jan 28, 2014 Vacation itinerary Sandra Available Adamsoffline Jan 20, 2014 Kitchen remodel Sandra Info Adams Jan 10, 2014 Project schedule Location Sandra Created Adams My files Jan 20, 2014 Jan 22, 2014 Project budget Sandra Who Adams has access Jan 15, 2014 Weekly newsletter Sandra Adams Private people listed can access Jan 8, 2014

4 Inbox 11X Today 3X Brunch this weekend? Ali Connors I ll be in your neighborhood doing errands this weekend if you want to meet up Summer BBQ 4 to Alex, Scott, Jennifer Wish I could come, but I m out of town this weekend. 80 Oui oui Sandra Adams Do you have Paris recommendations? Have you ever been? (I m sure I ve 48 Birthday gift Trevor Hansen Have any ideas about what to get Heidi for her birthday? Recipe to try Britta Holt We should eat this: grated squash, corn and tomatillo tacos Montauk weekend Scott Masterson Here are the shots I mentioned from this weekend s trip. Yesterday

5 Inbox 16:9 Image 5X 12:30 Today Inbox Brunch this weekend? Ali Connors I ll be in your neighborhood doing errands this weekend if you want to meet up Outbox Trash Summer BBQ 4 to Alex, Scott, Jennifer Wish I could come, but I m out of town this weekend. 80 Spam Oui oui Sandra Adams Do you have Paris recommendations? Have you ever been? (I m sure I ve Birthday gift Trevor Hansen Have any ideas about what to get Heidi for her birthday? Recipe to try Britta Holt We should eat this: grated squash, corn and tomatillo tacos Montauk weekend Scott Masterson Here are the shots I mentioned from this weekend s trip. Yesterday

6 8X All 2X Janet Perkins 16:9 Image Mary Johnson Peter Carlsson Trevor Hansen Ali Connors A Aaron Bennett Abbey Christensen (650) Mobile (323) Work Ali Connors aliconnors@example.com Personal Alex Nelson Anthony Stevens ali_connors@example.com Work

7 Component browser 6X 1:1 Image 1:1 Image Mar 1, 2014 Feb 10, :1 Image 1:1 Image Subtitle <component> Jan 5, 2014 Jan, 2014 Written by David Park Feb 11, :1 Image 1:1 Image Chambray Carles Terry Richardson plaid wolf. Disrupt fashion axe 90's quinoa +1 Neutra. Irony ethnic ennui McSweeney's, <semiotics> small batch squid direct trade. Readymade salvia Echo Park scenester. Farm-to-table selvage small batch swag asymmetrical whatever, tattooed American Apparel meh viral wolf tofu trust fund you probably haven't heard of them. Viral 3 wolf moon retro drinking vinegar. Tote bag mus-

8 Component browser Group number one 1:1 Image 1:1 Image 1:1 Image 1:1 Image Mar 1, 2014 Feb 10, 2014 Jan, 2014 Jan 5, :1 Image 1:1 Image 1:1 Image 1:1 Image Mar 1, 2014 Feb 10, 2014 Jan, 2014 Jan 5, 2014

9 5X Components March 2014 S M T W T F S <!DOCTYPE html> <html> <head> <script src="bower_components/platform/platform.js"></script> <link rel="import"

10 80 Dandelion Chocolate 4.7 (51) 12 min 740 Valencia St, San Francisco, CA 8X Image title 8X (415) Wed, 10 AM 9 PM

7 The Walker Dan Croll 4:36 12:30 12X 1:1 Image Summer playlist Created by Trevor Hansen 80 Track Artist Time 1 The Game of Love Daft Punk 3:25 40 2 Tennis Courts Lorde

11 7 The Walker Dan Croll 4:36 12:30 12X 1:1 Image Summer playlist Created by Trevor Hansen 80 Track Artist Time 1 The Game of Love Daft Punk 3: Tennis Courts Lorde 3:41 3 Given the Chance I would The Kite String Tangle 2:15 4 The Mother We Share Chvrches 4: 5 Home Edward Sharpe & The 5:18 6 Compliment Your Soul Magnetic Zeros 3:34

12 Title Use Google s location service? 8X Let Google help apps determine location. This means 16 sending anonymous location data to Google, even when no apps are running. DISAGREE AGREE

13 Title Payment details 8X Shipping address 1600 Amphitheatre Pkwy MTV-1950 Mountain View, CA Payment method Visa 1234 CANCEL CONTINUE

AKE 412: Literary Theory

AKE 412: Literary Theory Homework: 20% Mid-term: 30% Final: 50% Beginning Theory by Peter Barry, Literary Criticism by Charles Bressler and Critical Theory Today by Lois Tyson Literary Theory VS (?) Literary