How to Liven up Your Flat Design with Dirty Dots

Share this article

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

Alex WalkerAlex Walker
View Author

Alex has been doing cruel and unusual things to CSS since 2001. He is the lead front-end design and dev for SitePoint and one-time SitePoint's Design and UX editor with over 150+ newsletter written. Co-author of The Principles of Beautiful Web Design. Now Alex is involved in the planning, development, production, and marketing of a huge range of printed and online products and references. He has designed over 60+ of SitePoint's book covers.

adobeAlexWflat designHalftone FilterIllustrationpatternstextures
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week