Shares

The Most Crucial Part of the “Website Build” and How to Do it Right

Before building your website, you need to understand what goes into the header, above the fold, and even the footer. Professionals don't take chances. Let's see how a wireframe can be of help.

Step 1: Wireframe:

A wireframe is a screen blueprint of a website. A wireframe is used by web designers and developers in the initial stages of website construction.

The visual guide serves as a rough mock-up of the page layout, setting into place project scope as well as the future foundation in which a website will be built.

Wireframe example:

website wireframe

What does a wireframe do?

A wireframe serves as a point of reference for the future build-out of a client’s website. It is the “skeleton” - the conceptual framework that lists the layout or arrangement of a website’s pages, content, and graphics.

It maps out the functionality of the website, shows how each page will interact, and ultimately gives an idea of how the website will look altogether.

Who uses wireframes?

Wireframes are used by digital marketing agencies, website design firms, developers, visual designers, UX/UI designers, and business analysts that create the architectural schema.

Wireframes are like storyboards

Before a movie like Toy Story gets animated, it first starts off as a 2-dimensional black-and-white storyboard like so:

In the storyboard, the artists and designers chronicle the story of the final product, giving both the external client and the internal team an idea of how it will play out. It’s not meant to be pretty. Oftentimes it is not. Yet what it does do is far more crucial.

The purpose of such a storyboard, (much like a wireframe) is to prepare the product for its final stages of development. Aesthetics come later.

Setting project scope

At this stage, graphics, pretty typeface, and back-end code have not been added. This still allows both parties room to maneuver - changing copy, editing banners, scrapping an unneeded product line. At this early stage, the scope of the project is usually set.

The client will make it known what they want, and the developer/agency will make it known what they will deliver.

Wireframe composition must reflect client needs and website purpose

Clients will typically meet with the web designer/agency and give them an idea of what they are looking to accomplish with their site. Different sites have different objectives for readers that visit.

An e-commerce store is designed to convert and sell.

Alternatively, media outlets are designed to keep people on their site as long as possible, consuming information, browsing article after article.

The former make their money through shopping cart sales and therefore need to incentivise their clients to navigate through products and make a purchase.

The latter make their money through advertisements; the more ads a reader looks through, the more money the site makes.

Therefore, e-commerce clients will want a navigation that gets visitors to purchase a product while media clients will want to keep readers on their site as long as possible.

As you can see, these two different clients, one an e-commerce site, and the other a media outlet both have different objectives for their end users. Accordingly, their website needs will be different.

A third example of a client would be a local company i.e. roofer, locksmith, plumber, carpet cleaner. These websites are designed with local users in mind and will usually have a large call to action in the header or footer, inviting visitors to call.

In short, the website’s purpose will determine the wireframe’s look.

Setting up a wireframe

It’s up to you how much time you wish to invest into a wireframe. Low-fidelity wireframes are cheap to produce and are sometimes scrapped as the project grows in size.

High-fidelity wireframes require much more time as they are truer to the final picture than low-fidelity wireframes. High-fidelity wireframes add as much detail as possible allowing the project to move through multiple iterations at a faster rate.

When setting up a wireframe think about the order of information you’d like to present to your visitors. Readers read top-to-bottom, left-to-right. They navigate through the page, following a capital “F” shape (Source).

f_reading_pattern_eyetracking

Therefore it becomes crucial to put your most valuable content or call to action in a place where it is easily viewable. Choose the top rather than the bottom; choose left rather than right.

To be or not to be: Should your team use wireframes?

“No way, they add another step!”

Designers seem to have mixed opinions on wireframing, with some calling them a waste of time. Many agencies believe that a wireframe just adds another step into an already long construction process.

Others see too many disparities between the initial mock-up and the final product and refuse to deliver to their clients this “dead-end deliverable.”

Another valid argument against wireframes is that certain interaction details cannot be communicated fully on a flat image.

“Yes, we love wireframes!”

Wireframes are good for the same reason that architectural drawings are good before you get an internal decorator. Internal decorators don’t care about electrical, plumbing and pipes They only care about the aesthetics.

However, present a client a beautiful site with broken links, slow load times, and off-scope work and you will incur his or her wrath.

Wireframes allow the website architect the ability to set the structural framework before more serious and less malleable coding is done, saving you time and headaches.

Once you start coding the 2X4’s of the house go up. It is expensive and time intensive to go back after that. Wireframes essentially lock in both parties setting a clear to-do list for the project ahead.

And with technology being even more useful, wireframes are no longer a dead-end deliverable. Rather, now that new technology enables more seamless integration between developers (think Adobe Illustrator) and graphic designers (think Photoshop), resources are not wasted creating a disposable mock-up.

Electronic wireframes allow agencies to create the “bare bones” of the project, effectively taking the first step towards its completion.

Collaboration between team members allows individuals to get on the same page when the project changes hands.

This level of collaboration was not available 10, 15 years ago, which may explain some of the negative stigma wireframes have built up in some circles.

Final verdict: The advantages outweigh the disadvantages

That being said, you will get clients that won’t respond well when you hand them over a black-and-white wireframe.

Some clients will understand the concept and will be able to use their imagination to see how each element falls into place. Other clients will only see square boxes and lorem ipsum (dummy text) and will want to navigate the finished product.

A local roofer, for example, won’t usually have the type of web experience to be able “get” wireframes. A corporation that already has a web-presence may be easier to sell.

“The problem is not the wireframe, the problem is the human element,” says Robert Rand, Chief Technology Officer of Rand Marketing.

When deviations from the wireframe occur, then it may be wise to scrap the wireframe altogether, making its drafting redundant. “It all depends on what your team and [ultimately] what your clients get out of it,” says Rand.

Above all, use judgement when analyzing the needs of each client. As a backup, have a portfolio of finalized work ready to show your clients should questions come up.

Used correctly, wireframes serve as a prototype of the final website. They set the scope for the project, keeping both agencies and clients honest to the contract they signed.


Motti Danino is the VP of Operations at Oro Inc. Prior to joining Oro, Motti was the COO of Fahlo, a startup in the entertainment space. Prior to this, Motti was the Director of Magento Go, Magento’s cloud e-commerce solution. As director, Motti acted as the business unit GM and was responsible for building, launching, and driving Magento Go global merchants’ adoption. Find him on Twitter at @Mototwitt.​

About the Author Michael Chibuzor

Michael Chibuzor is the Chief Content Writer on Content Marketing Up. He works with both B2B and B2C business to grow their leads and convert more paying customers. If you're looking to create content that converts casual visitors into customers, get in touch with him Here