Herschel - Redesign Concept
Here is a project that I made just for fun! My concept was based on Herschel's style and beautiful printed books. The page had to have attractive layout and beautiful pictures to entice the user.
The design had to be CLEAN, FLAT, TIMELESS and YOUNG. I created a modern layout with timeless typography, flat buttons, and all site elements is balanced with plenty of white space and eye catching images from Herschel.
Typography
I kept the Trade Gothic font, since it may be part of the brand style, but I replaced Bodoni font with a beautiful slab serif font called Sentinel, designed by Jonathan Hoefler and Tobias Frere-Jones, to contrast (but not conflict) with Trade Gothic.
Sentinel has the conventional book type look but with attractive contemporary details which is perfect for the brand style and the concept of this redesign. It also works well in big size, small size and body copy (important features for web fonts).
Overall Design
I kept the idea of having “Book Cover” above the fold, but I turned it into a video to provide maximum impact as soon as the users land on the site. Showing people in lovely places using Herschel changes user's mood to explore more the brand. Also videos work well on all devices since the layout can remain unchanged despite the viewport size.
Responsive Web design has been very popular, so the new layout has to make every experience look great no matter the viewport size. My proposal is to make the website an app-like feel with responsive menu that works for all devices. So, instead of the standard top navigation bar, I opted for a vertical menu that acts more like a slide out menu to keep the overall design clean and functional.
Since I am suggesting a hidden responsive menu, I decided to make the current tiled navigation more prominent because images recreate the feel of walking into an actual store. Besides that, in order to avoid the tiles navigation becomes too boring, I pushed the layout further with irregular elements.
I kept the idea of the ghost buttons to attract user's attention in a subtle way without taking away from beautiful background images. Also decided to keep the design flat to provide a clean look and be easily scaleable and manageable. Icon fonts and .svg files are great examples of elements that work really well on this flat design.
