April 7th, 2008 | Posted in Blog, General Discussion, Web Design, Web Standards

Web 2.0 design secrets

Web 2.0 design secrets

The common use of visual design elements, have some way or another created a new wave in web design that many of us would refer to as a “web 2.0 design“. It just so happened that by the time web 2.0 was happening, this new trend in web design was leaving its mark on the web. The main features of a “web 2.0 design” are development with web standards, particularly CSS and XHTML, as well as dynamic content and participation of the end-users. But, what about the design, the visual part of it?

Most web 2.0 websites or online applications do share some visual characteristics that make their interface more user-friendly compared to the web 1.0 websites.

So what are the secrets of a web 2.0 design?

A clean and simple layout that focuses mostly on the content design other than the whole page environment in itself,

layout.jpg

Bigger fonts on text,

typo2.jpg

White space, allows for easier read of the content

whitespace.jpg

Use of illustrations, either in logos or in icons

e3d.jpg
3D effects on buttons and badges

logos.jpg
Neutral background colours

neutral.jpg

If there’s any other web 2.0 feature that you know of, please do share it with us.

Any great web 2.0 designs are more than welcome for listing!

15 Responses to “Web 2.0 design secrets”

  1. Web Design » Web 2.0 design secrets Says:

    […] admin wrote an interesting post today on Web 2.0 design secretsHere’s a quick excerptThe common use of visual design elements, have some way or another created a new wave in web design that many of us would refer to as a “web 2.0 design“. It just so happened that by the time web 2.0 was happening, this new trend in web … […]

  2. Taylor Satula Says:

    Cool ideas

  3. website design Says:

    i like it the icons, and i used it

  4. St. Louis Web Design Says:

    Great job capturing the design aspects of a Web 2.0 website. Your attention to layout and typography is spot on. Don’t forget 2.0 websites also have a more interactive aspect to them as well – usually in the form of tools, programs, etc. that can be used directly while on the 2.0 website.

  5. Andy Ford Says:

    It drives me nuts that there is a concept of “web 2.0 design”

    Of course, the problem lies with the term “web 2.0” itself and how loosely people define and/or understand it.

    My understanding of “web 2.0” (aside from just being an empty marketing buzz word) has everything to do with functionality and interaction (especially user generated content) and nothing to do with aesthetics whatsoever.

    From the wikipedia “web 2.0” entry:
    ‘…It is a common misconception that “Web 2.0” refers to various visual design elements such as rounded corners or drop shadows. While such design elements have commonly been found on popular Web 2.0 sites, the truth is that the association is merely one of fashion, a designer preference which became popular around the same time that “Web 2.0” became a buzz word…’
    http://en.wikipedia.org/wiki/Web_2.0

    (see also: http://www.slideshare.net/elliotjaystocks/fowd-november-2007 and start at slide #69)

    Visual design trends ebb and flow. So the aesthetic design trends that happened to be prevailing at the same time the term “web 2.0” emerged were associated with with web 2.0 by default.

    I appreciate that you did in fact make that distinction: “…It just so happened that by the time web 2.0 was happening, this new trend in web design was leaving its mark on the web…”

    Some have argued that sites like Amazon, Ebay, and Craigslist have been “web 2.0” since before “web 2.0” (based on the criteria of user generated content especially) – yet, these sites historically weren’t visually designed very well (well, many say Craigslist wasn’t/isn’t designed well, but I think it is designed extremely well… but that’s a whole other flamewar… er.. topic)

    Anyway, in much the same way that one would “suspend disbelief” in order to enjoy a far-fetched science fiction movie, I have come to accept the common misconception that “web 2.0” has any visual design connotations at least enough to understand what someone is trying to communicate when they mention “web 2.0 design”

    @Vicky – I’ll get off my high horse now and take a moment to compliment you on your nicely designed and interesting blog. cheers!

  6. élet és könyvtár » Blog Archive » Vasárnap reggeli WordPress és dizájn linkek Says:

    […] Reader szerint. És ha már ennyire belebonyolódtam a grafikába, akkor egy lista is jöjjön a Web 2.0 dizájn titkairól. Végül pedig a Smashing Magazine 60 darabos válogatása tényleg nagyon szép […]

  7. Webdispo BLOG - Le blog de l’agence Web -blog de l’actualité et tendances Web 2.0 » Blog Archive » Quelques “Secrets” Pour Un Bon Design Web 2.0 Says:

    […] Voici le lien : Web 2.0 Design Secrets […]

  8. leKiosk.fr» Blog Archive » Webdesign - Web2.0 Says:

    […] A lire à cette adresse […]

  9. Tommunication.com » Blog Archive » links for 2008-04-15 Says:

    […] Web 2.0 design secrets (tags: web2.0 webdesign css design) […]

  10. kevinfitz Says:

    ***** web 2.0… moving on.. web infinity !!!!!

  11. Dynamic Web Marketing Secrets. | 7Wins.eu Says:

    […] […]

  12. NoWares Hosting Says:

    Some very valuable information posted here!
    Your header is great… Must have taken a while to code this site.

    Very nice site 🙂

  13. Robert Says:

    %d%aThere is obviously a lot to know about this. I think you made some good points in Features also.

  14. Content Management Says:

    How about a CMS that uses for CSS classes to map business logic to design, so you don’t need page markup for a lot of template functionality!

  15. brian adams Says:

    nice designs secrets

About CSS addict

CSSaddict is the personal space of Vicky Gourgouri, a web designer from Greece who loves the advantages several CSS techniques provide for getting beautiful designs online. She has designed and developed this space so she can exhibit her work, write about the new web trends and provide excellent resources on web design and development.