• 0k
  • 0
Designing with Wix \ APR 19th 2010

Introduction to Wireframing

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.

Get The Wix Blog
Straight to Your Email

Subscribe to the WixBlog And never miss an update!

Hmmm, that's not a valid email address.

Join Us! \ 

Get the latest and freshest content on creating
& marketing your Wix website.

Hmmm, that's not a valid email address.