Design Critique: Josh Dick’s Portfolio Site

Posted: 03 May 2012 05:30 AM PDT

What’s the best way to present your personal site and the portfolio of projects you’ve worked on? Is there a right way? Probably not, but today I’m going to look at how one person designed such a site and offer my thoughts and opinions about what works and what could be improved.

Josh Dick is a software developer and by his own admission doesn’t consider himself to be a designer. He asked if I’d critique his site as I’ve done a few times for others these last few weeks. You can find the previous reviews below.

As I did in the posts above, let me remind you again that the point in all these critiques is to get you to do the same. There’s a lot of value in taking a critical look at the work of someone else. If you genuinely put in the effort you can learn more about your own work and improve your design skills by taking a deep look at someone else’s site.

Quick Thoughts

As always here are a few quick thoughts without much in the way of explanation. Starting a critique this way is an easy way for you to get into it as you’re simply jotting down a few thoughts that will lead to deeper exploration.

Why is site a frame within a frame?
There’s a large script included in html. Why isn’t it an external file?
Where’s the color?
Where is the context for the site. Perhaps some text on home page.
The site loads quickly.
I like the transition between page turns

3 Things I Liked

Typography — It’s clear that some care has been put into the type. Puritan was chosen as main body font and Arvo was chosen for the header font. Neither is standard. I dare you to find them on your computer right now. Clearly there was some conscious thought put in to choosing both.

Additionally there’s a variety of line-heights used throughout. The header text is set to look like letterpress. When looking through the css files I see css properties like text-shadow, word-spacing, and letter-spacing used as you can see below.

  .arvo {    font-family:'Arvo', Rockwell, serif;    font-weight:400;    text-shadow:0 1px 0 #FFF;    letter-spacing:0;    word-spacing:0;    line-height:1.2;  }  .puritan {    font-family:'Puritan', Helvetica, Arial, sans-serif;    font-weight:400;    text-shadow:0 1px 0 #FFF;    letter-spacing:0;    word-spacing:0;    line-height:1.2;  }

All this care helps make for a site that’s easy and pleasurable to read.

Experience — The simplicity of the design, and the css3 transitions give it a pleasant experience. I especially like the transition for page loads. It feels very smooth and doesn’t make me feel like I’m waiting for page to load.

The buttons and links also transition on hover. None of this is overdone, but instead offer a good example of how a few transitions can really impact the experience one gets using a site.

Layout — Page elements align well and it looks as though there’s something of a column grid below the surface. The left column takes up ⅓ of the layout with the main content taking up the other ⅔. It doesn’t look like there’s anything more to the grid than these 3 columns though they’re more than enough to provide a framework to build on.

Everything generally feels well organized and aligned here. There’s strong left edge down the content of each page, though this could be improved some. The use of the vertical line between menu and content also helps pull the eye down the page and helps strengthen the strong vertical edge.

3 Suggestions for Improvement

Typography — While I like the conscious consideration given to the typography I noticed one area when it could use some improvement. The measure. The site’s layout is flexible. It looks as though it’s ideal width is 960px, but the content area is allowed to expand and contract. Flexible is good, however here and there it causes some issues in the measure.

On wider screens as the content area grows the measure starts to get uncomfortably long. You can compare the 2 images below to see a long measure with browser maximized and a more compact measure as browser size is reduced.

There are a couple of relatively simple fixes which can be applied.

Set a max-width on the paragraphs or some other container for the text
Increase the font-size once the page gets above a certain width

The first will limit how long a line of text can grow ensuring the text never grows to an uncomfortable reading measure. This would lead to some additional whitespace, which would likely be fine. If the whitespace were determined to be a little too much, the blocks of text could be shifted within their container to balance it or the menu column could be allowed to expand.

With the second a media query breakpoint could be set where the measure has grown a little too large and above this point the font-size could be increased to keep the measure comfortable. The line-height might also be increases at the same time the font-size is increased.

The situation is similar as the screen becomes narrower. In the narrower case a max-width solution doesn’t exist, but the menu column could also be made more flexible to allow it to contract and media queries can also be used to change some of the type values.

Frame within a frame — I think this needs to go. The additional scrollbar serves no purpose and only makes scrolling more difficult as it requires more control over where the cursor is located. I think this one thing detracts from the experience as much as the items mentioned above enhance it.

The suggestion here is simple. Break out of the container. Remove the arbitrary wall around the page. Instead of the site being designed inside this extra container, let the container be the browser window. I don’t see any reason why this wouldn’t be possible and think it would the single biggest improvement the site could make.

The main issue is the vertical foundry requiring the extra scrollbar. If the height of the page wasn’t constrained the additionally scrollbar would go away increasing the overall experience of using the site.

Color scheme — Outside of an image here and there the colors of the site are mainly shades of gray with blue accents for links. I think Josh has handled the colors well. They work well together and look good. However is this scheme the most appropriate choice?

I ask because I think the site might be trying to be two things at once. Josh identified it as his personal portfolio site and I’d think the main goal of the site is to show prospective employers what he’s capable of doing. The subdued color scheme and the link to a resume suggest a corporate employer.

All good so far, but I asked myself why is music featured so prominently? Does it fit with the corporate picture? Similar for the illustration of Josh on the home page. There’s certainly nothing wrong with showing this aspect of Josh’s personality. However this one part of the site seems to clash with the color scheme.

If the purpose of the site is specifically to seek employment I’d de-emphasize the music, possibly removing it from the navigation. It could still be present on the site, but not featured so prominently. It could be done in a more “here’s some additional things about me” way. I’d probably remove the illustration as well.

If the site is trying to show more of the personal side of Josh, then I think it could benefit from more color. The gray scheme says corporate. The inclusion of music and the illustration says anti-corporate. The two conflict and one should give way to the other in order to create a more cohesive whole.

Summary

Overall I like the clean and simple look to the design and really enjoyed the subtle use of transitions to provide for a more enjoyable experience. It’s nice to see someone paying attention to typography and flexible layouts.

I’d like to see the layout go a little further in it’s flexibility and introduce media queries and flexible media. With a little bit of extra work it could become a fully responsive site, which I think could improve a few potential type and layout issues.

The only real negative to me is the frame within a frame set up. It takes away from the experience and unless I’m missing something I don’t see any reason why this set up is necessary. Break out of one container. The page could still be centered within the window and remain the width it is now.

I’d also like to see the conflict between the corporate and anti-corporate message resolved. One or the other should be chosen as the main message and then the other subdued or eliminated.