No tienes acceso a esta clase

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

Aprende Inglés, Programación, AI, Ciberseguridad y mucho más.

Antes: $249

Currency
$209
Suscríbete

Termina en:

4 Días
9 Hrs
12 Min
20 Seg

Espaciado y elevación

12/26
Recursos

Aportes 2

Preguntas 0

Ordenar por:

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

Breakpoints: es un punto específico en la medida de la pantalla donde el diseño de la interfaz de usuario se ajusta para adaptarse a diferentes dispositivos o resoluciones, proporcionando una experiencia de usuario óptima y coherente.


Se pueden usar dos tipos de escalas de espaciados

  • Espaciado de componentes: comenzando con unidades pequeñas. Ejemplo, 4px.
  • Espaciado de layout: Distribución de las pantallas (Grids)

Breakpoints

  • Mobile: 640px
  • Tablet: 768px
  • Laptop: 1024px
  • Desktop: 1280px

Consideraciones

  1. Usar menos espacio entre componentes que comparten una relación cercana (Ley de proximidad)
  2. Pueden existir excepciones en donde no haya espaciado. Ejemplo, al centrar tomando en cuenta el texto.
  3. Las diferentes plataformas tienen diferentes unidades de medida
    iOS: PT
    Android: DP
    Web: PX

Elevación

Representa la distancia y la jerarquía entre 2 superficies en el eje Z

💡 Usamos las sombras como intención visual

Recomendacion para los espaciados.

  • Tener espaciados a nivel componentes, y tener espaciados a nivel layout.
  • Es importante tener pautas.
  • La pauta se puede ir mejorando en base a lo que necesitemos
  • Breackpoint: Deben ser lo mismo que usan el equipo de desarrollo.

Consideraciones

  • Mantener los componentes que este relacionados, con un espaciado sin tanta diferencia. Por ejemplo Card que se relacionen a un mismo contenido.

  • Las medidas no deben estarescritas en piedras. por ejemplo, solo podemos decir que el texto debe estar centrado en la card, sin importar cual es la medida exacta.
    .
    .

Martin Coronel - Product Designer
Linkedin