Real Web 2.0 Design, the Essential Design Features
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 graphical
The 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:
Simplicity 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.
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:
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.
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”.
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.