25

Smooth corners are gaining more and more attention recently in UI design. enter image description here

As a designer of iOS mobile apps, I recently tend to design only with smooth corners as it just makes the look and experience much nicer. Also, looking at iOS's design language in the past few years, it seems like iOS uses smooth corners everywhere in the system. Here's an example from iOS Control Center:

enter image description here

My question is, should we sometime prefer "regular" rounded corners over smooth corners, and why?

9
  • 80
    Sorry, maybe my eyes are too old but I can't see the difference in your example and couldn't find anything on Google, both terms are interchangeable on most pages. Do you have a reference guide or something?
    – Devin
    Feb 15 at 17:08
  • 16
    Look for squircle. UX explanation here. About the shape construction here.
    – Danielillo
    Feb 15 at 17:20
  • 15
    @Danielillo It's nothing to do with the shape. I subtracted both buttons from each other and there's no difference - the anti-aliasing is a bit stronger on the rightmost button. That's it. These are identical buttons.
    – J...
    Feb 16 at 19:21
  • 7
    This article may help clarify the difference: circular corners have constant curvature and introduce a discontinuity in curvature where they meet straight lines. Regarding "smooth corners", I believe this question is referring to corners that have variable curvature along their length, allowing them to gradually approach zero curvature where they meet straight lines, avoiding the discontinuity. As to whether or not there's any objective reason to prefer one over the other: I have no idea! Feb 16 at 21:02
  • 13
    I'm surprised no one has posted this yet: a picture showing a squircle and a rounded square on top of each other. Taken from Wikipedia. Feb 17 at 9:36

4 Answers 4

39

I think it's more of an aesthetic or fashion decision than something inherently functional. Anyway, here's an argument.


Most of the components in an interface are framed within an orthogonal grid, such as the example in the question. In fact, the screen itself responds to Cartesian axes, we have not yet reached the oval or formally fluid screen. This image shows a basic layout grid with its respective items where both elements are clearly perceived:

enter image description here

This type of layout not only emphasizes the structure but interferes with a clear perception by adding a third element: the gutter. The grid alone, while simple, is perceptually too complex:

grid

Sometimes the designer prefers to avoid the clear preponderance of the base grid or eliminate these gutters from the root to simulate a less structured, more natural design or simply give more relevance to the items. The extreme would be the item with a fully rounded frame or circle:

circles

By eliminating the edges of the shapes, the optical center becomes more visually relevant, each item is placed at the intersection of the axes of the structure lines (a). The gutter gets totally diluted. Perceptually it's much simpler:

enter image description here

The orthogonal shapes with rounded corners try to weaken the marked Cartesian axis of the base structure. But, while the gutter is still clearly perceptible, the rigidity of the union between the curve and the side generates a new element: the grid illusion.

grid 2

Smooth corners are an optical arrangement to simplify visual perception, trying to avoid the mismatches described without dispensing with the use of orthogonal shapes, replaced by circled squares: squircles.

squircle

4
  • 1
    Awesome answer. Just don't try to calculate the circumference of squircles! youtu.be/gjtTcyWL0NA
    – D. Kovács
    Feb 16 at 7:35
  • 8
    Do you mean the squircle picture at the end should not have the grid illusion? Because for me the grid illusion is profoundly stronger on that than on the rounded-corners picture above it.
    – Graham
    Feb 16 at 10:18
  • 4
    Hi Graham, I don't usually give absolute dogmas in my answers. As written, the use of squircles "tries to avoid" the issues described in the previous points.
    – Danielillo
    Feb 16 at 11:58
  • For me, the squircles give a grid illusion that is visibly "background". I find that I can imagine the gaps as foreground and the squircles as background, or vice versa, but I struggle to perceive both the squircle grid illusion elements and the squircles themselves as belonging to the same layer.
    – user7868
    Feb 18 at 13:20
5

When and why should we choose rounded corners over smooth corners?

When your target platform tells you that you should.

This is nothing more than a trend and if you want to stay "relevant" then you follow the trend.

All of this boils down to consistency. The ecosystem's UI certainly has a look to it but inside of your app you could implement a different look as long as it's consistent.


My question is, should we sometime prefer "regular" rounded corners over smooth corners, and why?

The differences are too subtle to notice in your examples, to be honest. Nobody besides you and some ardent designer that decided to rate your app and mention the choice of squircle would ever notice.

At some point you'll realize that Apple moved on to NURBS or Beziers and your wild goose chase starts all over again; colloquially known as the "Seventh Squircle of Hell".

1

Interesting question. One reason is that

the squircle and other superellipses can be scaled up or down quite easily. This is useful where, for example, one wishes to create nested squircles.

The same Wikipedia article lists uses for squircles:

Squircles have also been used to construct dinner plates. A squircular plate has a larger area (and can thus hold more food) than a circular one with the same radius, but still occupies the same amount of space in a rectangular or square cupboard.

Many Nokia phone models have been designed with a squircle-shaped touchpad button.

Italian car manufacturer Fiat used numerous squircles in the interior and exterior design of the third generation Panda.

Apple Inc. uses a shape that resembles a squircle as the shape of app icons in iOS, iPadOS, and macOS (as of macOS Big Sur), but it is not actually a squircle but an approximation of a quintic superellipse. The same shape is seen on the home button in iOS devices with a home button but not Touch ID (currently only the iPod Touch).

One of the shapes for adaptive icons available in the Android "Oreo" operating system is a squircle.

The logo used by Instagram since 2016 includes a squircle forming the outline of a camera.

0

Smooth isn't really a good term for this. How round the corners are is one good way to describe it. Corner radius is how to measure how round the corners are. The corner radius on your examples are really close.

Material design is getting rounder. The latest version of Material Design has gone totally round, no corners any more. They've also made their buttons taller and use lower case text to add to the roundness.

From Material Design 3:

enter image description here

Here's a comparison of current design and new design.

Material Design Two buttons:

enter image description here

Material Design Three buttons:

enter image description here

4
  • What if a design has both buttons and chips in it, though? Couldn't that be confusing?
    – Izquierdo
    Feb 17 at 23:15
  • @Izquierdo not sure how but here's chips m3.material.io/components/chips/overview
    – moot
    Feb 18 at 6:10
  • OK, so in M3, chips become buttons and buttons become chips... :P
    – Izquierdo
    Feb 18 at 21:34
  • @Izquierdo yeah, looks they just swapped them
    – moot
    Feb 19 at 6:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.