How to make your app icons look cleaner

How to make your app icons look cleaner

Designer Michael Flarup explains how alpha transparency has made creating app icons difficult, and offers a solution.

A common mistake designers make when creating and bundling iOS app icons is in the use of transparency.

On iOS, all the icons are presented as squares with rounded corners (affectionately called ‘squircles’). However, this rounding is done programmatically by Apple, when the icons are uploaded – not by the designer.

This detail escapes many people when they first try their hand designing an app icon. Alpha transparency is not supported in icons for iOS – designers are required to deliver a square PNG file. If you bundle and upload an icon with transparency through iTunes connect, the transparent areas are replaced with solid black.

Commonly, the designer’s pre-rounded corners are turned black, then programmatically rounded by Apple. This would be fine if it weren’t for the fact that most tools and templates that enable this sort of rounding are ever so slightly inaccurate, due to the notorious difficulty of reproducing the squircle.

This often leads to small black fragments on the rounded
 edges of the icon, where the designer’s pre-rounded mask clashes with the black pixels Apple has introduced.

If you look closely on light backgrounds, you’ll see a surprising number of icons – even from large publishers – that suffer from this issue.

So remember: always deliver full square PNG files when designing iOS app icons.

The option to export icons with rounded corners in popular templates is often intended for use on promotional material, such as on websites and email marketing. Never pre-round an icon before you submit your app to the App Store and never include any transparency.

How Apple Watch will change apps forever

How Apple Watch will change apps forever

The word that sums up Apple Watch and initial apps that will appear on it is ‘limitations’. This isn’t meant negatively. Instead, it’s about focus. Tappable UX head Aaron Humphreys elaborates: “While the tech may be prominent, these devices are limited in terms of functionality, but this makes them beautifully simplistic as a result.” Upcoming Apple Watch apps therefore seem to mostly be concerned with helping you get at information in an accessible, efficient manner.

Apple’s wearable looks set to cause another app revolution. App creators explain why.

The word that sums up Apple Watch and initial apps that will appear on it is ‘limitations’. This isn’t meant negatively. Instead, it’s about focus. Tappable UX head Aaron Humphreys elaborates: “While the tech may be prominent, these devices are limited in terms of functionality, but this makes them beautifully simplistic as a result.” Upcoming Apple Watch apps therefore seem to mostly be concerned with helping you get at information in an accessible, efficient manner.

Humphreys believes this is a refinement more than a redefinition of mobile apps, yet the repercussions could be huge, because of how Apple Watch will be used. “Its intended use is to provide information more unobtrusively than pulling out your iPhone,” says MindNode CEO Markus Müller-Simhofer. “On creating an app, you must ask yourself what is the single most important feature that makes sense on Apple Watch? Only focus on that. Enable the user to spend as little time in your app as necessary, to allow them to get on with more important things.”

This in some ways echoes the iPhone’s launch. Developers clamoured to port existing desktop apps, but rapidly found themselves having to figure out what features made sense on the relatively small iPhone display. “It’s all about condensing things down to what’s truly important – there’s no space for filler,” says developer Gary Riches.

And just as mobile websites and apps impacted on desktop design, he believes the razor-sharp focus required for Apple Watch “is a useful skill to apply to any app”, and the way in which Apple Watch apps are only designed to be used for a few seconds “will go some way to improving overall app and interaction design”.

Previous Next
Close
Test Caption
Test Description goes like this

Pin It on Pinterest