How to design a layout in magazine style? tutorial and psd

Our guide on styles of web design continues: new round, new tutorial… this time it’s the turn of a layout in magazine style, realized on the base of the characteristics and on the trends analyzed in the precedent article. Like always, at the end of the article there will be released the free source of the layout that we’re going to project:  it’s useless to say that you can use it for your personal and projects and non.

So, let’s roll up our sleeves and begin!

Step 1: choose the right grid

Even if we have used the grid for many of the templates projected, this type of layout needs a good frame work that helps display the contents (that can be many) in a fast and simple way.

Since we have to realize many sections, of the classic grids from 12 to 16 columns we prefer a framework made of 24 columns (downloadable, like always in this page).

We open a new document in Photoshop (width 1680px, height 1100px, 72dpi) and, once we set up the margins at 360px from the borders in order to obtain a section width 960px , we can import the grid in the document.

Step 2: the site’s container and our logo

We have to create a container for our magazine, with a white colour (#fff) background. For the document’s background, instead,  we’ll  choose a light grey colour  (#f4f5f5).

Let’s give a light shade to the container and hide for the moment the grid, in order to see the result.

Let’s position immediately our logo, a simple inscription created by using the beautiful font Comfortaa, at the top and the centre of our layout. I used the green colour because, together with the blue colour, is one of colours  more suitable for an activity that deals with health, fitness and beauty: YourBodyHealth, in fact is a  thematic magazine that deals with everything that concerns the cure of our body.

Step 3: the navigation menu, the news and the social

Now let’s create our navigation menu, using a simple readable font (Century gothic) that recalls the logo’s soft curves. Set up a grid for the items of the menu (#7b7c7c) and, to stand out the hover effect, a bright green (#92a801).

Under the menu, we decide to put a small  horizontal section called “Flash news”  that contains a  slider in Javascript  that permits us  to visualize , with the automatic sliding, some short and essential news. We add also two small indicators (arrows) that permit the users to leaf through the news.

We’ll also add the social network icons, that in a digital magazine are always important.

Step 3: separate graphically the different sections

Now we have to find a way to divide graphically the logo from the menu, the menu from the news and so on: something visually pleasant , not so marked and adaptable with the minimalist style of our magazine. So, we choose dotted lines, always in a light grey colour, positioned horizontally between the different sections.

Now that we have designed the upper section of our layout in magazine stile, let’s start dividing the lower section in many columns with the help of the grid. We decide to create a  3 columns layout, with the left section wider than the others – that will contain the  highlighted article- and the other two columns with the same dimensions.

Step 4: the highlighted article

Put the highlighted article in the left section: title, subtitle, image and incipit of the article.

To visually underline that this article is in the foreground , we’ll add a light background (designing a rectangle with the appropriate instrument) with a light green colour  (#f2f7e7):

An additonal graphic touch?  We’ll also add on the top on the left, a small icon that represents a dot.

Step 5: the contents of the other columns

In the second column we’ll put some brief  but  incisive articles: titles and incipit, in order to put as many as possible  and give to the user many information at the first glance. We will continue in making the title in a bright colour  respect to the grey of the textual contents, in order to highlight it and make it stand out in an efficacious way.

The last column on the right is reserved to the advertising banners: in our case instead we choose to  put a menu that allows us navigate through the different categories of articles present in our magazine: beauty, sport, nutrition  and so on.

To give a more attractive and functional impression we’ll create some buttons (rounded rectangle instrument), alternating two colours making less monochromatic the section (colour blue #a4c9ce and green #c3e003):

On the buttons, we’ll put the name of the category,  with the icon that visually represents the category.

Want to take a look at our layout?

Let’s put in other two articles  under the highlighted post, dividing the sections in two parts with the same dimensions.

Now, under the category’s icons we put another article, also highlighted by a light background (in this case a light blue #e6eeef) and by another icon. We also add a photo, to brighten up the group and choose a different colour for the text . overdoing with colours can make the site a farce, but alternating two tonalities can make seem less plain the contents and attract the user’s attention toward  different  points of the page.

In the empty space between the columns, to not  heavy down  the layout with its contents , we put in an image that can have functions of an advertising banner or a  call-to-action.

Now,  if  we remove the guides, we realize that the contents aren’t separated between them and this can create some confusion.

At our discretion we choose then to separate the columns with the same dotted line of above, but this time with vertical lines. To do this we duplicate the dotted line level used to outline the menu (right key on level>>duplicate level) and we rotate it to 90° (modify>>transform>>rotate>>90° clockwise).

Conclusions

Our layout is ready: fast to do, simple, clean and readable, perfect to display in an efficacious and pleasant way a large amount of contents.

download
Versione: 1.0
Pubblicato: 28 June 2010
Dimensione: 889.46 kB
Download: YourBodyHealt

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:

24 comments

  1. Tirath
  2. Tyus

Trackback e pingback

  1. Tweets that mention How to design a layout in magazine style? tutorial and psd | Your Inspiration Web -- Topsy.com
    [...] This post was mentioned on Twitter by Tom Bangham. Tom Bangham said: How to design a layout in magazine …
  2. How to Design Magazine Style | GFC Theme
    [...] und Tutorial – yourinspirationweb.com Magazine Style Tutorial AKPC_IDS += "1571,";Popularity: unranked [...]
  3. Web design style: magazine | The Daily ALIEN
    [...] http://www.yourinspirationweb.com/en/how-to-design-a-layout-in-magazine-style-tutorial-and-psd/ – a tutorial on magazine-style web page layouts [...]
  4. July’s Free Professional PSD Web Templates
    [...] 2. How to design a layout in magazine style? tutorial and psd [...]
  5. Showcase: Magazine-Style Layout in WordPress and Resources | DynamicWP
    [...] How to Design a Layout in Magazine? tutorial and psd [...]
  6. Free Professional Psd Web Templates « Webdesign
    [...] 2. How to design a layout in magazine style? tutorial and psd [...]
  7. July’s Fresh Photoshop Web Layout Tutorials
    [...] 2. How to design a layout in magazine style [...]
  8. The styles in the web design: the features of the organic style | Your Inspiration Web
    [...] Let’s continue with the column dedicated to the web design styles: two weeks ago we created a template …
  9. 30+ Free Useful Professional PSD Web Templates June's 2011 |
    [...] 30. How to design a layout in magazine style?      tutorial and psd [...]
  10. 70 Awesome Free PSD Website Templates | Freebie | iDesignow
    [...] How to design a layout in magazine style? [...]
  11. 5 Free Psd Wordpress Design | ArtPxl
    [...] 1.How to design a layout in magazine style? tutorial and psd [...]
  12. TUT: How to design a layout in magazine style? tutorial and psd | mmc blog
    [...] http://www.yourinspirationweb.com/en/how-to-design-a-layout-in-magazine-style-tutorial-and-psd/ [...]

Leave a Reply

Current month ye@r day *