4.2.8 Cuadrícula

Es más probable que los diseños basados en una cuadrícula subyacente tengan una coherencia visual general que los que no tienen cuadrícula. El sistema de cuadrícula que se describe aquí le ayudará a establecer jerarquías entre gráficos, imágenes y texto. Cuando se aplica de manera consistente, la cuadrícula nos ayudará a lograr una presencia de diseño de impresión impactante y cohesiva.

Construcción de la cuadrícula

Para crear la cuadrícula de impresión, divida entre 10 el tamaño de recorte vertical y horizontal del documento. Esto le da una cuadrícula de 10 × 10. Todos los diseños de esta guía se basan en esta cuadrícula. De vez en cuando, es útil dividir las unidades de la cuadrícula por la mitad. Esto genera más opciones para la colocación de varios elementos, sin dejar de alinearse con la cuadrícula general.

A diferencia de los materiales impresos, que tienen medidas fijas, los productos digitales se aplicarán a una variedad de dispositivos y tamaños de pantalla. Para permitir estas variaciones, los productos digitales se crean utilizando un diseño web adaptativo y una cuadrícula digital fluida de doce columnas. Este enfoque permite que el mismo diseño se aplique a pantallas grandes y pequeñas.

Móvil primero

Para los productos digitales se debe utilizar una estrategia de móvil primero: los diseños deben adaptarse para facilitar la lectura, la navegación y el acceso en un dispositivo portátil. Estos diseños deben:

• Identificar el contenido más importante.
• Tener en cuenta el tamaño del texto y la imagen en dispositivos pequeños.
• Hacer que la navegación, los vínculos y los botones sean fáciles de manejar.

Aunque los estudios de investigación demuestran que una gran proporción de quienes ven productos digitales de la Iglesia utilizan computadoras de escritorio y portátiles, el número de personas que los ven en dispositivos móviles en todo el mundo continúa aumentando. Al aplicar una estrategia de móvil primero, ayudamos a garantizar una experiencia positiva para el usuario, ahora y en el futuro.

En el diseño adaptativo, las medidas de columna no están determinadas por un número de píxeles definido, sino por un porcentaje de la pantalla de visualización. Los componentes diseñados con capacidad de adaptación determinarán estas medidas automáticamente.

Dispositivos móviles pequeños (teléfonos)

• Cuadrícula: cuatro columnas.
• Diseño: una columna. Utilice los diseños de dos columnas con moderación. La información no debe ser densa.
• Interacción con el usuario: tacto con los dedos. Diseñe puntos de interacción para facilitar el manejo.

Dispositivos móviles más grandes (tabletas)

• Cuadrícula: doce columnas.
• Diseño: Utilice diseños de una o dos columnas en orientación vertical, y hasta cuatro columnas en horizontal. Densidad de información media o baja.
• Interacción con el usuario: tacto con los dedos. Diseñe puntos de interacción para facilitar el manejo.

Monitores (computadoras portátiles, de escritorio)

• Cuadrícula: doce columnas.
• Diseño: se adapta a una variedad de diseños de columna. La información densa puede ser apropiada, pero tenga siempre en cuenta la legibilidad.
• Interacción con el usuario: el teclado, el ratón o el panel táctil permiten puntos de interacción más pequeños.

Televisores o pantallas proyectadas

• Cuadrícula: doce columnas con un margen de dos columnas a cada lado. No coloque contenido en los márgenes, ni siquiera en el caso de las imágenes sin bordes.
• Diseño: trátelo como una tableta para adaptarse a resoluciones más bajas. Baja densidad de información.
• Interacción con el usuario: utilice grandes puntos de interacción para facilitar la navegación con el controlador de juegos, el teléfono o el control remoto tradicional.