Wireframing

Cleaning up the roughs

When sketches make the evolutionary leap in fidelity, they take on characteristics of the final design — even if that design hasn't been determined yet.

Updated September 11, 2019

Every step in the quest to provide structure to our information is an exercise in restraint.

As you already know, humans are not particularly well-known for following plans or being cautious. It's simply not what we do well.

That's why it is not uncommon for people to assume that UX Design begins with wireframing. To skip all the steps that have come before would leave you with literally nothing of substance to work with. The common assumption is that digital products are just figuring out where the boxes go — which is ludicrous.

None of this is said to belittle the art of wireframing, as it does play a crucial role in the development of your project. This is the moment when your work migrates from paper sketches into the computer.

Two big things occur when our work becomes digital.

First, your work becomes easier and faster to share, both internally and externally.

Second, the investment of time and resources begin to add weight to the project. It's important to note that this weight has a tendency to move around. Sometimes this weight adds needed momentum, but it also can produce noticiable drag on your progress.

Fast-and-slow Source: newpragmatic.com

We perform a lot of research prior to committing to any form of visual design because of the weight that projects can begin to accumulate once they leap into a visual form. When people see these early versions, they often anchor to these rough visual solution being the only solution because they are desperately wanting to make it to the finish line.

If you have any questions about the experience of the team or client you are working with, it will be exposed here. Veterans of product design will not get overtly excited about a set of wireframes, aside from being curious about the possible directions you are considering. People with little experience will jump around like puppies in the window of a pet shop, anticipating the ability to quickly push the project into the hands of users.

Regardless of how long you've been working in product design you can this issue by always educating clients and co-workers by properly setting expectations. In these conversations, you'll often be pressed for unreasonable deadline commitments, and you should stick to one rule. Simply never overpromise.

This is quite different from the far more common business philosophy of 'underpromise and overdeliver' where you are always trying to manage expectations. By committing to never overpromise, your goal is to avoid backing yourself into a corner rather than focusing eneregy on expectation management. If you don't overpromise, you can't underdeliver — therefore expectations manage themselves.

Let's shift our focus

Getting the most out of your wireframes

The sketches you made during your initial exploration were rough for a reason. Speed of idea generation was the goal. On the other hand, wireframes provide a base for all the visual design work that will be done later. While these wireframes will be a level of fidelity higher, your work will still relatively simple. This is all about knowing how much time and effort to invest. There are still a lot of updates that can happen to the work, so moving it forward without overinvesting your time is the target.

Here are a few basic rules to guide your effort as you elevate the work .

Real sizes

Fundamentals represented the basic elements that must be correctly applied for the subsequent work to matter. Creating your wireframes at the right size reflects this standard. The rest of the guidelines below really won't matter if your wireframes aren't created at the correct size.

Mobile and tablet sizes work within a range, but tools like Sketch and Figma allow you to control how the elements you create respond to a change in overall size. The same can be said for desktop wireframes, as you typically will have a grid for managing your content that will assist in controlling range.

Getting the project sizes correct will make it far easier to update your work as the fidelity increases. Failure to meet this mark will make your prototypes difficult to construct, which negatively impacts your user tests. All this means you'll likely start from scratch as you move further into the visual design of the project.

So take the time to get this right.

Real copy

The copy you created helped you roughly sketch out your initial ideas for the project design. Simple things like knowing how many blocks of content you need for a particular section adds reality to your work. Now we're leveling that up and bringing in the content that you created.

No images

No color

As if there is but a few minor details needed for your wireframe to leap to life.

you're fighting against the tendency of

co-workers and clients will begin to envision the working pro

This content will be released on September 18th.

///

Up next Prototyping

New Pragmatic’s Intro to Product Design and UX Design courses are now open for enrollment — but don't wait! Space is limited.

Sign Up Now