Web Design Hot Seat: Calamities of Nature
Tony Piro, of Calamities of Nature, has bravely volunteered his comic as a test subject for the Web design hot seat. Luckily, he’s got a pretty tight site design, but we’ll do out best to workshop it. For the record, what you see below is the “first screen” of the site as it loaded on my screen (1152 x 870).
- The header is very nice, and it presents a very nice tone for the site. However, it takes up a lot of real estate. This space is tailor-made for a leaderboad ad (in which case, you could use the illustration as a background and keep the logo to the left) or it should come down in depth.
- I’d also shrink this somewhat. It’s not incredibly important information for the readers.
- I’d prefer seeing navigation buttons centered, below the comic.
- Again, this is big for what it accomplishes.
- These are useful. Putting them closer to the comic would make them more relevant and free up space.
So, I’ve rearranged the site somewhat. Making only minor adjustments, I opened up a significant amount of space at the bottom of the “first screen.”
- Assuming Tony would be running a leaderboard already is he wanted to, I’m going to assume he doesn’t. So that header has to shrink. I only brought it down a smidge. But it doesn’t take much to open up vertical space.
- The title and the copyright (both of which have also been reduced in size) move to the top.
- The navigation buttons move to the bottom, centered.
- This allows the Share/Steal/Comments links and the Archives dropdown to move up to just beneath the comic, which opens up still more space at the bottom of the site.
Overall, this is a really strong opening page. Particularly strong are Piro’s use of color to invoke mood. Notice, he keeps the same color theme in the comic itself as well as throughout the site — in the logo, header, buttons, site ads, etc. Same goes for Tony’s font choice. Very strong, and very consistent.
Also, check out the extras Tony’s offering his readers: E-mail delivery, Searchable text, a Facebook app, print collections… all of which are nicely organized along the left hand side of his layout. The blog is in a standardized location, which is good, and he’s leaving nice space for a skyscraper ad.
All of these things would benefit from moving higher on the screen.