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.
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.
- Navigation Design – where (and how) should I link all the pages?
- Content Display – how should I present the content on my page?
- Way-finding – will my visitors be able to tell where they are on my site?
Here’s what a wireframe might look like:
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”):
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.