Do you wireframe to exact size? [duplicate]

Question

This question already has an answer here:

• Pixel precision of wireframes? 5 answers

Looking for your steer on best practice for wireframes. In the past I've never wireframed to a particular canvas size or utilised a grid. This is usually because a designer knows the sizes they are designing to and can see clearly from my wireframes the hierarchy. I recently met a UX'er who insisted using a grid and designing to actual sizes of elements on the page? Should I be doing the same thing? I don't even know how a grid works...

Answer 1

It depends on what the wireframes are for.

If the wireframes are merely for exploring ideas, then you absolutely shouldn't worry about exact sizes; doing so just takes extra work.

If the wireframes are being used as a precise specification for page layout, then it depends on your particular relationship with your visual designers. Personally, I think pixel-perfection falls out of scope of a UXer's job (defining the user experience), so the visual designer should be doing it. But, organizations vary, and sometimes the UX people are more closely tied to the visual design process.

The key is to ask yourself: does the extra work yield enough added value to be justified?

Answer 2

If I'm working on a desktop website, no. I try to be aware of a general window size (~1024px usually) but otherwise I don't get picky about exact sizes or grid layout beyond general neatness. As long as I'm communicating the general relationships and hierarchy as you say, it's not a big deal.

But for mobile work, I'm a lot more careful about sizing because the space constraints are so much more important. For sketching this is easy, I can mark out space on the page that matches the screen size and then everything I draw is "true to size," or else I use the gridded sketch pads from UIstencils. When moving to digital wireframes, I always work in a canvas with a 1:1 relationship between pixels on the canvas and pixels on the final device and that my touch targets meet minimum sizes and spacing, otherwise I might create something that turns out too difficult to use on the final device.

Answer 3

I work for social games and it becomes quite necessary to use accurate wire-frames that contain in a border or canvas since they have to be replicated later into the game-play window to be used as popups and other GUI designs.

It actually helps a lot working with a canvas in mind and then layout the wireframe as per the size. Sometimes the designer works on mockups that would not be in actual size. His representations can even fool the producers or managers to imagine something different as to what the final outcome might be.

This is where UX designers present a real scale wireframe to showcase the upcoming fair design that would follow after many iterations.