Web Design Critique #67: StyleJam

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 in addition to those that could use some work. Finally, we’ll finish by asking you to provide your own feedback.

Today’s site is StyleJam, a site that hosts web designer portfolios. Let’s take a look and see what we think!

Want us to take a look at your site? Submit it to be featured in a future Design Critique, it only takes a minute. We charge $49 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 StyleJam

With StyleJam you can create your personal web design portfolio on a standalone URL that you choose, and customize it with your CSS and images. No need to learn programming, sign for a hosting service or configure your server. The only thing we don’t do for you is designing, that’s your field.

Here is a screenshot of the homepage:

screenshot

Initial Impression

My first impression of StyleJam is a positive one. There’s a lot about this site that feels very modern, the overall design style is right in line with what a lot of designers are going for today. It’s a clean design that utilizes plenty of whitespace and uses blue to convey a sense of professionalism.

Overall, it’s off to a great start. There are however a few small issues and suggestions that I have. Let’s go through the site bit by bit and see what these are.

Site Logo and Tagline

screenshot

One of the first things that catches my attention when I look at this page is the logo, shown above. I wouldn’t call this a high priority, but I will say that I definitely think that this could use a rework. The VAG Rounded style font seems a little dated and the paintbrush isn’t working for me. It makes the word “jam” difficult to read and looks a little cartoony, which seems to contradict the professional style that the rest of the page follows. Put a different way, the logo stands out on the page as something that doesn’t quite belong.

The tagline in the site’s title bar and logo is another thing that doesn’t quite seem to work. The phrase “Web designers. United” makes me think that this is some sort of membership club, guild or union for designers. It’s a good tagline, but not for this business, which is selling web designer portfolios.

I suggest replacing this tagline with something that clearly communicates what the service is. If you asked one hundred people what a site with the tagline, “Web designers. United” does, I’d wager that hardly anyone would guess that they sold portfolio websites. Use this criteria when discussing a new tagline.

Main Header

screenshot

Next up is what I’ll call the main header area. This is a big blue bar with an inset effect and a hint of texture. It’s a nice effect that really draws your attention. The little banner at the bottom is a nice touch, though white on white makes for almost no contrast.

My main issue here is an unmistakable sense of emptiness. There’s a huge space here that simply feels underutilized. It’s begging for a big image, large headline, or both.

I constantly use Mail Chimp as an example because their designers are usually so spot on. Check out the header that’s currently on their site.

screenshot

Look at that big colorful image grabbing your attention and then being reinforced by a crystal clear oversized message: Easy Email Newsletters. In under three seconds of loading this page I know exactly what the site is for. Back to the StyleJam header, all I see is tiny text in a big blue field. Nothing here grabs my attention.

I’m not saying StyleJam needs a mascot, don’t see inspiration as something to rip off. Instead view the Mail Chimp page as a lesson in basic design principles. Taking these suggestions, the StyleJam header design might transform into something like this:

screenshot

Obviously, you’d still need to work in the social links, input box, etc. but you get the idea. Visually, the header could help the page a lot more than it currently is. Also, while we’re on the subject of the social links, these buttons have the appearance of being in an inactive state. Even when you hover over them, your cursor doesn’t change. I’d make the Facebook and Twitter icons blue instead of white, add some contrast to the text and fix the hover problem.

screenshot

Image Slider

I always like a good image slider and this site features one in a very attractive frame right under the header. The effect is nice and gives the page a dynamic feel. However, the imagery chosen for the slider may not be the best. For instance, here’s the first thing you see:

screenshot

Upon seeing this, I admittedly thought that something was broken. There was this awkward text field floating in the middle of the page that was being partially cut off on the right side. It took me a minute to realize that it was only a screenshot. I suggest ditching this image and going with more visual content like the slide that is currently in the second slot.

Conclusion

As I mentioned before, I actually like the overall look of this page. It’s an attractive site that gets a lot of important aspects right. The suggestions above are mostly minor, quick fixes, some of which are largely subjective.

The main thing here is to get your message across clearly and attractively. Right now the messaging seems a little fuzzy and it takes a little work to figure out exactly what’s going on with the site. Reduce that work to almost zero and you’re guaranteed to increase your click through rate.

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.