Web 2.0 Style Guide

Multimedia Design 1

Instructional Goals

• Understand features of the current wave of excellent web site designs, do’s and don’t

• Apply some basic principles of them to make “a good design” solution for the web

“the essence of Web2.0 design isn’t surface graphical effects but the discipline of simplicity”

1. Simplicity 2. Central layout 3. Fewer columns 4. Separate top section 5. Solid areas of screen real-estate 6. Simple nav 7. Bold logos 8. Bigger text 9. Bold text introductions 10. Strong colours 11. Rich surfaces 12. Gradients 13. Re!ections 14. Cute icons 15. Star !ashes

1. Simplicity

“Use as few features as are necessary to achieve what you need to achieve”

2.0 design means focused, clean and simple, but that doesn’t necessarily mean minimalist

sample of simplicity principles in web page

Why Simplicity is Good? • Web sites have goals and all web pages have

purposes. • Users’ attention is a "nite resource. • It’s the designer’s job to help users to "nd

what they want (or to notice what the site wants them to notice)

• Stuff on the screen attracts the eye. The more stuff there is, the more different

things there are to notice, and the less likely a user is to notice the important stuff.

• So we need to enable certain communication, and we also need to minimise noise.

That means we need to "nd a solution that’s does its stuff with as little as possible. That’s economy, or simplicity.

How to Make Your Design Simple?There are two important aspects to achieving success with simplicity:

1. Remove unnecessary components, without sacri"cing effectiveness.

2. Try out alternative solutions that achieve the same result more simply.

“Whenever you’re designing, take it as a discipline consciously to remove all unnecessary visual elements”

Use visual detail – whether lines, words, shapes, colour – to communicate the relevant information, not just to decorate!

Here’s an example of a design that suffers from not enough simplicity.

Yaxay’s interface uses a lot of pixels, but the vast majority of them are decorative.

There’s a lot of “busyness”, i.e. a lot of edges, tonal changes, colour variations, shapes, lines… a lot of stuff to look at.

But, in this detail, the only useful features are:

a. The site logo, and b. the label on the nav button (which reads

“art gallery”)

All the rest of the “busyness”: the shapes in the background, the diagonal lines in the interface panel, the grid, the gradients… all this is noise, it’s not enabling communication.

Example 1

from that case, Simplicity Means:

Use as many pixels as you need, in whatever way you need, to facilitate the communication that needs to happen.

Web Designer isn’t communicating hard data, but soft information, so use them (your pixel) consciously and with care.

Hard datameans facts, like news, stock prices, train times, or how much money is in your bank account…

Soft informationcovers the qualitative aspects of communication, like the !rst impression about the quality of a company, the sense of how approachable a service provider is, and whether you feel a product will be right for you. It can be just as important!

Example 2Alex Dukal’s site is rich, interesting and appealing. It uses a range of visual techniques to draw your attention, make you interested and to give you a warm feeling about the quality of Alex’s work.

But it’s also simple, because it uses its pixels/ink/busyness with care and sensitivity. It’s not gratuitous, it’s economical and rich.

2. Central Layout

Basically, the vast majority of sites these days are positioned centrally within the browser window. Relatively few are full-screen (liquid) or left-aligned / "xed-size, compared to a few years ago.

Why Central Layout is Good?

This “2.0″ style is simple, bold and honest. Sites that sit straight front & center feel more simple, bold and honest.

Also, because we’re being more economical with our pixels (and content).

We’re using less to say more, so we can be a bit more free and easy with the amount of space used, and pad out our content with lots of lovely white space.

When & How to Use a Central Layout?Position your site centrally unless there’s a really good reason not to.

You may be wanting to get more creative with the space, or get as much information on-screen as possible (for example with a web app).

3. Fewer Columns

A few years ago, 3-column sites were the norm, and 4-column sites weren’t uncommon. Today, 2 is more common, and 3 is the mainstream maximum.

Why Using Fewer Column is Good?

Less is more. Fewer columns feels simpler, bolder, and more honest. We’re communicating less information more clearly.

There’s also a by-product of the domination of centered layouts. Because we’re not "lling the whole screen so much, and not trying to get as much on-screen at any one time, we simply don’t need as many columns of information.

37Signals, they use 2 columns. This a great case study in simplicity. It lets the message speak, and adds nothing that could get in the way.

Example 1

This kind of layout works really, really well.

This typical Apple layout shows that someone has honestly asked, “How many boxes/columns/lines do we really need?”. Then they’ve boldly edited out unnecessary elements, and the result is undeniably the cleanest, most effective communication.

How to Choose Your Column?

It’ s better/recommended using no more than 3 columns, simply because you should use no more of anything than you need to.

But, there are always exceptions, so here are a few examples of more than 3 columns used effectively.

But, there are always exceptions, so here are a few examples of more than 3 columns used effectively.

Derek Powazek’s blog site uses 3 columns for the main section of his blog, but 4 lower down.

The lower section is a kind of pick & mix, where the abundance of columns emphasises the “Take what you like” feel.

Amazon (UK) has two side columns, and products arranged centrally in 3 additional columns.

It works because the purpose of each column is clear from its design. The left col is de"nitely navigation; the right column is “other stuff”. The products in the middle are clearly tiled and separated by white space, so they don’t overwhelm.

Popurls.com contains loads of pick-n-mix information, collating the hot links from other sites like digg and del.icio.us, but it still keeps to 3 columns for the main blocks of text.

The lower section is a kind of pick & mix, where the abundance of columns emphasises the “Take what you like” feel.

Further down, it shows thumbnails of popular images on the photo-sharing site Flickr (and there are Youtube vids later). These are tiled in several columns, which is "ne, because it’s a sit-back, scan and pick your experience moment…

4. Separate Top Sections

This means making the top of the screen (the main branding & nav area) distinct from the rest (the main content).

Of course, there’s nothing new about this approach. It’s a good idea, and has been used for ever. But it’s being used more than ever now, and the distinction is often stronger.

Why Distinct Top Section are Good?The top section says “Here’s the top of the page”. Sounds obvious, but it feels good to know clearly where the page starts.

It also starts the site/page experience with a strong, bold statement. This is very “2.0″-spirited. We like strong, simple, bold attitude.

When & How to Use Distinct Top Section?On any site, both the main branding and main navigation should be obvious, bold and clear.

So it’s a good idea to create a clear space at the top of a web site design that positions the logo and nav boldly.

Always put your logo right up the top of the screen. It’s always recommended putting your main navigation right after it.

It’s de"nitely a good thing to mark the top of the page with a section that marks out the high-level screen features as separate from the main site content.

The top section should be visually distinct from the rest of the page content. The strongest way to differentiate is to use a bold, solid block of different colour or tone, but there are alternatives.

Here are 2 examples where the top section is separated with a solid line, rather than being solid colour itself.

Example 1

And here, the top section contents simply sit boldly outside the main column area.

Example 2

5. Solid Areas of Screen Real-Estate

Leading on from the clearly differentiated top area, you’ll notice that lots of sites de"ne the various areas of real-estate boldly and clearly.

Real estate comes in various forms, including:

• Navigation • Background / canvas • Main content area • Other stuff • Callouts / cross-linksIt’s possible to design a web page so that these areas are immediately distinct from their neighbours.

The strongest way to do this is using colourExample 1

But white space can be just as effective.

The risk with strong colour is that it draws the eye, so it can take attention away from other relevant screen elements.

Placing clean content on white space creates an easier experience, helping the viewer to feel more relaxed and free to browse.

6. Simple Navigation

Permanent navigation – your global site nav that appears on every page as part of the page template – needs to be clearly identi"able as navigation, and should be easy to interpret, target and select.

• 2.0 design makes global navigation large, bold, clean and obvious.

• Inline hyperlinks (links within text) are typically clearly differentiated from normal text.

Why Simple Navigation is Better?Users need to be able to identify navigation, which tells them various important information:

• Where they are (in the scheme of things) • Where else they can go from here • And what options they have for doing stuff

Following the principle of simplicity, and general reduction of noise, the best ways to clarify navigation are:

• Positioning permanent navigation links apart from content

• Differentiating navigation using colour, tone and shape

• Making navigation items large and bold • Using clear text to make the purpose of each

link unambiguous

How to Keep Your Navigation Simple?

Simply remember the key: navigation should be clearly distinguishable from non-navigation.

Inline hyperlinks should also stand out sufficiently from the text around them.

Check out these snippets. In each case, you’re in do doubt what’s a link. (Personally, I prefer using blue text (non-underlined) which turns to underlined red on hover…)

7. Bold Logos

A clear, bold, strong brand – incorporating attitude, tone of voice, and "rst impression – is helped by a bold logo.

Here are some (100% scale). Notice that logos are tending to be quite large, in line with the general 2.0 principles.

Why Using Bold Logos are Good?Strong, bold logos say “This is who we are.” in a way that we can believe.

When & How?Your logo should:

• work visually in its main context, and any other uses in which it may be used (like !yers or t-shirts?)

• be recognisable and distinctive • represent your brand‘s personality and

qualities on "rst viewing

8. Bigger Text & Bold Text Introductions

Lots of “2.0″ web sites have big text, compared to older-style sites.

When you’ve made more room, you can choose to make more important elements bigger than less important elements

Making things bigger makes them more noticeable than lesser elements. This effect has been used throughout the history of print design, on headings, title pages and headlines.

Example

When & How to Use Big Text & Bold Text Intro?Big text makes most pages more usable for more people, so it’s a good thing.

In order to use big text, you have to make room by simplifying, removing unnecessary elements.

You also need to have a reason to make some text bigger than other text. And the text must be meaningful and useful. There’s no point adding some big text just because it’s oh-so 2.0!

If you need to have a lot of information on a page, and it’s all relatively equal in importance, then maybe you can keep it all small.

Only use bold text intro/bigger text if you’ve got something bold to say.

9. Strong Colors

Bright, strong colours draw the eye. Use them to divide the page into clear sections, and to highlight important elements.

When you have a simple, stripped-out design, you can use a bit of intense colour to help differentiate areas of real-estate and to draw attention to items you want the visitor to notice.

Example

The Treo Mobile site uses 3 areas of strong colour to mark out and advertise 3 main areas of the site.

The background colour makes it clear that this isn’t main content, and large, bold title text helps you see quickly what’s in each one, so you can decide whether it interests you.

Colorschemer sections the page with bands of intense, bright, cheerful colour, set against a more neutral background.

10. Rich Surfaces

Most 2.0-style sites use subtle 3D effects, sparingly, to enhance the qualitative feel of the design.

Realistic surface effects (like drop-shadows, gradients and re!ections) help make a visual interface feel more real, solid and “"nished”.

Example

When & How to Use Rich Surfaces?The golden rule here is to use with care, and not to overdo it.

Like any of these techniques, a rich surface may add value to your design when used sensitively and appropriately.

If your navigation/icon/logo/layout sucks fundamentally, you can’t polish your way out. Get the fundamentals right "rst.

It can also be important to maintain a consistent light-source. Although this can get more complex with the illusion of back-lit diffusion in buttons etc., you still know whether an overall design feels consistent.

3D effects can also make elements seem to stand out from the page, but only if the rest of the page is relatively !at.

11. Cute Icons

Icons play an important role in Web 2.0 design. Today we use fewer, better icons that carry more meaning.

Icons can be useful when they’re easily recognisable and carry a clear meaning. In lots of other cases, a simple word is more effective.

Simpler, more spacious designs demand less attention and allow for a richer icons.

Example

Simple and Clean

Do not necessarily have to feature tiny hills!Cute and Quirky

Richly Detailed

11. Star FlashesThese are the star-shaped labels that you see stuck on web pages, alerting you to something important.

They work by evoking price stickers in low-cost stores. For this reason, they suit the start-up ethic of many 2.0 sites, but for the same reason may cheapen other sites.

They can really work well, but of course should only be used to draw attention to something important.

I’d recommend only using one on a page (at most!).

Example

Reference:http://www.webdesignfromscratch.com/web-design/web-2-0-design-style-guide/