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
- Usar menos espacio entre componentes que comparten una relación cercana (Ley de proximidad)
- Pueden existir excepciones en donde no haya espaciado. Ejemplo, al centrar tomando en cuenta el texto.
- 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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?