You've been briefed. You've sat down with the client and discussed goals of the project. You've done your research, you understand your target audience.
You wireframe. They come out beautiful. Shit, you even add animated prototypes because you're a go-getter, awesome job champ. It comes time to present your wires and you couldn't be any more confident. And then the client says one of the following...
"It's really boxy."
"Why is it so gray? Those aren't our brand colors"
"I don't like that copy."
This happens. Even if you drop the "wireframes are the blueprint to your dream home metaphor." Clients can still misunderstand what wireframes are.
You need to remember that your clients aren't designers. Even if they SAY they know what wireframes are, chances are they've just heard the phrase tossed around a lot in meetings right next to "rapid prototyping" and "Digital Transformation".
Starting a project with a new client, it's smart to set expectations early on of what wireframes are, why they're needed, and what they can expect. The types of wireframes you create are different for every project. Here are a few types of wireframes with their advantages and disadvantages.
Lo-Fi (Low Fidelity) wireframes. These could range from quick sketches on paper to just bulleted lists to show content hierarchy. Lo-fi wires are best when you need to move fast. They also work well when you don't have all the pieces, like copy.
Early wireframes for CamelBak.com redesign
If you decide to do lo-fi wires, such as sketching them out on paper or an iPad, be sure to make that clear to your client. Also, find out if there are multiple rounds of wireframes in the project scope, as this may signify if lo-fi wires aren't the way to go.
Recently I decided to sketch wireframes for a project on my iPad. This was good in the sense that a client understood that this isn't designed, and it looks better than a bunch of boxes and lines on a piece of paper and I was able to do the initial round fast, but let me tell you how this has backfired on me because I didn't account for doing multiple rounds of wireframing.
Wireframes via iPad
See, I took the sketches from my iPad and added captions in photoshop. I did this because my handwriting looks like it's done with an etch-a-sketch, or like you sat on your hand until it fell asleep and then tried to write with it...That's my handwriting. Anyway, this requires more effort and time for something that started as "lo-fi".
First, one stakeholder on the client-side understood I was showing them wires and not design, but they really didn't know how to react to these "lo-fi" wires which in turn led to no reaction. And that's not good. It lessens the perceived value they expect from you.
Second, getting revisions to these wires was way harder to execute than I thought. I thought I would be able just to edit/add to the wireframes on my iPad, which I was, but then I had to re-export them to a PDF, open them up in photoshop and edit the captions and then I would export them into Invision freehand and a new PDF because the client was a little old school and requested a PDF version. That's a lot when the whole point of lo-fi wires was to cut down on time. In hindsight, any wireframe deliverable that gets any number round of revisions should probably be in the Hi-fi wire camp.
High Fidelity wireframes, those big beautiful grey boxes that end up on Dribbble and UI/UX inspiration Instagram accounts. These guys are great, but they take time. You're thinking about a lot more than just how you're going to structure the content. You're thinking about interactions, menus, modals, how a user gets from A to B to C. Yes, you think about this in lo-fi wires as well, but here it's much more planned out and visual. Hi-fi wires have a lot more value to you and your team in the life-span of the project.
Check out the Sperry's Cloud Collection Wireframes
A benefit of doing hi-fi wires is the ability to start prototyping earlier. You're able to link together comps with tools like Invision and even throw together some UX animation with an app like principle. I know what you're going to say, "But you can do paper prototyping." All right sure.
I don't know about you, but I'm not going to origami myself a modal window anytime soon. I've found that whenever I do really good Hi-Fi wires my design isn't much different, in a lot of cases the design phase is just adding images and colors to the wireframes.
Some clients get it, and some think your hi-fi wires are the design and that leads to them getting hung up on a lot of things like copy, white space, font sizes, ect...
So how do we combine the understanding a client gets with lo-fi wires with the polish and project value of hi-fi wires?
Lo-fi + Hi-fi = YEAHHH DUDE!
Our Creative Director at Digital Surgeons, Mark Myrick, created this slide. We show it to clients before we present wireframes. It has performed miracles. It's like watching a baby deer realize how to use their legs for the first time. Clients see this slide and they just suddenly get it.
So do both. We usually start with lo-fi sketched wires on paper, or on an iPad. We sketch these knowing we're going to destroy them. So we do them fast, and fast is defined based on the size of the site. For CamelBak we sketched all their wires in about 2 days before moving to hi-fi. For The World of Sperry we sketched lo-fi wires in 1 day.
Inital wireframe sketches with team feedback
After lo-fi wires are sketched we hang them up and as a team go through the experience, adding sticky notes, scribbling sections out, sketching something new on a scrap of paper and taping it over another sketch. This allows for the whole team to contribute and get everyone on the same page sooner rather than later which can happen doing just hi-fi wires.
Doing this combination of Lo-fi +Hi-fi wires we're able to get clients on board quickly with setting expectations and helping them really understand what exactly wireframes are. We're also able to move a lot smoother as a team with everyone giving input early during the sketching phase, and when we move to hi-fi wires the client sees the progression from sketches to prototypes and gets the process better, and when they have revisions it's much easier to make changes to the hi-fi wireframes.
Talking about tiny gray boxes so much is weird.
So here's the TL;DR: Bring your client up to speed on wireframing. Don't drop metaphors. Show examples. Make it clear the difference between lo-fi wires and hi-fi wires and when it's right to do them. If your time is short and you only have 1 round of wires sketching them might work best, but if there are multiple rounds hi-fi wires will save you a lot of frustration in the long run. Do the sketch wires with your team. Everyone can draw a box. Carry that over to hi-fi wires, and most importantly show it all to the client. Show them the process. They'll appreciate the transparency.