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.
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.
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.
Download a free sample from my book, Design Fundamentals.
Thanks Steven, I think you have reinforced what I have known all along. I have become to dependent on tables in my designs and I need to delve into CSS more. I also have become attached to Dreamweaver and I need to open myself to other platforms as well.
Anyway, great feedback and I really appreciate your time. I will take your suggestions and design an entirely new site for both the experience and to improve my site’s efficiency.
After all, If my site isn’t effectively designed how can I expect potential customers to do business with me… 🙂
Dreamweaver is a bit of a bad product since drag&drop most often doesn’t give decent code in the end. Also, tables are really considered bad these days so CSS and divs are definitely worth learning. Using Adobe Products is not bad, per se, you just have to know what tools you really need 🙂 Photoshop/Illustrator and some text editor should suffice.
I’m glad to help Scott. I have a number of posts on developing layouts without tables on the site. If you search for 2 column or 3 column I think you’ll find a few. If you can’t let me know and I’ll find them for you.
I took a few continuing education classes when I first started out and those two put the focus on Adobe products. Learning to develop by hand coding with html and css will take a little time, but it isn’t too hard.
If you ever have questions feel free to ask. I’ll do my best to answer.
Hey, interesting article and it was pretty awesome of you to take the time and help a rookie. This is something more people oughta do, I get the feeling that people in the graphic design scene are a bit elitists and refuse to really help.
Thanks for doing this 🙂
Thanks alajarvela. A few weeks ago I posted about how I think doing a critique like this is actually more valuable for the person doing the critique than the person who gets the feedback. I offered to look at a few sites at the end of the post so people could see some examples of the exercise.
I critiqued another site last week and I have more coming in the next few. The point was to get other people taking the time to think through how to improve the designs they see, but if I my opinion helps someone in the process I’m certainly happy to do so. I don’t think you’re ever too good to help out someone else.
You’ve already made it past your first major hurdle!
I think opening yourself up for critique is a major plus when it comes to your desire to grow. While the methods that you use to build your sites may not be “best practice” for custom pages, they do give the opportunity to learn. I’m with Steven, get some experience hand coding a few pages to get the layout down. Focus on learning the box model and how it is applied in various browsers.
This is a profession that demands study and change, but it is also one of the most supportive communities you’ll find.
Great start, Scott!
Good point about being open to being critiqued. It’s not easy, but it’s a good way to grow as both a designer and person.
Very true about this being a profession that demands study and change. It seems like every time I get a handle on something a new technique comes along that’s replacing the one I just learned. 🙂
One of the things you might want to do is bookmark a few CSS design inspiration sites and take a look at how those sites were built and the code behind them.
You know I’m not a big fan of those sites, though I agree it’s good to bookmark sites you like and look at their code. It’s still one of the best ways to learn. I tend not to get that inspiration from the css sites since after awhile all the sites look the same. I will look at them at times, but I generally collect sites in passing for inspiration.
This is great feedback and I appreciate everyones concern. I have a few months off this summer and I plan on learning several things. Here is my to learn list, or get better at list. Take a look and let me know your thoughts:
Wordpress? (not sure if this is worth learning)
Also, any good resources or starting points would be great.Thanks again to everyone especially Steven for starting my desire to better my skills.
I’m glad we could help and offer some useful feedback. All the things you mentioned are worth learning. Add things like PHP, General business and marketing to the mix. Don’t let all the things you want to learn overwhelm you either. There’s always a lot to learn.
I’d probably start with html/css since they sit at the foundation of everything else. What I’ve tried to do since the beginning is pick a subject or two, read some books about it, and find what I can online for a few months. Then I’ll move on to the next subject and the next one before coming back to the first one again.
There are so many different directions you can go so pick and choose things you’re interested in and let your interests shape your learning and your skills.
And never stop. Always be evaluating your own skills and deciding what to improve next. As long as you keep at it, you’ll keep getting better.
Enjoyed the critique. And the Barton site reminds me of when I was just starting.
One of the BEST ways I learned, was simply finding elements and ideas from other artists and incorporating them into my own work.
Just checking out some template sites like Template Monster can really help. Plus anytime I land on a site that I like some design elements of, I write down the URL and what I liked about it. I have a really cool book of all sorts of great ideas.
Scott will figure it out, I’m sure. Just need to get away from those big buttons for links 🙂
Anyways, Steven, I’m really enjoying a lot of your posts on small biz forum, glad I found your blog as well.
Thanks Mark. I take it you’re BNB on the forum.
I do the same thing when I come across sites I like. I try to identify why I like a site and incorporate what I like into my own work.
I’m glad you’re enjoying the forum and the blog and I’m sure we’ll be chatting more.