Si ha estado en la ciudad de Nueva York y ha caminado por las calles, es fácil descubrir cómo ir de un lugar a otro gracias al sistema de coordenadas en el que está construida la ciudad. Así como la previsibilidad de la cuadrícula de una ciudad ayuda a los lugareños y turistas a navegar fácilmente, las cuadrículas de páginas web brindan una estructura que ayuda tanto a los usuarios como a los diseñadores. Debido a su punto de referencia constante, las cuadrículas mejoran la legibilidad y el rastreo de páginas y permiten que las personas lleguen rápidamente a donde necesitan ir.
Definición: PERO cuadrícula consta de columnas, espacios y márgenes que proporcionan estructura para organizar elementos en una página.
Hay tres tipos de cuadrículas comunes que se utilizan en sitios web e interfaces: cuadrícula de columnas, cuadrícula modular y cuadrícula jerárquica.
Rejilla de columnas consiste en dividir la página en columnas verticales. A continuación, los elementos y el contenido de la interfaz de usuario se alinean con estas columnas.
Rejilla modular expande la cuadrícula de columnas al agregarle filas. Esta intersección de columnas y filas forma los módulos mediante los cuales se alinean los elementos y el contenido. Las cuadrículas modulares son excelentes para el comercio electrónico y las páginas de listados porque las filas se repiten para facilitar la visualización.
Cuadrícula jerárquica: El contenido está organizado por importancia usando columnas, filas y módulos. Los elementos y piezas de contenido más importantes ocupan las partes más grandes de la cuadrícula.
Contenido del Articulo
Destrucción de malla
Independientemente del tipo de cuadrícula que utilice, se compone de tres elementos: columnas, espacios y márgenes.
Columnas: Las columnas ocupan la mayor parte del espacio en la cuadrícula. Los elementos y el contenido se colocan en columnas. Para adaptarse a cualquier tamaño de pantalla, los anchos de columna suelen definirse como porcentajes en lugar de valores fijos, y el número de columnas puede variar. Por ejemplo, una cuadrícula en un dispositivo móvil puede tener 4 columnas, mientras que una cuadrícula en una computadora de escritorio puede tener 12 columnas.
Canalones: Un canalón es un espacio entre columnas que separa elementos y contenido de diferentes columnas. El ancho del espacio es un valor fijo, pero puede cambiar dependiendo de los diferentes puntos de control. Por ejemplo, los márgenes más amplios son adecuados para pantallas grandes, mientras que los márgenes más pequeños son adecuados para pantallas más pequeñas, como las de los dispositivos móviles.
Campos: Esto se aplica a las áreas de los bordes izquierdo y derecho de la pantalla. El contenido no vive en los márgenes de la cuadrícula. Este espacio se puede fijar o expresar como un porcentaje del ancho de la pantalla y puede cambiar en diferentes puntos de interrupción.
Ejemplos de cuadrícula
Ejemplo 1: cuadrícula jerárquica
Nuestro primer ejemplo es de The New York Times. Esta pantalla utiliza una cuadrícula jerárquica para crear la sensación de leer un periódico. En el tamaño de la pantalla del escritorio, las dos columnas principales forman una cuadrícula jerárquica. Las noticias más importantes ocupan más espacio en la grilla, en la columna de la izquierda, seguidas de las noticias secundarias y terciarias, que ocupan una columna más pequeña y los módulos de la derecha.
Ejemplo 2: Cuadrícula de columnas
Nuestro segundo ejemplo es de Ritual.com, una empresa de vitaminas. Este diseño utiliza una cuadrícula de columnas para crear una experiencia visual atractiva. En este tamaño de pantalla, cuatro columnas de igual tamaño forman la estructura de la cuadrícula y los elementos se alinean con y dentro de esas columnas. Las ranuras, los espacios entre las columnas, también tienen un tamaño uniforme y ayudan al usuario a separar visualmente los diferentes productos. Los márgenes son de tamaño independiente y son iguales entre los lados izquierdo y derecho.
Ejemplo 3: rejilla modular
Nuestro tercer ejemplo es de Behance, la biblioteca de diseño. El diseño del sitio utiliza una cuadrícula modular para crear una experiencia de navegación agradable. Al tamaño del escritorio, las filas constan de 4 módulos del mismo tamaño. Los espacios horizontales son ligeramente más gruesos que los espacios verticales y los márgenes son del mismo tamaño a la izquierda y a la derecha del diseño. Como en el ejemplo anterior, los canalones separan visualmente cada elemento.
Ejemplo 4: rotura de malla
Nuestro último ejemplo es Shrine de Google Material Studies. Este diseño utiliza una cuadrícula de columnas, como podemos ver en la navegación de la izquierda, que tiene 2 columnas de ancho. Mire de cerca y verá que algunas imágenes de productos están en los márgenes y otras no. Esta ruptura en la cuadrícula dificulta enfocar o escanear rápidamente las imágenes de los productos y llama más la atención sobre algunos productos que sobre otros. Romper la red de vez en cuando está bien, siempre y cuando tengas una buena razón para ello.
Beneficios de la red
El uso de la cuadrícula beneficia tanto a los usuarios finales como a los diseñadores:
- Los diseñadores pueden crear rápidamente interfaces consistentes.
- Los usuarios pueden escanear fácilmente interfaces predecibles basadas en cuadrículas.
- Una buena cuadrícula se adapta fácilmente a diferentes tamaños y orientaciones de pantalla. De hecho, los diseños de cuadrícula son un componente esencial del diseño web receptivo. El diseño receptivo utiliza puntos de interrupción para determinar el umbral de tamaño de pantalla en el que debe cambiar el diseño. Por ejemplo, una pantalla de escritorio podría tener 12 columnas de cuadrícula, que podrían apilarse en un dispositivo móvil para que el diseño resultante solo tenga 4 columnas.
Más importante aún, la cuadrícula no es un concepto de una sola vez. Es utilizado tanto por diseñadores como por desarrolladores. Asegúrese de informar a sus desarrolladores sobre la estructura de cuadrícula utilizada al crear el diseño para que puedan implementarlo en consecuencia.
Selección y configuración de una cuadrícula
La forma en que usa y personaliza la cuadrícula es fundamental para crear diseños y experiencias bien diseñados para su usuario.
Elija la malla adecuada para sus necesidades. Tómese el tiempo para considerar qué tipo de cuadrícula (columna, modular o jerárquica) se adapta mejor a sus necesidades. Una cuadrícula jerárquica es más adecuada si un elemento de su página siempre será más importante que los elementos circundantes. Por ejemplo, las cuadrículas jerárquicas son excelentes para las plataformas de noticias en línea. Si el contenido que necesita mostrar varía mucho, considere usar una columna básica o una cuadrícula modular, ya que brindan más flexibilidad de diseño. Por ejemplo, los elementos y el contenido pueden abarcar varias columnas o módulos, o solo uno para adaptarse a las necesidades del diseño.
Tómese el tiempo para configurar la cuadrícula. Una vez que haya averiguado qué tipo de rejilla es la adecuada para sus necesidades, es hora de configurarla. Determine el número de columnas, así como los márgenes y espacios relativos a las dimensiones de la pantalla. Es probable que desee prepararse para las pantallas de dispositivos móviles, tabletas y computadoras de escritorio. Una cuadrícula de 12 columnas del tamaño de una computadora portátil o de escritorio generalmente es lo suficientemente flexible para la mayoría de las necesidades de diseño. El número de columnas disminuirá a medida que disminuya el tamaño de su dispositivo. Las herramientas de estructura alámbrica como Sketch y Figma agilizan y facilitan la configuración y edición de la malla incluso después de haber comenzado a diseñar.
Coloque siempre el contenido en columnas, no en espacios. Los canales deben permanecer vacíos mientras coloca elementos en la cuadrícula para separar y alinear claramente el contenido y los elementos.
Considere usar el sistema de cuadrícula de 8px. Para los dispositivos más comunes, el tamaño de píxel de la pantalla es un múltiplo de 8. Mantener los valores de los componentes de la cuadrícula en un múltiplo de 8 tiende a facilitar el escalado y la implementación de la cuadrícula.
Conclusión
Las cuadrículas no solo brindan a los diseñadores una estructura en la que basar los diseños, sino que también mejoran la legibilidad y la capacidad de escaneado para los usuarios finales. Utilice un buen sistema de cuadrícula que se adapte fácilmente a diferentes tamaños de pantalla.
