Since Apple moved to a flat design for iOS 7, there’s been lots of discussion over what it means for designers and how it will impact the layout and function of apps as it evolves. The new approach marks a move away from Apple’s skeuomorphic schematics of the past and toward a future where the operating system is more fluid, moving effortlessly between devices such as the iPhone, the iPod and, in the very near future, the iWatch and iTV.
Of course, with every major redesign, and especially one that involves an 800-pound gorilla like Apple, designers and app developers will wonder how it impacts best practices. Here’s an update on best practices for creating flat iOS icons, as well as some helpful resources and flat-icon apps you can look to for inspiration.
Some Tips from Mike Stern
Apple UX evangelist Mike Stern apparently anticipated many of the questions people would have about the new iOS 7. He put together a presentation of six things to keep in mind while designing a flat app icon. Here’s a summary of his main points.
1. Develop a Unique Shape
You want a shape that is distinctive and recognizable, something that sets you apart from other apps. Because the icon will grow and shrink depending on the device being used (it’s smaller on your iPhone than on your iPad), you also want something that will transition well between big and small. The icon for Vimeo is a good example of an image that transitions well — it’s just a plain shape, a V, but it’s distinctive enough to set itself apart from other apps.
2. Select Your Colors Carefully
Be discerning when choosing a color. This is one case where more isn’t necessarily merrier. A single color or color family often will make your app stand out better than multiple ones.
3. Don’t Use Photos
If you can avoid using a photo for your app icon in iOS 7, do. Use your creativity to come up with a graphic design that is more interesting than a simple photo.
4. Use as Little Text as Possible
The less text in your icon, the better. It distracts from the design and takes up unnecessary space. Use a logo instead to signify your company.
5. Show What You’re Doing
If there’s any way to convey the idea behind your app in the design, go for it. It’s a great way to marry visuals and intent, and it gives your app extra pop.
6. Be Creative
This perhaps goes without saying, because the goal of any design is to be creative. This is especially true with icons. You want people to notice your design, and the best way to do that is to deliver something unique.
Where to Look for Help
Now that you know what you should be doing with your app design, here are some resources to help you along the way, including a great cheat sheet that will save you loads of time.
The iOS Design Cheat Sheet
Apple made so many updates on iOS 7 that older cheat sheets just won’t cut it. This updated iOS design cheat sheet puts information on resolutions, display specifications, new dimensions, user interface and more right at your fingertips. There’s also a very helpful section on rounded corners that covers the new shape Apple invented with this new release, called the superellipse.
Apple’s Design Page
You can also go straight to the horse’s mouth, as it were, to answer your design questions. Apple has a page outlining the design options for iOS 7. Of course, it’s equal parts sales and tips about design, since it is an Apple site. It includes a video about the new iOS and lots of detailed pictures that break down the changes in the redesign.
App Icon Template
This free site is a Photoshop-compatible resource that simplifies the process of making icons. When you make edits on the App Icon Template, it automatically figures out the changes in size for iOS 7, and it has textures and colors you can incorporate into your design. It’s an especially good program for those designing in iOS 7 for the first time.
Now that you’ve read about the best practices and some resources, why not check out some great examples of flat iOS app icon design for inspiration? Got any more advice for fellow app icon designers? Share in the comments below!Buffer