Intro to UI Wireframing > 4. Design Principles

4. Design Principles


What are Design Principles?

Design principles are foundational rules that work well for communicating information so that the user can do something with it, whether it's making a decision, taking action, or just making sense of what's being conveyed. Like patterns, they emerge because they have proven to be optimal attributes for the purpose they serve, in this case for communicating effectively.

Until you familiarize yourself with them, these principles may seem new to you. By labeling and understanding what they are, they become under your control so you can use them. With practice using them will be second nature, and they'll be part of the language you use to communicate information in your interfaces. You won't be able to look around without thinking about them.

The Cooking Analogy:

Let's continue with our food obsession to talk about foundational techniques.

Imagine that you ordered a dish of fish tacos. But when it arrives at your table, you get a tortilla soaked in oil, your fish is dry, overcooked and served on a separate plate, and spices come in a separate bowl. Sounds like something you'd send back.

Separate ingredients don't usually make an interesting dish by themselves. The selection, preparation and arrangement of parts is what gives those parts form as the dish. The techniques and style of presentation can also make the dish more appetizing — this part is what makes the dish really become an experience.

In design we have something like that too, and it's based on somewhat universal principles that make communication with design effective.1


Why use Design Principles?

The use of design principles may be unnoticeable at first, when we're looking at screens or pages in the world. You may, however, start to notice when some of these design principles have not been applied. The next time you find it hard to make it through a big form or can't find a button among a sea of controls in a cluttered application, think about how applying these design principles might have helped.

Well considered design tends to disappear when it serves its purpose in optimizing communication or use. It gets out of the way and gets users to goals faster.

While you may not be doing the ultimate visual design for your product, some familiarity with design principles goes a long way toward communicating your ideas. We may deal less with the rendering of the final interface surface, but much of the understanding of what we want to communicate comes from what we explore in interaction and information in our wireframes.


The Basic Principles

We're going to consider some basic visual design principles that are helpful for designing interfaces.

We've selected four principles that you'll get the most benefit from as you begin your practice in interface design. There are many more beyond this list, but these will give you a good foundation for making your wireframes more effective.

Now let's look at each principle and learn when and how to use them to communicate in our interface wireframes.


Further Reading

1: Note that this differs from individual and organizational design principles. Dieter Rams' 10 Principles for Good Design is one example. You can find more about those at the principles.design website.


Mike AngelesBy Mike Angeles
Got questions or feedback? Email mike@balsamiq.com.