Establishing a common language for designing fluid UIs
1 like525 views
The document discusses the design principles for creating fluid user interfaces across various platforms like iOS, Android, and web. It emphasizes the use of boxes and images with flexible dimensions, alignment, and the importance of maintaining a consistent layout across pages. Additionally, it provides guidelines for the visual style and margins of elements in wireframes, highlighting how designers can create a clear and accessible design structure.
Establishing a common language for designing fluid UIs
- 1. Establishing a common language for designing fluid UIs James Nash / @c1rrus Photo © Leonardo Aguiar
- 3. iOS
- 4. Android
- 5. Web Photo © Luke Wroblewski
- 6. Photo © Danny Hope < Easy to make < Can convey fluidity = Hard to convey fluidity = Hard to make
- 7. SOLUTIONS?
- 9. 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
- 10. 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)
- 11. BEHAVIOURS
- 13. Scaling 8:5
- 14. Stretching
- 15. Distributing
- 16. Wrapping ?
Editor's Notes
- #2: Photo credit: Leonardo Aguiar - http://www.flickr.com/photos/sensechange/1860810198/
- #6: Photo Credit: Luke Wroblewski - http://www.flickr.com/photos/lukew/10412439655/
- #7: Photo Credit: Danny Hope - http://www.flickr.com/photos/13316988@N00/2505471168/