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.
- 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.
- 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:
Other articles in our guide:
- Styles in webdesign: the features of corporate/business layout | How to create a corporate style website?
- Styles in webdesign: the features of a grunge layout | How to create a grunge style layout?
- Styles in webdesign: the features of a web 2.0 layout | How to create a web 2.0 style layout?
- Styles in webdesign: the features of a vintage layout | How to create a vintage style layout?
- Styles in webdesign: the features of a magazine layout |
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 »