How to design a layout in organic style? tutorial + psd

by sarah | 4 Oct 2010 | in: Design, Freebies, Tutorial

It’s ufficial: the holidays are over. Let’s try to win the last summer hiccups and roll up our sleeves, after all we have a lot of novities in reserve that it’s unthinkable not to fully work.

Few days before the yearned summer holidays we saw the featured of the organic style (or natural) applied to the web design. Today we’ll create a layout that recalls some graphic characteristics of this style: our client deals wuth biological food (or vegetarian, as you prefer) and needs a clean, effective homepage that recalls the natural freshness of his menù with a proper graphic.

We start planning our home page.

We open a new document in Photoshop, wide 1680px and heigh 1300px (better be generous, at most once the layout is ready we can remove the pixel not used) and we set the guide lines at 360px from both borders. The space between the guide lines will delimit the container of the layout.

We create the background of the page

At the background level we set a ” granular” texture that gives a dirty, opaque effect. On the web there are milions alike, in our case we’ll use this one:

We open this image in Photoshop and save it as pattern through the menù Modify >> Define pattern.

Double click on the background level and in the window of the styles of level, through the entry ‘Superimposition Pattern’, select the pattern saved among the available ones in the programme.

With a brush ‘watercolor’ effect (in this beautiful collection of design m.ag you find 500 set of brush similar) and with a green opaque (#d3d7bd) we design a couple of brushstrokes in the upper section of the layout, to give a touch of colour to the background and to liven up the area that will contain the heading of our homepage.

Above this “green area” we position the photo we selected for the heading: considering that the site deals with food sales, there’s nothing better than a beautiful photo with the products offered to the users (and potential clients): the secret, in this case , is to appeal to their love for food!

The label containing the logo

As you see, with only three graphic elements the homepage is starting to shape up. Now we insert the logo: inspired by the site Organic Supermarket we want to creat a label that hangs from above and that contains the logo and the possible tagline of the company.

With the rounded rectangle tool we draw a green colour rectangle (#adba35) in the upper section. Once it is done, through the menù Modify >> transform >> rotate, inclining it a little bit.

Now do in order that the label has a hole in the upper section. With the ellisse tool – keeping the shift key pressed to create a simmetric form – we draw a sfere of the same colour of the water color effect of the background.

To the sphere we also assign a trace of 5px of light green colour (#e2eaa4)

Now with the pen tool we draw the string of the label, with a light brown colour (#a28052). In this phase we need to go by approximation, trying to imagine a real like string, that gets tied to the hole of the label and goes up to the upper border of the layout.

In our case, tracing the label string from the Organic Supermarket site with a pen, we obtain this result:

Now we position the logo (font Berlin Sans) and the tagline (font Bubble boddy) inside the label. We also add the telephone number and our label is ready.

Design the navigation menu

With the font Century Gothic we write the entries of our navigation menu. We can say that under the structural profile this site is very simple, made of four pages:

With the rectangle tool, we draw some rectangles to put under every single entry of the menu. For a matter of harmony, we draw all of them the same width, on the other hand the names of the pages are quite linear and allow this kind of choice.

At this point we change the colour of the link, choosing a white color (#fff) and we set a light hover effect, giving a brighter green colour (#c5da17) to the button the indicates the active page. Be careful not to use a too light green colour because the link could become unreadable.

At this point, next to the beautiful photo of the roulade, we add the the welcome text of our homepage. This text must, with a couple of lines, make the users understand what is the contents of the site their visiting: how? Let’s see it together.

Always with the font Century Gothic but playing a bit with the spacing of the letters and with the boldtypes to give a more dense effect to the headline and at the same time emphasizing a few words, we insert the text:

Want to take a look at our layout?

Present the menu to the users

Yes, of course, it’s still incomplete, but it’s so pretty! We proceed inserting a section that contains an example of menu – with related photos of the dishes – proposed by our client’s company. We choose some photos that are right for us, preferably with a white background, so that we avoid an annoying pen work. with the images with a white bachground all we need to do is set the fusion level on ” darken” or – better – “multiply”, to get a good natural effect.

We insert some small “+” between the images, to give the idea of association of dishes, that together form a single menu.

We add, on the left side, a title for this section. Also in this case we use the usual font and play with the dimension of a few words; moreover we reduce sensibly the spacing to make the whole phrase more compact.

Now we frame this section with a small border. How? Always with the rectangle tool we draw a rectangle (of whatever colour, it doesn’t care) that frames the whole section.

To the rectangle we assign a green trace of 2px (#ccd45f), obtaining this result:

At this point all we need to do is set the filling level at 0% to have this effect:

In this way, though, the border we created goes over the text level.

It’s possible to avoid this slight mishap in many ways: the one I use is very simple: select the part of background with the tool ‘select rectangle’, copy (modify >> copy united elements) and paste the section, obtaining this way a rectangle with the background texture.

At this point move the level of this rectangle under the level of the text, to get this result:

The oriental disciplines

We add now another section, this time dedicated to the physical disciplines to associate with the diet. We follow the style adapted for the menu section, but changing the colours: now we choose a warmer colour, a brownish orange.

The fugures, used a lot in the fitness sector, are available for free in this page.

Let’s see how far we are with the homepage we’re designing:

Final touch: the footer

I think it is it: we add a small footer and we’re done. Always with water color effect/grunge brushes, we draw a stripe in the lower section:

And on this section we write our copyright.

Here is how the home page we designed looks at the end:

The template is available for the download: download it and freely use it for your projects!

Versione: 1.0
Pubblicato: 23 September 2010
Dimensione: 4.26 MB
Download: YIorganic

Conclusions

Today we created a layout simple and attractive, inspired by the characteristics of the sites in organic style. In fact we mixed in an effective way the organic style with a few features of the web style 2.0 with a very pleasant result: with a little bit of fantasy we created a really good product.

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 sarah

25 comments

Elcodigodebarras

November 14, 2010 at 7:20 am

# 1

Simply…delicious in all ways !

Thanks for sharing this; with this action we are getting an Internet more friendly for all.

I found your web by accident but it has been a sweet surprise.

Reply
- sarah
  
  November 15, 2010 at 5:56 am
  
  # 2
  
  Thank you
- friv school
  
  April 12, 2012 at 2:20 am
  
  # 3
  
  Thanks you about useful tut.
Logomondo

December 30, 2010 at 4:46 am

# 4

Excellent ork, Keep it like this!

Reply
Kosmetikstudio

January 1, 2012 at 3:32 pm

# 5

nice tut, great for restaurant, thanks

Reply
Tinku TR

May 13, 2012 at 3:14 am

# 6

Thanks. what about the licensing of this? is it allowed to sell this design if i make it xhtml theme for wordpress or concrete5 ?

Reply
Kizi

June 12, 2012 at 2:02 am

# 7

Thank your share info!! love you;)

Reply
Firm games

July 8, 2012 at 9:47 pm

# 8

Thanks a lots about your sharing……!

Reply
- Jogos De Friv
  
  October 15, 2012 at 9:53 am
  
  # 9
  
  Excellent ork, Keep it like this!
Friv Firm

July 8, 2012 at 9:49 pm

# 10

Nice share info….Thanks you.!

Reply
Gazo games

July 18, 2012 at 11:16 pm

# 11

sharing your very mind for me thank you …!

Reply
Bored

August 2, 2012 at 10:58 pm

# 12

Nice share…Love you..!

Reply
Gunawan

August 6, 2012 at 9:00 am

# 13

thankyou
it is usefull

Reply
Friv Star

October 11, 2012 at 3:59 am

# 14

I love you…..

Reply
Jogos Friv

October 15, 2012 at 9:54 am

# 15

Nice share info

Reply
kizi friv

October 31, 2012 at 8:41 am

# 16

I love this place, thanks a lot.

Reply