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.
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).
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).
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.
Pubblicato: 28 June 2010
Dimensione: 889.46 kB
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?
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 »