Wireframes & GUI Design

This past Thursday, I had the opportunity to listen to a great RefreshDC talk on GUI/Website documentation by Dan Brown of EightShapes.  Dan Brown is a humorous, informative, and kinda no nonsense speaker.  He has a been there, seen that and done that approach that can only be developed from years of experience in design. He spoke to the crowd of 80 some designers and developers about the Secrets of Great Documentation in GUI Design.

One of the things that he said in his talk that led to this blog post ( He shared a massive amount of information but I’m going to keep focused on the design elements) was that even today in 2011 he sometimes has to explain “Wireframes” to clients and stakeholders. I have found the term can create confusion. Here are some notes and thoughts about wireframes that I hope will be helpful.


  • The “wireframe” is the part of the site documentation where information design, interface design and interaction design intersect.
  • A wireframe is often called a “schematic”
  • It is a page layout that describes all of the elements and how they fit together.
  • It is bared bones and stripped down.
  • Wireframes are a step in the process of establishing the visual design.
  • It is like a part of the blueprint of the site akin to architectural building plans.
  • They also share some affinity with the storyboard for animation and film.

To create context for the wireframes,  let’s take a quick look at the conceptual framework for user experience design in the “The  Elements of User Experience” by Jesse James Garret of Adaptive Path.

The process of User Centered design is broken down into five planes.

  • The Strategy Plane: Site Objectives and User Needs.
  • The Scope Plane:  Functional Specifications & Content Requirements
  • The Structure Plane: Interaction Design & Information Architecture.
  • The Skeleton Plane: Interface Design, Navigation Design,  & Information Design.
  • The Surface Plane: Visual Design

The Wireframe is a part of the Skeleton Plane.  It is the step in the design process where we begin to give form to function and integrate structure in each website or application screen.

Each of the components of application and website design are important.  You can enhance the communication and collaborative process by taking the time to discuss these project steps with your clients and project  stakeholders.