Page Thumbnails for UI Design
By Brian Ehret on Sep 08, 2008
Early in a UI design project, it's efficient to be able to quickly arrange and rearrange the high level navigation and flow of the application or site without getting mired in the details of each page. You can accomplish this by drawing plain old lines and boxes with descriptive labels, but odds are that you have a general idea of what you expect the page to do, e.g., it is a form, or a table listing a bunch of objects, or just a page full of text. It's at this point in design where Page Thumbnails can come in handy. Basically, these are just shorthand visual representations of particular types of pages that, unlike a plain old boxes, imply functionality or purpose of the pages. Drawing the navigation flow using these makes for a more informative and visually compelling view of the proposed design.
I created an initial set of Page Thumbnails as an OmniGraffle stencil. OmniGraffle is a Mac application that works great for wireframing, page layout and vector-based drawing. One cool feature is that it allows users to create custom stencils of reusable objects that can be dragged off of a palette and into your document. The stencils can then easily be shared with other users via websites like Graffletopia.com. You can read a bit more about it and download the Page Thumbnails stencil from Graffletopia.
Here's a snapshot of the thumbnails as they appear on the stencils palette:
These were created based on my experience in web application design and in messing around mapping some existing sites, but the stencil is certainly not complete. The applications that the xDesign group designs at Sun share a lot of common structure (e.g., navigation schemes, page layout) and this constrains the set of thumbnails needed -- so a small set can go a long way. Web sites, on the other hand, are far less constrained in terms of purpose, scope, navigation, etc., and so the potential set of representative thumbnails is broader. To make this stencil (and the method) more broadly applicable, I included a couple of blank objects on the stencil that can be customized and saved for reuse.
I put together an example of a fictitious site to illustrate the idea, and you can see a bit of that below. The full example is also available as a pdf file. I hope you find the stencil useful. Feel free to leave comments/complaints/questions in the comments section.