Thursday, October 1, 2015

How to Liven up Your Flat Design with Dirty Dots

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

[caption id="attachment_116228" align="alignright" width="380"]Glossy rendered UI versus flat design Losers and winners[/caption]

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

[caption id="attachment_116229" align="alignright" width="380"]Mr Retro's Permanent Press filters Mr Retro's Permanent Press filters[/caption]

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 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

[caption id="attachment_116233" align="aligncenter" width="800"]Illustration: The Future of the Hamburger Menu Icon? Illustration: The Future of the Hamburger Menu Icon?[/caption]

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.

Continue reading %How to Liven up Your Flat Design with Dirty Dots%


by Alex Walker via SitePoint

No comments:

Post a Comment