complete guide on developing web 2.0 website design and step by step factors to follow

1. Creating Web 2.0 Web Design http://www.spinxwebdesignnewyork.com PHONE: 818 660 1980 TOLL FREE: 888.593.2337 http://www.spinxwebdesignnewyork.com

2. The term “Web 2.0” has been around for a while, in terms of visual design for the web. Many people use “Web 2.0 design” to refer to a certain visual style or look that’s typical of of many new sites over the past 2 or 3 years (but which in fact predated the use of the term). http://www.spinxwebdesignnewyork.com

3. While there are some important and relevant design themes we can associate with “Web2.0”, these aren’t the surface styles and effects that might first spring to mind.The elements of real Web2.0 design are not purely graphical http://www.spinxwebdesignnewyork.com

4. Stuff like gradients, bold colors, big fonts, reflections and star flash labels, are short-term by-products of a more fundamental cultural shift. http://www.spinxwebdesignnewyork.com

5. 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: http://www.spinxwebdesignnewyork.com

6. 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 http://www.spinxwebdesignnewyork.com

7. Factors to make your website Design called Web 2.0 http://www.spinxwebdesignnewyork.com

8. 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 http://www.spinxwebdesignnewyork.com

9. 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. http://www.spinxwebdesignnewyork.com

10. 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. http://www.spinxwebdesignnewyork.com

11. http://www.spinxwebdesignnewyork.com

12. 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 noise. That means we need to find a solution that’s does its stuff with as little as possible. That’s economy, or simplicity. http://www.spinxwebdesignnewyork.com

13. 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. http://www.spinxwebdesignnewyork.com

14. 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 http://www.spinxwebdesignnewyork.com

15. 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 pressurized 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. http://www.spinxwebdesignnewyork.com

16. 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). http://www.spinxwebdesignnewyork.com

17. Fewer columns 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 http://www.spinxwebdesignnewyork.com

18. 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. http://www.spinxwebdesignnewyork.com

19. 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. http://www.spinxwebdesignnewyork.com

20. See how clear the “page-tops” are in these 3 samples, even at small scale: http://www.spinxwebdesignnewyork.com

21. http://www.spinxwebdesignnewyork.com

22. http://www.spinxwebdesignnewyork.com

23. http://www.spinxwebdesignnewyork.com

24. 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, Medico media), 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 http://www.spinxwebdesignnewyork.com

25. 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 color or tone, but there are alternatives. http://www.spinxwebdesignnewyork.com

26. Simple Navigation 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. 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. http://www.spinxwebdesignnewyork.com

27. http://www.spinxwebdesignnewyork.com

28. http://www.spinxwebdesignnewyork.com

29. http://www.spinxwebdesignnewyork.com

30. http://www.spinxwebdesignnewyork.com

31. 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 http://www.spinxwebdesignnewyork.com

32. 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 http://www.spinxwebdesignnewyork.com

33. 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. http://www.spinxwebdesignnewyork.com

34. http://www.spinxwebdesignnewyork.com

35. 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. http://www.spinxwebdesignnewyork.com

36. 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! http://www.spinxwebdesignnewyork.com

37. 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. http://www.spinxwebdesignnewyork.com

38. You 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 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. http://www.spinxwebdesignnewyork.com

39. 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. http://www.spinxwebdesignnewyork.com

40. 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 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 relatively plain background. http://www.spinxwebdesignnewyork.com

41. Strong Colors Bright, strong colors 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 color to help differentiate areas of real-estate and to draw attention to items you want the visitor to notice. http://www.spinxwebdesignnewyork.com

42. 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”. http://www.spinxwebdesignnewyork.com

43. 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. http://www.spinxwebdesignnewyork.com

44. Gradients Web 2.0 design has more gradients than the Alps http://www.spinxwebdesignnewyork.com

45. Why gradients are so useful 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. http://www.spinxwebdesignnewyork.com

46. A common gradient combo is blue-to-white, which evokes the effect of aerial perspective, creating the sense that the background fades away towards the horizon. They are commonly used at the very top of page backgrounds, where they help denote the boundary of the viewable area. http://www.spinxwebdesignnewyork.com

47. 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! http://www.spinxwebdesignnewyork.com

48. Secular Highlights Realistic effects of water droplets, glass beads, shiny plastic buttons etc. have been very popular over the past couple of years. http://www.spinxwebdesignnewyork.com

49. 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 recognizable and carry a clear meaning. In lots of other cases, a simple word is more effective. http://www.spinxwebdesignnewyork.com

50. 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 . http://www.spinxwebdesignnewyork.com

51. 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. http://www.spinxwebdesignnewyork.com

52. Thank you http://www.spinxwebdesignnewyork.com PHONE: 818 660 1980 TOLL FREE: 888.593.2337 http://www.spinxwebdesignnewyork.com