Where Does This Design Succeed And Fail?

Posted: 25 Oct 2012 05:30 AM PDT

It’s hard enough offering objective and useful criticism to a a fellow designer. Imagine trying to remain objective about your own work. I’ve been talking about the redesign of this site for awhile now and walking you through the thought process for many of my decisions. It’s time to wrap up the series and I thought why not conclude with a critique of my design.

I’ll do my best to be objective, though admittedly it may not be easy to do. Even if I can remain objective there will probably be things I fail to recognize as missing the mark because I’m too connected to the design and things I probably think do miss the mark, just because I’m so tired of seeing them.

It’s been awhile since the last critique so here’s a quick reminder of the format.

Quick thoughts — just some observations with little explanation
3 things I liked — with more detail about why I liked them and why I think they work in the design
3 suggestions for improvement — Some things not quite working for me and how they might be improved

Since this is my site I decided to list 5 things and suggestions instead of the usual 3.

Think written in several langauges — IBM signs

Quick Thoughts

Below are some observations when looking at the design. A few I discuss in more detail later in the post. I tended to focus on the negative a little more with these.

The aesthetic is somewhat bland
Why is search buried on a single page
Some portfolio images need improvement
Footer looks crowded, especially on home page?
The colors are warmer on a Mac and cooler on Windows
There are a lot of social sharing buttons and yet no Facebook
Are you sure you used those html5 semantic tags well?
The css could be more organized and optimized
Logo alignment looks off on home page
Archives page loads very slowly

Sadly I could go on and on and still on with the negative observations. Most of these items are already on my to do list for improving the site (along with a few million other things).

5 Things I like

Use of space — I think I did a pretty good job using space across the site. Elements on the page have room to breathe (footer excepted). I don’t think the design feels crowded even across different devices with differing screen sizes.

There’s a good balance between positive and negative space and I think the space is on the active side. It leads your eye through the design instead of sitting there passive as a result of it not being considered.

The grid — I had started putting grids in practice prior, but this is the first site I really tried to do more than work with something very simple. While some things could be improved in both the design and construction of the grid, I’m generally happy with how it turned out.

Designing with a mobile first thought process helped me focus on what was necessary

Design elements are organized well and consistently across the site and information is easy to find. Columns connect elements and tie the layout together. Leaving one of the columns mostly empty creates a strong vertical channel of space down the page.

The occasional image or pullquote that breaks the expected placement (though still remaining on the grid) creates a little extra interest.

Visual hierarchy — The most important elements stand out. Less important elements fade into the background. Size, color, value, space, and contrast have been used to give different elements different visual weights. The priority of each element is being communicated visually.

Visitors should be able to quickly determine if they’re in the right place, before orienting themselves. The hierarchy allows skimming before reading in more detail.

The stepped visual weights create a dominant element and several focal points. Combined with the way space is being used they create a flow and direct visitors through the page. The time spent on pages has gone up 25% on average, which I take as a positive sign that I’ve done this well.

Simple and Minimal — Both were goals of the design and I think I’ve succeeded fairly well with each. The design certainly isn’t overdone with decoration. I stuck to the basics and avoided frills and trends.

Designing with a mobile first thought process helped me focus on the necessary and let me strip away as many elements as I could. More was cut out from the design than included. There are fewer items in the global navigation and the sidebar has been kept to a minimum of information.

Design elements aren’t competing for your attention everywhere you look and aesthetic distractions were left out to keep the focus on the content. Visually things have been left to the fundamental principles and the simplest of shapes.

Responsive — The site is responsive so kudos to me. I know some of the responsive aspects of the site could be handled better, but for the most part I think I did a good job, especially given the site is ahead of the curve in adopting responsive design at all.

I probably could have thought more about how the site appears on the widest of screens, but the design serves the content and in my opinion didn’t need to grow any wider than its current maximum.

5 Suggestions for Improvement

More aesthetic — While I like minimalism, a little sugar would have been nice. I think the design works well and does a good job following the guidelines of solid principles, but a little more wow in the right places could improve it. I don’t mean eye candy for the sake of eye candy, but meaningful aesthetics that wow you a little while still communicating on a visual level.

More visual appeal would create more interest. I don’t think the site would need a lot. A textured background or image, a little more color in spots, or a few realistic details would be enough. I talked about a Renaissance concept and how it led some design decisions, but the site hardly says Renaissance. A few subtle touches could communicate the aesthetic concept better.

I think many of those decisions could have been made better

Typographic choices — This design uses type far, far better than the previous design. I actually made type decisions with this design, unlike the last. There’s a typographic grid in place and elements are mostly aligned to a baseline grid. Thought was given to the length and height of a line of text and there’s a rationale for the typeface choices.

And yet, I think many of those decisions could have been made better. The main text should be larger and the measure reduced a touch. Page headings could be more interesting to draw readers in.

Opening up the palette of typefaces to choose from would likely have resulted in a better choice for both the main text and headings.

Color scheme — I wanted muted earth tones, but think I may have chosen a scheme that’s a little too muddy. The colors should be more consistent across platforms as I noticed a little late they display cooler on the Windows side than the Mac side. Each color seems to carry a little more blue on Windows.

Colors seem more interesting in the footer, where there are more of them and more contrast between them. Changing the main background from it’s current off white to something with a little more brown would help.

The red being used might work better a little less muted, though perhaps having a background color to contrast against would be enough.

Art direction — There’s a sameness across the design and and early goal was to allow for some art directed content. There are a couple of ways I think I could start down this road to improve the overall site aesthetic.

Tweak the design of post categories and post types — Nothing radical, but a slightly different look between design and development and marketing posts. Demos could get a different look as could any other content type I later add.
Non-blog pages could be designed around their content — While it’s not realistic to think I can give each post a completely unique design, there’s no reason why the static content here can’t be unique. The content of each carries a different message that can be communicated visually.

The archives — The archives page has yet to realize its potential. In fairness to me I need to learn a few more things about WordPress to do what I want on the page and decided for the moment it was more important to launch the site.

The page currently lists every post published grouped by category. There are options to filter those posts by year. More filtering options should be added to help readers zero in on what they want. Tag filtering is a must. Category filtering should be included as well. Ideally a visitor could quickly find all posts from 2010 under the css category that are tagged both grids and typography for example.

The page also needs to be optimized for speed as it currently takes too long to load.

Drawing of 2 people critiquing a painting

Summary

Aside from specific business goals, the main goals with the design were to put in place much of what I’ve been learning and practicing the last couple of years. Overall I’m pretty happy with how the design turned out. It’s easy for me to compare it to the previous design and both objectively and subjectively tell you it’s much, much better.

At the same time it’s also shown me how much more I need to learn and practice. My skills working with type, grids, and especially color could all use another round of improvement.

Aesthetically the goal of this design wasn’t to wow, but now that it’s done I would like to wow you a little. My goal was to put in place a solid structure that would be relatively easy to change and build on. I’m still not quite sure if I got it exactly right.

Hopefully you’ve enjoyed this series of me sharing the thought process and decision making behind redesigning this site. More than anything I want you to know that everything you see here comes out of decisions I made under a unified concept. I may not have always made the best decisions, but there’s thought behind everything you see and the series has tried to show what led to them.

The post Where Does This Design Succeed And Fail? appeared first on Vanseo Design.