What’s a Wireframe?

What’s a Wireframe?

Is your web design company talking to you about wireframes? Want to understand better what a wireframe is and why it’s important? This simple breakdown will help you better understand what a wireframe is and what you need to understand your web design company builds your website.

During the beginning phases of our projects at Atilus, we work with our clients to create a set of wireframes. I think the best comparison is a blueprint; wireframes are similar to blueprints.

In construction, blueprints are used to document architectural or engineering designs. Although in building and construction, blueprints are strictly adhered to and can sometimes take months or years to finalize, web design blueprints (wireframes) are much quicker to produce and generally can be modified during the design and development stages.

What’s a Wireframe in Web Design?

A wireframe is best defined as the layout of the website. It helps us understand and communicate with our clients, any designers working on the project, and finally the development team, where elements are going to go and their approximate shape, layout, and content. Take a look at the examples below:

These wireframes, created for our client The Florida Reparatory Theatre, are simply sketched using a pencil. As you can see they were completed using a wireframe template (a piece of paper that simulates a browser window) by Ryan, our lead designer.

There are several important things to note here, as a wireframe is a culmination of many disciplines and events:

• Listening – We have a number of conversations, meetings, etc. with our client before the wireframes are completed.
• Team Communication – Our sales, design, and dev teams meet internally to review everything that was discussed during the sale and to: review the existing website, review all content, and research competitive and other designs the client likes.
• Research & Best-Practices – The design team then works to combine these discussions, the important elements of the site (gleaned through conversation and research) as well as our knowledge on web-best practices and what works in terms of the clients’ end goals – marrying them all to create the final wireframe.

Sample Wireframe #1 – The Homepage

These two sets show a number of things. Let’s take the first image:

Here we’re looking at the home page. We have the theatre’s season and years at the top, some contact information, etc. Then we have, as we move down the page, a set of information – much of this is pretty consistent across many of our sites – we have logo, navigation, and banner area. The banner area tells us there will be a large area in the middle to communicate important information – ie, some kind of mission or vision statement about the organization, maybe a video, and a call to action.

As we move down the page, we can see we’ve separated 3 large areas of importance – Donate | Volunteer | Educate. And finally, we have a list of shows at the bottom.

On the right side of this same wireframe, we also see how this will be interpreted in a mobile device – as we have to not only account for the look, feel, and interactive elements on a desktop anymore, but we also must consider the usability and appropriateness of various elements on mobile devices (phones & tablets).

Sample Wireframe #2 – Inner Pages

Moving to the second wireframe, we see what the inner pages will look like. A continuation of the same top part of the website – generally what we call a header (elements at the top that include your company logo, navigation, contact information, etc.) – as well as a new “inner banner” section, sub navigation for a page, and a sample page layout

So in all this gives us a direction to move in as we actually begin filling out the details of the design. Wireframes allow us to approximate the location of various elements, begin coming up with a consistent theme for the site, and help guide us on the use of content. For example, a very small website will have a very simple wireframe (and design) and may not need to consider having a sub-navigation (drop down menu or menu on the side) because there simply isn’t enough content.

From Wireframe to Final Design

Nearly every site is somewhat unique, but borrows many elements from site layouts and designs in the past, and although the digital world is constantly changing, there are definitely consistent elements and best practices that allow your users to quickly understand who you are, and get to what they’re looking for on your website. Let’s see what all of this ends up becoming and take a look at the final design of the website (after the design stage has been completed):

Here we see a couple of shots of the homepage and an internal page for one of FL Rep’s plays. You can see how the wireframe has been translated. We have an area at the top with their season, contact information, etc. Next come the logo and navigation – along with the big banner in the center. What you’ll also note is that there have been a couple of additions as well.

Wireframes, Designs & Change-Orders

Finally, for our own process, we get approval on the wireframes before moving through to design. We then mirror the final design very closely after the approved wireframes. If large-scale changes occur to the design that aren’t in accordance with the approved wireframe, this is generally considered a change order, and we’re happy to work through the process with our clients.