About five years ago there was a glorious but bloodthirsty revolution in web design — and like all revolutions, there were winners and losers.
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
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
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 (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).
Learn PHP for free!
Make the leap into server-side programming with a comprehensive cover of PHP & MySQL.
RRP $11.95 Yours absolutely free
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).
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.
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 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. 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 40+ of SitePoint's book covers.
Jump Start Git, 2nd Edition
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers