Adaptive Layout DesignV1A   FEBRUARY 11, 2010
Adaptive Layout DesignLevels of adaptation     Platform Variations   Layout Variations   Component VariationsA            ...
Platform VariationsA
Platform VariationsContent             Teasure Island                   -                         Part I.                 ...
Platform VariationsScreen sizes                           15 inch   9.7 inch     3.5 inch      2 inches                   ...
Platform VariationsResolution                      iPhone   DroidA                                      6
Platform VariationsUI Guidelines and ConventionsA                               7
Layout VariationsA
Layout VariationsDocument                    Direction                  Fixed                             Variable (by con...
Layout VariationsGrid based expansionA                      10
Layout VariationsGrid Based LayoutA    Confidential and Proprietary. Do not distribute.   11
Layout VariationsGrid Based Layout                                                        Columns - Variable   Gutters/Gap...
Layout VariationsPositioningAttached to border   InheritanceFull width/heightA                                  12
Layout VariationsProportionsPixels              Percentage  80px               30%A                                13
Layout VariationsProportionsPixels                                   Percentage               Value can be left empty     ...
Layout VariationsProportionsPixels                                       Percentage                   Value can be left em...
Layout VariationsProportionsPixels                                       Percentage                   Value can be left em...
Layout VariationsProportionsPixels                                       Percentage                   Value can be left em...
PRESENTATION TITLEText and TypographyCropping a label:This is a label that is too...Expandable text Lorem ipsum dolor sit ...
Component Variations
Component VariationsLayout Simple                Composite Scale 9               ConstrainsA                              ...
Component VariationsConditional StatesA                      17
The end.
Upcoming SlideShare
Loading in...5
×

Adaptive layout

269

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 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
269
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Adaptive layout

  1. 1. Adaptive Layout DesignV1A FEBRUARY 11, 2010
  2. 2. Adaptive Layout DesignLevels of adaptation Platform Variations Layout Variations Component VariationsA 2
  3. 3. Platform VariationsA
  4. 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. 5. Platform VariationsScreen sizes 15 inch 9.7 inch 3.5 inch 2 inches Desktop Tablet Smartphones Mobile PhonesA 5
  6. 6. Platform VariationsResolution iPhone DroidA 6
  7. 7. Platform VariationsUI Guidelines and ConventionsA 7
  8. 8. Layout VariationsA
  9. 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. 10. Layout VariationsGrid based expansionA 10
  11. 11. Layout VariationsGrid Based LayoutA Confidential and Proprietary. Do not distribute. 11
  12. 12. Layout VariationsGrid Based Layout Columns - Variable Gutters/Gaps - Fixed Baseline - Fixed Rows - VariableA Confidential and Proprietary. Do not distribute. 11
  13. 13. Layout VariationsPositioningAttached to border InheritanceFull width/heightA 12
  14. 14. Layout VariationsProportionsPixels Percentage 80px 30%A 13
  15. 15. Layout VariationsProportionsPixels Percentage Value can be left empty Value is xed/de ned 80px 30% 70%A 13
  16. 16. Layout VariationsProportionsPixels Percentage Value can be left empty Value is xed/de ned 80px 30% 70% ? 80px ? ? 30% ?A 13
  17. 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. 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. 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. 20. Component Variations
  21. 21. Component VariationsLayout Simple Composite Scale 9 ConstrainsA 16
  22. 22. Component VariationsConditional StatesA 17
  23. 23. The end.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×