The Art of Distinction in Web Design

Aug 10 2010 by Alexander Dawson | 25 Comments

The Art of Distinction in Web Design

One of the hardest tasks we undertake in the user experience field is trying to gain and hold a visitor’s attention in the right way. Distinctive design and the ability to focus eyes where they are needed in our web designs is a tricky task, but is something that we should have a firm grasp of.

Understanding the artistic traits of influence and distinction allow us to balance important details over our regular content and thus gives us the opportunity to have a great impact and influence on our consumers.

This article aims to highlight various factors you should account for when using distinction in your designs.

Distinctive Design

Distractions in a design lead to a breakdown in communication and can confuse users, paralyzing their ability to quickly determine what to focus on or where to go next.

Distinctive design alleviates this by putting forward a few fundamental principles which appeal to the user’s needs. Effectively at their core, it underlines the ideal that highlighting content based on importance rather than its position is beneficial and worthwhile.

Distinctive DesignWhat is distinctive design? It’s a simple goal to make important information visible.

Principles of distinctive design include:

  • Not giving prominence to objects unless it has a real need to attract attention
  • Limiting the importance you give to all content within the page to avoid diluting the strength of the important content
  • Deemphasizing less important content
  • Taking the time to help guide the user’s eyes through the page to ensure content is read in the right order
  • Avoiding too much information on the page to reduce the noise
  • Ensuring that what you display fits the ideas you wish to convey

Distinctive DesignDistinctive design is important to ensure the end-user can find what they require.

While too much focus being demanded on a page (with violent levels of distinction) can be damaging to the user experience, bland data with no focus or selective highlighting can be equally disruptive.

It can make unassuming content (even well written material) appear dry, dull or even hard to read.

While the majority of your content should be neutrally styled (it should have no emphasize), there will always be content in a site that needs reinforcing. And whether you use images, stylistic effects, color, appearance, animation or something else, appropriate distinction is extremely important.

Distinctive DesignPlain text documents have no distinctive flourishes and is often hard to read.

Noise Margins

One key principle in maintaining a distinctive design is the function of noise margins. Have you ever visited a website that has far too much going on? That’s the kind of problem that can make it next to impossible for users to find what they need.

By simply reducing the amount of information that appears within the website design, or by breaking it down further into several pages (or sections using headings), you can increase the way people interact with your work because relevant information will be more contextually visible and easier to locate.

Noise can distort the overall message of a website in unnaturally large quantities.Noise can distort the overall message of a website in unnaturally large quantities.

Within a user interface, noise can occur in many formats. Anything intended to grab the user’s attention in the design can be a key component of drawing focus away from the content. Ideally, you should have as little of these devices or interface quirks as possible.

Interface noise can result from too many elements appearing within a website.Interface noise can result from too many elements appearing within a website.

Even sites with little in the way of noise-inducing components can have noise pollution problems. Text content can suffer issues if it’s not laid out effectively. In this case, breaking large clumps of data into tables, bulleted lists, sections and styled content can aid readability.

Images with too much on display can also become like an optical illusion (like a "Where’s Waldo?" book) as the search for any relevant points may be lost, which brings attention to the task of trying to simplify diagrams, graphs and infographics to maintain a level of neutrality and visibility.

Content isn't free of noise either! Huge blocks of text can frustrate end-users.Content isn’t free of noise either! Huge blocks of text can frustrate end-users.

Spatial Awareness

Another principle tied closely to the aspect of noise is spatial awareness. While it’s important to know how much content will be displayed in a page, the knowledge of how we represent content can help end-users identify their own surroundings.

Whilst designing with an emphasis on simplicity — introducing much needed whitespace within even the most lengthy of documents can allow the user to focus within those sections that hold meaningful content. In addition, complex background images or patterns can reduce the effectiveness of added whitespace.

Giving a website plenty of breathing room increases the awareness of space.Giving a website plenty of breathing room increases the awareness of space.

Organization is the key to any goal, and conventions have evolved within web design for just such a reason. The complexity of any object can be determined by both how easy it is to not only know what function or purpose it has, but also the way it is presented can help that old friend of ours, readability.

Whitespace has a key function in not only breaking sections apart (through space) but also in increasing awareness of how those sections are maintained, thus making the design a more pleasant experience which can help elements meet the impact needs of their environment.

A well structured and organized site layout will be easy to navigate around.A well structured and organized site layout will be easy to navigate around.

While the idea of flexible layouts showcase that the amount of visible space may differ drastically for the end-user based on the device they have, small screens have highlighted the way in which a web browser and it’s viewport with scrollbars dictates the cascade and priority information gets.

It’s a well-established and notable fact that information at the top of a website holds more priority than what is at the base of the page (due to the order in which it’s likely to be seen). Therefore ensuring your content is provided in a balanced manner which follows the convention is worth considering.

Conventions show that content should be given priority based on importance.

Drawing Focus

One of the key principles of distinctive and attentive design is based on the idea of drawing focus to content and design elements of importance. While making good use of space and reducing noise levels can be beneficial to drawing focus naturally, there are ways to grab the attention of visitors by focusing or drawing the eyes to something onscreen.

While using such elements can be beneficial to the end-user, it’s worth highlighting that if you fail to balance the need for attention with the need for neutrality, you might end up counteracting your efforts to showcase importance.

The dConstruct website draws focus towards the famous speakers taking part.The dConstruct website draws focus towards the famous speakers taking part.

As with many aspects of design, the idea of drawing attention can be achieved through a general understanding of psychology (so getting that book on the subject may pay dividends).

There are a great number of different ways people can be drawn to content. Methods to draw focus are usually based around clever wording (humour is effective), figures (like prices or dates), relevant terms which are easily recognised (like the word contact), pictures denoting what’s being mentioned (infographics), and animation (which naturally focuses to understand an effect).

By using words that the reader can relate to, you're more likely to draw interest.By using words that the reader can relate to, you’re more likely to draw interest.

While natural attention can be drawn through psychology and relating data in ways which attract the end-user, visual attention is usually more obvious and easy to snatch focus.

An example of this can be seen through people use Flash animations that naturally blur the relationship between grabbing attention for the content and attracting the attention to the user interface (rather than its content value). While forcing the attention of something through visual effects can be a quick (if not crude) way to ensure a visitor reads something, it should be done with some restraint and care.

Visual attention-seeking can result from animated effects that result from actions like hovering.Visual attention-seeking can result from animated effects that result from actions like hovering.

Contrasting Mediums

Another key principle of distinctive design is the idea of contrast. Color has become one of the vital components of many website designs and the way in which shades and variants interact with each other can determine not only the visibility of the information, but in worse case scenarios, they could even be an indicator of underlying problems of readability.

One of the simplest ways to measure contrast is to examine how visible the foreground object (like text) is from background content such as a block color or image.

The most common contrast you'll encounter is background and foreground colors.The most common contrast you’ll encounter is background and foreground colors.

As mentioned, web accessibility plays a common role in contrast as the visibility of information in general can have consequences to who can access the information. While low contrasting combinations may give the impression of subtlety and softness, if contrast is insufficient, or if two shades which are known to conflict in certain vision conditions like color blindness are used, you may well end up with a negative visibility issue that not only makes text less distinctive but impossible to read. Visibility disorders are the most common conditions that suffer from poor color contrast choices.

Accessibility is closely tied in with how well content contrasts in its surroundings.Accessibility is closely tied in with how well content contrasts in its surroundings.

The benefits of contrast and the use of color psychology can draw user attention in some unusual ways. A primary example of this is what is known as color symbolism, where people visit a website rich with certain shades of colors that remind them of certain things and emotions. This richness which goes unstated can draw their focus.

Depending on the audience type and the culture of the crowd, the interpretations of color may differ, but contrasting and complementing the harmony of your palette will give added emphasis and targeted emotional triggers to make use of.

Color not only evokes emotion (and attention) but it also can make things distinct.Color not only evokes emotion (and attention) but it also can make things distinct.

Highlight for Impact

The final principle I want to highlight (no pun intended) is the idea of manually adding distinctive impact to your website through selective effects.

So far, we have focused on taking away objects of unnecessary value and pulling eyes to a section through emphasis and contrast. This method takes a different approach entirely by taking something that already has a user’s attention (like a block of text) and then boosts certain parts of that content to increase its visibility around elements which surround it. Of course, this is aimed at natural highlighting in context to an existing range of content.

Just highlighting passages of text can give the content a boost of emphasis.Just highlighting passages of text can give the content a boost of emphasis.

Highlighting a segment of text may seem subtle, but it can be surprisingly effective. In browsers like Google Chrome, you can actually change the color of highlighted text which may give the manual selection of content a better contrasting (and easier to read) platform to work from.

Of course, apart from using a background color there’s a whole range of ways in CSS to draw attention, such as the use of icons besides text, coloring links of unique segments or simply changing the font, size, color or style (bold, italics, underlines, strength and emphasis) of the information needing added visibility.

Common stylistic traits that are anything but the default can represent content well.Common stylistic traits that are anything but the default can represent content well.

The use of color in highlighting for impact and giving distinction go through psychology and design with ease and it can be said that only using color selectively will give your work added impact (like how more whitespace gives impact to less content).

However in certain cases (like children’s sites), using a sharp array of bold colors and vibrant shades can actually draw attention well enough for the subtle restriction of color to be a non-issue. While in many sites aimed at adults, it’s better to keep a firm focus on color usage, sites aimed at a younger audience can get away with such vivid use of shading.

Using an appropriate sharp group of colors can highlight sections uniquely.Using an appropriate sharp group of colors can highlight sections uniquely.

Attention to Detail

While there aren’t any strict rules to dictate how much strength you should give content, I find that a good balance is as follows:

  • 85% of the design is neutral (with no focus)
  • 5% of the design has minimal highlights (like banners)
  • 5% of the design is emphasized (such as bold, italics, link colors, and other strength)
  • 5% of the design being very important content which requires immediate priority

Though, factors which affect how the distribution balances out should be accounted for, such as its position within the viewport, if the content is "fixed" and the amount of strength given (like size and color).

The above graph may help you decide how to breakdown the distinction barrier.The above graph may help you decide how to breakdown the distinction barrier.

JavaScript and advanced CSS selectors have improved the situation of designing with consideration towards distinction. With the ability to simply hide content (or restrict how much content is visible) at any one time, and the ability to animate or control how information will appear depending on viewport availability or device type, we can put ever increasing efforts into making the most out of the little flourishes we choose to have on display. While such complexity can make us feel like we need to take advantage of it all at once, a controlled approach can simplify our designs.

Scripting and cool CSS techniques aside, single page designs have boomed in popularity.Scripting and cool CSS techniques aside, single page designs have boomed in popularity.

The key principle of attention is that of the designers own eye for detail, there is little excuse to make things either bland or boring even when the content arrives in beauty and simplicity. The modern advances of scalable designs, flexible layouts and minimalistic ethos have laid down some great methodologies for making information easier to access, read and use.

Taking time to consider how each event or effect may be interpreted, your visitors’ ability to read what you produce and assigning yourself the goal of attempting "less is more" (in context) will boost your content’s value.

Everything in moderation is the best policy as there's no point wasting effort! Everything in moderation is the best policy as there’s no point wasting effort!

The art of distinction is in the way we portray information and how the important and relevant bits manage to push their way past the flourishes and useful engaging elements which give that content added substance.

While the web evolves (like our tastes and abilities) it’s a fact of life that portraying information effectively will become (as it remains) one of the most important philosophies that the design community has to offer.

In reflection, distinctive design gives your content the best chance of being read, understood and enjoyed in the future — which is fantastic if you want to be noticed!

Related Content

About the Author

Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need.

25 Comments

Daniel Wheeler

August 10th, 2010

Core blimey…. a lot of information to take on board ;-)

Very well written and useful information here! Nice

Magic

August 10th, 2010

This is a great article. It reminded me of when I was in high school and took several years of graphic arts. Back then, it was all print media because the internet didn’t really exist for the average person.

The biggest lesson that I learned from studying that subject was the importance of white space. And maybe this was because I struggled with the concept at first, but I found that just because there was some real estate on the page, didn’t mean that it had to be used. On the contrary, it was often more effective to leave things blank.

I’ve tried to keep that lesson in all my web designs today.

Ryan Carson

August 10th, 2010

Thanks for the screenshot Alexander. Seems strange though, not to link through to our site (or the others you showcase)?

Auré

August 10th, 2010

Yop,
It’s an interesting post with lots of useful informations. I think you’ve write almost everything !
Web design is a multi-faces job that requires numerous skills, that’s probably why it’s so interesting :)

ps : Thanks for this “special featuring” :)

pps : I agree with Ryan Carson. I think it could have been useful to put links on the visuals and allow people to take a closer look to the examples you’ve quoted. It’s always interesting to see the live websites (and open Firebug to see what’s under the hook)

piyanistll

August 10th, 2010

thanks for article very nice

Jacob Gube

August 10th, 2010

@Ryan Carson and @Auré We’ll link it up — it was an oversight on my part. We usually do link the examples.

Nelson Pacheco

August 10th, 2010

This was a fantastic article. Thanks for giving us the privilege to read it =D

Jansen Tolle

August 10th, 2010

Great article. I especially like the part on Noise Margins. The phrase “where’s waldo?” is 100% right in describing it.

Nathan

August 10th, 2010

Good post, I liked the examples you gave from websites online, though it would’ve been helpful if you linked the images to the websites themselves, so we wouldn’t have to google them.

Rupnarayan Bhattacharya

August 11th, 2010

Yes great article indeed, I was expecting to see different sections on big fonts, big headers or contrasting colors.Some information about the sites which helps to judge the user clicks will be useful.
It is indeed an art and science together to control the eye movement of an user in a website. Keep up the good work.

Jessica

August 11th, 2010

This article is great. I just wish clients would realize that less is more when designing sites.

nwebr

August 12th, 2010

Great article. It’s actually quite amazing how considering deep design concepts can actually bring you idea.

Jacob Gube

August 13th, 2010

Images have been linkified so that you can easily see the live pages.

Penelope Singer

August 13th, 2010

Excellently written article! You hit all the points dead on. I’d like to add a bit additional that’s important to point out.

In Noise Distraction, you say, “Text content can suffer issues if it’s not laid out effectively. In this case, breaking large clumps of data into tables, bulleted lists, sections and styled content can aid readability.” Obviously, well written copy that’s specifically crafted for the web is key, but there’s another thing that’s highly overlooked – line length.

The length of a line of text highly affects the comprehension and readability. If you think of your eyes like the carriage of a typewriter, the distance the eyes have to travel from the end of one line to the beginning of the next directly impacts the flow of both reading and comprehension. Too long and your eyes take longer to find the start, breaking up the reading flow – Two short and there’s not enough of the sentence/idea content to process, breaking up the comprehension flow.

In print, 55-70 characters per line (cpl) is the optimal reading line length. On the web, you’d want it to be a little shorter.

Of course, if you’re breaking up your content into bullets and lists this isn’t a big a problem. Often, however, content writers don’t, can’t or won’t break it up. Even short paragraphs, a great way to add white space and readability, can suffer from the line length problem.

There’s no way to entirely mitigate this as users have a lot of the control in how our pages display – monitors at different resolutions and aspect ratios, along with how they scale the size of their browser, not to mention smartphones, netbooks, and the like – but just keeping this in mind when designing and testing can make a world of difference. Personally I like using columns and white space, but there are a lot of other great ways you point out in this article.

Great job! I’m looking forward to sharing this with others on my web development team.

Theo

August 13th, 2010

Awesome article, useful and clear !

Kris de Jong

August 14th, 2010

Very useful, Thanx!

Adam Hermsdorfer

August 15th, 2010

Nice article. You summed up the various elements that keep pages clean and focused on the message.

Machin

August 16th, 2010

Found the part about attention to detail particularly interesting. Good work.

Cesar Noel

August 17th, 2010

Nice article. Good Work

Melisa Zachrich

August 18th, 2010

Love this article! Very well thought out.

Ross

August 20th, 2010

Amazon breaks all the rules, doesn’t it? And it ain’t too pretty.

There is a LOT of info on all pages. But because Amazon is such a big player, the overload becomes normal.

Build it–even if it’s nasty–and they will come.

Amanda

August 22nd, 2010

Web design is always trying to improve your designs, nice post.

Craig

September 9th, 2010

Great article, a website is constantly evolving trying to get that little bit extra personality.

Abe

June 24th, 2011

It was a nice article.
I found it very useful.
Thanks for sharing it.

Okyere Adu-Gyamfi

October 4th, 2011

Nice article, my addition is simple. distinction in web design is art and it must follow the function of the website. good design follow most if not all of the principles outlined here, but like I learned from a great music teacher ‘your art must have something to say’ otherwise it is not very useful.

Leave a Comment

Subscribe to the comments on this article.