Advertisement


What are the key principles that effective designs share?


Question

You have arrived on this page because you are clearly curious about underlying fundamentals that you can incorporate into your thought process when designing.

According to many that came before us, there are key principles that can be considered when creating an effective design. In the following answers, you will find useful theories from a variety of respected sources.

Use this question as a reference for navigating the variety of topics:

Gestalt Principles

  1. Proximity

  2. Alignment

  3. Contrast

  4. Repetition & Consistency

Other Fundamentals and Useful Information

  5. Communication

  6. Laws of Usability

  7. '7 Principles of Universal Design'

  8. '10 Principles of Good Design'

If you know of a topic that hasn't been covered here, please add an answer with references to respected resources and it will be added to the list.

Of course direct quotes and paraphrasing from respected resources are a must, but should be limited to a small paragraph per topic at most and referenced back to their source as thoroughly as possible.

A question very similar in nature has been posted before, but not to create a collection of snippets that are enlightening for graphic designers of any and all skill levels.

2017/04/13
1
10
4/13/2017 12:46:00 PM

Accepted Answer

The key principles of effective design

Communication is above all the forefront of effective design. Graphic Design by nature is about communicating an idea. Regardless of medium this is the de facto standard for an effective design.

Quick Historical Look:

Nearly 200 years ago William Playfair (1786) began the serious use of graphs for looking at data. More than 50 years ago a battle raged on the pages of the Journal of the American Statistical Association about the relative merits of bar charts and pie charts (Eells 1926; Croxton 1927; von Huhn 1927). Today graphs are a vital part of statistical data analysis and a vital part of communication in science and technology, business, education, and the mass media.

Source: Graphical perception: Theory, experimentation, and application to the development of graphical methods in the Journal of the American Statistical Association, Vol. 79, No. 387. (Sep., 1984), pp. 531-554.

Larkin and Simon (1987) suggest that the following forms of cognitive efficiency are offered by good graphical displays.

  • Substituting Visual Operators: Graphical displays often allow users to substitute less demanding visual operators in place of more complex logical operators in place of more complex logical operators. Visual operators (e.g., distance and color comparisons, spatial coincidence judgements) can often give users the same information as more complex non-visual operators.

  • Reducing Search: Graphical displays often arrange information in such a way as to reduce the number of items the user must look at in order to find something useful, or to group information required to draw a particular inference into one spatial locality. Graphical techniques like shading and spatial arrangement can help guide the eye to relevant information or past irrelevant information.

A lot of designers especially today get overshadowed by creativity and can get too far from the initial goal of communicating a goal. Here's a passage from Visual Design Principles for Usable Interfaces (Watzman, Suzanne) that I think is very relevant:

Defining Visual Design. Visual design is not merely a series of subjective choices based on favorite colors or trendy typefaces--at best a cosmetic afterthought considered if there is enough time and money. Good visual design is the tangible representation of product goals. It is concerned with the "look," the method, and the style in which the information is presented. It should be the result of a thoughtful, well-considered process, not merely a decorative afterthought.

Applying the appropriate visual/experience design principles and tools while incorporating the user perspective (information design) enhances the value, perception, and usefulness of products. It is the best combination of project goals, the user perspective, and informed decision making.

Design is in direct relationship with the economy. When we design for Engineering it is very easy to see how the design solution must meet certain economic goals. In architecture and graphic design this is often not the case. They can become ornate and saturated, especially when the economy is good. The budget is there. When the economy is bad then things get simplified, mass produced, reusable, templates and frameworks --- all of it. There are design solutions that are possible within these parameters and they reduce the overall cost of goods. When times are good, or you get lucky enough to land a client with the money to spend then its easier to justify new paradigms and reasons.

Reducing Search: Where the Principles of Design come in

If the goal is to communicate an idea then to best do this, we as designers, must have some clue how people (unless you're designing for other species) perceive the world around us.

Top-Down Processing. Widely seen as the bulk of our processing capabilities is that we start at the larger entities before working our way down into the details. In this way our expectations affect our perceptions. For examle you probably filled in the letter P just now, because your brain expected it to be there. There are a number of tests you can look at including, The Hollow Head, which tricks your brain into seeing what isn't there. It does this because of top-down processing giving us expectations about what SHOULD be there, rather than what IS there. (An immediate example of this in the traditional realm of Graphic Design would be the cover of Invisible Monsters by Chuck Palahniuk:

enter image description here

Bottom-up Processing. Also called data-driven processing, is when you have no expectations. You have to start small and work to fill in holes until you find an expectation.

Additional Study: Khan Academy Lesson: Bottom-up vs Top-down Processing

As a Graphic Designer you can think of this as the "aha" moment. If the majority of your intended audience can immediately identify the whole then they use almost all Top-Down Processing. This is a key ingredient for a successful design. It requires less searching from one spot to another in the hopes of figuring out what is going on.

I'm going to end this here, at least for now. At this point you can get into the more technical stuff like the Gestalt principles that Dominic has begun to discuss.

Application / Implementation

I realize some of this stuff seems fairly complex, particularly for new designers to grasp. Over the next few days I'm going to add images in this section but wanted to at least get some basic stuff in writing to help people out.

First Iteration of an Advertisement or Website:

On your first iteration of an advertisement pretend you put in a picture of your product in use. Pretend for now its a water bottle being drunk by someone on a crowded basketball court.

You look at it and think, wow this is a great shot of our product! You show your coworkers and they think, wow our designer did a great job showing our product! You show the rest of the world though and you know what they're going to think? What's the product?

They'll have to search the page for clues.

Second Iteration

To begin fixing this you might think, how can I make this clear. People should be able to quickly scan the ad and know exactly what it means. It should be as much top-down processing as possible.

So perhaps the first step is adding a logo. Put a logo on the bottom right and the logo is visible on the water bottle. That's a good clue. Is it enough though? Probably not.

Third Iteration

You work on the copy and add some large text, "Always cold water! The world's first water bottle with solar panels that can keep you hydrated on the hottest days!"

Alright, we're making progress. Now someone sees a photo, identifies the logo, and discovers from the copy that we're talking about some sort of water bottle.

Fourth Iteration

Circle the water bottle. Darken everything but the water bottle. Oversaturate it. Do something, anything, to make it pop! Now we're doing graphic design. Now there's almost no searching left. Without any text someone could look at your piece and immediately know to focus on the bottle. Maybe you differentiate the entire person with the bottle well thats okay, you still have the text to further support it.

Final Iteration

The idea is finding a balance. How many iterations it takes is up to you. But with any design of anything you have to either really look at it as though its your first time or get others to test it for you. Once someone knows the product then they have expectations. They're looking for your product already. You want to make your design communicate what that product is as well as you can allowing end-users to understand, and remember it, with as little bottom-up processing as possible. The less they have to scan before understanding, the better.

(I'll redo this example with pictures over the next few days)

Additional Reading:


Here is a great paper on Top-Down Processing that Transitions into those very principles: What's up in top-down processing? by Cavanagh, Patrick.

Here's a wonderful article that came out in The Atlantic today (May 5, 2014) which stays on fairly abstract terms non-designers can understand but does clearly state: Things You Cannot Unsee (And What That Says About Your Brain)


In short: what you know influences what you see.

2014/05/07
8
5/7/2014 2:50:00 AM

In order to use the principles properly we first need to understand how users interact with designs, how they think and what are the basic patterns of users’ behavior.

Part 1

How do users think?

  • Users appreciate quality and credibility.
  • Users don’t read, they scan.
  • Web users are impatient and insist on instant gratification.
  • Users don’t make optimal choices.
  • Users follow their intuition.
  • Users want to have control.

Don’t make users think

According to Krug’s first law of usability,

the design should be obvious and self-explanatory.

When you’re designing, your job is to get rid of the question marks — the decisions users need to make consciously, considering pros, cons and alternatives.

Don’t squander users’ patience

In every project when you are going to offer your user some service or tool, try to keep your user requirements minimal. The less action is required from users to test a service, the more likely a random user is to actually try it out.

Strive for simplicity

The “keep it simple”-principle (KIS) should be the primary goal of design. Strive for simplicity instead of complexity.

Don’t be afraid of the white space

Actually it’s really hard to overestimate the importance of white space. When a new user approaches a design layout, the first thing he/she tries to do is to scan product/page and divide the content area into digestible pieces of information.

Complex structures are harder to read, scan, analyze and work with.

If you have the choice between separating two design segments by a visible line or by some whitespace, it’s usually better to use the whitespace solution.

Hierarchical structures reduce complexity (Simon’s Law):

the better you manage to provide users with a sense of visual hierarchy, the easier your content will be to perceive.

Communicate effectively with a “visible language”

In his papers on effective visual communication, Aaron Marcus states

three fundamental principles involved in the use of the so-called “visible language” — the content users see on a screen.

  • Organize: provide the user with a clear and consistent conceptual structure. Consistency, screen layout, relationships and navigability are important concepts of organization. The same conventions and rules should be applied to all elements.
  • Economize: do the most with the least amount of cues and visual elements. Four major points to be considered: simplicity, clarity, distinctiveness, and emphasis.

Simplicity includes only the elements that are most important for communication. Clarity: all components should be designed so their meaning is not ambiguous. Distinctiveness: the important properties of the necessary elements should be distinguishable. Emphasis: the most important elements should be easily perceived.

  • Communicate: match the presentation to the capabilities of the user. The user interface must keep in balance legibility, readability, typography, symbolism, multiple views, and color or texture in order to communicate successfully. Use max. 3 typefaces in a maximum of 3 point sizes — a maximum of 18 words or 50-80 characters per line of text.

Conventions are our friends

Conventional design of elements doesn't result in a boring product In fact, conventions are very useful as they reduce the learning curve, the need to figure out how things work.

With conventions you can gain users’ confidence, trust, reliability and prove your credibility.

Test early, test often

This so-called TETO-principle should be applied to design project as usability tests often provide crucial insights into significant problems and issues related to a given layout.

Test not too late, not too little and not for the wrong reasons.

In the latter case it’s necessary to understand that most design decisions are local; that means that you can’t universally answer whether some layout is better than the other one as you need to analyze it from a very specific point of view (considering requirements, stakeholders, budget etc.).

Some important points to keep in mind:

According to Steve Krug,

testing one user is 100% better than testing none and testing one user early in the project is better than testing 50 near the end.

According to Boehm’s first law,

errors are most frequent during requirements and design activities and are the more expensive the later they are removed.

Testing is an iterative process. That means that you design something, test it, fix it and then test it again. There might be problems which haven’t been found during the first round as users were practically blocked by other problems.

usability tests always produce useful results. Either you’ll be pointed to the problems you have or you’ll be pointed to the absence of major design flaws which is in both cases a useful insight for your project.

According to Weinberg’s law,

a developer is unsuited to test his or her code.

This holds for designers as well. After you've worked on a design for few weeks, you can’t observe it from a fresh perspective anymore. You know how it is built and therefore you know exactly how it works — you have the wisdom independent testers and user of your design wouldn't have.


2014/05/04