Your SlideShare is downloading. ×
Adaptive layout
Adaptive layout
Adaptive layout
Adaptive layout
Adaptive layout
Adaptive layout
Adaptive layout
Adaptive layout
Adaptive layout
Adaptive layout
Adaptive layout
Adaptive layout
Adaptive layout
Adaptive layout
Adaptive layout
Adaptive layout
Adaptive layout
Adaptive layout
Adaptive layout
Adaptive layout
Adaptive layout
Adaptive layout
Adaptive layout
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Adaptive layout

259

Published on

Adaptive Layout Design is a complex problem for many interactive Designers. These are the results on the research done over the course of a few months in which designers were observed as they designed …

Adaptive Layout Design is a complex problem for many interactive Designers. These are the results on the research done over the course of a few months in which designers were observed as they designed multiscreen projects both for publishing and for the open web.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
259
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Adaptive Layout DesignV1A FEBRUARY 11, 2010
  • 2. Adaptive Layout DesignLevels of adaptation Platform Variations Layout Variations Component VariationsA 2
  • 3. Platform VariationsA
  • 4. Platform VariationsContent 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 Treasure Island negro streets at dawn looking for an angry fix, angelheaded hipsters burning for the I saw the best minds of ancient heavenlyconnection to the starry my generation destroyed dynamo in the machinery of night,who by madness, starving poverty and tatters and hollow-eyed and hysterical naked, dragging themselves high sat up smoking through the negro streets at dawn looking for an In the supernatural darkness ofcold- angry fix, angelheaded water flats floating across the tops of cities hipsters burning for the ancient contemplating jazz,who bared their brains heavenlyconnection to to Heaven under the El and saw oham. Story DesignA Confidential and Proprietary. Do not distribute. 4
  • 5. Platform VariationsScreen sizes 15 inch 9.7 inch 3.5 inch 2 inches Desktop Tablet Smartphones Mobile PhonesA 5
  • 6. Platform VariationsResolution iPhone DroidA 6
  • 7. Platform VariationsUI Guidelines and ConventionsA 7
  • 8. Layout VariationsA
  • 9. Layout VariationsDocument Direction Fixed Variable (by content) Headline Headline Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies cursus neque, adipiscing elit. Duis ultricies cursus neque, nec molestie felis consectetur vel. Quisque nec molestie felis consectetur vel. Quisque ornare turpis nisi. Praesent consequat ornare turpis nisi. Praesent consequat aliquet tortor eget convallis. Vivamus aliquet tortor eget convallis. Vivamus fermentum lacus ac dolor condimentum fermentum lacus ac dolor condimentum elementum. Curabitur lobortis, diam quis elementum. Curabitur lobortis, diam quis luctus posuere, felis velit hendrerit orci, in luctus posuere, felis velit hendrerit orci, in aliquam nisi libero sed tellus. Suspendisse aliquam nisi libero sed tellus. Suspendisse in ipsum ut velit suscipit pharetra. Nulla in ipsum ut velit suscipit pharetra. Nulla metus dolor, ornare id interdum et, ultrices metus dolor, ornare id interdum et, ultrices vitae neque. Integer lacus turpis, vitae neque. Integer lacus turpis, vestibulum eget porttitor et, bibendum nec vestibulum eget porttitor et, bibendum nec nisi. Lorem ipsum dolor sit amet, nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis consectetur adipiscing elit. Sed convallis sem vitae libero pharetra ac ornare odio sem vitae libero pharetra ac ornare odio condimentum. Sed cursus elit vitae urna condimentum. Sed cursus elit vitae urna mollis eget adipiscing ligula tempus. mollis eget adipiscing ligula tempus.A 9
  • 10. Layout VariationsGrid based expansionA 10
  • 11. Layout VariationsGrid Based LayoutA Confidential and Proprietary. Do not distribute. 11
  • 12. Layout VariationsGrid Based Layout Columns - Variable Gutters/Gaps - Fixed Baseline - Fixed Rows - VariableA Confidential and Proprietary. Do not distribute. 11
  • 13. Layout VariationsPositioningAttached to border InheritanceFull width/heightA 12
  • 14. Layout VariationsProportionsPixels Percentage 80px 30%A 13
  • 15. Layout VariationsProportionsPixels Percentage Value can be left empty Value is xed/de ned 80px 30% 70%A 13
  • 16. Layout VariationsProportionsPixels Percentage Value can be left empty Value is xed/de ned 80px 30% 70% ? 80px ? ? 30% ?A 13
  • 17. Layout VariationsProportionsPixels Percentage Value can be left empty Value is xed/de ned 80px 30% 70% Left takes precedence All sections are de ned ? 80px ? ? 30% ?A 13
  • 18. Layout VariationsProportionsPixels Percentage Value can be left empty Value is xed/de ned 80px 30% 70% Left takes precedence All sections are de ned Align to center ? 80px ? ? 30% ? 50% 50%A 13
  • 19. PRESENTATION TITLEText and TypographyCropping a label:This is a label that is too...Expandable text Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie sem ut nibh adipiscing elit. Duis molestie sem ut nibh porta molestie. Phasellus dolor ... more 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. LessUI specific line break rules:Certain phrases can’t be split on line breaks. For example, “Chapter 5” and “6 mm” should always be together.A 14
  • 20. Component Variations
  • 21. Component VariationsLayout Simple Composite Scale 9 ConstrainsA 16
  • 22. Component VariationsConditional StatesA 17
  • 23. The end.

×