App Icon:

If you haven’t yet, go read Apple’s Human Interface Guidelines. No, really.

Once you have figured out what your app icon is going to be you need to make several versions so that whichever device a user experiences your app, there is the right version of your app icon available. Sounds tedious, right?

You get the picture… in every size

OR You can upload your app icon image (1536px X 1536px for best results) to MakeAppIcon and it will generate all the versions you need!

Then, once you have your app icon sizes, drag and drop the whole folder into Assets.xcassets and label the folder “appIcon”. You should see that all versions are there and in the right places, which developers used to do manually.

Tip: When uploading your image into MakeAppIcon make sure that your image does not have any transparent parts if it’s a png, or those sections will become black.

Now, you may have noticed that my app icon breaks most of Apple’s Human Interface Guidelines:

Embrace simplicity. Find a single element that captures the essence of your app and express that element in a simple, unique shape. Add details cautiously. If an icon’s content or shape is overly complex, the details can be hard to discern, especially at smaller sizes.

Provide a single focus point. Design an icon with a single, centered point that immediately captures attention and clearly identifies your app.

Design a recognizable icon. People shouldn’t have to analyze the icon to figure out what it represents. For example, the Mail app icon uses an envelope, which is universally associated with mail. Take time to design a beautiful and engaging abstract icon that artistically represents your app’s purpose.

Keep the background simple and avoid transparency. Make sure your icon is opaque, and don’t clutter the background. Give it a simple background so it doesn’t overpower other app icons nearby. You don’t need to fill the entire icon with content.

Use words only when they’re essential or part of a logo. An app’s name appears below its icon on the Home screen. Don’t include nonessential words that repeat the name or tell people what to do with your app, like “Watch” or “Play.” If your design includes any text, emphasize words that relate to the actual content your app offers.

Don’t include photos, screenshots, or interface elements. Photographic details can be very hard to see at small sizes. Screenshots are too complex for an app icon and don’t generally help communicate your app’s purpose. Interface elements in an icon are misleading and confusing.

Don’t place your app icon throughout the interface. It can be confusing to see an icon used for different purposes throughout an app. Instead, consider incorporating your icon’s color scheme.

Test your icon against different wallpapers. You can’t predict which wallpaper people will choose for their Home screen, so don’t just test your app against a light or dark color. See how it looks over different photos. Try it on an actual device with a dynamic background that changes perspective as the device moves.

Keep icon corners square. The system applies a mask that rounds icon corners automatically.

Apple’s Human Interface Guidelines

My app icon isn’t simple, includes text, and contains details that are hard to see when small. All in all, it’s a bad app icon.

 

My third take is probably the closest to Apple’s design brief in that it’s simplistic and easily identifiable, but it’s not quite there yet in my mind.

Launch Screen:

A launch screen appears instantly when your app starts up and is quickly replaced with the app’s first screen, giving the impression that your app is fast and responsive. The launch screen isn’t an opportunity for artistic expression. It’s solely intended to enhance the perception of your app as quick to launch and immediately ready for use. Every app must supply a launch screen.

Apple’s Human Interface Guidelines

Depending on how long your app takes to start up, the user might not even notice if you do not have a launch screen, but first-time app launches, or if the app hasn’t been run in a while, tend to be a bit longer, but because of the (hopefully) quick load time it’s best to keep the launch screen as simple as possible.

However, so that we don’t show the user a blank screen as a first impression, we can show them the basics of our app home screen first. That way it looks to the user as if the app is starting quicker, and is a smoother starting process than a jarring white screen before our app starts.

Avoid using text because it probably won’t be rendered.

I have kept the logo from the launch screen and the logo from the first actual screen misaligned to illustrate the transition.

As a general guide, Apple suggested at WWDC 2019 that the launch time should be no more than 400ms to render the first screen.

You can edit the launch screen by editing LaunchScreen.storyboard, but remember that only images will be rendered on the launch screen. Keep it simple.

I repeat, to myself mostly, keep it simple.

Leave a Reply

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