Posted in CSS, Featured, HTML 5, Inspiration, jQuery, Web 2.0, Web Content, Web Design, Websites

Like this post? Share It :
  • Print
  • email
  • PDF
  • Google Bookmarks
  • Facebook
  • Twitter
  • MySpace
  • Yahoo! Buzz
  • del.icio.us
  • Digg
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Reddit
  • Technorati
  • Design Float
  • RSS

Style Web 2.0 in Web Design

Style Web 2.0 is very popular nowadays, but it is a difficult task to find a clear definition of this concept . There is a certain list of “Whys?”. Firstly, Web 2.0 is a very complex subject. Secondly, Web 2.0 includes many notions, conceptions and ideas…and to describe all them in one sentence is just impossible. So, let’s start and try to find general characteristics and features of WEB 2.0

The term Web 2.0 firstly appeared in Tim O’Reilly’s article”What is Web 2.0″ September 30, 2005. Why did this style appeared? The first reason is technology development.

Web 2.0 was conceived as a new vision of service to ordinary users. It had a user-friendly interface, a simple and stylish design and a successful presentation of information. One more interesting detail – visitors could make the content for the Web 2.0 site themselves. People liked the feeling of being involved in something big and interesting!

A typical Web 2.0 site tends to (surprise!) minimalism in design. However, it doesnt mean that in Web 2.0 everything will be simple and clean. It is a cool design magik to create a graphically rich website, but, in the same time, to make it great looking, non bulky and nice optimized.

Web 2.0 style is multi-faceted and diverse one. If you want to create a Website in this style, you must use only the items you need and nothing more in order to reach your goal. The main principle – if the problem has two solutions, then a simpler solution is a better choise. As a result, the user sees the content of the site and he begins to interact with a website in the right way. Design made in a Web 2.0, has the following elements:

Simplicity

To create a Website in this style, you must use only the items you need and nothing more in order to reach your goal. The main principle – if the problem has two solutions, then a simpler solution is a better choise. As a result, the user sees the content of the site and he begins to interact with a website in the right way.

Example:

Everytime I am looking at the site of Apple, I find that simplicity is the holy grail of design.

img

A central alignment

Style “2.0″ simple, bold and clear. Sites that are placed in the center of the browser window create this impression.

Example:

One of the most popular Web 2.0 websites is Wikipedia.org

img

A small number of columns

Yes, of course, we will share less information, but we will do it in a more reliable way.

Example:

Simple, two-column grid structure with gutter space that gives it a nice airy feeling.

img

A simple navigation

Web 2.0 navigation is available on every page of the site. It must be visible and easy to use. The navigation gives users lots of useful information. They can understand where they are at the very moment, what services are available and where they can go.

Example:

img

An enlarged font size,sans-serif

Many 2.0-style sites use large fonts that are similar to those that were in the old-style websites. Big elements are usually more noticeable. This effect is used throughout the history of the printed designs in titles, title pages and headlines.

Example:

img

3d effects

Most of the Web 2.0 sites use the soft 3d effects in order to give the design a more qualitative form. Such effects as shadows, reflections and gradients help to make the interface more real, solid and complete.

Example:

img

Gradients, reflections, glare

Gradients make a self-colored areas more beautiful and nice. Realistic effects in the form of drops of water, glass and plastic buttons are very popular last years.

Example:

Tag cloud

Tag cloud can simplify navigation or confuse the visitor. Being used properly, they can show the subject of the resource and the most popular topic on it. However, sometimes they are made incorrectly and only degrade the usability, mainly due to an erroneous setting of typography or core logic (for example, if the row height is set in px, but not in em). Many tags can be used to describe the same content. The font size of a word or phrase in a tag cloud conveys the popularity of the content, being referenced to on that particular website.

Example:

img

As you know TemplateMonster always strives to satisfy the desires of his users as well as to follow the latest trends of Web design. Check this Web 2.0 style templates for your creative inspiration!

Author: Ares

Type: CSS Static Full Site

img

Author: Delta

Type: CSS Static Full Site

img

Author: Delta

Type: CSS Full Site Flash 8

img

Author: Hugo

Type: CSS Static Full Site

img

Author: Hugo

Type: CSS Full Site Flash 8

img

Author: Maxwell

Type: CSS Full Site Flash 8

img


Photoshop Lady

Like this post? Share It :
  • Print
  • email
  • PDF
  • Google Bookmarks
  • Facebook
  • Twitter
  • MySpace
  • Yahoo! Buzz
  • del.icio.us
  • Digg
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Reddit
  • Technorati
  • Design Float
  • RSS

Related posts:

  1. Hot New Design Goodies: Metal Graphic Style, Simple Web Pattern Backgrounds & Textures and Freebie
  2. Seven Premium Style jQuery Plugins And Tutorials To Display Images On Websites

Comments are closed.