Layout Design

As my final product will be a magazine suitable for iPad, I need to make sure that it is optimised and sized correctly so it looks like it belongs on a tablet screen and not printed in a magazine.

First I did some research on tablet newspapers and magazines and made notes of their layouts.

Empire

The first magazine I looked at what one that I have had on my own tablet for a couple of years, Empire Magazine. Although my magazine is not similar to Empire in content, I wanted to look at styles to see what I should be aiming for in my layout design, and what I should avoid.

  • The first thing I made note of was the ‘how to use’ page. As a real iPad magazine would have interactive elements, the audience must have a clear understanding of how to navigate and interact with elements inside the magazine.

IMG_1077

This would be something I would implement into my own magazine layout to make it look like an authentic tablet magazine.

  • I also liked the size of the images on the page. they were not small and in line with the text but most of them going right to the edge and taking up half of the screen.

IMG_1079 IMG_1080 IMG_1081 IMG_1082

I want my images to make full use of the tablet screen. I shall create my layout so that my photographs are not just there as an add on to the text, but rather a focus point in themselves.

The Economist

Next I looked at The Economist. This is perhaps the furthest away from my own magazine so I wanted to look at what the differences would be between a newspaper layout and a magazine such as my own or Vice.

  • Unlike Empire Magazine which usually had one large column of text, The Economist has two for the majority of its pages. It suits the publication as this makes it look more formal. The content of The Economist is more serious and formal than that of Empire so it makes sense to have more formal layouts.

IMG_1066

I am also conscious of the fact that the iPad screen is smaller than the average page of a magazine or newspaper. So I would have to use a larger font than normal to account for the downsize in ‘page size’. But I do not want to make the font and columns so large that it no longer looks like an article. I think using two columns like The Economist would help keep my layouts looking like articles after I increased font size.

Vice

Vice Magazine is the closest published magazine to Online Matters, so I spent the most time looking at their layouts and taking notes of the various things they do throughout each issue.

  • Vice also use two columns of text, the text is large enough to be easily read on the iPad and leaves enough room for high quality photographs on the page without it all seeming squashed together.
  • As you can see in these screenshots, images are given plenty of space on each page.


IMG_1062 IMG_1063

  • Vice also use illustrations in their articles, which is something I am wanting use in my own articles. In this article in particular they also match the colour of the drop cap to the image on the page.

IMG_1067 IMG_1068 IMG_1069 IMG_1070 IMG_1071

After I have created my layout I shall choose a colour that is most predominant in the image on that page and make the drop cap and pull quotes that Colour.

Online Matters

For my layout I shall stick to the following guidelines:

  • ‘how to’ navigation page to show audience how to interact with the articles.
  • Images that take up large sections of the screen and are a focus of the page.
  • Two columns of text on each page to show uniformity and seriousness and formality of subject matter.
  • Drop caps and pull quotes that match the colours of the photographs and illustrations on the article
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s