Veerle's blog

Oh man! Never let me design something again for somebody who’s into accessibility, those guys are a major pain in the ass… JUST KIDDING!! :o) Maybe there is a little bit of truth in the fact that it is more difficult to design something really nice and take as good as all accessibility factors into account. So it was quite a challenge because I also had restrictions in what I could change and what I could not…

The scope

As a designer it’s hard to leave things alone. There is always the urge to brush up, replace that, move things around… in other words make drastic changes. Just ‘improve’ a little was the job, and sometimes that’s more difficult than starting fresh. I see it a bit like designing with my hands tied :)

What to keep

The first thing that came up in the conversation was the grasshopper. I see this as the trademark of 456 Berea Street but Roger wasn’t sure he wanted to keep his grasshopper. He was a bit bored with it and wanted to change it, but I advised him not too. He showed me a mockup of the new header he made and it was like “Honey I shrunk the grasshopper” :) It was nice though, but all the beautiful details of his grasshopper were gone. I thought if I would change something it would be the position of the grasshopper and manipulate the background a little bit. Here is the before and after:

The old header

The new header

Organizing

When I looked at the current design (previous as of now), my first impression was that it needed some organizing. There is so much text that I had a bit of trouble differentiating the separate posts and sections. Especially with the text ads, it felt like everything looked too equal to me. My first area of focus was to get things organized in an easy and light way. Adding a bit more space and a bottom line in between sections did the job combined with some typographical changes. For example bigger titles in a new color and font. The Google ads in between articles got a light background to better distinguish them from the posts and making them less obstructive in the process I think.

Tweaking and compromising

And with every design there is tweaking and compromising. As a designer and color lover I like to believe that I’m good at picking the ‘right’ colors, but what seems right to me, doesn’t always seem right for everybody. As an accessibility advocate, Roger puts my choice of colors to the test. A few adjustments needed to be made in terms of contrast. But let me assure you that these are really tiny changes.

The navigation, the initial version

The navigation, final version

We both decided to use the color for the active button as a mouse over effect and give the active button more contrast.

Titles

I always try to take contrast in account, but if you design very strictly to make sure “all” colors are within the limited range of what is ‘generally’ allowed, you’ll have a hard time to make it attractive and nice. Your choices are rather limited. It’s like Roger says in his article too, it’s all about compromising, but I’m gonna be honest here and I wouldn’t like to do it in every design, at least not in every element of the design. The rule of thumb is think about it and make it as good as possible but don’t cut yourself short and try to stay creative design wise. Roger’s site shows the perfect balance, especially since his focus is not on design like my site, but on the subject of accessibility. Knowing your target audience is the clue.

Finishing touch

I guess I always have to add at least a few icons to finish things off and to put my stamp on a design ;) It’s those little details that makes a difference or set a site apart. Of course the whole package needs to be good or this wouldn’t make sense.

Colors of links and icons

A strong complimentary duo

Working on this with Roger was really fun and I learned a lot. We learned from each other since we are very complimentary and we are both perfectionists. You may think we are like the perfect duo and never disagree, but our different areas of work engage some nice discussions :) The funny thing is that mutual respect brings out the best of both worlds. I wish each web project could be like this.

Also read Roger’s post about the redesign.