Basic principles of designing web, do's and don't. Compile from any resources, credit to: webdesignfromscratch.com

1. Web 2.0
Style Guide
Multimedia Design 1

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

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

4. 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. Reflections
14. Cute icons
15. Star flashes

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

6. sample of simplicity principles in web page

7. Why Simplicity is Good?
• Web sites have goals and all web pages have
purposes.
• Users’ attention is a finite resource.
• It’s the designer’s job to help users to find
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 find a solution that’s
does its stuff with as little as possible. That’s
economy, or simplicity.

8. How to Make Your Design
Simple?
There are two important aspects to achieving
success with simplicity:
1. Remove unnecessary components, without
sacrificing 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!

9. Here’s an example of a design that suffers from
Example 1 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.

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

11. Web Designer isn’t communicating hard data, but soft
information, so use them (your pixel) consciously and
with care.
Hard data
means facts, like news, stock prices, train times, or how
much money is in your bank account…
Soft information
covers the qualitative aspects of communication, like
the first 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!

12. Example 2
Alex 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.

13. 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 /
fixed-size, compared to a few years ago.

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

15. 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).

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

17. 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 filling 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.

18. Example 1
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.

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

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

21. 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 definitely 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.

22. 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 fine, because it’s a sit-back, scan and pick your
experience moment…

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

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

26. 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 definitely 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.

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

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

29. 5. Solid Areas of Screen Real-Estate
Leading on from the clearly differentiated top area, you’ll
notice that lots of sites define 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-links
It’s possible to design a web page so that these areas are
immediately distinct from their neighbours.

30. Example 1
The strongest way to do this is using colour

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

32. 6. Simple Navigation
Permanent navigation – your global site nav that appears on
every page as part of the page template – needs to be clearly
identifiable 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.

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

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

36. 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…)

37. 7. Bold Logos
A clear, bold, strong brand – incorporating attitude, tone of voice,
and first impression – is helped by a bold logo.

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

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

40. When & How?
Your logo should:
• work visually in its main context, and any
other uses in which it may be used (like flyers
or t-shirts?)
• be recognisable and distinctive
• represent your brand‘s personality and
qualities on first viewing

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

42. Example

43. 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!
Only use bold text intro/bigger text if you’ve got
something bold to say.
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.

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

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

46. 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 reflections)
help make a visual interface feel more real, solid and “finished”.

47. Example

48. 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 first.
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 flat.

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

50. Example
Simple and Clean
Cute and Quirky
Do not necessarily have to feature tiny hills!
Richly Detailed

51. 11. Star Flashes
These 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!).

52. Example

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