@media Session 5

Designing User Interfaces: Details Make the Difference

Dan Rubin

The main topics Dan covered were:

Proportion
Creating patterns for margins and padding aids a sense of cohesion with your design – even if it’s just multiples of 5px, 10px etc. Being consistent will look better.
With typography, use relative text sizes to create balance. Use letter-spacing property (aka Tracking) to balance things.

Borders, Lines & Layer Modes
Grids – take the guesswork out of things. But they can be a bit boring – so use certain elements to break the repetition [see below]

Texture Tricks
Reality is rarely smooth – so using slight touches of texture to break up large blocks of colour can make designs seem more natural and less “flat”. Subtle lines & gradients on elements can have a similar effect, and make things feel more tactile. Depth can be inferred with a bit of subtle bevelling of buttons etc.

Almost any image can be used to make a gradient fill for a banner, for instance. Getting a natural, interesting gradient could take ages in photoshop, but sampling a single line of an image, then stretching it vertically to produce a gradient is a really quick and easy way to start. Then use layer cloning/blending to make it more interesting. It’s a trick I’ll definitely be putting to good use in due course.

Other Interesting Stuff
Finally, Dan wrapped it up with a demonstration of a redesign of the Fox News website (which he did purely for his own amusement!). Currently, it’s a mess with uneven margins, padding, borders, heading styles etc. The revamp made it all much more cohesive and easier on the eye. Nice work, Dan!

Oh dear, now I think I might have to revisit this site’s design and put some of Dan’s tips into practice 😀

Dan’s presentation: slides (pdf) | audio (mp3)

This entry was posted in at media, conferences, design, inspiration and tagged , , , , , , , . Bookmark the permalink.