WelcomeWelcome

Web 2.0 Design Web 2.0 Design Standards Standards

TopicsTopics SimplicitySimplicity Central layoutCentral layout Fewer columnsFewer columns Separate top sectionSeparate top section Simple NavigationSimple Navigation Bold logosBold logos Bigger textBigger text Strong colorsStrong colors GradiantsGradiants ReflectionsReflections Cute iconsCute icons Star FlashesStar Flashes

SimplictySimplictyWeb design is simpler than ever, and that’s a good thing.Web design is simpler than ever, and that’s a good thing.

2.0 design means focused, clean and simple.2.0 design means focused, clean and simple.

Why simplicity is goodWhy simplicity is good

Web sites have goals and all web pages have purposes.Web sites have goals and all web pages have purposes. Users’ attention is a finite resource. Users’ attention is a finite resource. It’s the designer’s job to help users to find what they want (or It’s the designer’s job to help users to find what they want (or

to notice what the site wants them to notice)to notice what the site wants them to notice) Stuff on the screen attracts the eye. The more stuff there is, Stuff on the screen attracts the eye. The more stuff there is,

the more different things there are to notice, and the less the more different things there are to notice, and the less likely a user is to notice the important stuff.likely a user is to notice the important stuff.

So we need to enable certain communication, and we also So we need to enable certain communication, and we also need to minimize.need to minimize.

When & how to make your designs simple.When & how to make your designs simple.

We need to use simplicity in every aspect of our design if we We need to use simplicity in every aspect of our design if we want our website to be view by most of the users.want our website to be view by most of the users.

There are two Important aspects to achieving success with There are two Important aspects to achieving success with simplicity.simplicity.

Remove unnecessary components, without sacrificing Remove unnecessary components, without sacrificing effectiveness.effectiveness.

Try out alternative solutions that achieve the same result Try out alternative solutions that achieve the same result more simply.more simply.

Central LayoutCentral Layout

Basically, most of the sites these days are positioned centrally Basically, most of the sites these days are positioned centrally within the browser window. Relatively few are full-screen within the browser window. Relatively few are full-screen (liquid) or left-aligned / fixed-size, compared to a few years ago.(liquid) or left-aligned / fixed-size, compared to a few years ago.

Why a central layout is goodWhy a central layout is good This “2.0″ style is simple, bold and honest. Sites that sit straight This “2.0″ style is simple, bold and honest. Sites that sit straight

front & center feel more simple, bold and honest.front & center feel more simple, bold and honest. Also, because we’re being more economical with our pixels Also, because we’re being more economical with our pixels

(and content), we’re not as pressured to cram as much (and content), we’re not as pressured to cram as much information as possible above the waterline/fold.information as possible above the waterline/fold.

We’re using less to say more, so we can be a bit more free and 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 easy with the amount of space used, and pad out our content with lots of lovely white space.with lots of lovely white space.

When & how to use a central layoutWhen & how to use a central layout

Position your site centrally unless there’s a really good reason Position your site centrally unless there’s a really good reason not to.not to.

You may be wanting to get more creative with the space, or get You may be wanting to get more creative with the space, or get as much information on-screen as possible (for example with as much information on-screen as possible (for example with a web app).a web app).

Fewer columnsFewer columnsA few years ago, 3-column sites were the normal, and 4-column A few years ago, 3-column sites were the normal, and 4-column

sites weren’t uncommon. Today, 2 is more common, and sites weren’t uncommon. Today, 2 is more common, and now-a-days 3 the web designers are using 3 column layouts now-a-days 3 the web designers are using 3 column layouts maximum.maximum.

Why using fewer columns is goodWhy using fewer columns is good Less is more. Fewer columns feels simpler, bolder, and more Less is more. Fewer columns feels simpler, bolder, and more

honest. We’re communicating less information more clearly.honest. We’re communicating less information more clearly. There’s also a by-product of the domination of centered There’s also a by-product of the domination of centered

layouts.layouts. Because we’re not filling the whole screen so much, and not 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 trying to get as much on-screen at any one time, we simply don’t need as many columns of information.don’t need as many columns of information.

Some examples for this …..Some examples for this …..

37Signals have always been at the front when it comes to have always been at the front when it comes to questioning the status quo and coming up with simple questioning the status quo and coming up with simple answers.answers.

Here, they use 2 columns. This a great case study in Here, they use 2 columns. This a great case study in simplicity. It lets the message speak, and adds simplicity. It lets the message speak, and adds nothingnothing that that could get in the way.could get in the way.

Apple is the other leader in elegant simplicity. is the other leader in elegant simplicity. This kind of layout works really, really well. Each time I This kind of layout works really, really well. Each time I

experience Apple’s simple design, the more convinced I experience Apple’s simple design, the more convinced I become that its zen approach is the holy grail of design.become that its zen approach is the holy grail of design.

Separate Top SectionsSeparate Top Sections Always have a head section like a separate header brings a Always have a head section like a separate header brings a

good look to the visitor and in that main section we have to good look to the visitor and in that main section we have to put the important content in our website .put the important content in our website .

logo should be there in the head section to a web 2.0 website logo should be there in the head section to a web 2.0 website because the user will know what the exactly the site about because the user will know what the exactly the site about and he can easily find the navigation and also he can find and he can easily find the navigation and also he can find whether the site have or have not the content which he whether the site have or have not the content which he required to know about.required to know about.

The top section says “Here’s the top of the page”. Sounds The top section says “Here’s the top of the page”. Sounds obvious, but it feels good to know clearly where the page obvious, but it feels good to know clearly where the page starts.starts.

It also starts the site/page experience with a strong, bold It also starts the site/page experience with a strong, bold statement. This is very “2.0″-spirited. We like strong, simple, statement. This is very “2.0″-spirited. We like strong, simple, bold attitude.bold attitude.

The finest way to differ the content section from head section is to use.The top section should be visually distinct from the rest of the page content.

Here are 2 examples where the top section is separated with a solid line, rather than being solid colour itself.

So here you can see that the content block is fully differ So here you can see that the content block is fully differ with the header part.with the header part.

Mainly the logo and navigational menu will be placed in Mainly the logo and navigational menu will be placed in the header section,and it will be better if you have any the header section,and it will be better if you have any search type facility in the head section. search type facility in the head section.

Because the users must have a sharp look towards Because the users must have a sharp look towards search area,he has to find easily the search area search area,he has to find easily the search area because the user is not pays the interest to search for because the user is not pays the interest to search for the search area.the search area.

so that it’s our duty to provide the important requirement so that it’s our duty to provide the important requirement as easily findable.as easily findable.

Simple navigationSimple navigation Simple navigation will make the user to find himself easily Simple navigation will make the user to find himself easily

what they required.what they required. If the navigation will be as simple as possible the users of our If the navigation will be as simple as possible the users of our

site will be more able to grasp and know the content which is site will be more able to grasp and know the content which is in our site,they need to move into the inside of our site.in our site,they need to move into the inside of our site.

So we will show them a way to how to get into the site so a So we will show them a way to how to get into the site so a simple and clear navigation is a better way to show the stuff in simple and clear navigation is a better way to show the stuff in our site to the users.our site to the users.

These are some examplesThese are some examples

Why simple navigation is betterWhy simple navigation is better Users need to be able to identify navigation, which tells them Users need to be able to identify navigation, which tells them

various important information.various important information. Where they are (in the scheme of things)Where they are (in the scheme of things) Where else they can go from hereWhere else they can go from here And what options they have for doing stuff.And what options they have for doing stuff.

The best ways to clarify navigation are:The best ways to clarify navigation are: Positioning permanent navigation links apart from content.Positioning permanent navigation links apart from content. Differentiating navigation using color, tone and shape.Differentiating navigation using color, tone and shape. Making navigation items large and bold.Making navigation items large and bold. Using clear text to make the purpose of each link.Using clear text to make the purpose of each link.

Bold logosBold logos A good impression ,a uniqueness feel and the purpose of our A good impression ,a uniqueness feel and the purpose of our

site should be known by a logo.site should be known by a logo. If it will be more attractive and more readable the users can If it will be more attractive and more readable the users can

easily find that what our site is using for .easily find that what our site is using for . The bold logos will crate a feel that “we are unique from The bold logos will crate a feel that “we are unique from

others”.others”.

c

Bigger textBigger text Lots of “2.0″ web sites have big text, compared to Lots of “2.0″ web sites have big text, compared to

older-style sites.older-style sites. Have the important text as bigger in our sites reaches Have the important text as bigger in our sites reaches

the users more easily.the users more easily.

When & how to use big textWhen & how to use big text Big text makes most pages more unable for more Big text makes most pages more unable for more

people, so it’s a good thing. Of course, size is relative. people, so it’s a good thing. Of course, size is relative. You can’t take a normal, busy site, make ALL the text You can’t take a normal, busy site, make ALL the text bigger, and make it more usable. That might not work, bigger, and make it more usable. That might not work, that might be worse.that might be worse.

In order to use big text, you have to make the website In order to use big text, you have to make the website by simplifying, removing unnecessary elements.by simplifying, removing unnecessary elements.

We also need to have a reason to make some text We also need to have a reason to make some text bigger than other text. And the text must be bigger than other text. And the text must be meaningful and useful.meaningful and useful.

There’s no point adding some big text just because it’s a There’s no point adding some big text just because it’s a web2.0 site we have to make a thing big if it is a more web2.0 site we have to make a thing big if it is a more important thing in the website.important thing in the website.

If you need to have a lot of information on a page, and it’s all 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 relatively equal in importance, then maybe you can keep it all small.small.

For example you can take skype.com as a best exampleFor example you can take skype.com as a best example

There you can see some bold text there at the top of the page There you can see some bold text there at the top of the page that is the introduction of that website,so if it was big the that is the introduction of that website,so if it was big the users can know about the site what is for.users can know about the site what is for.

Bold text introductionsBold text introductions In our site content some words need to be highlighted In our site content some words need to be highlighted

because they are important to the website,so making them because they are important to the website,so making them bold our visitors will have more impression than regular text.bold our visitors will have more impression than regular text.

They tend to be graphical, rather than regular text. The They tend to be graphical, rather than regular text. The reason for this is that designers want a lot of control over the reason for this is that designers want a lot of control over the page’s visual impact, especially early on in a browsing page’s visual impact, especially early on in a browsing experience.experience.

When & how to use a bold text introWhen & how to use a bold text intro Only use one if you’ve got something bold to say. (If you Only use one if you’ve got something bold to say. (If you

haven’t got something bold to say, maybe it’s worth having a 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 think about the purpose of your page/site and coming up with something worth saying boldly)something worth saying boldly)

If you have a simple message that you want to be seen first, 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 go ahead and headline it. Make it clear by putting it against a relatively plain background.relatively plain background.

I am showing you some examples hereI am showing you some examples here

In the above examples you can see some text at the top of the In the above examples you can see some text at the top of the page is displaying in bold style,may be it’s important or maybe page is displaying in bold style,may be it’s important or maybe it’s the main theme of their website.it’s the main theme of their website.

So the use if we displaying like that the visitors impression will So the use if we displaying like that the visitors impression will first go to that particular area so they can understand what the first go to that particular area so they can understand what the site gives them.site gives them.

Strong ColorsStrong Colors Bright, strong colors draw the eye. Use them to divide the Bright, strong colors draw the eye. Use them to divide the

page into clear sections, and to highlight important elements.page into clear sections, and to highlight important elements.

The Treo Mobile site uses 3 areas of strong colors to mark out uses 3 areas of strong colors to mark out and advertise 3 main areas of the site.and advertise 3 main areas of the site.

The background color makes it clear that this isn’t The background color makes it clear that this isn’t main main contentcontent, and large, bold title text helps you see quickly what’s , and large, bold title text helps you see quickly what’s in each one, so you can decide whether it interests you.in each one, so you can decide whether it interests you.

GradientsGradients Gradients soften areas that would otherwise be flat color/tone.Gradients soften areas that would otherwise be flat color/tone. Gradients can be used to fade a color into a lighter or darker Gradients can be used to fade a color into a lighter or darker

tone, which can help create mood.tone, which can help create mood. In page backgrounds, they may also create an illusion of In page backgrounds, they may also create an illusion of

distance.distance. They are commonly used at the very top of page They are commonly used at the very top of page

backgrounds, where they help denote the boundary of the backgrounds, where they help denote the boundary of the viewable area.viewable area.

They’re also an integral part of drop-shadows, and the inner-They’re also an integral part of drop-shadows, and the inner-glows and specular highlights you see on glass- or plastic-glows and specular highlights you see on glass- or plastic-style buttons.style buttons.

ReflectionsReflections The illusion of reflection is one of the most common The illusion of reflection is one of the most common

applications on gradients.applications on gradients. These commonly come in 2 kinds.These commonly come in 2 kinds. Highlights caused by light reflecting on shiny surfaces.Highlights caused by light reflecting on shiny surfaces. That shiny table effect!That shiny table effect!

Specular highlightsSpecular highlights Realistic effects of water droplets, glass beads, shiny plastic Realistic effects of water droplets, glass beads, shiny plastic

buttons etc. have been very popular over the past couple of buttons etc. have been very popular over the past couple of years.years.

Here you can see the tabs of apple website they are” Here you can see the tabs of apple website they are” shiny shiny plastictabs” plastictabs” These use highlights caused by a light source These use highlights caused by a light source above the tabs, combined with an inner, diffuse glow that above the tabs, combined with an inner, diffuse glow that creates the plastic effect.creates the plastic effect.

That shiny table effect!That shiny table effect!

The standard Apple look. Greyed-out and fading on a white The standard Apple look. Greyed-out and fading on a white base.base.

On a coloured backgroundOn a coloured background

Fading out to either side (my one this, not published yet).Fading out to either side (my one this, not published yet).

More extreme angle, and a rich layered effect reflecting the More extreme angle, and a rich layered effect reflecting the colour of the solid object.colour of the solid object.

Cute iconsCute icons Icons play an important role in Web 2.0 design. Today we use Icons play an important role in Web 2.0 design. Today we use

fewer, better icons that carry more meaning.fewer, better icons that carry more meaning. Icons can be useful when they’re easily recognisable and Icons can be useful when they’re easily recognisable and

carry a clear meaning. In lots of other cases, a simple word is carry a clear meaning. In lots of other cases, a simple word is more effective.more effective.

In the old days, icons were sometimes overused. It seemed In the old days, icons were sometimes overused. It seemed that everyone wanted an icon for every navigation link or tab. that everyone wanted an icon for every navigation link or tab. Now, we use clear text more extensively, and are less ready Now, we use clear text more extensively, and are less ready to litter a page with icons.to litter a page with icons.

Some examples, demonstrating various attributes.Some examples, demonstrating various attributes.

Star flashesStar flashes These are the star-shaped labels that you see stuck on web These are the star-shaped labels that you see stuck on web

pages, alerting you to something important.pages, alerting you to something important. They used for any less costs and if is there any discounts ion They used for any less costs and if is there any discounts ion

the sites we will use these star flashes.the sites we will use these star flashes. They can really work well, but of course should only be used They can really work well, but of course should only be used

to draw attention to something important.to draw attention to something important.

These are few examplesThese are few examples

Thanks Thanks