Descubre qué ha cambiado en nuestro medio

1

Diseño Web Avanzado con CSS Grid y Flexbox

Conceptos que forman parte del diseño en CSS

2

Conceptos Fundamentales de Diseño CSS: Display y Posicionamiento

3

Fundamentos de Display en CSS: Bloque, Inline y Flujo Normal

4

Formato de Contexto de Blog en CSS: Creación y Uso de BFCs

5

Posicionamiento y contexto de apilamiento en CSS

¿Flexbox o CSS Grid?

6

Diferencias entre CSS Grid y Flexbox

7

Similitudes entre Flexbox y CSS Grid en Alineación y Jerarquía

8

Uso combinado de Flexbox y CSS Grid en diseño web

9

Uso de Flexbox y CSS Grid en Componentes Web

10

Flexbox vs CSS Grid: Cuándo y Cómo Usarlos

11

Cuándo usar Flexbox y CSS Grid en diseño web

Modern Layouts con CSS Grid

12

Diseño Moderno de Layouts con CSS Grid y Flexbox

13

Patrones de Diseño con CSS Grid

14

Diseños Modernos en CSS: Cinco Técnicas Sencillas

15

Layouts CSS con Pocas Líneas de Código

Diseño web para desarrolladores

16

Desarrollo de Habilidades Visuales en Diseño Web

17

Design Systems: Guía Práctica para Desarrolladores y Diseñadores

18

Principios de Diseño UI/UX para Desarrolladores

19

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

20

Diseño para Desarrolladores: Uso de Figma y Auto Layout

21

Neomorfismo en Figma para Desarrolladores

Del diseño al código

22

Construcción de Estructura HTML y CSS desde Figma

23

Diseño Web con Neomorfismo en HTML y CSS

El futuro de CSS Grid

24

Pros y contras del CSS4: Discusión actualizada

25

CSS Subgrid: Herencia de Filas y Columnas en Diseño Web

26

Diseño Masonry Nativo en CSS: Implementación y Ejemplos

27

Consultas de Características CSS con @supports

28

Consejos para Mantenerse Actualizado en CSS

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

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

19/28
Recursos

¿Cómo crear Y-Frames efectivos para un diseño atractivo?

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.

¿Qué pasos seguir para una comunicación visual efectiva?

  1. 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.

  2. 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.

  3. 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.

¿Cómo aplicar el neomorfismo en el diseño?

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.

¿Qué recomendaciones seguir al diseñar?

  • 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

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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

0:25 Para este curso, ¿Qué es lo que queremos? . R= Código...

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

👌