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.