Web 2.0 Design Standards By Nyros Developer

1. Welcome
Web 2.0 Design
Standards

2. Topics
 Simplicity
 Central layout
 Fewer columns
 Separate top section
 Simple Navigation
 Bold logos
 Bigger text
 Strong colors
 Gradiants
 Reflections
 Cute icons
 Star Flashes

3. Simplicty
Web design is simpler than ever, and that’s a good thing.
2.0 design means focused, clean and simple.
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 minimize.

4. When & how to make your designs simple.
We need to use simplicity in every aspect of our design if we
want our website to be view by most of the users.
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.

5. Central Layout
Basically, most of the 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 pressured 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.

6. When & how to use a central layout
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).

7. Fewer columns
A few years ago, 3-column sites were the normal, and 4-column
sites weren’t uncommon. Today, 2 is more common, and
now-a-days 3 the web designers are using 3 column layouts
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.

8. Some examples for this …..
 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

9.  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.

10. Separate Top Sections
 Always have a head section like a separate header brings a
good look to the visitor and in that main section we have to
put the important content in our 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
and he can easily find the navigation and also he can find
whether the site have or have not the content which he
required to know about.
 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.

11. 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.

12.  So here you can see that the content block is fully differ
with the header part.
 Mainly the logo and navigational menu will be placed in
the header section,and it will be better if you have any
search type facility in the head section.
 Because the users must have a sharp look towards
search area,he has to find easily the search area
because the user is not pays the interest to search for
the search area.
 so that it’s our duty to provide the important requirement
as easily findable.

13. Simple navigation
 Simple navigation will make the user to find himself easily
what they required.
 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
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
simple and clear navigation is a better way to show the stuff in
our site to the users.
These are some examples

14. 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.
The best ways to clarify navigation are:
 Positioning permanent navigation links apart from content.
 Differentiating navigation using color, tone and shape.
 Making navigation items large and bold.
 Using clear text to make the purpose of each link.

15. c
Bold logos
 A good impression ,a uniqueness feel and the purpose of our
site should be known by a logo.
 If it will be more attractive and more readable the users can
easily find that what our site is using for .
 The bold logos will crate a feel that “we are unique from
others”.

16. Bigger text
 Lots of “2.0″ web sites have big text, compared to older-style
sites.
 Have the important text as bigger in our sites reaches the
users more easily.
When & how to use big text
 Big text makes most pages more unable 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 the website by
simplifying, removing unnecessary elements.
 We also need to have a reason to make some text bigger
than other text. And the text must be meaningful and useful.

17.  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
important thing in the website.
 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.
For example you can take skype.com as a best example
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
users can know about the site what is for.

18. Bold text introductions
 In our site content some words need to be highlighted
because they are important to the website,so making them
bold our visitors will have more impression than regular text.
 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. (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
something 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

19. I am showing you some examples here
 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
it’s the main theme of their website.
 So the use if we displaying like that the visitors impression will
first go to that particular area so they can understand what the
site gives them.

20. Strong Colors
 Bright, strong colors draw the eye. Use them to divide the
page into clear sections, and to highlight important elements.
 The Treo Mobile site uses 3 areas of strong colors to mark out
and advertise 3 main areas of the site.
 The background color 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.

21. Gradients
 Gradients soften areas that would otherwise be flat color/tone.
 Gradients can be used to fade a color into a lighter or darker
tone, which can help create mood.
 In page backgrounds, they may also create an illusion of
distance.
 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.

22. 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.
 Here you can see the tabs of apple website they are” shiny
plastictabs” These use highlights caused by a light source
above the tabs, combined with an inner, diffuse glow that
creates the plastic effect.

23. That shiny table effect!
 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.

24. 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.
 Some examples, demonstrating various attributes.

25. Star flashes
 These are the star-shaped labels that you see stuck on web
pages, alerting you to something important.
 They used for any less costs and if is there any discounts ion
the sites we will use these star flashes.
 They can really work well, but of course should only be used
to draw attention to something important.
 These are few examples

26. Thanks