Web Design Hot Seat: A La Mode and Meat Shield
This is the fifth installment in the Web Design Hot seat. Same rules as all of the Hot Seat critiques. I’ll discuss the participant’s work and then open the conversation up to the group at large. Each header contains a link to the comic’s Web site, and each image is a thumbnail you can click to see a larger version of the image.
In terms of a review, here are the basics I’m looking for in site design:
- No wasted space at the top
- The comic placed in the most prominent position
- Navigation buttons as close as possible to the comic (not separated by a line or placed closer to the blog than the comic)
- Important links placed prominently
- Blog appears on first screen (for most screen resolutions/displays)
- At least two ads on the first-screen view
This site design could be improved overnight by taking that list above and addressing every one of them, one at a time. This design has problems in almost all of the above six areas (except #2 and #5).
That header wastes a lot of space. Quick fix: Separate the two rows of links and convert it to a single, horizontal row of links under the header.
The header itself has a computer font, but the comic looks hand-lettered. I’d like to see the header reflect the look of the comic more closely.
Those navigational links don’t relate to the comic itself. Quick fix: Put them in a horizontal row across the bottom of the strip, centered.
My HTML isn’t very strong, but putting the entire site design into a single table would keep all of these elements from spreading for different browser-sizes. I’m sure there are even better solutions.
Here are some things I’d like to see changed.
First of all, Notice that house ad? It has a background that’s very similar to the background image used on the site. That seems like a good idea, bit it creates an awkward hole-punched-out situation with the white box that separates the background from the foreground items (like the comic, buttons, etc.). I’d actually avoid using house ads that pick up the site background.
I’d like to see the lettering for the upper row of navigation bumped up. It’s easily lost right now. See what you think of using all-caps, while you’re at it (same with the comic-navigation links below).
Finally, everything holds together rather well near the top of the site, but it falls apart under the comic-navigation rows. And, mostly, it’s because there’s no visual organization down there. There are three columns of content, but nothing delineating one from another. You could fix that in a jiffy by giving the central column a background color.
Finally, elements that stack in a vertical column should have the same width. Otherwise, it looks sloppy.
Here’s an idea of what I’m thinking of.