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.
Patrick Samphire May 21st, 2008 at 9:43 am
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?
Brian May 21st, 2008 at 7:46 pm
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.
tony May 21st, 2008 at 9:06 pm
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.
Patrick Samphire May 22nd, 2008 at 6:28 am
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.
slydell August 27th, 2008 at 1:46 pm
hey this is a great design. your site is great too.
slydell, web developer
guyana
Ryan Battles September 10th, 2008 at 5:53 pm
Tony, I am impressed with your designs and skill! Thanks for taking the time to write about your design decisions. I will surely keep your RSS feed in my reader to find continued inspiration.
Sharon Bassett September 24th, 2008 at 8:58 pm
Hi Tony!
I found what you have written here to be quite helpful. I have been trying to study up a bit on grid-based design over the last couple of weeks and it is nice to see a real example.
I understand the fundamentals of the design layout and now I am just trying to muddle through the CSS from a development standpoint. I just downloaded the sample files from 960 (http://960.gs/) and so I might have question or two for you over the next little bit of time.
Hope things are well!
Sharon
Charlie Parmentier November 12th, 2008 at 2:14 pm
Nice design indeed. Thanks for sharing your thinking behind it.
Great work, very well done.
On a different note, I’d just like to say what a small world this is though…
I happen to work for David Gaiman, (Neil Gaiman’s father) who owns a vitamin and food supplement company, based in West Sussex (UK).
I stumbled across your website completely by pure coincidence!
Tony November 12th, 2008 at 3:26 pm
Thanks Charlie, and it is indeed a small world, I’m reminded of that very often : )