Why Do We Love Scratchy Records, Halftone Dots & Other Flaws?

It’s funny how it’s almost always the imperfections in a technology that become its signature – the bit that we celebrate.

What am I talking about?

• The hiss and crackle of a vinyl record
• The sprocket holes in movie film reels
• The clicks, whistles and squeals of dial-up internet
• The linear brush stroke in a painting

Each is not much more than an accidental side-effect of their creation process. For instance, dialup modems hacked audio phone tech to make data connections work. It was never a great system to send data so we moved away from it. Yet that tinny whine can still make people smile.

Similarly, we rarely rely on moving mechanical reels to drive today’s digital video. Yet perforated film reels are still easily the most common visual motif in logos for film companies and photographers.

Which brings us to the ‘halftone pattern’.

The Halftone

The ‘halftone’ – those little dots that you see in most printed photographs – are another side-effect of an imperfect process. A case of ‘this is the best we can do with what we have‘.

Before the invention of the halftone, almost all color imagery was hand-painted, and skilled painters might hand mix hundreds of different colors to recreate what their eyes were seeing.

Obviously hand mixing hundreds of colors for each image wasn’t an option for the print process. Unlike painters, printing presses can only print solid ink in a limited set of colors at any one time.

Halftones changed the game by giving printers a lot more tones out of a smaller number of inks. Glass screens with grids of tiny lenses allowed print houses to convert tonal imagery into differently sized dots. While it wasn’t a perfect, mirror-like reproduction – early screens were very coarse – it was a revolution for color printing.

But halftones can’t help but have their own ‘look’, and artists and designers picked up an that.

1960’s Pop Art master Roy Lichtenstein adopted the halftone dot (Ben-Day dots) in all of his most iconic works. His bold, comic-inspired work vibrates with hand-stencilled dots which you’ll find on everything from canvas to tiles to cups and crockery.

Khoi Vin Introduces a Wildcard

Khoi Vin (formerly design extraordinaire at NYT) has also adopted the halftone effect in a big way for his new Wildcard iPhone App.

Bored with the blurred background photo effect that has become common in the past two years, Khoi uses halftones in two ways:

• Color feature images in the browse view use a subtle newspaper-like halftone.
• -Upon opening a ‘card’, the feature image transforms into a dark, monotone version that becomes the background.

You’ll get a sense of it in this animation (which I’ve slowed slightly).

It’s a seriously cool effect, giving the app a trustworthy ‘newspapery’ feel, while still making it visually distinctive – it certainly doesn’t look like another Flipbook.

There was one interesting decision though.

At the moment, the Wildcard CMS automatically generates two extra images for every featured news image – one color and one monotone version each time. Khoi mentions that these images compress nicely, but I do wonder if there was another way.

This means users need to download three images for the ‘editorial value’ of a single image. That’s not crazy, but perhaps not ideal either.

It also means that the Wildcard servers need to manage and store three times as many image assets – images that become instantly redundant if they retire this visual effect in two years.

Again, not a tragedy, but something you wouldn’t take on lightly.

Generating On-the-fly Halftones

There have been some excellent solutions for generating on-the-fly halftone effects. David DeSandro created this crazy, interactive ‘breathing’ halftone – which is fun to play around with.

However, I think Patrick Matte’s color halftone filter probably best fits the bill for our application. Patrick’s approach renders the original image into a Canvas element while letting you interactively adjust the level of detail.

It’s a great solution and if used in a ‘Wildcard-like’ layout, would allow ‘live tweaking’ of the effect without creating any legacy issues.

It would be interesting to know if Khoi’s team considered building a filter like this, but decided not to – perhaps for performance reasons on IOS. Performance for Patrick’s canvas solution seems fine on the web.

Nevertheless, there’s no denying that Wildcard is a beautiful design and a great UI. I suspect we’ll be seeing the ‘halftone dot’ quite a bit over the next year.

Originally published in the SitePoint Design Newsletter.

Frequently Asked Questions about Halftones and Dots