Design Critique: Barton Web Designs

Posted: 19 Apr 2012 05:30 AM PDT

A couple of weeks ago I talked about the value in critiquing the work of others in order to learn about and improve your own work. As part of that post I offered to critique a few designs following an exercise I learned a few years ago through a writing class. Ideally these critiques will provide an example for how the exercise works.

Last week I critiqued Nox Requiem for James and this week I’ll offer feedback to Scott on his portfolio site at Barton Web Designs. As I’ve done in previous posts, let me remind you the person doing the critique is the one who gains the most value from this exercise.

Scott is a student looking to start a freelance web design business and seems a nervous, but willing participant. My first thought for Scott is to be confident. Don’t apologize for your work. Do the best job you can and always seek to improve the work you’re capable of doing. There will always be someone who can do things better and there will always be someone who does things worse.

Quick Thoughts

Let’s start with a few quick thoughts without major explanation.

A few too many textual items are images on the site. The tagline, button text, and copyright information would be better set as text.
The site was developed using a table based structure. Better to drop the tables in favor of a more css-centric approach.
Along the same lines, site development uses a lot of html attributes that should instead be styled using external css.
No hx headings are used. Page headings are styled, but aren’t using semantic heading tags.
The site was created in DreamWeaver. I’d recommend hand coding a few sites and then coming back to DreamWeaver if you prefer.

On to the more detailed part of the exercise.

3 Things I Liked

Monochromatic color scheme — Scott’s done a good job using a single color (green) to distinguish different design elements as you can see in the image above. He makes use of a variety of values within the single hue to create enough contrast for elements to stand apart from one another.

The use of value is helping to create the start of a visual hierarchy. The contrast could be improved by going bigger to emphasize the differences, but contrast is present and enough to help distinguish various elements.

The use of repetition and similarity — Both help reinforce the relationships between elements. Similar elements in the hierarchy look similar and Scott maintains their consistency throughout the site

Headings are darker and bold
Links are a lighter shade, underlined, and italicized
The main text sits in between, using the same heading color without the bold
The navigation offers another value helping it stand out

The contrast sets these elements apart from each other while the similarity connects elements on the same level in the hierarchy.

Beginning of element alignment — At first glance there didn’t appear to be a lot of alignment, but I do see it’s beginnings present. It needs to go further, but an attempt is there.

The services (left column) on the home page align with the D and R in the logo.
The same is true of the left edge of the contact form on the contact page.
A table is used to present information on the portfolio page
Social images on the contact page have also been aligned through a table
Also on the contact page the images for email and phone align with each other as well as the copyright below

More alignment should be present as I’ll get to below, but I like that there’s a start to using it in the design.

3 Suggestions for Improvement

The alignment needs to go further — While some elements are aligned to each other, many show no connection to other elements on the page. The relationships between elements would be greatly strengthened if every element on the page were aligned to another element and everything were aligned around a few core lines.

Elements that aren’t currently aligned look accidentally placed. For example on the home page

The headings for Logos and Graphics (in the list of services) could be aligned vertically to strengthen their connection
The welcome heading and text below could be aligned horizontally to the left edge of the tagline above

Similarly, the left column of services, the line about the new content on the portfolio page, and the copyright information could all be aligned horizontally to the left edge of the tagline.

If all the text shared a common left edge it would create a strong vertical line down the page leading the reader through all the text. In the image above from my post on alignment notice how every element aligns to another.

Space could be more purposeful throughout the design — Space here often feels like a leftover result of where the positive elements aren’t instead of the space being consciously designed.

For example there’s a large area of space on the home page between the 2 columns of services that feels trapped. The space between those columns pushes them apart and gives the impression they aren’t connected. The space is also bordered by text on all 4 sides blocking your eye from leaving it.

Better would be to have the 2 columns of services closer together and allow the space to flow around the combined group of services.

In contrast the logo and the content to it’s right feel too close together creating a barrier to letting the eye flow down the page. Here I think both the the logo and tagline could be smaller allowing for additional space between them that directs the eye down the page.

Across the site some elements could use more space between them while others could be more tightly grouped together. Both would strengthen the relationships of elements through proximity and help control visual flow through the design.

Strengthening the alignment between elements as mentioned above would be a good start to controlling the space.

The logo could be simpler — I think there was a feeling that the logo needed to be something more than a simple logotype when that’s probably all that’s really needed.

A spider web strikes me as a tired metaphor for anything web related at this point and probably doesn’t carry the professionalism Scott would like to get across. The captured web pages take the metaphor a little further, but a new metaphor would really be best.

I think a simple and well chosen typeface is likely all that’s needed here. It would help make the company name more readable which increases the opportunity for branding the name and site.

Overall I’d suggest a strengthening of the basic design principles of contrast, repetition, alignment, and proximity with an eye toward seeing negative space as a design element instead of allowing it to accidentally happen.

With more conscious design decisions based on these 4 principles the overall design would be improved and lead to better use of space, more visual flow, and a stronger visual hierarchy of elements.

Summary

By his own admission Scott tells us he’s new to design and while there’s certainly plenty of room to learn and grow I can see some early signs that he’s on the right track and moving in the right direction.

I’d recommend Non-Designers Design Book. Don’t let the title fool you. It’s packed with solid design advice and is a quick read for gaining a good understanding of the 4 basic principles of contrast, repetition, alignment, and proximity. Another great book is Design Basics Index, which covers a wider number of basic principles.

These were among the first books I read when starting out and I found both to be among the more valuable I’ve come across as they introduced me to many of the concepts, principles, and guidelines I try follow today.

I’d also like to see Scott spend some time reviewing other designs, much as I’ve done with his design here, specifically looking to how the designs make use of space, control visual flow, and develop hierarchy through the 4 basic principles.

He wouldn’t need to send these reviews to the designers, but I think performing the exercise of the critique would be a valuable experience.