It’s often easy to generalise about aesthetics. We’ve spoken about app icon trends in the past in terms of there being three-dimensional, flat, and almost-flat icons, but this doesn’t really tell the whole story. There are many, many other ways to play with perspective and dimension using a simple design—like an app icon—and obtain some pretty trippy results.

One way of doing this is by creating icons in a ‘nearly 3D’ style. If almost flat icons are 2D images with elements creating multiple visual planes to emulate depth, then almost-3D icons are 3D images wrapped around a 2D icon. This gives them a very strange visual appeal – the sense of perspective and depth is so strong that the 2D icon is almost photorealistic, with a powerful 3D effect.

Jelly cake icon
Image courtesy of Erfan Nuriyev

One of the big challenges of creating a 3D look on a two-dimensional plane—and this goes for normal 3D icons as well—is that artists must stay more or less within the boundaries of the strict resolutions that OS developers like Apple and Google demand for their systems. It’s quite difficult to create a convincing 3D look at resolutions that small.

Where animators or 3D programmers rely on the almost physical spatial and aesthetic relationship between an object and its surrounding environment in three dimensions, the challenge app icon designers must face is much harder. Space, and being able to easily give viewers a sense of depth, is much more of a luxury thanks to the flat, 2D boxes we’re forced to work within.

For that reason, we have to make do with what we’ve got. The challenge then becomes that of building a 3D-looking space within the confines of that small, two-dimensional space. It’s not actually that straightforward.

An app icon is necessarily always ‘front-on’, which creates a sense of forced perspective and makes it difficult to easily convey an image in its three-dimensional glory. We can only look at the elements within it from one angle—our perspective can’t change—so one major asset in creating 3D images is already lost to icon designers.

A way around this is by using the elements within the icon to create a sense of spatiality. You’ll notice in the example images that a lot of almost-3D icons fill the default icon frame completely, but use false viewing angles to give them depth. This pizza delivery app icon, for example, is completely flat—but notice how it uses subtle texturing towards a very slight vanishing point on the top of the lid, along with clever layering, to give the feeling of a real pizza box being opened. (Incidentally, food icons really seem to be leading the way in this style right now.)

Pizza icon
Image courtesy of Ryan Ford

This brings us onto our next point—how designers can achieve a nearly-3D look. While you can’t as easily manufacture an actual 3D object due to the constraints of a 2D visual plane, you can (and probably need to) deploy some pretty clever use of texture and shadows.

This is really what separates an ‘almost-3D’ app icon from a 3D icon—it cleverly mimics 3D imagery using bold colours, rough textures, and soft shadow in a photorealistic way, rather than relying on ‘space’ as a 3D render might. Aesthetically, it stands out from other kinds of icons without being ostentatious, while sitting comfortably alongside apps of all styles, thanks to its use of uniform icon sizes.

So crack out your digital easel, brush sets, and best Photoshop skills. It’s time to trick people into thinking your icons are 3D. And no, your long, flat shadows aren’t welcome here anymore—they’re what Bogdan Sandu of Design your way rightly calls “mad, pointless, and inappropriate.

Need custom 3d icons?

Is your App not converting like it should? Want to stand out from the crowd?

Get 3d icons now!

Adam Parrish

Owner and creative director at Creative Freedom Ltd. Unbelievably cool icon design expert, husband, and father of two awesome girls. A proper decent chappy and thoroughly fab to work with. Ok, so I wrote my own bio…

Leave a Reply

Your email address will not be published. Required fields are marked *