A wireframe is like a skeleton or a blueprint — and equally as important! A wireframe is a simple, black & white representation of the page layout and navigational structure of your site-to-be. The simplicity of a wireframe cuts through the excitement of color and aesthetic and puts the emphasis on creating a site that is aimed directly at your goals. This stage promotes strategic thinking, keeps a team focused and on the same page, and allows for many revisions without breaking the bank.

Color, font, texture, and the specific text are likely to change between the wireframe and launch, but the basic layout and position of things that you establish during the wireframe will be carried forward throughout the following stages.

When evaluating a wireframe, consider…

  • Is the overall site navigation structured in a logical and useful way?
  • Is it easy to find the most important sections?
  • Is content laid out in a logical and useway way in the pages?
  • Has space been provided for all of the content and features that you want your website to contain?
  • Are the most important points that you want to make and tasks that your visitors want to complete given priority over less important content?
  • Are there appropriate “calls to action” to get your visitors to take the next step in hiring you? Are they located in logical, useful places where they are likely to be found and used?
  • When you resize your browser, or view the wireframe on different devices (Desktop, tablet, mobile), does the content layout change in useful, logical ways? Is the content easy to access and read on each device type? Note that for some devices, it may be appropriate for less content to be made available! For example, most people don’t want to wait for your pretty image gallery to download on their mobile phone, they just want to quickly find your address, hours of operation, or similar must-have info.

When evaluating a wireframe, don’t worry about…

  • Color
  • Fonts
  • Texture
  • Images

Unless otherwise stated, all of these will change during the design phase. If you have ideas for directions you want to take, it’s fine to voice them! However, you won’t see these suggestions actually come into play until the design phase.

Examples

Many people have a difficult time understanding how their wireframe will relate to the design of their site. I find that the most effective tool here are examples from previous projects. Below are some wireframes and the corresponding sites that resulted.

 

(click the images for full size)

(click the images for full size)

 

(click the images for full size)

Share this article
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn