The influence of the broadsheet on the web.
A recent trend has developed (which I have talked about in previous articles) which uses other mediums to inspire our web site designs, such as posters and newspapers etc. I believe this new style has come to the forefront in rebellion to the web 2.0 style. The web 2.0 style is very polished / shiny and there was a point in the evolution of web design where the internet became saturated with these sites, which all looked similar. The polar opposite of web 2.0 style however is a style based around the broadsheet newspaper, with serif fonts and large headlines accompanied with a large image and often using a more weathered / lighter colour scheme.

Examples of great broadsheet designs from The Guardian and The Times

Another key reason for this coming trend is that scrolling is now second nature to users and monitors are also much larger in general. In this article I’m going to look at the traits of a newspaper and also how we can use these to influence our website designs. During my study of newspapers I focused on broadsheet papers and took particular inspiration form The Guardian, The Times, The Daily Telegraph and the Wyoming Tribune.

A little history
Newspaper originated from ancient Rome and more specifically from Julius Caesar. Caesar would create announcement bulletins which were usually carved out of metal or stone in order to make grand announcements to a mass audience. Design wasn’t an issue in these early forms of news tablet; it was simply a case of getting as much information on the page as possible. Because it was such a novelty the roman people would devour content without the need of good design to encourage them!

It was the industrial revolution which really hailed the arrival of the newspaper in the form we know it today. The print press allowed newspapers to be produced in bulk which is when they became mainstream allowing a myriad of design techniques to be unfurled…

The fold
Newspapers themselves also have a fold and this is where the web term derides from. The original principle of the fold in web design was made for the first era of the internet, when users were still becoming accustomed to vertical scrolling. A mistake I often come across, is designers trying to fit too much content above the fold as if it were the last musical chair! As a result of this we are left with overly busy designs which don’t deliver a clear message.

Design techniques / principles of a successful broadsheet
During my analysis of newspapers I came across a variety of techniques which made the newspaper a success; many of these we still use in web design today. Below I will look at these techniques in more detail.

Stories – When writing content for your website tell a story in the same way as a newspaper. Lead in with key facts and quotations before following up with details.

Cutlines – These tell the reader what is happening in the photo or an image. In a site try using these instead of tooltips or alt text.

Colour – Not all papers have to use whitepaper, some of my favourite newspapers in fact use other colours. The financial times uses a salmon pink whilst L’equipe uses a yellow.

Headlines – These should be no smaller than 42 pts …even today people walking past a news stand need to be drawn in; hence the reason for the large sized font. Use the same techniques for your newspaper, the watchword is hierarchy.

Referers – These are lead-ins to other bits of important content within the paper; used in very much the same way on current websites.

Pull quotes – Eye catching extracts from a quotation which are used to draw the reader into the main article; again another technique used for websites.

Mug shots – Tightly cropped photos of a prominent figures head. I really like it when these mug shots crop off the top part of the head; very stylish. These images are used to identify the author or the main people in the article. I find these are very effective for testimonials.

Typefaces – Keep with a couple of typefaces…no more.

Dominant art – This can be an image or an illustration which is related to the headline or can be an image relating to another article.

Lead-ins - At least 3 stories should be visible above the fold. For a website read 3 lead-ins above the fold. You must however be wary of overwhelming your user…what is the purpose of the site. Would these 3 lead-ins be better served below the fold? Although there are many good traits we can take from the newspaper we have to remember that we are designing for the web and adjust these things accordingly.

Front page- A good newspaper cover should contain a maximum of five or six stories and a max of three or four images.

Pull Boxes – Graphics such as maps or informational boxes relating to the story, often in the form of graphs or pie charts. In text heavy sites try to break up the text with visual diagrams / charts.

Trends
Another trend I would like to mention is to feature the Newspapers name and branding further down the page thus making room for a bar at the top which usually features the most popular content (mostly relating to sport from the samples which I viewed). A good example I saw of this was in the Wyoming Tribute Eagle and to a lesser extent in The Guardian (pictured above).

The final word
In summation I think by taking techniques from broadsheet and tabloid newspapers we can improve our websites with timeless design techniques rather than sites which merely follow a trend. I think the key lesson we should to learn from this study is that we need to be inspired more by the history of design and what has gone before rather than being completely consumed by trends.

 |    |