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.
Descubre qué ha cambiado en nuestro medio
Diseño Web Avanzado con CSS Grid y Flexbox
Conceptos que forman parte del diseño en CSS
Conceptos Fundamentales de Diseño CSS: Display y Posicionamiento
Fundamentos de Display en CSS: Bloque, Inline y Flujo Normal
Formato de Contexto de Blog en CSS: Creación y Uso de BFCs
Posicionamiento y contexto de apilamiento en CSS
¿Flexbox o CSS Grid?
Diferencias entre CSS Grid y Flexbox
Similitudes entre Flexbox y CSS Grid en Alineación y Jerarquía
Uso combinado de Flexbox y CSS Grid en diseño web
Uso de Flexbox y CSS Grid en Componentes Web
Flexbox vs CSS Grid: Cuándo y Cómo Usarlos
Cuándo usar Flexbox y CSS Grid en diseño web
Modern Layouts con CSS Grid
Diseño Moderno de Layouts con CSS Grid y Flexbox
Patrones de Diseño con CSS Grid
Diseños Modernos en CSS: Cinco Técnicas Sencillas
Layouts CSS con Pocas Líneas de Código
Diseño web para desarrolladores
Desarrollo de Habilidades Visuales en Diseño Web
Design Systems: Guía Práctica para Desarrolladores y Diseñadores
Principios de Diseño UI/UX para Desarrolladores
Diseño de Y-Frames para Reproductor de Música Mobile
Diseño para Desarrolladores: Uso de Figma y Auto Layout
Neomorfismo en Figma para Desarrolladores
Del diseño al código
Construcción de Estructura HTML y CSS desde Figma
Diseño Web con Neomorfismo en HTML y CSS
El futuro de CSS Grid
Pros y contras del CSS4: Discusión actualizada
CSS Subgrid: Herencia de Filas y Columnas en Diseño Web
Diseño Masonry Nativo en CSS: Implementación y Ejemplos
Consultas de Características CSS con @supports
Consejos para Mantenerse Actualizado en CSS
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
El diseño de interfaces digitales es una labor que exige claridad de ideas y una comunicación visual efectiva. Antes de comenzar cualquier proceso de diseño, es esencial saber qué queremos lograr. Este enfoque inicial evitará desperdicios de tiempo y esfuerzo. A continuación, exploraremos los pasos fundamentales para crear Y-Frames efectivos en el contexto del diseño de un reproductor de música para dispositivos móviles.
Definir objetivos claros: Nuestro objetivo principal en este proyecto es desarrollar un reproductor de música optimizado para dispositivos móviles, utilizando la metodología Mobile First. Esta técnica nos permite centrarnos en la funcionalidad esencial y luego expandirnos si es necesario.
Crear un boceto o Y-Frame: Considera tu Y-Frame como la columna vertebral de tu diseño. Puedes empezar con lápiz y papel para capturar tus ideas en bruto o utilizar herramientas en línea gratuitas que facilitan este proceso. Algunos enlaces útiles se pueden encontrar en el curso.
Desarrollar una guía de estilos: Solo una vez definido el boceto, es el momento adecuado para iniciar el trabajo con aspectos estéticos como colores, tipografías, ilustraciones e iconos. Asegúrate de que estas elecciones visuales se alineen con tus objetivos de comunicación.
El neomorfismo es una tendencia de diseño con opiniones encontradas; sin embargo, puede ofrecer una experiencia divertida y única. Si estás dispuesto a experimentar y aprender, el neomorfismo puede renovar el aspecto visual de tu proyecto. Utiliza esta tendencia conscientemente, evaluando sus beneficios y desventajas, y explórala mientras aplicas tus diseños en herramientas interactivas.
Mantén la simplicidad: Recuerda siempre que "menos es más". Prioriza un diseño limpio y simple antes de sumergirte en detalles. Esto facilita la comunicación visual y mejora la experiencia del usuario.
Adopta la perspectiva del usuario: Actúa como un usuario que está probando la aplicación por primera vez. Evalúa cómo el usuario interactuaría con los elementos y navega por el diseño. Hazte preguntas como ¿qué sucedería si hago clic aquí?, ¿cómo se ve el diseño después de hacer scroll?
Sé tu propio tester: Probar tu diseño desde la perspectiva de un usuario inesperado te ayudará a descubrir fallos potenciales y mejorar la experiencia general.
Al implementar estas directrices, puedes crear una interfaz de usuario que sea no solo funcional sino también estéticamente agradable. Te animo a seguir aprendiendo y experimentando con nuevos enfoques mientras desarrollas tus bocetos y te aventuras en nuevas tendencias de diseño. Tu habilidad para combinar simplicidad y funcionalidad destacará tu trabajo en el campo del diseño digital.
Aportes 20
Preguntas 1
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:
Pensemos siempre en una comunicación visual simple intuitiva y atractiva.
Juega al papel de usuario siempre, usando tus propios bocetos.
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
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.
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
😃 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 ;_;
👌
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?