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.

1. Establishing a common
language for designing fluid UIs
James Nash / @c1rrus
Photo © Leonardo Aguiar

2. THE CHALLENGES

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

12. Anchoring
(or “sticking”?)

13. Scaling
8:5

14. Stretching

15. Distributing

16. Wrapping
?