Tabla de contenido
Una guía completa para aprender los fundamentos del diseño visual.
La pregunta del millón: ¿cuál es el secreto de un buen diseño?
Podemos ponernos filosóficos sobre este tema, pero en términos generales, el proverbial "secreto" de un buen diseño reside en la forma en que organizas tus elementos visuales, en relación con tu lienzo y entre sí. Básicamente, acabamos de describir el diseño de maquetación, que, si lo piensas bien, está en todas partes.
Tomemos como ejemplo la maquetación de una revista. Su diseño sigue el clásico sistema de cuadrícula (dentro de un momento aprenderemos todo sobre las cuadrículas). Todo suele estar alineado a la izquierda, a la derecha y en la parte inferior. Sobre todo las columnas tienen una marcada alineación justificada que hace que la página no sólo sea visualmente atractiva, sino también fácil de leer y con autoridad. Los grandes encabezados atraen la atención del espectador.atención, mientras que el subtítulo viene a contrastar en tamaño para crear una jerarquía visual de la información.
Linda Gaom, Behance
Todas estas cualidades hacen que el diseño de la página sea limpio, estructurado y fácil de leer, y están en sintonía con los consejos de los que vamos a hablar a continuación. Pero antes, entendamos mejor el diseño de la página en sí.
¿Qué es el diseño gráfico?
La maquetación consiste en la disposición de los elementos gráficos para atraer la atención del lector y transmitir un mensaje determinado de forma visualmente atractiva.No estamos hablando del diseño de logotipos, sino del diseño de material impreso, como periódicos, revistas, carteles y sus equivalentes digitales, así como del diseño de páginas web, aplicaciones o UX/UI.
La palabra "maquetación" nos da muchas pistas. Significa una disposición de elementos predeterminados en una página.
Ver también: Ilustradores famosos y el mundo de la ilustración explicadosCuando una maquetación es eficaz, tiene buen aspecto y guía al espectador para que comprenda el mensaje que el diseño intenta transmitir. Entender la maquetación es, por tanto, clave para crear composiciones atractivas, eficaces, fáciles de usar y agradables.
Si un diseño no transmite bien su mensaje a la audiencia o, en otras palabras, no se "lee bien", el diseño será ineficaz por muy moderno que parezca. En el ámbito del diseño, el contenido prevalece sobre las tendencias y los trucos.
El propósito del diseño de maquetación
Transmitir un mensaje rápidamente
El diseño de la maquetación establece la relación entre los elementos gráficos para lograr un movimiento fluido de los ojos y conseguir la máxima eficacia e impacto.
Para crear equilibrio
Utilizar los principios del diseño de maquetación es la forma más sencilla de crear una sensación de equilibrio y simetría en sus proyectos de diseño sin caer en el aburrimiento.
Crear cohesión
La maquetación le ayuda a organizar los numerosos elementos de su diseño de forma fácilmente digerible, cohesionada y lógica.
Crear belleza
El equilibrio y la estructura crean belleza de forma natural. Si el diseño de su maquetación se realiza correctamente, resultará automáticamente atractivo visualmente para el espectador. Cuanto menos esfuerzo tenga que hacer el espectador para entender un mensaje, más atractivo le parecerá su diseño.
Diseñador por Frank Philippin para su libro "I Used to Be a Design Student: Then - Now." Fuente: DesignBoom
Elementos de maquetación
Texto
Esto incluye no sólo el cuerpo del texto o los párrafos, sino también los titulares, los subtítulos, los encabezados y los pies de página. La elección de la tipografía, el color y el tamaño logrará diferentes efectos en la forma en que su diseño se traducirá a su audiencia.
Imagen
Los tipos de imágenes más comunes son fotografías, ilustraciones o infografías.
Formas
Las formas pueden ser geométricas, muy angulosas, u orgánicas, imitando el mundo natural. También pueden ser abstractas. Las formas abstractas han estado muy de moda el año pasado, ya que hemos visto a diseñadores web incorporarlas en composiciones complejas y extensas.
Las formas pueden sustituir a una imagen o utilizarse para añadir elementos gráficos a una página, resaltar texto o delimitar el espacio entre otros elementos visuales.
Espacio en blanco
Cualquier diseño de maquetación tendrá una cierta cantidad de espacio en blanco que permitirá a sus elementos respirar y destacar por sí mismos.
Los principios de oro del diseño
Observará que los principios de la maquetación siguen muchos de los principios fundamentales del diseño, como el uso del color de una determinada manera, la tipografía, la repetición, el contraste, la jerarquía y el equilibrio.
Principio nº 1. Utilice cuadrículas
Las cuadrículas ayudan a los diseñadores a colocar los distintos elementos del diseño, como texto e imágenes, de forma coherente y fácil de seguir.
Proporcionan una sensación de orden, evitan que los elementos se superpongan y, lo que es más importante, corrigen la alineación, lo que hace que el trabajo resulte más limpio y profesional.
Fuente: hgmlegal.com
La anatomía de las cuadrículas
Puede que pienses que se trata sólo de líneas verticales y horizontales, pero una cuadrícula se compone de varias partes. De hecho, de muchas. Aquí tienes la terminología más importante que debes conocer en una cuadrícula básica:
- Formato Por tanto, si diseñas algo para imprimir, el formato es la página, y si eres diseñador web, el formato es la página web o la ventana del navegador.
- Márgenes son los espacios vacíos intencionados entre el formato y el diseño.
- Líneas de flujo son las líneas horizontales que separan su diseño en secciones paralelas. Las líneas de flujo ayudan a la legibilidad de su diseño y guían al lector para que siga el contenido correctamente.
- Módulos son los bloques formados por las líneas horizontales y las líneas de flujo verticales de cualquier cuadrícula. Si lo piensas, son los bloques de construcción de cualquier cuadrícula. Todos tus módulos verticales crean tus columnas, mientras que todas tus cuadrículas horizontales crean tus filas.
- Regiones son grupos de módulos conectados, verticales u horizontales. No hay reglas sobre cómo decidir organizarlos.
Fuente: Radversity
Tipos de rejillas
Las cuadrículas se utilizaron por primera vez para ordenar la escritura en papel.
Se remontan al siglo XIII, cuando el artista francés Villard De fusionó el sistema de cuadrícula con la proporción áurea para producir diseños de páginas impresas con márgenes. Este sistema de cuadrícula se puede ver hasta el día de hoy, como lo demuestran la mayoría de los diseños de libros y revistas impresos. Los editores, redactores y diseñadores prefieren utilizar cuadrículas estándar no sólo porque se ven bien, sino porque los lectores se han acostumbrado a ellas.esperan que ciertos elementos del diseño estén en un lugar determinado.
Las rejillas pueden diseñarse de dos maneras: simétricas o asimétricas. Rejillas simétricas siguen una línea central, donde las regiones vertical y horizontal son iguales entre sí; y las columnas tienen la misma anchura.
En un rejilla asimétrica Como su nombre indica, los márgenes y las columnas no son todos idénticos.
De acuerdo con esta clasificación, existen cinco tipos principales de cuadrículas de diseño utilizadas en todo el mundo en las que puede confiar:
Rejillas de manuscritos son el tipo de cuadrícula más común para los documentos. Separan el encabezado, el pie de página y los márgenes, y básicamente crean un rectángulo dentro del formato (o la página) que proporciona los límites a tu texto. Son la base de revistas, periódicos y libros, por lo que probablemente sea la maquetación con la que estés más familiarizado.
Fuente: UXplanet
Fuente: Radversity
Rejillas de columnas son otro de los favoritos en la publicación de revistas. Un diseño típico de revista utiliza cuadrículas de columnas para separar el texto en secciones fáciles de leer. Pero también son muy populares para los sitios web. Puede utilizar desde dos hasta seis cuadrículas. Más es posible, pero no es común. Una cosa muy importante acerca de las cuadrículas de columnas es que el espacio entre las columnas, o los canales, están igualmente distanciados unos de otros.otros.
Los periódicos, por ejemplo, utilizan cuadrículas de columnas simétricas, mientras que en el diseño web se prefiere una cuadrícula de columnas asimétrica.
Fuente: UX Planet
Fuente: Radversity
Rejillas modulares son similares a la rejilla de columnas, pero también tienen en cuenta las líneas de flujo horizontales. Este tipo de rejilla es necesaria cuando tiene que organizar varios elementos en su maquetación y las rejillas de columnas simplemente no son suficientes.
Las rejillas modulares tienen módulos de igual tamaño, lo que facilita la visualización de las zonas espaciales de distintas maneras.
Fuente: UX Planet
Fuente: Radversity
Rejillas de base Una línea de base es la línea en la que descansa el texto cuando se escribe, y el interlineado es el espacio entre dos líneas de base. ¿Te preguntas qué tamaño deben tener tus títulos o subtítulos?
Las cuadrículas de línea de base ayudan a dar un ritmo fluido al texto.
Fuente: UX Planet
Fuente: Fragaria
Rejillas jerárquicas se parecen menos a una cuadrícula que todas sus homólogas. No obstante, son muy útiles a la hora de organizar los elementos de diseño en su orden de importancia. Las cuadrículas jerárquicas pueden basarse en cuadrículas modulares, o incluso puedes crear las tuyas propias. Los sitios web utilizan mucho esta cuadrícula, especialmente las revistas y periódicos digitales, que tienden a basarse más en cuadrículas jerárquicas que en cuadrículas de columnas en su transición para convertirse endigital.
Fuente: UX Plane
Principio nº 2. Utilizar el espacio negativo
A menudo pensamos que el vacío, el silencio o la falta de color son algo malo, pero no tenemos en cuenta que son la base sólida del contraste.
También llamado espacio en blanco, el espacio negativo es el área de tu diseño que no tiene ningún elemento real. Es el área que queda vacía. No sólo rodea tus activos, sino que también crea los vínculos necesarios entre ellos. Por eso, el espacio negativo es un elemento de diseño legítimo y tiene un impacto masivo en la eficacia de tu diseño de maquetación.
Espacio negativo bueno o malo
El espacio negativo ayuda a separar las distintas áreas del diseño y, al mismo tiempo, permite que la maquetación respire. Contribuye a la jerarquía y el equilibrio visuales, centra la atención del usuario en los elementos principales, reduce el nivel de distracción y, por último, aporta estilo y elegancia al diseño.
Los diseñadores inexpertos tienden a rellenar el lienzo todo lo posible, ampliando el texto, el logotipo o la imagen, pero dar espacio a los elementos permite al espectador captar más rápida y cómodamente determinadas señales informativas.
Si todo grita para llamar la atención del espectador, no se oye nada.- Aaron Walter, "Diseño para la emoción
Una forma sencilla de determinar el espacio negativo es utilizar una cuadrícula modular. Colocándola sobre el diseño, podrás visualizar fácilmente qué módulos pueden quedar vacíos y cuáles deben rellenarse.
Diseñado por Brunswicker, Fuente: Codesignmag.com
Principio nº 3. Elija un único punto focal
¿Te ha pedido alguna vez un cliente que agrandes el logotipo? ¿Y luego que agrandes aún más el titular?
No se puede enfatizar todo, porque se pierde el sentido de un buen diseño. Al igual que el tiempo, el enfoque es relativo. Para que un elemento destaque, otro tiene que servir de fondo. Algunos elementos tienen que dominar a otros para que tu diseño muestre una jerarquía visual.
El punto focal de un diseño es el elemento con mayor peso visual. Es el elemento que atrae primero la mirada, más que cualquier otra cosa de su diseño.Un punto focal anunciará a su público dónde comienza su recorrido visual en su diseño, así que es el principio de la historia que está contando.
Esto se suele conseguir utilizando una imagen grande o una fuente tipográfica grande. Fíjese en lo eficaz que es el punto focal de abajo
Diseñado por Braulio Amado para Bloomberg Businessweek, Fuente: It's nice that
Pero mientras que un punto focal atraerá la atención de su público, la siguiente regla le ayudará a guiarlo.
Principio nº 4. Piensa en la proximidad y el flujo
El principio de proximidad es sencillo: hay que procurar que los elementos relacionados entre sí se coloquen juntos.
Ver también: ¿Cuál es la diferencia entre matiz, croma, tinte, tono y sombra? La proximidad indica que los recursos visuales están conectados y se convierten en una unidad visual que ayuda a organizar el diseño.Así pues, agrupe únicamente los activos de diseño que guarden relación entre sí y utilice bolsas de información en su diseño para guiar a su audiencia hacia la pieza de contenido relevante que necesita consumir. Esto también se denomina principio de flujo.
Fuente: Satori Graphics
Un diseño fluido guiará la mirada del espectador por toda la composición, de un elemento a otro, con facilidad. Sus puntos focales atraerán la mirada y se convertirán en el lugar de descanso, mientras que otros elementos impartirán dirección.
Una forma sencilla de entenderlo es tomar como ejemplo nuestra página web. Los gráficos están claramente separados del texto, al igual que las llamadas a la acción, de modo que la atención del espectador navega de un grupo de información al siguiente.
Principio nº 5. Usar el contraste
Asegúrese de que hay suficiente contraste en su diseño.
El contraste ayuda a organizar su diseño y establecerá una jerarquía muy necesaria y pondrá énfasis en lo que es importante.Además, un buen uso del contraste añade interés visual a todo el diseño. Admitámoslo, un diseño en el que todo tiene el mismo tamaño, forma o color va a resultar aburrido. El contraste anima las cosas.
Puede que lo primero que se le venga a la cabeza sea el contraste de colores, como cálido frente a frío, oscuro frente a claro, azul frente a naranja... Pero aunque el color es un principio esencial del contraste, también existen contrastes de tipo, alineación y tamaño. Y recuerde que el contraste también es relativo: sólo tiene sentido en yuxtaposición con otros elementos.
He aquí algunos ejemplos de maquetaciones que utilizan esta regla de forma inteligente y bella. Fíjese en el contraste de tipografía, color e incluso en el contraste de tamaño entre los elementos.
Fuente: IAG Reconciliation Action Plan
Principio nº 6. Repetición, patrón, ritmo
Cuando pensamos en repetición, pensamos en el mismo elemento una y otra vez.
Cuando se utiliza correctamente, la repetición puede potenciar el diseño.
Intente identificar y reutilizar un motivo a lo largo de su diseño para que varias zonas se sientan conectadas y parte de la misma composición. Ayudará a que su diseño tenga un tema. Al repetir elementos, no sólo cumplirá las expectativas de su público, sino que también mejorará la experiencia del usuario. Ser coherente hace que los usuarios se sientan más cómodos.
Puede hacerlo repitiendo formas o símbolos. O incluso una combinación de colores, un tipo de letra y el mismo estilo en general.
Una buena costumbre es utilizar un tipo de letra con una gran familia. Limite el número de diseños, pesos/estilos de línea y colores diferentes, y repítalos en todas partes. Asimismo, intente mantener el mismo estilo de imágenes y gráficos. Por ejemplo, utilice ilustraciones del mismo artista.
Fuente: Thepentool.co
Eso es todo. Éstos son los seis principios que le ayudarán a organizar su diseño y conseguir una maquetación más limpia, profesional y equilibrada.
Pero tu viaje no acaba aquí. El diseño gráfico no es una ciencia exacta y no debería limitarse a consejos y principios. Como ocurre en todos los ámbitos de la creación, no hay una regla empírica fija. Salirte de estos consejos de formas sutiles añadirá profundidad y variedad a tus diseños.
No obstante, son un buen punto de partida y le animamos a que las pruebe. ¡Y nos cuente qué tal le han funcionado!
Descargar Vectornator para empezar
Lleve sus diseños al siguiente nivel.
Descargar archivo
