Why Your Next Website Should be Designed with Wireframes

Posted by dr.pixel on September 09, 2009 in Digital Design, Tools tagged with

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, I’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.

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

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.


Warning: file_get_contents(http://tinyurl.com/api-create.php?url=http://www.drpixel.be/tools/why-your-next-website-should-be-designed-with-wireframes/) [function.file-get-contents]: failed to open stream: HTTP request failed! HTTP/1.0 503 Service Not Available in /homez.108/drpixel/www/wp-content/themes/revolution/functions/theme-functions.php on line 449

Tiny URL for this post: