Design Shack — Web Design Gallery, Articles & Community

Every week we take a look at a new website and analyze the design. We’ll point out both the areas that are done well as well as those that could use some work. Finally, we’ll finish by asking you to provide your own feedback.

Today’s site is RunAddicts a blog for anyone who loves to run.

If you’d like to submit your website to be featured in a future Design Critique, it just takes a few minutes. We charge $24 for critiquing your design – considerably less than you’d pay for a consultant to take a look at your site! You can find out more here.

About RunAddicts

“Some time ago, I picked up the wonderful habit of running. Although I was a self-proclaimed couch potato, only after a few runs, I started noticing major endurance improvements which motivated me to take running seriously. Few months later, I decided to share my new passion with the world. As a result, RunAddicts, a professional blog about everything related to running, was born. Powered by multiple world-wide professional writers, RunAddicts will take you through years of experience, advise and other essential tips and tricks related to running any individual should know about. (RunAddicts’ design has been featured on major design galleries like SiteInspire and Creattica)”

Here is the RunAddicts homepage:

As you can see, this is definitely a professionally designed site with a lot of great elements. Let’s break it apart and examine it piece by piece.

Header

The header is one of the most attractive portions of the page. Functionally, the header reads perfectly with the logo being the big attractive element on the left that catches your attention followed by the navigation on the right exactly where you would expect it to be.

Here’s a zoomed in shot of that great header graphic. I love the swirling water and the big red stripe. These combined with the choice of font really convey a sporty feel. Notice how the designer is conveying various parts of the running experience (water and the road) without taking the theme too literally.

The Primary Content

The homepage is broken up into various modules. This allows for a lot of content to occupy a relatively small space while each piece still remains as a clearly separate entity.

As much as I like the idea of the modules, this area admittedly looks a little cluttered. Again, the point is to cram a lot of information in here but I feel that it has almost been taken too far.

I would suggest experimenting here with a reduced number of models that individually receive more attention than is being given to each due to the slightly laborious task of visually sorting through the content.

Latest Post Module

Individually, I really like the design that has gone into some of the modules. For instance, the “latest post” area is a simple but attractive piece of work. The large photo really captures your attention and I love the title and author overlay that doesn’t stretch to 100% of the width of that box. I know I would’ve instinctively dragged those edges out but I think this look is much more unique.

Notice the strong repetition of the color scheme being used in creative ways. The black red and white are mixed into every module, often in different ways.

The Right Side

With the left side looking so attractive, I think it’s the right side that really contributes to the cluttered look that I mentioned above.

Unfortunately, I can see how the elements here are fairly mandatory. The ad space and the Facebook section are functionally necessary even if they’re aesthetically lacking.

A primary goal with the module design is to make them all look like similar pieces to a greater whole. This area is noticeably a jumble of pieces that don’t quite go together. Again though, this might have to be a case where functionality trumps design.

Category Modules

Back to the left side, the category modules near the bottom are perfect. I love the visual repetition and how it clearly makes these four modules a single visual cluster.

The photography used here is quite attractive and not too stock art-ish. Notice how much empty space has been utilized in the white area. This gives that content room to breathe and makes this area much easier to read.

The hover effect on these article titles is really nice. The background changes color and the title moves to the right all in a nice smooth animation.

Bottom and Footer

The bottom of the page finishes strong with some nice, big modules that provide a good base to the site. This illustrates what I was saying before about how well it works to have fewer modules with more emphasis on each.

The “write for us” section is particularly nice and definitely grabs your attention by violating the visual theme of the other modules while closely maintaining the look of the overall site.

I also like the styling of the Twitter feed here. I think it’s much more minimal and appropriate than the Facebook area above. However, proximity is a major concept in design and the general rule is to place similar items together. It’s a bit odd to have the Twitter feed on the bottom while all the rest of the social media information is up at the top. Notice this has been slightly addressed by the inclusion of another Facebook mention just below the Twitter feed.

I really love the footer design and how it brings back the water theme from the top of the site. I’ve said it all throughout the critique, the designer has a really strong grasp of how to use repetition to make a design feel cohesive. It sounds like a simple and obvious principle but if you read these weekly critiques you know that it is a major area of weakness for lots of designers.

Your Turn!

Now that you’ve read my comments, pitch in and help out by giving the designer some further advice. Let us know what you think is great about the design and what you think could be stronger. As always, we ask that you also be respectful of the site’s designer and offer clear constructive advice void of any harsh insults.

Interested in having your own site critiqued? You can find out more here.