Squirclemorphism in interface design

Have you noticed the rise in popularity of this trend?

Recent years have been rich in new styles of UI design. From simple flat design, Material design to neomorphism, and glassmorphism… Although I m not as good a trend hunter as Michal malewiczI m sure I found something … Let s dive into the world of squirkles (superellipses)!

Squirkle? What is it?

It is not a rounded rectangle or a circle. This figure is unique, but it has tremendous significance. It was first seen in digital design with the introduction of iOS 7. A squircle mask was applied to app icons. Since then, designers have come to love this shape.

If you want to know the formula behind it, check out description from Wikipedia or research by Figma Engineere…

Dawn of squirclemorphism

Squirk was originally used to recreate iOS app icons. As I mentioned, the difference between the standard rounded rectangle and the superellipse was small but noticeable. We always strive to make our designs look modern, which is why we wanted the app icons to be masked with this new shape.

Then the designers realized that it could be used for other elements. Some of us started using it in the corners of cards, others made elegant icons. This was just the beginning …

Now you can find squirkles everywhere in various forms in UI design. The superellipse mask applies to entire pages of mobile apps!

The ubiquity of squirkles prompted me to call this trend Squirclemorphism! Interestingly, the style itself is only about using the superellipse shape. It can be associated with neuomorphic or glassmorphic elements.

You can see them on Instagram

I initially noticed that superellipses are becoming more and more popular on Instagram because the feed is full of new creations. On Dribbble, I usually search for specific items or categories and it was harder to spot a new uptrend.

You can see them on Dribbble

I love browsing designs on Dribbble for inspiration or interesting styles and compositions. Enter “squircle” in a Dribbble search and you will see hundreds of results.

As you may have noticed, most designs are only created to showcase the skills of their creators. They are not used in real-world applications.

Squirkles in Figma

By default, rounded corners indicate the correct radius. But this only applies to rounded rectangles, not superellipses.

To achieve a special shape, you need to add “Corner Smoothing” to the corner radius. To activate anti-aliasing, you must click the corner radius icon to display detailed radius settings for each corner. Then, under the three-dot menu icon, you ll find the “Corner Smoothing” option. Click on it and you will see a pop-up window with a slider.

If you want an iOS-like effect, set the value to about 60%, for maximum effect use 100%. It s that simple!

Squirkles in Sketch

Making squirkles in Sketch is even easier. Once you have your rounded rectangle layer, all you need to do is go to the Inspector panel (the one on the right) and select the Radius (Round Corners) drop-down list. Change the parameter to “Smooth Corners”. That s it, your squirkle is ready !!

Output

Many trends have emerged in recent months. Squirrelmorphism started with a small element – iOS7 app icons. It now applies to almost all elements with rounded corners. Obviously, not all squirkles are great in real-world applications, but this trend is certainly inspiring.

What do you think about squirting morphism? Are you using shapes with smooth corners?