Fortunately, like all skills, it can be learned and honed. This tutorial will point you in the right direction.

What is wireframing?

Wireframing, in the context of user experience design, is the act of creating user interface wireframes.

Michael Angeles, on his design blog “Konigi,” has one of the best descriptions of a wireframe out there (emphasis mine):

“A wireframe is a schematic or other low-fidelity rendering of a computer interface, intended to primarily demonstrate functionality, features, content, and user flow without explicitly specifying the visual design of a product….

“Wireframes are usually rendered in software, but are also created as works on paper or on other ephemeral materials, e.g. white boards. Wireframes are meant to be used as rough representations of interface ideas that can be quickly discarded and iterated upon until design solutions are selected.”

Wireframing is not the same as prototyping

Wireframing as a practice has more in common with sketching than prototyping, especially in the first phase (which I’ll describe below). A prototype, on the other hand, while also not a customer-facing product, is intended to demonstrate realistic interface designs and interactions, often for usability testing and/or client presentations.

Unlike wireframes, prototypes often look and feel like the final product, even when they are not fully functional or built with code that will eventually be used in the product. (“Click-through” wireframes can be used as early-stage prototypes, but that is not their main purpose.)

The article “Why wireframes are essential for web design” likens wireframing to writing an outline in a document. The author reasons: “You’re starting to make design decisions and get a feel for how this site will come together before committing serious time to building anything.”

These concepts are important to keep in mind while creating wireframes.

The two phases of wireframing

Defining wireframing as simply the process of creating a wireframe sells it short. As UX designers know, it’s not the tool that people want, it’s what it does for them that matters.

A wireframe is a tool. Successful wireframing is the practice of using wireframes to solve real problems.

The first problem that wireframing can answer is “what are some ways our product can help our customers accomplish their goals?” (Note that this is an open-ended question, which is preferred, as opposed to something more constraining, like “I need to design the export to PDF feature.”)

The second problem that wireframing addresses is “how do I know this solution will work?” This is where the ability of wireframing to elicit helpful feedback and diagnose problems early really shines.

These problems can be divided up into two distinct phases: the ideation phase and the validation phase.

The ideation phase

The first problem, trying to figure out how your product can help customers accomplish their goals, is addressed in the creative ideation phase of the wireframing process. This is where you generate as many ideas as possible in order to iterate toward better and better solutions.

The ideation phase is one of the few places where quantity matters as much (or more than) quality. The ability to generate multiple ideas and variations on a single idea allows you to see the faults and highlights of each. The more designs you put down on the page, the more individual ideas you have to choose from. The root of “creative,” after all, is “create”; that’s the strategy here.

A helpful way to think about this phase is to flip convention around. Focusing on creating only good ideas may restrict you; instead, try to create as many bad ideas as possible.  This will remove the creative block and free you up to just produce. You won’t get to “aha!” without going through “oh, no!”

An ideation phase walkthrough

A good way to demonstrate what this phase looks like is to show an example. Here is a series of wireframes that I created in about 25 minutes using Balsamiq Mockups (sped up 4x). I gave myself the challenge to design a to-do list app for a mobile device (quite original, I know).

Caveat: I did no preparation beforehand (not recommended) and don’t consider it “finished” even by ideation phase standards, but it should give an idea of the process I follow.

Here are a few screenshots from the video:

Tips for the ideation phase

1. Don’t refine or dive too deep too quickly. Get messy. Add, add, add. Subtract later.
2. Don’t judge your ideas before putting them on the page. Create first, reflect later.
3. Learn to think separately about structure, layout, content, and functionality (see “How to Create Wireframes That Wow” for more info)
4. Practice working with different levels of detail until you find “just the right amount of detail, and no more.”

Read more practical tips for “UX sketching” that also apply to wireframing.

The validation phase

The second problem, determining whether your proposed solution will be successful, resides in the validation phase of the wireframing process.

The ideation phase includes a small-scale, internal validation phase, where you, the designer, attempt to validate your solutions on your own. But, whatever your role, you are lacking at least some information and knowledge required to build the best solution. You may be missing essential information about your customer, or the limitations of the technology, or some market segment data. In any case, to refine and optimise your solution, you need involvement from other stakeholders.

Showing your wireframes allows others to help validate and improve your ideas.

The validation phase shouldn’t be thought of as the place to get “sign off” or approval to start building right away. If you’ve done it right, your wireframes should invite conversation. If they look too polished and “final” you may not get very helpful feedback. Wireframes should communicate “here’s what I’m thinking…” when you show them, not “this is what we’re going to build.”

Assume that the people who you are showing your wireframes to have knowledge that can help you make them better. Your job is to get it out of them.

You don’t need to show all your ideas during the validation phase. Here’s where you can narrow down and focus on the better ones. That said, it’s perfectly acceptable to show variations on an idea or even different directions completely. This reinforces the point that wireframes are a conversation starter, not a finished product. You may want to keep a few alternate ideas in your back pocket anyway in case your preferred ones don’t go over well.

In this phase, it’s important to think of your wireframes as communication artifacts. Their job is to help other people understand your ideas. Visuals are very effective for conveying ideas, which is the true power of wireframes.

Tips for the validation phase

1. Show a variety of ideas. This helps move the conversation forward (e.g., “I like A more than B”) and also proves that you put thought into them.
2. Prepare your wireframes for viewing. Take some time to clean them up a bit. Examples: Link them together to help tell the story; Use a more professional “skin” (depending on the audience).
3. Use a presentation mode (or similar) to show only the wireframes without the editor around them.
4. Don’t let the wireframe do all the talking. Supplement missing details with your own words rather than trying to let the wireframe tell the whole story.
5. Add annotations as needed for later viewing and sharing (which can be turned off for presenting in some programs).

You can find more suggestions in “Tips for Presenting Your Wireframes.”

Learning from the process

At the beginning of this article, I said that wireframing was a skill that could be improved over time. There are two ways to do this that go hand-in-hand.

The first is practice. The more you do it, the better you’ll get. Practice helps you reduce your ineffective effort and increase your fruitful work.

The second and most important way to improve in both phases is to consciously integrate comments from the validation phase and feed it back into your ideation phase next time. You’ll learn a lot about how to make your ideas clearer by showing them to others and getting their feedback, and you should put it to good use.

As you practice, try to apply the same loop of iterating and improving your design ideas to your wireframing process as a whole. Just as your design will improve by going through these phases, your wireframing skills will too! Keep the circle of feedback and refinement going.

What’s the best advice you’ve heard for creating wireframes? Let us know in the comments!

The post Wireframing for beginners appeared first on UX Mastery.

Here you are, fresh from a UX education, armed with a full complement of design tools and techniques. These will undoubtedly help you in your career. But, when you arrive at your first UX job you’ll find conditions a little different than they were in the classroom. You’ll soon see that the skills that got you ahead in school aren’t the same as the skills you’ll need at the office.

The classroom vs. the real world

Processes in the real world

In the classroom the process is dictated, but in the real world it’s the result that’s emphasized, with less regard for how you get there.

For example, in school you might be assigned to perform a heuristic evaluation or design a low-fidelity prototype. But on the job you’ll be tasked with answering questions that can be approached a number of ways. It’s up to you to decide how to proceed.

Deliverables in the real world

Source

In school, your deliverable is what you design. In the real world, it’s what ships to the customer that matters. There’s a big gap between those two and it takes a whole new set of skills to bridge it. More on this later in the post.

End goals in the real world

As a UX design student your goal is to design the best possible experience. In the real world, your ultimate goal is to help the company make money. Sometimes that comes from a great user experience, but other times it’s just doing whatever it takes to land a high-paying customer.

Assignments in the real world

The types of assignments you get in school are generally not the kind you get in the real world. In school, you were probably asked to design a brand new product or possibly redesign an existing one. But, as I mentioned above, when the main goal is profit, assignments usually involve adding new features to either get new customers or keep existing ones.

The trouble for UX designers is that adding new features often decreases the usability of a product. Your greatest, and most common, challenge will be to add features without negatively impacting usability.

Very rarely will you be asked to redesign an existing product solely to make it more usable. Redesigns only come about when an existing product can no longer accommodate new features (and thus needs to be redesigned so that it can).

“Doing the design isn’t the hard part…”

Before diving into how to succeed in the real world of UX, I’d like to share a story about real world UX challenges.

Take a look at this email sent from a UX designer at American Airlines, in response to a designer who criticized the AA.com website and offered up a redesign (emphasis mine).

The group running AA.com consists of at least 200 people spread out amongst many different groups, including, for example, QA, product planning, business analysis, code development, site operations, project planning, and user experience. We have a lot of people touching the site, and a lot more with their own vested interests in how it presents its content and functionality… AA.com is a huge corporate undertaking with a lot of tentacles that reach into a lot of interests…

Simply doing a home page redesign is a piece of cake. You want a redesign? I’ve got six of them in my archives. It only takes a few hours to put together a really good-looking one, as you demonstrated in your post. But doing the design isn’t the hard part, and I think that’s what a lot of outsiders don’t really get.

At another point he describes the design process as a “slog through endless review and approval cycles with their requisite revisions and re-reviews.”

Ugh.

Yet anyone who works in a large organization can identify with the cultural roadblocks like those described above. This should not deter you from your chosen career or lessen your enthusiasm.

The takeaway from this story is that Real World UX Success = Design + Delivery.

My own experience is similar. When I began my UX career I expected to spend my time roughly like this:

But what I learned is that, to be effective, it ends up looking more like this:

Read on for some strategies I learned that can help you avoid some rookie mistakes and act like a pro.

How to succeed in the real world

Many of the skills you’ll need to succeed as a UX designer in the real world are “soft skills.” Here are a few specific ones to help you get a leg up.

Tell a story, connect the dots

“Designers need to be able to articulate the value of a great user experience and frame design in the context of business goals.”
– Aarron Walter

Part of your job as a designer is to make a case for your work. Great designers need to know how to tell stories. Learn to talk in terms of how much happier users will be with your design. And to really knock it out of the park, work with the developers to craft a story about how the product can get from where it is to where you want it to go, so that they don’t feel left out of the process.

Small wins add up

At the end of the day (and your career, for that matter), you’ll be judged by what impact you had on the product, not what you designed in your cubicle. A fantastic design that never ships isn’t worth all that much in the real world.

A good way to get started is to focus on small wins. These serve two purposes:

1. They have a better chance of making their way into the product.
2. They build up a kind of credit history for you. This shows your colleagues and supervisors that you can get things done. In the real world that’s what makes you valuable.

Consistency is good example. Making things consistent across the UI is an easy case to make and it often simplifies the code. It’s not sexy, but it’s good for the product and the customer. And it’s hard to argue against.

These small wins are like taking out a credit card just to show the banks that you can pay it off each month. Each time one of your ideas gets into the product, however small, it’s like paying off your monthly balance. Think evolution over revolution to keep your design rhythm going.

Know that you’re building up that credit for a reason. Just like when you’re ready to buy that first car. You’ve paid your bill every month for that moment when you’re ready to ask the bank for a lump of cash. The better your credit is, the more likely they’ll be to give it to you.

It’s the same with UX. You keep paying your bills, making small improvements without being uncompromising so that you can eventually put your foot down when it matters.

When that time comes, you’ll be able to say no to a feature or direction that you think is bad for the customer experience because people will trust your judgement and track record. That’s the long game.

Build relationships

“The graph of impact tends to correlate with how many people you need to work effectively with. Once I realized this, I started to see my interactions with other people differently. It was no longer about winning battles and proving that I was right, but about developing stronger collaborative relationships.”
– Julie Zhou 

Finally, know that if you’re a pain in the ass to work with you won’t get a lot of traction in your job. A good designer is able to work with others and show them that they can make their jobs easier.

In addition to empathy for your users, you should also learn to understand the goals and points of view of your colleagues. You are all on the same team. Without a sales team to sell the product or a PM to get it out the door, you don’t have a job. Learn what matters to them and find common ground. Share the same end goals.

Go forth!

I hope this post has given you an idea of what to expect in your first UX job without discouraging you. UX designers are the difference between products that simply work and products that work simply. Remember to savor your victories along the way. You really do have the ability to make a difference for real people.

The post From the classroom to the cubicle: UX in the real world appeared first on UX Mastery.