Hackernoon:
>If you haven’t been immersed in iOS interface design, you might look at Apple’s icons and think that they’re just a rounded square or a ‘roundrect’. If you’ve been designing icons, you know that they’re something different and may have heard the word squircle used (mathematical intermediate of a square and a circle). And if you’re an Industrial Designer, you recognize this as a core signature of their hardware products.
>
>Ever since iOS 7, app icons went from being rounded squares to something more complex and refined. While everyone gets that Apple pays attention to the most minute details, not everyone sees the obvious logic behind this seemingly small change.
This is a really interesting article. It would be even more interesting if I was smart enough to understand half of it.
The normal way of rounding is by simply putting a circle over the corner. However, a circle has a constant rate of curvature so right where the circle meets the flat end and stops curving, there is an abrupt change in curvature, creating the sharp edge in the highlights.
Apple’s main difference is that the curve at the edges start with a smaller curvature and gradually increase in the middle. It’s a more gradual curve at the edges than a simple flat edge to circle but curves more in the middle than a circle.
I’d never thought about this before, but for a design perfectionist, the idea of a curved edge meeting a straight edge must seem appallingly inelegant. It is obviously contrived.
Opposite of contrived? “Organic.” “Natural.” And, “beautiful.” Exactly the language we associate with Jony Ive.
I love the line crediting this to Steve Jobs. It may be true, but he died in 2011 and this shipped in 2013.
I also remember a lot of whining from the usual graphical designers when this change took place, because they couldn’t make any sense of it.
Think of this in terms of driving. If roads were designed so that one instant you were going straight and the next you were moving on a curve the car (and driver) would need to make that transition instantly. Which they can’t so roads are designed in the same way, they start by curving a bit, curve the most at the apex and then ease off again. In math terms you want a smooth change in the the rate of change.
http://www.ugpti.org/dotsc/engcenter/downloads/HorizontalCurves.pdf
Short version: Apple’s curves are C^2, other’s only C^1.
[C^n: n times continuously differentiable]
That’s a good example for “you only see what you know”. But once you know it, you see it everywhere.
I see the practical value and elegance of this choice for solid objects like Apple’s physical products, or like Joerg Beekmann’s road-curvature comment below.
But for screen-based icon design, the considerations are less about practicality for me than they are about consistent branding.
Thanks for that link. Since I’m not seeing “hyperbolic” or “parabolic” mentioned in either writeup, does that mean neither is a mathematically appropriate adjective for this design detail?
The “curvature comb” helped me visualize it, but then I’ve done a bunch of illustrations for math textbooks.
Thanks Joerg. That helps a lot. I appreciate the dumbing down of it for me. 🙂
It wasn’t giving credit to Jobs for the icon design. It was giving him credit for insisting on that level of detail be required throughout Apple and insisting on top of the line quality, instead of allowing cost cutting short cuts.
I read it again and I can see that. Fair enough. 🙂