Tangible Wireframing: Responsive design made simple, fun and more accessible

Structuring your content is key to great design, especially in the growing world of responsive web. Limitations with organizing content or designing the framework in which content will be placed are often imposed by the content itself. While early conversations with clients lead to a general understanding of design priorities and goals, it is difficult to transfer these insights to wireframing without several back-and-forths with content strategy (whether it happens on the client side or within the agency). Bringing basic wireframe ideas into early conversations allows non-designers and non-architects to get their hands dirty and understand the parameters within which responsive web design occurs.

Sara Wachter-Boettcher’s Content Everywhere, a part of the Rosenfeld book collection, is both compelling and inspiring. Particularly interesting was an image that was used in the book under the heading “Structure Follows Substance” (see below).


Figure 3.6, Page 46, Chapter 3 | Content Everywhere: Strategy and Structure for Future-Ready Content, Sara Wachter-Boettcher | Rosenfeld


View book: http://rosenfeldmedia.com/books/content-everywhere/

From a UX/information architecture perspective, a tool similar to that shown in the image above is a great entry point to UX for non-designers and non-architects. Representative of a child’s toy for UX problem-solving, this tool is great for UX folks to communicate content organization guidelines when designing for responsive environments. Having clients and content strategists take on the lens of a UX architect enables them to think about their content before it is laid into a responsive framework. For example, designers may use a 3-column grid for a desktop experience, 2-column for tablet, and 1-column for mobile devices; responsive design pushes page elements to stack (or morph, or even disappear) accordingly. Included with this post is a printable template for a cube featuring 6 common UX elements. This is a fun and tangible approach to wireframing for responsive web design. The images included below show a real recreation of this concept. The 3D wireframe blocks are given context by creating makeshift browser boxes. Here’s to hoping that this easy and fun take on preliminary wireframing makes your UX conversations flow smoothly!

3 12


Download the UX elements cube template:

Print, cut, fold, and enjoy!



Leave a Comment

Awesome! You've decided to leave a comment. Please keep in mind that comments are moderated.

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>