Wireframe Diagrams

A web wireframe diagram is a visual guide to the content and layout that represents the skeletal framework of a web page, before adding content and design elements. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose.

We survey and analyze client needs for User Personas, Stories and Flow Diagrams, determining what content should be displayed in full, what should be displayed as a teaser (an intro and a link), what should be an image or illustration, and what should be a link (or submenu) to other pages.

In the image below, two students compare potential wireframe diagrams for review by a client. We can go in both directions: building up from wireframes to sites, or analyzing sites by creating wireframes of them. The site above was for a new website for a local library; the one below was a wireframe analysis of a competitor (another local library).