Web Design Wireframes – Digital Marketing Madness

John Maher:  Hi, I’m John Maher. This is “Digital Marketing Madness.” This podcast is brought to you by McDougall Interactive. We’re an Internet marketing agency in Massachusetts. Today, my guest is Meghan Williams. Welcome, Meghan.

Meghan Williams:  Hi, John.

What is a wireframe?

John:  Today, we’re going to be discussing web design wireframes. Meghan, what is a website wireframe? What are they used for?

Meghan:  I think wireframes are a very broad category. Depending on who you’re talking to and the context, it could mean something different.

When you’re talking about a web design project, where you want to launch a new website, the wireframe refers to the rough outline of what the new home page or new interior page will look like when it’s built.

It often starts off as back-of-the-napkin, where you’re sketching it out in a Word document or just whatever paper’s laying around. You want to turn that into a digital file that you can edit over time. Ultimately, you’re going to be sending this to your designer, who then turns it into a polished, finished design.

The Purpose of a Website Wireframe

John:  The purpose of this is just to decide where the elements of the website are going to appear on the page.

Like, “Here’s where the top banner is going to be. Here’s where the navigation is going to be. Here’s where we’re going to have these three call to action buttons. Here’s where we’re going to put the video or the pictures on that. Maybe there’s a form that’s going to be on the home page. Here’s where that form is going to be. Is it going to be on the left side or the right side or the bottom or the top?”

I think what we see sometimes, as a web development firm, is that if we start at doing a design, even if we just make it a rough design, and we show that to the client, then, the tendency is for the client to start criticizing the color choices or, “This box has square corners instead of rounded corners”, or “I don’t like that font”, or “the text that you’ve put on here is not the text that I want.”

They start getting down into the weeds of those little decisions when, really, all you wanted to know was, “Is it OK if I do three boxes horizontally, instead of vertically?” By having colors and design elements, it muddies it up, and it makes it really hard for the client to just take a step back and look at just the layout.

Meghan:  I would also say, it can be hard on our end, as an agency. As creative people, designers, we want to go talk about what photos we’re going to use and the color scheme and the complicated design elements and how fun that part is.

We talked in another podcast about the web design and development process, how your design really has to flow from business goals.

A wireframe is a good way to direct that conversation, because early on, it focuses you on, “What are the most important elements of your home page or this page that you want your users to see first? What action do you want them to take when they land on that page? If they scroll all the way to the bottom, what action do you want them to take there?”

Just plug in the very basic element. Like you said, if there’s going to be a form here, there’s going to be a button here, there’s going to be a photo here. A stripped‑down wireframe is a good way to keep it focused on that.

John:  These are usability issues or user experience issues, not really design issues.

Meghan:  The cool thing about using some simple wireframing technology is you can build these out for as many pages on your website as you want. They’re quick to make. They don’t take a lot of time or effort, and you can move things around quickly.

For all the different kinds of interior pages you’re thinking about having, for what your blog’s going to look like, you can start mocking them all up and then really talk about the usability of the site, as a whole — how people will move through the site, and all that kind of stuff.

How To Create a Web Design Wireframe

John:  How do you create a wireframe? Maybe tell me a little bit more about how it fits into the overall web design process.

Meghan:  There are tons of tools out there. They all have all sorts of cool different functionality. It pays to weed through them and figure out, based on what kind of project you’re working on, how much functionality you need your wireframing tool to have.

Maybe depending on certain kinds of design elements that are going to be included, that the client already knows that they want, you might want to look into different tools. We can talk about my favorite tool in a minute. One thing I’ve found is important is to set expectations with the team, that what you’re working on is a wireframe. It’s not the final design.

There are very specific goals in what you’re trying to achieve here. When you have a conversation, you go back, you mock up a wireframe, and then, you sent it to them to take a look at, they should understand what they’re looking at is not anything close to what the final website’s going to be.

John:  It helps if you just keep it really simple, like a simple line drawing. It’s a white background with just black outlines of the elements.

That way, it’s really, really hard — as I said before, if you start including colors and design choices like that, it starts to become difficult to take that step back and look at it as just usability, user experience, the outline of where the elements are on the page.

By just keeping it really, really simple and just black and white, you can take that problem out of the equation.

Meghan:  Absolutely. A wireframe is very early on in your process. When you’ve had your initial conversations and thrown out a lot of ideas and got a feel for each other and the project, your next step is a wireframe. You don’t want to underestimate how basic it can really be. Just focus on the real essentials, the very, very beginning of your project.

You should not necessarily even be talking at all about which photographs you’re going to use on which page. Wireframing tools will let you drop in those photographs, and you can move them around and play with it before you get to the formal design stage. But very early on, as you say, you want it really black and white, straight up, just boxes.

Again, it is important for the client, for the people you’re working with to understand what they’re going to get out of a wireframe.

Using wireframes to Talk About Goals for Your Website

John:  The very first step of the web design process is really sitting down and talking about, “What are the elements that we want or need to include on the home page or an inner page?”

That might be based on what your goals are for the website, whether or not you’re trying to — are you trying to sell a product? Is it a lead generation tool? Is it just a brochure for your company?

You need to decide what your company goals are for the website, and then, what are the elements that you need, therefore, to include on the home page or an inner page? Once you’ve decided that, and what the user experience should be on the website, then you can go and do a wireframe or a few different versions of the wireframe and say, “What do we like best here?”

Meghan:  It’s really just about getting those ideas on paper and communicating an abstract business goal to some specific lines on a page that you can then use to communicate to a designer and then, ultimately, a developer so they can build those features.

Using Balsamiq for Wireframing

John:  You mentioned before that you have a favorite tool for doing wireframes. What is your favorite tool?

Meghan:  My favorite tool is Balsamiq. That’s B‑A‑L‑S‑A‑M‑I‑Q. You can go to balsamiq.com and check it out.

I’d never heard of it before I came to McDougall Interactive. You guys have used it here on a number of projects, and I’ve used it a number of times. The best part about it is it’s all the things that we were just talking about.

You can start a Balsamiq wireframe really, really simple, like you said. Just the black line, a couple black lines inside of that, placeholder text. It gets the point across that you’re focusing really on just the organization and the layout. Then, you can slowly add in other elements, like some photography, like some specific text.

You can make your features a little bit more complicated and add all kinds of little things. They have really specific icons for exactly what kind of form you’re going to have, what fields are going to be there and check boxes, radio buttons, and real specific stuff. You can take your wireframe from really basic to pretty advanced.

John:  They even have social media icons, and like you said, different buttons and things like that that you can include.

You’re almost doing a design in Balsamiq, using all of the buttons and little design elements that they have. You’re just dragging and dropping those onto the design, which, like you said, it makes it very easy to just move those elements around later.

Again, at the beginning, they’re black and white so that you’re not getting bogged down in those little details of colors and things. But as you start to make some decisions and say, “Yes, I want to have this picture here, this picture here,” you can actually drop those in. It starts to look a little bit more like a web design.

Then, when you hand that off to an actual web designer, then what you’re going to get back is probably going to be much, much closer to what you wanted in a final website than you would have if you’d just started at the beginning and said, “Hey, web designer, here’s our logo. Design us a website.” You could end up with just about anything.

By doing this first step of creating a wireframe, you’re going to make that first round of design of the website actually come out much, much closer to what the final design is going to be.

Meghan:  It gives you time, and it gives you some tools to focus your conversation and get everyone’s opinion out, get everyone to weigh in on each little detail.

You can really see the progression from the real basic Balsamiq wireframe at the beginning of your web design project, that’s just black lines, and then slowly, new elements are added.

Then, you hand that off to a designer, and at that point, you get to focus on things like the color scheme and the fonts and the more abstract kind of look and feel and the details. That’s the appropriate time in the web development process to be focusing on that, not at the beginning, when you’re trying to work out all the…

John:  Again, it’s very easy, if you do that actual web design at the beginning, it’s very easy to get bogged down in those little decisions of the colors and those types of elements. You might build the website and say, “Wait a minute. Weren’t we going to put a form on the home page?”

Meghan:  Right. “How are we promoting our blog?”

John:  Those are the decisions that you need to make first, not last, because then, you have to go back and redesign the whole website.

Now, you’re starting over from scratch again. It’s much better to take this first step, create a good wireframe, know what elements you want on your website, and then that way, that final web design comes out much better.

Meghan:  Exactly. I’ve had a lot of success with Balsamiq. I’ve had some fun working with that tool. I recommend it.

John:  Awesome. Thanks again for speaking me with me, Meghan. I appreciate it.

Meghan:  Thank you for having me.

John:  For more information about digital marketing, visit mcdougallinteractive.com and subscribe to this podcast on iTunes. Thanks for listening. I’m John Maher. See you next time on Digital Marketing Madness.