Penguin books used to be the leading publisher in actual paper-based books. Jan Tishold , of Bauhaus fame, made Penguin famous for his consistently applied cover grid. Yet, today’s fast-moving tech seems to have stunted Penguins legacy somewhat and that seems to have left Penguin in the dark-ages.
The aim of the brief was to re-design Penguin books website in a way that would improve user interaction by immediately presenting them with content that is relevant to what they are searching for, designing the structure to make it easy for the user to find content and have clear indications of which page they’re on and how to perform actions on the page. The focus of the page design was to get users to buy more books directly from the penguin site and not through third part sites. The strategy adopted was to make the site more visual through the use of Penguins famous books covers as visuals to attract and nudge users to purchase more books.
The home page uses a tiling system to present various sections that users can browse through to look for books. Text is always aligned to the furthest end of an element to allows more space for images to be displayed. The tiles alternate between single and two column grid systems in each horizontal section to create variety and hold user interest as they scroll down the page.
Hierarchy of information is created through type point size and colour. The most important titles have the largest type sizes and the least important have the smallest point size. An accent colour is used on the smaller point sized text so that they don’t completely get overlooked.
Buttons are all coloured in orange which is the only bright colour used throughout the website, this makes the CTA stand out more.
Penguins primary theme colour is orange however it is a highly energetic colour which inspires excitement and enthusiasm so in order not to overwhelm users the colour was just adopted as an accent colour. Primary colours of the website where various grey which create a contrast with the orange accent colour and make it stand out.
The site text is in all san serif text, this is because the simple forms better stand out and are much easier read against the images.
Division within category elements is achieved through the use of Penguin book covers patterns as background images.
Final layout Insitu
mock-up reference : <a href="https://www.freepik.com/free-photos-vectors/mockup">Mockup psd created by yeven_popov - www.freepik.com</a>
Initial Wireframes
Layout Version 2
Layout Version 3
Final Layout responsive design mock-up
