Haben Sie den neuen Trend bemerkt?

Die letzten Jahre waren reich an neuen UI-Designstilen. Beginnend mit einfachem flachem Design, Material, Neuromorphismus und Glasmorphismus . Ich bin zwar nicht so ein exzellenter Trendjäger wie Michal Malewicz , aber ich bin mir sicher, dass ich etwas gefunden habe… Tauchen wir ein in die Welt der Squircles!

Kreischen? Was ist es?

Es ist kein abgerundetes Rechteck, kein Kreis. Die Form ist einzigartig und subtil, macht aber einen großen Unterschied. Es wurde erstmals im digitalen Design bemerkt, als iOS 7 auf den Markt kam. App-Icons wurden mit Squircle maskiert. Seitdem haben sich Designer in die Form verliebt.

Wenn Sie etwas Mathematik hinter der Form entdecken möchten, können Sie sich gerne die Beschreibung von Wikipedia oder die von Figma Engineer durchgeführten Recherchen ansehen .

Aufstieg des Squirclemorphismus

Ursprünglich wurde die Kreisform verwendet, um iOS-App-Icons nachzubilden. Wie ich bereits erwähnte, war der Unterschied zwischen dem abgerundeten Standardrechteck und dem Squircle subtil, aber spürbar. Wir möchten immer danach streben, unsere Designs modern aussehen zu lassen, also wollten wir App-Icons mit dieser neuen Form maskieren.

Dann erkannten die Designer, dass es für andere Elemente verwendet werden könnte. Einige von uns fingen an, es in Kartenecken zu verwenden, andere machten elegante Symbole. Das war nur ein Anfang …

Jetzt können Sie überall in UI-Designs Squircles in verschiedenen Formen sehen. Die gesamten Seiten der mobilen App sind nicht mit abgerundeten Ecken maskiert. Sie benutzen Squircles!

Die Allgegenwart der Squircle-Formen veranlasste mich, diese Trends zu benennen – sag hallo zum Squirclemorphism! Interessant ist, dass es beim Stil selbst nur um die Verwendung der Kreisform geht. Es kann mit neuromorphen oder glasmorphen Elementen verbunden sein.

Sie können es auf Instagram bemerken

Anfangs ist mir aufgefallen, dass Squircles auf Instagram immer beliebter werden, weil der Feed voller neuer Kreationen ist. In Dribbble suche ich normalerweise nach bestimmten Elementen oder Kategorien, und es war schwieriger, den neuen steigenden Trend zu erkennen.

Sie können es auf Dribbble sehen

Ich liebe es, Designs auf Dribbble zu durchstöbern, um mich zu inspirieren und nach Stilen oder Kompositionen zu suchen. Geben Sie Squircle in die Dribbble-Suche ein und Sie werden Hunderte von Ergebnissen sehen.

Wie Sie sicherlich feststellen werden, werden die meisten Designs nur erstellt, um die Fähigkeiten ihrer Schöpfer zu demonstrieren. Sie werden nicht in echten Apps verwendet.

Kreischen in Figma

Standardmäßig geht es bei abgerundeten Ecken darum, den richtigen Radius zu zeigen. Dies erzeugt jedoch nur abgerundete Rechteckformen, keine Kreise.

Um unsere spezielle Form zu erreichen, müssen Sie dem Eckenradius „Corner Smoothing“ hinzufügen. Um die Glättung zu aktivieren, müssen Sie auf das Eckenradius-Symbol drücken, um detaillierte Radiuseinstellungen für jede Ecke anzuzeigen. Dann finden Sie unter dem Überlaufmenüsymbol mit 3 Punkten die Option „Eckenglättung“. Klicken Sie darauf und Sie sehen ein Popup mit einem Schieberegler.

Wenn Sie den iOS-ähnlichen Effekt erzielen möchten, schieben Sie ihn auf etwa 60 %, um den Effekt zu maximieren, verwenden Sie 100 %. So einfach ist das!

Squircles in der Skizze

Das Erstellen von Kreisen in Sketch ist noch einfacher. Wenn Sie Ihre Ebene mit einer abgerundeten Rechteckform haben, müssen Sie nur zum Inspektor-Bedienfeld (das rechte) gehen und das Dropdown-Menü „Radius (Runde Ecken)“ auswählen. Ändere die Option auf „Glatte Ecken“. Ihr Squircle ist jetzt fertig!

Schlussfolgern

Es gibt viele Trends, die in den letzten Monaten gestiegen sind. Squirclemoprhism hat mit einem kleinen Element begonnen – iOS7 App Icons. Jetzt ist es an fast alle Elemente gewöhnt, die abgerundete Ecken haben. Offensichtlich sind nicht alle Squircles in realen Anwendungen gut, aber der Trend ist sicherlich inspirierend.

Was haltet ihr vom Squirclemorphismus? Verwenden Sie Formen mit geglätteten Ecken?

Suchen Sie nach Methoden, um Ihren Design-Workflow in Figma oder Sketch zu verbessern? Schauen Sie sich das Design Starter Kit und das User Flow Kit an, die ich für Sie erstelle. Sie können auch mehr von meinen ✍️ UI-Design-Tutorials lesen .

Dieser Artikel wurde ursprünglich auf meinem Blog veröffentlicht.