Design & UX
Article

How to Liven up Your Flat Design with Dirty Dots

By Alex Walker

About five years ago there was a glorious but bloodthirsty revolution in web design — and like all revolutions, there were winners and losers.

Glossy rendered UI versus flat design

Losers and winners

The losers were bevelled edges, faux stitched borders, glossy reflections and drop shadows.

The winner was ‘flat design’.

Microsoft got the flat ball rolling with Metro and then successive version of Android and IOS got flatter and visually simpler. Eventually, Material Design distilled it all down into a cohesive theory.

And on the whole, we’re all much better off for it. Graphics files are lighter and faster, and UI’s are simpler and less cluttered. But you could argue there is a certain clinical ‘samey-ness’ to a lot of design 2015.

So, it’s always nice to have methods to give design projects (logos, illustrations, UIs, etc) some warmth and without piling on tonnes of extra visual clutter?

Grab your Retro Spectacles

Print is a technology that has been constantly refined for over 400 years as paper, inks and machinery have improved. The fidelity of high-end print today is incredible.

Funny thing is, we still seemed to be charmed of many of the little failings of those original, low-tech print methods. The kind of throwaway design we’ve all seen on soup tins, old newspapers and train station walls.

Say Hello to Mr. Retro

Mr Retro's Permanent Press filters

Mr Retro’s Permanent Press filters

Photoshop Plugin maker Mr Retro has made a living out of riffing on old print styles with their Permanent Press set of filters. Each filter mimics some of the natural, grungy imperfections of classic printing press work.

These imperfections include:

  • Paper grain
  • Chunky halftone dots
  • Plate misalignments
  • Ink overlap & bleed

These filters are all very configurable and can add a surprising amount of tactile warmth to a flat-color designs without necessarily adding a lot more clutter — especially if used sparingly.

However, at $99 they aren’t cheap. But there are other less expensive ways to squeeze some of the flatness out of a design.

Halftones in Adobe Illustrator

Illustration: The Future of the Hamburger Menu Icon?

Illustration: The Future of the Hamburger Menu Icon?

This is an illustration I did for an article called ‘Are users ready for the desktop hamburger icon?’ I wanted to keep the image simple but felt it was a touch clinical.

Chris Spooner's Distressed Halftones

Chris Spooner’s Distressed Halftones

Chris Spooner (Spoon Graphics) has been graciously providing wonderful design resources for years — including this tasty selection of slightly mottled halftone dots.

You can grab a copy for yourself (and sign up for Chris’s email while you’re there).

Let’s add some dirty dots to my flat color illustration.

1). Open Chris’s halftone AI, select all the halftone patterns and then paste them into a new, empty layer in your new artwork. You can then hide that layer now. You should now see a set of new patterns appearing in your swatches palette (as below).

Halftone swatches

Halftone swatches

2). Next start by copying your background object and use ‘Paste in front’ to place copy directly on top of the original element.

3). Click on any one of the new halftone swatches and your new element will become a halftone. Test different patterns until you find one you like.

4). As this is a black dot, I usually like to reduce the transparency of the halftone until it’s a just a darker version of the color below it.

5). Repeat this process with any other image elements you like.

Illustration with halftone effect

Gone dotty.

And that’s all there is to it. Here’s my original illustration ‘halftonerized’.

Keep this in mind as an option next time you’re looking to lose that ‘vector perfection’ from your work.

Let me know how you go.

Originally published in the SitePoint Design Newsletter

  • http://www.dharne.com/ Dharne and Co

    Thanks for sharing this beautifully written blog. Flats designs are boring and are dull many a times. Just with this little magic in hands, it came so lively.

    • http://sitepoint.com Alex Walker

      Thank you, @d@dharnecompany:disqus

  • http://ricardozea.me/ Ricardo Zea

    This simple technique can breath so much life into a design is not even funny.

    Thanks for sharing Alex.

    • http://sitepoint.com Alex Walker

      It’s a good payoff for not too much effort. Thanks @ricardozea:disqus :)

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Design, once a week, for free.