Web 2.0 Graphics Design Style Guide

Web 2.0: I know it’s getting old hearing the buzz word but Web 2.0 love it or hate it is a major term part of which is designated to the web 2.0 design style.

The purpose of this handy guide is to be a reference to the newcomer designer or as a check list for established graphics designs who maybe struggling to adapt to the new web 2.0 styles seen on many social networking social media sites these days.

So first off we know Web 2.0 has a very vague technical definition such as it’s new media or it’s sharing info or media etc.. I’m not going to get into that mess as we will just be pointing to the graphics design end of Web 2.0.

So with that out of the way here we go:

Common attributes

Simple design

How To: Web 2.0 Graphics Design Style Guide

What maybe holding back your design maybe too many useless elements. When creating a design I often find myself throwing out elements I don’t need after I ask myself what is the purpose to this design element?

Lots of white space

How To: Web 2.0 Graphics Design Style Guide

The attention to white space (Blank space allowing the design to breath if you will) is heavily important in Web 2.0 design style. Proper white space compliments the page elements and gives the eye a resting place. I always use 20-35px of white space on a 960 grid layout design depenting to the design. This gives me a nice framework to build in and makes the text inside look real nice.

Larger text

Web 2.0 Large text

Web 2.0 Large text

One major step foreword in design savvy was getting away from the pixel fonts of yester year and saying I’m ok with a size 28 font. Another advantage to adding larger fonts as titles or headers in h1 tags also has a great effect on SEO rating of your site. One major factor is the fact that visitors want to quickly know what your website is all about. Large text allows the visitor to quickly grasp this info.
So in summery: Large text is great as title text try to work in a few keywords for SEO but don’t write a whole page in 28 font or your visitors might not be too happy.

Gradients

Web 2.0 Gradient

Web 2.0 Gradient

Web 2.0 Radial Gradient

Web 2.0 Radial Gradient

Gradients look great when done right. They can add depth to a flat boring design and in proper use can provide a richness to layout elements, text, or even logos.

Centered layout

Web 2.0 Centered Layout

Web 2.0 Centered Layout

Centered layouts are getting more and more popular in web design as a whole not just in Web 2.0.
Centered layouts are seen as being more upfront and this fits in with the bold and witty pose that is a trademark to Web 2.0.

Less columns

Web 2.0 Less Columns

Web 2.0 Less Columns

With all that big text and beautiful white space were you going to fit 14 columns son?
Simple design equals less layout. Designing the content for the layout is not the only way to design mow and many designs are seeing a trend towards stylizing the content not the layout so much.

Separate top section

Web 2.0 Separate Top Section

Web 2.0 Separate Top Section

Separate top sections separate the call to action from the nitty gritty.
If I’m a new visitor I don’t care what your stock options are i want to know what your company does and why i should care. Separate top sections gives me just what i need till I’m happy with the basics and ready to move on to the details.

Simple navigation

Web 2.0 Simple Navigation

Web 2.0 Simple Navigation

The #1 thing that will drive a new visitor away from your Web 2.0 site to poor navigation.
Navigation should be easy to recognize consistent through out the site and well organized.

Bold simple logos

Web 2.0 Strong Simple Logo

Web 2.0 Strong Simple Logo

Who are you? This question is answered by the logo. Bold clean logo is abundant in Web 2.0 style. Here are some prime examples of clean bond logo design.

Witty title intros

Get to the point marketing and down to each mantra is the leading way to personalize your website or company. With the internet website you have no face to face human interaction. Warming things up with a witty call to action can make your visitor feel at ease as heshe browses your site.

Strong colors

Web 2.0 Strong Color

Web 2.0 Strong Color

Many Web 2.0 sites will use mostly neutral color scheme and pop in one or two bold colors. This blog is an example.

Rich surfaces

Web 2.0 Rich Surfaces

Web 2.0 Rich Surfaces

Texture sites have seen a booming market as designers scramble to find the best textures: wood, concrete grunge or fabric etc..

In backgrounds and on text textures can be overlaid over elements in Photoshop and can really add some spice to a design although they must be used with care. If your not sure if you have overused this Web 2.0 attributes (or any other) try posting to a design forum and ask to feedback.

Reflections

Web 2.0 Reflections

Web 2.0 Reflections

A design attribute make wildly popular by the famous apple pill button.
Reflections are starting to settle down and find there place among the other Web 2.0 design attributes. The key to this design attribute is reduced opacity use this one with care and it can really look great.

Bling icons

Web 2.0 Icon

Web 2.0 Icon

Web 2.0 Icon

Web 2.0 Icon

I love great icons and cute icons can really add depth and sparkle to a otherwise bland design.
Everaldo created his Crystal icon set and inspired a whole host of amazing talented icon designers.

The web 2.0 badge price tag

The Web 2.0 Badge and the more recent price tag can be used or over used for grabbing attention. 😉
Badges most of the time have reflections and price tags are common for having a more grungy look.

Gray text

Web 2.0 Gray Text

Web 2.0 Gray Text

Gray text what?
The gray text look came on the scene and pandemonium ensued. Gray text can look really nice though.
Some designs make the mistake of making there text so light that you have to highlight the text with your Currier just to read it. This alienates and frustrates visitors to your site and can also create problems when printing. (unless your have a separate CSS file for printing)

Warning: If you turn your monitor’s brightness setting down by 10% and the text in your site disappears… You might have made this mistake.

So that wraps this post up. Thanks for reading!
And if you feel like passing the word about Altered Advise it would be most appreciated.

6 thoughts on “Web 2.0 Graphics Design Style Guide

Leave a Reply

Your email address will not be published. Required fields are marked *