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 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. squircle 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. If you’ve spent time tweaking curves in Autodesk’s Alias Studio surfacing software, software that Apple uses, you understand why right away. Apple has created design consistency between their hardware and software. The answer is consistency. Apple’s icons are not rounded rectangles because their hardware products aren’t. Apple products are described as minimalistic, but ‘minimalistic’ shouldn’t be confused with ’simple.’ There’s nothing simple about the surfacing efforts on their hardware products. It’s not something the average Apple product owner is likely to be aware of unless pointed out by their Industrial Designer friend. A ‘secret’ of Apple’s physical products is that they avoid tangency (where a radius meets a line at a single point) and craft their surfaces with what’s called . Once you know how to spot it on products, you’re likely to start seeing it (or more likely the lack of it) all around you. curvature continuity The spotter’s guide to good surfacing. Here are two products that are basic rectangular boxes with a rounded edge (the one on the left also has some unpleasant drafted walls, but that’s another article about how to become a hardware design snob). Look at the beginning and end of that rounded edge on the main surface. See how there’s a sharp shift in highlight? That’s the result of tangency. Now compare with Apple. The MacBook Pro on the right is also a product with two right angled surfaces joined by a rounded curved surface. See how soft the highlights are? That’s not just because the surface finish is matte (yes, it helps). I know I just said “rounded” but of course it’s not round at all. It’s a beautiful, sweet, sexy surface with continuously variable curvature, and one of the reasons Apple products make me love them. Why are they different? Look at the image of the curvature combs below (a way to visualize curvature). Each line of the comb represents the amount of curvature at a point on the curve. On the left, the curvature goes from zero to the value of the radius instantaneously. Sudden change in curvature = sudden highlight. What the Industrial Designers at Apple are doing is designing the highlight. The form follows. On the right you see what curvature continuity looks like. The curvature comb transition is a curve itself, starting from zero curvature. There’s no sudden break in curvature and, as a result, the highlight is smoother. This difference in curvature is harder to spot in an icon, but the important thing is that now the icons and the hardware are part of the same design language. Apple doesn’t have the patent on this. Any company can bring their surfaces to this degree of quality. So why don’t they? Companies used to have more excuses. It used to be that engineering CAD tools weren’t as concerned about this sort of thing. Or engineers might not have been expert in that module of their CAD tools. Or surface design tools and engineering tools didn’t play well together. Or its importance to the bottom line wasn’t recognized. (i.e., not always the designer’s fault). Plenty of Industrial Designers apply this level of craft to the non-Apple products they design. And many are limited by the resources and commitment of the companies for which they design If you’d like to dig deeper, read some really technical surfacing stuff, and find out that there are actually two levels of curvature continuity, check out this on Autodesk’s Alias tool (one of many tools capable of curvature continuous surfacing). tutorial I have to end with more praise and gratitude towards Apple. Especially for those C-levels (Steve Jobs) who put the force of $$$ and commitment to manufacturing excellence behind the attention to detail that every designer dreams of implementing. And now, because of a small change in an icon, all of this is more connected to the software inside. Thanks. Want to talk more about the intersection of Product and Industrial Design? Contact me at stanton(dot)james(at)gmail(dot)com or through . LinkedIn Featured Image Credit, prompt of HackerNoon AI Apple’s Icons Have That Shape for a Very Good Reason.

Apple

AUTODESK

Too Long; Didn't Read

Boost your HackerNoon story @ $159.99! 🚀

Apple’s Icons Have That Shape for a Very Good Reason

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

10 Soul-Crushing Reasons to Abandon the Catastrophic Mess That Is Swift

10 Best Free Vector Icon Resources for App Design & Web Design in 2018

The Noonification: Innovation Is Slowing Down (10/19/2022)

The Noonification: 2024 Just Might Be The Year Crypto Enthusiasts Are Looking For (1/8/2024)

3 Easy Ways to Share Your Location on an iPhone

10 Soul-Crushing Reasons to Abandon the Catastrophic Mess That Is Swift

10 Best Free Vector Icon Resources for App Design & Web Design in 2018

The Noonification: Innovation Is Slowing Down (10/19/2022)

The Noonification: 2024 Just Might Be The Year Crypto Enthusiasts Are Looking For (1/8/2024)

3 Easy Ways to Share Your Location on an iPhone

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps