Principios de Diseño

Por: Julio A. Arango
Los principios de diseño son directrices y consideraciones de diseño ampliamente aplicables que los diseñadores utilizan a su discreción. Son consejos fundamentales para crear diseños que sean visualmente atractivo y tenga sentido para el espectador. 

Los principios de diseño representan la sabiduría acumulada de investigadores y profesionales en el diseño, ciencias del comportamiento, sociología, física y ergonomía, y otras disciplinas relacionadas.

Aunque hablamos de ellos por separado, en la práctica, trabajan juntos para crear un diseño. Se aplican al seleccionar, crear y organizar elementos. Los diseñadores con mayor experiencia entienden cómo los principios apoyan, refuerzan o incluso contrastan entre sí para crear el efecto deseado. Al aplicarlos, pueden predecir cómo es probable que los espectadores reaccionen a sus diseños.

¿Cuáles son los principios de diseño?

Si hacen una búsqueda de "principios de diseño", Google devolverá resultados con artículos que incluyan de cinco a más de una docena de principios básicos.  
Basado en más de 20 años de experiencia, y luego de trabajar en miles de diseños, yo utilizo en mi proceso 10 principios de diseño que considero los de mayor importancia al trabajar en cualquier diseño.

¿Por qué 10 y no los 12 que la mayoría de los diseñadores mencionan? Porque hay dos que considero son el resultado del uso de otros. Estos son la “proporción”, y el “espacio negativo”. Ojo, no les quito importancia, solo los veo como parte de otro principio de diseño.

Estos son los 10 principios de diseño básicos. No tienen un orden en particular porque todos son igual de importantes:

Balance

Comparando, los objetos en la vida real tienen peso físico, mientras que los elementos en el diseño tienen peso visual, donde los elementos grandes son más pesados y los pequeños más ligeros. Cada elemento tiene su propio "peso" basado en la cantidad de atención que atrae.

Balance es la distribución del peso visual de los objetos, los colores, la textura y el espacio (incluyendo el espacio negativo). El equilibrio visual consiste en garantizar que el diseño pesa igual a ambos lados del punto central.
Es como una balanza: demasiado peso a un lado y todo se desequilibra.
Al lograr este equilibrio, se crea armonía visual y se evita que el diseño se sienta demasiado caótico para el espectador.

Hay tres tipos de balance visual a los que debemos prestar atención:

Balance Simétrico

El diseño simétrico utiliza una línea vertical imaginaria (o a veces horizontal) para dividir un diseño en dos mitades alrededor de un punto central. Los elementos de igual peso visual se equilibran a cada lado del eje para crear simetría.

Hay dos variantes del balance simétrico: la simetría reflexiva, donde las dos mitades son imágenes exactas, y la simetría traslacional, donde la misma forma o elementos se repiten en ambos lados del diseño (se traslada).

Balance Asimétrico

Una composición asimétrica es cuando un diseño utiliza elementos desiguales. Un lado puede tener un elemento visualmente pesado, pero equilibrado con múltiples elementos más ligeros en el lado opuesto.

Todavía logra el equilibrio, pero proporciona una experiencia completamente diferente.
La asimetría es más dinámica y puede ser más interesante visualmente.

Balance Radial.

Es cuando los elementos "irradian" desde un punto en el centro de un diseño. Piensa en los rayos que brillan del sol o los pétalos de una rosa.

Esta forma de simetría es una forma de agregar profundidad y movimiento a un diseño, y funciona para llamar la atención sobre un objeto en el centro de una composición.

Contraste

Lo opuesto a la similitud es el contraste. A los humanos les suele gustar el contraste. Los diseños que se ven igual son aburridos. Por tanto, al experimentar con colores, formas, tamaños, texturas y fuentes contrastantes, puedes, en gran medida, llamar la atención, controlar el flujo visual y mantener a la gente comprometida.

El contraste se produce cuando dos o más elementos de una composición son diferentes. Se puede utilizar para crear efectos específicos, enfatizar la importancia de ciertos elementos y agregar atractivo visual a sus diseños.
Como diseñadores podemos recurrir a una variedad de técnicas para lograrlo, pero es supremamente importante tener en cuenta que agregar demasiadas variaciones puede ser confuso para los espectadores (el efecto opuesto que desea tener). Al igual que con la mayoría de los elementos del arte, se trata de lograr un equilibrio.

Énfasis

El énfasis es una estrategia que tiene como objetivo llamar la atención del espectador sobre un elemento de diseño específico que puede ser un área de contenido, una imagen, un enlace, un botón, entre otros. Para lograrlo, se crea un punto focal manipulando elementos como el color, la forma y el tamaño buscando que partes específicas del diseño se destaquen.

Este principio lo vemos utilizado en la mayoría de los campos del diseño, incluyendo la arquitectura, el diseño de paisajes y el diseño de moda y está muy relacionado con el siguiente que mencionaré, la “Jerarquía”.
Supongamos que deseas hacer un “llamado a acción” en una página web. Podrías aumentar el tamaño del texto y usar colores que se destaquen del fondo, enfatizando el llamado y asegurándose de que los visitantes no se lo pierdan. 

Si te esta gustando el artículo, compártelo con tus amigos...

Jerarquía

En el diseño, la jerarquía se utiliza para:
Agregar estructura
Crear organización visual
Crear dirección
Agregar énfasis
Cuando la información se clasifica de más importante a menos importante, se le ayuda al espectador a navegar y comprenderla fácilmente. El concepto de jerarquía visual propone que el cerebro humano tiene tendencias organizativas innatas que "estructuran elementos individuales en un todo coherente y organizado", especialmente cuando se procesa información visual.

La jerarquía consiste en organizar el valor de los elementos dentro de un diseño haciendo que el ojo del espectador sea atraído primero a lo más importante. 

Hay una serie de trucos visuales que ayudan a trazar la ruta correcta del flujo:
Tamaño. Cuanto más grande es un elemento, más probable es que un espectador lo vea. Al hacer algo más pequeño se puede reducir su importancia y poner el énfasis en otro lugar.

Color. Un toque de color hace una gran diferencia. Utiliza colores brillantes para hacer que ciertos elementos o información resalten.

Fuentes. Utiliza diferentes tipos de letra y estilos como cursiva y negrita.

Espacio negativo. Permite dar espacio para respirar a un elemento y hacer que un elemento central se destaque.
Es importante establecer una jerarquía visual clara porque mantiene unido un diseño y puede hacer que un mensaje complejo sea sencillo.

Proximidad

El principio de proximidad es simplemente el proceso de garantizar que los elementos de diseño relacionados se coloquen juntos. Cualquiera no relacionado, debe estar separado.

La proximidad indica que los elementos están conectados o tienen una relación entre sí y se convierten en una unidad visual que ayuda a organizar o dar estructura a un diseño.
El uso de cantidades variables de espacio negativo para unir o separar elementos es clave para comunicar agrupaciones significativas, y que mejor ejemplo para ilustrarlo que este artículo que estás leyendo, donde cada uno de los principios de diseño esta separado del siguiente usando una cantidad superior de espacio negativo entre cada principio. El espacio negativo que se usa entre cada párrafo dentro de la explicación de los principios es significativamente menor y esto es
así, porque aprovechar la proximidad para crear grupos significativos se refleja incluso cuando se presenta contenido de texto básico: las oraciones se agrupan en párrafos separados por encima y por debajo a través de espacios negativos.

Un error muy típico que cometen algunos diseñadores principiantes es dispersar los elementos por toda la página para asegurarse de que se llenan “los huecos”. Esto a menudo resulta en una proximidad deficiente, ya que los elementos relacionados no se agrupan y le dificulta al espectador determinar las relaciones y conexiones de la información.
¡El espacio negativo es bueno!
No tengas miedo de agrupar elementos relacionados y usar grandes áreas de espacio para agregar organización y estructura al diseño. 
Drag to resize
Drag to resize
Drag to resize
Drag to resize
Drag to resize
Drag to resize

Alineación

Probablemente, este es uno de los principios más simples de entender y se trata de la posición que tengan los elementos en un diseño para evitar que sean un completo desorden. Alinear elementos no solo crea una conexión visual entre ellos como un todo, sino también ordena el diseño. Sin alineación, los elementos parecen no tener sentido de la dirección y simplemente se desmoronan. Es importante incorporar este principio en cada diseño en el que trabajes.

Se basa en la colocación de los elementos visuales para que se alinean en una composición. En el diseño, lo usamos para organizar, crear estructura, y junto a la proximidad, crear conexiones entre elementos, obteniendo un resultado nítido y claro.

Por lo general la alineación es una línea invisible con la que se ordenan los elementos, pero también se pueden insinuar físicamente. Se utiliza para lograr una apariencia particular.

En el diseño hay dos tipos de alineación: alineación de bordes y alineación central.
Alineación de bordes: como su nombre indica, la alineación de bordes se refiere a la colocación del contenido en cualquiera de los bordes de la página o del lienzo, ya sea que los elementos se colocan a la derecha, a la izquierda, en la parte superior o en la parte inferior de la página, todo se mantiene en el borde. Si la alineación del borde organiza los elementos a la izquierda o a la derecha, se denomina alineación horizontal, pero si los elementos están dispuestos en el borde superior o inferior, se conoce como alineación vertical. 
Alineación central: Se refiere a la colocación del contenido en la línea imaginaria central. Tomemos un ejemplo de texto alineado al centro. Cada texto puede tener un ancho diferente, pero cada uno se coloca justo en el centro de la página. La misma regla se aplica a todos los elementos en el diseño. Si la línea imaginaria central se está ejecutando de arriba a abajo, lo que obtenemos es la alineación horizontal. Del mismo modo, si la línea central corre a lo largo del plano horizontal, nuestro contenido se alinea verticalmente. 

Repetición

Como ya habrás adivinado, la repetición se refiere a cuando un elemento se repite a lo largo de un diseño. Podría ser cualquier cosa, desde usar un cierto color de fuente hasta agregar un patrón repetitivo a una publicación de redes sociales a una publicación de redes sociales a una publicación de redes sociales (¿ves lo que hice?).

La repetición hace que los diseños sean visualmente emocionantes y cohesivos. También crea una sensación de consistencia mediante el uso de un motivo repetitivo que el espectador llega a esperar.
 Esto lo hace particularmente útil cuando se trata de crear una identidad de marca distintiva. 
Mira como la agencia de publicidad "Animalz" repite el color corporativo en sus publicaciones
La identidad de marca es el elemento visible de tu marca. Actúa para distinguir tu empresa de los millones de empresas que hay, por lo que cuando la gente ve tus 
diseños, inmediatamente saben qué es tu negocio.

Todo negocio exitoso utiliza la repetición. ¿Por qué equiparamos la lata azul con Pepsi? Porque esta imagen se repite tan a menudo que con el tiempo se convirtió en sinónimo de la marca que representa.

Así que la repetición no solo puede ayudarte a hacer un fondo de pantalla para tu iPhone, es una herramienta crucial para cualquier empresa que busque construir una identidad visual y reconocimiento de marca.

Ritmo

En el diseño, el ritmo no tiene nada que ver con la forma en que mueves la cadera. No te preocupes, puedes dejar tus zapatos de baile en casa. El ritmo en el diseño se refiere a una relación entre los elementos que crea una sensación de armonía.

Se trata de dar a tu composición una sensación de acción y movimiento. En lugar de dejar que el ojo del espectador se asiente en un punto focal, el ritmo anima a los espectadores a mover sus ojos a través de toda la pieza, siguiendo las formas de manera natural. Es algo que se ve reflejado en la naturaleza y las obras de arte. Hay tres tipos diferentes de ritmo que debemos tomar en consideración:
  • Ritmo regular: los elementos se repiten exactamente en un arreglo espaciado uniformemente.
  • Ritmo fluido: el movimiento se sugiere a través de la repetición de formas orgánicas o a través de la repetición irregular de elementos que se repiten.
  • Ritmo progresivo: se crea una secuencia en la que los elementos se cambian ligeramente cada vez que se repiten.
Es importante que te des cuenta cómo vamos uniendo los principios de diseño de una manera fluida y natural. El resultado de crear “Énfasis” y “Jerarquía” de manera correcta es un diseño con Ritmo. Lo repito nuevamente:
En lugar de dejar que el ojo del espectador se asiente en un punto focal, el ritmo anima a los espectadores a mover sus ojos a través de toda la pieza, siguiendo las formas de manera natural.
Uno de mis ejemplos favoritos del ritmo lo encontramos en la obra “Noches estrelladas” del famoso post impresionista, Vincent Van Gogh. Las pinceladas violentas ayudan a la presentación de los cambios de ritmo inestables y dinámicos de sus emociones. Ahora, no pretendo que este artículo te convertirá en Van Gogh, pero espero que puedas ver cómo funciona el ritmo para establecer un tono; crear una sensación y hacer de la interacción con un diseño una experiencia activa.

Movimiento

Cuando pensamos en movimiento pensamos en un perro corriendo o un Ferrari rugiendo por la autopista.
Pero en el diseño, no es solo lo que miras; es la forma en que lo ves. El movimiento muestra acción y crea una sensación de movimiento dentro de una composición. También sirve como guía para dirigir el ojo de un elemento a otro.

Un buen diseñador puede guiar al espectador mediante el uso de líneas, bordes, formas y colores para crear puntos focales y hacer ver los objetos de cierta forma.
Se puede controlar la progresión de los ojos del espectador dentro y alrededor de la composición utilizando el recorrido ocular. Por ejemplo, el ojo viajará a lo largo de un camino real, como una línea sólida o punteada. Se moverá a lo largo de caminos más sutiles, como de elementos grandes a más pequeños, de elementos oscuros a más claros, de color a color, o de formas inusuales a formas habituales.

Ten en cuenta que la simplicidad es clave. El uso de más de una técnica de movimiento en una composición puede confundir el ojo e incluso desorientar a los espectadores.

Unidad

No es casualidad que este principio este de ultimo en la lista. Tiene una razón, y es que la Unidad solo ocurre cuando todos los elementos dentro de un diseño coexisten para formar una experiencia holística que sea agradable a la vista. Se puede interpretar de dos maneras:

Unidad conceptual. El acto de combinar cosas para la conveniencia del usuario. Se logra mejor pensando en el contenido y la función. Por ejemplo, si, en un sitio web, el contenido o la funcionalidad de una de sus páginas se puede unificar con otra página más, esto reduce el número de interacciones requeridas por el usuario para cumplir su objetivo. O en el caso de un afiche para un evento, donde hay que asegurarse de que toda la información del evento esté presente en el afiche. ¿Te imaginas que no esté la fecha y hora?
La unidad conceptual requiere que las acciones relacionadas se agrupen de una manera natural y con visión de futuro.

La unidad visual. Se describe mejor como armonía, un principio de diseño por derecho propio que no es más que cómo los diferentes elementos de una obra de arte o diseño se unen y crean una sensación de integridad. La unidad visual agrega orden y hace que una pieza se sienta como un todo coherente, en lugar de una combinación desordenada de partes individuales que simplemente existen en la misma página.
Para lograr la unidad, debes tener en cuenta tres cosas: si los elementos que has usado tienen una buena razón para estar allí, si trabajan juntos y si el mensaje o concepto que estás tratando de mostrar se comunica claramente.

Conclusión

Julio A. Arango

Estos 10 principios básicos de diseño pueden inspirarte a llevar tu trabajo creativo al siguiente nivel.  No importa lo que estés diseñando, desde un logo hasta un sitio web, si te tomas el tiempo para aprender y aplicar estos conceptos, estarás en camino a convertirte en un mejor diseñador.

Recuerda que los principios no trabajan de manera aislada o independiente. Es la combinación de ellos de manera coherente lo que te da el resultado ideal, y no en todos los casos debes aplicar todos los principios, por eso comencé este artículo diciendo que se aplican a discreción del diseñador.

El diseño siempre está evolucionando, por lo que es importante que siempre estés investigando, mira lo que otras personas están haciendo y piensa en cómo puedes aplicar sus técnicas a tu propio trabajo: es una excelente manera de perfeccionar tus habilidades de diseño.
Ahora, todo lo que queda es ponerte tu gorra creativa y comenzar a trabajar. ¡Feliz creación!
Created with