👨‍🎨 Creating an App Icon with Zero Design Skills 🎨

Welcome to issue #47 of the iOS Coffee Break Newsletter 📬 and to the 10th edition of the "Building a Newsletter App" series.

Last week, I walked you through the process of localizing my newsletter app using a String Catalog, enabling support for two languages: English and Portuguese.

As the app evolves, one thing that keeps catching my eye is the blank placeholder icon. Hiring a designer is always an option, but if you are on a budget or just enjoy learning, why not try creating one yourself? 😉

This week, I will walk you through designing a simple app icon — even if you have zero design experience like me!

The Plan

As developers, designing app icons should be on the bottom of our priorities. Yet, here we are, so here is the plan for crafting a version of our app icon:

• Creating a placeholder App Icon
• Understand the key principles for designing better app icons
• Creating the first version of your app icon
• Tweaking the design until it feels right

Creating a Placeholder App Icon

As I mentioned earlier, the default blank placeholder icon bothers me. But it doesn't have to stay that way! With AI tools, you can generate a simple app icon by providing a prompt.

Personally, I like using Bakery, a macOS app by Jordi Bruin, to quickly create a placeholder icon. Just pick a background color and a symbol or emoji and the app generates a preview. If you are happy with it, simply drag and drop it into Xcode.

Here is the placeholder version of my app icon.

Not bad right? Yet, I believe I can do better!

Understand the Key Principles for Designing Better App Icons

I am no design expert, but I have learned some essential principles from Flora Damiano, who gave a great talk at Swift Leeds 2024 on crafting app icons.

Here are the key aspects to focus on. Make your app icon:

• Versatile: Keep you icon legible at every size on every device you are developing for
• Consistent: Your icon should resemble your App's identity
• Original: Use color and shape to convey your App's soul in a unique way
• Memorable: Create an emotional connection with the user of your App

Creating the First Version of Your App Icon

I use Sketch to prototype my app icons, but you can achieve similar results with any design tool of your choice. If you are new to Sketch, I recommend checking out their guides and courses to learn the basics.

Your icon should be designed at the proper resolution to be implemented in Xcode. In iOS and macOS, for example, the icon has to be sized at 1024x1024px.

Once the icon is designed, it needs to be exported in multiple sizes and resolutions. Thankfully, Apple's Design Resources provide free Sketch and Photoshop templates. Simply insert your icon, and the tool will generate all necessary assets for Xcode.

You can grab the app icon Sketch template from Apple's Design Resources. In this guide, you can see how to open the template in Sketch.

iOS Coffee Break Newsletter Sticker

At Swift Leeds 2024, I ran a marketing campaign for the newsletter by sharing stickers with fellow developers. That gave me a solid starting point for my app icon design. Here is the initial version:

While I like how the icon looks, there is a major issue — the lettering isn't readable on a iPhone/iPad screen. Unfortunately, that means this version won't work!

Tweaking the design until it feels right!

After creating the first version of my icon, I realized the lettering had to go — it just wasn't working. Additionally, the background color needed more contrast with the coffee cup to improve visibility. So, I explored with different color variations and adjustments until I landed on a final version that I was happy with! 🙂

🤝 Wrapping Up

I can't way to share the app with you! I am almost there, I promise! But before that, I need to set up everything in the App Store to make it available for users.

In the next couple of weeks, I plan to walk you through the process of publishing an app to the App Store. Stay tuned!