Anzeige
Anzeige
Ratgeber
Artikel merken

Designtrend 2022: Was ist eigentlich Claymorphism?

Weich, freundlich, fluffy, 3D. Claymorphism heißt ein Trend, an dem Designer:innen 2022 wohl kaum vorbeikommen dürften. Wir erklären, was dahintersteckt, und stellen ein Tool vor, das bei der Umsetzung hilft.

2 Min. Lesezeit
Anzeige
Anzeige
Verspielte 3D-Designs machen den Designtrend aus. (Grafik: Natykach Nataliia/Shutterstock)

Kaum ein Jahr ohne Designtrend. 2020 war es Neumorphismus, 2021 wurde Glassmorphismus zum Trend des Jahres ausgerufen. 2022 jetzt Claymorphism, die Illusion von Tiefe auf unseren Flachbildschirmen. Wem das jetzt bekannt vorkommt, der hat recht: Schon ein vorangegangener Trend drehte sich darum. Im Neumorphism wird Tiefe erzeugt, indem Karten und andere Elemente aus einem homogenen Hintergrund heraus- oder in ihn hineingeprägt werden. Warum sich das nicht wirklich durchgesetzt hat? Dafür gibt es offenbar mehrere Gründe. Neben möglichen Accessibility-Problemen ist es wohl schwierig, den Trend mit CSS wirklich gelungen umzusetzen. Am schwersten wiegt allerdings laut Designer Michael Malewicz die Tatsache, dass derart gestaltete Benutzeroberflächen ganz einfach langweilig aussehen.

3D ist im Trend

Anzeige
Anzeige

The new kid on the block, Claymorphism, wird hingegen immer beliebter. 3D und die Illusion von Tiefe behält der Trend bei, jedoch auf eine andere Art, als das im Neumorphism der Fall war. Die Ästhetik des neuen Designtrends weckt Kindheitserinnerungen, sie erinnert an Stop Motion, an Pingu oder Shawn das Schaf, und kommt zunehmend auch in den Designabteilungen großer Unternehmen an. Die australische Bank Bankwest zum Beispiel hat Elemente ihrer Website entsprechend gestaltet.

Website der Bank Bankwest zeigt Elemente im Claymorphism-Design

(Screenshot: Bankwest/t3n)

Simulierte Tiefe scheint es unseren Gehirnen einfacher zu machen, zu verarbeiten, was wir sehen – außerdem wirkt es freundlicher und organischer.

Anzeige
Anzeige

Inspiriert vom Metaverse und NFT

Wesentlich zum Erfolg der freundlichen 3D-Designs beigetragen haben wahrscheinlich NFT und die verschiedensten Metaversen. Zudem gibt es vielversprechende Tools, wie beispielsweise Spline, die die 3D-Designlandschaft für eine breitere Masse öffnen dürften.

Anzeige
Anzeige

Schatten sorgen für Tiefe

Im Grunde ist Claymorphism nur die Weiterentwicklung von Neumorphism. Die flachen, wenig konkaven neumorphen Formen werden dabei zu Strukturen mit 3D-Effekt „aufgeblasen“. Wie im Neumorphism wird der Effekt durch die Kombination von inneren und äußeren Schatten erreicht. Für die im Neumorphism fehlende Tiefe sorgt ein größerer Schatten, der oft entlang der X-Achse verläuft, was mit gängigen UI-Shadow-Konventionen bricht. Das Ergebnis sind weiche, abgerundete und eben dreidimensionale Formen. Das kommt laut Malewicz auch bei den Nutzer:innen an. In einer UI-Studie hat er einen derart gestalteten 3D-Button in User:innen-Tests gegen andere Optionen getestet – das kindlich wirkende Design setzte sich offenbar bei allen außer der technikaffinen Gruppe gegen andere Designs durch.

Für ein ausgewogenes Design empfiehlt der Experte minimalistisch gehaltene Fonts und starke Farbakzente und Kontraste. Die Umsetzung erfordert jedoch fortgeschrittene CSS-Kenntnisse:

Anzeige
Anzeige

Für alle, die sich langsam und ohne viel CSS-Schreiberei an den Trend herantasten wollen, stellt Hype4 Academy ein Tool bereit, mit dem ihr Elemente mit wenigen Klicks im Claymorphism-Look gestalten könnt. In den Handy 3D Hands von Icon8 finden interessierte Designer:innen eine weitere nützliche Ressource.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Schreib den ersten Kommentar!
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige