Neuromorfismo

Hace poco estaba buscando alguna forma de diseñar interfaces de usuarios interesantes, que fueran fáciles de recordar y reconocer. Esto me llevó a buscar tendencias en cuanto a diseño y di con algunas que me volaron la mente. Hablaré de algunas de ellas en esta página.

La que quiero destacar ahora, es la llamada “neuromorfismo”.

El neuromorfismo, si bien recuerdo todo lo que leí, se puso de moda el 2019 (para variar, encantado de un patrón de diseño antiguo) y trata de un diseño en base a sobras que agregan profundidad a un elemento, creando una sensación realista similar a algo que se hunde en la pantalla o que sobresale de ella.

Claro, sin un mono, no se entiende, así que acá va el mono:

neumorfismo

Ese efecto abre la puerta a muchos diseños de elementos de interfaces como botones, tarjetas, paneles, gráficos, etc.

Y usando eso como patrón de diseño, nos propusimos a crear algunos widgets básicos para aplicaciones, para investigar el estilo y conocer cómo sería diseñarlos usando Flutter… y nos quedaron así:

En la imagen anterior creamos 4 elementos distintos:

  • Un botón
  • Una tarjeta que contiene un gráfico de nivel, incrustada en un listview horizontal
  • Un slider
  • Un switch

En un futuro, ojalá cercano, subiré alguna aplicación funcional donde se usen estos y otros elementos.

Aprovecho de dejar algunos links con páginas que permiten “neuromorfear” algunos elementos y exportar el código. Si hay más, sería genial que me las compartieran, porque de acá en adelante, soy un neuromorfo fan:

  • Para Flutter: https://flutterneumorphism.com/#/
  • Para CSS: https://neumorphism.io/
  • Para CSS: https://neumorphic.design/
  • Un kit completo: https://demo.themesberg.com/neumorphism-ui/