Designing The Graveyard Book website
This is the second in an ongoing series of posts where I explain some of the decisions I made while designing one of my recent projects. This post is going to be focusing on the site I did for Neil Gaiman’s new book - The Graveyard Book.
Bill from Subterranean Press emailed me all of the artwork and asked me to create a site, so I had a lot of freedom with the design. One of the advantages of working with a client who you’ve done work for before is that they already know your style and what to expect. To say that I was excited to work on this project would be an understatement.
Initially I wanted to go with a completely dark site as I thought it would fit the theme of the book. However, this posed a problem because the interior illustrations are all in black and white. I decided to go with a dark sidebar to keep a darker look, and the main content area white so that I could utilize the illustrations.
Grid Goodness
The grid that I used for this site consists of twelve 60px wide columns and eleven 20px wide gutters, but I also added a 25px padding to the left column to give the layout some room to breathe making for a total width of 965px.
I would usually have the sidebar take up 1/3 of the width of the site, which in this case would have been 4 columns, but I instead chose to utilize 3 columns and have the knife take up the fourth. This way the content takes up the other 2/3 and the page is well balanced.
The screen shot shows how the masthead area changed from a very early stage to what’s currently there. I decided to flip the image of the boy horizontally so that he wasn’t trying to walk away from the site anymore. And to balance it on the left I used the image of the baby, but sized it down a bit so they weren’t both of the same height and extended the line to the left. I found that the worn background image was also too distracting so I decided to remove it.
To make the header a bit more interesting I used a character from the Nat Vignette One family.
This comparison shows an earlier version of the sidebar. I decided to change the background of the headers to something that more closely resembled the current and hover states of the navigation items. I also used images with a drop shadow to “lift” the text a bit. Even though it was in the Photoshop comp, I decided not to use the large double quotation marks in the blockquotes for the reviews because it looked slightly off with the right aligned text.
That’s about it for this post. Hope it was helpful.
This entry was posted on Monday, May 19th, 2008 at 5:41 pm and is filed under Design. You can also view the archives for a list of all categories and posts. You can also subscribe to the RSS feed.
Patrick Samphire says
Nice. Very imaginative use of the grid. I’m wondering about the choice to centre the text in the header and below. I can’t completely decide whether I like it or not. What was your thinking there?
May 21st, 2008 at 9:43 am
Brian says
I think it looks good. I love the comparisons between the old and new.
I definitely think you should continue this series of explaining your designs - but you should go more in depth - after all you only covered two aspects of the design! But great post overall, I look forward to seeing more.
May 21st, 2008 at 7:46 pm
tony says
Patrick: Thanks. You know, I never even considered left aligning the text on the right hand side. One reason is that, in the masthead, I wanted to have the words aligned similarly to the words on the cover of the book. Having a flush left layout in there would also create conflict with the jagged right outline of the knife. Having the text centered would hide some of that. After this it would have looked odd to left align the intro text, so I ran with it for most of the rest of the content.
The columns also worked conveniently for me to have a decent sized image of the cover art and to have it centered.
Brian: Thanks! Halfway through I started to wonder if there really was an interest and I decided to cut it a bit short.
May 21st, 2008 at 9:06 pm
Patrick Samphire says
Thanks, Tony. That makes perfect sense. I think you’re right that aligning to the left would look wrong, but it’s really interesting to hear your thinking.
I’ll echo Brian. I’d be very happy to read more of these.
May 22nd, 2008 at 6:28 am