In Progress: Site Design
Last time with “In Progress: Logo Design” we talked about the client project I’m working on with Cameron Moll for the design and rebirth of the National Gazette, a previously-defunct newspaper more than 200 years old. After some revisions, the client decided on the logo direction—which you can now see on the placeholder site—and we proceeded on to layouts for the site design.
Cameron and I decided early on to show the client a good range of options. Because we realized that based on the direction, our designs might overlap a bit. Sometimes this can be a beneficial path to take. We figured that we might end up borrowing certain ideas from each comp after the first round of design anyway. I’m not usually in favor of “Frankenstein-ing” designs, but we agreed that ideas could likely be shared from our similar design sensibilities based on what was successful.
With that in mind, we tried to work both sides of the fence; I went with a design for 800 x 600 and Cameron went with a design for 1024 x 768, I experimented with using a background image for the page and Cameron went with heavy whitespace (and a more literal newspaper look), and those are just a couple of the differences. By looking at both you can see we were trying to cover a few subtle variations in style and structure to give the client some options.
As is fairly customary, we presented mockups for two site pages (per each direction) for the client to get a pretty thorough idea of each design direction. Here are my proposed designs for the National Gazette Home Page and an Article Page.
On my design, I went with a fairly basic, but flexible, column and grid structure. The outer columns are wide enough to support some common advertising sizes and the inner four columns are modular enough to support a good number of layout options (always a good plan for a editorial site). It’s amazing how much a copy-based site can feel like a blog just by it being fixed-width and optimized for 800px wide screens. Perhaps this is just because the proliferation of blogs in general has lead us down that path. I think I did a good job of breaking out of that by including the two columns of content in the middle topped with the larger feature story. I usually try to avoid drop-shadowed and similar column treatments, but I like how the background pattern turned out. It helps give the page a softer aesthetic and hint at a tactile, newsprint type of feel. This is essentially a newspaper, and that was one of the things the client really wanted to convey in the visuals. I tried to do this by limiting the palette to just some basic colors, and really only using color for emphasis and separation. The middle columns distinguish themselves from the rest of the page by picking up some of the reds and blues, helping to draw readers into the content areas and get them to the latest information.
Once again I feel the need to stipulate that these are pitch designs and as such some edges are rough. Some of the content and imagery we used is mock or otherwise not final. We are sharing them because we learn and enjoy seeing how other designers work, so we figure others might benefit from our efforts. Comments and criticisms are welcome of course, but please refrain from being irate or otherwise rude, because there is a lot of client-time and conversation you have not been privy to. We felt made the best decisions we could with the information and resources available to us at the time. Okay, enough for the disclaimer.
That’s about all I’m going to say about the design for now. Though, I will add that neither of our designs were chosen outright. The client liked both directions very much, and so did we. It’s always uplifting when you feel strongly about all the work you are presenting (the same way we did when we pitched the logos). So, you will just have to wait and see what design was chosen when the site launches.
In the meantime, check out Cameron’s site and read about his design for the National Gazette website.