Pixel precision of wireframes?

Question

I was asked to design a series of interactive wireframes using Axure for client who wanted to see how we would approach a design process. I made the designs in grey scale in relatively medium fidelity but I was strongly recommended by some other designers that I should make the wireframes as pixel perfect as possible (even though we are using placeholders and no color). I am a little confused about this since the concept of wireframes is to quickly show a proof of concept and to drive the thought process.

I do understand a clean and well designed wireframe is pleasing to the eyes and might have a more positive response,but the challenge is that making it so pixel perfect\precise involves as much time as creating a visual design and I dont want to get into the trap of users thinking that this is the final shell upon which color has just be applied and then the design is complete.

So my question is that is there any real advantage in making wireframes pixel perfect and where are those specific cases.

I did look at the questions How much detail in wireframes? and Using color in wireframes…is this a “no no”? but they dont answer the question I have.

Edit: Well what I meant by pixel perfect was like perfect alignment,ensuring the grid contents have exact spacing on each side and we are using the exact icon sizes which would be used in a mobile space

Answer 1

In my opinion having wireframes pixel imperfect is definitely the way to go. I prefer a sketchy style for two reasons:

1. It drives my inspiration. By not worrying about creating perfectly looking wireframes it's easier to test different iterations and I'm much more able work out creative approaches than when creating strict and perfectly aligned wireframes.
2. Usually when clients see pixel perfect wireframes they judge it as if it's a finished design. By using a sketchy style it's much more clear that this is a conceptual work in progress. You can't imagine how often I have clients asking why I didn't use any color.

By the way, a really great tool to create sketchy wireframes is Balsamiq Mockups.

Answer 2

I'd argue that a high degree of polish in wireframes--and certainly pixel perfect alignment falls into this--is an indication to an experienced client that you're wasting their money.

Remember, wireframes are a learned language; they're a shorthand for communicating an idea, and they only work when everyone in the audience is fluent in that language. They're the equivalent of pseudocode in that they purposely carry with them the context that "this isn't finished and I want to make sure we all understand that." They are the absolute minimum amount of work required to convey an idea visually.

Pixel perfect alignment confuses that message. It says to your client that this is somehow more than a wireframe, and and when they figure out that isn't the case an experienced client will (and should) be wondering how much of their money you burned getting those lines perfectly lined up.

Your colleagues are wrong. There is no point producing a wireframe with anything but the lowest level of fidelity. If they're worried about the level of experience of some of the stakeholders in the audience (as they should be) their focus should be on identifying them and determining what design artifacts will be appropriate for those folks.

Edit: good discussion here: advice for demoing wireframes to clients

Answer 3

Don't do pixelperfect wireframes if:

1. you have just started to figure out how the web site should behave. Iterations rocks.
2. the wireframes only going to be used internally and to get your idea across I just throw stuff together on a piece of paper but if I'm going to present and deliver wireframes to the client I would put more effort on them.

Do pixelperfect wireframes if:

1. your wireframe tool allows you to work fast (like it supports grids and autoaligning objects). Otherwise don't sweat it. And you don't absolutley don't start with fiddling around with aligning boxes.

2. you are going to test the wireframes as a prototype with users. Often it's better if the wireframes look aligned and well designed because a rought sketch with bad contrasts etc could create usability problems that wouldn't happen if the test participant were trying to use something that looked like an almost finished site.

3. you really need to figure out if real content will fit into your solution. For example you might think that a product category page would work based on you wireframe but in reality there is only room for 4 columns instead of your version with five. (Yeah, this isn't really depending on pixel perfection, it's more about proportions)

Also

There's a common argument against polished wireframes that goes something like it would confuse a client into thinking that this is what the web site would look at. Well, I've been doing this job for over 12 years I've never once met a client that couldn't understand the difference between a greyish wireframe and a design comp.

Yes, there is a chance that you are wasting a clients budget on overdesigning a wireframe but as you gather, creating and modifying wireframe components over the years, after time it takes no more time designing a top notch looking wireframe instead of a sloppy one.

Finally, since most clients don't really understand a lot of the work we do (digital media seems both magical and scary to a lot of people) they will judge the quality of our work largely upon how we behave, how our office looks like, how we present our work and how our the deliveries looks like. A professional looking wireframes make you look more competent and trustworthy. And that's both important for yourself and your agency.

Answer 4

I was strongly recommended by some other designers that I should make the wireframes as pixel perfect as possible

These are designers that don't understand what wireframes are for--or how the web works in general.

Turning Axure into a visual design tool is a nightmare for everyone. It's not a visual design tool. It's meant to be an iterative prototyping tool and to make doing things iteratively sane, one needs to keep it as simple as humanly possible.

I encourage people to turn on the 'sketch' mode in Axure...where it turns everything into wiggly lines and uses a handwritten font. This helps emphasize the fact that this is not the visual design and allows you to better focus clients on reviewing flows and interactions.

Also reminder your designers that the web isn't pixel perfect to begin with. ;)

Now, is there an advantage to making them pixel perfect?

Yes, actually! The advantage is that your visual designers don't have to think very hard about their job. That and the client gets to see really pretty screens which makes them happy.

But, alas, there are huge drawbacks to both of those. First of all, visual designers should be bringing their own talents, skills and experience to the table. What is in the wireframes may very well change based on the skills of the visual designers. So they wanting to be 'locked in' to a pixel perfect wireframe can lead to stagnation.

As for the client, visual design will trump all other aspects of design thinking. Once a client starts seeing icons and colors, that is the ONLY thing they will focus on--often to the detriment of the overall user experience. So you want to keep that process entirely separate as much as you can.

Answer 5

There are definitely cases where "prettier" wireframes are more favorably judged by clients. After reading about aesthetic usability effects I have changed the way I wireframe and try to do more quick hand drawn sketches and less perfectly aligned stuff in Omnigraffle or Illustrator. This helps to keep focus on the main idea or concept. It is also easier for clients to give feedback on wireframes/design if they do not feel finished.