Espaciado y elevación

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