Clase Taller Diseño Plataformas Digitales semana 25/08/2025

Recomendaciones diseño de retícula

Para diseñar una retícula limpia en iOS y Android que no interfiera con los iconos del sistema (como la batería, la hora o las barras de navegación), debes respetar las llamadas Zonas Seguras (Safe Areas).

El margen superior e inferior absoluto que debes dejar libre en tus diseños es el siguiente:

📱 iOS (iPhones con Dynamic Island / Notch y Face ID)

• Margen Superior (Status Bar): 47 pt a 59 pt (varía según el modelo, pero 54 pt es el estándar seguro actual para cubrir la Dynamic Island).
• Margen Inferior (Home Indicator): 34 pt (el espacio reservado para la barra de inicio de iOS).

🤖 Android (Dispositivos modernos de pantalla completa)

• Margen Superior (Status Bar): 24 dp a 48 dp (varía según la marca y la perforación de la cámara; 48 dp es la recomendación estándar de Material Design 3).
• Margen Inferior (Navigation Bar): 48 dp (el espacio que ocupa la barra de tres botones o la barra de gestos del sistema).

📏 Cómo estructurar tu retícula (Grid System)

Para que tus diseños sean simétricos y profesionales, integra estos márgenes del sistema dentro de tu estructura de columnas:

• Puntos de inicio del contenido: Tu contenido real (títulos, botones de la app, imágenes) debe comenzar debajodel margen superior y terminar antes del margen inferior.
• Márgenes laterales (Padding): Usa un estándar de 16 pt/dp o 24 pt/dp en los bordes izquierdo y derecho de la pantalla para pantallas móviles.
• Regla de incremento: Diseña basándote en una retícula de 8 pt/dp (todos tus elementos, espacios y cajas deben ser múltiplos de 8: 8, 16, 24, 32, 48, 64, etc.).

📏 1. Dimensiones de Pantalla Estándar (Artboards / Frames)

Para diseñar interfaces móviles hoy en día, utiliza estos tamaños de lienzo como base. Son los tamaños estándar de la industria que garantizan que el diseño se escale bien a pantallas más grandes o pequeñas:

• iOS (iPhone 13 / 14 / 15 / 16): Usa un Frame de 393 x 852 pt.
• Android (Google Pixel / Samsung Estándar): Usa un Frame de 360 x 800 dp o 412 x 915 dp (Material Design 3).

⚙️ 2. Cómo configurar la Retícula (Layout Grid) en Figma

Para crear una estructura limpia donde los elementos se alineen perfectamente, configura tu panel de Layout Grid en la barra lateral derecha de Figma con los siguientes valores:

Para iOS (Frame: 393 x 852)

1. Haz clic en el botón + en Layout Grid.
2. Cambia el icono de cuadrícula por el de Columns (Columnas).
3. Aplica estos valores exactos:
   • Count (Cantidad): 4 (es el estándar para teléfonos).
   • Color: Rojo con 10% de opacidad (o el que prefieras).
   • Type (Tipo): Stretch (para que sea responsivo).
   • Margin (Márgenes laterales): 16 o 20 (espacio libre en los bordes izquierdo y derecho).
   • Gutter (Separación entre columnas): 16 (el espacio entre cada barra vertical).

Para Android (Frame: 360 x 800)

1. Haz clic en el botón + en Layout Grid y selecciona Columns.
2. Aplica estos valores:
   • Count: 4
   • Type: Stretch
   • Margin: 16
   • Gutter: 16 o 24 (Material Design suele usar separaciones un poco más amplias).

📐 3. Cómo marcar las Zonas Seguras con Guías Visuales

Dado que Figma no bloquea automáticamente los márgenes superior e inferior del sistema, la mejor práctica es arrastrar guías horizontales o dibujar rectángulos invisibles como referencia:

1. En iOS: Activa las reglas en Figma (Shift + R). Arrastra una guía horizontal desde la parte superior hasta los 54 pt (fin de la barra de estado). Arrastra otra desde abajo hacia arriba hasta los 34 pt (zona del indicador de inicio). El espacio central que queda es tu área de trabajo real para botones y texto.
2. En Android: Haz exactamente lo mismo colocando la guía superior en 48 dp y la guía inferior en 48 dp.

💡 Consejo Pro para el Diseño de Retículas

Para el espaciado vertical (la distancia entre un título, un párrafo y un botón), no uses columnas. Utiliza la regla de los 8 puntos.

Asegúrate de que la altura de tus componentes y los espacios de separación vertical sean siempre múltiplos de 8 (por ejemplo: un botón de 48 pt de altura, separado por 24 pt del siguiente elemento). Esto creará un ritmo visual perfecto sin necesidad de saturar la pantalla con líneas horizontales.