DEV Community 👩‍💻👨‍💻

Cover image for Neomorfismo | UI
Marian Villa
Marian Villa

Posted on • Updated on

Neomorfismo | UI

En este artículo, quiero compartir mi investigación sobre la tendencia de UI que se está volviendo muy popular en 2020 conocida como neomorfismo.

SLIDES KEYNOTE GDG Sucre - Bolivia 9 de Mayo 2020 by @marianvilla :
"Hablemos de Neomorfismos: Minimalismo + hiperrealismo"
https://slides.com/marianvilla/neomorfismo/fullscreen
Youtube channel GDG Sucre - Bolivia 9 de Mayo 2020: https://bit.ly/2YOBGr2

¿Qué es?

Neumorphism, también conocido como Soft UI, es un enfoque de diseño que utiliza luces y sombras para hacer que las formas parezcan estar flotando un poco por encima de un fondo.

¿Cuándo comenzó?

Uno de los primeros ejemplos de neumorfismo fue un diseño creado por Alexander Plyuto. En su cuenta de Dribble. El diseño recibió muchos aplausos y trascendió en Internet. Muchos lo atribuyen a ayudar a popularizar el neumorfismo.

El Nombre/término

Pero el término se le atribuye a Michal Malewicz de HYPE 4 sugirió un nuevo giro en las reacciones a Flat que inicialmente llamó Nuevo-Skeuomorphism. En los comentarios del artículo, Jason Kelley sugirió juguetonamente llamarlo Neuomorfismo. Malewicz dejó caer la o, y voilà: neumorfismo.

El Resumen

La idea detrás del Nuevo Skeuomorphism era que "va un paso más allá de lo moderno y trae de vuelta algunas imitaciones 3D, aunque no tan texturizadas y reales como antes".

El neomorfismo está tratando de encontrar un equilibrio entre las dos últimas oscilaciones del péndulo de diseño. Es un intento de aprovechar el poder del Skeuomorphism, que inició Apple al imitar el mundo físico.


FUNDAMENTACIÓN

Accesibilidad en neomorfismos:
https://dribbble.com/shots/11335888-NEUMORPHISM
https://uxdesign.cc/lets-talk-neumorphism-and-accessibility-44a48a6ace72
https://builtin.com/design-ux/neumorphism-accessibility

Code:
https://dev.to/atulcodex/neumorphism-soft-ui-4aij
https://codepen.io/atulcodex/pen/NWPJPVM?editors=0100
https://speckyboy.com/neumorphism-code-snippets/
https://codepen.io/nxworld/pen/OJVJQme

Tools:
https://www.figmacrush.com/
https://www.sketchappsources.com/
https://www.prototypr.io/
https://www.uplabs.com/
https://www.uistore.design/
https://freeui.design/
https://freebiesui.com/
https://www.epicpxls.com/
https://freefrontend.com/

TAGS & search:
https://twitter.com/hashtag/neumorphism
https://dribbble.com/tags/neumorphism
https://uimovement.com/tag/neumorphism/
https://www.behance.net/search/projects?search=%23neumorphism
https://www.reddit.com/r/UI_Design/comments/fdwnt1/neumorphism/
https://sarunw.com/tags/neumorphism/

BLOG:
http://delightfuldesignstudio.com/neumorphism-the-soft-ui-trend
https://www.justinmind.com/blog/neumorphism-ui/
https://lytbox.co/what-is-neumorphism/
https://apps.apple.com/gb/app/neumorphism/id1497264656?l=es
https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6
https://medium.com/@ceign/tendencias-ui-2020-neumorphism-77df47e61eb2
https://www.creativebloq.com/news/neumorphism
https://www.promptworks.com/blog/neumorphism
https://designshack.net/articles/trends/neumorphism/
https://www.lionandmason.com/ux-blog/why-neumorphism-is-2020s-most-influential-design-trend/
http://blog.vaexperience.com/neumorphism-skeuomorphism-and-flat-design-march-2020-newsletter/
https://uxdesign.cc/neumorphism-will-not-be-a-huge-trend-in-2020-67a8c35e52cc
https://uxdesserts.com/neumorphism-2020s-hottest-ui-trend/
https://medium.muz.li/skeuomorphism-neumorphism-ui-trend-e7b78792bd21
https://abduzeedo.com/introducing-neumorphism-ui-trends-we-wanted

Portafolio:
http://neumorphism.space/
https://www.creatsy.be/

Examples:
https://bashooka.com/inspiration/neumorphism-ui-design-examples/
https://www.quora.com/What-is-neumorphism-in-user-interface-design-What-are-the-best-examples
https://www.awwwards.com/inspiration/neumorphism-in-user-interfaces
https://www.easeout.co/blog/2020-03-27-25-top-neumorphism-ui-design-examples/

Tutorial:
https://bit.ly/2WmJQW3
https://bit.ly/3dzPPMH
https://bit.ly/2SUxsui
https://bit.ly/2WPlRxu

CSS:
https://css-tricks.com/neumorphism-and-css/

Bootstrap:
https://www.cssscript.com/neumorphic-bootstrap-theme-neumorphism/

IoS:
https://www.cultofmac.com/685185/neumorphism-ios-14/
https://www.idownloadblog.com/2020/04/05/neumorphism-iphone-wallpapers/

SwiftUI:
https://blckbirds.com/post/neumorphism-design-in-swiftui/
https://www.raywenderlich.com/7589178-how-to-create-a-neumorphic-design-with-swiftui
https://www.hackingwithswift.com/articles/213/how-to-build-neumorphic-designs-with-swiftui

Xamarin:
https://www.thewissen.io/playing-around-with-neumorphism-in-xamarin-forms/

Flutter:
https://github.com/Idean/Flutter-Neumorphic
https://pub.dev/packages/neumorphic

React:
https://snack.expo.io/@react-ui-kit/neumorphism

FREE UI KITS:
https://www.danielmitev.com/neumorphism-design-kit
https://provolonestudio.com/neumorphism-ui-kit/
https://talkelement.com/nice-free-neumorphism-ui-design-sample/17405/
https://freefrontend.com/css-neumorphism-examples
https://www.behance.net/gallery/93347841/Free-Neomorphic-UI-Kit-for-Adobe-Xd
https://365webresources.com/neumorphic-neumorphism-design-freebies/#uikit

Top comments (3)

Collapse
 
santidescalzo profile image
Santi Scalzadonna

Gracias Marian por el resumen, muy bueno. Seria interesante ver algunos ejemplos a modo de imagenes en el post, asi se hace mas amena la lectura, de todas formas se nota el gran trabajo que has llevado a cabo, saludos!!

Collapse
 
marianvilla profile image
Marian Villa

Hola Santi, gracias por el feedback. La verdad tenés toda la razón. Ya organicé mejor los hipervínculos para acceder a recursos, ejemplos, tutoriales, y UI Kits. Adicional creo que los slides de la keynote puede dejar gráficamente todo más claro, y si no, siguiendo tu consejo: medium.com/@marianvilla/neomorfism...
Gracias :)

Collapse
 
ilvava profile image
Luca Vavassori

Hi @marianvilla :)

I am the founder of FigmaCrush.com, one of the websites you listed in your post, and I just wanted to ask for a favour.

Because of copyright issues, I recently had to change the site domain from FigmaCrush.com to UXCrush.com. Unfortunately we lost a lot of organic traffic because of this change.

I was wondering if you could update the link present in your post, from figmacrush.com to uxcrush.com?

I hope it's possible. Thanks so much for your help!

An Animated Guide to Node.js Event Loop

>> Check out this classic DEV post <<