Web 2.0 is the business revolution in the computer industry
To paraphrase a definition by Tim O’Reily, who was one of the first to coin the term, Web 2.0
is about delivering software that gets better each time more people use
it. This means that the software gets stronger especially when
individual users provide their own data and services.
Web 2.0 features
- Simple layout
- Centered orientation
- Design the content, not the page
- 3D effects, used sparingly
- Soft, neutral background colours
- Strong colour, used sparingly
- Cute icons, used sparingly
- Plenty of white space
- Nice big text
Let's analyse these features in detail.
Simplicity Web design is simpler than ever, and that's a good thing. 2.0 web design means focused, clean and simple.
The result is that you have to look at the content. You find yourself
interacting with exactly the screen features the designer intended. And
you don't mind - it's easy, and you get just what you came for.
Central layout Basically, the vast majority of sites these days are positioned centrally within the browser window.
This "2.0"
web design style is simple, bold and honest. We're using less to say
more, so we can be a bit more free and easy with the amount of space
used.
Why using fewer columns is good Less is more. Fewer columns feels simpler, bolder, and more honest. We're communicating more 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.
Separate top sections This means making the top of the screen (the main branding and navigation 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.
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.
The strongest way to do this is using colour.
Simple navigation
Permanent navigation - your global site navigation that appears on
every page - needs to be clearly identifiable as navigation and should
be easy to interpret, target and select.
- 2.0 web design makes global navigation large, bold, clean and obvious.
- Inline hyperlinks (links within text) are typically clearly differentiated from normal text.
Bold logos
A clear, bold, strong brand - incorporating attitude, tone of voice,
and first impression - is helped by a bold logo. Strong, bold logos say
"This is who we are".
Bigger text Lots of "2.0" web sites have big text, compared to older-style sites.
If you fill the same amount of space with less "stuff", you have more room.
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 then lesser elements.
This effect has been used throughout the history of print design, on
headings, title pages and headlines. But
you 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!
Strong colours 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. If you are using strong colours to attract the eye, it only works if there's lots of area that isn't strongly coloured.
If everything is trying to attract the eye, then the eye just gets confused, and the site will feel confusing and chaotic.
Rich surfaces Most 2.0-style web 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".
They may also remind us of certain tactile or aesthetic qualities of
real-world objects, such as water droplets, shiny plastic buttons, and
marble floors. The rule here is to use with care, and not to overdo it.
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.
|