Introduction to Wireframing

Designing with Wix | April 19th 2010

Do you remember learning polynomial equation? Those exciting times when you had to map out the X/Y coordinate plane on that blue and white graph paper?…. No!? (Don’t worry; we try to forget those days as well). The good news is we can teach you a new way to use graph paper that will spice up those old perceptions.

Introduction to Wireframing

Welcome to wireframing! Wireframing is the process of creating a bare-bones layout of your website. It’s where information design, interface design and navigation design come together. Web designers use completed wireframes to guide graphic design decisions.

There are three things you should consider when creating a wireframe.

  1. Navigation Design – where (and how) should I link all the pages?
  2. Content Display – how should I present the content on my page?
  3. Way-finding – will my visitors be able to tell where they are on my site?

Here’s what a wireframe might look like:

Sample of wireframe

Photography site template

The Wix Photo Focus Template

Sample 2 of wireframe

Lifestyle website template

The Wix Lifestyle Mentor Template

When you look at a wireframe, the site navigation and content area(s) should be very clear.

Note: Way-finding may not be necessary. Most Wix sites have simple site architecture. That means, no matter where you are on the site, you can find your way with the site navigation. Way-finding only applies when you have a complicated architecture plane (links to mini-pages within mini-pages). For more visual layout techniques, see our blog post on contrast and eye movements.

Try it for yourself (right click and “save as”):

Basic wireframing paper

Keep in mind, a completed wireframe is never an end in itself. The wireframe may look slightly different than the final product. Consider the wireframe as a guideline for design. In the end, it will improve the user experience on your site.


Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>