- Sep 17, 2009
- 54 Comments
- Articles
Why Your Next Website Should be Designed with Wireframes
Getting a design to click can take time. In many cases, it takes several rounds of revisions to even get to an effective starting point. What can you do to give yourself a better chance at designing something great sooner?
In this article, we’ll take a look at a pre-design process known as wireframing. It’s used by designers to help define a website’s essence before working on the time consuming details.
This a long post, and it may take you more time than usual to read through. But I promise that if you stick with it, you’ll make that time back over and over with the amount saved in future design process. You’re a busy person, so let’s get started.
What is a Wireframe?
Chances are that you’ve already done a wireframe before without even realizing it. It might have been in the form of a rough doodle in the margin of a notebook or a series of boxes in Photoshop, but the principle is the same. You’ve simplified a website design down into fundamental elements and shapes.
A wireframe is breakdown of a website layout into simple shapes and text to represent unique elements. This allows a designer to plan a site without having to worry about anything but the size, proportions, and arrangement. Details in the design is not the focus of a wireframe.
The Difference from Site Maps
It’s important to remember that even though both part of planning stages, a wireframe is not the same as a site map. A site map helps plan links by showing how pages relate to each other. The wireframe takes that one step closer by individually plotting page content.
Wireframes separate the design from the structure. This is important, because we often blend the two together in the opening stages of a new project. Design is the aesthetic of a sidebar, where structure is the positioning of it.
Why Do Wireframes Matter?
Laying out a site in simplest terms makes focusing on the usability intuitive. With gray boxes representing complex elements, you’re less likely to get distracted by a visual nuance that might not even be in the final product.
Bringing focus back to the basics is a wonderful asset to productivity in web design with clients. It’s less overwhelming, and allows the designer to guide the client’s attention to the task at hand.
The only thing needed to start a wireframe is general idea. This means that you can start building before receiving any content from the client.
They Organize
By displaying the flashier elements of a site in terms of grayed out boxes, you’re making it easier to arrange objectively. Layout becomes an exercise in spacing and grouping rather than contrast and color palettes.
When you’re ready to bring the layout to a full Photoshop composition, you’ve already got a blueprint to design over. With some forward thinking, you’ll have a lot less measuring to do. Discovering at the last moment that your entire design is physically impossible is highly overrated anyway.
They Simplify
Wireframes strip away the extra thought and intricacies of “3 pixels further right” when getting started. It’s easier to plan a slideshow when you only have to worry about positioning.
Wireframes are easy to present because they’ve stripped away many of the “preference” elements. By breaking a layout into the fundamental building blocks, you’re more likely to discuss about the font placement than the font choice.
They Save Time
“But spending time doing wireframes add an extra step!” This is not entirely true. Which of the following would take longer? Putting together a full design in Photoshop? Or drawing out a series of monochromatic boxes?
After slaving over a design for hours, few things are more frustrating to a designer than hearing “I don’t like this direction” from the client. It’s a major setback, and in many cases, it is avoidable with some basic discussion on layout before producing a near-finished design.
Build Your Own Wireframes Online
Digital wireframes are the step between a rough sketch in a Moleskine, and a full mock-up in Photoshop. They translate a hand drawn design into an almost pixel perfect scale model of the final page.
It’s not easy finding a tool that allows you to quickly build wireframes on the computer. I’ve read similar posts with a dozen links to possible tools and web apps showcased. Your time is valuable, so I’m going to save you the trial and error by just recommending one.
Meet HotGloo
Keep in mind: This just is an enthusiastic recommendation from personal experience. There is no partnership nor sponsorship between Build Internet and Hot Gloo.
Even though I just came across it in the past month, Hot Gloo is one of the nicest web-based wireframe builders out there. I’ll let the company’s elevator pitch summarize it further:
HotGloo is designed by IA’s for IA’s. With the help of the elements you can create a whole world out of wireframes. Just drag and drop, scale, link, name and rename them – it’s super easy and intuitional.
Their servers host all wireframes, so sharing work with clients or fellow teammates is incredibly easy. You are also able to add users with “Editor” or “Reviewer” roles to each project. The allows them to participate and add notes directly on the layout at any time.
I’ve attached a video below which demonstrates the editor’s basic functions. It’s a little small, but it should give you a general idea of what Hot Gloo is about.
Hot Gloo is still in Beta at the moment, so the service is completely free (for now). Take advantage of this and challenge yourself to use it on your next web project. It will go much smoother.
Examples and Inspiration
I’ve picked out several examples of good wireframes from the I ♥ wireframes Flickr pool to showcase below. You can click on an image to see the full size author page.
How to Get Started
Do you think that wireframes could help revolutionize your workflow? If you’re interested in learning more, I’ve compiled a series of links that are a great next step into the world of wireframes.
Tutorials and Articles
A recommended reading list for learning the process and logic behind wireframe design.
- Wireframes Magazine
- The Importance of Wireframing
- Better Perspective in Wireframing
- 35 Excellent Wireframing Resources
- The Importance Of Wireframes In Web Design And 9 Tools To Create Wireframes
Examples and Inspiration
Unsure of what makes a good wireframe? Refer to these links as inspiration of good wireframing.
Share Your Experience
Have any wireframing tools that you couldn’t live without? Has designing with wireframes made client work easier? We’d love to hear your experience in the comments.
