A Guide to Understanding Wireframes
Confusion on what exactly a wireframe is comes up more often than you would think. I have been part of so many projects where the team shows off a wireframe deliverable which is met with a particular mix of confusion and disappointment. This is usually followed up by a compliment sandwich of questions including:
“I like it, but can we add some imagery?”
“It looks great, but there’s no color. Can we use our brand colors?”
“I thought this would be a little more flashy. This doesn’t speak to us.”
In which, the team usually comes back with:
“That will come next. These are just wireframes.”
While I do not mean any of this to be condescending, I wanted to write this post to make it clear what exactly a wireframe is (and what is it not) to hopefully cut down on these types of conversations in the future.
So, What is a Wireframe?
To put it simply, a wireframe is kind of like a blueprint of what your website will look like and how it will work. Wireframes vary in detail and functionality, depending on the site you trying to build. The way I see it there are three types of wireframes.
These are super simple outlines for how a page will flow. Aside from a few boxes to show images, text, and some low level functionality, these wireframes do not contain a whole ton of information. I would use these more for personal projects, or smaller sites. A good example was a few weeks ago when I met up with a band to potentially work on their website. I outlined what I wanted to do for their site in my sketchbook at a very low level and in a matter of minutes. This was all I needed to do explain my vision, and move into designs.
High Fidelity Wireframes
These are very detailed wireframes with no interaction involved. It will show a higher level of detail than basic wireframes, accounting for every important element on the page. These might even incorporate specific content into the designs to give the client a better idea of how the page will flow. Sometimes I start off with a quick sketch to get my ideas down, but I then take these into a wireframing program (at Duo, we use Axure) to fully flesh out the idea and make them more presentable. Aside from the fact that I write like a third grader, using a program allows me to play around with my ideas, and adjust or build off my original sketches. These are perfect for most projects, especially if you do not have the budget or technology to make them interactive.
These are essentially High Fidelity wireframes that have functionality built in. Rather than just a static composition, these wireframes include working buttons, menus, animations, interactions, and responsive break points (they adjust the layout as you scale your browser, or view on a mobile device). In addition to this functionality, we like to annotate the entire prototype to indicate to the developers exactly how this thing should work as they are building it out. These are great for large scale projects with really complex interactions built in. At Duo, we like to focus on building these because they allow the client to get a real feel for the site, while also being more intuitive when it comes to development and design.
What isn't a Wireframe?
A wireframe is not a design. A wireframe is not your finished website. While your final site will be laid out in a similar fashion, and maybe even work in a similar fashion, this deliverable is definitely not what things will look like when we launch at the end of the project. This is part of the earlier stages of the project. Once these are approved, they will be designed and built, both of which also require approval for that final launch.
How Detailed are Wireframes?
Like I mentioned, it kind of depends on the project. We build our prototypes in varying degrees as well. At the very least, they will have basic interactions, menus, content, and more. I like to include icons and a sense of typography and spacing in mine.
We have also done some projects with a larger amount of detail. In a few instances, we have included color. While these might not be by the exact brand guidelines, they are a good way to differentiate the different elements of the comp before it is designed. It’s almost like a cue to the designer on how to handle the interaction.
Another prototype we built had more detail than just colors. It included multiple interactions, states that you could toggle on and off the page, movable elements, colors, imagery and more. It was not a final design by any means, but it was meant to show how the final design will work when it’s finished being built out. In this instance it was more of a sales tool than a deliverable to help progress a project.
How Do I Give Wireframe Feedback?
First, keep in mind this is not the final design or a strict representation of your brand. This will come in the next phase. What you should focus on is the actual content on the pages. It’s important to keep in mind who is using your site. So step into their shoes and think about what they want to know and how they will find it. Here are a few questions to think about:
- Will this experience as a whole meet the goals of the project?
- Does the general layout make sense?
- Do you like where all of the elements on the page are sitting and how they are organized?
- Is something of importance buried and needs to be more prominent?
- Do you think it is difficult to find something on the page?
- Did we miss something entirely?
Feel free to suggest moving things, add/remove features, reassess entire pages. The point of this exercise is to match up the goals of the project with how it will look and function in the end. Anything that relates to that is important to bring up. Just remember, it will look totally different once it is designed in full and all the content is added.
It’s also important to ask questions. If you do not understand how something works, we will make sure you do before you give approval to move forward. We can also work with you to add more detail to make sure you can see our vision, and confirm that it aligns with your organization’s.
It’s totally ok to ask for revisions before moving forward. We want to make sure everything works well. It’s super important to bring up any questions or concerns about the direction of the project now before we get to far into it.
After this, the designer will put a face on the bones of your site. This is when the questions of colors, spacing, fonts, brand guidelines, and overall style come into play. Once this is approved, the project will be build based off of the layout and functionality of the wireframes, as well as the style shown in the designs.
In the end, we do all this to make sure you love what we're building for you. Feel free to voice any questions or concerns as we work together!