Bjango home
Articles
Help
Contact
iStat Menus
iStat for iOS
Consume for iOS
Skala
Skala Preview
iStat Server
for Mac
See all apps

Just like print design

“If you want to see the future of software UI design, look to the history of print design.”

After some thought, I’ve decided that I agree with John Gruber and Dave Wiskus, but not for the same reasons. I don’t think Retina displays have much to do with it at all — in fact, Retina displays are even better at displaying subtle textures, lighting and shadows. Those extra pixels go a long way in providing additional suspension of disbelief for realistic user interfaces.

Like many trends in technical areas, interaction design is being led by technical ability.

8bit games looked 8bit-y, because of limited colour palettes and giant pixels. 16bit games looked 16bit-y because of better colour abilities and slightly smaller pixels than their 8bit counterparts. Newer games look newer, because GPU hardware developed to the point where full 3D games were possible. These aren’t stylistic choices, they’re hardware limitations, dictating how software looks.

In the same respect, print design has limitations to work with. Most body copy in print design is black, because of hardware abilities — black is one of the four printing plates, so it can be reproduced at high quality, with sharp, fine lines needed for text. Back off a little to a mid-grey and the quality drops significantly, because you’re still using black to print, but you’re building mid-grey from a dither pattern of small black dots on white paper. It’s a trick. There is no mid-grey, only black or white. And because of this, smallish text printed as mid-grey looks horrible (please note that I’m talking about typical four colour CMYK offset printing, not the use of special colours).

Some gradients in print design are hard to reproduce. Subtle edge lighting effects are a often disaster, due to press registration (alignment of the colour plates). Shadows against the paper colour almost never look good, because very light colours are hard to print, so there’s typically a hard edge at the light end of the shadow, cutting it abruptly. Some colour combinations are a disaster to trap.

Print design looks like print design, because there is no other choice.

And just like print, I believe that all non-iOS platforms have settled on mostly-flat interfaces due to technical constraints. Both Android and Windows 8 target many display sizes, ratios and pixel densities. Android also targets incredibly low end hardware, as well as high end hardware. These factors are vital when critiquing platform design choices.

In interface design, square finished corners are faster, because there’s no masking. Not including shadows is faster, because there’s less compositing. Drawing a flat colour is faster than drawing a gradient. When you have three or six pixel densities, drawing sharp textures is almost impossible, unless you include bitmap assets for every size you’re targeting.

iOS is like iOS, because it can be. Because the hardware is so tightly linked to the software.

I love Letterpress and I do think its interface is both modern and good-looking. I also love The Incident, in all its 8bit glory. And I love Clear. I love many flat-design apps. But I also think we’re only one “holy shit, that’s a user interface?!” moment away from the next pendulum swing back in favour of realism. Chances are that app will be on iOS.

So, yes, the future of UI design will be like print design — marred by technical constraints, resulting in certain style choices being popular.

Other articles

Gradient maps
Strokes in Photoshop CS6
Just like print design
Layer tags
Using algebra to create paths
Sub-pixel text rendering
Photoshop Actions & Workflows
Scale Patterns to 100% script
Text in Photoshop CS6
Masking in Photoshop CS6
Illustrator and app design
Vector shapes in Photoshop CS6
Photoshop CS6 improvements
Pixels per inch is just a tag
PNG compression and iOS apps
Everything is a grid
Smart Objects
Exporting from Photoshop
Iterate Podcast
Pixel perfect rotation
Pixel perfect vector pasting
Pixel perfect vector nudging
What if iChat was one window?
Gradients
Designing for Retina display
Designing for Retina display, part two
A new Drobo Dashboard icon
Noise and textures
Photoshop CS6 wish list
What to do with all those extra pixels?
Photoshop roundrect roundup
Colour management and UI design
How many layers are in my PSD?
Dissecting iTunes and App Store links

About the author

Marc Edwards is the Director & Lead Designer at Bjango. Follow @marcedwards on Twitter and @marc on App.net.

  • Bjango on Twitter
  • Bjango on Dribbble
  • Bjango on GitHub
  • Bjango on App.net
  • RSS Feeds
  • Marc on App.net

©2013 Bjango Pty Ltd. All rights reserved. ABN 88 062 334 580.
Apple, the Apple logo, iPad, iPhone, and iPod touch are trademarks of Apple Inc., registered in the U.S. and other countries. App Store is a service mark of Apple Inc.
Assembled with a hex key.