WHY CREATE A STYLE GUIDE?

• You’ll have an easy guide to refer to when handing over the project.
• Makes you look professional. They’ll know you did everything for a reason.
• You maintain control of the design. When someone does something awful, you can refer them to the document.
• You avoid cheapening the design, message and branding.
• Forces you to define and hone your style, making for a more cohesive design.

Branding Guidelines: What To Include?

STRATEGIC BRAND OVERVIEW

This should be short and sweet. In as few words as possible, make clear the vision for this design and any keywords people should keep in mind while designing. Most people will probably flip straight to the picture pages, but they may read a few sentences here.

{dglb}images/content/artikel/webdesign/kew.jpg:images/content/artikel/webdesign/kew_tn.jpg{/dglb}

Kew uses strong photography in its “brand essence” message, with a few paragraphs that both inspire and define the brand. Even if you read only the first sentence, you get a sense of what it’s trying to do. While Kew has quite a few of these message pages, they are intertwined with beautiful photography that themselves define the photographic style and primary message.

LOGOS

For print and Web, most brands revolve around the logo. Make sure you provide logo variations and clarify minimum sizes.

{dglb}images/content/artikel/webdesign/cunard.jpg:images/content/artikel/webdesign/cunard_tn.jpg:Cunard’s branding guidelines{/dglb}

Cunard provides many variations on its minimum sizes. Because its crest can be displayed either on its own, with the name or with the tagline, specifying minimum sizes is important for legibility (for example, if the logo with the tagline is too small, it will be illegible).

{dglb}images/content/artikel/webdesign/think_brick.jpg:images/content/artikel/webdesign/think_brick_tn.jpg:Think Brick’s branding guidelines{/dglb}

Provide logos with different colors, and specify which colours are allowed. Think Brick gives designers a lot of options with its design. The point is to allow flexibility while maintaining consistency.

SHOW EXAMPLES OF WHAT AND WHAT NOT TO DO

You’re a professional, and you know better than to mess around with logos. But many others will try and think they’ve done a good job. They are so wrong. You must make clear what they can and cannot do with a design.

{dglb}images/content/artikel/webdesign/i_love_new_york.jpg:images/content/artikel/webdesign/i_love_new_york_tn.jpg:I Love New York’s branding guidelines{/dglb}

I Love New York has done a great job defining all the things you shouldn’t do with its logo. It has also produced a beautiful (though bit wordy) document.

SPACING

Many non-designers underestimate the need for white space. Include a spacing reference, especially for the logo. Rather than specifying inches or centimeters, use a portion of the logo (a letter or a shape) to set the clearance. This way, whether the logo is big or small, the space around it will be sufficient.

{dglb}images/content/artikel/webdesign/blackberry.jpg:images/content/artikel/webdesign/blackberry_tn.jpg:BlackBerry’s branding guidelines{/dglb}

 

BlackBerry not only explains its spacing policy, but also uses the capital B in the logo to define the clearance.

COLORS

Always include color palettes and what the colors should be used for. And include formats for both print and Web: CMYK, Pantones (if they exist) and RGB (or HEX). Always include a CMYK alternative for Pantones because sometimes matching is hard (especially when Pantone printing is not possible). Specify primary and secondary colours and when and where to use them.

{dglb}images/content/artikel/webdesign/channel4.jpg:images/content/artikel/webdesign/channel4_tn.jpg:Channel 4’s style guide{/dglb}

Channel 4 shows all of its Web and print colors, and it displays the swatches below an image that helps to define its color palette.

{dglb}images/content/artikel/webdesign/new_uni.jpg:images/content/artikel/webdesign/new_uni_tn.jpg:New School’s branding guidelines{/dglb}

The New School is clear about its primary colors and defines them for both print (Pantone and CMYK) and Web (RGB). Its brand guideline document is beautiful, too.

{dglb}images/content/artikel/webdesign/chris_doyle.jpg:images/content/artikel/webdesign/chris_doyle_tn.jpg:Christopher Doyle’s Personal Identity Guidelines{/dglb}

Okay, so this one isn’t a traditional branding guideline, but rather a personal identity guideline. Here Christopher Doyle shows off some alternative color palettes. He does a fantastic job of mocking branding guidelines; well worth a look (and chuckle).

FONTS

You’ll need to define the typefaces to use: sizes, line height, spacing before and after, colors, headline versus body font, etc. Make sure to include Web alternatives for non-Web fonts.

{dglb}images/content/artikel/webdesign/yale.gif:images/content/artikel/webdesign/yale_tn.jpg:Yale’s typeface{/dglb}

Yale has its own typeface, which it provides to its designers.

{dglb}images/content/artikel/webdesign/yale2.jpg:images/content/artikel/webdesign/yale2_tn.jpg:Yale’s Visual Identity page{/dglb}

On the typeface section of its website, Yale also details when fonts should be used. It has a specific Web font section, detailing which fonts to use there.

LAYOUTS AND GRIDS

By setting up templates and guidelines for grids, you encourage best practices and promote consistency. In Web, preparing some generic templates can curb excessive creativity with the layout.

{dglb}images/content/artikel/webdesign/barbican.jpg:images/content/artikel/webdesign/barbican_tn.jpg:Barbican’s branding, print and Web guidelines{/dglb}

For its website, the Barbican has set up building blocks that are both flexible and ordered—meaning they’re likely to remain in a grid.

TONE OF VOICE

A huge component of a brand’s personality is the copy, and defining the tone is a great way to keep a brand consistent. When multiple people are writing the copy, the brand can start to sound like it has multiple personalities.

{dglb}images/content/artikel/webdesign/easyjet.jpg:images/content/artikel/webdesign/easyjet_tn.jpg:easyJet’s branding guidelines{/dglb}

easyJet has a well-defined personality, both verbal and written, and it gives examples for both.

COPY-WRITING GUIDE

For those who require clients to write their own copy but want to maintain consistency, a copy-writing style guide can be helpful. Copy-writing is one of those things that most people register subconsciously. When reading, your brain automatically looks for consistency and patterns, and poor copy-writing can ruin the reading flow.

{dglb}images/content/artikel/webdesign/can.jpg:images/content/artikel/webdesign/can_tn.jpg:CAN’s branding guidelines{/dglb}

CAN wants its number formats to look the same. On another page, it defines which spelling variants to use, reminds people of common mistakes and more.

IMAGERY

Many designers have established a particular tone in their photographs and images. Show your clients examples, and explain why they are good choices. Show them in the context of your design, and explain why they were chosen for that context.

{dglb}images/content/artikel/webdesign/zopa.jpg:images/content/artikel/webdesign/zopa_tn.jpg:Zopa’s style sheet{/dglb}

Zopa has done a fantastic job of making its illustrated style clear. Its online style guide is very good, and it offers further tips on how to construct pages around its illustrations in the online style sheet.

BRING IT ALL TOGETHER

Show a few examples of what the logo, photography and text look like together and the preferred formats.

{dglb}images/content/artikel/webdesign/skype.jpg:images/content/artikel/webdesign/skype_tn.jpg:skype’s branding guidelines{/dglb}

Skype has done a fantastic job of showing how it want designers to use its illustrations and photography. It has examples of the subtle differences between good and bad usage. The whole guide is beautiful and well worth a look.

Web Guidelines: What To Include?

Many people create branding guidelines but forget to include important style guides for the Web. Just like branding guidelines, Web guidelines keep everything consistent, from button styles to navigation structure.

BUTTON HIERARCHY

You’ve carefully decided what all the buttons are for and meticulously defined their states. Unfortunately, the in-house designer hasn’t applied your hover states or has created their own, and they look terrible.

Create a page that shows what all links do (including the buttons), the appropriate behavior of each and when to use them (with examples of appropriate usage). If one button is dominant, make clear the maximum number of times it should be used per page (usually once at most). Define the hover, disabled and visited states for all buttons.

{dglb}images/content/artikel/webdesign/gumtree.jpg:images/content/artikel/webdesign/gumtree_tn.jpg:Gumtree{/dglb}

Gumtree has worked hard to define all button states, especially custom buttons (for example, Post an Ad has a + sign in front of it). These were defined for the Gumtree redesign, which is now live.

ICONS

Defining size and spacing and where to use icons is another great way to promote consistency. If icons should be used only sparingly, make this clear.

{dglb}images/content/artikel/webdesign/icons.jpg:images/content/artikel/webdesign/icons_tn.jpg:ZURB’s icon sizes{/dglb}

Here, the ZURB agency defines icon sizes and when to use them, and it provides clients with an online source from which to download them. ZURB also defines badges and explains their purpose. It believes that its guidelines are best shared online.

NAVIGATION (Logged In/Out States)

On the Web, good consistent navigation can make or break a website. New pages are often added to a website after the designer is done with it. Have you left some space for this? Doing things like letting people know what to do with new navigation items and showing logged-in states make for a cleaner website.

{dglb}images/content/artikel/webdesign/bbc.jpg:images/content/artikel/webdesign/bbc_tn.jpg:BBC's Global Experience Language{/dglb}

This is one of the most beautiful guidelines I’ve seen. BBC shows what to do with long user names, how much space everything should have and more.

BASIC CODING GUIDELINES

There’s no way to make someone else code like you, but you can offer others basic guidelines that will minimize the damage, such as:

• CSS class naming conventions
  Should they use .camelCase or .words-with-dashes?
• JavaScript integration
  Are you using jQuery? MooTools? How should new JavaScript be integrated?
• Form styling
  Include the code, error states and more so that they understand what style conventions you expect.
• Doc type and validation requirements
  Do you allow certain invalid items? Do you expect the CSS and HTML to validate?
• Directory structure
  Make clear how you have organized it.
• Accessibility standards
  Should people include alt tags? Is image replacement used for non-standard fonts?
• Testing methods
  Which standard should they test with? Do you have staging and production websites?
• Version control
  What system are you using? How should they check in new code?

How To Format

Some branding guidelines have been turned into beautiful books:

{dglb}images/content/artikel/webdesign/truth.jpg:images/content/artikel/webdesign/truth_tn.jpg:Truth brand guidelines{/dglb}

This beautiful example , which was designed to go with a brand redesign, shows just how beautiful branding guidelines can be.

But this requires a substantial budget and a reprint every so often. For most companies with tight budgets, this is not practical. On the Web especially, content is constantly being refined and styles for elements are not set in stone.

Here are a few good practices for formatting your guidelines:

• Include a cover
  This should include an example of best practices for the logo.
• Make it beautiful
  Even if it won’t be printed as a book, you can still make sure the branding guidelines appeal to the viewer. After all, you’re trying to inspire them to use your designs to the highest standards!
• Include contact details
  For when they have questions, so that you can prevent bad decisions from being made.
• Make it easy to access and open
  Usually this means putting it online or in PDF format. Don’t make it too big; use images sparingly.
• Make it printable
  For international companies especially, keep margins big so that the document can be printed in both A4 and US letter sizes. If it’s online, make sure your print style sheets render the document as expected. Don’t do white text on a black background, either: you don’t want the client to have to buy a new ink cartridge every time they print a copy.
• Make it easy to change
  Updating, adding new pages and making changes should be easy, because it will happen!
• Create a mini version
  Make a short handy guide that has just the basics, in addition to the full version. Both will get used in different instances.
• Provide print templates whenever possible
  Things like letterheads, business cards and envelops should have their own templates. While guidelines will help people put things in the right spot, they usually won’t help them get the right resolution or color format.

{dglb}images/content/artikel/webdesign/template.jpg:images/content/artikel/webdesign/template_tn.jpg: template for a one-page branding guideline{/dglb}

LENGTH

Remember, people should be able to follow branding guidelines. A 100-page book will engage none but the most diligent designer. Many believe that a concise three-page overview is best for daily use, with a more in-depth 20-page document for more complex tasks. Less is more, usually!

 

Resources

• The Web Style Guide, 3rd Edition A comprehensive guide for the Web.
• Corporate Brand Guidelines A list of design guidelines. Some are old but still useful.
• Brand Identity A great article from Computer Arts magazine on building your brand identity
• 20 Top Tips for Designing Effective Brand Guidelines
• The Corporate Identity Manual (Brand Style Guide)

 

We aren’t going to discuss the implementation details (e.g. where the search box should be placed) as it has already been done in a number of articles; instead we focus on the main principles, heuristics and approaches for effective web design — approaches which, used properly, can lead to more sophisticated design decisions and simplify the process of perceiving presented information.

Principles Of Effective Web Design

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

 

How do users think? 

Basically, users’ habits on the Web aren’t that different from customers’ habits in a store. Visitors glance at each new page, scan some of the text, and click on the first link that catches their interest or vaguely resembles the thing they’re looking for. In fact, there are large parts of the page they don’t even look at.

Most users search for something interesting (or useful) and clickable; as soon as some promising candidates are found, users click. If the new page doesn’t meet users’ expectations, the Back button is clicked and the search process is continued.

• Users appreciate quality and credibility. If a page provides users with high-quality content, they are willing to compromise the content with advertisements and the design of the site. This is the reason why not-that-well-designed web-sites with high-quality content gain a lot of traffic over years. Content is more important than the design which supports it.
• Users don’t read, they scan.Analyzing a web-page, users search for some fixed points or anchors which would guide them through the content of the page.

{dglb}images/content/artikel/webdesign/heatmap.jpg:images/content/artikel/webdesign/heatmap_tn.jpg:Heatmap{/dglb}

• Web users are impatient and insist on instant gratification. Very simple principle: If a web-site isn’t able to meet users’ expectations, then designer failed to get his job done properly and the company loses money. The higher is the cognitive load and the less intuitive is the navigation, the more willing are users to leave the web-site and search for alternatives.
• Users don’t make optimal choices. Users don’t search for the quickest way to find the information they’re looking for. Neither do they scan web-page in a linear fashion, going sequentially from one site section to another one. Instead users satisfice; they choose the first reasonable option. As soon as they find a link that seems like it might lead to the goal, there is a very good chance that it will be immediately clicked. Optimizing is hard, and it takes a long time. Satisficing is more efficient.
• Users follow their intuition. In most cases users muddle through instead of reading the information a designer has provided. According to Steve Krug, the basic reason for that is that users don’t care. “If we find something that works, we stick to it. It doesn’t matter to us if we understand how things work, as long as we can use them. If your audience is going to act like you’re designing billboard, then design great billboards.”
• Users want to have control. Users want to be able to control their browser and rely on the consistent data presentation throughout the site. E.g. they don’t want new windows popping up unexpectedly and they want to be able to get back with a “Back”-button to the site they’ve been before: therefore it’s a good practice to never open links in new browser windows.

1. Don’t make users think 

According to Krug’s first law of usability, the web-page should be obvious and self-explanatory. When you’re creating a site, your job is to get rid of the question marks — the decisions users need to make consciously, considering pros, cons and alternatives.

If the navigation and site architecture aren’t intuitive, the number of question marks grows and makes it harder for users to comprehend how the system works and how to get from point A to point B. A clear structure, moderate visual clues and easily recognizable links can help users to find their path to their aim.

{dglb}images/content/artikel/webdesign/beyondis.jpg:images/content/artikel/webdesign/beyondis_tn.jpg:Beyondis.co.uk{/dglb}

Let’s take a look at an example. Beyondis.co.uk claims to be “beyond channels, beyond products, beyond distribution”. What does it mean? Since users tend to explore web-sites according to the “F”-pattern, these three statements would be the first elements users will see on the page once it is loaded.

Although the design itself is simple and intuitive, to understand what the page is about the user needs to search for the answer. This is what an unnecessary question mark is. It’s designer’s task to make sure that the number of question marks is close to 0. The visual explanation is placed on the right hand side. Just exchanging both blocks would increase usability.

{dglb}images/content/artikel/webdesign/ee.jpg:images/content/artikel/webdesign/ee_tn.jpg:ExpressionEngine{/dglb}

ExpressionEngine uses the very same structure like Beyondis, but avoids unnecessary question marks. Furthermore, the slogan becomes functional as users are provided with options to try the service and download the free version.

By reducing cognitive load you make it easier for visitors to grasp the idea behind the system. Once you’ve achieved this, you can communicate why the system is useful and how users can benefit from it. People won’t use your web site if they can’t find their way around it.

2. Don’t squander users’ patience

In every project when you are going to offer your visitors 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 visitor is to actually try it out. First-time visitors are willing to play with the service, not filling long web forms for an account they might never use in the future. Let users explore the site and discover your services without forcing them into sharing private data. It’s not reasonable to force users to enter an email address to test the feature.

As Ryan Singer — the developer of the 37Signals team — states, users would probably be eager to provide an email address if they were asked for it after they’d seen the feature work, so they had some idea of what they were going to get in return.

{dglb}images/content/artikel/webdesign/stikkit.jpg:images/content/artikel/webdesign/stikkit_tn.jpg:Stikkit{/dglb}

Stikkit is a perfect example for a user-friendly service which requires almost nothing from the visitor which is unobtrusive and comforting. And that’s what you want your users to feel on your web site.

{dglb}images/content/artikel/webdesign/bemite.jpg:images/content/artikel/webdesign/bemite_tn.jpg:Mite{/dglb}

Apparently, Mite requires more. However the registration can be done in less than 30 seconds — as the form has horizontal orientation, the user doesn’t even need to scroll the page.

Ideally remove all barriers, don’t require subscriptions or registrations first. A user registration alone is enough of an impediment to user navigation to cut down on incoming traffic.

 

3. Manage to focus users’ attention

As web-sites provide both static and dynamic content, some aspects of the user interface attract attention more than others do. Obviously, images are more eye-catching than the text — just as the sentences marked as bold are more attractive than plain text.

The human eye is a highly non-linear device, and web-users can instantly recognize edges, patterns and motions. This is why video-based advertisements are extremely annoying and distracting, but from the marketing perspective they perfectly do the job of capturing users’ attention.

{dglb}images/content/artikel/webdesign/enso.jpg:images/content/artikel/webdesign/enso_tn.jpg:Humanized{/dglb}

Humanized.com perfectly uses the principle of focus. The only element which is directly visible to the users is the word “free” which works attractive and appealing, but still calm and purely informative. Subtle hints provide users with enough information of how to find more about the “free” product.

Focusing users’ attention to specific areas of the site with a moderate use of visual elements can help your visitors to get from point A to point B without thinking of how it actually is supposed to be done. The less question marks visitors have, the better sense of orientationthey have and the more trust they can develop towards the company the site represents. In other words: the less thinking needs to happen behind the scenes, the better is the user experience which is the aim of usability in the first place.

 

4. Strive for feature exposure

Modern web designs are usually criticized due to their approach of guiding users with visually appealing 1-2-3-done-steps, large buttons with visual effects etc. But from the design perspective these elements actually aren’t a bad thing. On the contrary, such guidelines are extremely effective as they lead the visitors through the site content in a very simple and user-friendly way.

{dglb}images/content/artikel/webdesign/dibusoft.jpg:images/content/artikel/webdesign/dibusoft_tn.jpg:dibusoft{/dglb}

Dibusoft.com combines visual appeal with clear site structure. The site has 9 main navigation options which are visible at the first glance. The choice of colors might be too light, though.

Letting the user see clearly what functions are available is a fundamental principle of successful user interface design. It doesn’t really matter how this is achieved. What matters is that the content is well-understood and visitors feel comfortable with the way they interact with the system.

 

5. Make use of effective writing

As the Web is different from print, it’s necessary to adjust the writing style to users’ preferences and browsing habits. Promotional writing won’t be read. Long text blocks without images and keywords marked in bold or italics will be skipped. Exaggerated language will be ignored.

Talk business. Avoid cute or clever names, marketing-induced names, company-specific names, and unfamiliar technical names. For instance, if you describe a service and want users to create an account, “sign up” is better than “start now!” which is again better than “explore our services”.

{dglb}images/content/artikel/webdesign/eleven2.jpg:images/content/artikel/webdesign/eleven2_tn.jpg:Eleven 2{/dglb}

Eleven2.com gets directly to the point. No cute words, no exaggerated statements. Instead a price: just what visitors are looking for.

An optimal solution for effective writing is to

• use short and concise phrases (come to the point as quickly as possible),
• use scannable layout (categorize the content, use multiple heading levels, use visual elements and bulleted lists which break the flow of uniform text blocks),
• use plain and objective language (a promotion doesn’t need to sound like advertisement; give your users some reasonable and objective reason why they should use your service or stay on your web-site)

 

6. Strive for simplicity

The “keep it simple”-principle (KIS) should be the primary goal of site design. Users are rarely on a site to enjoy the design; furthermore, in most cases they are looking for the information despite the design. Strive for simplicity instead of complexity.

{dglb}images/content/artikel/webdesign/crc.jpg:images/content/artikel/webdesign/crc_tn.jpg:CRCBus{/dglb}

Crcbus provides visitors with a clean and simple design. You may have no idea what the site is about as it is in Italian, however you can directly recognize the navigation, header, content area and the footer. Notice how even icons manage to communicate the information clearly. Once the icons are hovered, additional information is provided.

From the visitors’ point of view, the best site design is a pure text, without any advertisements or further content blocks matching exactly the query visitors used or the content they’ve been looking for. This is one of the reasons why a user-friendly print-version of web pages is essential for good user experience.

{dglb}images/content/artikel/webdesign/finch.jpg:images/content/artikel/webdesign/finch_tn.jpg:Finch{/dglb}

Finch clearly presents the information about the site and gives visitors a choice of options without overcrowding them with unnecessary content.

 

7. Don’t be afraid of the white space

Actually it’s really hard to overestimate the importance of white space. Not only does it help to reduce the cognitive load for the visitors, but it makes it possible to perceive the information presented on the screen. When a new visitor approaches a design layout, the first thing he/she tries to do is to scan the 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.

{dglb}images/content/artikel/webdesign/cameron.jpg:images/content/artikel/webdesign/cameron_tn.jpg:Cameron{/dglb}

White space is good. Cameron.io uses white space as a primary design element. The result is a well-scannable layout which gives the content a dominating position it deserves.

 

8. 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.

 

9. Conventions are our friends

Conventional design of site elements doesn’t result in a boring web site. In fact,conventions are very useful as they reduce the learning curve, the need to figure out how things work. For instance, it would be a usability nightmare if all web-sites had different visual presentation of RSS-feeds. That’s not that different from our regular life where we tend to get used to basic principles of how we organize data (folders) or do shopping (placement of products).

With conventions you can gain users’ confidence, trust, reliability and prove your credibility.Follow users’ expectations — understand what they’re expecting from a site navigation, text structure, search placement etc. (see Nielsen’s Usability Alertbox for more information)

{dglb}images/content/artikel/webdesign/babelfish.jpg:images/content/artikel/webdesign/babelfish_tn.jpg:Babelfish{/dglb}

A typical example from usability sessions is to translate the page in Japanese (assuming your web users don’t know Japanese, e.g. with Babelfish) and provide your usability testers with a task to find something in the page of different language. If conventions are well-applied, users will be able to achieve a not-too-specific objective, even if they can’t understand a word of it.

Steve Krug suggests that it’s better to innovate only when you know you really have a better idea, but take advantages of conventions when you don’t.

 

10. Test early, test often

This so-called TETO-principle should be applied to every web 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. Accoring 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 site 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 visitors of your site wouldn’t have.

Bottom line: if you want a great site, you’ve got to test.

 

References

• Designing Effective User Interfaces by Suzanne Martin
• Summary on Web Design
• UID presentation (Flash)
• Research-Based Web Design & Usability Guidelines
• A Summary of Principles for User-Interface Design

 

This article highlights 5 further principles, heuristics and approaches for effective Web design — approaches which, used properly, can lead to more sophisticated design decisions and simplify the process of perceiving presented information.

Please notice that you might be interested in the following usability-related articles:

• 10 Usability Nightmares showcases usability nightmares you should avoid when designing functional and usable web-sites,
• 30 Usability Issues explains important usability issues, terms, rules and principles which are usually forgotten, ignored or misunderstood.

1. Use An Effective Marketing Principle

In order to sell a product or a service you need to be able to effectively inititate the dialogue with random visitors of your site. Since your visitors have actually come to your site, they are willing to hear to you and learn what you have to offer. So how do you approach this potential clientele to maximize your earning at the end of the month?

Suggested by Strong in 1925, AIDA is the effective marketing model which describes a common list of events that are very often undergone when a person is selling a product or service:

• A – Attention (Awareness): attract the attention of the customer.
• I – Interest: raise customer interest by demonstrating features, advantages, and benefits.
• D – Desire: convince customers that they want and desire the product or service and that it will satisfy their needs.
• A – Action: lead customers towards taking action and/or purchasing.
• Nowadays some have added another letter to form AIDA(S): S – Satisfaction – satisfy the customer so they become a repeat customer and give referrals to a product.

In this context customers should notice that AIDA is usually the way how potential buyers are tricked into buying products or services they actually don’t need. To gain users’ trust designers need to make sure that the site provides genuine information and there is no hidden context in which the content can be understood in a different way.

It’s also more effective to offer visitors concrete arguments, situations and ideas of how a product or a service can be used instead of bombarding them with loud and empty ad-slogans.

{dglb}images/content/artikel/webdesign/aida.jpg:images/content/artikel/webdesign/aida_tn.jpg:AIDA{/dglb}

Consider the example presented above. traffik follows the AIDA principle. If the visitors expect some information about a Content Management System they expectation is immediately confirmed with a brief introduction at the top of the site. Thus, potential customers are attracted and remain on the site (Attraction, a). The interest is then raised by showcasing features and benefits of the product (Interest, i).

To communicate how the service will satisfy user’s needs the brown info-block at the right hand at the bottom of the page is used (Desire, d). Finally the users are guided to “Take the tour” and “Free 30 day trial” buttons which attempt to lead customers towards purchasing (Action, a).

A lot of other models are known in order to sell, e.g. the BOSCH-Formula (developed by Peter Hubert):

• Be inquisitive, ask open questions
• Offer solutions, talk about the endresult benefits for the customer
• Stimulate the senses, let the customer test your product
• Cross your sales, think of all the necessary accessories
• Hit the closing point, sell when the customer is ready to buy.

2. Experiment With Few Colors

Dark body copy on white background and light body copy on black background are passive. Vibrant colors can help to highlight some specific elements of the site which you’d like to point users’ attention to.

However, you don’t need to use a vibrant palette to create an effective Web design. Sometimes it’s useful to pick a moderate number of colors and use them efficiently. Thus your visitors will immediately see what’s more important. It will also be easier for you to focus their attention on the most important areas of the site.Sidebarecreative.com uses only one dominant vibrant color — blue color stands for links, buttons and clickable elements. White stands for important information which summarizes the content of the current page. The rest is the content of the site with some light blueish hover effects. Excellent, modest and expressive use of colors. That’s effective.

{dglb}images/content/artikel/webdesign/sidebar.jpg:images/content/artikel/webdesign/sidebar_tn.jpg:Sidebar Creative{/dglb}

Sidebarecreative.com uses only one dominant vibrant color — blue color stands for links, buttons and clickable elements. White stands for important information which summarizes the content of the current page. The rest is the content of the site with some light blueish hover effects. Excellent, modest and expressive use of colors. That’s effective.

{dglb}images/content/artikel/webdesign/wilson.jpg:images/content/artikel/webdesign/wilson_tn.jpg:Wilson Miner{/dglb}

Wilson Miner uses green, blue and pink. The dominating green color looks fresh and comforting. Blue stands for the links and pink for the hover effect. Notice the structure of the site. Although only few colors are actually used, one can immediately recognize clickable areas and detect the different sections of the site.

3. Strive For Balance

In Web design balance is important because it provides users with some sense of closure and gives the feeling of permanence and stability. Balanced designs are easier to digest and to understand, because they create a visual hierarchy which clearly displays what is more important on the web-site and what is less important.

{dglb}images/content/artikel/webdesign/apple.jpg:images/content/artikel/webdesign/apple_tn.jpg{/dglb}

Apple‘s design is probably one of the best examples of the symmetrical (also called formal) balance. Single design elements have either very distinctive (above) or very similar (below) weight. They are placed on both sides of an imaginary vertical line on the page which goes through the middle of the user’s screen. The design is rather static and restful which makes it easier for the visitors to comprehend the information which is presented through it. Result: balance creates a simple visual harmony.

Why is Apple’s design so efficient? Because it’s user-centric and product-centric. The design of Apple’s site resembles a theatre stage where visitors are the audience and the product is the entertainer. Notice that the site presents only the product and nothing else. Apple manages to initiate the dialogue offering only most important options.

{dglb}images/content/artikel/webdesign/signalfeuer.jpg:images/content/artikel/webdesign/signalfeuer_tn.jpg:Signalfeuer{/dglb}

Signalfeuer.info uses an asymmetrical (informal) balance which allows for the more dynamic use of white space (and this is probably the main advantage of asymmetrical balance). The left block is smaller than the right one, however the site offers a very strong balance by using an impressive and balanced grid. Also the choice of colors is quite impressive.

According to the article Principles of Design, “asymmetrical balance may be unequal in position and intensity. To create asymmetrical balance, there must be an increase in intensity to compensate for the change in position. Intensity can be increased by changing size, shape, or tone. For a particular job, the designer might choose to position the elements to one side of the picture plane. The white space opposing must then act as a counter-balancing force.”

{dglb}images/content/artikel/webdesign/avalonstar.jpg:images/content/artikel/webdesign/avalonstar_tn.jpg:Avalonstar{/dglb}

This is exactly what has been done on Avalonstar.com. Notice the different shapes of blocks and “hanging” heading of the blocks. White space functions as a counter-balancing force to the content presented on the right.

Grid-based approach can be helpful or even necessary for achieving balanced design layouts.

4. Strive For Clarity

Independently of the design approach, the clarity of both layout and presented information should be given one of the highest priorities in the design process. If there is any chance of misunderstandings and ambiguious titles make sure to get rid of them or specifiy explicitly what is meant. Being more specific is usually better than being less specific.

To achieve clarity you don’t need to make use of “standard” design layouts or basic templates. Risk design experiments if you want to, but keep the clear visual hierarchy and structure of the site’s content in mind. The more organized your categories are, the easier it will be for your visitors to find their path through your site.

{dglb}images/content/artikel/webdesign/hovie.jpg:images/content/artikel/webdesign/hovie_tn.jpg:Hovie{/dglb}

Hovie.com displays an unusual yet very clear design solution. The site consists of five blocks; the first one stands for the main menu which appears when the site is loaded. Sub-menu appears when some section in the main menu is selected.

The current position is displayed by arrows next to the selected option in the navigation menu. In the content area a brief description and the caption of the images displayed above is presented. The design is consistent throughout all pages. Is there any possibilty to somehow misunderstand the design? Not really. That’s simple, clear and effective.

{dglb}images/content/artikel/webdesign/astheria.jpg:images/content/artikel/webdesign/astheria_tn.jpg:Astheria{/dglb}

Another example: Astheria.com focuses on white space and has a balanced grid-based design solution. Although the design is rather subtle and uses only one appealing color, you can see immediately where you are now and what options are available. Power of typography at its best. Unfortunately, the site doesn’t display which links have already been visited (Update: Kyle Meyer has added :visited-state now).

5. Address Your Users’ Needs

As web-developer you have the primary task to comfort your visitors, addressing their needs and providing them with sufficient clues for seamless and intuitive navigation. However, to achieve this you need more than just considering an average profile of your users and stick to the decision he/she will be happy with.

To maximize your exposure you have to consider various types and profiles of your visitors. You need to identify major groups and offer each group the functionality its members would be comfortable with. That doesn’t mean that you need to create multiple versions of your web-site; it rather means that you can integrate multiple levels of user interaction in one single design layout.

For instance, according to Shneiderman’s principles of User Interface Design, it’s important to enable frequent users to use shortcuts — to increase the pace of interaction use abbreviations, special keys, hidden commands etc.

Another possibilities would be bookmarklets, toolbars or some specific tools such as e.g. Flickr uploader. Offering these tools you’ll offer your users easier ways to use your service and they’ll have no need to search for alternatives.

Conclusion

Effective Web design doesn’t have to be colorful and pretty — it needs to be clear and intuitive. Make sure you help your visitors to understand the benefits of your web-site and offer them an easy way to explore and use your site.

Symmetrical and asymmetrical balance can be helpful in achieving a solid and clear design solution and thus provide a foundation for rich user interaction. To maximize your exposure, consider different types of users and offer them multiple levels of user interaction which would bring them back to your site.

 

In order to create a product that works, there are seven questions you should keep in mind about the product you’re designing, who will be using it, and how they’ll be using it.

1. Consider the product’s goal.

Consider the screwdriver. The goal of a screwdriver is pretty straight-forward: to drive screws. Although there’s certainly a lot of room for innovation in screwdriver design — there are screwdrivers with more ergonomic handles, ratchet-assemblies, magnetic tips, and exchangeable heads — ultimately everything in a screwdriver’s design is aimed towards the accomplishment of that single goal: driving screws.

Ultimately everything in a screwdriver’s design is aimed towards the accomplishment of that single goal: driving screws.

Now, consider a website like Amazon.com. What is the goal of Amazon’s website? Amazon has a lot of different uses, some intended by Amazon and its designers and some not intended — you can look up reviews, compare product prices while you’re in a store considering a purchase, promote your brand by leaving lots of reviews, scam shoppers by creating fake storefronts, collect images of book covers for a school project, search book text for half-remembered quotes, and so on.

But none of those are the reason the site was built. For the folks at Amazon, the website has one purpose: to sell stuff. All the features that allow those other uses were put in place as ways to sell more products. (And it seems to be working!)

2. Consider who will be using it.

Perhaps the single most important consideration in the design process — and the one most often forgotten — is the intended audience for the product. What works perfectly well for one user might be completely dysfunctional for another. And if the hoped-for users fall more into the second category than the first, you’ve got a problem.

Think about the way your parents or grandparents use their computers. Anyone with a bit of tech-savviness has probably fielded dozens of "tech support" calls from family members who are simply baffled by things like adding an email account to their email program, downloading family pictures from the Web, or dealing with a too-full hard drive.

Why do people have so much trouble with their computers?

• They don’t know enough about how computers work.
• They don’t have enough experience with computers.
• They don’t have time to figure things out.
• They don’t enjoy tinkering until they find a solution to a computer problem.
• The manuals are written in a dense, uninviting language that they find boring and difficult to comprehend.

Considering the kinds of problems they have can give us a clue about the kinds of questions designers should be asking about their audience.

• What kind of knowledge do your users bring with them?
• How much experience do they have?
• What kind of time do they have? Are they looking for a leisurely diversion or do they want to get in and out fast?
• What kind of personalities do they have?
• How much support will they need, and what form should it take?

Obviously there are likely to be several audiences for any given product. Plenty of computer users have the knowledge, experience, and personality types to easily do whatever they choose to do on their computers. If you’re designing a niche product — a website for Linux users, for example — perhaps you can get away with directing yourself towards only one, narrow audience. In most cases, though, a product has to work equally for all its potential users if it’s to accomplish its goal.

3. Consider what your audience intends to do with it.

As we saw in the case of Amazon.com, there are a lot of ways that users use a product besides those that directly fulfill the product’s main goal. In fact, every user comes to a product with his or her own intention — and they are rarely the goals that designers have in mind. For example, nobody in the history of humankind has ever wanted to record what was on channel Three between 9 pm and 10pm on Thursday the 27th — yet for years that was how VCR designers insisted we program our VCRs. No surprise, then, that few people programmed their VCRs.

Instead, what people want to do is record House tomorrow night. Likewise, your dad doesn’t want to configure his POP3 and SMTP settings. He doesn’t even want to send and receive email. He wants to send pictures of the baby to Aunt Jill in Iowa. Engineers and designers have long suffered from a tendency to substitute concrete specifications and processes for fuzzy user behaviors — but users don’t do that.

Adequate knowledge of who your audience is requires some sense of what their intentions are and how they are going to think about your product. That’s what Tivo did when they replaced the complicated process of recording a show on a VCR with a process that better reflected their users’ intentions — just select a show you want to record and hit "Record".

4. Is it clear how to use it?

The best design, as often said, "speaks for itself". It is immediately clear — at least to its target audience(s) — what a product does and how to use it. Clarity is key to functional design. Probably one of the best-designed objects in the world is the ball. With minimal instruction even infants can use it!

In contrast, look at the website above. That’s the home page for Chipotle , the Mexican fast food restaurant known for its use of free-range, organic, and locally-grown ingredients. Not that you’d know that from the homepage. What you know is a) they have a logo, and b) there’s something you should know about jalapeño peppers. If there were no food scare involving jalapeños, you’d see only the logo. What do you do? We can assume the site has a goal — probably to get you to buy some tasty Mexican food — but how do you, the visitor, fulfill your own goal of finding what you want to know about Chipotle?

This is a classic example of what Vincent Flanders calls "mystery meat navigation" (presumably free-range, organically-grown mystery meat), a website navigation system so clever, so stylish, that visitors have no idea what the site does or how to do it. Make your product difficult enough to understand and it won’t get used at all — which means it doesn’t achieve its goal, which in turn means it doesn’t function.

5. How does your user know it’s working?

Remember in the Bad Old Days of the Web, when you’d make a purchase online and the "Submit" button would say underneath something like:

Please press the "Submit" button only once. Pressing more than once will duplicate your purchase.

We’ve come a ways since then, but it’s surprising how many times you still come across a website feedback form that doesn’t tell you when your message has been sent, or a search form that doesn’t tell you that it’s working on your request.

This problem is by no means limited to the online world. How often do you double-check to see that your alarm clock is set to go off, and at the right time, before you can relax and go to sleep? Or maybe you’ve run into this problem: you hit "Program" on your CD player (assuming you still have one) and key in the tracks you want to hear, but aren’t sure whether to hit "Program" again or just hit "Play" — and if you hit the wrong one, whether your program will be lost and you’ll have to re-do it.

These are all examples of inadequate feedback — it’s not clear whether you’ve completed the task you inteded to do or if there are more steps still required. While technically a product is functioning even if you don’t know it’s working, it’s not functioning well from the user’s standpoint — and products that don’t function well tend not to create very loyal users.

6. Is it engaging to your users?

One of the great products of recent years, at least in terms of engagement, is the Blackberry. Blackberry owners can’t stop fiddling with their devices — they check their email, flick the trackball around, check email again, send a text, scroll around the home screen, and then do it all over again. And again.

It’s no accident it’s earned the nickname "Crackberry."

{dglb}images/content/artikel/webdesign/paper.jpg:images/content/artikel/webdesign/paper_tn.jpg{/dglb}

Usability testing and paper prototyping are common methods to understand the way your target group will interact with you web-site and find out if it is engaging to your users.

Good design draws users in, whether through visual appeal, feel, ease of use, or sheer amazement. Anyone who has ever picked up a well-made hand tool and felt the desire to build something has experienced this — the tool just feels right.

This is, in part, the aesthetic value of the design — we are naturally drawn to things we find pretty. But aesthetics are hardly the limit of what makes something engaging. There are plenty of websites out there that are downright hideous — but they work. Those long form sales pages that litter the Web hawking "get rich quick" programs and miracle cures (like this landing page which won the SEOmoz landing page contest last year) are as ugly as human ingenuity can make them — but they consistently succeed in leading visitors (at least the kind of users that the pages are designed for) to the inevitable sale.

7. How does it handle mistakes?

How often have you visited a web page, realized it didn’t have the information you were looking for, clicked the "Back" button, and ended up on the same page again?

You made a mistake, to be sure — you clicked the wrong link — but that happens. It was the designer, though, who decided to make your mistake difficult to undo. Good design takes into account the possibility that users make mistakes.

Unless your only desired user is a member of that very small demographic of people who don’t ever make mistakes, your design should accommodate and even anticipate mistakes as much as possible. Web designers have come up with all sorts of ways to accommodate visitors’ mistakes, from persistent menus and "breadcrumbs" to 404 pages ("Page Not Found" pages) that link to the pages the websurfer was likely to have been looking for.

Designers who don’t make room for — and offer solutions to — users’ mistakes create non-functioning products.

Conclusion

Design is necessarily a relationship between users with problems to solve and designers with solutions to offer. Too often, though, users are left out of the designer’s considerations. Whoever designed the Chipotle site, for instance, had no conception of how any part of their target audience would approach the site. They had a clever idea — "it’s minimalism, man!" — and ran with it, to the detriment of potential diners, and possibly to the detriment of Chipotle.

Unless your specialty is creating concepts that have no possibility of being made into actual products, the ultimate goal is to design things that will be used. Think about how and why your product will be used, and by whom, as a central part of the design process to assure that your designs not only can be used, but will.

 

Effektiv ist übersichtlich

Wo bin ich hier?
Wo kann ich hin?
Wie komme ich dahin?
Und wie komme ich wieder zurück?

Fragen, die sich die Besucher stellen. Fragen, die ein Webdesign sehr sehr schnell beantworten sollte.

Wer zum ersten Male auf eine Webseite kommt, muss sich schnell orientieren können. Das Webdesign muss ihm schnell signalisieren, was ihn hier erwartet. Headlines, Navigationen, Logos, Teaser sollten ihm einen schnellen Überblick gewährleisten. Ein übersichtlicher, nicht überladender Seitenaufbau hilft dabei. Es ermöglicht ein schnelles Scannen der Inhalte.

Dazu sollten die Inhalte einer Struktur folgen.
Die Menschen lieben Strukturen, also geben wir Ihnen welche. Effektives Webdesign schafft klare Strukturen.

Headlines, Bilder, Icons, Farben schaffen Bedeutungen. Diese sollten dem Betrachter Halt geben, Anhaltspunkte geben beim Scannen.

Übersicht schaffen und Struktur geben – DAS ist effektives Webdesign.

Effektiv ist lesbar

Webdesign ist vor allem Typografie, also die Gestaltung des Textes, denn die meisten Informationen, welche wir auf Webseiten konsumieren, sind geschriebener Text.

Navigationspunkte, Buttons, Headlines, Produktbeschreibungen, Artikel – alles Texte. Texte, die gelesen werden wollen.

Texte, die wir lesen wollen. Schnell lesen wollen, ohne, dass das Lesen schon nach kurzer Zeit anstrengend wird, weil die Schrift zu klein ist, die Schriftart unpassend oder die Zeilenabstände zu gering sind. In solchen Fällen vermeiden wir das Lesen auch oft schon unbewusst im voraus.

Effektives Webdesign macht Texte leserlich, sprich einfach lesbar.
Ausreichende Schriftgrösse, gut lesbare Schriften, die im Idealfall auch noch die Thematik des Textes unterstützen. Dazu Zeilenabstände, die diese Bedeutung auch verdienen. Und eine Textfarbe, die ausreichend Kontrast zum Hintergrund hat.

Das ist gute Typografie.

Gute Typografie ist effektives Webdesign.

{dglb}images/content/artikel/webdesign/fanta.jpg:images/content/artikel/webdesign/fanta_tn.jpg{/dglb}

{dglb}images/content/artikel/webdesign/fly.jpg:images/content/artikel/webdesign/fly_tn.jpg{/dglb}

Effektiv ist ästhetisch ansprechend

Unsere Wahrnehmung verläuft vor allem über das visuelle. Und Webseiten sind vor allem ein optisches Medium.

Hinzu kommt in den letzten Jahren / Jahrzehnten die Entwicklung, dass „Design“ ein immer grösserer Imagefaktor und Unterscheidungsmerkmal wird. IKEA, Apple und H&M zeigen dies exemplarisch. Nicht nur bei hochwertigen Produkten ist Design wichtig, sondern auch bei günstigeren.

Ein Screendesign sollte also auch einen optisch hochwertigen Anspruch erfüllen. Das muss nicht bedeuten, dass jede Webseite hochwertig wirkt, sondern dass das Design professionell ist. Eine Webseite für einen Spielzeug-Shop muss nicht hochwertig sein, aber optisch ansprechend.

Wir lieben und erwarten gutes Design. Auch auf einer Webseite.ybr /> Das betrifft die Farbwahl, die Typografie, das Raster, die Struktur der einzelnen Gestaltungselemente usw.

Professionelles Design schafft Bedeutungen und führt den Betrachter. Gleichzeitig schafft es Emotionen und vermittelt unbewusst und jederzeit die Positionierung der Webseite.

Eine Webseite, die ästhetisch ansprechend ist, ist effektiv.

{dglb}images/content/artikel/webdesign/start.jpg:images/content/artikel/webdesign/start_tn.jpg{/dglb}

{dglb}images/content/artikel/webdesign/weblounge.jpg:images/content/artikel/webdesign/weblounge_tn.jpg{/dglb}

Effektiv ist leidenschaftlich

Wir sind emotionale Wesen.

Wir können uns für noch so rational halten (was die meisten von uns auch machen), wir entscheiden vor allem emotional. Lange schon bevor unser Gehirn sich rationale Begründungen ausdenkt.

Daher sollte uns eine Webseite auch emotional ansprechen. Uns bestimmte Emotionen vermitteln oder in uns hervorrufen.

Bilder sprechen uns emotional an, direkter und viel schneller als es Text je könnte. Und wenn Bilder emotional sind, dann sind es Farben erst recht, als Basis eines jeden Bildes.

Farben (und damit eben auch Bilder) erzielen unmittelbar eine bestimmte Wirkung.

Mit Farben lassen sich unkompliziert bestimmte Emotionen erzeugen. Mit ihnen lassen sich Emotionen steuern. Der gezielte Einsatz von Farben kann beim Besucher der Webseite eine bestimmte Emotion hervorrufen.
Effektives Webdesign nutzt diese Emotionalität, denn wie gesagt, wir sind emotionale Wesen, für seine Zwecke.

Farben und Bilder sollten also keinen Selbstzweck erfüllen, sondern eine bestimmte Aufgabe erfüllen!

Farben und Bilder gezielt eingesetzt – das ist effektives Webdesign.

{dglb}images/content/artikel/webdesign/trixi.jpg:images/content/artikel/webdesign/trixi_tn.jpg{/dglb}

{dglb}images/content/artikel/webdesign/eden.jpg:images/content/artikel/webdesign/eden_tn.jpg{/dglb}

Effektiv ist benutzerfreundlich

Das klingt natürlich immer gut – „benutzerfreundlich“.

Und klingt schon fast so logisch, dass man meinen sollte, alle Webseiten sind es sowieso. Dem ist aber nicht so.

Benutzerfreundlichkeit wird auch oft als Usability bezeichnet. Und die Usability betrifft alle Aspekte der Webseitenentwicklung und sollte von Anfang an bedacht werden.

Ohne eine hohe Usability kann eine Webseite kaum ihr Ziel erreichen.
Eine hohe Usability ist so etwas wie ein Qualitätsmerkmal einer Webseite. Der Anwender erreicht sein Ziel effektiv und effizient.

Benutzerfreundlichkeit betrifft die Navigation, deren Struktur und die Benennung der Navigationspunkte. Es betrifft die Inhalte, die gut strukturiert und verständlich geschrieben sein müssen. Es betrifft das Design, das eine eindeutige visuelle Hierarchie erzeugen muss. Es betrifft die technische Umsetzung, die eine schnelle und einfache Bedienung der Webseite auf jedem Gerät sichert.

Eine benutzerfreundliche Webseite ist effektiv.

{dglb}images/content/artikel/webdesign/bellroy.jpg:images/content/artikel/webdesign/bellroy_tn.jpg{/dglb}

{dglb}images/content/artikel/webdesign/wn.jpg:images/content/artikel/webdesign/wn_tn.jpg{/dglb}

Effektiv ist flexibel

Der eine sitzt an seinem Schreibtisch, seit vielen Stunden, und schaut auf einen 30 Zoll Monitor.

Der andere sitzt in der Bahn vor seinem Smartphone und will mal eben schnell was nachschauen.

Und der andere hat sich nur kurz vor seinen Laptop gesetzt und druckt sich seine gewünschten Informationen aus.

Die Nutzungssituation von Anwendern einer Webseite kann so unterschiedlich sein.

Ein Webdesign passt sich dem Anwender, seiner Benutzungssituation und seinem Ausgabegerät an. Es ist nicht festgelegt auf eine bestimmte Situation, auf ein bestimmtes Gerät und vor allem nicht auf eine bestimmte Bildschirmgrösse.

Das waren aber Webseiten lange. Sehr lange. 1.024 Pixel Breite war der Standard an dem sich Webdesigner orientiert haben. Seit dem kometenhaften Aufstieg von Tablets und Smartphones ist das Bewusstsein für alternative Nutzungen aufgekommen und die technischen Voraussetzungen dank Media Queries gegeben.

Webseiten sind per se flexibel. Versuchen wir ihnen nur möglichst wenig davon zu nehmen.

Responsive Webdesign ist das Schlagwort dazu. Aber es ist nur ein Aspekt. Ein möglichst barrierefreier Zugang zur Webseite, ein behutsamer Umgang mit Effekten und Animationen, ein klarer Kontrast zwischen Textfarbe und Hintergrundfarbe, die Beachtung möglicher Sehbeeinträchtigungen (wie Farbenblindheiten) und eine optimierte Druckversion sind weitere wichtige Aspekte.

Je flexibler eine Webseite ist, umso effektiver ist sie.

{dglb}images/content/artikel/webdesign/flexibles-webdesign.jpg:images/content/artikel/webdesign/flexibles-webdesign_tn.jpg{/dglb}

Effektiv ist schnell ladend

Du kennst das.

Du landest auf einer Webseite, bist gespannt auf den Inhalte und musst warten … und warten … und warten …
Und weg bist du oder zumindest bereits schwer genervt. Zu Recht!

Die Versuchung ist natürlich gross, tolle Effekte dank jQuery und Co. einzubauen. Lightboxen, Slider und so weiter. Und dazu schöne grossformatige Hintergrundbilder zu verwenden.

Dank schnellen Internetverbindungen (vor allem beim Webdesigner im Büro) sind enorme Datenmengen auch kein Problem mehr. Das sieht aber nicht bei jedem so aus. Alleine ein Blick auf die mobile Nutzung zeigt, dass Webseiten mit wenig Speicherbedarf klar im Vorteil sind.

Der Anwender will nicht lange auf sich ladende Webseiten warten, mögen die Ladeanimationen noch so nett sein.

Also klar formuliert: Jedes Bit sollte gut überlegt und berechtigt sein. Dateien sollten optimiert sein (Bilddateien komprimiert, Quellcodes minimiert usw.). Skripte nur geladen werden, wenn ihre Bedeutung, bzw. ihre Funktion auch wirklich gebraucht werden. Alles andere verschwendet nur die kostbare Zeit der Besucher.

Oder wie es Christian Heilmann formuliert: "If your website is 15MB it’s not HTML5, it’s stupid.".

Eine schnell ladende Webseite, ist effektiv.
Performance ist effektives Webdesign.

{dglb}images/content/artikel/webdesign/effektives-webdesign-ladebalken.jpg:images/content/artikel/webdesign/effektives-webdesign-ladebalken_tn.jpg{/dglb}

Webdesign muss also effektiv sein

Die Beachtung dieser sieben Kriterien sorgt dafür, dass eine Webseite gut ist.

Dass sie effektiv ist.

Effektivität ist ein angenehmes Nutzungserlebnis.

Dann bleibt der Besucher auch auf der Webseite oder kommt wieder oder kauft ein oder …

 

To the observer, it appears as if a single light moves around the marquee, traveling from bulb to bulb, when in reality it’s a series of bulbs turning on and off and the lights don’t move it all.

This observation led to a set of descriptive principles about how we visually perceive objects. These principles sit at the heart of nearly everything we do graphically as designers.

This is the start of a series of posts about design principles. It begins with these principles of gestalt, because many of the design principles we follow arise out of gestalt theory. In this post, I’ll walk you through a little bit of theory and offer some basic definitions of gestalt principles.

Future posts in this series will consider aspects of design like space, balance and visual hierarchy. In upcoming posts, I’ll point out which gestalt principles influence the aspects of design being discussed, and I’ll offer more practical uses and examples of how the gestalt principles are used in Web design.

 

The Key Ideas Behind Gestalt Theory

The whole is other than the sum of the parts.

— Kurt Koffka

The quote above is gestalt in a nutshell. When human beings see a group of objects, we perceive their entirety before we see the individual objects. We see the whole as more than the sum of the parts, and even when the parts are entirely separate entities, we’ll look to group them as some whole.

There are several key ideas behind gestalt:

• Emergence (the whole is identified before the parts)
  Emergence is the process of forming complex patterns from simple rules. When attempting to identify an object, we first seek to identify its outline. We then match this outline pattern against shapes and objects we already know to find a match. Only after the whole emerges through this outline pattern matching, do we start to identify the parts that make up the whole.
  When designing, keep in mind that people will identify elements first by their general form. A simple well defined object will communicate more quickly than a detailed object with a hard to recognize contour.
• Reification (our mind fills in the gaps)
  Reification is an aspect of perception in which the object as perceived contains more spatial information than what is actually present. As we attempt to match what we see to the familiar patterns we have stored in memory, there isn’t always an exact match. Instead we find a near match and then fill in the gaps of what we think we should see.
  Reification suggests that we don’t need to present the complete outline in order of viewers to see it. We can leave out parts of the outline as long as we provide enough of it to allow for a close enough pattern match. You can see examples of this a little further down under the principle of closure.
• Multi-stability (the mind seeks to avoid uncertainty)
  Multi-stability is the tendency of ambiguous perceptual experiences to move unstably back and forth between alternative interpretations. Some objects can be perceived in more than one way. An example from below in the section of figure/ground is one you’ve likely seen before. The image can be seen as either two faces in profile or as a vase.
  You can’t see both at once. Instead you bounce back and forth quickly between the two stable alternatives. One will tend to be your dominant perception and the longer you go without begin able to see the other, the harder it will be to see that other perception.
  From a design perspective if you want to change someone’s perception, don’t try to change it all at once. Find a way to get them to see an alternative. Then work to strengthen that alternative view, while weakening the original.
• Invariance (we’re good at recognizing similarities and differences)
  Invariance is a property of perception in which simple objects are recognized independent of their rotation, translation and scale. Since we often encounter objects from different perspectives, we’ve developed an ability to recognize them despite their different appearance.
  Imagine if you could only recognize someone you knew if they stood directly in front of you and faced you, but you couldn’t recognize them once they turned in profile. Despite the different visual perspective we can still recognize people.

You can see these ideas in play in the principles below. The main idea is that gestalt principles are about perception and what is visually communicated by objects. The principles speak to the core of the visual language within which we work.

 

Gestalt Principles

Most of the principles are relatively easy to understand. There’s a common theme running through many of them.

All else being equal, elements that are related by X tend to be grouped perceptually into higher-order units.

— Stephen Palmer

Many of the principles below will follow this pattern. The principles either define X or the higher order that’s perceived.

LAW OF PRÄGNANZ (GOOD FIGURE, LAW OF SIMPLICITY)

People will perceive and interpret ambiguous or complex images as the simplest form(s) possible.

This is the fundamental principle of gestalt. We prefer things that are simple, clear and ordered. Instinctually these things are safer. They take less time for us to process and present less dangerous surprises.

When confronted with complex shapes, we tend to reorganize them into simpler components or into a simpler whole. You’re more likely to see the left image above composed of the simple circle, square and triangle like you see on the right than as the the complex and ambiguous shape the whole forms.

In this case, seeing three distinct objects is simpler than seeing one complex object. In other cases, it’s simpler to see a single object, which brings us to…

CLOSURE

When seeing a complex arrangement of elements, we tend to look for a single, recognizable pattern.

As with Prägnanz, closure seeks simplicity. Closure is the opposite of what we saw in the Prägnanz image above where three objects were simpler than one. With closure, we instead combine parts to form a simpler whole. Our eye fills in the missing information to form the complete figure.

In the left image above, you should see a white triangle even though the image is actually comprised of three black Pac-Man-like shapes. On the right image, you see a panda even though the figure is several random shapes. Seeing the triangle and panda is simpler than trying to make sense of the individual parts.

Closure can be thought of as the glue holding elements together. It’s about the human tendency to seek and find patterns.

The key to closure is providing enough information so the eye can fill in the rest. If too much is missing, the elements will be seen as separate parts instead of a whole. If too much information is provided, there’s no need for closure to occur.

SYMMETRY AND ORDER

People tend to perceive objects as symmetrical shapes that form around their center.

Symmetry gives us a feeling of solidity and order, which we tend to seek. It’s our nature to impose order on chaos. This principle leads us to want balance in composition, though our compositions don’t need to be perfectly symmetrical to be in balance.

In the image above, you should see three pairs of opening and closing brackets. The principle of proximity, which we’ll get to later in this post, might suggest we should see something else. That suggests symmetry takes precedence over proximity.

Since our eyes will quickly find symmetry and order, these principles can be used to effectively communicate information quickly.

FIGURE/GROUND

Elements are perceived as either figure (the element in focus) or ground (the background on which the figure rests).

Figure/ground refers to the relationship between positive elements and negative space. The idea is that the eye will separate whole figures from their background in order to understand what’s being seen. It’s one of the first things people will do when looking at any composition.

The figure/ground relationship can be either stable or unstable depending on how easy it is to determine which is which. The classic example of where the relationship is unstable is the left image above. You either see a vase or two faces depending on whether you see the black color as figure and the white as ground, or vice versa. That you can easily bounce back and forth between the two perceptions demonstrates the unstable relationship.

The more stable the relationship, the better we can lead our audience to focus on what we want them to see. Two related principles can help us:

• Area
  The smaller of two overlapping objects is seen as figure. The larger is seen as ground. You can see this in the right image above. The smaller shape is the figure regardless of color.
• Convexity
  Convex rather than concave patterns tend to be perceived as figures.

UNIFORM CONNECTEDNESS

Elements that are visually connected are perceived as more related than elements with no connection.

In the image below, lines connect two pairs of elements. This connection leads us to perceive that the connected elements are related to each other in some way.

Of all the principles suggesting objects are related, uniform connectedness is the strongest. In the image above, even though we see two squares and two circles, we see the square–circle pairs as more strongly related because they are visually connected.

Notice that the lines don’t need to touch the elements for the connection to be perceived.

COMMON REGIONS

Elements are perceived as part of a group if they are located within the same closed region.

Another way to show a connection between elements is to enclose them in some way. Everything inside the enclosure is seen as related. Everything outside the encloser is seen as separate. The circles in the image below are all the same, yet we see two distinct groups, with the circles in each enclosure related in some way.

The typical way to show a common region is to draw a box around the related elements like I’ve done above. Placing the elements on a different background color than their immediate surroundings will also work.

PROXIMITY

Objects that are closer together are perceived as more related than objects that are further apart.

Proximity is similar to common regions but uses space as the enclosure. When elements are positioned close to one another, they are seen as part of a group rather than as individual elements. This is especially true when the elements in the group are closer to each other than they are to any elements outside the group.

The objects don’t need to be similar in any other way beyond being grouped near each other in space in order to be seen as having a proximity relationship.

CONTINUATION

Elements arranged on a line or curve are perceived as more related than elements not on the line or curve.

It’s instinct to follow a river, a path or a fence line. Once you look or move in a particular direction, you continue to look or move in that direction until you see something significant or you determine there’s nothing significant to see.

Another interpretation of this principle is that we’ll continue our perception of shapes beyond their ending points. In the image above, we see a line and curve crossing instead of four distinct line and curve segments that meet at a single point.

COMMON FATE (SYNCHRONY)

Elements that move in the same direction are perceived as more related than elements that are stationary or that move in different directions.

Regardless of how far apart the elements are placed or how dissimilar they appear, if they are seen as moving or changing together, they’ll be perceived as being related.

The elements don’t need to be moving for the principle of common fate to be present. It’s more that they are seen as having a common destination. For example, if four people are clustered together, but two are observed heading toward the right, they will be seen as having a common fate. Even if two are only looking in the same direction, they’ll be perceived as having a common fate.

In the image above, the arrows are enough to indicate the elements share a common fate. While movement or change isn’t necessary, both are still a stronger indication of common fate than things like arrows or looking in the same direction which only imply movement.

PARALLELISM

Elements that are parallel to each other are seen as more related than elements not parallel to each other.

This principle is similar to the common fate principle above. Lines are often interpreted as pointing or moving in some direction. Parallel lines are seen as either pointing or moving in the same direction and are thus related.

It should be noted that for parallelism to be perceived, the lines can also be curves or shapes, though with the latter the shapes should be somewhat line-like in order for them to appear parallel.

SIMILARITY

Elements that share similar characteristics are perceived as more related than elements that don’t share those characteristics.

Any number of characteristics can be similar: color, shape, size, texture, etc. When a viewer sees these similar characteristics, they perceive the elements as being related due to the shared characteristics.

In the image below, red circles are seen as related to the other red circles and black circles to black circles due to the similarity in color. Red and black circles are seen as dissimilar to each other even though they’re all circles.

An obvious place to find similarity online is in the color of links. Typically, links within content will be styled the same way, often blue and underlined. This lets the viewer know that the different pieces of text are related. Once one is discovered to be a link, it communicates the others are also links.

FOCAL POINTS

Elements with a point of interest, emphasis or difference will capture and hold the viewer’s attention.

This principle suggests that our attention will be drawn toward contrast, toward the element that is unlike the others in some way. In the image below, your eye should be drawn to the square. It’s a different shape and color from the other elements. I’ve also given it a drop shadow to further emphasize it.

The principle of focal points likely arises out of our need to quickly identify the unknown to alert us to potential danger.

The principles of similarity and focal points are connected, and focal points can’t be seen without the presence of similarity among other elements.

PAST EXPERIENCES

Elements tend to be perceived according to an observer’s past experience.

Past experience is perhaps the weakest gestalt principle. In conjunction with any of the other principles, the other principle will dominate over the past experience principle.

Past experience is unique to the individual, so it’s difficult to make assumptions about how it will be perceived. However, there are common experiences we all share. For example, a lot of color meaning arises out of past experience.

Having seen traffic lights throughout our lives, we expect red to mean stop and green to mean go. You probably see the image above as a traffic light on its side, because of the three common colors. That’s past experience at work.

Many of our common experiences also tend to be cultural. Color again provides examples. In some countries, white is seen as pure and innocent and black as evil and death. In other countries, these interpretations are reversed. Conventions can arise when the experience is commonly shared, though again it’s important to remember that we don’t all share the same experiences.

 

Summary

Gestalt principles are important to understand. They sit at the foundation of everything we do visually as designers. They describe how everyone visually perceives objects.

The principles above should be relatively easy to understand. For most of them, the definition and the image are probably all you needed to understand the principle. At the same time, understanding the basic ideas of these principles isn’t the same as understanding how they influence design.

In the coming weeks we’ll look more at how gestalt influences design. We’ll see how symmetry helps us balance a composition and how combining focal points and similarity allows us to create a visual hierarchy in a design.

Before we get to either, though, we’ll take a deeper look at the figure/ground relationship and consider the space in which we place elements. That’s where I’ll pick up the series.

 

Resources

• Visual Design Principles
• Laws of Organization in Perceptual Forms (Max Wertheimer)
• Gestalt principles
• Gestalt Principles & Web Design
• The Gestalt Principles
• Gestalt principles of form perception
• Gestalt Principles Applied in Design
• Gestalt Theory of Visual Perception
• 6 Principles of Gestalt Psychology That Can Improve Your Photography
• Gestalt
• Gestalt Principles of Art and Design

I especially recommend this five-part series by Andy Rutledge.

• Gestalt Principles of Perception 1: Figure Ground Relationships
• Gestalt Principles of Perception 2: Similarity
• Gestalt Principles of Perception 3: Proximity, Uniform Connectedness, and Good Continuation
• Gestalt Principles of Perception 4: Common Fate
• Gestalt Principles of Perception 5: Closure

 

Note: This is the second post in a series on design principles. You can find the first post in the series here:

• Part 1: Design Principles: Visual Perception and the Principles of Gestalt

 

The Figure-Ground Relationship

The gestalt principle that applies most to space is that of figure-ground. Everything in a design of yours will be seen as one or the other, and the relationship between them is mutually exclusive. Neither can be perceived except in relation to the other, and changing one is impossible without changing the other as well.

The figure-ground relationship is also complementary. Figure and ground can enhance or detract from each other, and organizing the two in relation to each other is one of the more important aspects of design. It sets a context for how your design communicates and how it will be interpreted.

White space is to be regarded as an active element, not a passive background.

— Jan Tschichold

Consider the three panels in the image above. On the left, we see a series of black lines with an equal amount of white space between them. Together, the black lines and white space form a gray field, each contributing equally to the result. Removing the space (in the second panel) completely changes the field, rendering it as a solid-black shape. Not only is the space gone, but the individual elements have become a single element.

In the third panel, two of the black lines have been removed. This activates the space, making it appear to be sitting on top of the gray field. The ground has become the figure and adds more depth to the design.

There are three types of figure-ground relationships:

• Stable (above left)
  It’s clear what’s figure and what’s ground. One or the other usually dominates the composition.
• Reversible (above center)
  Both figure and ground attract the viewer’s attention equally. This creates tension, whereby either can overtake the other, leading to a dynamic design.
• Ambiguous (above right)
  Elements can appear to be both figure and ground simultaneously. They form equally interesting shapes, and the viewer is left to find their own entry point into the composition.

Depending on which relationship you set up and how you balance both figure and ground,you direct the audience to look at different parts of the design and interpret what they see in different contexts.

Figure-ground is not the only gestalt principle in which space plays a prominent role. Two others are these:

• Proximity
  Proximity uses space to connect and separate elements by enclosing some elements in space. An example we might take for granted is paragraphs of text on the page. The space between paragraphs is greater than the space between lines of text within a paragraph.
• Closure
  This makes use of space as gaps between elements. Viewers fill in the gaps with their own information to complete a whole from the parts. Too much space and no closure occurs. Too little space and no closure is needed. Only the correct balance between space and filled-in space will activate the space and lead to closure.

 

Space As A Design Element

Think about music for a moment. If every note or chord were played at the same time, you wouldn’t have music. You’d have noise. Music occurs when sounds are contrasted against silence. Varying the pattern of sound and silence creates rhythm and melody. Without the silence, there is no music.

Space performs the same function visually. It gives positive elements room to breathe. It gives the eye freedom to move through a design and to discover the elements it’s looking for. The positive is seen only in contrast with the negative. Without space, you don’t have design. You have visual noise.

Unless noise is what you’re trying to communicate, lean toward space. People are less likely to complain about too much space than about too little.

Space can do the following:

• establish contrast, emphasis and hierarchy;
• generate drama and tension;
• provide visual rest between groups of elements.

As the figure-ground relationship implies, you have space only when something is present inside it. Prior to the addition of positive elements, space is undefined. The figure-ground relationship has to be established before space can exist and its communication begins.

One of the more important functions of space is to improve readability and legibility. Macro-space makes text more inviting. Micro-space makes it more legible.

• Micro-space
  This is space within elements in a group. It’s the space between letters, words and paragraphs.
• Macro-space
  This is space between major elements. It separate elements or groups of elements and provides avenues for the eye to follow and places to rest between elements.

Space correlates to quality. More space entails fewer elements or a rarity of elements. Compare high-end and discount retail stores. Which one typically has more space inside, and which one packs products into every bit of available space? What does the space communicate to you?

Space can also convey attributes other than quality, such as:

• sophistication,
• simplicity,
• luxury,
• cleanliness,
• solitude,
• openness.

You waste space when you fail to consider it. You can waste space by overfilling it. You can waste space by trapping it inside elements of a design and not allowing it to connect to other space in the design.

Design is ultimately an arrangement of shapes, and that includes the shapes formed by space. Don’t be afraid to use space. View it as an important design element under your control.

 

A Few Examples Of Space In Websites

To better use space, you first need to become consciously aware of it. Learn to recognize space in different designs. Notice the shape it forms, and think about what the space is communicating. To that end, let’s look at the design of some websites, taking notice of how space is used.

 

OLD GUARD

The design of Tom Johnson’s Old Guard uses plenty of white space, giving text and other elements room to breathe. There’s no mistaking what’s figure and what’s ground.

{dglb}images/content/artikel/webdesign/old-guard.jpg:images/content/artikel/webdesign/old-guard_tn.jpg{/dglb}

Information is contained and separated by space (recall the principle of proximity), distinguishing groups of elements. You can easily tell where one post ends and the next begins, solely by the space between them.

The main content is slightly off center on the page, with generous space on either side. This space is occasionally interrupted by elements, activating both the space and the interrupting elements. This helps to draw attention to the area and especially the elements within.

 

HEROKU’S STAUS PAGE

The image below shows part of the status page for Heroku as being mostly space. I happened to catch the website on a particularly good day, because additional positive elements would mean more reported incidents on the platform. Here, more white space signifies better service.

{dglb}images/content/artikel/webdesign/heroku-status-broken-space.jpg:images/content/artikel/webdesign/heroku-status-broken-space_tn.jpg{/dglb}

Notice how the white space doesn’t need to be white. While the page is overly generous with space, you’re unlikely to complain that there’s too much of it. Only important information — in this case, status updates and reports of incidents — interrupt the space.

 

INTRODUCING THE NOVEL

The space at the top of Introducing the Novel is asymmetric and active. Notice how the large block of space on the left leads your eye directly to the content. If you click through to the website and scroll down from the top, you’ll see that space is also used to separate and group blocks of information.

{dglb}images/content/artikel/webdesign/introducing-the-novel.jpg:images/content/artikel/webdesign/introducing-the-novel_tn.jpg:introducing The Novel{/dglb}

Thin light lines are also used to group and separate these blocks. When viewing the website, notice how the lines don’t always touch, allowing the space to flow around them and connect to other space. This prevents the space from being trapped.

 

ELLIOT JAY STOCKS

The website of Elliot Jay Stocks should be familiar to all of you, since he’s behind the design of this one. Asymmetrical space on Elliot’s website again leads to active space.

{dglb}images/content/artikel/webdesign/elliot-jay-stocks.jpg:images/content/artikel/webdesign/elliot-jay-stocks_tn.jpg{/dglb}

The large image at the top of this page could potentially stand as a temporary block to accessing the content below; however, a generous amount of space next to the image provides ample and inviting room for the eye to move around it. If the sidebar on the left had the same background color as the main content, then it would probably be easier for the eye to move around the image, but the change in color hardly makes it difficult.

As with the websites above, space is used to both enclose and separate groups of distinct information, allowing each group to stand out and allowing the eye to find what it wants and to rest in between.

 

PHIL COFFMAN

The content on Phil Coffman’s website forms a single shape that sits in mostly empty space. The absence of many positive elements increases the importance of those that are present.

Even within the colored rectangular backgrounds, the text has enough space around it to be easily read and not to be mistaken for another category of text on the page.

The positive shape (and the shape of the space) adjusts responsively to different browser widths, but the pattern of a single large shape surrounded by space remains.

 

NEW ADVENTURES IN WEB DESIGN

Like many of the websites here, The 2013 website for the New Adventures in Web Designconference leaves generous room around elements. Distinct groups of information are contained by space, and the space is active throughout the design.

{dglb}images/content/artikel/webdesign/new-adventures.jpg:images/content/artikel/webdesign/new-adventures_tn.jpg{/dglb}

Something interesting to note is the gray circular arrows between the image in the upper-left and the main content to the right.

Do these arrows block the flow of space? Because they don’t touch and because each is dashed where it interrupts the space, the space can flow through, although it’s clearly more restricted in that flow.

The lighter-gray color helps. It prevents the arrows from dominating, and it’s not hard to imagine the space flowing over the lines.

In fairness, if my browser was wider when I grabbed the screenshot, the arrows wouldn’t overlap with the main content. However, around 1280 pixels down to where the design becomes a single column, they do. Overall, it works, although I wonder whether the space would flow better without the arrows present.

 

A Few Examples Of Logos

I’ll leave you with some logos in which space is incorporated as an integral part of the design. Instead of pointing out the use of space in each, I’ll make a few general comments and then let you explore the spaces for yourself.

Notice how the logos below make use of the figure-ground relationship. With some, until you see both figure and ground, you don’t see the full logo. Both are necessary contributors to what is being communicated.

Several of these logos rely on the principle of closure. What you’re meant to see isn’t really there, but you see it nonetheless. A few of these logos also play around with figure and ground. What’s figure when you take in the whole logo against its background becomes ground for a smaller figure within. This reversible figure-ground relationship is central to what’s being communicated.

• Cloud Bed
• Black Cat Lounge
• Shift
• Dolphin & Seal Logo Designer
• Dental Implants Guide
• Wineforest

 

Summary

I hope you take away two main things from this post. First is the connection between the use of space in design and the gestalt principle of figure-ground. Gestalt principles underly much of what we do as designers.

Secondly, and perhaps more importantly, make an effort to spend time observing how space is used in design. Don’t let space be a byproduct of your positive elements. Learn to design space as much as, if not more than, positive elements. The layout of any page is ultimately an organization of space.

Consciously analyze that space, and deliberately use it to create a better design. Don’t allow it to be what’s left over. View it as an essential design element, and then view the relationship between space and positive elements as a design element that you shape.

Next time, we’ll add more gestalt principles to the mix and explore how focal points, continuation and common fate lead us into ideas such as visual weight and compositional balance.

 

Note: This is the third post in a series on design principles. You’ll find the first two posts here:

• Part 1: Design Principles: Visual Perception and the Principles of Gestalt
• Part 2: Design Principles: Space and the Figure-Ground Relationship

 

Primitive Features

How do you show contrast and similarity between elements? The answer lies in the primitive features of the elements.

Primitive features are the intrinsic characteristics or attributes that an element might have. For example, what color is the element? How big is it? What shape is it?

Each of these things communicates something about the element. If one heading is bigger than another, then we assume the bigger heading is more important. We might view an element with a shape that’s jagged and sharp as being dangerous.

Sometimes, an element’s attributes need to be compared to the same attributes of another element in order to have meaning. The headings from the previous paragraph are a good example. A heading should only be bigger than another heading or another piece of text. The comparison is necessary for bigger to mean anything. It’s through comparisons like these that we communicate similarity and contrast.

By giving visually similar characteristics to multiple elements, we communicate that something is similar about the elements. If two elements on a web page are both red circles, it’s natural for a viewer to ask why. Why are both red? Why are both circles? The likely conclusion is that the elements are related in some way beyond how they look. The elements’ similarity implies that they carry a similar message.

Likewise, by applying visually different characteristics to multiple elements, we communicate that something is different about the elements and the messages they carry.

Any characteristic of an element that can be varied can be used to make elements look the same or different. A few characteristics, however, are most often used to show similarity and contrast. In no particular order, these are:

• size,
• shape,
• color,
• value,
• texture,
• position,
• orientation.

A rectangle and a circle contrast in shape. Two red items are similar in color. A red rectangle and a red circle contrast in shape and show similarity in color. How you balance the similarity and contrast of elements through their visual characteristics will determine much about what those elements communicate to the viewer.

Note: While primitive features are the primary way to visually show contrast and similarity, we have other ways to show both — for example, the actual content that the elements carry. The words “stop” and “go” contrast. The words “stop” and “cease” are similar. Images contrast with text; long paragraphs contrast with short paragraphs; and so on.

 

Contrast

Human beings are wired to notice difference. It’s a survival mechanism to quickly differentiate a friend from something that wants to eat us. Being able to quickly determine that was vital to returning safely home to the cave at night.

Our ability to quickly notice differences is what makes contrast so powerful. Contrast attracts attention. It draws the eye. It gets noticed. By giving an element characteristics that are visually different from the elements that immediately surround it, we can create points of interest and emphasis. In fact, because the contrast of an element with its surroundings is so good at drawing attention to the element, it’s perhaps the most effective way to add interest and excitement to a design.

Contrast does more than attract attention. It establishes boundaries between elements, too. For example, contrasting the background color of the main content and that of a sidebar is one way to show where one ends and the other begins.

Differences that stand out can provide emphasis, highlighting important elements and information. The greater the difference, the greater the contrast will be. The greater the contrast, the more important the element will appear.

For example, two ways to set off text are bolding and italicizing. Boldness typically shows more contrast and, thus, stands out more. Spotting bold text at a glance or from a distance is easier than spotting italicized text.

If two elements are meant to be different, go big with the contrast. You don’t want viewers to wonder whether the difference is intentional. Make sure the contrast is obvious and clearly intentional. Leave no room for misunderstanding. Don’t contrast text that’s 16 pixels with text that’s 15 pixels. People won’t notice the difference immediately and, once they do, it will appear to be more of a mistake than a conscious decision.

Be careful not to overdo it. Use contrast sparingly. If everything contrasts and tries to draw attention to itself, then nothing will stand out. You’ll end up with visual noise that causes confusion.

Too much contrast can break the harmony and unity in a design, leading to chaos and confusion. This might be what you’re after in a certain design, but more often than not it isn’t. Decide which few elements need to stand out, and make them look very different from everything else.

 

CONTRAST AND GESTALT

While every gestalt principle is about showing similarity and contrast in some way, I want to point out two of them. Contrast is critical to determining the figure-ground relationship and showing dominance and focal points.

• Figure-ground
  One of the first things we do when viewing a composition is to determine what’s the figure and what’s the background. This relationship helps to set context for everything else in the composition. Figure and ground need to contrast with each other or else the viewer will have difficulty determining which is which.
• Focal points
  These are elements of attraction and interest. They’re designed to look different from their immediate surroundings. The contrast is what helps them stand out and draw attention. The element that stands out the most in the composition is the dominant element. Elements that stand out in a composition but to a lesser degree are focal points.

 

Similarity

The same survival mechanism that enables us to quickly see difference also helps us to see when things are the same. It points us to who or what we can trust and to what might be dangerous. Being able to recognize similarity is why human beings are excellent at finding patterns. Patterns help us understand the world around us, provide context and make learning quicker, to the point of something becoming intuition or instinct.

When we design two or more elements to look similar, we are indicating that what’s true about one is true about the other. If one of the elements is important, then the other one is likely important, too. If one element is clickable, then other elements that are visually similar will probably be clickable, too. It’s how we can quickly recognize links in a block of text. Visual contrast shows that links are different from the rest of the text, while the visual similarity among links tells us, once we’ve discovered what one does, that all of the links are clickable.

Similarity is about showing connection and showing that multiple items are related in some way. It brings familiarity and consistency to a design.

Similarity complements our natural strategies for processing information. When we take in our visual surroundings and attempt to make sense of it all, we naturally group objects into chunks in order to hold more information in our working memory. We further group, organize and structure everything before it becomes part of our long-term memory.

Designing similar information to be visually similar helps the user to process and comprehend the information, which are two critical goals of design.

The more that primitive features of elements look the same, the more similar they’ll look and the more viewers will think they’re the same. They’ll appear grouped and related in some way, even if just one characteristic is shared; and the more they look the same visually, the more they’ll be perceived as being the same.

We use similarity to build structure and pattern. Any similarity between two elements in a composition implies a structure. Additional similarity fills out the structure and leads to pattern, texture and rhythm.

Not all signals that show similarity are equal. In the image below, would you group the objects by shape or color? Do you see a group of circles and one of squares, or do you see one red group and one blue group?

You probably noticed color first, grouping the elements as red and blue. This suggests that color is a stronger communicator of similarity than shape. This is not absolute, however. For example, someone with red-green color blindness wouldn’t likely notice the difference between red and green objects before noticing the shapes of those objects.

 

SIMILARITY AND GESTALT

Again, every gestalt principle is about how we perceive the similarity or difference between objects. Many of them can be read as tips to show similarity.

• closure
  different elements that may be part of a similar whole
• symmetry and order
  mirrored elements that appear to belong together
• uniform connectedness
  similarity through visually connecting elements
• common regions
  similar items enclosed together
• proximity
  similarity through enclosures in space
• continuation
  similarity through rhythms in space
• common fate
  similarity through movement
• parallelism
  similarity through orientation

 

The Relationship Between Similarity And Contrast

Contrast and similarity show the relationships between elements. Nothing has meaning in isolation. An element needs to be shown in context with other elements.

What does one large element cornering a smaller element in a design imply? What does one block of text being indented more than others with light gray suggest?

Contrast and similarity are really just opposite ends of a scale. On one end of the scale, objects look entirely different; on the other end, they look exactly the same.

Most of the time, we’re somewhere in between the extremes, and the things we design will share some but not all characteristics. Similarity and contrast are expressions of where along the scale objects lie relative to each other.

Even though I haven’t been explicit about it, everything I’ve said about either similarity or contrast applies to the other. Having one is impossible without also having the other. Contrast is a lack of similarity, and similarity is a lack of contrast. It’s all about where it lies on the scale.

Thinking about them together makes them more impactful. You can use a single feature, such as color, to show that several elements are related, and then use a different color to show that several other elements are related but different from the first group. With just two colors, we can create two distinct groups of connected elements.

Color coding in this way is an effective way to categorize information so that the viewer can discover and understand at a glance.

When everything is the same, you get tedium. When everything is different, you get noise. The best designs have a healthy mix of similarity and contrast and show a clear understanding of what they’re trying to communicate.

 

Examples Of Contrast And Similarity

Contrast and similarity can be found on every website. Both need to be present. Imagine a website having no contrast. We’d all have a hard time reading text if it and the background were the same color. Just as difficult would be each word or phrase having a different style.

I’ll point out some of the contrast and similarity on the websites below. There’s more of each than what I’ll mention. I want to offer enough examples to get you thinking and then let you take over. Look at and study different designs, and work at truly improving your skill in balancing contrast and similarity.

 

DAVID SIMON

One of the first things you’ll notice on David Simon’s website is the contrast between background colors, which makes it easy to distinguish one part of the page from another. The logo stands out as a dark object against a light background of space.

{dglb}images/content/artikel/webdesign/david-simon.jpg:images/content/artikel/webdesign/david-simon_tn.jpg:David Simon{/dglb}

The image contrasts with everything to draw the eye. The background of the posts’ dates, the full uppercase used for the meta data for comments, and the background color of the menu item for the current page are also examples of contrast drawing the eye and communicating something meaningful.

Links in the menu are all styled the same, as are the links to recent posts. Both are separated with horizontal lines. Each menu contrasts with the other to signal difference. Fonts are consistent throughout. The headings and body text contrast in typeface, but their difference is consistent across the website.

Links in the body could stand out more to make clear they’re links, although the designer might have deliberately made them less obvious in order not to interrupt the flow of reading. Headings could also have been made to stand out better, although it is pretty clear that they are not a part of the main text.

 

MIKE KUS

The home page of Mike Kus’ website focuses on different projects that Mike’s worked on. Most of the page is empty, but notice how that makes each element stand out. The text contrasts with the background, as do the paintings against the background wall texture.

Note: Mike has changed his home page since I wrote this. What you see in the screenshot below is the previous version.

The paintings also contain the only color variety on the page. All other information is in the same dark gray.

Also, notice how the paintings are framed, indicating that they have something in common. In this case, they represent projects. Note, too, that the background shows similarity through its pattern of bricks. It’s clear what is figure and what is ground.

On Mike’s “About” page, below, the lone image of Mike contrasts with everything else. The blue button to “Get in touch” is the only element with color. You might not contact Mike, but it won’t be because you don’t know how. Buttons across the website have the same blue.

{dglb}images/content/artikel/webdesign/mike-kus-about.jpg:images/content/artikel/webdesign/mike-kus-about_tn.jpg:Mike Kus{/dglb}

 

Mike’s name as the logo is repeated as the main heading on the page. The header contrasts with the background, as do the backgrounds of the various sections of the page below. Links in the menu share the same uppercase styling. Social icons at the top are repeated along the bottom.

Fonts are also used consistently, with headings in a sans-serif and body text in a serif, contrasting with each other.

 

ELECTRIC PULP

The logo on Electric Pulp’s website is a red circle of moderate size. It contrasts well with everything else that is immediately visible. Notice how the color is repeated in the main navigation to indicate the current page.

{dglb}images/content/artikel/webdesign/electric-pulp.jpg:images/content/artikel/webdesign/electric-pulp_tn.jpg:Electric Pulp{/dglb}

 

Headings across the website are big, bold and set in all caps. Headings and body text also contrast consistently across the website, with the former in a sans-serif and the latter in a serif.

Click into the “Notes” section and you’ll see previous and next links with background colors that contrast with the main background. Background color is also used to distinguish different sections of the page.

Most buttons on the website are a contrasting red (a color often used to set off elements) and change to blue on hover. However, on the “Work” page, the first button reverses this (it’s blue and changes to red on hover). Whether this is deliberate or accidental is hard to tell. Nevertheless, the principle of contrast is maintained.

 

LOWDI

One last website to consider is Lowdi’s. The screenshot below is of the home page. Notice how color is used for both contrast and consistency.

{dglb}images/content/artikel/webdesign/lowdi.jpg:images/content/artikel/webdesign/lowdi_tn.jpg:Lowdi{/dglb}

 Color clearly delineates the start and end of sections. And the repetition of color creates a rhythm throughout the page. Notice how the yellow background of the price stands out, while also drawing the visitor’s eye down to the picture of the product.

 

Summary

 

Contrast and similarity have different functions. They are used in varying degree and in combination. You’ll always see some of both because neither exists without the other. Changing one means also changing the other.

Showing that some things are the same and some are different is the first step in visual communication. It’s the primary way that viewers derive meaning.

Contrast and similarity are clues to design elements. Differences draw our attention, and similarity transfers what we know about one element to another.

Ultimately, the goal is to contrast similar layers: making the elements in one group look similar to each other, but different from another like group of elements. The way we structure contrasting and similar elements creates hierarchy, flow and compositional balance, topics we’ll get to later in this series.

 

Note: This is the fourth post in a series on design principles. You can find the first three posts in the series here:

• Part 1: Design Principles: Visual Perception and the Principles of Gestalt
• Part 2: Design Principles: Space and the Figure-Ground Relationship
• Part 3: Design Principles: Connecting and Separating Elements Through Contrast and Similarity

 

Visual Weight

Physical weight is a measure of the force that gravity exerts on an object, but two-dimensional objects (such as elements on a web page) don’t have mass and, therefore, don’t have any physical weight. Visual weight is a measure of the force that an element exerts to attract the eye. Two-dimensional objects can attract attention. The more an element attracts the eye, the greater its visual weight.

In the previous post in this series I talked about primitive features, or the intrinsic characteristics of an element, such as size, color and shape. In that post I mentioned how, through these features, you can show contrast and similarity between elements.

For example, contrasting elements by making one very big and the other very small makes it clear that the elements are different.

Controlling the combination of these features is how you control visual weight. Red tends to attract the eye more than blue, and larger elements attract the eye more than smaller ones. A large red object carries more visual weight than a small blue object.

The sum of these characteristics or primitive features is what determines an element’s visual weight. It’s not any one feature, but rather their combination that determines the visual weight of an element. Some combinations of features will attract the eye more than others. To create elements of different visual weight, you would use different combinations of primitive features.

 

HOW DO YOU MEASURE VISUAL WEIGHT?

There’s no way I know of to precisely measure the visual weight of a design element. You use your experience and judgment to determine which elements have greater or lesser weight. Develop an eye and then trust it. The areas of a composition that attract your eye are those that have greater visual weight. Learn to trust your eye.

This doesn’t mean that you have to randomly try things and see what attracts your eye the most and the least. You can isolate each characteristic to know that something bigger weighs more than something smaller, for example. It’s in the combination of features that your eye will help.

Fortunately, others have isolated and tested these characteristics. Below are some of the characteristics you can change on any element and a description of how changing them will either increase or decrease the element’s visual weight.

Let’s start with the primitive features that I mentioned in the last post: size, color, value, position, texture, shape and orientation.

• Size
  Large elements have more visual weight than small elements.
• Color
  Warm colors advance into the foreground and tend to weigh more than cool colors, which recede into the background. Red is considered the heaviest color and yellow the lightest.
• Value
  Dark elements have more visual weight than light elements.
• Position
  Elements located higher in the composition are perceived to weigh more than elements located lower in the composition. The further from the center or dominant area of a composition, the greater the visual weight an element will carry. Elements in the foreground carry more weight than elements in the background.
• Texture
  Textured elements appear heavier than non-textured objects. Texture makes an element appear three-dimensional, which gives the appearance of mass and physical weight.
• Shape
  Objects with a regular shape appear heavier than objects with an irregular shape. The irregularity gives the impression that mass has been removed from a regular shape.
• Orientation
  Vertical objects appear heavier than horizontal objects. Diagonal elements carry the most weight.

You don’t have to limit yourself to the primitive features above. You can use additional characteristics to control visual weight.

• Density
  Packing more elements into a given space increases the visual weight of the space. The viewer will perceive a larger or darker combined element as opposed to several smaller and lighter elements.
• Local white space
  White space appears to have no visual weight because it’s seen as empty. Any object placed within that space will seem heavier because of the space around it.
• Intrinsic interest
  Some things are more interesting than others. The more complex or intricate an element, the more interest it will draw and the more it will attract the eye. Your own interests also play a role. If you’re more interested in cars than in planes, then an image of a car will grab your attention more than an image of a plane.
• Depth
  A larger depth of field gives an element in focus increased visual weight, likely due to the contrast between the focus and unfocused areas.
• Saturation
  Saturated colors appear heavier than desaturated colors.
• Perceived physical weight
  We know that a house weighs more than a shoe. An image of a house will weigh more visually than an image of a shoe, because we expect the house to weigh more.

In the previous post in this series about contrast and similarity, I mentioned that contrast draws attention to an element. In other words, an element that contrasts with its surroundings will appear visually heavier than its surroundings. For example, circles usually appear heavier than rectangles on a web page because most website elements are rectangular.

Not all characteristics contribute equally to visual weight. Most people will notice the color of an element before its shape, which suggests that color contributes more to visual weight. You also have to consider the uniqueness of a given composition, because contrasting elements appear weightier than the elements they contrast with. The specifics of your composition will determine what contrasts and what doesn’t.

Remember that visual weight is a combination of the above attributes. While big carries more visual weight than small, a small dark circle surrounded by a generous amount of white space and located at the top of the page will likely appear to weigh more than a larger yet irregularly shaped object of a cool light color at the bottom of the page.

 

VISUAL WEIGHT AND GESTALT

One of the ideas behind this series is to point out how much gestalt principles contribute to design principles.

• Figure-ground
  Visual weights can be used to separate the two by giving the figure more weight than the background.
• Proximity
  The space between elements leads to different amounts of local white space and different densities of the objects within the space.
• Similarity and contrast
  You can use visual weight to signal either. Contrast will lead to greater visual weight in the contrasting element. Elements with similar visual weight will naturally exhibit similarity.
• Focal point (the next topic in the series)
  Points of attraction in a composition are focal points, and they carry more visual weight than other elements.
• Past experience
  The viewer’s experience will contribute to how much intrinsic interest they think an element holds.

 

Visual Direction

If visual weight is about attracting the eye to a particular location, then visual direction is about leading the eye to the next location. Visual direction is the perceived direction of visual forces. Think of it as the direction you would expect an element to move if it were in motion.

Visual direction serves a similar function to visual weight in that it’s trying to get you to notice certain parts of the composition. Whereas visual weight is shouting “Look at me!,” visual direction is saying “Look over there!”

As with visual weight, you can modify the characteristics of an element to suggest different directions, although fewer characteristics are at your disposal than with weight.

• Shape of element
  An element’s shape might create an axis through it and this axis can suggest a direction. The prime axis is typically seen as running parallel to an element’s visual direction.
• Location of elements
  Visual weight is a force that can appear to attract or repel a neighboring element. This force will move in a direction that connects both elements.
• Subject matter of element
  An arrow, a pointing finger, or the gaze of the eye all suggest looking in a certain direction.
• Movement
  An element could literally move through your design, and its movement will have a direction.
• Structural skeleton
  Every composition has a structural skeleton, with forces that naturally run along and through different axes. This probably needs a little more explanation.

 

STRUCTURAL SKELETONS

In his book Art and Visual Perception: A Psychology of the Creative Eye, Rudolf Arnheim proposed the idea of a structural skeleton behind every canvas.

The idea is that every canvas has a structural network of forces running through it. Even if no elements are inside the canvas, our eye will be drawn to certain parts of the canvas because of this network of forces seen in the image below.

{dglb}images/content/artikel/webdesign/structural-net.jpg:images/content/artikel/webdesign/structural-net_tn.jpg{/dglb}

 

The center and the four corners of a rectangular canvas act like magnets to the eye. The strongest magnet is in the center, though not the geometric center of the canvas. Rather, the center that attracts the eye is the optical center, and it sits just above the true geometric center.

The axes run from corner to corner, and the points along these axes that are midway between center and corner also attract attention. These midway points can, then, be connected with vertical and horizontal lines, which create additional axes of visual force.

We’ll come back to this idea when we get to the post in the series about compositional flow. For now, consider that, in the absence of design, a viewer’s eye will be attracted to certain points in Arnheim’s structural skeleton, and the eye will move from point to point by following the directions of the different axes.

You can make use of the structural net by placing elements where they would naturally attract the eye, thereby increasing their attractive force.

 

VISUAL DIRECTION AND GESTALT

You can think of direction as real or imaginary lines that point from one element to another or that connect different elements. The lines don’t need to be visible.

• Uniform connectedness
  The lines connecting elements have direction. An eye gaze creates an imaginary line between the eye and whatever the eye is gazing at.
• Continuation
  This principle relates to elements arranged along a line or curve, as though they are moving in the direction of the line or curve.
• Common fate
  Elements seen as having a common fate are those that move or appear to move in the same direction.
• Parallelism
  In order for elements to be seen as parallel, their internal axes (the same ones that impart direction) must be established.

 

The Overall Direction Of A Composition

One more concept of visual direction is that every composition will be seen to have a dominant direction, whether horizontal, vertical or diagonal.

• A horizontal direction makes the composition appear calm and stable.
• A vertical direction adds a sense of formality, alertness and balance.
• A diagonal direction suggests movement and action.

The dominant direction of a composition will be established by the direction of the majority of elements or perhaps a few key elements. The direction will help set a general mood according to the general meaning ascribed to different types of lines.

It is possible for a composition to have no dominant direction. The number of horizontal and number of vertical elements might be equal, for example. In this case, the viewer could decide which direction is dominant.

 

Examples

For the following examples, I’ve grabbed some screenshots of pages and will share some thoughts on how I see visual weight distributed in each. You might see it differently, and that’s OK.

Different eyes are attracted to different things. Again, I’m aware of no way to measure how much visual weight an element carries. Besides, two people could easily look to different areas of a composition because of their different interests. A bit of subjectivity is to be expected.

An easy way to tell which elements have the most weight is to use the squint test. Close your eyes a little until some elements fade away. Those that remain have more visual weight than those that disappear.

 

BUREAU

{dglb}images/content/artikel/webdesign/bureau.jpg:images/content/artikel/webdesign/bureau_tn.jpg:Bureau{/dglb}

 

The article from Bureau shown above is nearly all text. The main heading carries the most visual weight. It’s the largest piece of text, and it has some local white space around it as well. It’s arguably the most important information that someone who lands on the page should see, so it makes sense for it to be visually weighty.

Links gain some weight through their contrast with the surrounding text, although the cool color lessens the gain in my opinion.

The element with the least visual weight is the text in the right column. This makes sense because focus is most likely meant to be given to the article and not what’s in the sidebar.

Notice the small bit of red text at the top of the right column. It’s a link to the home page of the website. As small as it is, the red gives the text some additional weight, helping it to stand out from the other text in the column. Everything in the image appears larger when you’re viewing the website directly, so the small red text isn’t quite as small as it is here.

When you apply the squint test, the whole right column disappears, and you’re left with the main heading above the article and a large block of text below it.

The main direction of the composition is vertical because it’s two long columns down the page. The difference in background color between the columns creates a vertical line leading you down the page and adding to the vertical direction of the composition.

 

CREATE DIGITAL MEDIA

When the home page for Create Digital Media loads, the colorful elements animate into place, calling a lot of attention to themselves. Even if you miss the animation, you likely see these elements as carrying the most weight, due to the saturated pink, yellow and blue. These elements also occupy the same space, creating a dense area in the middle of empty space.

{dglb}images/content/artikel/webdesign/create-digital-media.jpg:images/content/artikel/webdesign/create-digital-media_tn.jpg:Create Digital Media{/dglb}

Note: Between the writing and publication of this post, Create Digital Media has closed its doors. Visit its home page if you’d like to know why.

The graphics at the bottom are the next weightiest for me. They’re dark, large and complex in shape. They pull you to each of the three sections, which contain the next most visually prominent elements, the section headings.

The main headline on the page is large and dark; compare it to the text directly below it. Other items that stand out for me, due to their higher visual weight, are the company’s name at the top and the logo at the bottom.

With the squint test, the colored shapes and text and the graphics at the bottom remain after most of the elements have faded away. The main headline fades for me, although I can still tell it’s there. I also somewhat notice the logo in the lower-left corner, although it fades much more quickly than the graphic near it.

Here, I think the main direction is horizontal. The lines run horizontally, as does the main heading and the navigation. Another of the more visually prominent elements, the highlighted text, is also horizontal.

The three gears could be regarded as a single triangular, albeit curvy, shape, thus establishing diagonal directions. They don’t run long, though, and they’re the only diagonals on the page.

 

JAVIER Y MARTA

Three elements compete to be the visually weightiest on the homepage of Javier y Marta. The graphics, the green separators between sections, and the menu items at the top all call for attention.

{dglb}images/content/artikel/webdesign/javier-y-marta.jpg:images/content/artikel/webdesign/javier-y-marta_tn.jpg:Javier y Marta{/dglb}

• Graphics
  These are large, dark and surrounded by white space. Each graphic intrinsically hold its own interest.
• Green separators
  These have color, are larger and, like the graphics, are surrounded by white space
• Menu items
  These are dark, large and, once again, surrounded by white space.

Javier’s logo carries a little less visual weight for me than the menu items around it, although it’s still very prominent among them. It does carry more weight than the text, but not as much as the menu items in my mind. You may disagree.

The squint test causes the menu items and logo to blend into a single unit. The graphics and separators are still visually prominent, and the text remains visible as large blocks. You can still see everything while squinting, even if you can’t make out what any of it says.

On my screen, only the header and the “El evento” section are visible, giving the page a horizontal direction. However, four sections in total are on the page. When the sections are viewed all at once, the alignment of the green separators gives the composition a vertical direction. And, of course, seeing the whole page at once changes the canvas from horizontal to vertical.

I wonder if the two graphics shown in the screenshot above would have been better on opposite sides. In the top graphic, the camera points right, which is where my eye follows. Better would be to guide the eye to the text.

In the bottom graphic, the woman’s umbrella does point right, but she’s walking left, which is where I then tend to look. Both graphics might work better if their direction led back into the text instead of away from it.

 

STANFORD ARTS

The image at the top of Stanford Arts’ home page carries the most visual weight. It’s the largest element on the page and, being an image, has a lot of intrinsic interest. It’s also located at the top of the composition. In truth, it takes up most of my screen.

{dglb}images/content/artikel/webdesign/stanford-arts.jpg:images/content/artikel/webdesign/stanford-arts_tn.jpg:Stanford ARTS{/dglb}

 

Note: This website rotates images at the top of the page, and the images that rotate change over time. You probably won’t see this particular image if you visit the website and, because of that, you might assess the visual weights in the design differently than I do here.

I think the triangular images against the angular containers are the next weightiest elements. After that are the large red blocks that make up the header and footer.

When I perform the squint test, all of the elements are visible longer than I’d expect. The elements have a good deal of both light and dark contrast, which helps them stand out.

Eventually, the only things that remain are the images, although in less than full detail. I can make out the large image at the top but only the shapes of the triangular images below.

The design is also interesting for its visual direction. Diagonals dominate, and because most web pages are not dominated by diagonal directions, they capture more attention here. They subvert your expectation.

The particular photograph that I captured in the screenshot above also offers something of a diagonal, albeit a bit curved in parts and created by a moving line of people in others.

Both the woman (in the rightmost triangular image) and the photographer (in the center triangle) have a direction leading to the right. Better might have been to reverse the woman to face inward and move the camera to the left block to points inward, too.

Granted, the images change when you hover over any of the links in the blocks. Still, the images tend to lead outward instead of inward.

 

Summary

The visual weight of an element is a measure of how much the element attracts the eye of the viewer. A visually heavy element will attract the eye to it.

Visual direction is the perceived direction of forces acting on and exerted by elements. The direction is a cue to the viewer’s eye to move elsewhere.

Many intrinsic characteristics can be modified to make an element visually weightier or lighter. A few can be used to establish an element’s visual direction, as can the canvas itself.

Over the remaining posts in this series, we’ll see how visual weight and visual direction lead to principles like dominance and hierarchy, flow and rhythm and, ultimately, compositional balance.

 

Of course, now that the logo and heading are bigger, both are going to attract more attention than the main call-to-action button, which will need to be made bigger. And once the button is bigger, the heading is going to start looking small again.

You can’t emphasize everything. It defeats the point. When you try to do that, all of your design elements compete for attention and nothing stands out. They’re all yelling at the same time. Everything is louder, but still nothing is heard.

Emphasis is relative. For one element to stand out, another has to serve as the background from which the first is to stand out. Some elements need to dominate others in order for your design to display any sort of visual hierarchy.

Note: This is the fifth post in a series on design principles. You can find the first four posts in the series here:

• Part 1: Design Principles: Visual Perception and the Principles of Gestalt
• Part 2: Design Principles: Space and the Figure-Ground Relationship
• Part 3: Design Principles: Connecting and Separating Elements Through Contrast and Similarity
• Part 4: Design Principles: Visual Weight and Visual Direction

 

Dominance

Compare any two elements in a design. Either the elements will be equal in every way or one will exert some level of dominance over the other. The more dominant element will attract the eye and get noticed first. It might even appear to exhibit some sort of control over the less dominant element.

The more dominant element likely has greater visual weight than the elements it dominates. It will seem to exert force on what’s around it.

{dglb}images/content/artikel/webdesign/dominance.jpg:images/content/artikel/webdesign/dominance_tn.jpg:Dominance{/dglb}

 As you develop a composition, you’ll see numerous elements exerting dominance over each other. Some elements will dominate, and some will be subordinate. Without conscious control, you’d just hope that things all work out and that the important information will attract attention. Fortunately, you do have control.

 

HOW TO ESTABLISH DOMINANCE

You design one element to have more dominance than another by giving it more visual weight. The greater its visual weight, the more an element will attract the eye and exhibit dominance.

You create dominance through contrast, emphasis and relative visual weight. Identical items can’t dominate each other. To exert dominance, an element has to look different from the elements it’s meant to dominate.

Your goal is to create elements with noticeable differences in visual weight.

You can vary the same characteristics that we talked about in the last couple of articles in this series. As a reminder, here are the most common characteristics you can vary to set different visual weights:

• size,
• shape,
• color,
• value,
• depth,
• texture,
• density,
• saturation,
• orientation,
• local white space,
• intrinsic interest,
• perceived physical weight,

You can create dominance through visual direction as well. For example, you might surround an element with arrows all pointing to that element. If there are enough directional cues, the element could become dominant even if it’s of lesser visual weight than other elements on the page.

You can also have co-dominance, where two dominant elements exist within a composition. However, both will compete for attention and could ultimately be distracting without the right overall balance in your competition.

Ideally, you want a single dominant element.

 

THE DOMINANT ELEMENT

The dominant element in a design is the one with the greatest visual weight (or the one that everything else points to). It’s the element that attracts the eye first, more than anything else on the page.

Be careful not to make the element so dominant that it completely obscures everything else, but do make it stand out in the design.

Your dominant element is the starting point for the story you’re telling. It’s the entry point into your design. It should attract visitors to the first place you want them to look.

This is how you start a conversation with visitors. The dominant element is noticed first and sets the context for what’s seen next. It’s at the top of the hierarchy. It should emphasize your most important information, because it might be the only thing anyone will see. Whatever message you want people to take away should be clearly communicated in or near your dominant element.

Without an entry point, viewers will have to work harder to find their way into your design. They’ll have to pause and think where to look first and think about what’s truly important on the page. A lack of entry point will increase the cognitive load on visitors. Don’t make them think. Provide an entry point into your design.

 

Focal Points

Focal points are also elements or areas of dominance, just not to the same degree as your one dominant element, which could be defined as your most dominant focal point. Focal points are areas of interest, emphasis or difference within a composition that capture and hold the viewer’s attention.

The focal points in your design should stand out but should be noticed after the element with the most dominance. The graphic below shows a lone circle amid a sea of mostly gray squares. The circle is not only a different shape, but is larger and bright red. It’s likely the first thing your eye notices in the graphic.

Three of the four squares are also reddish in color, though not as bright as the circle. They’re the same size as the other squares in the image, but they do stand out from the gray squares due to their color.

The circle and the three reddish squares are all focal points because they stand out from the majority of other elements in the graphic. They contrast with the mass of gray squares. The large bright red circle stands out the most. It’s the dominant focal point, or the dominant element in this image.

{dglb}images/content/artikel/webdesign/focal-points.jpg:images/content/artikel/webdesign/focal-points_tn.jpg:Focal Points{/dglb}

 

As with the dominant element, you can create focal points by giving them more visual weight than everything except the dominant element — which, again, is your most dominant focal point. You can also create visual direction that leads to different focal points.

Contrast is a good way to create focal points, because contrast calls attention to itself for being different. Anything that can be contrasted and anything that can affect visual weight or direction can be used to create a focal point, in the same way that it can be used to create a dominant element. The difference is simply of degree.

 

Levels Of Dominance

If you create focal points and make one of those points the dominant element, then you’re starting to create different levels of dominance. The dominant element will sit on one level and will be noticed before all others. The remaining focal points will sit on another level. How many levels of dominance can you realistically have in a design?

Three is a good number. As a general rule, people can perceive three levels of dominance. They notice what’s most dominant, what’s least dominant and then everything else. There needs to be enough difference between these levels for people to distinguish one from the next. You want to create distinct levels, not a continuum.

You could create more than three levels of dominance, but each additional level will reduce the contrast between neighboring levels. Unless you’re sure you can contrast each level well enough, stick with three.

• Dominant
  This is the level with the most visual weight and the one that gets the most emphasis. Your dominant level will usually consist of a single element in the foreground.
• Sub-dominant
  This is the level of focal points, with the exception of the dominant element or dominant focal point. It gets secondary emphasis. Elements on this level get less emphasis than the dominant level but more than the subordinate level.
• Subordinate
  This is this level with the least visual weight. It should recede into background to some degree. This level will usually contain your body of text.

It’s possible for different people to look at a composition and think that different elements are focal points or even the dominant element. Remember to go big enough with your differences in visual weight to make clear which level is more dominant. You want your dominant element and focal points to be as obvious as possible.

 

Visual Hierarchy

As you design distinct levels of dominance, you create visual hierarchy in the design. Ideally, this visual hierarchy will match the conceptual hierarchy of your content. If an article’s heading is more important than a caption in the article, then the heading should be more visually dominant.

Base your visual hierarchy on the actual priorities of the information being presented. First, prioritize everything that will go on the page, and once it’s set, design a visual hierarchy to follow that prioritization.

Visual hierarchy enables visitors to scan information. It helps you communicate a message quickly and effectively. The top of the hierarchy (the dominant element) should help to answer questions a visitor might immediately have upon landing on the page.

Within seconds, visitors should be able to pick up the key points and main message of the page. They can do this if you make the most important information the most visually prominent.

People who stick around longer than a few seconds should be able to scan through the focal points in your design to gain the next most important message(s) that you want to communicate, and so on with the rest of your information.

 

THE INVERTED PYRAMID OF WRITING

Establishing hierarchy in a design is similar to the way journalists use the inverted pyramid of writing. The most important news is all in the first paragraph or two. The lead covers the who, what, where, when, why and how. It tells you everything you need to know.

{dglb}images/content/artikel/webdesign/inverted-pyramid.jpg:images/content/artikel/webdesign/inverted-pyramid_tn.jpg:The inverted pyramid of writing{/dglb}

 

The lead is followed by important details that fill out the story. They’re details that provide context or help you understand the story in greater depth. Toward the end of the article is the general and background information that’s nice to know but not necessary to understand what’s going on.

If someone reads only a sentence or two, they should come away with the most important information. The longer they stick around and the more they consume, the more details they’ll get.

Visual hierarchy works the same way, except that it doesn’t have to flow linearly from the top of the page. You get to control where people look first, second and so on

Again, three level of dominance or hierarchy are recommended, although four or five are still possible.

 

Gestalt Principles And Visual Hierarchy

One of the reasons I started this series with an article about gestalt principles was to show how they lead to many of the design principles we work with.

Visual hierarchy evolves out of gestalt. Focal points are one of the gestalt principles. Your dominant element is an extreme focal point. Both use contrast to stand out. The other side of the coin is similarity, which helps us to see things as the same. Similarity and contrast are necessary ingredients in hierarchy.

Such laws as the ones of prägnanz and symmetry are about creating order and making things simpler and clearer. That’s exactly what you’re doing when you build hierarchy in a design. You’re organizing design elements to establish a sense of order.

The dominant element is likely seen as the figure. The least dominant elements are likely seen as the ground. Really, any principle related to connection or separation can be applied to dominance and hierarchy.

 

Examples

As I’ve done throughout this series, I’ve collected screenshots from a few websites, to share what I see as being the dominant elements, focal points and hierarchy.

This is my opinion. You may see the designs differently and that’s fine. Thinking critically about the designs is more important than agreeing on what we think.

 

AN EVENT APART

The dominant element on the home page of An Event Apart is the image at the top. It’s the largest element. It’s also an image of people, which we’re typically drawn to. The large white text across the image offers contrast with the image, calling your attention to it.

{dglb}images/content/artikel/webdesign/event-apart.jpg:images/content/artikel/webdesign/event-apart_tn.jpg:An Event Apart{/dglb}

 

The text “The design conference for people who make websites” is probably the most important information that anyone landing on the page needs to know. It’s a very clear statement about what An Event Apart is and who the website is for. It’s arguably the first thing someone new to the website should see.

Focal points include the website’s logo, the dark background behind “Upcoming Events” and the testimonial set as a large bold heading.

If you scroll down the page, you’ll notice that the design mainly uses size and color to create additional focal points and visual hierarchy. Important information is larger. It’s bold. It might be red. Occasionally an image draws the eye.

If you were to visit the page and merely scan it, you would still come away knowing what the website is about, knowing whether any conferences are coming to your area, and having been convinced by the abundance of testimonials.

 

PAID TO EXIST

The dominant element on Paid to Exist’s home page is the graphic of the backpack at the top of the page. It’s an image and larger than everything else around it. It contrasts with its surroundings because it is a graphic with intrinsic interest and a different shape.

{dglb}images/content/artikel/webdesign/paid-to-exist.jpg:images/content/artikel/webdesign/paid-to-exist_tn.jpg:Paid to Exist{/dglb}

 

Focal points include the website’s name, some of the text to the right of the graphic, and the big green “Download” button. The social sharing buttons are another focal point.

Looking at the section of content just below, you’ll see three large numbered circles, which serve as focal points and lead you to their accompanying content.

You’re meant to read the information. Notice how the heading above each paragraph reflects the color of its accompanying circle, to draw you in.

Think about the circles and text in terms of visual hierarchy. The big colorful circle (which is one level in the hierarchy) gets your attention and leads you to information that sits on another level of the hierarchy.

 

MANDY SIMS

Mandy Sims has a single-page website. The very top (not shown in the screenshot) includes an image of Mandy, which for me is the dominant element. Mandy’s name is also displayed as the largest text.

However, I want to draw your attention to a section further down the page. As you might expect, the section’s heading is the largest text there, so it becomes a focal point.

{dglb}images/content/artikel/webdesign/mandy-sims.jpg:images/content/artikel/webdesign/mandy-sims_tn.jpg:Mandy Sims Coaching{/dglb}

Focal points are also the testimonials down the right side. Notice how the background color of the testimonials is the same as the background color of the active link in the menu.

Without reading the text in this section, you can still clearly see that Mandy offers coaching services to happy clients, because one level of the hierarchy communicates just that.

 

VANSEO DESIGN

This last example is from my own website. It’s a blog post I wrote a couple of years ago. Forgive the indulgence, but unlike the other examples, I know exactly why every element on the page looks the way it does. Whether or not I’ve succeeded is another matter, but I’m certain of the intent.

{dglb}images/content/artikel/webdesign/vanseo-design.jpg:images/content/artikel/webdesign/vanseo-design_tn.jpg:Vanseo Design{/dglb}

The page’s main heading is meant to be the dominant element. This is a blog post that I want people to read, but I want to give people a sense of what the article is about before they have to invest their time reading.

The partial image also draws the eye, and you might think it more dominant, but an image like this isn’t necessarily visible at the top of every post on the website.

The logo in the top-left and the RSS icon in the top-right are meant to stand out a little more than the other text, and so both are red. Both would stand out more with a brighter red, but I didn’t want people to be distracted by them. The same red is also used in headings throughout.

The meta information on the left is meant to stand out from the main text. Here, I used local white space to increase the visual weight of plain text. Ideally, someone would glance at it and get information about me and the category and tags for the post.

One thing I decided to do with the design was make links in the body less visible than on most websites. I want people to be able to find them, but I don’t want them to pull you out of the content. I used a blue, which doesn’t stand out much from the black text, and I chose italics instead of bold. The links are not meant to be focal points, so I de-emphasized them visually.

My hope is that someone landing on this or another post on the website will be able to very quickly tell what the article is about and discover some basic information about me, such as my name or the name of the website, before hopefully reading the post.

 

Summary

You can’t emphasize everything. In order for some elements in a design to stand out, other elements must fade into the background.

By varying the visual weight of some elements and the visual direction of others, you can establish different levels of dominance. Three levels is ideal; they’re all that most people can discern.

On one level will sit your dominant element. It’s an entry point into your design, and it should be or be near the most important information on the page. A second level of focal points can draw attention to the next most important information visitors should see. Your third level holds everything else. Most of your content will be on this level.

Designing different levels of emphasis or dominance will create a visual hierarchy in your design, with more important information being more visually prominent. It will help you communicate with visitors quickly and efficiently.

We’re getting close to the end of this series. Next time, we’ll look at compositional flow, movement and rhythm. I’ll talk about leading visitors through a design so that they’re more likely to find information in the order you want them to see it.

 

Resources

• Emphasis or Focal Point, Anabel Damstrom
• Emphasis, Jim Saw
• Developing Emphasis in Web Design, Patrick Cox, Codrops
• Primary and Secondary: A Tale of Two Focal Points, Aaron Diaz
• Elements and Principles of Design Emphasis or Focal Point (video), Roxie Mitchell
• Composition and Design: Finding and Creating a Focal Point, Katherine Tyrrell
• How to Create a Focal Point When Designing a Room, Kristine Lofgren, SFGate
• Creating a Focal Point: What to Add for a Focal Point in the Garden, Amy Grant, Gardening Know How
• Design in Art: Emphasis, Variety and Unity, Sophia