Page Thumbnails for UI Design

BrainEther Pro shared this on Aug 25, 2008

This stencil contains thumbnail representations of common types of pages, such as search, login, and error pages for quickly designing application and site navigation layouts. There's a point in design where it's efficient to lay out the big picture of the application or site you are designing without getting mired in the details of each page. You can accomplish this using 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. This is where Page Thumbnails can come in handy, because you can drag the one you need off the stencil window, double-click the title to change it, and then wire it up (they are set up with 8 magnets). This makes for a more informative and visually compelling view of the proposed design. I created these based on my experience in web application design and in messing around mapping some existing sites, but it's certainly not complete. I've included a couple of blanks in the template for you to make your own, and these are all vector-based so you can ungroup and re-assemble the others as you see fit. You can also leave requests for additions in the comments section. Here's an example [pdf] I put together of a fictitious site to give the general idea.

Website