Many developers dread that final part of a project when they have coded up a brilliant piece of work and all that is left is making it look presentable. Unfortunately, it’s repeatedly proven that technical brilliance is easily overlooked unless it looks half decent and preferrably a bit unique. And while the trustworthy Twitter Bootstrap takes care of the first, it fails badly on the latter. Sometimes it might also be a bit superfluous to pull out an entire framework for a small piece of work.
So here’s a short, simple primer – in three simple steps – that can help you make your project look a bit more presentable without the need of an entire library.
1) Skip the black and white
Nothing in life is pure black&white, and your designs shouldn’t be either.
Try replacing the pure black
#000 and white
#fff with something like
#eee for a softer, smoother look.
If you’re really creative, add an almost invisible touch of color – like my two drops of yellow into the white background below right (to match the page background).
2) Magic trick: adding padding
Still, it’s not pretty up there. But designers have a secret, invisible tool to make everything look a little nicer: whitespace.
Give your elements some room to breath in! Margins or padding, it doesn’t matter as long as you give your elements some personal space. And when you think you’ve added enough, add some more.
And never ever use hard, black lines to separate chunks of content, like in a list or a table of data. Just add some padding around each chunk, and optionally add some zebra stripes (in a very light color, mind you!) to make the rows stand out.
After Bootstrap entered the court, tables like these to the left are getting extinct – fortunately. But they used to be a surefire giveaway for a coder playing designer dress-up.
Bonus tip: Instead of using bold on headings – try to make them lighter and a few sizes bigger instead.
3) A gentle splash of color
Colors. Sooo many to choose from, yet you stick with the basic red, green and blue. Their prevalence is undoubtedly based on the easiness of writing “
color: red;” and “
background: blue;“, and I confess: Even I turn to these in the process of building stuff. But while these glaring colors in full saturation (a big webdesigner no-no – that is, up until the Apple team went all-in with their iOS7 color palette) make it easy to spot a drifting span or a margin gone haywire, they should have no business in a finished product. Instead, add a little color l❤ve to make your product pop!
Where to start? Depends on your time and commitment. Here’s three options for you:
b) If you want to continue the habit of turning to “red”, “black” and “blue”, grab these variables for SASS/LESS and use them instead. Just as easy to remember, and a bit easier on the eye:
c) If you want to impress your fellow coders and designer hipsters, learn a few hexcodes by heart – and toss them casually around like a boss. Impossible, you say?
With a little syntactical creativity and some leetspeak inspiration, all you have to do is memorize a few sentences:
«Badass easels dabble leased cocoas!»
«Fleece seabag obsess facade ass!»
Or what about «Feeble locals, fellas, ladies – boobes!»?
A bit peculiar, indeed, but it will give you this:
.. which kan help you build stuff like this:
.. or just:
Do your stuff and let someone else bother with how it looks.