A

V1

FEBRUARY 11, 2010

Adaptive Layout Design

A

Adaptive Layout Design

Levels of adaptation

2

Platform Variations Layout Variations Component Variations

A

Platform Variations

Confidential and Proprietary. Do not distribute.A

Platform Variations

Content

4

Teasure Island-

Part I.The old bucanner.

I saw the best minds of my generation destroyed by madness, starving hysterical naked, dragging themselves through the negro streets at dawn looking for an angry fix, angelheaded hipsters burning for the ancient heavenlyconnection to the starry dynamo in the machinery of night,who poverty and tatters and hollow-eyed and high sat up smoking

In the supernatural darkness ofcold-water flats floating across the tops of cities contemplating jazz,who bared their brains to Heaven under the El and saw oham.

Treasure Island

I saw the best minds of my generation destroyed by madness, starving hysterical naked, dragging themselves through the negro streets at dawn looking for an angry fix, angelheaded hipsters burning for the ancient heavenlyconnection to

Story Design

A

Platform Variations

Screen sizes

5

Tablet SmartphonesDesktop Mobile Phones

15 inch 9.7 inch 3.5 inch 2 inches

A

Platform Variations

Resolution

6

iPhone Droid

A

Platform Variations

UI Guidelines and Conventions

7

A

Layout Variations

A

Layout Variations

Document

9

Direction Fixed Variable (by content)

HeadlineLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies cursus neque, nec molestie felis consectetur vel. Quisque ornare turpis nisi. Praesent consequat aliquet tortor eget convallis. Vivamus fermentum lacus ac dolor condimentum elementum. Curabitur lobortis, diam quis luctus posuere, felis velit hendrerit orci, in aliquam nisi libero sed tellus. Suspendisse in ipsum ut velit suscipit pharetra. Nulla metus dolor, ornare id interdum et, ultrices vitae neque. Integer lacus turpis, vestibulum eget porttitor et, bibendum nec nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis sem vitae libero pharetra ac ornare odio condimentum. Sed cursus elit vitae urna mollis eget adipiscing ligula tempus.

HeadlineLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies cursus neque, nec molestie felis consectetur vel. Quisque ornare turpis nisi. Praesent consequat aliquet tortor eget convallis. Vivamus fermentum lacus ac dolor condimentum elementum. Curabitur lobortis, diam quis luctus posuere, felis velit hendrerit orci, in aliquam nisi libero sed tellus. Suspendisse in ipsum ut velit suscipit pharetra. Nulla metus dolor, ornare id interdum et, ultrices vitae neque. Integer lacus turpis, vestibulum eget porttitor et, bibendum nec nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis sem vitae libero pharetra ac ornare odio condimentum. Sed cursus elit vitae urna mollis eget adipiscing ligula tempus.

A

Layout Variations

Grid based expansion

10

Confidential and Proprietary. Do not distribute.A

Layout Variations

Grid Based Layout

11

Confidential and Proprietary. Do not distribute.A

Layout Variations

Grid Based Layout

11

Baseline - Fixed

Columns - Variable

Rows - Variable

Gutters/Gaps - Fixed

A

Layout Variations

Positioning

12

Attached to border

Full width/height

Inheritance

A

Layout Variations

Proportions

13

80px 30%

Pixels Percentage

A

Layout Variations

Proportions

13

80px 30%

Value is !xed/de!ned

70%

Value can be left empty

Pixels Percentage

A

Layout Variations

Proportions

13

80px 30%

80px ?? 30% ??

Value is !xed/de!ned

70%

Value can be left empty

Pixels Percentage

A

Layout Variations

Proportions

13

80px 30%

80px ?? 30% ??

Left takes precedence All sections are de!ned

Value is !xed/de!ned

70%

Value can be left empty

Pixels Percentage

A

Layout Variations

Proportions

13

80px 30%

80px ?? 30% ??

Left takes precedence All sections are de!ned

Value is !xed/de!ned

70%

Value can be left empty

Pixels Percentage

50% 50%

Align to center

A

Cropping a label:

Expandable text

UI specific line break rules:

Certain phrases can’t be split on line breaks. For example, “Chapter 5” and “6 mm” should always be together.

PRESENTATION TITLE

Text and Typography

14

This is a label that is too...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie sem ut nibh porta molestie. Phasellus dolor ... more

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie sem ut nibh porta molestie. Phasellus dolor purus, pellentesque vel imperdiet et, egestas vel nunc. Nunc sem ante, commodo eu commodo sit amet, luctus nec mauris. Nunc eu justo ut libero elementum varius.Less

Component Variations

A

Component Variations

Layout

16

CompositeSimpleScale 9 Constrains

A

Conditional StatesComponent Variations

17

The end.