Descubre qué ha cambiado en nuestro medio

1

Todo sobre el diseño de páginas web acaba de cambiar

Conceptos que forman parte del diseño en CSS

2

La importancia de recordar las herramientas existentes

3

Flujo normal del documento: display block, inline e inline-block

4

Contextos de formato: Formato de Contexto de Bloque (BFC)

5

Posicionamiento + Dinámica: ¿Cómo se vería?

¿Flexbox o CSS Grid?

6

Diferencias entre Flexbox y CSS Grid

7

Similitudes entre Flexbox y CSS Grid

8

¿Puedo trabajar con Flexbox y CSS Grid al tiempo?

9

Dinámica: ¿Qué usarías? (Parte 1)

10

Dinámica: ¿Qué usarías? (Parte 2) + Reto

11

¿Cuándo usar Flexbox y cuándo usar CSS Grid?

Modern Layouts con CSS Grid

12

¿Qué son los Modern CSS Layouts?

13

Patrones para usar como punto de partida

14

Layouts: Super Centered, The Deconstructed Pancake, Sidebar Says, Pancake Stack, Classic Holy Grail Layout

15

Layouts: 12-Span Grid, RAM (Repeat, Auto, MinMax), Line Up, Clamping My Style, Respect for Aspect

Diseño web para desarrolladores

16

Dinámica: No puedo dejar de ver

17

Design System y detalles visuales a tener en cuenta

18

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

19

Wireframes y comunicación visual simple, intuitiva y atractiva

20

Figma para devs: Auto Layout y Neumorphism (Parte 1)

21

Figma para devs: Auto Layout y Neumorphism (Parte 2)

Del diseño al código

22

Primeros pasos y estructura inicial

23

Ubicación y creación de elementos

El futuro de CSS Grid

24

Entendiendo las versiones de CSS: ¿existirá CSS4?

25

CSS Subgrid

26

Native CSS Masonry Layout

27

CSS feature queries: @supports

28

Nosotros y el futuro de la web: tips para seguir aprendiendo y mantenerse al día

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Figma para devs: Auto Layout y Neumorphism (Parte 2)

21/28
Recursos

Aportes 116

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Este fue mi resultado

Aquí el diseño que hice 😄

Me gustó bastante el ejemplo de Dribbble que la profesora puso así que quise hacerlo

El link del diseño en Figma

Aquí va el mío ! feliz de haber aprendido a usar figma es muy buena herramienta !

mi diseño:
https://www.figma.com/file/wpRvdwGkHJ7VGxDclLAJii/video-player?node-id=7%3A13

que facil es usar figma, la forma de hacer sombras es super sencilla y lo mejor es que los iconos se pueden exportar facilmente

<h3>Es la primera vez que intento algo de neomorfismo; antes me parecía algo exagerado pero ahora me empieza a gustar.
Supongo que si no abusamos de ello se puede hacer algo muy interesante.</h3>

Aquí les dejo mi diseño:

Hasta aquí lo que se ha podido lograr usando Adobe XD (lo prefiero a Figma); no sé bien cómo trabajar la imagen. Luce un poco fuera de tono. Sus comentarios y retroalimentación son muy apreciados.

![](

Saludos.

No entiendo por qué no comparte pantalla y hace un ejemplo en vivo. ._. :’(

Comparto mi trabajo💚

No pude poner los iconos :c

Trantando de poder logar el Neomorfismo 🥶
.

Me parece excelente figma, primera vez que lo uso y pude replicar el boceto de la profe sin problemas. Super sencillo.

Este es mio

Con tan solo 2 sombras se pueden hacer efectos muy buenos 👍
(Una obscura y otra del color del texto un poco más abajo)

Así fue como quedo el diseño en figma mi reproductor de música 😅
Enlace por si quieren verlo

Les comparto como me quedó mi diseño:

No me gusta mucho el neumorfismo, lo hice más simple 🙂

Compañeros les comparto un plugin que encontre dentro de la comunidad de figma que nos sirve justamente para generar este efecto de sombras y luz del neumorphismo con mucha mayor facilidad.

Resultado.

Hice algo sencillo para probar figma, tiene su dificultad, me tomare el curso para poder entenderle mucho mejor a todas las posibilidades

este es mi ejercicio en diseño
PD: no soy muy amigo del Neumorphism 😃

estaba esperando este curso 😃

Les comparto mi proyecto 💖

Figma es genial al igual que Adobe XD

Mi prototipo en Figma:



Ahora a intentar llevarlo a código 😉

Que increibles diseños.
Por mi parte me encuentro diseñando el propio y lo subiré luego.

  • Con cual me quedo ???

VERSION 1

VERSION 2

Pensé que seria mas fácil :C creo que ya le estoy agarrando el tiro a las sombras.

![](

Así va mi reproductor

Por acá mi aporte. No me decidí si quedaba mejor con o sin neomorfismo, si gustas dame tu opinión! 🤗

Link de figma: https://www.figma.com/file/Uo8jzGOiY6f2NLathbskyM/Music-player

Con un poco de Neomorfismo

Sin Neomorfismo

🐰

Mi diseño. La verdad no sé si emplee muy bien el neomorfismo, pero hice mi mejor intento

Comparto mi diseño

Me llevó tiempo pero me gusta el resultado 😃

Reto:

comparto mi diseño.

Así quedó mi diseño:

Sé que tiene muchos errores, pero creo que no está mal para ser literalmente la primera vez que uso figma 😅.

Aquí está mi demo

Este fue mi resultado, figma? no pense que fuera de gran utilidad para realizar un diseño en este caso el reproductor sin duda un buen ejercicio por parte de la docente

Tremendo como directamente podes copiar y pegar una imagen dentro de tu rectangulo y figma te la encuadra. (Eso solo tuve que hacer para insertar la imagen del leon)

Creo que es importante aprender cualquier herramienta de diseño, en especial para los proyectos personales. Figma es genial, fácil de usar y acceso gratuito.

![](

Solo afinando detalles… 😃)

Saque mi lado creativo y aunque se que no es lo mejor en diseño, estoy satifsecho con lo que hice (: ajsjads

Al lado de la pestaña Design (en el panel derecho), en Prototype pueden definir como hacer scroll en los elementos. Esto sirve para el prototipo. Por ejemplo, este es mi diseño.

Nunca supe como agregar icono a los botones, pero este es mi diseño.

Esta fue mi exploración con Figma.

Me ha costado, pero al final no me ha salido tan chulo como a todos los demas 😦


La propuesta de diseño realizada en Figma utilizando el concepto de Glassmorfismo


Mi resultado utilizando el concepto de Glassmorfismo

Mi humilde diseño

He sido pésimo para este reto, pero hice el intento Teacher 🥺

Mi diseño 😁

Mi diseño del Reproductor de música uwu, me encanto mucho trabajar en Figma

Hola, Quise salirme del tema musical y adentrarme a una de las cosas que más amo. Los audiolibros, en especial de terror con un bonito homenaje a una de mis historias favoritas ♥.♥

Mi pequeño diseño.

Bueno así quedo

Aquí mi ejemplo :DD
link de figma

Así quedo el Boceto
no se yo digo que este boceto tiene como mucha iluminación, poco a poco lo voy acomodande.

No es el mejor del mundo pero se aprendio sobre figma y sobre este estilo me gusto esta clase ojala la profe usara menos diapositivas. pero sabe mucho y tiene mucha pasion por el tema

Figma
https://www.figma.com/file/AtNx7UkEhJCZwNVPQjXZbC/Music-player-neumorphismo?node-id=0%3A1

Figma me voló la mente, ahora ya puedo plasmar los primeros proyuectos para mis clientes.

Este mi resultado , en codigo ya colocare las portadas y los iconos de botones

Les comparto algunos recursos hechos por Om Arya para que prueben otras configuraciones de reproductor https://www.figma.com/community/file/896690537117411701

👨‍💻👨‍💻👍

este es el mio :

link: https://www.figma.com/file/byBJXoN6FIIp6pP4SJRITb/Untitled?node-id=0%3A1

Poco a poco se va aprendiendo ! jaja

Aquí el mío, la verdad que si está bien bonito figma

🤗 sin duda figma es otra forma de relajarnos, no cuesta nada manejarlo

Emocionado esperaba este curso con ansia.

así me queo 😃

Prefiero codear xd
Amo los diseños pero mejor le dejo el trabajo a un diseñador profesional jaja 😅
No lo disfruto tanto como darles vida con codigo :3

No se usar figma en algun momento voy a aprender, pero pude lograr hacer esto.

Para un primer intento creo que no quedó tan peor jaja

Muy sencilo

Me ha llevado varias horas hasta entender el Neomorphism y conseguir emularlo. No es gran cosa, pero estoy contento con el resultado. Ahora toca transformarlo en código 💪

[](

mi trabajo:

Así quedó el mío, basados en azules que me gustan mucho.