Design Critique: Nox Requiem

Posted: 12 Apr 2012 05:30 AM PDT

Last week I talked about giving feedback to others and how critiquing someone else’s website could improve your design skills. At the end of that post I made an offer to critique your site and a few of you took me up on that offer. Here’s the first of my promised critiques. I’ll get to more in the coming weeks.

Let me begin by reminding you of a few things. First this is just my opinion. No one should assume anything I say here is gospel about how to design a website. Second as I mentioned last week the point of this exercise is mostly to do the critique yourself. I think if you put the time into it you’ll find you get far more out of critiquing the work of others than you will from any feedback you get on your own work.

The only way to find that out though is to critique the designs of others. It’s one of those things you’ll have to experience for yourself to understand its value.

The Rules

A quick reminder about the rules of this exercise. It’s based on an exercise I learned in a writing class many years ago. The first part of the exercise asked us to do 3 things.

Underline anything you liked
Draw a squiggle under anything you didn’t like
Circle anything you thought was a grammatical error

None of these marks were to be explained and I suspect they were mainly to get us into the process of thinking about the work.

The meat of the exercise asked us to list 3 things you liked about the work, followed by 3 suggestions for improvement. It’s not so easy to underline, squiggle, and circle web pages as it is a short story though it’s certainly possible.

I think for the sake of this post it would be a bit much to grab a screenshot of every page and mark the images up, but it could be done and maybe it’s something you should do for an occasional site if you really want to take this exercise seriously.

Critique of Nox Requiem

James was the first to chime in asking for feedback on Nox Requiem, which offers a collection of dark art, Halloween photography, and ghost stories. With that little bit of information in mind let’s get to the review.

In lieu of all the markings above here are a few quick things I noticed.

The Facebook button isn’t displaying in Safari
The social buttons on the home page distract a bit from the overall mood the page is trying to set
I’m not sure if the title/domain is a reference to anything, but it sounds like something out of a ghost story
The text below the images on home page isn’t clickable though they give the appearance they should be
At smaller browser widths the text on the contact page doesn’t flow well around the form, becoming a column of single words

Let’s get to the good stuff.

3 Things I Liked

1. Color Scheme — Given the topic of the site, the mostly dark color scheme fits well. We’re dealing with spooky stuff here and so it makes sense to keep things dark. Red works as an accent color due to associations with anger and violence and blood.

Color was the first thing that struck me when I visited the site. The home page features 3 gray scale images, one for each section that enhance the dark mood being conveyed. While not specifically about color, I think all 3 image subjects are also chosen well. They make it very clear what the site is going to be about.

2. Navigation — I like how the navigation works in general and how the links work on hover. With the 3 images on the home page, the ones not chosen fade some and recede into the background, making the chosen image appear brighter.

This is actually reverse with in content links that do get brighter while others remain the same. In either case it’s a clear indication of what’s about to be chosen and I think the transitional effect of the change works well too.

On interior pages the menu and social buttons share a similar pattern in that they remain faded and out of the way, though still visible, and then brighten when hovered on. In being faded by default they don’t pull attention away from the content, though they’re easy to find when needed.

3. Responsive Layout — I like that the site has a responsive layout and think it’s done well here. Page elements realign themselves in a way that makes sense, keeping the focus on the content.

At smaller widths, the social buttons go away, though it might be good to find a place for them, and the menu drops down below the content. Necessary links are still present at the top (most of the time) to allow for easy navigation across devices.

3 Suggestions for Improvement

1. Image Galleries — Images across the site currently open in a new page, though they aren’t particularly large. While I don’t know for certain I’m guessing larger versions exist and the smaller sizes and watermark on each image are to prevent copying and redistribution.

I don’t think this is necessary and the site would stand to gain more by presenting the best images possible. They’re good images and deserve to be seen. Showing more detail and allowing the images to be shared across the web might lead to a few copyright violations, but it would more likely lead to word of the site spreading further and bringing much more back in return.

Because each new image page has limited textual information (more caption than full page copy), I think the images would be fine opening in a modal window to their larger versions. If additional pages exist to grow out the site and attract search traffic, I’d suggest offering more copy on each page.

2. Responsive Layout — As I mentioned above I like the responsiveness of the design, however I think it could be improved. As the browser gets smaller the layout adapts well. As the browser gets wider the content area doesn’t expand as much as I think it could. The main content area never expands beyond 650px or so.

I think the 650px width makes for a good measure for the text and I don’t suggest increasing the width, unless the size of the type is also increased, which could make reading light on dark a bit easier.

On gallery pages the images could be displayed larger. Perhaps the caption on the images could sit to the right or left of the images instead of below. The extra space could be made more active.

3. Could the Site be Scarier? — I’m probably reaching a bit here, but I tried to think of ways to increase the scary factor. I doubt many of these would be simple to implement, but they’d probably be fun.

Perhaps some scary surprises:

Red blood dripping down from the logo or any red text.
An occasional scream of terror. This might not be a good idea for people visiting the site at work or in other public places.
Perhaps instead a low and erie sound track playing in the background.
An occasional apparition could float across the screen even turning to menacingly face the reader. Any of the usual creepy things like spiders, rats, and bats could also make appearances.

The last one could easily become cheesy if not done well, but could be made to work well with some care.

One more that probably isn’t doable in any easy way, but here goes. What if the background of the site changed depending on where people were in reading a story. For example in the story Arrival at one point the narrator is leaning against the railing of a bridge, which is pointed out to be rusty.

Wouldn’t it be fun to see a pattern of rust growing in the background as you read that passage. It could start of small and mostly invisible, becoming more and more visible as it grows. As the reader scrolls past the paragraph describing the railing, the rusted railing might break off and fall off the page in some way, perhaps even taking some of the now read text with it.

While much of the above isn’t necessarily easy to code, I think interactive elements like these could be fun and enhance the mood of the site. Hopefully some of these ideas have given James some additional ideas he thinks worth tackling.

Summary

Overall Nox Requiem is a nice job by James, who probably didn’t need my feedback. I know I’m saying it a lot, but again I want to point out that the value in this is really for the person doing the critique. For example in reviewing James’ site I had the opportunity to

Think about the emotional importance of color
Consider another interesting idea for handling global navigation
Decide how to better locate social media buttons
Come up with ideas on how to display images and image galleries
Take another look at responsive layouts and how page elements adapt to different screen sizes
Generate creative thoughts for aesthetic and interactive touches to enhance a site and make it more enjoyable to visit

How much I get out of the above is up to me. The more you put in, the more you get out. The critique offers a directed opportunity to think through different aspects of design.

Give this exercise a try with some sites you come across. You don’t have to send your critique to the designer. This is for you. Take an in-depth look at a website and take notes while you look over it. Then list what you like and why and think about how you could improve the site.

Better yet get together with a group of designers and each of you run this or a similar exercise for everyone in the group. That continued giving and receiving feedback will only help improve your designs.

Out of curiosity have you ever done something like this? And if so did you find it helpful?