What Are Wireframes and Why Do I Need to See Them?
As a deliverable in the web development process, wireframes can be easily misunderstood. But prepare to make fast friends with wireframes — they have your best interests at heart.
First off, what is a wireframe?
A wireframe is a way to display the structure and hierarchy of a webpage using basic shapes, lines and, in our case, actual copy. There isn’t much design in a wireframe, just various shades of gray. (And if we’re feeling crazy you may see a star standing in for your custom icon.) But in large part, we don’t want design to distract from the purpose of the wireframe.
Here are three things you should know so that the next time you reach this milestone of your project you better understand its importance and don’t just see a page of shapes.
1. Wireframes are fundamental to user experience (UX)
Web design is undoubtedly a creative endeavor, but it’s not one in which we start with a blank canvas and throw things together on a whim, nor should it be. In order to address your project’s specific needs, we need a solid game plan.
Our process begins with content, and once that’s approved it becomes the backbone of our efforts. As Creative Director, my job is to organize the copy, call to actions, and functions of any given page that leads the user towards your desired goal.
If I attempted this task without visualizing it on paper or the screen, I would lose a valuable opportunity. It’s like when people say, “Now that I’m saying this out loud, I can see why it doesn’t make sense.”
Similarly, as I wireframe I can see where my ideas miss the mark.
2. Wireframes can be a tricky deliverable
When we reach the design phase of a project, clients are excited to see color, fonts and interesting features. So, it can be understandably underwhelming when they feast their eyes on what we call the skeleton of the site.
At this point, clear communication is crucial and after a brief explanation of the purpose and importance of the wireframe (which now you’ll be well-versed in), clients have faith in our process. We don’t expect our clients to visualize a finished product at this stage but if we can agree on the relative location of headlines, body copy, photos/videos, forms, etc. we can move onto the fun stuff with confidence.
Realistically, there are times when a client may struggle with a wireframe but this is where discernment on our part is crucial, and this only comes from experience. We know when it’s time to step away from the wireframe and towards Photoshop because the last thing we want to do at this stage is lose ourselves in edits on alignment, precise placement and color.
The wireframe will never give us this precision and it’s not meant to. Once we’ve established trust in our partnership, it’s okay to move onto the next phase even if you’re not 100% sold on the way that header looks.
3. Wireframes are a deadline’s best friend
Another benefit of a partnership built on trust is that we can move much faster. After a homepage wireframe and the subsequent homepage design is approved, our developers can take the visual cues from the homepage and pair them with internal page wireframes to develop the rest of the site.
The idea is that the client then approves each page as it appears on a development site. Quick side note: A development site is online, so while you can access it, it’s password protected so no one else can. This is far more efficient than designing each page in Photoshop and going through changes as our deadline inches closer.
If you’re wondering when your edits materialize — fret not, there is plenty of room for revisions once a site is in the browser. Because we spent the time squaring away the page structure in our wireframes, we can make aesthetic changes to things like fonts, colors, images, etc. in real time. We have even made changes while on the phone with a client and asked them to refresh to see if they like it.
Hopefully, these points have left you with warm fuzzies for wireframes. At the very least you’ve gained some insight as to the aim and importance of this milestone and can appreciate what an important phase this is for your next website.
