Designing User Interfaces: Details Make the Difference
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)
