Styles in webdesign: the features of a web 2.0 layout

We’ve already analyzed two (web)design styles: corporate/business and grunge; we’ve also created two great-looking layouts using Photoshop that display the trends and characteristics of these two styles. Today we’ll look at the “web 2.0″ style, specifically we will be looking at its most distinctive traits. And, next week we will be creating a third layout, as we’ve promised. Are you ready? Let’s start.

Web 2.0: what’s it all about?

Web 2.0 refers not only to a style of design, it also refers to a broader concept which evolved alongside the web. Wikipedia states, “web 2.0 refers to an ensemble of web applications which allow a user to interact with the contents on a webpage (blogs, forums, chat rooms, as well as online sources such as Wikipedia, Youtube, Facebook, Myspace, Twitter, etc.)”

Which elements define the web 2.0 style?

Let’s look at some graphic elements and trends that appear in the web 2.0 style:

  • Roundness and soft curves: web 2.0 style essentially breaks away from square-looking graphics. The style prefers having soft curves and round, soft edges.

  • Glowing light sources: flares and other light effects are used to highlight and focus a user’s attention towards a certain item on a page.

The glow adds depth to the picture as well as illuminating your pages.

The glow emphasizes the word "persecution", which is the title of the show

The glow puts emphasis on the slogan as well as on the last project completed.

  • Subtle, pastel colors: this style uses predominantly pastel colors, especially light blue and green. A good trend to adopt here is to have a soft background filled with elements having warm, strong, and lively colors.

Il contrasto tra l'azzurro e l'arancione focalizza l'attenzione dell'utente sulle immagini del prodotto poste nello slider.

  • Reflections and shadows: graphic elements must have depth; they must prove that they are relevant to add to a layout. Therefore, much work is done on creating shadow effects -especially in relation to buttons and portfolio screenshots. Also, there’s a renewed interest in creating “glass” surfaces, ones that can reflect light.

  • Call-to-action buttons: call-to-action buttons are used to tempt a user to perform a certain action on a website. This can be either signing up to a newsletter, filling out an order form or anything else; there’s actually no difference between these types of actions. What’s important is that the button successfully attracts a user’s attention. This is why we advise you to use buttons which are not too small, of a vibrant color which stands out on a webpage. If you would like to learn more about this topic, you should check out this interesting article from Smashing Magazine.

  • Icons: Icons, when properly inserted, can attract a user’s attention and communicate certain universally-accepted concepts in a timely and efficient manner. This is why icons are often used to represent products and services, to enrich certain concepts (for instance, using a cassette tape to represent the home page), and to evoke a design style inside a given text, so that is easier to read.
    Now, we suggest you take a look at this article, in which you will find many examples on using icons correctly and efficiently.

In the next article, we will create a layout designed using the web 2.0 style. For now, if you want to brush up on certain topics, here’s a list of resources you can find useful:

Recommended readings

25 examples of how web 2.0 and traditional design can co-exist

Web design 2.0: style guide

How to destroy the web 2.0 look

Inspiration: web 2.0 sites

Tutorials

How to draw a web 2.0 style layout

Creating a professional web 2.0 style

Drawing a web 2.0 style wordpress theme

Resources

99 web 2.0 design resources

From buttons to posters: 20 web 2.0 tutorials

Other articles in our guide:

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
[pdf]Scarica articolo in PDF[/pdf]
Tags: ,

The Author

Web designer, has been working in the field of graphics and web development for six years and at the moment besides collaborating with a web agency successfully manages her freelance activity under the name of mascara design. Like many freelancers she is used to handling more roles, ranging from paper graphics to the development of html and css codes; nonetheless this passion of hers remains, always and however, web graphics.

Author's web site | Other articles written by

Related Posts

You may be interested in the following articles:

14 comments

Trackback e pingback

  1. uberVU - social comments
    Social comments and analytics for this post... This post was mentioned on Twitter by hulldo: Styles in webdesign: the features of …
  2. Styles in webdesign: the features of a web 2.0 layout | Your | PhotoshopDaily.info
    [...] Link: Styles in webdesign: the features of a web 2.0 layout | Your [...]
  3. How to design a web 2.0 layout? tutorial and psd | Your Inspiration Web
    [...] having looked at the features and trends of the web 2.0 style, today we will draw up a third …
  4. How to design a layout in vintage style? tutorial and psd | Your Inspiration Web
    [...] Styles in webdesign: the features of a web 2.0 layout | How to create a web 2.0 style layout? …
  5. The features of the vintage style | Your Inspiration Web
    [...] Styles in webdesign: the features of a web 2.0 layout | How to create a web 2.0 style layout? …
  6. How to design a corporate/business layout? | Your Inspiration Web
    [...] Styles in webdesign: the features of a web 2.0 layout | How to create a web 2.0 style layout? …

Leave a Reply

Current month ye@r day *