What’s a Wireframe?

Is your web design company talking to you about wireframes? Want to better understand what’s a wireframe and why it’s important? This simple breakdown will help you better understand what’s a wireframe and what you need to understand as 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 blue print; wireframes are similar to blue prints.

In construction blue prints are used to document architecture or engineering design. Although in building and construction, blue prints are strictly adhered to and can sometimes take months or years to finalize, web design blue prints (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:

wireframes

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 a number of 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 wireframes are completed.
  • Team Communication – Our sale, 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:

homepage-wireframe

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 tell 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 out 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

inner-page-wireframe

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 helps 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 complete):

fl-rep-sample

Here we see a couple 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 added 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.

Zach Katkin
Zach Katkin
Zach Katkin is the co-founder & CEO of Atilus. He is a Certified Google Professional, author, and lover of technology. He helps Atilus stay out ahead of online marketing trends and loves driving results for Atilus' clients.

Leave a Comment

 

Recent Comments | 0 Comments
Recent Posts

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.