Max Rudberg

Posts tagged icons

Jun 26

✎ iOS 7 Icon Template

I’ve updated my previous icon template to work for iOS 7 b2.

It’s meant to be as true as possible to the on-device look and give you a context of the surrounding that particular icon size will be used in. That way it won’t feel as tedious when you’re working your way through all the variants.

It works beautifully with Slicy, which means you can just drop the PSD on Slicy and it will spit out the PNGs for you.

Furthermore, this template gets rid of deprecated sizes. But from the looks of it, Xcode 5-DP2 does not yet handle the sizes for the Spotlight icons.

Download the template here.

Jun 18

✎ How you should look in iOS 7

iOS 7 puts its emphasis on motion, and the visual UI design recedes to let the content and feel take room. While the OS itself isn’t finished, the thinking behind it and the direction they’re headed is clear.

We’re working on a new app and updates to our existing apps in Filibaba. During this process I’ve consider every detail again, and it felt right to share some of my insights & thoughts with you.

Strip away details. Get to the core of each element in your app. Consider everything from font choices, iconography to UI elements.

The same goes for home screen icons. The default apps does nothing to decorate their rounded shape. No highlights, no borders, no forced perspectives. Consider dropping all of those. Think of it as a peephole into your app.

Smooth transitioning. If you use the same background in the icon as you do in the default.png & the starting point of your app, the transition from the home screen will be near seamless. It now zooms into the icon, which transitions into the default.png and in turn fades out to reveal the starting screen.

Flatten out buttons. You don’t need to go completely flat and strip away all the personality of your app. But buttons don’t need heavy gradients and shadows to communicate that they’re a button. In fact, navbars has no buttons any more, they are just text. Make sure to use a differentiating color to stand out.

Icons can stand on their own. There’s no need to have a button shape around a glyph, the glyph itself is enough to make users understand that they can tap it.

Use shadows sparsely, and make them subdued. With the general lack of shadows in iOS 7, you don’t need much to make an element stand out. Consider new levels of subtlety.

Same goes for textures. There is still a use for textures, but make them subtle. Again, consider new levels of subtlety to the point where you can feel the texture, but barely see it.

Avoid decorating text with etching or shadows. Instead, make sure the color choice works well with the background. If it doesn’t, consider adjusting the background. In Filibaba’s case, we opted to use a gradient effect to darken photos rather than add shadows to text.

Work in Retina resolution. iOS 7 has many elements redrawn to take full advantage of the Retina display. Perhaps adjust certain details to be just 1 Retina pixel. Apple has plenty of hairline dividers of that size.

Be true to the screen. Gone are the efforts to make the screen look as if it has rounded corners. Navbars are square and blends together with the statusbar. iOS 7 lets the content continue underneath navbars and the statusbar. And sometimes you might not even need a navbar, you could just let it blend with the rest of the screen. Think of this on a screen per screen basis. You can have a navbar in one screen, and get rid of it in another.

Edge to edge. Let elements such as photos reach the edges of the screen, realizing that your app is already framed by hardware.

Contrast. iOS 7 is filled with contrast, from pure white apps to utter darkness in apps such as the compass. Consider the contrast of your app, tinker with the brightness of backgrounds.

Don’t be skeuomorphic when it doesn’t hold up. There was never such a thing as a leathery utility to locate your friends. But there are still uses for skeuomorphic designs. Filibaba has an egg timer to invoke that sense of nostalgia or the feel that your smartphone can replace a physical thing. It works close to the real deal, but you can wind it several times, control it with a start & stop button and it displays the exact time.

I’ve questioned design decisions I’ve made previously, and I feel the result is better for it. By considering the new thinking in iOS 7, you can make your app feel right at home when autumn comes.

Update Jun 27: Jeremy Olsen has written an interesting article on the same topic, called Responding to iOS 7. There’s also a Branch with some commentary.

Dec 20

✎ iOS Icon Template

I made this template out of necessity and quickly realized it would be useful for the community. It has the following features:

• See each icon size accurately in its context and make sure it looks its best.

• The icon-small sizes are a bit tricky since they actually crop out part of the icon. If you want a perfect matching inner rounded rectangle, this template will help you.

• Rounded corner radius noted for each icon size. 

• Made for Slicy, just drop the PSD on Slicy and get PNG assets ready for Xcode.

• Optimized for viewing on a Retina screen, i.e. future proof.

Download here


Jun 26

✎ Facebook tweaks the Messenger icon, introduces Pages app

Facebook Messenger got updated with a revised icon, with some subtle gradients inline with the Camera app. And they are now also offering Facebook Pages on iOS for managing your Facebook page.

I hope to see the Facebook app icon updated in the same manner. It sticks out like a sore thumb.

Oct 11

The Importance of a Well-Designed iPhone App Icon

The first thing that will catch your attention when looking at the iPhone is the candy-colored, push-friendly icons that inhabit the home screen. 

The rounded squares that frame the icons makes them look like buttons. The shape is characteristic enough to be printed on the hardware home-button as a representative of the home screen. And with a curved gloss put on top, the impression is a device that looks so good you want to lick it. Or at least pick it up.

Ruining a perfect picture

Ever since the introduction of the iPhone 3G and the 2.0 firmware, users of the iPhone have been able to download third party apps from Apple’s App Store. Consequently, the balanced design present in the stock icons and depicted on every box that the iPhone ships in is quickly shattered once you’ve downloaded a handful of third party apps. Many third party icons fail to reach the same quality.

Stand out in the crowd

Aesthetics might not be the main concern if you are the developer of an app. But I think users are picky with which icons they let inhabit their home screen. Collecting apps and their icons on the home screen is almost like having a physical item, a small gem. If it doesn’t look the part, it might get stuffed a way on a different page or in a folder.

And with the large number of apps on the App Store, it’s becoming increasingly harder to get people to notice you. 

When browsing the App Store, all you really have to guide you is the name of the app and the icon. Based on those two pieces of information you have to decide if the app seems interesting enough to read more about and possibly download.

With so little information to go on, the importance of a well-executed icon becomes apparent. The icon must not only represent the core functionality of your app and communicate your brand, it must also do so in such a visually appealing way that makes it stand out and get the quick scrolling through long lists of apps to come to a grinding halt.

Gloss for everyone

Apple provided an easy way for anyone to become a master of the lickable gloss. You can simply add a squared image to your app and it will automatically be masked in the correct shape and have a pre-made gloss put on top. 

This might sound like an easy way to a good-looking icon. But if your image is pulled off a website or perhaps a photograph, all the gloss in the world is not gonna make it a good icon. It’s like putting lipstick on a pig.

Thinking inside the box

I believe that a successful icon needs to be made from scratch. And instead of seeing the rounded square shape as a limitation, it should be seen as a possibility to be creative. The shape can for example be used to deform regular objects to fit inside. Take a look at the Youtube, Calendar and Notes icons – these are clever examples of how an object can fit into this shape.

And remember that an iPhone icon doesn’t have to have to have gloss either, almost a third of the stock icons does not have it.

A dedicated community

Did you know there is an entire community based around the customization of the home screen icons on the iPhone?

The MacThemes forum is probably the biggest outpost for such icon sets or themes.

The majority still uses the exact same rounded square shape and many are very similar to the design of the original icons. In fact, some of the most popular icon sets are just refined stock and third party icons. 

So if you don’t supply a good icon with your app, chances are someone else will. If they notice you in the first place.