Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Establishing a common language for designing fluid UIs

416 views

Published on

Copy of the slides form my workshop at the UCD 2013 conference in London: http://2013.ucduk.org/session/session-b10-establishing-a-common-language-for-designing-fluid-uis/

Increasingly we face the need to design UI layouts that have some degree of fluidity so that they can expand, contract or reflow to fit different screen or window sizes. Designing for Web is the extreme case, however mobile apps (especially on Android), desktop apps in resizable windows and other platforms pose similar challenges.

Our traditional wireframing and mock-ups tools typically only produce static, fixed-size layouts. Exhaustively showing the desired layout at each possible size is rarely practical (and often not even possible). Although some methods to produce actual, fluid mock-ups exist (e.g. designing in the browser), not everyone possesses the technical skills or time to build them.

A common fallback is therefore to use visual and text annotations to describe how elements should resize or reposition themselves. However, there doesn’t seem to be a consistent convention for this. In this workshop I intend to present a few annotation approaches my colleagues and I have tried and then open the discussion to the floor to see whether we can perhaps jointly create a visual(?) language that will help us all annotate our future fluid designs in a standardised way. the technical skills or time to build them.

Published in: Technology, Business
  • Be the first to comment

Establishing a common language for designing fluid UIs

  1. 1. Establishing a common language for designing fluid UIs James Nash / @c1rrus Photo © Leonardo Aguiar
  2. 2. THE CHALLENGES
  3. 3. iOS
  4. 4. Android
  5. 5. Web Photo © Luke Wroblewski
  6. 6. Photo © Danny Hope < Easy to make < Can convey fluidity = Hard to convey fluidity = Hard to make
  7. 7. SOLUTIONS?
  8. 8. Image X 150 x 150 100% wide (max 960px) 100% wide (max 960px) Images Images have a fixed width & height in pixels which does not change when the size of the browser window or device changes. Boxes If a box does not have an explicit width value, it is meant to stretch horizontally to fill all available space. Otherwise, boxes may have widths expressed in either pixels or percentages. If given in percentages, it means its width will be X% of the containing box's width. Finally, boxes with percentage widths that can grow or shrink depending on the available space may also have a maximum width specified which they will not exceed even if more space is available. The height of a box is always assumed to be flexible as it will expand vertically as far as it needs to so that there is enough room for its contents. Invisible boxes The visual style of the boxes is entirely up to the designers. Whether they have a border or not, what background colour or pattern they should have etc. etc. However, in these wireframes they are typically shown with solid outlines to make the logical structure of the page more clear. (Think of them as sections of content on the page) Occasionally though, it may be necessary to indicate an invisible or imaginary box in order to clarify some layout detail (see example #3 on the next page). In those situations a dashed outline is used. Alignment Images and boxes may be left, centre or rightaligned relative to the box that contains them. This is indicated by red, green or blue colouring. Red = Left Green = Centre Blue = Right 100% wide Image X 150 x 150 100% wide Image X 150 x 150 100% wide Image X 150 x 150 Sizes With the exception of images which must be a specific pixel size, any dimensions given elsewhere are intended to be indicative only. If the brand or aesthetic design requires some minor deviations from the sizes shown, that is acceptable. However, where the sizes relate to common elements shared across pages (e.g. column widths of the overall page layout) any deviations must then also be applied throughout all pages. Margins In order to keep the wireframes legible, margins and gaps between boxes and images will not be explicitly specified. The exact sizes of these will be left at the discretion of the graphic designers. Examples Box A Image Z 70 x 100 Box B 50% Box A Box B 100% wide (max ~400px) Image Image Image Image Z Z Z Z 70 x 70 x 70 x 70 x 100 100 100 100 Box A Image Z 70 x 100 Box A Box B 100% wide (max ~400px) Image Image Image Image Z Z Z Z 70 x 70 x 70 x 70 x 100 100 100 100 Box B 50% Box A Box B 100% wide (max ~400px) Image Image Image Z Z Z 70 x 70 x 70 x 100 100 100 Image Z 70 x 100
  9. 9. 768px iPad 9:24 PM Username Password Login or Sign in with Facebook Don't have a login? Sign up now! Advert #1 728 x 90 (Leaderboard) Logo 250 x 90 Page Title Search 20% wide 20% wide Home 20% wide Section 1 GO 20% wide Section 2 1024px 250px wide 20% wide Section 3 Section 4 Editor's Picks Slide N 400 x 225 Slide N-1 320 x 180 Slide N+1 320 x 180 "The Fold" for iPad in landscape (504px height) Slide N Title Slide N Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 400px wide 4321 Views Advert #2 120 x 600 (IAB Skyscraper) mm:ss 320px wide Top Items Advert #3 300 x 250 (IAB Medium Rectangle) 1 Medium Thumbnail 225 x 150 Title Short description. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 225px wide 2 Social Media Facebook Link 100 x 50 Medium Thumbnail 225 x 150 999 People like Foobar. Like DMAX. Recent updates by Foobar Thumbnail 100 x ?? Post with a thumbnail. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "The Fold" for iPad in portrait (928px height)
  10. 10. BEHAVIOURS
  11. 11. Anchoring (or “sticking”?)
  12. 12. Scaling 8:5
  13. 13. Stretching
  14. 14. Distributing
  15. 15. Wrapping ?

×