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:
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!
Pubblicato: 23 September 2010
Dimensione: 4.26 MB
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:
- 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 | How to create a magazine style layout?
- Styles in webdesign: the features of a organic layout | How to create an organic style layout?
- Styles in webdesign: the features of a typographic 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 »