VGTech is a blog where the developers and devops of Norways most visited website share code and tricks of the trade… Read more



Are you brilliant? We're hiring. Read more

Make your stuff look better – in 3 easy steps!

CSS

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 #444 and #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).

Black and white vs. softer alternative

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.

addingpadding1

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.

Adding padding

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 lve to make your product pop!

Where to start? Depends on your time and commitment. Here’s three options for you:

a) If you have the time or energy, you can indulge in color palettes from ColourLovers.com, Kuler or similar services.

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:

Alternate default colors

// SASS
$black: #252525;
$gray: #35383f;
$white: #ececec;
$blue: #1c487f;
$yellow: #f9cf27;
$orange: #ed822c;
$red: #960013;
$green: #366c3c;
$pink: #ea687e;
// LESS
@gray: #35383f;
@white: #ececec;
@blue: #1c487f;
@yellow: #f9cf27;
@orange: #ed822c;
@red: #960013;
@green: #366c3c;
@pink: #ea687e;

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:

Autumn color palette

.. which kan help you build stuff like this:

Autumn color palette

Autumn color palette

Autumn color palette

.. or just:

Do your stuff and let someone else bother with how it looks.

How to piss off designers

Web designer @ VG, focusing on clean html, creative css and effective workflows. @hebedesign


3 comments

Leave your comment