Visual News

Date: June ’19
Skills: Editorial + Information design + Web
Type: University bachelor project
Project brief:

As this is the design project for my bachelor’s degree in graphic design at Malmö University the brief was very much up to myself to create, as long as the whole project was completed within eight weeks and conformed to all the academic requirements for bachelor projects.

The starting point for my project was the fact that news consumption has gone down dramatically in the last few decades. I see this as a major problem so I set out to see how graphic design might help to turn this trend. 

--- Background ---
Background 1/7

Falling news consumption a democratic issue.

According to fundamental principles of a democratic society every citizen has an obligation to be informed about current issues. An informed population is more equal, better represented and better integrated in society. Journalism and news media plays a vital part in communicating these issues.

The problem then is that news consumption has gone down dramatically – especially among people 16–29 years of age – according to a yearly Swedish study about media habits. As you can see on the graph, the amount of swedes who regularly read a daily newspaper has almost halved in the last three decades. Even if readership has moved online it has nowhere near made up for the decline in print.

This trend is also clear in TV and radio as well as in other studies across Europe.

Background 2/7

Responding to a new generation of consumers.

I decided to target that audience of people 16–29 years of age. In my research I found out that they generally want to keep up with current news and think it’s important but with a fast paced life with a lot of pressure from school and work a lot of them say they struggle to handle the vast amount of news articles coming their way. What they want is less text, a simpler language, more background information and a visual presentation.

To my proposal: imagine the articles here are all about the same topic, say the drawn-out affair that is Brexit. A complicated story and if you haven’t been paying attention from the start it can be difficult to understand what every new article is about. So, what if you take the essential bits from each article and bundle it all into one background article presenting the information in a more visual way showing how everything is connected.

Background 3/7

Finding a gap in current news media.

Looking at the global news media today I have found that written background articles exist but are surprisingly rare and generally difficult to find (not usually bundled with articles on the topic it covers). Some news outlets are quite big on visual articles, usually driven by data. A combination of the two are basically non existent. I found one article from The New York Times that could be classified as a visual background article but it is short and basically just blocks of text. I couldn’t find a cohesive systemised concept utilising information design principles to create a compelling story. This is the gap I’m aiming for.

Background 4/7

An unconventional solution in a common environment.

I explored different formats for my concept, but ultimately settled for a mobile news web/app environment primarily since that is how the majority of my target audience consume news. Within this environment I decided to go for a somewhat unconventional horizontal scroll format, for reasons explained next.

Background 5/7

A new perspective on scroll direction.

Vertical scroll: This is the way we’re used to read a news article on our smartphones. It’s a format the media outlets use for their visual news stories. For text this is fine, as the limited direction is a good width for text reflow anyway and the text can continue uninterrupted in the unlimited direction. But what if we want to work with news in a more visual way – introducing a lot of graphics – is this the best way?

Horizontal scroll: By turning the perspective 90 degrees we gain space in what is now the limited direction, enabling more freedom in disposition through the new reading direction.

Background 6/7

Enabling a more dynamic reading experience.

Through this new freedom in disposition we can create a more dynamic reading experience by placing blocks of content of varied size along the reading direction. In a vertical layout the desirable line length of text is about as wide as the screen – it sure can’t be much narrower – which means there’s not much room to play with.

Background 7/7

Creating a bond between chunks of information.

When it all makes sense though is when you consider the nature of this project. My aim is to create a cohesive background article that makes it clear how all the smaller parts of a bigger topic connect to each other. Since the content naturally is in smaller chunks – either as blocks of text or graphics – the horizontal layout enables me to create segments of information that belong together while still making the connection between them clear. Trying to do the same in a vertical layout you would have to insert big areas of white space to make the segments clear which would break the story apart losing the reading flow.

--- End result ---
End result 1/5

Get up to speed with visual re-caps.

End result 2/5 – Article #1

The drawn-out story of Brexit.

End result 3/5 – Article #2

The money laundering scandal in Swedbank.

End result 4/5 – Article #3

The proposed high-speed rail project in Sweden.

End result 5/5

Crafted around information design principles.*

#1
Segmenting
Perception, learning and retention is improved if content is organised into logical sub-divisions rather than one continuous unit.
#2
Highlighting
Perception, learning and retention is also aided by highlighting important points. Results in reduced cognitive load.
#3
Establishing links
Through visual organisation and structure information design can describe how parts of a whole interact and highlight cause and effect, guiding the reader through more complex content.
#4
Retaining focus
To involve the reader and keep their attention the information shouldn’t be laid out in a predictable or boring manner, and it should have a varied pace.
#5
Reducing clutter
Too much content at the same time should be avoided. Graphics should be simple, reduced from redundant details so that focus is retained on the key information.

*Sources: Dunlap, J. & Lowenthal, P. (2016). Getting graphic about infographics: design lessons learned from popular infographics. Journal of Visual Literacy, 35(1), ss. 42-59. DOI:10.1 080/1051144X.2016.1205832 /—/ Lankow, J., Ritchie, J. & Crooks, R. (2012). Infographics: The Power of Visual Storytelling. Hoboken: Wiley. /—/ Lipton, R. (2007). The practical guide to information design. Hoboken: Wiley. /—/ Mayer, R. E. (2009). Multimedia learning. New York: Cambridge University Press. /—/ Pettersson, R. (2010). Information Design – Principles and Guidelines. Journal of Visual Literacy, 29(2), ss. 167-182. /—/ Sweller, J., Merrienboer, J.J.G., Pass, F. (1998). Cognitive Architecture and Instructional Design. Educational Psychology Review, 10(3), ss. 251-296. 

#1
Segmenting
Perception, learning and retention is improved if content is organised into logical sub-divisions rather than one continuous unit.
#2
Highlighting
Perception, learning and retention is also aided by highlighting important points. Results in reduced cognitive load.
#3
Establishing links
Through visual organisation and structure information design can describe how parts of a whole interact and highlight cause and effect, guiding the reader through more complex content.
#4
Retaining focus
To involve the reader and keep their attention the information shouldn’t be laid out in a predictable or boring manner, and it should have a varied pace.
#5
Reducing clutter
Too much content at the same time should be avoided. Graphics should be simple, reduced from redundant details so that focus is retained on the key information.

*Sources: Dunlap, J. & Lowenthal, P. (2016). Getting graphic about infographics: design lessons learned from popular infographics. Journal of Visual Literacy, 35(1), ss. 42-59. DOI:10.1 080/1051144X.2016.1205832 /—/ Lankow, J., Ritchie, J. & Crooks, R. (2012). Infographics: The Power of Visual Storytelling. Hoboken: Wiley. /—/ Lipton, R. (2007). The practical guide to information design. Hoboken: Wiley. /—/ Mayer, R. E. (2009). Multimedia learning. New York: Cambridge University Press. /—/ Pettersson, R. (2010). Information Design – Principles and Guidelines. Journal of Visual Literacy, 29(2), ss. 167-182. /—/ Sweller, J., Merrienboer, J.J.G., Pass, F. (1998). Cognitive Architecture and Instructional Design. Educational Psychology Review, 10(3), ss. 251-296. 

Shopping Basket