Design Principles for Wireframing

In this article, Chris Bank of UXPin – The UX Design App details some of the principles that will help you design better wireframes and, ultimately, better products.

In A Practical Look At Using Wireframes, I talked about who uses wireframes, what’s their purpose & how do they work together. In 50 Shades of Wireframing, I talked about the many types of wireframes you can create in the design process. And in 4 Non-Digital Wireframing Weapons and 4 Digital Wireframing Weapons, I cover a wide variety of tools you can use to get the job done - UXPin was obviously included but use what works for you. I also laid out the top web and mobile wireframe example and pattern sources in The Design Pattern & Wireframe Libraries Guide, and highlighted some of the best web and mobile UI design patterns that have cropped up in Fresh UI Design Patterns Gaining Traction.

This article is an attempt to cut through the noise from the designers, developers, art directors, usability experts, Venture Capitalist and family members to help you design better wireframes and, ultimately, products.

So what does it take to design a successful digital product or service? Is it the brand, the chosen platform, the functionality, the choice of colors, or some viral features? All of the above have some importance but no single element is why company X is a success. We’re often attached to the idea that if you just get the right idea or if your design is cool or uses a certain technology, we will be successful - there is no recipe for success.

Take the design process seriously, but don’t get too attached to one particular part of it and don’t rely on any one particular discipline to give you the right answers. Get to the point where you have real users or customers as quickly as possible. It’s these users that will provide you with the information that will get you in a position to make better design decisions.

With the help of our friend, Des Traynor of Intercom.io, the following principles should help you get in a position.

A Few Things to Remember While You’re Iterating on Product Concepts

Design Principles for Wireframing

Plan a little - do the rest

An important part of building great products consistently has to do with planning. A few questions that you may want to answer before jumping too far into the details:

  • Who are the core users?
  • What are the user needs and goals?
  • What are the business needs and goals?
  • What existing product or design patterns work for your users and business?
  • What are the gaps in what’s currently out there?
  • What are some product requirements you have given your users needs and goals (as well as those of your business?
  • What are your constraints (i.e. time, resources, money, skills)

Don’t spend too much time on this upfront because sketching, wireframing and prototyping will help you refine your understanding of the answers to these questions. But they’re important to have in the back of your mind throughout the process.

Success
Image credit: Wedding Girl

Set expectations - not just goals

Have a clear goal of what you’re trying to achieve and how you’ll measure your success.

Intel and Google popularized the term Objective Key Results (OKRs) - which was presumably derived from S.M.A.R.T goals - to give product teams this direction and many teams now use this to stay extremely focused in setting their goals. Within this system, each individual outlines their major objectives and the quantifiable actions (i.e. key results) it'll take to achieve them. It’s a technique designed for accountability and enforced with scores. In other companies, it serves as a layer of communication that holds the company together and elevates its game at the same time.

Beyond OKRs and SMART goals, it’s valuable to set expectations about the design process and each step involved. For example, what are the steps in the design process, who is involved, what are the deadlines for each step, what level of fidelity is necessary to properly communicate, and so forth. Think about what you expect of others and what is expected of them, but try to keep it simple so you don’t get bogged down.

SmartGoals

Start with users - and their needs

“Who is going to use my product and what will he or she do first?”

So many people never answer this question or answer it too late in the design process. They start to add boxes, text, colors, and images in a way that makes sense to them. This is great if you’re the actual user. But you often aren’t. Chamath Palihapitiya shares this sentiment when talking about building a product that grows - talk to your users and know your users.

The difference between art and design is that design solves a problem. The design process must start with identifying and thinking about real user needs. You should design around those individual needs and user flows to satisfy those needs. In order to do so, you must understand those needs thoroughly - interrogating data, not just making assumptions - and remember that what users ask for is not always what they need.

The average person - your users - has an okay life. It’s not as amazing or glamorous as it seems in the movies, TV or social media. They’re not getting made, paid or laid as much as they want. And they don’t care about anything you’ve built unless it makes their life better. Don’t forget that while you’re getting lost in boxes, text, colors, and images.

OK Life
Image credit: Bigstockphoto

Think how, not what

Your product isn’t just a bunch of features - so stop focusing on them.

What matters is not what functionality your product has, but how it works. A sign-up process is not just a sign-up process, a checkout process is not just a checkout process, a button is not just a button, a rating system is not just a rating system. Think about how you can stand out by introducing something that everyone else might have but in a unique way - what you are selling at it’s core. Here are a few questions to answer:

  • What is needed for your product to function well?
  • How much can you take away from it without sacrificing the core product
  • Why will people be excited about it

Glasses have one primary purpose, to help you see. Everything on top of that - such as colors, shapes, sizes and logos - is a feature. Understand when you are working on your core product and when you are working on adding features. The benefits of thinking like this, is that it will help you establish a very clear and precise picture of what makes your product your product. This will help you understand the minimal work necessary to get a valuable product out the door, and why you are adding features when you are.

You will be surprised how much the “how” can help improving your product - and getting an MVP out the door.

Minimum + Viable
Image credit: Paul Kortman

Start simple, stay simple

Wireframe only what you and, more importantly, your users need.

Constrain yourself. A good product has limitations. It doesn’t just succumb to every temptation that comes along. Only add features if you get clear signs that it is needed. It cannot be said enough. Less is more – much more, and for very good reasons:

  • First, if you do less you can measure more. And if you can measure more, you can better experiment with what works. Most products are simple, based on simple insights - and the product teams behind them have made many small variations of those products in the process.
  • Second, most users will have to learn your product anyway so don’t try to impress them with features before they understand what your product is all about. Don’t add new features just because you think that it will help, it wont, not yet. If your product becomes a success it’s not because of how many features it has.
  • Finally, you’ll save more money by focusing resources where they’ll do the most good.

Dropbox leaves much to be desired, Mailbox is pretty basic, Spotify still has a way to go, Pinterest could be so much more robust, and Uber could have way more bells and whistles. But they’re all rock-solid products with focused features for focused user needs and use cases.

Don’t confuse change with improvement

One of the biggest challenges faced by designers, artists, and generally creative people when producing new work is fatigue. They get this from reviewing their work and their inspirations - every minute detail - over and over and over. Top tech companies and startups have similar problems - largely due to the intensity and time spent immersed in them.

It’s very tempting after a couple of months of looking at the same design to want to change it, and think you are improving your product. Make sure you stay focused on things that really improve the product and make your users even more happy, acquire more users, convert them and so on - whatever your product objectives are. If you end up making changes that don’t improve - or, more commonly, hurt - the product, you’ll have to spend resources on changing things after you launch.

Simplicity

Everything Has A Meaning

Your product sketches, wireframes, and prototypes are methods of communicating just like any language in the world. Every piece of text, color, gradient, shadow, shape, and image you put down has a meaning, just like there are definitions for every word.

A frequent issue I see with wireframes and prototypes is the variety of colors or grayscale shades, line weights, font types, and element sizing or layout - all without much thought, if any. This adds confusion as you don’t know whether these slight variations should translate to variations in the end-product and, if so, what they will communicate. It’s as if someone did graphic design without a style guide, or someone spoke the English language without ever reading a page of the Oxford English Dictionary.

Grammar
Image credit: Grammarly

Be consistent, not uniform

Wherever possible, use the same language and design patterns to help familiarize users with your product. But, when this isn’t possible, you should at least make sure your underlying approach is consistent so your users can reasonably guess what they’re supposed to do.

Presumably, you hope they use the product very often - hourly, daily, or weekly - so you’re helping them get comfortable doing so. You’re also helping them develop habits that will pay dividends down the road - all while going about their daily lives.

Granted, you can’t imagine every scenario and write rules for it like a design style guide. Every circumstance is different and should be addressed on its own terms. What unites things, therefore, should be a consistent approach - one that users will hopefully come to understand and trust.

As this pertains to sketching, wireframing and prototyping, it’s a valuable discipline to limit the palette of shapes, colors, text, and graphics initially. This will help you be consistent without being totally uniform (and arguably boring) or having too much going on, which could be wildly confusing. As a rule of thumb, I always suggest limiting each attribute (color, grayscale shades, text, elements, etc.) to 2-3 variations so you’re comparing apples to apples instead of wondering which variation is an apple, and which one is something else - could be an orange or a lemon. This will result in a less “sexy” wireframe, but that’s not the purpose of a wireframe - leave that for mockups and high-fidelity prototypes.

What’s nice about sketching is that you only have one color and font everywhere until you physically decide to switch sketching tools (i.e. a thicker marker or a colored pencil). Similarly, wireframing tools also limit your options for line weight, color and font types. While wireframing and prototyping tools like UXPin http://uxpin.com/ give you more flexibility, other tools like Balsamiq are extremely limiting for this precise reason. Compared to graphic editing and presentation software, however, most wireframing software will help you more with staying consistent throughout the design process.

Gradient

Low-fidelity doesn’t mean unrealistic

When possible, add the details you know you’ll need, even if they’re rough approximations.

It’s better than putting in arbitrary fillers you may change dramatically - which will ultimately change your design. One of the most common requests I get from designers when working together is content - real content. In 50 Shades of Wireframing, I emphasized the value of having higher-fidelity for text, colors, media, and interactions depending on which details will have the greatest impact on the overall product design.

At my last company, I had to actually think about whether my product summary paragraphs were going to be 3 or 6 lines long because the bulk of those paragraphs may change the overall look, feel, and emphasis on the page given the existing layout - and, therefore, the layout would have to be re-considered for the product design. If I’m including product photos, I have to see the photos - or at least an approximation - before I can decide whether to include it, make it a primary feature or fight against it. The truth is that headings wrap, videos can be distracting or even creepy, photo dimensions and orientations can be inconvenient, and decimals don’t creep out of their input boxes.

So scrap the “Lorem Ipsum” and get realistic about what you’re trying to convey to your users as early as possible.

Lorem Ipsum

Experiment & collaborate quickly

The best way to build effective products is to start small and iterate wildly. Iteration reduces risk. It makes big failures unlikely and turns small failures into lessons. This avoids the 200 page spec document which can turn into a bottleneck.

Low-fidelity design helps you and your team to explore many potential solutions quickly before focusing in on one solution and polishing and refining it into the final product. Initially, it may appear there are many solutions to a design challenge. However, you can only decide which will work best after exploring a few of them and laying them out in front of you - to see, touch and feel. Inexperienced designers will over-commit to their initial ideas and fall in love with what is likely the wrong solution - good designers know better.

Ultimately, you’re working in the wrong fidelity if you can’t product concepts quickly. And you’re wasting precious time if your wireframes are just grayscale versions of a design you already have your heart set on. Use wireframing as a means to an end, not the end itself.

Experiment and Refine
Image credit: Rosalind

Your designs will get built

A great design can be a terrible solution.

Remember that every animation, box, button, menu, modal window, photo gallery, and map view needs to be programmed - and you can draw a lot faster than anyone in the world can code. If you know HTML/CSS/JS, and you’ve seen what it takes to test a page across every web browser, you’ll try to find an easier way to solve your users’ problems when designing wireframes. Every project has budgetary, time, and resource constraints, and you should internalize that with everything you add to your wireframes, even little components - there are no small changes, and there’s a trade-off for every decision you make.

Online Wireframe
Image credit: UIwireframes

Shipped is better than perfect

The goal of sketching, wireframing and prototyping is delivering great product concepts, not great deliverables.

Nobody cares if your deliverables are great if they’re not finished. And few will care how perfect they are even if they are finished. The only people who may marvel at the deliverables are the UX designers, but they’re hopefully too busy to care about internal documentation. On the other hand, everyone wants or absolutely needs you to communicate the right level of details about what they need to do to make a great and feasible solution so they can ship better products, faster.

If you’ve sketched something on scrap paper that you’re confident is a solid solution that everyone can act on immediately, there’s no value in re-creating it in a wireframe or anywhere else. Just take a picture of it and share it where appropriate. In some cases, you may have to quickly replicate it for organizational purposes, but don’t make deliverables for the sake of it - you have better things to do.

In 4 Non-Digital Wireframing Weapons and 4 Digital Wireframing Weapons, I cover a wide variety of tools you can use to get the job done.

Wireframe Sketch
Image credit: Mark Rhode

Ready, Set, Go!

I’ve done enough talking. And you need to get back to your product. So grab your favorite tool - I personally prefer UXPin - and keep some of these in mind as you ready for your next release.

Opinions expressed in this article are those of the author and not necessarily those of Onextrapixel.