User Experience design is a big tent. It includes everything from anthropological research on how customers use products to coding out rough prototypes to writing grand specification documents based on interviews with product stakeholders. For a long time, user experience design was given short shrift in the Web development world. When people did attend to it, it was usually in terms of the visual design. After all, most of what we did when surfing the web was mostly reading, looking, browsing. The interface was – and remains – highly visual.

In time, though, browsers improved. Functionality has taken center stage. We want to do more than just look. We use Web applications for work, play, avocation, education, and more. When it comes to getting stuff done, usability matters — whether it’s finding a new apartment or the best plane fare for a trip to Spain or applying filters to a photo to set a mood and entertain friends. Once we started getting usability right on the Web, we quickly learned that the whole of user experience was an important product differentiator. This is especially true in tight, competitive markets where everyone pretty much has the same product. Consider the iPhone, a well-known example. There was nothing especially new about the functionality offered by an iPhone. What turned it into a sensation was the user experience.

How do we create a great user experience?

Creating a great user experience isn’t rocket science. Half the battle is simply in having principles. And yes, I mean that in the good old-fashioned way: to have morals or ethics. Principles. We start with a set of values about how we want to treat our customers. From there, we can work outward to develop a handful or two of basic principles or commandments that guide us as we make product, UX, and visual design choices.

What do we value?

What are the values at the core of visual design principles? What about interaction design principles? User experience design principles? (And, by the way, what is the difference between user experience design and interaction design?

UX Design principles are based on a philosophy and set of values about how to treat people so they feel respected, valued, and treated with dignity when they are using our products.

Interaction design principles are based on a philosophy and set of values about how to treat people so that they feel respected, valued, and treated with dignity when they are interacting with computer hardware and software.

Visual design principles are based on a set of values or philosophy about why objects are perceptually and emotionally appealing or provocative to people.

In this series on design principles, I’m going to explore the principles we use to create web-based and mobile-applications. Those principles come from visual design, interaction design, and user experience design. We start with principles because that’s where great product design always starts. If you get the principles right, know how to use them and when and if to break them, you’ve tackled most of the work. This leaves us free to work on even tougher problems – to work in that space that will differentiate our products from our competitors’.

What are principles – and why do we need them?

One important approach to the design or architecture of the things we use – whether it’s a teapot, a building, or software — is what we might call the “Principles, Practices, and Patterns” approach. Practitioners begin with a set of values, identify the principles which help them uphold those values, and then develop laws, rules, standards, guidelines, and patterns to help them with the smaller, daily decisions they make when designing products – and, again, this happens whether it’s building roads, catering a meal, writing marketing copy.

Visual design principles

1. Contrast: elements different in color, shape, texture
2. Emphasis: hierarchy of dominance and focus
3. Balance: the distribution of elements
4. Proportion/Scale: relative size and scale of elements
5. Repetition/Pattern: planned or random pattern of elements
6. Movement/Rhythm: flow of elements to create a visual path for eye to follow
7. Unity/Harmony: elements form balanced, complete, harmonious whole

In visual design, the goal is to create appealing and/or provocative patterns using these principles to compose the elements in the design. The elements are things like color, texture, and shape. At Homes.com, of course, the goal isn’t just to make something that’s visually appealing. It’s also to create products people – whether it’s an application that helps people find an apartment, helps real estate agents place listings on our site, or look up information about home values in their neighborhood.

One thing about design is this: while visual design can be understood as artistic and creative, it’s also planned. As David Lauer writes, design is really planning: “To design means to plan, to organize.” Visual or graphic design is practical, Lauer says, because it is concerned with solving problems. The answers it provides are visual solutions.

Next up: Part 2: Interaction design and user experience design principles

Resources

Design Basics by David Lauer (book)

Design Basics, Chapter 1: Design Defined, by David Lauer (pdf download)

Usability.gov’s guide to visual design principles and elements

Visual Design Principles: A Guide