The 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!
Introduction
I’m going to take you through the features of the current wave of excellent web site 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 web sites should be minimal, but that we should use as few features as are necessary to achieve what you need to achieve.
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.
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.
When & how to make your designs simple
When?
Always!
How?
There are two important aspects to achieving success with simplicity:
Remove unnecessary components, without sacrificing effectiveness.
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.”
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.
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).
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 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.
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 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. We like strong, simple, bold attitude.
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.
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.
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 nav
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.
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.
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 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.
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
8 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 (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, 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.
In order to use big text, you have to make room by simplifying, 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 introductions
Leading 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 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.
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 surfaces
Most 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.
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 Gradients
Web 2.0 design has more gradients than the Alps.
Why gradients are so useful
Gradients soften areas that would otherwise be flat colour/tone.
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.
13 Reflections
The 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.
That shiny table effect!
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.
14 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.
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.
15 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!).
Another style that’s seeming over-used, and will probably run its course over the next year.
Source: http://webdesignfromscratch.com/
See Also Following Topics:
]]>The bursting of the dot-com bubble in the fall of 2001 marked a turning point for the web. Many people concluded that the web was overhyped, when in fact bubbles and consequent shakeouts appear to be a common feature of all technological revolutions. Shakeouts typically mark the point at which an ascendant technology is ready to take its place at center stage. The pretenders are given the bum’s rush, the real success stories show their strength, and there begins to be an understanding of what separates one from the other.
The concept of "Web 2.0" began with a conference brainstorming session between O’Reilly and MediaLive International. Dale Dougherty, web pioneer and O’Reilly VP, noted that far from having "crashed", the web was more important than ever, with exciting new applications and sites popping up with surprising regularity. What’s more, the companies that had survived the collapse seemed to have some things in common. Could it be that the dot-com collapse marked some kind of turning point for the web, such that a call to action such as "Web 2.0" might make sense? We agreed that it did, and so the Web 2.0 Conference was born.
In the year and a half since, the term "Web 2.0" has clearly taken hold, with more than 9.5 million citations in Google. But there’s still a huge amount of disagreement about just what Web 2.0 means, with some people decrying it as a meaningless marketing buzzword, and others accepting it as the new conventional wisdom.
For More: http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html
2. Web 2.0 and SEO
Search engine optimization is Web 2.0 – it’s official! In fact, even in the original O’Reilly brainstorm cost per click, Google AdSense, blogging and tagging were all "Web 2.0".
It is not uncommon to hear the cry of "Let’s do something Web 2.0", but many traditional marketers are yet to fully understand what Web 2.0 is. Web 2.0 is not a new technology. Web 2.0 is not a new set of rules. Web 2.0 is an idea, it is, fundamentally, the concept that the World Wide Web has evolved since the dot-com bubble of 2001.
A core of Web 2.0 is the idea that the Web is a platform. Not an advertising platform, but a platform where users control their own data and from which scalable services are offered. Web 2.0 is about services rather than packaged software and it is about offerings compatible with many devices (mobile phones, portable gaming consoles, different internet browsers, etc).
Tim O’Reilly runs through the original Web 1.0 versus Web 2.0 list in his infamous "What is Web 2.0" article of 2005. If we look at the original list we can see that many of the Web 2.0 ideas have not quite managed the Darwinistic coup d’etat expected. At least: not yet.
BitTorrent was lined up as an evolution of Akamai and if we were to look at the virtual landscape again today that seems unlikely. Akamai provides bandwidth to the likes of Google. And, while the search engine may be trying to become less dependant on that service, it is not taking the BitTorrent route.
Syndication was the Web 2.0 evolution of Stickiness. Stickiness is the attribute web sites have which encourage people to stay on them and not to flee via the first hyperlink or back button. In web marketing and web design stickiness is as important as it ever has been.
Search engine optimization was there to replace domain name speculation. Search engine optimization has evolved significantly further than that. Domain name speculation ebbed away to almost nothing…although at the start of August the domain name wiki.com was sold for nearly $3 million to John Gotts of Searching.com. A trip to Searching.com’s beta home page brings up the phrase "Web2.0 beta" in the welcome box. It could just be that as mainstream media perks up their interest in Web 2.0 that domain name speculation rises with it.
Napster was cited as a replacement for MP3.com. Hmm: well!
Many might say that we have moved past the 2001 style of music download site that Napster represented at the time, pre-dating the web 2.0 furore. And yes – some people are now talking about Web 3.0!
When professionals talk about Web 2.0 today they tend to be talking about interactivity on a site (ironically, this tends to make the site more sticky – that Web 1.0 concept).
A prime candidate for interactivity on a site is AJAX. AJAX stands for Asynchronous JavaScript and XML and the search engine Google uses it a lot. Gmail (or Google Mail for those of us in the UK) lets you open or close threads of email conversations without reloading the page. That’s an example of AJAX. Pages respond and change to user interaction. Google gives away an AJAX toolkit to make it easier to build pages with it. Here’s the catch – AJAX is rarely search engine friendly. Google may use AJAX but Googlebot is not one to actually use JavaScript, especially when it might be submitting data (which AJAX sites tend to do).
User generated content (or "participation" in Web 2.0 terms) is increasingly common. ‘Content is King’ is a truism in SEO, and it is here that we find the "social" side of the web. MySpace is entirely user generated content: MySpace, YouTube, Digg.com and Wikipedia are all about users being in control of the data.
It is precisely sites such as MySpace, YouTube, Digg.com and Wikipedia which are helping to fuel the rise of the internet and Web 2.0. Rarely a day goes by without one of those sites, or similar, being discussed in mainstream media.
See Also Following Topics:
]]>The Internet is undergoing an extreme makeover. In the 1990s and the beginning of the 21st century, the World Wide Web was primarily a place for viewers to retrieve information. The information flowed in a one-way direction. Websites were mostly built by “techie” folk who knew complex HTML coding and FTP site management. If you’re scratching your head, you’re not alone.
Then around 2004 a birth of new web tools began to pop up. These tools allowed common people like us to add content to the web. People with no programming skills were suddenly publishing their own journals, photographs, videos, auctions, podcasts, wikis, slideshows and more. The web became a two-way street. Everyday people were now creating the content.
By 2007, a second generation of the web had taken over – Web 2.0. Also known as the Read/Write Web, the new web is a breeding ground for creative and engaging educational endeavors.
Teachers are using the new Web 2.0 tools to launch their classroom into the 21st century. Students are creating online content, collaborating with other students around the world and showcasing their work to a global audience. Web 2.0 facilitates professional networking. It provides authentic learning experiences for students, and it encourages global awareness, creativity, innovation, critical thinking and collaboration. The knowledge our students will gain from engaging with Web 2.0 technologies will foster the communication and information literacy skills that are required in the 21st century.
The great thing about Web 2.0 tools is they are easy to use. Really. And it’s all free. Take some time to follow the links on the side, and you will soon be merging onto the information superhighway.
Web 2.0 is the next version of web sites, the world is going to change their websites to be more attractive, simple, usable, scalable, bright and sharable by designing it with web 2.0 standards. web 2.0 is not changing the web design concept it’s also changing the web marketing concepts, programming concepts, and usability concepts.
Creating Web 2.0 Effects With Photoshop
The visual style that has come to be associated with the term Web 2.0 has exploded in popularity; everywhere you look, corporate sites, web service sites, ecommerce sites, and even personal blogs are making use of clean, minimalist design coupled with fancy graphic effects. If you’d like to jump on the bandwagon, this is the article for you! Using Photoshop, I’ll show you how to add Web 2.0 graphic goodness to your site design using non-destructive techniques. It may even take your site from boring to trendy!
Photoshop: Create Web 2.0 Button
Buttons Photoshop tutorials are probably one of the hottest categories in any Photoshop tutorials site and since Web 2.0 is such hot topics now, lets go about doing a simple button suitable for any Web 2.0 application of websites. Tutorial after jump.
Ultimate Web 2.0 Gradients – FREE Download
Gradients are one of the most important aspects to be considered while designing a Web 2.0 Site. Even a simple button is of a gradient. So I decided to make some cool set of Gradients and put them together in an Adobe Photoshop Gradient file (.grd). These gradients are fully scalable, what i mean here is its not an image or so.. just create a shape and apply the gradient – As simple as that. You could create Logos, Backgrounds, Tabs, Buttons, Wallpapers, Toolbars and all sorts of stuff… I hope v2.0 was helpful a lot. Now this current version includes almost all the possible gradients… Feel free to use these cool set of gradients anywhere but please don’t forget to share this too…Gradients are one of the most important aspects to be considered while designing a Web 2.0 Site. Even a simple button is of a gradient. So I decided to make some cool set of Gradients and put them together in an Adobe Photoshop Gradient file (.grd). These gradients are fully scalable, what i mean here is its not an image or so.. just create a shape and apply the gradient – As simple as that. You could create Logos, Backgrounds, Tabs, Buttons, Wallpapers, Toolbars and all sorts of stuff… I hope v2.0 was helpful a lot. Now this current version includes almost all the possible gradients… Feel free to use these cool set of gradients anywhere but please don’t forget to share this too…
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.
How To Create a Dynamic Web 2.0 Brochure Site in an Hour
What will you have after an hour?
You will have a dynamic, easily updatable, search engine optimised ‘Web 2.0′ website (including RSS feeds so that you get the automatic high search engine rank that blogs enjoy assuming you create compelling content constantly):
- An About Page
- A Contact Us Form
- A Products (or services page)
- A simple front page with two paragraphs about your company and contact information plus a sidebar with links on the right which link to headlines from your five latest news articles.
- A news page with news articles about press releases, events and news. If you keep writing compelling news articles, you will have a high search engine rank.
How to Create a Simple & Sleek Web 2.0 Site Footer
Since Web 2.0 hit the internet, footers have become more important than ever, and there has been some great looking work done downstairs. In this tutorial I’ll show you how to produce a sleek looking site footer in Photoshop.
Building your very own web2.0 layout
So you wanna look web2.0? You’ve come to the right place. In this short feature I’ll guide you through creating your very own webdesign template ready to be applied to your web2.0 application or blog or startup or what else you see fit. You’ll go from web1.0 to web2.0 in 10 minutes.
The first Web 2.0 Blue Layout Tutorial focused on the text of the page. This tutorial will follow up by teaching you extra features and style you can add to the layout. Now there is an Added Logo on the left side with a small Menu Bar. On the right side is a graphic of the grand opening. This can be tweaked so that you can lower the opacity and right some text on it if you want. Below the ticket area, are two empty spaces which can be added for extra advertisement elements to go to another part of the site. Below that a Grey Box features a Download Now button, where you can quite possibly put a PDF file of the Schedule information, or change it to something different entirely. Subsections finish up the site where you can send a link to another area. This tutorial doesn’t focus much on text, and your welcome to ADD text to any areas you see fit. This tutorial is compatible with PSP 8 to 11, it was made with PSP 9.
Web20Badges is a set of free and very cool web badges.
They are probably one of the most popular trend in Web 2.0 time. It’s most over-used trendy little design technique in our days, they immediately attract visitor’s attention. Web badges have various round or square corners and eye-catchy colours.
Badges can be used to display a big ‘Beta’ message on your website or emphasize a price or a promotion. No web 2.0 site is complete without one.
Web 2.0 is a term coined by O’Reilly describing the new trends in design and development appearing across a flood of innovative websites. This tutorial will show you how to create some of the more popular “Web 2.0″ design effects using Photoshop.
Design Glossy Web 2.0 Button in Photoshop
Fire up a new canvas and adjust the following settings (marked in yellow) according to the image below. The rest should come as default. You might want to double check with the defaults too.
Designing Glossy (Web 2.0) Badges
This is a relatively basic Photoshop tutorial, but you should have basic knowledge of Photoshop and its tools to follow through to the end.
We’ll be learning how to design these glossy “Web 2.0″ badges in Photoshop. We’ll start off making the shape then styling it using layer styles and additional separate glossy layers.
Web 2.0 Photoshop Tutorial – VoiceTrader
We will start things off by creating a new Photoshop document: 1000px wide by 980px high, on a transparent background. Next we will create three separate rectangular blocks extending across the width of the canvas, each on their own layer. The first block is white (#FFFFFF), 72 px high and placed at the top of the canvas. Directly under the white bar we’ll create a orange (#FF7200) bar 158px high. Finally, we’ll fill the remaining canvas with a dark-gray (#2E2926) block 750px high.
WEB 2.0 Footers – How to keep peoples flow
One thing I’ve noticed recently is how some websites have decided to use footers as a way to keep people browsing their website.If you read a long article on a website, once you reach the bottom of the page, you arrive to a dead end. You have two options, maybe three if the website has been well thought and coded.
Tired of pixel-by-pixel painting, trying to create seamless stripes textures?
Here we are!
Enjoy using stripe generator!
Unleash your personal style, experiment and download the tile. You can use it directly in your css file or as pattern in Photoshop®!
If you like our tool, feel free to credit stripegenerator.com by linking us with our banner 
stripe generator
a free tool for the webdesign community by
