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.
{code type=css}
.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;
}
{/code}
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.
Download a free sample from my book, Design Fundamentals.
Steven,
The design critiques you’ve written over the past several weeks have done a great job to illustrate the thought processes to use and kinds of questions to ask when critiquing designs.
As for your comments on my design, they were very interesting to read, and they all have merit!
In case you or your readers are curious about some of the design decisions I made, I’ll address some of your points:
*Inline JavaScript*: I realize that defining the JavaScript inline instead of inside an external file prevents the browser cache from doing its job and potentially makes the source code harder to read. I did this consciously, because some parts of the JavaScript are dynamically generated on the server side to get the fade transitions to work while still allowing for normal-looking URLs via the HTML5 History API. I should have put more effort into refactoring the JavaScript so that the tiny dynamic parts can appear inline and cooperate with static JavaScript in an external file.
*Frame within a frame*: I went with this for two reasons. I wanted the simple navigation buttons to be visible at all times, and I wanted there to be a way to include some color (gray) while still keeping the text readable on a white background. Looking back, I agree that the double-frame concept wasn’t the best choice. I could have used floating navigation to address the navigation issue. The double-frame concept also hurts the reading experience on mobile devices and makes it more difficult to add future responsive-design tweaks to the site (which I definitely agree are needed.)
*Color scheme/message*: I agree that the color scheme says “corporate” and that that message potentially conflicts with the music section/picture on the front page. This is the fourth major revision of the site’s design that I’ve done (it’s how I learn!), and with each design I’ve tried to keep the message consistent. The primary purpose of the site is to show people who stumble onto it the projects I’ve worked on (especially if they found the site through one of those projects), so I wanted my personality to come through. The site isn’t supposed to scream “seeking employment” but is supposed to be able to showcase my abilities and skills if I direct people to the site in that context.
I didn’t mean for this to get so lengthy…just felt the need to explain some of that stuff. I hope to address some of the things you pointed out and will keep your critiques and thought process in mind as the site continues to evolve. There’s always room for improvement!
Thanks very much again for all of your critiquing examples, and for your thoughts and perspective!
Regards,
Josh
Thanks Josh. I’m glad you’ve been enjoying the critiques. One more to go next week.
The inline Javascript was something I noticed when I first looked, but I didn’t dig into why it might be that way. Your reason makes sense. Maybe I did good in reminding you to refactor it. 🙂
Look into fixed css positioning to keep the buttons in place. You can can use position: fixed and they’ll remain where they are as the page is scrolled. I understand your choices with the frame, but there are definitely other solutions.
I had a feeling you wanted to show your personality on the site. Go with more color then. Feel free to take some chances with the design too.
Overall I really did enjoy the site. I know you say you aren’t a designer, but you do have design skills.