Web Design Critique #44: Owain Lewis

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 the personal portfolio of Owain Lewis, a freelance web designer.

2 Million+ Digital Assets, With Unlimited Downloads

Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.

Explore Design Resources

If you’d like to submit your website to be featured in a future Design Critique, it just takes a few minutes. 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 Owain Lewis

I am freelance web designer and front end web developer from Cardiff. I build clean, modern and professional websites using HTML5. Over the last few years I’ve worked with a large number of clients including web design agencies, big businesses, start ups and private individuals, creating websites that help people achieve better results online.

Here is a screenshot of Owain’s homepage:

screenshot

Initial Impression

My initial impression of this page is extremely positive. I like the layout, the graphics and the text. Also, the content is all organized into clear sections, both through placement and subtle background changes. It’s a really gorgeous piece of work that heavily reminds me of some of the black pages that Apple has on their site.

For the most part, our critique will be positive. We’ll just take a look at each section and discuss what went right! However, there are a few really small things that I think could be tweaked and I’ll point those out along the way.

Header

screenshot

The header is all about typography. It makes a strong and friendly introduction that lets you know what the site is all about. In recent weeks I’ve been getting on designers for almost hiding the basic explanation of their websites and am a firm believer in throwing it out in the open so there’s no confusion. Right away we see this site is for Owain Lewis, a freelance web designer.

The header also sets up a strong justified alignment that sets the tone for the rest of the page to follow. This alignment is then strictly adhered to all the way down through the footer.

The one problem that I have in this section is the lack of consistency with the typography in the headline. Here the designer has used the principal of contrast and leveraged color, boldness and typeface choice to set certain words apart. However, the points of emphasis use three different treatments.

screenshot

The first utilizes the plain thin font used in the rest of the headline, the second uses a highly stylized and fairly thick ampersand and the last uses an italicized version of the headline font. I recommend making “Owain Lewis” and “website design” match. Whether they’re plain or italicized doesn’t matter so much, just make sure they’re both the same. I would also consider making them both a bold version of the font to help add to the differentiation.

Also, as a small note, the first line in the headline could use some punctuation attention.

Intro Section

screenshot

The next section is the one that really grabs your attention when you load up the page. All that black makes your eyes immediately go to the point of contrast: the big white thumbnail, which then causes you to bounce around a little in that section and proceed down to the other thumbnails. The page reads really well and the designer has done a good job of guiding the user through the layout.

I even like the little floating “Hire Me” tag on the right side of the page. At any point of browsing through the site if you decide this guy is so good that you want to hire him, there’s a straightforward route to this goal that you simply can’t miss! Notice that it stays far off to the side and out of the way though, tricks like this are extremely annoying when they actually overlap content (I’m looking at you Twitter for iPhone).

I’m not sure this section needs any changes at all, though I do get a little caught up on the headline: “Freelance Web Designer Web Design Portfolio.” This is obviously a redundant statement and feels like SEO noise (the page title does the same thing but much worse). SEO tactics approach gray areas fast so each designer has to decide what is and isn’t a good idea, but personally, I feel that there’s some annoying keyword bloat happening on this page.

Featured Section

screenshot

The flow of this site as you scroll is interesting, did you catch it? The first area is one wide column, the second area is two columns, this featured section is three columns and the footer is four (all maintain the strong alignment). Sometimes designers struggle a lot with the idea of varying your layout and either keep the same throughout the page or attempt a drastic change and screw up the flow. Owain has done a good job of easing the user into the content and offering up enough variation to reduce visual redundancy.

Like the last, this section is quite attractive. I like the visual treatment of the headlines and the animated hover effects on the thumbnails. Everything feels slick and high class.

One small change: never capitalize the “i” in iPhone. It seems insignificant but people are picky about this stuff and some won’t hire you to build their iPhone site if you don’t know enough about the product to get the name right.

Footer

screenshot

To me, this section is the only part of the site where the layout gets a little awkward. For starters, the flow of the columns feels strange with the large amount of awkward whitespace in the middle. I’m not sure it’s the best idea to make the four column section line up with the breaks up the three column section above it. This might make more sense if the columns were distributed evenly across the space like the three above them are (so follow the method of the previous section, not the exact placement).

Finally, the right aligned “My Links” section is a little strange given that all of the other columns are left-aligned. This is a classic case of design being one of those places where you can follow every rule and still have something that isn’t quite right. I ramble on and on about how it’s important to strictly follow the layout you’ve established, but here I’m suggesting that maybe that last column doesn’t need to follow the justified layout and can just have a ragged right edge.

Being a designer means learning all the rules and then figuring out when it’s acceptable to break them. The problem is of course that each designer will decide differently. I’m admittedly splitting hairs with this column discussion while many designers won’t see any problems whatsoever with the footer layout! I merely encourage Owain to take another look at the layout here and decide for himself if it couldn’t be made stronger somehow.

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.