Cracking the iOS 7 icon superellipse formula

Cracking the iOS 7 icon super-ellipse formula

Not only does iOS 7 seem to ever-so-slightly increase the size of iPhone icons, it seems to move away from the more common rounded-rectangle shape to the more complex superellipse. Hopefully Apple will provide tools to make generating curves of this type easier for developers and designers, but in the meantime Marc Edwards of Bjango has been doing a lot of maths (his spelling, not mine!) and has come up with something that seems to match up very well. From Twitter:

The formula for the iOS 7 icon superellipse.

He's also working on Bjango's own interface design tool, Skala and I'd be shocked -- shocked, I say -- if he's not already got superellipses, and likely tesseracts and other geometric wonders, well under way.

Check out the formula and the image proof via the link below.

Source: Marc Edwards

Rene Ritchie

Editor-in-Chief of iMore, co-host of Iterate, Debug, Review, The TV Show, Vector, ZEN & TECH, and MacBreak Weekly podcasts. Cook, grappler, photon wrangler. Follow him on Twitter and Google+.

More Posts

 

6
loading...
0
loading...
32
loading...
0
loading...

← Previously

Chatology: Blindingly fast search for Mac Messages that actually works!

Next up →

Watch the WWDC 2013 Keynote on YouTube

There are 19 comments. Add yours.

SithLord says:

I've been thinking that by the final release Apple will have switched to circular icons actually. The circular theme is so heavily ingrained and plays off the iconic home button nicely, plus many of the new icons themselves seem designed with this in mind.

andrew202 says:

I was thinking that also. iOS 7 clearly adopted circles into its system and I wouldn't be surprised if it has circular app icons. However, all other apps will need to update to the new icons

lbaxter says:

That would probably look good, but it would also look full-blown MeeGo.

Carioca32 says:

I was about to say that, just ask Nokia for the formula.

TheRewardisCheese says:

Circles could definitely work...I remember using a few themes that were based on circular icons and they looked quite nice :)

redbeard says:

Circular icons look horrible, no thanks..

Vanti says:

finally someone that understands. Circular icons offer less space for design and less ways for a dev to express himself because he/she now has to make said icon circle friendly.

thirdprize says:

Currently you supply square icons and just have to allow for the fact that iOS will round the corners off for you. Will be the same with iOS 7.

abazigal says:

I don't understand. What's so complex about the new icon design?

Sent from the iMore App

Carioca32 says:

Nothing really, corners are a little more rounded. Both old and new icon shapes can be drawn with the superellipse formula, but it is very basic math, nothing to it.

stephen007 says:

I'm not seeing any difference with the new icons. They look like rounded squares… just like the current ones. Am I missing something?

kevinbhayes says:

The old icons were rounded rects. The new ones are super-ellipses. The flat sides of the icons are no longer flat, they're slightly curved. The old icons had flat sides.

stephen007 says:

Thanks for the response. I'll have to take your & Renee's word for it. I just went to apple.com and looked really, really closely at the icons. They look the same to me... rounded squares. I even zoomed in on the page. I believe you but I'm just not seeing it.

Carioca32 says:

That makes two of us. If you want examples of superellipse icons, search for Nokia N9.

Carioca32 says:

Rene, you're a smart guy so let's be clear about this superellipse thing.

1) All rectangles are special cases of superellipses.
2) Squares are special cases of rectangles, so all squares are also superellipses.
3) All rectangles with symetrical rounded corners are superellipses.
4) All ellipses are special cases of superellipses.
5) All circles are special cases of ellipses, so all circles are also superellipses.
6) Diamonds are also superellipses.

So Apple used, and continues to use superellipses in all versions of iOS, even if we can only guess at their specific formulas.

pegasusl says:

"1) All rectangles are special cases of superellipses.".....
"2) Squares are special cases of rectangles, so all squares are also superellipses.".....
"5) All circles are special cases of ellipses, so all circles are also superellipses.".....

THEREFORE...

All squares are actually circles! :-)

All