How to design a web 2.0 layout? tutorial and psd

After having looked at the features and trends of the web 2.0 style, today we will draw up a third layout. After the corporate and grunge layouts, today it’s time to create a 2.0 web layout for a website specialized in mobile applications and software. This week you will be ‘working’ for us, since the client is Your Inspiration Web 2.0.

Are you ready? Let’s begin by drawing a layout using Photoshop.

download
Versione: 1.0
Pubblicato: 12 April 2010
Dimensione: 3.18 MB
Download: YourInspirationWeb2.0

Create a new document with a total size of 1680 pixels and using the frame work 960 grid system, define an area of 960 pixels which will encapsulate the webpage. Also you will be adding side margins of 360 pixels.

Let’s create a central band, as we’ve done previously with the corporate layout, in which we will place images of the product we’re selling (similarly to a header), and a short text description. This section will serve to attract the attention of people visiting this website.

With the rectangle tool let’s create the central section which extends for the entire length of the document and is 400 pixels in height. On the style levels window, you will assign a radial-type of blend which ranges from dark blue (#043573) to azure (#0a97f1) with the following settings:

Now position the logo at the top left-hand side of the page:

Using the round rectangle tool, let’s draw a sky blue rectangle (#b7d7f1): this will be the background of our navigation menu. Using the personal shape tool, let’s choose the triangle shape that will be placed under the background, giving the impression of being a “cartoon”.

At this point let’s assign a shading to level 0 (known as the background level), so that the page will seem less white. (Note: if the level is still blocked, all you have to do is double-click on it to unblock it). Let’s use a shading that ranges from azure (#c8e4fc) to white. The result should look like the following:

Now let’s take an image depicting a blue sky with lot of white clouds, something similar to this:

Let’s import it inside the document, positioning it at the top, under the logo and under the round rectangle. Reduce the opacity (around 60%) and try to find an optimal setting using the fusion levels. In this case we have picked the Brightness fusion level.

Now the sky is less evident, but it makes the background look cooler.

All that is left to complete the top part of our layout are the navigation links. Let’s use a clear and delicate font: Century Gothic.

Let’s draw another light blue rectangle (#badefc), that is 220 pixels wide (3 columns each having 12 rows) and 430 pixels in height. Position it so that it extends outside of the central section (both at the top and bottom).

Now with the writing tool, we will join the ends of the rectangle with the central section, creating a type of triangle:

Let’s color this triangle in a different color, one that is slightly darker than the azure in the rectangle (#92b8d7), so that it creates a 3d effect. Let’s follow this same procedure for the lower right angle, obtaining this effect:

Inside the square we’re going to place a consumer review and two contact banners (one with a phone contact, the other one with an email contact form). Let’s create a roundish rectangle combined with a small triangle, in order to evoke the cartoon we previously set as the menu background. Then we will insert a review written by one of our clients.

Below we will add a small button that allows one to read other consumer reviews.

Now, using the Century Gothic font, the round rectangle tool and two icons we will create a section that has a contact form, one that is simple and pleasing to the eye.

Let’s import the product image (in this case a telephone, which you should no problem finding online), and insert it in the middle of the blue section.

Now duplicate the level of the telephone: right click on a level, then click on duplicate level.

At this point, once you’ve positioned it inside the copied level, click on Edit >> Transform >> Rotate 90 degrees as you can see in the following image:

This is the end result:

Drag the level of the second telephone beneath the level of the first one so that the second telephone is shown behind the first one:

At this point, let’s combine the two levels into a single one (by selecting the levels and pressing CTRL+E). Then we will duplicate the newly-created level. Afterwards, click on Edit >> Transform >> Rotate 180 degrees:

We will obtain the following result:

Now let’s go to Edit >> Transform and choose the option “reflect horizontally” and lower the image a bit.

Let’s reduce opacity (25%) and with the rubber tool set as the soft brush, we should delete a large portion of the reflected image.

Let’s keep on deleting until we obtain the following result:

We’ve looked at how to create a good reflection in a simple and effective manner. Let’s take another look at the state of our layout:

The site is coming along well. Next to the two telephones, let’s add a description of the software features we’re selling, possibly accompanied by several icons.

And finally let’s insert a call-to-action button, one that will redirect a user to the purchase and download page.

Now that the top section is finished, let’s move on to the other sections of the layout. Let’s divide the bottom section into 3 sky blue boxes (round rectangles colored with #b7d7f1), using the grid as an aid.

In the first box let’s insert the latest news item:

In the second box, let’s have a list of active users of the forum:

In the last one, we will display the last tweets.

At this point let’s create a copy of the sky with clouds, rotate it 180 degrees and position it at the bottom of the document.

In closing, we will create the footer of the layout: with the round rectangle tool let’s create another section, position it in the center and add the copyright data.

Are you curious to see the results? Here’s our web 2.0 style layout:

Conclusion

Reflections, icons, call-to-action buttons, round curves: the layout we created has many web 2.0 features. It wasn’t too hard obtaining this result, which is aesthetically pleasing and simple to create, don’t you think so? Go ahead and download the psd and use it in your personal projects: next time we will cover another style, don’t miss it!

download
Versione: 1.0
Pubblicato: 12 April 2010
Dimensione: 3.18 MB
Download: YourInspirationWeb2.0

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:

30 comments

  1. John
    • shev

Trackback e pingback

  1. How to design a web 2.0 layout? tutorial and psd | Your Insp | Tutorialicious.info
    [...] Link: How to design a web 2.0 layout? tutorial and psd | Your Insp [...]
  2. How to design a web 2.0 layout? tutorial and psd | Your Insp | Cell Phone Reverse Lookups
    [...] How to design a web 2.0 layout? tutorial and psd | Your Insp [...]
  3. 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? …
  4. Styles in webdesign: the features of a web 2.0 layout | Your Inspiration Web
    [...] Styles in webdesign: the features of a web 2.0 layout | How to create a web 2.0 style layout? …
  5. April’s Fresh Photoshop Web Layout Tutorials
    [...] 7. How to design a web 2.0 layout? tutorial and psd [...]
  6. Photoshop: Some Nice Website Layout Tutorial | Indian web and graphic designers
    [...] 7. How to design a web 2.0 layout? tutorial and psd [...]
  7. 17个网站原型设计 | Booto'Blog
    [...] 9.How to design a web 2.0 layout? [...]
  8. How to create an amazing grunge 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 day month ye@r *