Colour: a Fun Way to Enhance User Experience
Bruce Mau’s Optimism Palette
Recently I was hired to do some contracting work with Bruce Mau Design and learned a valuable lesson about colors and websites.
One of BMD’s designers Jim Shedden asked me to update their www.brucemaudesign.com site so that when the user navigated to a new page the colour of certain elements would change. At first I wasn’t totally sold on the idea but gladly accepted the task.
On the top right hand side of this post you can see the source image that Jim sent me. These were the colours that he wanted to use whenever the page would refresh.
First thing to point out is the beauty of the colours. They are very well chosen and complement each other very well. This is why you hire designers and pay them very well, there is an art and science that go into choosing good colours and creating a good design, luckily, many great designers have an eye or intuition for what works so don’t need to be taught the science.
You start by declaring some colours, pick your CSS selectors and then use jQuery’s iterator function to apply the desired CSS property to the specified page elements. Easy right!
There are some gotchas, you want to make sure you optimize which CSS selectors you use so that you don’t end up having CSS conflicts. In my case there were quite a few properties in the CSS files that had to be cleaned up before this script would work as it was supposed to. Also, if your page is really big or your connection is really slow there is a chance that the script will take a second to run. This is why you should do it dynamically on the server if you can. However, there is something to be said for using fun little scripts like this to add personality to your web page. It also degrades nicely so if the user has JS disabled, they will see the default colours from the CSS files which isn’t bad at all.
The final effect can be viewed by going to brucemaudesign.com and exploring the site to see the colours change.
This was a very simple idea with a relatively simple implementation that goes a long way to providing character and personality to a website. I think this is one of the easiest ways to have fun on the page and keep your users in anticipation as they wonder what colour they are going to experience next. Thanks Jim and Bruce Mau for asking me to do it for you. It was great fun.
PS: I will be releasing this as a jQuery plugin in a little bit with some improvements and other configurations options so if you have any ideas or are a jQuery plugin enthusiast I would love to hear from you.
Thanks very much,