Nick Hornby official website for Penguin Books

By: Daniel Pomlett on 25.09.13
Category: Web
Tags: , , , , , ,

We were asked by Penguin Random House to build a website to promote the books and writing of the author Nick Hornby.

The brief for the design was for the site to be bold and graphic both in the use of colours and typography. Nick wanted to avoid a cold, digital feel by invoking a more print-like aesthetic.

The site also needed to be fully responsive and had to serve different purchase links and book covers for different regions.

Style and Colour scheme

Nick had made it clear that he wanted the site to be bold, with the feel of a graphic magazine and that it should not look like a conventional website. As way of an example he referenced a publication he had written for called The Believer

With that aesthetic as a guide we set about trying out various home page layouts with different colour schemes. The trick was to find something that was bold and different but not overwhelming and uncomfortable to read.

home_page_01 home_page_02 home_page_04home_page_03

Eventually we settled on the following colour scheme and design…

Final colour scheme

Final colour scheme


Final home page design

Final home page design


In order to capture the desired print aesthetic it was necessary for the typography to follow suit.

For the main banner we took a chunky serif typeface, in this case Chunk Five, and added a 3D effect to it in Illustrator. This was then recoloured so that it was clear when a user had moved from the books section to the films section.

Headings were rendered in League Gothic, a font designed by The League of Moveable Type with main anchors being rendered in Dawning of a New Day, a script font designed by Kimberly Geswein and available on Google Fonts.

Hornby typography

header typography


Nick’s output could be broken down in to two broad categories, his books and films that have been made from those books, so these two main call to actions needed icons to be used on the home page and across the site.

In order to create an icon aesthetic that fitted in with the style of the rest of the site, we decided to hand draw them. Suitable images were found traced and amended, then that outline was scanned and coloured on the computer. The final icons can be seen below…

The Build & Technical requirements

The build for this site came with a particular set of challenges. Firstly, the print layout meant that resizing elements responsively was not always straightforward and we had to be inventive in how that was done in order to maintain the integrity of the site across devices.

With Penguin Random House being an international brand, the second major challenge came with the need to serve different content to different regions. Depending on where a user was situated, it might be necessary to show region specific covers for books and films. Also, book and film detail pages needed to show various purchasing links which again needed to change depending on location.

In order to do this we used a a plugin called Custom Content by Country. This allowed us to detect a users IP address and then write code to influence the content that got displayed.

Here is an example of a books page showing purchase links…

Books detail page

Books detail page

The final site came together really nicely, remaining both aesthetically ambitious but also usable.

Technologies used

  • Photoshop
  • Illustrator
  • HTML5
  • CSS3
  • SASS
  • JQuery
  • Grunt
  • PHP
  • WordPress
  • Responsive web design
  • IP detection
View the site

Related Work

Open Labour website design & build

Open Labour is a grassroots and member-led organisation who describe themselves as standing for transformative, left-wing politics and encourage an […]

Inclusive Growth website design & build

The All Party Parliamentary Group on Inclusive Growth have a membership drawn from across the Houses of Parliament and, in collaboration […]

Wake Up Europe!

Wake Up Europe! are a group of journalists who believe passionately that the European project, despite it’s imperfections, is vital […]

Foreign Desk Ltd website design & build

Foreign Desk Ltd is a company started by four prominent UK journalists who, having worked globally, recognised a need to […]

Liam Byrne MP website design & build

Liam Byrne is the Member of Parliament for Birmingham, Hodge Hill. We were asked to design and build a website […]


InFacts are a group of prominent journalists who passionately believed that Britain would be better off remaining in the European […]

The Wake Up Foundation 2050 Index

The Wake Up Foundation is a, journalist lead, educational charity that, in it’s own words, ‘aims to raise public awareness […]

E3M website and branding

E3M is an initiative that supports a group of leaders from the largest and most successful UK social enterprises that […]

Wolmar for London website build

Christian Wolmar is standing as a Labour candidate in the 2015 London mayoral elections. His team asked us to build […]

Vintage & Cie

Vintage & Cie are a french company, who sell rare and fine collector’s wines and spirits. Although they already had […]

Sign up to our newsletter

Send me the newsletter