Web 2.0 dominates. Everywhere and all the time. The new
design trends are there, in front of you and me, on the blog you’ve come
from and on the blog you are going to visit next. Every now and again
we find new design elements which somehow manage to become essential for
every hip, trendy, glossy, stylish web-site which will be developed in
the era of its majesty Web 2.0.
Remember those web-sites with old gray Javascript buttons, huge Comic Sans headers and visible eXtreme counters we used to visit few years ago? Looking at them, and looking at recent developments, one realizes how much actually has changed. But what has changed really – ok, we don’t see those buttons, those headers and those counters. In fact, we see something else.
With this article we start a series of articles about the latest design trends and patterns a web-developer should keep in mind, designing his new web-site.
What is interesting is the fact that one can see the same familiar form of process visualization over and over again. You don’t see a huge list with requirements (in fact, usually you’ll find them on the bottom of the page, written in font size 7px or even smaller) or detailed .pdf-manuals on a front page. What you usually see are three-steps- and easy-to-go-badges in the center of the pages – they describe exactly what has to be done to use the service in few clicks. The use of graphics is essential and obligatory. Also Flash is often used to attract the attention of the users.
Examples:
friendster.com
fon.com
communitywalk.com
blish.com
dpolls.com
Examples:
sixapart.com/comet
goowy.com
ajaxload.info
haveamint.com
conversate.org
sidejobtrack.com
zerohex.org
secondsite.biz
Of course, “Beta”-stage delivers many advantages for developers. Being “Beta” means being incomplete and therefore – being allowed to offer the functionality which will – and probably – should be improved in the near future – just the way user would like it to be. In this way it is easier to prevent complaints, gain the attention of curious users and win some time for further development.
The label “Beta” has become some kind of trademark for something new and exciting. Over the last year it has almost become a standard for new projects and is often presented in bright and eye-catching colours together with the logotype of the site – intentionally, of course.
Examples:
clickcaster.com
bubbleshare.com
shozu.com
riya.com
picpix.com
redtoucan.com
mabber.com
Sumber : http://www.smashingmagazine.com/
Remember those web-sites with old gray Javascript buttons, huge Comic Sans headers and visible eXtreme counters we used to visit few years ago? Looking at them, and looking at recent developments, one realizes how much actually has changed. But what has changed really – ok, we don’t see those buttons, those headers and those counters. In fact, we see something else.
With this article we start a series of articles about the latest design trends and patterns a web-developer should keep in mind, designing his new web-site.
(Smashing's side note: Have you already bought the brand new Smashing Book #3? The book introduces new practical techniques and a whole new mindset for progressive Web design. Get your book today!)
1,2,3… Start!
Presenting services and end-products to potential customers, web-designers tend to stick to simplicity. The information provided by clients has to be explained in an understandable way. A web-developers should make sure the user understands instantly, what the company is offering, what are users’ adventages and what is actually required for using the service.What is interesting is the fact that one can see the same familiar form of process visualization over and over again. You don’t see a huge list with requirements (in fact, usually you’ll find them on the bottom of the page, written in font size 7px or even smaller) or detailed .pdf-manuals on a front page. What you usually see are three-steps- and easy-to-go-badges in the center of the pages – they describe exactly what has to be done to use the service in few clicks. The use of graphics is essential and obligatory. Also Flash is often used to attract the attention of the users.
Examples:
friendster.com
fon.com
communitywalk.com
blish.com
dpolls.com
Badges and Flowers
Probably one of the most popular trends in the era of Web 2.0 are “Badges” with various round and square corners and modified flowers, we used to find on milk packages in the 90s.Examples:
sixapart.com/comet
goowy.com
ajaxload.info
haveamint.com
conversate.org
sidejobtrack.com
zerohex.org
secondsite.biz
Beta
Have you tried to find at least one released Web 2.0 service? Browsing through the swarm of Web 2.0-sites you are more likely to find a beta-version than a released one. Ironically, just like few years ago, new ideas are born every day. But today they are realized instantly – and presented to the public as a beta-version.Of course, “Beta”-stage delivers many advantages for developers. Being “Beta” means being incomplete and therefore – being allowed to offer the functionality which will – and probably – should be improved in the near future – just the way user would like it to be. In this way it is easier to prevent complaints, gain the attention of curious users and win some time for further development.
The label “Beta” has become some kind of trademark for something new and exciting. Over the last year it has almost become a standard for new projects and is often presented in bright and eye-catching colours together with the logotype of the site – intentionally, of course.
Examples:
clickcaster.com
bubbleshare.com
shozu.com
riya.com
picpix.com
redtoucan.com
mabber.com
Tag Clouds
Tag Clouds can simplify the navigation or confuse the visitors. Used effectively, they can provide help and emphasize the main topics and themes being tackled in a blog. However, sometimes they simply don’t fit and make both readability and usability more difficult: mainly, if web-typography isn’t used properly or basic rules are breached (i.e. line-height hasn’t been defined in em’s, but in px’s).Sumber : http://www.smashingmagazine.com/
0 komentar:
Posting Komentar