It's Raining Outside

December 18, 2009

Design

Graphics, Colors & Fonts: 5/20 points

The graphics are super in-your-face, which isn't always a bad thing. In this case, though, the background pattern is way too intense and distracting. It absolutely detracts from the content of the site which should be the primary focus. As always, I love Century Gothic, but it seems out of place here. Be careful when designing your templates that you don't fall into the very common trap of "I put it there because I liked it." A powerful design needs more than that, it needs a logical reason. Most designers start off with, "I put it there because it needed something. I don't know exactly what, but I knew it when I saw it." Over time, that feeling evolves into a concrete logic: "I put it there because Century Gothic complements the sleekness of the template, the soft muted colors, and subtle graphical accents. I used Century Gothic as an accent font, only in the navigation and headers. Body copy was Arial, because it's a soft, sans-serif font that fits well with the design, but it limits the exposure of Century Gothic and is a bit easier to read."

Basically, when we're starting out with anything artistic, especially when it's something we're creating for ourselves, we go through similar phases. Little kids will wear weird ass outfits and love them, because even if everything all together looks like a tiny, colorful tornado, they love every individual article. I can't wait to see you evolve further as a designer and get to the phase where you find something you love and you save it for the perfect template. It's a gradual realization but it will happen.

The colors in this piece don't really exist. The placeholder image is just a placeholder, so I won't really speak to that (and I'm imagining any sort of art in there – a mix of colors, sepia or black and white, all are fine). But the navigation is this bright cornflower blue that just doesn't fit with a faded background image of black and white diamonds. My suggestion to you is to pick one thing that you absolutely love and create a template around that. Build a template around black and white diamonds. Build a template around Century Gothic.

First Impression: 5/10

Oh, my eyes. The diamond background pattern is huge, and fades out. I imagine this template is what would happen if Harley Quinn and The Joker got in a knife fight and Harley Quinn lost. I'd love to have you explain some of your reasons for choosing the elements that you did and talk to you about them. If you want to add your thoughts in comments, that would be way cool. What jumped out at me right away was the odd alignment of page elements. The top banner and navigation are centered, but the content is fixed width left aligned, which looks very weird on larger resolutions. Even though this is clearly designed for a smaller resolution, the top banner is huge, even on comic pages, which means visitors are going to have to scroll almost an entire screen to get to the content.

I completely understand that because it's a comic site, the banner should be large, and I agree – on the front page. On inside pages when people are looking at content, it should be smaller, if possible. I LOVE the latest comic thumbnail effect, and I think it's a great addition to just about every comic site out there. However, there's virtually nothing to make it stand out. It seems to be floating in a white void, adrift from content and headers. It's far enough down the page to seem like an afterthought, though I'm sure it's not – it's too critical to be.

Composition: 5/10 points

The strange alignment issues, the long banner image that's also 200+ pixels smaller than the content of the page – I'm puzzled by all of this. It's jarring and doesn't feel like it was thoughtfully planned or laid out.

Resolution: 0/5 points

This looks wacky on anything over 1024×768. Strangely, you restrict the top banner to 700 pixels wide, making it smaller than the rest of the page content. I'm curious as to why you did this, perhaps to emphasize the background image? One suggestion for templates that aren't entirely fluid width (but do have centered elements) is to create a container div with a set width, and center that:

#container {width: 974px; margin: 0 auto;}

Originality: 5/5 points

I have never seen anything like this before – you're quite right

Function

W3C Valid HTML and CSS: 20/20 points

Hot dog, congratulations! There were no errors on your part, either in the HTML or the CSS. Well done!

User Interface: 5/10 points

There were a few issues with this – the limited, tough to read navigation that was oddly positions below the giant top banner, the floating latest comic thumbnail, the tough to read/oversized content, it just wasn't where it needed to be to get full points on this one.

Cross-Browser Compatibility: 3/10 points

It's almost a given that something's going to be off in IE6, but this does some wacky stuff in IE6 and IE7.

Load Time: 5/5 points

No funky scripts or jumbo images blocking things up. Full points here.

User Experience: 2/5 points

It's just so tough to look at with that background.