What is Wireframing in Web Design & Why You Should Consider It | EP 518

What is Wireframing in Web Design & Why You Should Consider It

1. The only tools you need is piece of paper and a pencil. 01:28
2. Lets you focus on layout/structure and keeping the asthetic design separate 02:09
3. Let’s you focus on the user flow (customer journey) through the page and entire site and how it leads the user to the goal 02:53

Read the full episode transcript below:

00:26 David Blackmon: Hey everybody. Welcome to another episode of WP the Podcast brought to you by WP Gears. I’m David Blackmon.

00:35 Tim Strifler: And I’m Tim Strifler.

00:36 David Blackmon: Today we’re gonna talk about what wire framing is in web design, and why you might want to consider doing it. Tim, why don’t you get us kicked us today.

00:46 Tim Strifler: Yeah, absolutely. Wire framing is … the word kinda describes it. It’s basically a wired frame of the site, so rather than diving straight into WordPress, and diving into your Page Builder, or whatever you use, you basically have some other method of designing the site. We’re gonna go through some of the purposes here. It doesn’t look exactly like the site. It’s essentially a skeleton outline, kind of bare bones, version of the site, so that you can focus on some different aspects before you get to the aesthetic design with the colors, and the images, and stuff like that.

01:28 Tim Strifler: There’s a lot of different tools out there. Usually, what I use, I have a few different wire framing tools but I found that I tried to be too much of a perfectionist when that’s not the purpose of it, and so what I found most effective is a piece of paper and a pencil, or actually a pen that way I can’t erase. That makes me focus on just getting it down, and then not trying to make it look amazing.

01:53 David Blackmon: Awesome. Was that a number one point Tim there that you kinda covered?

01:59 Tim Strifler: Not really. I intentionally didn’t get into that so that we could keep those points separate.

02:05 David Blackmon: I’m gonna let you take the first one, and I’m gonna take the second one.

02:09 Tim Strifler: To answer the question of the episode title, or the second part, if the first one is what is, and then the second one is why you should consider it, well, it lets you focus on layout and structure while keeping the aesthetic design separate, and so that way you can figure out, okay, I want this to go here. I know I want a hero image here. I want a call to action here.

02:32 Tim Strifler: It really lets you focus on those aspects which when it comes down to it that’s the most aspect is, is how the user’s gonna see the content, and how they’re gonna be guided through the page. It kinda separates out the aesthetic design of how it looks visually from a aesthetic standpoint, and lets you focus on layout structure.

02:53 David Blackmon: That also helps your designers to put together something really nice. Trust me, they love it when they have direction to build these types of things. The second point that we want to make is it allows you to focus on user flow, the customer journey. Site architecture is extremely important, and I realize this mainly because we have a product company.

03:19 David Blackmon: I used to think a beautiful website was the most important thing. When I first started building websites that’s what I wanted to show customers and stuff was like, wow, look at this awesome looking thing that I built, and stuff. What I’ve learned over the years is that the most important thing is, what do you want the user to do when they come to your website?

03:41 David Blackmon: Building that out and focusing on that customer journey, and how they navigate the website is huge, way more important than my beautiful website that I just built, come check it out. At the end of the day, it’s all about the dollar dollar bills y’all. Businesses want to make money. They don’t care that visitors come to their site, and think they have a nice looking website. They’re in business for a reason. They want to convert them into customers.

04:18 David Blackmon: Wire framing can help you do that, because it’ll allow you to set the structure of that site and stuff, and again, then you can turn it over to your designers, and if you have talented enough designers they’re gonna make your mock-ups and stuff look absolutely amazing.

04:35 Tim Strifler: We talked about what David was just saying a few episodes back in Episode 510. Your clients don’t want a pretty website they want this instead. That’s something that we teach a lot in our course, the Divvy Business Expert Course, is figuring out what your clients goals are, and then building the site around that, as David mentioned, and then the wire framing ties directly into that, because you can focus on accomplishing the goals rather than just focusing on it, making it look pretty, which might impress them for a minute, but it’s not gonna impress them when their website’s not doing anything for them later done the road.

05:11 David Blackmon: Impress them for a hot minute, Tim? I don’t know why that popped into my head. I never, ever, use that phrase and I now can say that I’ve used it, checked it off my bucket list.

05:23 Tim Strifler: There we go.

05:24 David Blackmon: Tomorrow we’ve got another great topic, why do some developers hate WordPress? Sounds terrible, but you’ll need to tune in to find out. Tim, until tomorrow, we’ll see you then.

05:37 Tim Strifler: Take care. Bye-bye.