menu

Nick Hornby official website for Penguin Books

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

Typography

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

Iconography

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