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


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!

download
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.

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:

27 comments

  1. Gunawan
  2. cms

Trackback e pingback

  1. Tweets that mention How to design a layout in organic style? tutorial + psd | Your Inspiration Web -- Topsy.com
    [...] This post was mentioned on Twitter by nando pappalardo, soshableweb and Your Inspiration Web, Tom Bangham. Tom Bangham said: …
  2. Vegetarische Website | Photoshop-Weblog
    [...] dem Beitrag How to design a layout in organic style wird eine Website passend zum Thema gestaltet. Auch eine …
  3. October’s Free Professional PSD Web Templates
    [...] 4. How to design a layout in organic style – psd [...]
  4. 39 Free Professional PSD Web Templates « Sample Website - FreshDesignWeb
    [...] Business Template2. Colorful Free Coming Soon Page PSD3. Free HTML5 Website Template with PSD files4. How to design a …
  5. 25+ Clean Website Layout Tutorials | webdesign14.com
    [...] 2) Design a Layout in Organic Style [...]
  6. October’s Fresh Photoshop Web Layout Tutorials
    [...] 3. How to design a layout in organic style? tutorial [...]
  7. Downgraf – Design weblog for designers » Free Professional PSD Web Templates
    [...] 4. How to design a layout in organic style – psd [...]
  8. PSD Web Design Tutorial, PSD Web Design Templates | Designer
    [...] How to design a layout in organic style [...]
  9. 100 ESSENCIAIS PSD DO PHOTOSHOP MODELOS DE SITE DE DOWNLOAD GRÁTIS | Unconnectable
    [...] 45. COMO DESENHAR UM LAYOUT NO ESTILO ORGÂNICO – PSD [...]
  10. 90+ Essential Photoshop PSD Website Templates Free Download
    [...] 45 . HOW TO DESIGN A LAYOUT IN ORGANIC STYLE – PSD [...]

Leave a Reply

Current day month ye@r *