Tendencias de diseño UI/UX: Fase de inspiración y creatividad

Les dejo una increíble joya 💎💎💎para hacer contenedores enfados al neomorfismo, sobre todo para nosotros los devs que normalmente se nos hace dificil el diseño jejeje😅😅😅 https://neumorphism.io/#e0e0e0
.
Es una herramienta web con la que basimcamente puedes ajustar sombras, redondeados, intensidad y distancia con unos scrolls y cuando se ajusta uno los demas se autojustan dependiendo del que estás moviendo para que así siempre sea como diseño de neomorfismo
.

Tips:
• Jerarquía
• Contraste
• Proximidad
• Balance
• Responsive design
• Ilustraciones animadas
• Garantizar performance
• Micro interaciones
• Realidad aumentada y realidad virtual
• Neo morfismo
• Asymmetrical layouts
• Storytelling

Wow. Una dev que sabe de diseño. Qué genial!

El Neomorfismo lo que busca más que todo es darle al usuario elementos que se parezcan a objetos cotidianos con el objetivo de mejorar la comprensión e interpretación del diseño. Por ejemplo: simular objetos con relieve.
.
Esto se comprende más con un ejemplo visual:
.

.
Como ves, los botones de la parte inferior parecen botones reales. Eso es Neomorfismo. Y sí, Apple fue uno de los primeros (o el primero) en implementarlo. Hoy en día sigue siendo lo mismo, pero más “moderno”:
.

les dejo el link hacia The state of UX in 2021

https://trends.uxdesign.cc/

Hablando de animaciones 3D, hay una librería bastante ligera de JavaScript que nos permite crear objetos 3D directamente en el navegador usando código y no vídeos para hacerlo más rápido. Se llama Three.js, les dejo el enlace a su página oficial. https://threejs.org/

Jerarquia, tener unos elementos mas grandes que otros, basados en la relevancia e importancias que le queremos dar a cada uno de ellos.

Contraste, ejemplo el botón nos indica que nos están ayudando para poder presionarlo y ya con eso podemos jugar con el tema de contraste y de colores y ayudar también al usuario a leer sin leer prácticamente.

Proximidad, que ver con el tema de consistencia por ejemplo vemos items en nuestras app que tienen mucha semejanza ya sea en colores, iconos y demás, ya sabemos que tiene que ver con una sección o una parte que es del mismo grupo etc.

Balance, El tema de contraste y de colores, también puede jugar un papel bastante importante cuando queremos hablar de importancia o relevancia de un contenido en especifico.

Podemos buscar también inspiración para poder realizar nuestros proyectos, uno de ellos es The state of UX in 2021, 100 lecciones bastante utiles a nivel de todo

Ilustraciones animadas, Es muy importante tener en cuenta el tema de rendimiento y de performance

Garantizar, también garantizar a las personas que independientemente que tengan datos o no puedan ver nuestros sitios,

Micro intereciones, normalmente no son animaciones, pero es lo que le indica al usuario que si esta haciendo clic o tag en algún lado, esos pequeños detalles en la web nos indican ciertas cosas y con eso le damos un gran peso a nuestra pagina, los pequeños detalles también son importantes

UI, Es tema mas que todo visual de colores y demas

UX, es la experiencia o emociones que transmite el proyecto (sistema, app, etc)

Realidad Virtual, normalmente existen app que pueden decirnos como ver ciertos sitios, que si te pones tus gafas vas a ver de esta forma y de esta otra, ejemplo de que si tienes que hacer un tour virtual de de una casa o algun carro, etc.

Realidad aumentada, supongamos que queremos comprar una planta, y esa planta la sumergimos en el lugar donde quisieramos colocarla ya sea dentro de una casa, inmediatamente vamos la poder ver en el sitio que la necesitemos, todo depende el, juega un papel super interesante

Neo morfismo, juega mucho con las sombras y también esta relacionado con otras tendencias como lo es material desing y flat desing que ya todo depende de la dirección de la luz.

Asymmetrical layouts, es poder jugar con layouts asimétricos, en este caso tenemos imagenes que pueden ser muy sutil, que se vean tambien muy elegantes pero que sean distribuidas en diferentes partes.

Espectacular video lo recomiendo 100% no perderá su tiempo viéndolo. Nos muestra como un diseñador, emprendedor y cofundador de Airbnb, Joe Gebbia ayudó a rediseñar la forma en que el mundo viaja y las personas se conectan.
Les dejo su enlace para que lo vean :
https://www.ted.com/talks/joe_gebbia_how_airbnb_designs_for_trust?language=es

Me encantaria poder trabajar con algun compañero que este estudiando diseño UI y UX.
Me llaman mucho la atencion los storytelling, neomorfismo, layouts asimetricos, etc y poder llevar sus diseños a codigo, asi practicamos ambos. 😟

Acá puedes ver la charla TED Diseña para la confianza.

https://www.ted.com/talks/joe_gebbia_how_airbnb_designs_for_trust?language=es#t-149642

Para las personas que quieran experimentar con codigo la realidad aumentada, google tiene API gratis en el siguiente link
https://modelviewer.dev/

Se pueden hacer cosas maravillosas

Tendencias UI

• Animated Illustratios

• Microanimations

• 3D Graphic in web & mobile UI

• virtual reality

• Augmented Reality

• Neumorphism: colores pocos contrastados.

• Asymmetrical Layouts

• Storytelling

Pregunta: Para sitios estáticos ( no utilizamos Backend), recomiendan utilizar un poco más de interacción ( animación )? Digamos que, compensamos…

Estos tips están en estos vídeos:

UI Design Trends 2021

UX Design Trends 2021

https://trends.uxdesign.cc

• the state of UX in 2021

curso de animaciones por favor

la charla de ted esta muy buena super recomendada

Quiero hacer todos los diseños que se mostraron en este clase 😊

Me encantó esta clase, súper práctica. Además da ideas de nuevos sitios y formas de maquetar html.

Me encanta el material que aporta la profe 👌

Me encanta ese estilo de Neomorfismo 🙌

Quiero aportar acerca del balance y es que para que se entienda un poco mejor, es necesario conocer de composcion de una imagen.

Es decir, como esta armada una imagen con distintas formas colores, proximidad y posicion de elementos en un encuadre visible.

Es por eso que se cita al color rojo con mayor “peso visual” que un color no tan notorio.

Muy buenos los links que dejaste

Les recomiendo el curso de diseño de Platzi. Les ayudará mucho en el tema ( Design system ). Además, les ayudará en un futuro en un tema importante que es: Accesibilidad Web.

El neoformismo realmente le deja otro toque. Se siente premium.
La implementación estará muy ligada al mercado a que se apunte, me imagino.
Claramente necesita más recursos que un diseño más minimalista.

Creo que me gust mucho el neumorfismo y ni sabia que se llamaba asi jsjsjs

Yo me olvidé del Neumorphism, solo impresiona a los novatos, pero en funcionalidad deja que desear, no se lleva muy bien con la accesiblidad 😞

El storytelling tambien es importante. Me gusto que Teffy lo mencionara.

A las personas le gustan las historias interesantes y emocionantes. Eso llama la atencion del publico e incluso a inspirarlas 🌟 .

En la pagina de Ben & Frank tienen un probador virtual de sus productos, dejo la url
probador virtual

el Neomorfismo fue lo que más me impresionó, no me había imaginado diseños asi, más claro todo me imprensionó!

"Ayudar al usuario a leer sin leer"
Excelente frase para guiarse al diseñar. 😄

La Charla de TED talks no esta disponible

Pienso que el neomorfismo es intereasnte para una mayor facilidad de visualizacion de los CTA ??

¿Qué problemas de accesibilidad causa el neomorfismo?

.

En desarrollo de SwiftUI es más fácil de implementar la realidad aumentada ya que apple le da herramientas fáciles para crear

que cool lo de la realidad aumentada