✎ Corner Radiuses of iOS Icons at Different Sizes
I still see icons getting this wrong, and there is some misinformation about which numbers to follow. Hicksdesign has the accurate numbers, and they are as follows:
Icon512.png 512px 89.825
Icon.png 57px 10
Icon@2x.png 114px 20
Icon-72.png 72px 12.632
Iconemail@example.com 144px 25.263
Icon-Small.png 29px 5.088
Icon-Small@2x.png 58px 10.175
An easy rule of thumb if you want to create a matching inner radius is to subtract the spacing from the outer shape from the corner radius. Ie, if I make a roundrect at 57x57 with 10 px radius (the standard iPhone shape), then make an inner shape that’s 49x49, 4 px from the edges, the matching corner radius would be 6 px (10-4 = 6).
✎ Black Status Bar in iOS 6 Gives Apps Slightly Rounded Corners
Jordan Borth noticed that apps such as Tweetbot running under iOS 6
b4 (Mitch Bernstein says it’s been in all betas) got a 2.5 pt corner radius added on top of it. Jordan says this only happens when the developer has chosen the black status bar style.
The black status bar has become increasingly popular among app makers and designers such as myself because it blends nicely with black hardware, and allows for nice rounded corners around the app, making the app feel like it’s own “unit”. This thinking was pioneered by Palm with the Palm Pre which made heavy use of this design choice throughout the OS, making things like notifications appear to happen on the hardware bezel.
Apple must agree with this thinking. What both Jordan and me found a bit disappointing is the exact radius the’ve chosen; 2.5 pt or 5 retina pixels, which is really quite tiny. I’ve always kept the radius to 5 pt (10 retina px). Sparrow even has double that, 10 pt (20 retina px). So this slight corner radius won’t be very noticeable. Dean Mayers hopes for some added consistency:
The radius size is stranger because notification centre has bigger corners. 10px I think
But since they’re essentially forcing this on apps with the black status bar, they probably wouldn’t want to make it too in-your-face as it does change the character of an app quite a bit.
And if you prefer the larger radius, you can still add it manually like you’ve used to.
Worth noticing is that the corner radius is on a system level, so if the app allows you to move the navigation bar out of place, it will become obvious that it’s not the bar itself that is rounded. Such as in Safari:
Thanks to Jordan Borth for the discovery and screenshots!
Erik Olsson adds:
This will end with completely round apps in a few years :)
✎ Podcasts app and skeumorphism
I don’t know why people get so upset over Apple’s Podcasts app with a reel to reel deck on the new playing screen. It’s a beautiful illustrative element for a screen that otherwise would be quite dull. Watching it is almost hypnotic.
You could argue it doesn’t make sense as a metaphor for podcasts, but it’s fun. It’s that simple. Get over it and carry on.
✎ Nostromo Wallpapers
After me and my girlfriend saw Prometheus, I had to watch the original Alien movie again. The walls of the cryochamber jumped out at me, as I used to draw similar patterns in my sketchbook. I decided to recreated the room for a wallpaper. It was made in Cinema 4D, with touchups made in Photoshop afterwards.
Head over to Max Themes to download!
✎ Similarities in the score to Alien, 1984 Macintosh commercial and Prometheus
Ridley Scott directed all of the films/commercial mentioned in the title, and all three of them use the same kind of sonar-like score. I think it’s pretty great. (I’m sure I’m not the only one who noticed this, but only now did I think to mentioning it)
Have a look & listen: