Circling the Square: Designing with “Squircles” Instead of Rounded Rectangles [ARTICLE]

To a casual observer, the difference between a squircle and a rounded square can appear negligible and sound semantic. But Mark Stanton, a product and industrial designer, is attuned to the squircular shape’s potential. He says “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.”

Non-Apple versus Apple hardware, image via Mark Stanton

A squircle is a mathematical intermediate between a square and a circle (and a portmanteau of the words ‘square’ and ‘circle’). One “secret” of Apple’s physical products, Stanton explains, “is that they avoid tangency (where a radius meets a line at a single point), and craft their surfaces with what’s called curvature continuity.” In side-by-side hardware shots, it is easy to see how the dynamic approach informs shapes and eliminates sharp transitions between flats and curves.

Difference between a rounded rectangle and squircle, image via Mark Stanton

The distinction is reflected in Apple’s software as well, where iOS icons have gone from being rounded rectangles (or: roundrects) to squircles. It doesn’t really make much of an on-screen difference, but it does bring hardware and software designs into alignment. In turn, this has implications for anyone designing icons for Apple devices and interested in implementing precise details, like uniform borders.

So why aren’t squircles everywhere? For one thing: a squircle involves complex curves while a rounded square is easy to define, draw and model — flat edges for the sides, simple curves for the corners.

Tangency versus curvature continuity, image via Mark Stanton

“Companies used to have more excuses,” recalls Stanton. “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.”

A not-quite-squircular plate design

These days, squircles are easier to make and can be found in more and more graphics and objects. The shape also has some advantages for physical products beyond handheld devices. A squircular plate, for instance, can hold more food than a circular one of the same horizontal dimensions, but eliminates the sharp edges of an otherwise optimal square. Still, buyer beware: most products boasting the shape seem to be trading more on the word “squircle” than its actual geometry — you may have to settle for a stack of deformed roundrects instead.

Source: http://ift.tt/2g5VkHY

Leave a Reply