Neumorfismo y CSS

1. Neumorfismo como interfaz de usuario.
2. Neumorfismo y CSS
3. Neumorfismo en la práctica.
4. Accesibilidad y UX
5. Eso es un envoltorio

El neumorfismo (también conocido como neomorfismo) es una tendencia de diseño relativamente nueva y un término que ha recibido mucha atención últimamente. Su estética está marcada por una interfaz de usuario mínima y de apariencia real que es una especie de nueva versión del esqueuomorfismo, de ahí el nombre. Obtuvo su nombre en una publicación de UX Collective de diciembre de 2019 y, desde entonces, varias comunidades de diseño y desarrollo han estado discutiendo activamente la tendencia, generalmente con opiniones diferentes. Chris se burló de ello en Twitter. Adam Giebl creó un generador en línea para ello. Desarrolladores, diseñadores y especialistas en UX están opinando sobre el tema de la estética, la usabilidad, la accesibilidad y la practicidad de esta tendencia de diseño.

Claramente, ha tocado una especie de fibra sensible en la comunidad.

Sumerjámonos en el grupo de neumorfismos, mostrando los diversos efectos neumórficos que se pueden crear usando nuestro lenguaje preferido, CSS. Echaremos un vistazo a los argumentos a favor y en contra del estilo y sopesaremos cómo se puede utilizar en una interfaz web.

Neumorfismo como interfaz de usuario.

Ya hemos establecido que la cualidad definitoria del neumorfismo es una mezcla de minimalismo y eskeuomorfismo. Y esa es una buena manera de verlo. Piense en la estética minimalista de Material Design y el aspecto hiperrealista del eskeuomorfismo. O piense en los estándares de diseño de Apple alrededor de 2007-12 y compárelos con las interfaces que producen hoy.

Si pensamos en los diseños esqueuomórficos de Apple de principios de siglo como un extremo y la interfaz de usuario minimalista actual como otro, entonces podríamos considerar el neumorfismo como algo intermedio.

Los elementos de la interfaz de usuario neumórficos parecen estar conectados al fondo, como si los elementos estuvieran extruidos del fondo o insertados en el fondo. Algunos los han descrito como “IU suave” debido a la forma en que se utilizan las sombras suaves para crear el efecto.

Otra forma de entender la interfaz de usuario neumórfica es compararla con Material Design. Usemos un componente de tarjeta normal para hacer una distinción entre los dos.

Analicemos las diferencias únicamente desde el punto de vista del diseño.

Esto debería dar una idea clara de lo que estamos hablando cuando nos referimos al neumorfismo. Pasemos a cómo se implementa en CSS.

Neumorfismo y CSS

Crear una interfaz neumórfica con CSS es aparentemente tan fácil como aplicar una propiedad de sombra de cuadro normal en cualquier elemento, pero tiene más matices que eso. El carácter distintivo de una interfaz de usuario neumórfica proviene del uso de múltiples valores de sombra de cuadro y color de fondo para lograr diferentes tipos de efectos y variaciones.

Sombras de caja neumórficas

Primero hagamos un repaso rápido sobre la box-shadowpropiedad para que podamos comprender mejor. Aquí está la sintaxis:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

Se pueden ajustar las siguientes opciones:

• Desplazamiento horizontal: un valor positivo desplaza la sombra hacia la derecha, mientras que un valor negativo la desplaza hacia la izquierda.
• Desplazamiento vertical: un valor positivo desplaza la sombra hacia arriba, mientras que un valor negativo la desplaza hacia abajo.
• Radio de desenfoque: la longitud de la sombra. Cuanto mayor sea la longitud, más grande y más clara se vuelve la sombra. No hay valores negativos.
• Radio de extensión: este es otro valor de longitud, donde los valores más grandes dan como resultado sombras más grandes y más largas.
• Color: esto define el color de la sombra, tal como lo haríamos con la propiedad de color CSS.
• Recuadro: el valor predeterminado (inicial) da como resultado una sombra paralela. El uso del valor insertado mueve la sombra dentro del marco del elemento, lo que da como resultado una sombra interior.

Podemos aplicar múltiples sombras usando valores de sombra de cuadro separados por comas. Se pueden concatenar hasta cuatro valores, uno para cada lado del cuadro.

box-shadow: 20px 20px 50px #00d2c6, -30px -30px 60px #00ffff;

A continuación se muestran los box-shadowvalores de propiedad del elemento de interfaz de usuario aneumórfico. Los valores individuales de desplazamiento, desenfoque y opacidad se pueden ajustar para que sean mayores o menores, según el tamaño de un elemento y la intensidad del efecto que intenta lograr. Para el neumorfismo, es necesario mantener las sombras suaves y con bajo contraste.

Como hemos mencionado antes, una parte central de los elementos neumórficos es el uso de dos sombras: una sombra clara y una sombra oscura. Así es como conseguimos esa especie de efecto “elevado” y podemos crear variaciones cambiando la “fuente de luz” de las sombras.

Es necesario establecer dos valores de compensación positivos y dos negativos. Teniendo esto en cuenta, obtenemos las siguientes cuatro combinaciones, simplemente cambiando la ubicación de cada sombra.

Usemos variables CSS para mantener los valores abstractos y comprender mejor las variaciones.

box-shadow: var(--h1) var(--v1) var(--blur1) var(--color-dark), var(--h2) var(--v2) var(--blur2) var(--color-light);

Podemos usar sombras insertadas para crear aún más variaciones. A diferencia de las sombras paralelas que hacen que un elemento parezca elevado desde debajo del fondo, una sombra insertada da la apariencia de que el elemento está siendo presionado contra ella.

Podemos cambiar si el elemento se extruye desde el fondo o se inserta en el fondo aplicando inicial (no aplicar la opción en absoluto) o inserto, respectivamente.

Mantengamos nuestra fuente de luz en la parte superior izquierda y solo cambiemos la opción de inserción para ver la diferencia.

Colores de fondo

Es posible que hayas notado que los box-shadowvalores cambian el aspecto de los bordes de un elemento neumórfico. Hasta ahora, no hemos cambiado el color de fondo porque debe ser transparente o tener el mismo color (o similar) que el color de fondo de un elemento subyacente, como el padre del elemento.

Podemos utilizar fondos tanto sólidos como degradados. El uso de un fondo de color sólido en el elemento puede crear una apariencia de superficie plana, cuando ese color sólido es el mismo que el color del elemento subyacente.

Por otro lado, el uso de degradados sutiles puede cambiar la forma en que se percibe la superficie. Al igual que con la propiedad box-shadow, hay un valor iluminado y uno oscuro en un degradado. El ángulo del gradiente debe ajustarse para que coincida con la fuente de luz. Tenemos las siguientes dos variaciones al usar gradientes:

• Variación de superficie convexa: la superficie se curva hacia afuera donde la sección más clara del degradado está alineada con la sección más clara de la sombra y la sección más oscura del degradado está alineada con la sección más oscura de la sombra.
• Variación de superficie cóncava: la superficie se curva hacia adentro donde la sección más clara del degradado está alineada con la sección más oscura de la sombra y la sección más oscura del degradado está alineada con la sección más clara de la sombra.

.element { background: linear-gradient(var(--bg-angle), var(--bg-start), var(--bg-end)); box-shadow: var(--h1) var(--v1) var(--color-dark), var(--h2) var(--v2) var(--color-light);}

Neumorfismo en la práctica.

Veamos cómo funciona el neumorfismo cuando se aplica a un botón simple. La principal característica de una interfaz neumórfica es que se mezcla con el fondo y lo hace teniendo un color de fondo similar o igual al elemento subyacente. El objetivo principal de muchos botones, especialmente un llamado a la acción principal, es destacar lo más posible, generalmente con un color de fondo prominente para separarlo de otros elementos y otros botones de la página. Armario escobero

La restricción del color de fondo en el neumorfismo elimina esa conveniencia. Si el color de fondo del botón coincide con el color de fondo de lo que está encima, perdemos la capacidad de hacer que se destaque visualmente con un color único.

Podemos intentar ajustar el color del texto, agregar un borde debajo del texto, agregar un ícono u otros elementos para aumentar el peso visual y resaltarlo, etc. Cualquiera que sea el caso, un color de fondo sólido en un botón neumórfico parece destacarse. más que un gradiente. Además, se puede combinar con una sombra insertada en el estado activo para crear un bonito efecto "presionado".

Inspirándome un poco en los dispositivos del mundo real, he creado los siguientes ejemplos como un intento de mejorar el concepto de botón y alternancia neumórfico. Aunque los resultados parecen algo mejores, el botón normal aún proporciona una mejor experiencia de usuario, tiene muchas menos restricciones, es más flexible, más sencillo de implementar y hace un mejor trabajo en general.

El primer ejemplo se inspiró en un botón de mi enrutador que sobresale del dispositivo y tiene una pegatina con un ícono. Agregué un elemento de "pegatina" similar con un fondo de color sólido, así como un ligero recuadro para agregar más peso visual y hacer que se destaque lo más cerca posible del botón ideal. El segundo ejemplo se inspiró en el panel de control de un automóvil donde el botón se iluminaba cuando estaba en estado activo (presionado).

Echemos un vistazo a algunos elementos HTML más. Una de las desventajas del neumorfismo que se ha señalado es que no debe aplicarse a elementos que pueden tener varios estados, como entradas, elementos seleccionados, barras de progreso y otros. Estos estados incluyen:

• Interacción del usuario: pasar el cursor, activar, enfocar, visitar
• Estados de validación: error, éxito, advertencia, deshabilitado

Las reglas de accesibilidad y UX requieren que algunos elementos se vean diferentes en cada uno de sus respectivos estados de validación y estados de interacción del usuario. Las restricciones y restricciones del neumorfismo limitan severamente las opciones de personalización necesarias para lograr los diferentes estilos para cada estado posible. Las variaciones serán muy sutiles y es posible que no puedan cubrir todos los estados.

¡Es difícil ver en qué elementos se puede hacer clic! Aunque este es el ejemplo más simple posible que muestra el problema, podríamos haber agregado elementos y estilos adicionales para intentar mitigar los problemas. Pero como hemos visto con el ejemplo del botón, algunos otros tipos de elementos aún funcionarían mejor en términos de UX y accesibilidad.

Es importante notar que los elementos neumórficos también ocupan más espacio (relleno interior y margen exterior) debido a la sombra y las esquinas redondeadas. Un efecto neumórfico no se vería tan bien en un elemento de tamaño pequeño simplemente porque los efectos visuales consumen el elemento.

El elemento ideal para el neumorfismo son las tarjetas o cualquier otro elemento contenedor estático que no tenga estados basados ​​en la interacción del usuario (por ejemplo, desplazamiento, activo y deshabilitado) o validación (por ejemplo, error, advertencia y éxito).

En su artículo muy crítico sobre el neumorfismo, Michal Malewicz (quien ayudó a acuñar el término “neumorfismo”) sugiere agregar efectos neumórficos a las cartas que ya se ven bien sin él.

Entonces, la única forma en que funciona bien es cuando la tarjeta en sí tiene la estructura correcta y toda la extrusión es innecesaria para la jerarquía.

¿Ver?

Funciona bien cuando se puede quitar sin pérdida para el producto.

Accesibilidad y UX

Hemos visto qué elementos funcionan bien con el neumorfismo, pero existen algunas reglas y restricciones importantes que se deben tener en cuenta al agregar el efecto a los elementos.

Primero está la accesibilidad. Este es un gran problema y quizás el mayor inconveniente del neumorfismo: el contraste de color.

Los elementos de la interfaz de usuario neumórficos se basan en múltiples sombras que ayudan a mezclar el elemento con el fondo en el que se encuentra. Usar contrastes sutiles no es en realidad la mejor opción para una interfaz de usuario accesible. Si un verificador de contraste está escaneando su interfaz de usuario, es muy posible que le indique que no tiene un contraste lo suficientemente alto entre el primer plano y el fondo porque las sombras no encajan en la ecuación e, incluso si lo hicieran, serían demasiado sutiles para hacer una gran diferencia.

Aquí hay algunas críticas válidas sobre la accesibilidad de un diseño neumórfico:

• Los usuarios con daltonismo y mala visión tendrían dificultades para usarlo debido al poco contraste causado por las sombras suaves.
• La jerarquía de páginas es difícil de percibir cuando el efecto se utiliza en exceso en una página. Ningún elemento en particular destaca debido a las restricciones de color de fondo.
• Los usuarios pueden confundirse cuando se abusa del efecto en una página. Debido al efecto de extrusión, es difícil determinar con qué elementos pueden interactuar los usuarios y cuáles son estáticos.

Para lograr un buen contraste con la sombra, el color de fondo sobre el que se asienta un elemento neumórfico no debe acercarse demasiado a los bordes de los extremos RGB (blanco y negro).

Hablemos de UX por un momento. Aunque la interfaz de usuario Neumorphic parece estéticamente agradable, no debería ser un estilo dominante en una página. Si se usa con demasiada frecuencia, la interfaz de usuario tendrá un efecto abrumadoramente plástico y la jerarquía visual quedará fuera de control. La página podría perder fácilmente su estructura prevista al dirigir a los usuarios al contenido más importante o al flujo principal.

Mi opinión personal es que el neumorfismo se utiliza mejor como mejora de otro estilo. Por ejemplo, podría combinarse con Material Design de una manera que establezca distinciones entre varios estilos de componentes. Probablemente sea mejor usarlo escasamente para agregar una nueva apariencia alternativa a algo en la pantalla; el rendimiento de su uso es decreciente y es una buena idea estar atento.

A continuación se muestra un ejemplo en el que se utilizan cualidades neumórficas en elementos de tarjetas en combinación con Materialise CSS:

Mira, puede ser bastante bueno cuando se usa como acento en lugar de como un marco completo.

Eso es un envoltorio

Esa fue una mirada profunda al neumorfismo. Analizamos lo que distingue al estilo de otros estilos populares, analizamos algunas formas de recrear el efecto en CSS y examinamos las implicaciones que tiene en la accesibilidad y la experiencia del usuario.

En la práctica, un sistema de diseño neumórfico a gran escala probablemente no pueda utilizarse en un sitio web. Es simplemente demasiado restrictivo en cuanto a los colores que se pueden utilizar. Además, el hecho de que genere contrastes suaves impide que se utilice en elementos interactivos, como botones y elementos de alternancia. Claro, es estéticamente agradable, moderno y único, pero eso no debería ir a expensas de la usabilidad y la accesibilidad. Debe usarse con moderación, idealmente en combinación con otro sistema de diseño como Material Design.

Es poco probable que el neumorfismo reemplace los sistemas de diseño actuales que usamos hoy (al menos en mi humilde opinión), pero puede encontrar su lugar en esos mismos sistemas de diseño como una nueva alternativa a las tarjetas existentes y los estilos de contenedores estáticos.

Referencias

• Neumorfismo en interfaces de usuario.
• Neumorfismo: la tendencia zombie
• Hablemos de Neumorfismo y Accesibilidad

Tal vez te puede interesar:

1. ¿Cómo se hace el tamaño máximo de fuente en CSS?
2. Cambiar el tamaño de los valores en pasos en CSS
3. ¿Qué hace “revertir” en CSS?
4. CSS4 es una mala idea

Neumorfismo y CSS

Neumorfismo como interfaz de usuario.Neumorfismo y CSSNeumorfismo en la práctica.Accesibilidad y UXEso es un envoltorioTal vez te puede interesar:Índice

programar

es

https://pseint.es/static/images/programar-neumorfismo-y-css-1328-0.jpg

2024-06-13

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente