Hable Alto.
Empecemos por contar un secreto. La clave de todo buen diseño radica en la forma en que sus elementos visuales están organizados y colocados en relación con los demás. En esto consiste exactamente el diseño de la maqueta.
Un buen diseño da sentido a su proyecto y lo hace visualmente atractivo. Te ayuda a mantener el equilibrio en tus diapositivas y a no abrumar o confundir a tu audiencia.
Un componente importante del diseño de la maqueta son las cuadrículas. Las cuadrículas son la columna vertebral de todos los diseños, infografías y presentaciones. Cuando diseñas en un editor online como Visme, estás utilizando cuadrículas, aunque no lo sepas. Nuestros diseñadores internos utilizan rejillas para crear los modelos de Visme, esos que tanto te gustan.
El diseño de la maqueta implica el uso de una rejilla o un grupo de rejillas, en función de los objetivos que su proyecto deba alcanzar. Lo creas o no, los bares también están ahí para ayudarte a ser más atrevido e incluso a romper algunas reglas.
Echemos un vistazo a todos los tipos de cuadrículas que existen en el conjunto de herramientas de diseño de Vismet, empezando por la anatomía de las cuadrículas para que puedas entender exactamente cómo funcionan y utilizar ese conocimiento para crear diseños súper profesionales y realmente atractivos.
La anatomía de una rejilla se compone de varias partes. No todas las partes están presentes en todas las cuadrículas; esto dependerá del tipo de cuadrícula que esté utilizando. Aquí veremos las partes más importantes de una cuadrícula.
Es posible que reconozcas muchos de estos términos de programas de creación de documentos como Microsoft Word, Google Docs o incluso Pages, si eres usuario de MAC. La apariencia de su documento está definida por estas secciones de una cuadrícula, incluyendo los márgenes, el encabezado, el pie de página y los números de página.
El formato es el área completa donde se presentará el proyecto final. En el diseño impreso, el formato es la página y en el diseño web el formato es la ventana del navegador, en un proyecto de app, el formato es el tamaño de la pantalla de cada modelo de teléfono móvil.
Los márgenes son los espacios vacíos entre los bordes del formato y el contenido. El tamaño de los márgenes es lo que da al contenido una forma general, normalmente un rectángulo, en horizontal para los navegadores y en vertical para los móviles y la impresión.
Las líneas de flujo son líneas horizontales que separan las diferentes secciones de una cuadrícula en bandas paralelas. Ayudan al lector a seguir el contenido de la maqueta. Las líneas de flujo también crean puntos de ruptura, o bordes para que usted pueda alinear sus elementos en una colocación horizontal dentro de su Diseño. Algunas líneas de flujo se denominan líneas aéreas y otras líneas de base.
Los módulos son los bloques de construcción de cualquier red. Son los espacios creados entre las líneas de flujo y las líneas verticales. Los grupos verticales de módulos crean columnas. Los grupos horizontales crean filas.
Las zonas son grupos de módulos adyacentes en áreas verticales y horizontales que crean zonas o regiones espaciales. Una región vertical puede albergar un bloque de texto, una región horizontal puede albergar un vídeo. Las regiones pueden disponerse proporcionalmente o utilizarse para crear zonas superpuestas.
Las columnas son zonas o regiones espaciales verticales que se ajustan completamente desde el borde superior hasta el borde inferior de su maqueta.
Las filas son zonas espaciales horizontales que se ajustan por completo desde el borde izquierdo hasta el borde derecho de su maqueta.
Los canalones son los espacios entre filas y columnas. Los canalones deben ser siempre iguales entre columnas o filas, el objetivo de esta alineación es mantener un equilibrio y sobriedad en su trazado.
Los marcadores son áreas dentro de la cabecera o el pie de página que marcan el lugar exacto donde se coloca la información repetida en cada página. Sirven exactamente para marcar una parte de su maqueta que ya estará ocupada por algún elemento fijo o repetitivo, como la numeración de las páginas o su información de contacto, por ejemplo.
Las cuadrículas se utilizan en todos los proyectos de diseño de maquetación, desde los más pequeños con pocos elementos hasta los grandes proyectos que contienen cientos de elementos visuales. Son los tipos de rejillas que organizan los elementos dentro de un espacio.
Los documentos de Word, por ejemplo, tienen una cuadrícula, aunque no lo parezca, pero está ahí para garantizar que tu proyecto esté siempre alineado y bien organizado. Las cuadrículas ayudan a los diseñadores a colocar el texto y las imágenes de forma coherente y fácil de seguir, y son muy importantes para la arquitectura de la información de ese diseño.
La mayoría de los editores de diseño en línea, o no, tienen una herramienta llamada "ajuste a la cuadrícula". Esta herramienta son líneas azules o rojas que aparecen cuando se mueven elementos dentro del proyecto. Permiten a los diseñadores saber cuándo los bordes están alineados según la cuadrícula o cuándo está centrada. Los editores de maquetación más complejos muestran la distancia entre los elementos para poder colocarlos proporcionalmente.
Todas las rejillas de distribución pueden diseñarse de dos maneras: simétricas o asimétricas. Las rejillas simétricas siguen una línea central. Todos los canalones son iguales entre sí, tanto los horizontales como los de la calle. Las columnas de un diseño simétrico también tienen la misma anchura. En un diseño asimétrico, tanto los márgenes como las columnas pueden ser diferentes entre sí. Pero un consejo: si estás creando un diseño asimétrico, presta mucha atención a la composición general del diseño para que no parezca demasiado recargado o confuso.
Apúntate. Es gratuito.Crea diseños perfectos con la función ‘snap-to-grid’ de Visme.
Un documento de Word o una plantilla de presentación siempre tendrá una cuadrícula de manuscritos. A veces, estas cuadrículas son invisibles, aunque pueden activarse para que aparezcan en editores de documentos como Word. Las cuadrículas de un documento de texto separan el encabezamiento, el pie de página y el espacio del borde (márgenes). El diseño del manuscrito crea un rectángulo dentro de la página (formato), como una caja que delimita los límites del texto en relación con el formato de la página.
Manuscript Grid es la base de todas las revistas, periódicos, libros electrónicos y todos los proyectos basados en texto. El diseño de la cuadrícula del manuscrito está montado en la primera página. El resto de las páginas seguirán las mismas medidas. Es una buena práctica mantener la cuadrícula del manuscrito de forma coherente dentro de un proyecto de documento. Aunque haya elementos que se salgan del borde, como una forma o una fotografía, la cuadrícula seguirá estando ahí para ayudar a mantener un buen equilibrio para todo el proyecto.
Las rejillas de columnas se utilizan para organizar los elementos en columnas. Las revistas utilizan cuadrículas de columnas para colocar el texto en secciones más fáciles de leer. Algunos libros de texto y académicos también utilizan este tipo de cuadrícula. Las cuadrículas de columnas también se utilizan dentro de los sitios web, como en los periódicos online o los blogs.
Las cuadrículas de columnas pueden tener tan solo dos columnas o hasta seis o más, pero esto no es muy común y depende mucho del objetivo del proyecto que se desarrolle.
El texto y las imágenes en una cuadrícula de columnas se colocan siguiendo las líneas verticales y las líneas de flujo que conforman las columnas. Las imágenes pueden colocarse dentro de una columna, o a través de dos o más para crear una disposición visual diferente. El espaciado de los medianiles debe ser proporcional y coherente en todo el documento.
Una cuadrícula de columnas simétrica tiene todas las columnas del mismo ancho, mientras que una cuadrícula asimétrica tendrá algunas columnas proporcionalmente más delgadas o más anchas que otras.
Los periódicos impresos suelen utilizar una cuadrícula de columnas simétricas para organizar sus historias.
Un gran ejemplo de rejilla de columnas asimétrica es el diseño general de una entrada de blog (debajo de la cabecera). Si observa con detenimiento este ejemplo, podrá ver fácilmente que está compuesto por dos columnas de diferente anchura: el contenido de la entrada del blog y la barra lateral.
El ejemplo de la revista que aparece a continuación utiliza una cuadrícula de tres columnas con anchos proporcionales. El título y el subtítulo ocupan el espacio de tres columnas, mientras que algunos textos destacados ocupan el espacio de dos columnas.
Una rejilla modular es similar a una rejilla de columnas en el sentido de que también está formada por columnas, pero también tiene filas. Este tipo de cuadrícula se utiliza cuando hay más elementos que organizar y una cuadrícula de columnas no es suficiente. Los periódicos utilizan columnas y cuadrículas modulares para organizar las historias de manera que resulten cómodas y fáciles de leer. Las parrillas modulares tienen módulos de igual tamaño. Esto hace que sea fácil "romper las reglas" y utilizar las zonas espaciales de diferentes maneras.
Las cuadrículas modulares también son estupendas para el diseño de formularios, gráficos y calendarios. También se utilizan mucho en los sitios de comercio electrónico. La página de inicio de tu teléfono, que muestra todas tus aplicaciones, tiene una cuadrícula modular. Instagram también utiliza una cuadrícula modular para mostrar tu feed, ¡apuesto a que eso es nuevo para ti, hein!
Una línea de base es la línea donde se encuentra el texto. Aseguran el espacio entre las líneas de base. Se puede aplicar una rejilla base a cualquiera de las rejillas mencionadas anteriormente. El uso de una cuadrícula básica dará un ritmo de fluidez al texto. También dará a los títulos y subtítulos un espacio proporcional en relación con el cuerpo del texto, haciendo la lectura más agradable para el lector.
Hay una cuadrícula básica en algo que usaste mucho durante la escuela y que puede que sigas usando ahora. Los cuadernos rayados tienen una cuadrícula básica. No es de extrañar que los profesores siempre quisieran que escribiéramos en papel con membrete en lugar de en papel blanco. Con ellos, hemos conseguido un buen ritmo en nuestros trabajos escritos. A no ser, claro, que nuestra letra fuera muy pequeña o muy grande, y entonces la idea del ritmo se iría al garete.
Si observas con atención este trozo de papel de cuaderno, verás que también tiene una cuadrícula de documento que crea márgenes. Las cuadrículas están prácticamente en todas partes donde se alinean los elementos textuales y las imágenes. ¿Quieres hacer un ejercicio de observación? Echa un vistazo a tu escritorio y trata de identificar los objetos que utilizan este tipo de grandes, seguro que no será una tarea difícil, están en todos los rincones.
Las cuadrículas jerárquicas se utilizan principalmente en proyectos de diseño web. El objetivo de un diseño de rejilla jerárquica es organizar los elementos por orden de importancia. Se sigue llamando rejilla porque los módulos siguen estando configurados dentro de una rejilla manuscrita medida.
Se puede montar una rejilla jerárquica en estilo libre, o con una rejilla modular como guía. Tener los conocimientos necesarios para establecer una red jerárquica equilibrada sin una red modular que la guíe requiere años de práctica. Por ello, los diseñadores crean plantillas de sitios web para que las personas con pocos conocimientos en la materia puedan simplemente rellenar estos módulos con su información. Incluso los diseñadores experimentados utilizan plantillas ya construidas para ahorrar ese precioso tiempo.
En su paso a las plataformas digitales, los periódicos han pasado de las habituales retículas de columnas simétricas a retículas jerárquicas con columnas dentro de zonas espaciales.
Antes de la era de la informática, las cuadrículas se dibujaban en maquetas con bolígrafo azul. Cada línea de la cuadrícula tuvo que ser medida y dibujada a mano con reglas T. Si los diseñadores querían utilizar una cuadrícula estándar, podían utilizar plantillas de cuadrícula impresas en tinta azul que se colocaban bajo un papel de calco grueso.
A partir de ahí, los diseñadores crearon sus piezas basándose en los modelos. Las imágenes se dibujaron como rectángulos o cuadrados con dos líneas cruzadas de esquina a esquina. Y mira que es interesante la historia, los maquetadores informatizados siguen copiando las prácticas de diseño de cuadrículas de hace años. Y ojo, usaron la tinta azul porque no aparecía en las piezas preimpresas, ¿genial no?
La jerarquía es una condición en la que los elementos se establecen por orden de importancia. La palabra proviene del concepto de realeza: el rey y la reina son los primeros, luego el príncipe y la princesa, después los duques y así sucesivamente. Los diseñadores web utilizan la jerarquía para garantizar que la información más importante se vea primero. Los elementos CTA y la información especial tienen prioridad y son, o al menos deberían ser siempre, los primeros en destacar.
Apúntate. Es gratuito.Crea hermosos elementos visuales para tu sitio web con nuestra herramienta de arrastrar y soltar.
Pero el uso de la jerarquía depende mucho del tipo de sitio web que se diseñe. Por ejemplo, una revista o un blog en línea puede utilizar un diseño jerárquico en su página de inicio, mostrando los artículos en diferentes tamaños. Utilizar también titulares en diferentes tamaños de letra. Los sitios de comercio electrónico utilizan páginas de aterrizaje que tienen uno o dos CTA y estos elementos deben ser más prominentes.
De todos los tipos de rejillas, las jerárquicas son las que suelen pasar desapercibidas. Su objetivo es llamar la atención sobre elementos concretos y hacerlo sin que el espectador sepa que se ha hecho a propósito. Un buen diseño jerárquico puede conseguir más conversiones, eso es realmente oficial, probado y comprobado.
Se trata de una cuadrícula de composición que separa cualquier espacio en una cuadrícula de nueve espacios iguales. Este sistema de cuadrícula puede ser vertical u horizontal, pero los nueve espacios deben tener siempre el mismo tamaño. Los elementos del proyecto se sitúan de dos maneras. Los puntos de enfoque se colocan según el lugar donde se cruzan las líneas de arriba a la izquierda, de arriba a la derecha, de abajo a la izquierda y de abajo a la derecha. Otros elementos importantes, normalmente el cuerpo del texto, se colocan dentro de los espacios creados por las líneas de intersección.
La idea es que la regla de los tercios crea una composición agradable para el público. Siguiendo la regla de los tercios, te aseguras de que tu proyecto sea equilibrado y proporcionado. La regla de los tercios se utiliza a menudo en proyectos de diseño gráfico y también en el mundo de la fotografía, ¿conoces ese pequeño degradado que aparece en la cámara de tu móvil? Así que sigue la regla de los tercios.
La proporción áurea también se denomina espiral áurea o media áurea. Es un fenómeno de composición que se encuentra en la naturaleza y que también se aplica en la creación de diseños. Muchos logotipos famosos han sido creados utilizando la proporción áurea y también se utiliza muy comúnmente en la fotografía.
La proporción áurea está estrechamente relacionada con la secuencia de Fibonacci. Esta ecuación matemática rige la medida del Rectángulo de Oro, una forma que está perfectamente equilibrada. Si utiliza la proporción áurea o un grupo de rectángulos áureos en sus diseños, seguirá la antigua composición de la naturaleza.
Cuando los diseñadores utilizan cuadrículas, no siempre se ciñen a los elementos básicos. La mezcla de cuadrículas es una forma común de hacer que el diseño de la maqueta sea más creativo y atractivo. Un documento de varias páginas seguirá las mismas medidas que la cuadrícula del manuscrito, pero tendrá diferentes cuadrículas para las distintas partes de los formatos.
Fíjate en la disposición de una revista cuando las páginas se abren y se montan una al lado de la otra. Observe los espacios que mantienen la misma proporción de una página a otra y los otros que son diferentes en cada página. El uso de barandillas de composición creativa puede hacer que sus proyectos sean más agradables. Pero cuidado, dominar esta práctica requiere mucha experiencia y atrevimiento, quizás más atrevimiento que experiencia, pero no olvides la experiencia, nunca.
Este ejemplo de diseño de página compuesto, tomado de una plantilla de Graphic River, es un gran ejemplo de cuadrícula compuesta. Cada página es diferente, pero todas mantienen una cuadrícula básica. Puede notarlo en el pie de página y el número de página y en el centro de las columnas y los elementos.
La elección de la mejor rejilla dependerá del tipo de proyecto en el que vaya a trabajar. Los diseños con mucho texto necesitan cuadrículas de diseño. Los diseños con muchas composiciones abstractas de colores y formas se adaptan mejor a la regla de los tercios o la media de oro. Si contrata a un diseñador, confía en él.
Las plantillas están ahí para ahorrarle a usted (y a su diseñador) ese precioso tiempo de construcción de la retícula. Puede estar seguro de que la mayoría de las plantillas del editor Visme se crearon utilizando una cuadrícula. Los que no lo fueron, fueron creados por diseñadores que tienen las cuadrículas arraigadas en su visión, pero para llegar a ese nivel, necesitaron años de práctica. Puedes activar la opción "ajustar a la cuadrícula" en las opciones de vista del editor de Visme y empezar a crear diseños súper profesionales, equilibrados y atractivos. Entonces, ¿estás listo para crear algo sorprendente con la ayuda de Visme?
Crea experiencias visuales increíbles para tu marca, ya seas un diseñador profesional o un novato con poca experiencia.
Prueba Visme, es gratis
