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

Wireframes y comunicación visual simple, intuitiva y atractiva

19/28
Recursos

Aportes 16

Preguntas 1

Ordenar por:

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

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

Aquí dejo un link
Generador de Neumorphism

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 💚

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.

“yeiiii!” xD

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

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.

Al curso de Figma!!!

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.

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.

👌