Background Color Transparency with RGBa

Using RGBa to set your background colour of HTML elements is great as it allows you to use transparency.

It looks like this:

element {background-color: rgba(255,255,255,.15);}

Super neat for rollover effects where you can set the background colour to white on the rollover state with a low transparency, in this case 0.15. This has the effect of tinting the colour underneath, and makes it easy for colour scheme changes later on.

Transparent elements look cool but in the past you have either had to set the whole div to be transparent and also effecting any text inside it, or upload transparent background images.

NB Using rgba is CSS3 and works only in the latest browsers at the moment. That is IE9, Safari 3, Firefox 3 and any version of Google Chrome. Worth setting a few fallback states.


TIP – Position Nav Under Content

When viewing a webpage app or responsive design on our mobile device it is common to see full width navigation buttons placed under the content. This gives priority to the page content in the smaller screen. You can then easily scroll to the bottom to navigate further. This of course wouldn’t be practical for a very large scrolling page for many sites it is ideal.


Why It’s Important to Sketch Before You Wireframe

I’ve had a number of conversations people as to the virtue of sketching v.s. wire framing. One reason for me is that it simply allows for many fast iterations, with less need to perfect, allowing my imagination to spark ideas. If I got straight to high fidelity wire frames I find it’s easy to get stuck in a rut.

I just stumbled upon this article on the subject on the UX Movement blog. A very interesting read and one that is inline with my thinking. Read full article here.


Nespresso Project

I have always held that the skills gained from my background in the creative fields of art and music are invaluable to my work as a UX designer. However it is rare that I get to do a project that so closely overlaps between the two areas.

I was called in to work on a project by a close friend of mine who is doing a course in product design. She had just won first place in a competition to design a feature to enhance the experience of drinking coffee. Her idea was to engage all of the senses and introduce a ‘flavour soundtrack’ or musical interpretation of the flavour profiles of Nespresso’s grand crus.