Cómo utilizar grillas al crear prototipos de páginas.

Este artículo será útil si crea prototipos de sitios para llevar sus ideas a los diseñadores y desarrolladores web. El tutorial te enseñará cómo hacer un prototipo de una malla.

Descargo de responsabilidad: si usted hace un prototipo sin una rejilla, nada terrible sucederá. Un diseñador profesional o desarrollador web agregará una cuadrícula para ti. Pero si aprende a trabajar con grillas, la calidad de los prototipos aumentará drásticamente, y verá las páginas de los sitios de una manera diferente.

¿Qué es una grilla y por qué usarla?

Una cuadrícula es un sistema de líneas verticales o verticales y horizontales que divide una página en columnas o celdas. Creado mediante una columna o celda de cuadrícula, forma la estructura o el esqueleto de la página, con el que los diseñadores organizan el contenido.

Es decir, con la ayuda de las cuadrículas crea un marco en el que se usan todos los elementos de la página: logotipo, menú, control deslizante, forma, imagen, etc. Gracias al esqueleto, los elementos de la página pueden posicionarse armoniosamente, elegir sus dimensiones relativas y absolutas, establecer el ritmo visual.

Un punto importante: las cuadrículas proporcionan flexibilidad de diseño, que es necesaria para adaptar el diseño a diferentes tamaños de pantalla. Es decir, el uso del marco, un paso para crear una página receptiva.

En la página terminada, las cuadrículas no suelen ser visibles. Pero se pueden ver en prototipos y diseños.

Que son las grillas

Si no está involucrado en el diseño y desarrollo web profesionalmente, es suficiente saber acerca de la existencia de dos tipos de grillas: columnar y modular.

Una cuadrícula de columnas es un sistema de líneas verticales que divide una página en columnas y sangrías.

Las áreas oscuras y anchas de la ilustración son columnas, la luz y la estrecha son muescas.

La cuadrícula modular es un sistema de líneas verticales y horizontales que divide la página en módulos.

En este caso, los módulos son rectángulos de 20 por 20 píxeles, marcados por líneas más gruesas.

Si no es un diseñador y desarrollador web profesional, use una cuadrícula de columnas para crear prototipos. Hay al menos dos razones para esto. Primero: las grillas de columnas son muy populares en la web. Construyen marcos populares, por ejemplo, Bootstrap, Bulma, Skeleton, que los desarrolladores web utilizan para el diseño de la página.

La segunda razón: para el prototipo de la página, es suficiente usar la cuadrícula de columnas. Si es necesario, un diseñador web profesional agregará una cuadrícula modular cuando convierta su boceto en un diseño completo.

Cómo utilizar mallas durante el prototipado.

Esta es una sección práctica que enseña cómo usar las mallas al crear prototipos.

Donde dibujar cuadrículas

La respuesta depende de las herramientas que utilice para la creación de prototipos. Las cuadrículas se pueden dibujar a mano si el prototipo está en una hoja de papel. Si el boceto se crea utilizando programas y servicios especiales, profundice en la configuración. Las herramientas del software de prototipado más popular tienen grillas. Ejemplos a continuación.

Para habilitar la cuadrícula en Moqups, haga clic en el icono del área de trabajo y marque la opción Mostrar cuadrícula de diseño. Si necesita una cuadrícula modular, marque la opción Mostrar cuadrícula de papel.

Para habilitar las cuadrículas en Proto.io, seleccione el menú Preferencias - Configuración de cuadrícula.

Marque la opción Mostrar diseño. Seleccione el número de columnas, su ancho y el ancho de las sangrías entre las columnas ya lo largo de los bordes de la página. Estas configuraciones se discutirán a continuación.

Si necesita una cuadrícula modular, marque la opción Mostrar cuadrícula y especifique la configuración.

Si está utilizando Justinmind Prototype, en el editor, seleccione la pestaña Plantillas y use una de las cuadrículas de plantillas: 12 o 16 columnas.

Si utiliza otro software de creación de prototipos, busque las mallas usted mismo.

Cómo construir una grilla

Crear una cuadrícula: elija el número de columnas, su ancho, así como el ancho de las sangrías entre las columnas ya lo largo de los bordes de la página.

Pregunta: ¿cuántas columnas deberían estar en la cuadrícula de columnas? La respuesta corta es 12. El punto no es ni siquiera que la mayoría de los marcos de CSS que usan los desarrolladores web se basan en cuadrículas de 12 columnas. Si es necesario, se cambian las configuraciones predeterminadas de los marcos.

El número 12 es casi mágico: está dividido en 6, 4, 3 y 2. Esto significa que en una página con una cuadrícula de 12 columnas en una fila puede organizar armoniosamente seis, cuatro, tres o dos elementos. Dado que el número siempre es divisible por sí mismo y por uno, puede colocar 12 o un elemento en una fila.

Además, si no presta atención a las columnas extremas, la cuadrícula de 12 columnas le permite ubicarse de manera armoniosa en una fila de cinco o 10 elementos.

Las cuadrículas con un número diferente de columnas no proporcionan tal flexibilidad. Por ejemplo, 16 se divide en 8, 4 y 2. Para colocar armoniosamente tres o seis elementos en una fila, puede colocar dos columnas externas.

Pero para colocar en una fila de cinco o 10 elementos, debes eliminar las tres columnas extremas. Esto no es muy conveniente.

Al elegir el número de columnas en la cuadrícula, elimine el contenido que planea colocar en la página. Por ejemplo, si crea una página de contenido sin una barra lateral, una columna o un espacio rectangular amplio en el centro de la página es suficiente. Y si hace una página de portafolio o una galería de fotos, necesitará una cuadrícula modular compleja.

Pero para crear un prototipo en 99 casos de cada 100, es conveniente trabajar con una cuadrícula de 12 columnas. Un diseñador profesional o desarrollador web, gracias a la cuadrícula de columnas, convertirá su prototipo en varios diseños para diferentes tamaños de pantalla.

Al crear una cuadrícula, debe seleccionar el ancho de las sangrías en los bordes de la página, el ancho de las sangrías entre las columnas y el ancho de las columnas en sí. En general, durante la creación de prototipos, no es necesario determinar estos valores con una precisión de píxel. Más tarde, el diseñador y desarrollador web se encargará de esto. Pero por conveniencia, utilice las siguientes recomendaciones:

  • En el programa elegido para la creación de prototipos, trabaje con la página de plantillas para el escritorio. El ancho de la página debe ser de al menos 960 píxeles. Deja el enfoque de los primeros profesionales móviles.
  • Los márgenes deben ser al menos el doble del ancho de las sangrías entre las columnas (canaletas). Esta técnica parece dirigir la vista del visitante dentro de la página.
  • Cuanto más amplio sea el espacio entre las columnas, más en la página "aérea" o espacio libre.

En la ilustración se puede ver un ejemplo de una cuadrícula con la que trabajar.

Cómo utilizar la cuadrícula de columnas de forma flexible al planificar el diseño de la página

Cuadrícula de la columna - la base del diseño de la página. Esto se puede ilustrar con un diseño típico del artículo "Cómo crear prototipos de páginas" (ver foto).

En este caso, el encabezado y el pie de página ocupan las 12 columnas. La unidad principal y la barra lateral pueden ocupar 9 y 3 o 10 y 2 columnas, respectivamente.

Con la ayuda de la cuadrícula de columnas, es posible crear diseños más complejos, por ejemplo, con la distribución de las columnas 5–5–2, 3–6–3, y así sucesivamente.

Es decir, utilizando una cuadrícula con 12 columnas, es posible construir diseños que consisten en bloques con diferentes anchos. Puede haber varios bloques en una fila.

Al elegir el número y el ancho de los bloques, guíese por el contenido que planea publicar en la página. Los ejemplos reales ayudarán a entender esto.

En la página "Conectado" hay un menú de navegación y tarjetas de categorías.

Dicho diseño puede representarse en forma de cuatro bloques de tres columnas de ancho.

Otro ejemplo del sitio de "Svyaznoy": un directorio de teléfonos de un fabricante con un menú de navegación y cuatro tarjetas de productos en una fila.

El diseño de esta página se puede hacer en una cuadrícula con 16 columnas. El menú de navegación tomará cuatro columnas y tarjetas de productos, tres columnas cada una.

Un ejemplo práctico a continuación ayudará a comprender mejor los principios de trabajar con una cuadrícula de columnas.

Usando la cuadrícula: un ejemplo de una página de prototipo

Para hacer un prototipo de la página, utilicé una cuadrícula con 12 columnas. Encendido y rejilla de papel, para facilitar la organización de los elementos en la dirección vertical.

Agrego un logotipo, un botón de conversión y un menú de navegación al encabezado. Preste atención a la alineación de la cuadrícula: los elementos ocupan 4, 4 y 9 columnas, respectivamente.

Debajo de la cabecera agregar un control deslizante grande. Ocupa 10 altavoces centrales.

Debajo del control deslizante agrego tres tarjetas de productos, que consisten en una foto, texto y un botón de navegación. Las cartas ocupan cuatro columnas.

Debajo de la página de tarjetas se divide en dos bloques verticales: la barra principal y la barra lateral. Ocupan 8 y 4 columnas respectivamente.

En el pie de página añadir información de servicio. El prototipo de la página se puede ver usando el botón Vista previa en la esquina superior derecha de la pantalla.

En el modo de vista previa, la cuadrícula no se muestra. Esto nos permite evaluar el prototipo sin interferencia visual y, si es necesario, volver a editar. Por ejemplo, en el modo de vista previa, el control deslizante parecía demasiado estrecho.

Incremento el ancho del control deslizante a 12 columnas o elimino los controladores de las imágenes en las columnas más externas de la cuadrícula. Recuerdo que junto al menú de navegación quedaba espacio para el formulario de búsqueda.

El prototipo está listo.

Herramienta simple y potente.

Esta es la característica final de la cuadrícula. Con la ayuda de esta herramienta, cualquier especialista sin capacitación técnica obtiene un marco flexible en el cual es conveniente construir prototipos de la página. Puede usar la cuadrícula en una hoja de papel o en programas populares de creación de prototipos. En el futuro, el diseñador y el desarrollador podrán convertir la cuadrícula de la columna para convertir el prototipo con detalles bajos en un diseño completo y una página adaptable.

Deja Tu Comentario