websites 2.0
DESCRIPTION
Website creëren?TRANSCRIPT
Web 2.0 Design – How to Design Best Web 2.0 Style
by Ben Hunt
In this tutorial, I describe various common graphic design elements in modern web “2.0″ design style.
I then attempt to explain why they work (i.e. why they have become common), as well as how, when and where you might use each element in your designs.
It follows on from my Current Style article, and analyses in greater depth the design features of the current “Web 2.0″ design style.
To learn how to design Web2.0 sites yourself, you must read “Save the Pixel – The Art of Simple Web Design”, which is a comprehensive guidebook to the principles and techniques of Web2.0 design.
Summary of Best Web Design FeaturesThe list below is a summary of many of the common features of typical “Web 2.0″ sites.
Clearly, a site doesn’t need to exhibit all these features to work well, and displaying these features doesn’t make a design “2.0″ – or good!
I’ve already addressed some of these factors in my introductory Current Style article. Also note my article on Real Web2.0 Design, which explains that 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. Reflections 14. Cute icons 15. Star flashes
Best Website Design? DisclaimerNot all these design features are appropriate in all cases. There are always exceptions, and there are lots of bad examples of these features being used wrongly, over-used, or done without sensitivity to the “symphony” of a site’s design.
You can’t just take all these elements, throw them together and make a good web page, any more than you can take some eggs, sugar, flour and throw them together and get a cake.
Making a web page that works requires a lot of sensitivity to the various forces at work. A good design solution is one that balances those (often opposing) forces.
Web 2.0 ?!I’m using the term “Web 2.0 design” to describe the prevailing style of the best web design I introduced in my current style article.
Many people use the term “Web 2.0″ to describe:
a resurgence in the web economy a new level of technological interactivity between web sites and services or social phenomena deriving from new types of online communities and
social networks
Many others also use the term in reference to a recent school of best-practice web design. I’m comfortable with using it in that context here.
In sociological terms, movements impact people on many levels: economic, cultural, political, etc. Is skate-punk about entertainment and sport, music and the music industry, fashion, or the breakdown of society?
Best Web Design Features
I’m going to take you through the features of the current wave of the best website designs, dissect the most significant features, explain why each one can be good, and show you how to use them in your own sites.
If I had to sum up “Web 2.0″ design in one word, it would have to be “simplicity”, so that’s where we’ll start.
I’m a great believer in simplicity. I think it’s the way forward for web design.
Today’s simple, bold, elegant page designs deliver more with less:
They enable designers to shoot straight for the site’s goals, by guiding the site visitor’s eye through the use of fewer, well-chosen visual elements.
They use fewer words but say more, and carefully selected imagery to create the desired feel.
They reject the idea that we can’t guess what people want from our sites
1. Simplicity“Use as few features as are necessary to achieve what you need to achieve”
Web design is simpler than ever, and that’s a good thing.
2.0 design means focused, clean and simple.
That doesn’t necessarily mean minimalist, as I’ll explain later.
I really believe in simplicity. That’s not to say that all websites should be minimal, but that we should use as few features as are necessary to achieve what you need to achieve.
I’ve written elsewhere about Occam’s Razor, which is a principle I use all the time. One way of interpreting it is: Given any two possible solutions to a problem, the simpler one is better.
Here are some examples. Note how unnecessary elements have been stripped out from each. There could be a lot more on each page than there is… but would that make them stronger?
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.
Here’s a great case in point. Atlas Software help businesses with cloud software solutions. Their website tells you exactly what you need to know, with very little decoration or unnecessary visual information. The content
Why simplicity is best 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.
When & how to make your designs simple
When?
Always!
How?
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.
“It seems that perfection is reached not when there is nothing left to add, but when there is nothing left to take away.”Antoine de Saint-Exupéry,Terre des hommes, 1939
Whenever you’re designing, take it as a discipline consciously to remove all unnecessary visual elements.
Concentrate particularly on areas of the layout that are less relevant to the purpose of a page, because visual activity in these areas will distract attention from the key content and navigation.
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, part of the page background. Relatively few pixels are used to user to find or understand information or interact with the site.
See how much “stuff” there is to look at, and notice how few of the pixels are used to clarify actual navigation, actual content, or actual interactive features.
Edward Tufte is the boss when it comes to the design of information. He uses the terms “data ink” (i.e. detail that enables information transfer) and “non-data ink” (i.e. detail that’s just detail) to describe this phenomenon.
One way Tufte specifically measures the effectiveness of information design (graphs, charts, presentations etc.) is using the ratio of data-ink to non-data-ink. The higher the proportion of data-ink used, the more likely it is that a design is effective.
Taking the Yaxay detail above, there’s a lot of what I call “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, andb. 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 all “non-data ink”, because it’s not enabling communication.
I’m not against richness, complexity or beauty in web design
Simplicity means:
Use as many pixels as you need, in whatever way you need, to facilitate the communication that needs to happen.
Of course, often what you’re communicating isn’t hard data, but soft information.
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!
Whether what you’re communicating is hard or soft, your pixels count, so use them consciously and with care.
Take the example below:
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. That’s why it’s in my personal list of best website designs.
Whatever you’re saying, choose wisely where you use your ink/pixels. Use it to communicate, first and foremost. Then, ask whether you can communicate just as effectively with less. If so, do it.
2. Central layout(More about this on the Current Style page). 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.
Why a 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 not as pressurised to cram as much information as possible above the waterline/fold.
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
I’d say, 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).
Example, QVision Lasik
My design for this Lasik vision correction surgeon in Arizona has a light grey page background, which doesn’t draw the eye, so focus turns to the stronger colours, tones, and shapes in the content itself.
3. Fewer columnsA 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 columns 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.
37Signals have always been at the front when it comes to questioning the status quo and coming up with simple answers.
Here, 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.
Apple is the other leader in elegant simplicity.
This kind of layout works really, really well. Each time I experience Apple’s simple design, the more convinced I become that its zen approach is the holy grail of design.
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 columns
I’d definitely recommend using no more than 3 columns, simply because you should use no more of anything than you need to.
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 beacuse 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.
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.
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…
And here’s a site that gets it wrong…
Here’s All Things Web2.0 using 4 columns: 2 side columns and 2 central columns.
The downside of this layout is that you don’t know where to start looking. Everything is somehow low-priority (partly because of the darkish background).
As we saw, Amazon differentiates the page to this extent, but the design helps you instantly identify what each area of screen real-estate is for, so it’s not confusing.
4. Separate top sectionsThis 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.
See how clear the “page-tops” are in these 6 samples, even at small scale:
Why distinct top sections 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. I like strong, simple, bold attitude. Definitely best web design practice.
2 of these top-sections contain just branding (Protolize, Mediconmedia), 1 has just navigation (Cross Connector), and the remaining 3 have both.
The weakness of Cross Connector, in my view, is that the logo comes after the nav. I prefer the nav to be high-up, and clear (like e.g. Simple Bits).
When & how to use a 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. I’d always recommend 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.
Here are 2 examples where the top section is separated with a solid line, rather than being solid colour itself.
And here, the top section contents simply sit boldly outside the main column area.
5. Solid areas of screen real-estateLeading 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.
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. I think that placing clean content on white space creates an easier experience, helping the viewer to feel more relaxed and free to browse.
6. Simple navPermanent 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.
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 nav simple
Simply remember the key: navigation should be clearly distinguishable from non-navigation.
Just follow the best design practice guidelines above, regarding differentiation through position, colour and clarity.
My article about 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 logosA clear, bold, strong brand – incorporating attitude, tone of voice, and first 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?
Strong, bold logos say “This is who we are.” in a way that we can believe.
When & how?
See my articles on logos and text-based logos.
It’s very hard to say how to create a good logo, but in brief…
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
More info…
See my collection of nearly 50 inspiring web site logos »
8. Bigger textLots of the best designed “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 (if they’re still there).
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.
Not only does big text stand out, but it’s also more accessible to more people. That’s not just people with visual impairments, but also people looking on LCD screens in sunlight, on their phones, people sitting a little further from the screen, and people just skimming the page. If you think about it, that could be quite a lot of people!
When & how to use big text
Big text makes most pages more usable for more people, so it’s a good thing.
Of course, size is relative. You can’t take a normal, busy site, make ALL the text bigger, and make it more usable. That might not work, that might be worse.
For best results, in order to use big text, you have to make room by simplifying and removing unnecessary elements.
You also need to haave 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.
9. Bold text introductionsLeading on from the big text theme, many sites lead with strong all-text headline descriptions.
These normally set out the site’s USP, elevator pitch or main message.
They tend to be graphical, rather than regular text. The reason for this is that designers want a lot of control over the page’s visual impact, especially early on in a browsing experience.
When & how to use a bold text intro
Only use one if you’ve got something bold to say. v (If you haven’t got something bold to say, maybe it’s worth having a think about the purpose of your page/site and coming up with somethign worth saying boldly!)
If you have a simple message that you want to be seen first, go ahead and headline it. Make it clear by putting it against a relatively plain background.
10. Strong coloursBright, strong colours draw the eye. Use them to divide the page into clear sections, and to highlight important elements.
When you have a best-practice 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.
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.
Apple’s design has always used a great balanced combination of tone (darks), rich effects and colour to draw the eye.
It may be, overall, the best website design there is, in my opinion.
In this image, the intense dark areas and strong colour are used sparingly to pick out important content.
Colour is also a great medium for communicating brand values
Here, the colour isn’t bright, but it is strong, partly because of the amount of green used.
This design uses green to communicate the values of “quality” and “health”.
Note: site design doesn’t match this image!
This site sells outdoor clothes exclusively for females, and the soft colours reinforce the chosen brand personality.
Be careful to use intense colour on or around high-value features
A nice, effective page design is compromised by the use of large areas of intense colour outside the main page area.
The result is that the eye is drawn away from the real content.
The Aurum Newtech site risks the same effect, but the colour is just pale enough to keep the content noticeable.
Also, the big, bold and well-spaced content elements help draw attention away from the “attractive” background.
Remember to use sparingly
If you’re 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.
11. Rich surfacesMost 2.0-style sites use subtle 3D effects, sparingly, to enhance the qualitative feel of the design.
We all know that these little touches just feel nice, but we may not know why.
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. Making stuff look solid and real can make it look “touchable”, which is likely to appeal.
When & how to use rich surfaces
The golden rule here is to use with care, and not to overdo it.
As I explain in the tutorial on 3D Effects, these effects should not be applied to everything.
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.
Avoid trying to make your entire design 3D-realistic because:
It’s more work It will increase the overall size of the page assets And you don’t need to. 3D effects use lots of different pixels, and
different pixels should be used deliberately to draw the visitor’s attention to key content elements, or to enhance “soft” informational aspects. A little goes a long way.
12. GradientsSometimes it seems the best Web 2.0 design has more gradients than the Alps! (although this trend is diminishing over time).
Why Gradients are so Useful in Best Web Design
Gradients soften areas that would otherwise be flat colour/tone.
They can create the illusion of a non-flat surface, used to good effect on Alex Dukal’s portfolio.
Gradients can be used to fade a colour into a lighter or darker tone, which can help create mood.
In page backgrounds, they may also create an illusion of distance.
A common gradient combo is blue-to-white, which evokes the effect of aerial perspective, creating the sense that the background fades away towards the horizon.
They are commonly used at the very top of page backgrounds, where they help denote the boundary of the viewable area.
They’re also an integral part of drop-shadows, and the inner-glows and specular highlights you see on glass- or plastic-style buttons.
Note that gradients usually work best when juxtaposed with areas of flat colour or tone.
On the Curve2 homepage, the gradients are more effective because each one is positioned adjacent to a flat white or grey section.
It’s common to find gradients enhancing the base colour (using mix effects like color-burn or overlay in Photoshop), which create subtly different hues.
Here, the highlighted green colour is warmer and friendlier than the darker base colour. The overall effect is both softer and richer.
13. ReflectionsThe illusion of reflection is one of the most common applications on gradients.
These commonly come in 2 kinds:
Highlights caused by light reflecting on shiny surfaces That shiny table effect!
Specular highlights
Realistic effects of water droplets, glass beads, shiny plastic buttons etc. have been very popular over the past couple of years.
I don’t know where the trends started, but Apple’s web site must have been one of the most influential, preceding their Aqua interface look & feel.
Here are some examples:
The classic Apple.com shiny plastic tabs, still in use today.
These use highlights caused by a light source above the tabs, combined with an inner, diffuse glow that creates the plastic effect.
These tabs, from one of my recent redesigns, have a polished (from the strong white highlight) carbon-fibre appearance. The carbon effect comes from the warm diagonal-stroke pattern from the icon’s glow.
More nice shiny plastic. Notice how the reflections fall off at the edge of the shape, which create the illusion of rounded edges.
Similar effect on a square shape looks like a badge.
The non-horizontal angle creates a sense of dynamism.
This shiny button from cafepress.com uses a rounded reflection that suggests a wide light source coming off a rounded surface.
This button from web hosts Mediatemple has a more diffuse reflection, suggesting a matt glass finish.
That shiny table effect!
One of the best website design features, pioneered by Apple again (I’m sure). This is a really nice effect which is so prevalent now, it’s in danger of
being overused, now starting to look tired and is falling out of favour with designers.
Remember, of course, that web designers are usually more sensitive to these things, so even if we’re getting turned off by it, the general public may still think it’s cool for some time to come.
The standard Apple look. Greyed-out and fading on a white base.
On a coloured background
Fading out to either side (my one this, not published yet)
More extreme angle, and a rich layered effect reflecting the colour of the solid object
Here’s how to do it (from photoshoplab.com) »
14. Cute iconsIcons 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.
In the old days, icons were sometimes overused. It seemed that everyone wanted an icon for every navigation link or tab. Now, we use clear text more extensively, and are less ready to litter a page with icons.
Where 2.0 designers do employ icons, they are reserved for higher-value spots, where .
Simpler, more spacious designs demand less attention and allow for a richer icons.
Some examples, demonstrating various attributes.
Simple and clean
Cute and quirky
Do not necessarily have to feature tiny hills!
Richly detailed
Creatively inspired by Mac OSX. See Enhanced Labs for a great showcase.
15. 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!).
Another style that’s seeming over-used, and will probably run its course over the next year.
Also see… Real Web2.0 Design & Branding : Explains that Web 2.0 design is not the
same as star flashes and shiny table effects – it’s about simple, bold, honest brand experiences.
9 Essential principles for good web design, by Collis To find out how to do it in Photoshop, go here and scroll halfway down
(from photoshoplab.com)
Common featuresGreat sites share the following design 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 whitespace Nice big text
Let’s look at these features one by one.
Simple layout
It feels like we’re seeing more simple 1- and 2-column designs than in previous years.
The overall feel you get is that designers generally agree that simple pages work better.
These pages read in a straightforward way from top to bottom, and you don’t find your eye skipping around trying to work out what to look at. It’s a much calmer and more solid browsing experience than in times gone by.
Centered orientation
The other thing you notice about all the hot picks above is that they’re all laid out around a central axis.
Whereas a couple of years ago, you’d find a lot of liquid layouts and left-aligned fixed-width layouts, today content goes in the centre of the screen.
Left-oriented layouts are much less common than they used to be.
Also, liquid (full-width) layouts are less popular.
The wisdom has always been that we should try to get as much information "above the fold" (i.e. visible on the screen without scrolling). Liquid layouts achieves this.
However, today we seem to be more comfortable with scrolling, and we’re willing to put up with scrolling for the benefits of increased white space and line height.
Design the content, not the page
Good modern web designs put less energy into designing the page background – the canvas and permanent page features – and rather focus on designing the content itself.
This is one of the central themes of Save the Pixel, my ebook on the art of simple web design.
We see the effects in:
Freer, less boxed-in page layouts Softer, simpler, receding page "furniture" Strong colour and 3D effects used to draw attention to the content itself,
including the main branding The focus is on making the site’s subject look good, rather than making the
web designer look good (which is better for the designer in the long-term!)
To take away…
What designers should learn from this trend is that it’s not enough to design a blank page, to be stuffed with content later. As I’ve written elsewhere, content is our problem. As designers, we’re communicators (not decorators) and site content carries the majority of our message.
Why center-align?
I like center-aligning, and have been tending to use it on my designs for a while.
When the content sits in the centre of the screen, it feels up-front and confident.
It also gives a sense of simplicity and balance, which reflects the move towards clean, more Zen, design.
The most common centered designs are either fixed-width (i.e. master width in pixels or percent) or sometimes zoom-width (i.e. master width in ems, e.g. Forecast Advisor). The benefit of restricting the width of the content (particularly with zoom-width, which resizes as the font size changes) is that the line-length is prevented from getting too long on larger screens. (Very long lines of text are less efficient.)
However it’s also possible to have a liquid layout with a center-orientation, as the Alternative Energy Store site shows.
On this site, just centering the logo brings the friendly, forward-facing feel of the centered site, while getting a lot of content visible on the screen.
3D effects, used sparingly
Every single one of the hotties uses gradients subtly, either to give bars a slight roundedness, to create a soft feeling of space in the background, or to make an icon stand out with embossing and subtle drop-shadows.
Reflections & fades are very prevalent. Drop-shadows are still used, but with care.
Trademark round flashes are everywhere.
Soft, neutral background colours
All the hotties have a plain background, the most popular being white and greyscale fades. These give a cool, neutral, soft base against which you can flash strong colour to draw the eye.
Strong colour, used sparingly
A soft, stylish background is the perfect base for adding eye-catching features. Strong colours and tonal constrast are great for drawing the eye to the more important elements on the page.
Iomega uses more strong colour than the others, with its intense dark red promotion area. However this doesn’t drown the rest of the page, because the colour is consistent and simple in shape.
Cute icons, used sparingly
There’s a theme here: Don’t use too many attractive elements on the same page view (i.e. that appeals to the eye and draws the user’s attention).
As with strong colour and 3D effects, appealing icons and buttons can add that bit of polish to help give a page a high-quality feel. But used too much, they’ll have the counter effect, cluttering the page and confusing the user.
Plenty of whitespace
Today’s web designs are so fresh, they feel like they’ve taken a deep breath.
Sometimes I imagine taking a page design that’s too crowded and sticking it on a balloon, then blowing air in until everything on the page pulls apart to leave healthy gaps.
Your eye needs space (guttering in typo language) round stuff to help you clearly and cleanly identify things.
In general, the more white space the better. It’s very rare that I look at a page and think: "Gosh, they really need to cram that page up a bit!"
Of course, "white" space doesn’t have to be white. But it does have to be space!
It’s great to see so many designs using good-sized margins to space elements apart, and extra line-height to aid on-screen reading.
Look at all this lovely refreshing white space!
Nice big text
I’m not saying that all the text on your web site should be supersize. In fact, in some scenarios, small text is fine (we tend to take in more when text is a bit smaller).
Real Web 2.0 Design, the Essential Design Features
by Ben Hunt
The term “Web 2.0” has been around for a while, in terms of visual design for the web.
Many people use “Web 2.0 design” to refer to a certain visual style or look that’s typical of of many new sites over the past 2 or 3 years (but which in fact predated the use of the term).
While there are some important and relevant design themes we can associate with “Web2.0”, these aren’t the surface styles and effects that
might first spring to mind.The elements of real Web2.0 design are not purely graphical.
Stuff like gradients, bold colours, big fonts, reflections and star flash labels, which I described in 2 previous articles (Current Style in Graphic Design for the Web and Web2.0 Style Guide) are short-term by-products of a more fundamental cultural shift.
This article aims to explain the difference, and demonstrate the really valuable elements that every designer should learn from modern web design.
The hallmark of Web2.0 Design isn’t graphicalThe shiny table effect doesn’t represent true Web2.0 any more than safety pins and tartan represent punk.
In the Web 2.0 Design Style Guide, I stressed that stylistic ingredients don’t make a design Web2.0 any more than flour, eggs and sugar make a cake.
In this article, I want to clarify the essence of what I consider real Web 2.0 design, the core factors that differentiate a genuine Web2.0 artefact from a lookalike:
It’s simplicitySimplicity is the fundamental recurring feature of Web2.0 with
Simple front-facing brand Simple focus
Let’s look at a few aspects of what the term “Web 2.0″ means.
A new hope
Life is for the taking in Web2.0
One aspect of “Web 2.0″ is the recent (last 3 years or so) resurgence in the web economy.You feel this in the number of startups competing in new niches, the amount of venture capital investment available, and aggressive takeovers and consolidations by bigger players.
The web industry is enjoying a vibrant buzz of potential. A new generation of dotcom kids enjoying the potential to make it big overnight, Bubble1.0
veterans are shaking off their bad experiences (with the help of therapists worldwide) and blinking in the sunlight of a new era of possibilities.
All this potential brings a renewed optimism in the web sector, which tranlates into new bold, up-front brands, with piles of personality and bags of balls.
Mixing & Mashing information
Nothing stands still in Web 2.0
A lot of us see “Web20″ as fundamentally a technological phenomenon, where data and functionality are free to move between applications more easily, thanks to new data transfer formats and techniques like RSS, web services, microformats, and AJAX.
The upshot of this is that information entered on one site may end up being repurposed somewhere else, even in a different medium. The mobility of content requires a fundamental separation of data from display style.
Information is more often stored in databases, or as XML, and rendered to a wider range of devices in a wider range of formats then ever before.
Democracy
You are more valuable in Web 2.0
A third significant perspective on Web 2.0 is the democratization of information.
Regular pedestrian web users are more frequently the creators and editors of content. Anyone can be a journalist through their blog and RSS feed, and everyone has a voice about what counts as news through social bookmarking sites like Digg and del.icio.us.
It may be a concidence that culture is much more media-savvy and conscious of commercial relationships than at the end of the 20th Century. You could describe the relationships in today’s marketplace as “post-modern consumerism”.
Either way, the traditional top-down media channels and, to some extent, business models have been turned upside down in the 21st Century. You don’t have to have heaps of contacts or money to do business, or to influence thousands of people through blogging.
How this manifests in Web 2.0 branding and design
At Web Design from Scratch, we get a lot of requests from companies who want to redesign their site with a 2.0 makeover.
Of course, any redesign should be about more than visual stylistic treatment alone. Look and feel is an extension of brand.
Simple front-facing brand
It’s certainly possible for corporates to borrow effectively from Web2.0 design trends.
Just as big business can aspire to rejuvinate its culture, brand or offering by borrowing from newer start-ups, so a big corporate website can re-style itself by learning from the Web 2.0 start-up mentality.
In both business culture and web design, this means taking a fresh brand stance, which may involve being more:
Transparent Direct Bold Fearless Trusting
The competitive energy and accelerated evolution in the internet industry combine with the focus on people power to create brands that have to be distinctive and instantly “gettable” – putting their message across quickly and succinctly, saying “This is what we do, for whom, and why you should use us.”
Of course, good branding has always done that, but never before under this pressure. Web consumers, and online competition, are more sophisticated than they were in the last Dotcom boom, and better technology has made it easier than ever to implement an idea, so a brand needs to stand up to sceptical scrutiny, which means establishing credibility very quickly.
The smoke and mirrors of previous generations of web sites can’t build trust in a few moments – like maybe they did 10 years ago. We’re no longer impressed by a home page that aims to impress us with sheer volume of information, or a cropped photo of a business handshake.
In Web2.0, the whole site has to feel transparent, open, and trustworthy. Every element of every page has to be front-facing and single-minded in its focus on a simple proposition.
Openness and trust go both ways The site (brand) is open with me about its goals and how it plans to
achieve them – “We want to give you the easiest way to manage your multiple accounts”
The brand also expects openness from me, as part of the deal – “You’ll need to give us your contact info, and if you love it and want to use the premium version you’ll need to provide payment details”
But it shows me I can trust it – “But we promise we won’t share your personal information with anyone ever, at all, period, nooo way”
And puts its trust in you – “Please tell us what you like and what you don’t, so that we can make it work better for you”
Some good examples of open, up-front branding
Up-front straight talk from the developers behind time-tracking solution Tick.
What more transparent way to introduce Ruby, the powerful object-oriented programming language than to show you some code?
Unfortunate is a site where you can make and send your own fortune cookies – uniquely, so they boldly claim.
Wishlistr, a wish list site kicks off the site by saying exactly what it does for you, and how.
Simple focus
In the cut-throat Web2.0 marketplace, you don’t have time to sweet-talk and woo visitors. They know their power, they’re savvy post-consumers, and there’s a lot of choice out there.
(In fact, this has always been the case, but the difference with this Web is that your competitors are wise to it, which is why you have to be!
I’ve written an whole ebook that deals with every aspect of this topic – “Save the Pixel – the Art of Simple Web Design”.
Less design
Nearly everything should be simpler in Web 2.0 design, and any complexity has to be justified.
Any pixels, whatever they are, should support the simple focus of the page. Pixels might add colour, contrast, or visual busyness that can draw the eye. They can also create strong shapes or lines.
The thing you notice about good graphic design in the Web2.0 world is that pixels are used very carefully, to manage the visitor’s attention carefully. Any element on any page must justify its existence, or it should be simply removed.
The most obvious place we’re stripping out extra pixels is page chrome, i.e. graphics used to decorate the page itself, rather than draw attention to the content on the page.
Because visitor attention is finite, and there’s a clear message to communicate, anything that dilutes that attention risks page failure, either by tiring the visitor or just not helping them find the next link to what they’re looking for quickly enough.
How do you tell the difference between chrome and content? Well, content changes from page to page, whereas chromse is part of the page template itself. Anything that’s the same on every page can have only minimal value.
The one exception to this rule is in the branding and navigation areas. Your logo can afford to be bold and appealing to the eye, although it may be present on every page, because it’s so important to the page’s gettability (see the book for much more on this). Likewise, top-level navigation is vital for letting someone know where they are and what’s available on the site.
But that doesn’t have to mean wasted pixels! Look at my examples below, and see how careful the designers have been to use every pixel to keep the visitor’s attention on the core content.
Some good examples of pixel-saving layout
On Internet TV software Miro’s site, all the design work has gone into the content. Practically no pixels are used to decorate the page itself.
On Traineo.com, a fitness & health motivation site, see how the content sits straight on the white page, with no containing box.
Sky is a service that produces nice web sites for churches. The plain, light background lets the bright colours and higher contrast in the content really stand out.
Pixel-saving discipline has been applied vigorously with Conceptshare.com, a service to support collaboration on creative projects,.
The background is simple and plain. The content is not boxed in, so it has room to be big & bold.
Your eye is given no reason to stray from the core message.
