Page layout design for the Short Attention Reader
For this project, we had to design a double page magazine spread, which we then had to adapt to a tablet screen. We were challenged to analyze different layouts and had to find a way in which we could make images and text working well together. During this project, we learned how to use grids, hierarchies, type, and symbols to create a visually engaging layout.
At the beginning of the project I tried to understand the content of my article, the central message and the feelings and thoughts created in the readers head. As the main topic was climate change and design, I wanted to develop a thought-provoking visual language that symbolizes the topic in a serious way but also shows optimism, which is, in my opinion, one of the articles central messages.
In my primary research, I looked at visual languages associated with climate change and similar topics, I collected ideas from books and magazines and analyzed the colors, images, and layouts they used. I noticed a massive variety of designs and colors, which showed me that there are many different ways to visualize the topic. Also, I learned that symbols or symbolic images can be a very powerful tool to communicate such a topic in a sensitive way.
I decided to build my layout around an illustration and looked into different ways in which I could combine symbols and colors. While doing that I used the Noun Project as an important resource and inspiration for my design, as I was fascinated by the way in which they simplify the complexity of the topic with a few lines.
I experimented with an icon of a light bulb, an object which was ever since important in the design history but criticized a lot in the past decades as an energy-wasting object. I combined this iconic, but also controversy object with an icon of the earth to create an ambiguous image, which should intimidate the topic but leaf space for the observers own interpretation. While designing I played around with abstract lines, triangles, and icons.
I analyzed a magazine spread I found during my research in detail to learn more about the options I have when designing a layout. The double spread is from the NNU magazine and was designed by Mark Brooks. Further on in the process, I looked a lot at his magazine layouts, as they are very simple and interesting at the same time.
Composition
Focus: Title (The missing Curriculum) Lead the Eye: Yellow line
Alignment
Heading, subheading, and author: central body text: justified text, first line indent
Structure
2 columns and regular margins (same size on the left and on the right, same size on the top and the on bottom), regular layout
Type:
Hierarchies
left page: heading, subheading, Author, magazine name
right page: heading, subheading, body text, page number,
Building a layout was probably the biggest challenge for me, as I didn’t really know how to combine all of the text and I experimented with different grids, alignment, and font sizes, always using the illustrations I made at the beginning as a starting point. While doing that, I looked again at magazines, but this time I didn’t focus that much on the overall look but more on the different elements a magazine layout includes, such as title, author and page number. That way I tried to figure out what options I have when placing content
Development process
Layout ideas
The first layouts I made were really simple and I thought that there might be not enough content on them and I was convinced that I would have to fill up more of the white space and in the end, I had several layouts that didn’t really work well with the article. After listening to some opinions from other people, I tried it again, but this time I focused on keeping everything simple.
While finding a new and simpler layout I messed around with different fonds which I downloaded from google fonts. This article, which compares the best- designed google fonts, helped me a lot when looking through the massive amounts of possibilities. I decided to use the serif font Cardo for the main body text and the image caption, as it is
Type experiments
Double spread magazine layout
After creating the magazine layout, I tried to adapt my ideas to an iPad version. My first layouts were based on a two columns structure, displayed a lot of text and used the lamp/world icon as a symbol. I found that the results had too much content on them and the designs were
Idea 1
Idea 2
Idea 3
Final Layout
At the end of this project, I realized how much I learned during the whole process. I learned how to use grids to create a more structured layout, I understood the importance of margins and columns in the alignment of a magazine and I also had the possibility to experiment with different fonts. Also, I learned that the amount of content on a page doesn’t necessarily say something about the quality of a design. It is better to start simple and build up from that point instead of filling everything up with images and text at the very beginning. During the process, I listened to many different opinions, that influenced my final design a lot and saved me from making a lot of mistakes.
