The Mathematics and Design History of Squircles: From iOS 7 to Geometric Principles
By
kjeetgill
Front-window bakery material. Catches the eye, delivers the goods.
Summary
The article explores the history and mathematics of the 'squircle' shape, tracing its origins from Apple's iOS 7 redesign to its deeper mathematical foundations. The author shares a personal journey of discovering squircles, their mathematical properties, and how they represent a design evolution from simple rounded squares to more organic, mathematically-defined shapes. The piece connects design aesthetics with mathematical principles, examining how subtle shape differences can significantly impact user experience and visual perception.
Key quotes
· 4 pulledThey'd gone from squares with rounded corners, to squircles (a portmanteau of 'square' and 'circle').
A squircle begins as the old rounded square, but with some sandpaper applied to the part where the rounding begins on each side of each corner so the transition from straight to curved is less abrupt.
Articulating this using mathematics...
My story begins long before I started at Figma, on June 10th, 2013, the day Apple released iOS 7.
You might also wanna read
What Makes an Interface Feel Great: The Power of Intentional Design
The article explores what makes interfaces feel great, arguing that it's not a single feature but many small details that accumulate. In the
interfaces.dev·1d ago
Laws of UX: A Collection of User Interface Design Best Practices
Laws of UX is a collection of best practices and principles for user interface designers. The content covers key UX concepts such as the Aes
lawsofux.com·1mo ago
AI's Impact on UX Design: Blurring Lines Between Design and Engineering
The article examines how the rapid adoption of AI is fundamentally changing the UX design profession, blurring traditional boundaries betwee
Smashing Magazine·1mo ago
Session Timeouts as Accessibility Barriers in Web Authentication Design
The article discusses how poorly implemented session timeouts in web authentication systems create significant accessibility barriers for pe
Smashing Magazine·1mo ago
Practical Guidelines for Improving UX in Legacy Systems
This article provides practical guidelines for improving user experience (UX) in legacy systems within organizations. It addresses the chall
Smashing Magazine·1mo ago
Designing Transparency for Agentic AI Systems: Finding the Right Moments for Clarity
This article explores the design challenges of agentic AI systems, focusing on how to provide appropriate transparency without overwhelming
Smashing Magazine·1mo ago