Diseño de Y-Frames para Reproductor de Música Mobile

Les recomiendo antes que nada tomar el curso de Figma es buenismo, es de las mejores herramientas para desarrollo de los wireframes y realmente de lo que quieran hacer.

Se pone a jugar al usuario no deseado
…
Elimina todos los estilos CSS desde el inspector de elementos
.
Si lo he hecho con algunas páginas xDDD

Para los que no nos gusta mucho diseñar y queremos ir directo al codigo, les recomiendo mucho Dribble.
Un sitio donde los diseñadores suben sus proyectos, asi pueden inspirarse o escoger uno y listo, empezamos a inspeccionarlo, ver que componentes y elemenentos se repiten para crear nuestro Style Guide, crear nuestras variables, etc.

–
En este caso pueden usar el buscador del sitio y poner music player neomorphism UI y les saldran bonitos diseños para codear 😎

–
En mi caso, me gusto mucho esta por el modo oscuro, unicamente hare la pantalla de enmedio.

1- Saber que quiero
Ejemplo:

Queremos hacer un reproductor de musica para un dispositivo mobile.

2- Hacer un boceto (Wireframe)

Podemos hacerlo con lapiz y papel pero tambien lo podemos hacer con esta herramienta online gratuita https://app.moqups.com/#

3- Pensar en la guía de estilos
Despues de tener una base de que es lo que queremos conseguir.

• temas de colores

• tipografia

• ilustraciones

• iconos

Tips:

1. Pensemos siempre en una comunicación visual simple intuitiva y atractiva.

2. Juega al papel de usuario siempre, usando tus propios bocetos.

3. Se tu propio tester, para tener una mejor calidad en nuestro desarrollo.

El curso de figma es excelente, no es necesario tener conocimientos en UI/UX.

les dejo un post interesante sobre Neumorphism

https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6

Este curso debería llamarse, Como aprender CSS sin usar una computadora…

PROS Y CONTRAS NEUMORPHISM

• Problema de accesibilidad

Técnicamente, Neumorphism es un juego de aplicar el mismo color a tus elementos y tu fondo, y usar dos sombras diferentes, una clara y otra oscura, para crear la apariencia.

Dicho esto, cuando tienes un diseño que se basa esencialmente en luces y sombras, a menudo carece de una buena relación de contraste. Y ese es un gran revés cuando se trata de accesibilidad.

Aquí tampoco estamos hablando solo de personas con discapacidad visual, es frustrante mirar botones que se pueden presionar o no, incluso solo para alguien que se ha sentado frente a su pantalla durante un par de horas.

• Problema de espaciado

Dado que cada elemento usa dos sombras, el espacio total que usa cada elemento en Neumorfismo es significativamente mayor de lo normal. Esto dificulta el diseño de interfaces complejas y con muchos elementos.

Dicho esto, el neumorfismo definitivamente irradia una estética minimalista de moda hasta su esencia. Sin embargo, como todas las nuevas tendencias en la etapa inicial, tendrá que desarrollarse y adaptarse para compensar sus limitaciones. Sin embargo, a los diseñadores se les ocurren continuamente nuevas ideas para lograrlo, así que démosle tiempo y veamos si la estética neumorfica nos pasa de largo en un año o dos o si están aquí para quedarse.

Aquí dejo un link
Generador de Neumorphism

“yeiiii!” xD

Después de este curso voy por el de Figma. Ya he tomado el de la plataforma de Leo y ha estado increíble! Solo será para reforzar conocimientos 💚

Geniaaal! Me encanta el neomorfismo, la verdad yo trataba de hacer diseños por el estilo pero no tenia ni idea de que era una corriente estética ya bajo ese nombre.

Tal cual lo menciona la profe, La planificación es fundamental para poder avanzar. La definicion de que queremos es un 40% de un proyecto.

Al curso de Figma!!!

Resumen de la clase a nivel general

• Saber que quieres crear, diseñar, hacer.
• Hacer un boceto de esto a mano o con herramientas digitales.
• Pensar en una guia de estilos, podemos apoyarnos en una ya existente.

😃 Se tu propio tester! Que buen consejo! Cuando hacemos esto ponemos nuestra marca personal para entregar un producto de calidad! Que bonito que como desarrolladores seamos proactivos y pensemos en todos los escenarios en que nuestra aplicacion puede fallar! Eso es nunca parar de aprender! 💚 Porque cada vez que nos esmeramos en arreglar algo, aprendemos algo nuevo 💚

Culminando este curso, procedo a comerme el curso de FIGMA :3

A ver como va el proyecto, tengo ganas de tocar código ;_;

👌