Web 2.0 Design Standards By Nyros Developer

Welcome Web 2.0 Design Standards

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

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.

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.

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.

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).

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.

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

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

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.

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

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

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.

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”.

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.

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

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

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.

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.

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.

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.

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.

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.

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

Thanks

Web 2.0 Design Standards By Nyros Developer

by Nyros Technologies

Accessibility

Upload Details

Usage Rights

Statistics

Web 2.0 Design Standards By Nyros Developer Presentation Transcript