Psicología del diseño: dar forma a su imagen en línea

Cubrimos la importancia del color a fondo en las dos entregas anteriores de nuestra serie de psicología del diseño. Sin embargo, la elección del color es solo una parte de la lucha contra el mal diseño.

Ya sea que esté creando un patrón de fondo para un nuevo diseño web o esté pensando en el empaque de un nuevo producto, eventualmente tendrá que poner lápiz sobre papel y comenzar a dibujar. No importa qué forma empieces a formar, tendrá un efecto poderoso en tus espectadores.

Siga leyendo para obtener más información sobre las asociaciones comunes que sus clientes harán entre las formas que elija y lo que dicen sobre su marca en general. ¡Además, vea algunos ejemplos del mundo real de cómo se han utilizado estas formas en diseños de todo tipo!

• Líneas
• círculos y óvalos
• triangulos
• cuadriláteros
• polígonos
• formas abstractas

Líneas Rectas y Curvas

Cuando se trata de trabajo de línea, realmente tendrás que remolcar la línea entre angular y curvilínea. Las líneas pueden ser la forma base que engendra todas las ilustraciones, pero los logotipos y los diseños web que dependen en gran medida de las líneas son cualquier cosa menos simples.

Por lo general, los humanos prefieren las líneas curvas a las rectas. Esto se puede atribuir a la neurofisiología del sistema visual. Incluso los bebés cuyos ojos no están completamente formados centrarán su atención durante más tiempo en las formas curvas que en las líneas angulosas y afiladas.

Sin embargo, las curvas no necesariamente aumentarán la cantidad de tiempo que un usuario centrará su atención en su diseño. De hecho, es más probable que los ángulos agudos capten rápidamente la atención de los usuarios. Donde las curvas connotan suavidad y complejidad, las líneas y los ángulos afilados connotan seriedad y simplicidad.

Los estudios han demostrado que los objetos angulares pueden desencadenar una sensación de amenaza. Se ha demostrado que la nitidez en las formas aumenta la actividad en la amígdala, que es el área del cerebro que procesa el miedo. Por esa razón, los ángulos agudos a menudo exigen la atención de su audiencia y atraen la atención más rápidamente que sus contrapartes curvas.

Puede usar estos patrones de respuesta humanos naturales para crear diseños que hagan que su audiencia sienta algo. Para marcas divertidas y alegres, las líneas curvas pueden ayudarlo a dividir bloques de texto en los sitios y crear una sensación de fantasía. Sin embargo, para personas de marca más serias, los ángulos agudos y las líneas rectas ayudarán a generar una sensación de gravedad.

El estudio creativo The Inlay utiliza líneas rectas y un diseño minimalista para atraer la atención mientras se desplaza por las páginas, pero evita abusar de los ángulos agudos que pueden desencadenar respuestas negativas.

La empresa de consultoría tecnológica Affinity, sin embargo, utiliza mucho lenguaje orientado a las relaciones en todo su sitio web. Su logotipo de flecha redondeada y formas curvas en todo el diseño se sienten mucho más accesibles que las imágenes tradicionales y más rígidas utilizadas en el espacio tecnológico.

círculos y óvalos

Si estás llamando a alguien un cuadrado, probablemente estés insinuando que son aburridos. Lo contrario, entonces, significaría que los círculos connotan diversión, juventud y una mentalidad despreocupada. Tiene sentido que debido a que se ha demostrado que la atención de los bebés se mantiene más tiempo en las líneas curvas, también tienden a preferir los juguetes circulares.

La apertura y la unión vienen a la mente cuando los espectadores miran un círculo. Las formas redondas también pueden connotar sentimientos de comunidad o protección, como estar a salvo en tu propia burbuja o incluso un buen abrazo. Otras características de los círculos pueden incluir amistad, calidez, feminidad y renacimiento (piense: el círculo de la vida).

Desde una perspectiva de nombres, Ring Doorbell ha aprovechado los sentidos de sus usuarios. De manera auditiva, puede imaginar el timbre de la puerta que “suena”, mientras que visualmente, el “anillo” imaginado está vinculado tanto a su logotipo como a la forma en que está diseñado el hardware físico.

The Circle, un programa de competencia de telerrealidad de Netflix, es otro lugar en el que la marca circular tiene más sentido. La premisa es que un grupo de personas que pueden o no estar diciendo la verdad sobre su identidad intentan ganar popularidad entre sus pares solo a través de una plataforma de redes sociales llamada The Circle. ¿El objetivo? Permanezca dentro de la comunidad, permanezca en The Circle.

triangulos

Aceleración, movimiento y equilibrio, los triángulos ilustran fácilmente la actividad. Son formas enérgicas y poderosas que pueden evocar una variedad de emociones, desde entusiasmo hasta precaución.

Los triángulos tienen impacto y la forma en que se dirigen es crucial, porque la dirección cambiará su significado en la mente de su consumidor. Por ejemplo, un triángulo que apunta hacia arriba puede mostrar fuerza, pero cuando se gira aunque sea ligeramente torcido, puede mostrar inestabilidad. Pero múltiples triángulos en todas las direcciones diferentes pueden demostrar diversión o emoción, ¡como confeti!

Es muy probable que el botón de reproducción de su servicio de transmisión de música o video favorito sea solo un triángulo que apunta hacia la derecha. Se parece a una flecha que indica un movimiento hacia adelante, a diferencia de las dos líneas rectas que indicarían una pausa (una "interrupción" literal entre dos líneas rectas).

HGTV también utiliza un diseño triangular de manera inteligente. El triángulo isósceles se encuentra en la parte superior de su marca denominativa, una forma clara pero simple de ilustrar el techo de una casa. La “V” en el otro extremo del logo hace un gran contrapeso ya que apunta hacia abajo.

cuadriláteros

Los cuadriláteros incluyen cualquier forma de cuatro lados. Los cuadrados y los rectángulos son los ejemplos más comunes, pero aquí también se incluyen los trapecios, los rombos y algunos más. Los cuadrados y rectángulos son a menudo símbolos de estabilidad y firmeza, conformidad o sencillez. Sus ángulos rectos sugieren visualmente racionalidad, orden y estructura.

Los cuadrados y los rectángulos suelen ser utilizados por marcas que quieren parecer realistas o pragmáticas. Desde National Geographic hasta LinkedIn y Dominos, los cuadrados y rectángulos son comunes, especialmente para los logotipos, en una amplia gama de industrias.

Otros tipos de cuadriláteros también transmitirán esa sensación de regularidad, pero con un giro visual más vanguardista y contemporáneo. Los diamantes se pueden utilizar para transmitir productos de lujo o de alta gama debido a nuestra asociación inconsciente entre la forma y la piedra preciosa. Los cuadriláteros como las cometas y los rombos son excelentes para insinuar un nivel de estabilidad sin recurrir a patrones usados ​​en exceso.

El diseñador web australiano Mokthar Saghafi utiliza una forma de paralelogramo para el patrón geométrico de su sitio web. Las figuras de cuatro lados están ordenadamente apiladas, lo que sugiere la estabilidad que generalmente se connota con las formas de cuatro lados. Sin embargo, establecerlos ligeramente fuera de lugar como un rombo en lugar de un verdadero rectángulo agrega otra capa de interés visual.

Si bien Lego puede no parecer realista o conforme, ciertamente son estables, ¿de qué otra manera construirías con ellos? Su logotipo cuadrado también es una devolución de llamada visual a su producto. Se ve muy similar a un ladrillo cuadrado de Lego con cuatro tachuelas.

Pentágonos, hexágonos y octógonos

En matemáticas y diseño, este conjunto de formas se conoce como "polígonos". Polígono es un término genérico que se usa para describir cualquier forma geométrica 2D, pero generalmente se reserva para aquellas que tienen 5 o más lados.

En la naturaleza, estas formas se encuentran en todas partes, desde panales hasta patrones de conchas, cristales y formaciones rocosas. En diseño web, sin embargo, se usan con menos frecuencia. ¡Esto puede ser algo bueno para sus clientes, porque lo ayudará a diferenciarse de las tendencias de diseño más comunes!

Complejos y futuristas, los polígonos a menudo se usan para crear un aura moderna y contemporánea que aún está bien estructurada. Sin embargo, ciertos polígonos se usan comúnmente dentro de industrias de nicho. Por ejemplo, las empresas de reparación y fabricación de automóviles y máquinas a menudo emplean hexágonos y octágonos en el diseño, ya que se asemejan a la cabeza de un perno.

El diseño hexagonal utilizado por la agencia de diseño web del Reino Unido, Built By Buffalo, es una excelente manera de mostrar muchos ejemplos de su trabajo por adelantado sin abrumar su página de inicio. Luego se usa en todo el sitio web para mostrar fotos de los equipos, mostrar fotos divertidas de la oficina y mencionar información importante.

El Pentágono es uno de los edificios más reconocibles del mundo y su nombre se debe a su estructura de cinco lados. Un excelente ejemplo del uso de polígonos para el diseño arquitectónico, el edificio en sí mismo transmite estoicismo y estabilidad.

formas abstractas

Hay algunas otras formas geométricas y abstractas que se usan comúnmente en diseños web y de productos, promociones y esfuerzos de marca. Echemos un vistazo rápido a algunas de esas formas populares y sus significados.

manchas

Los blobs suelen ser formas que se caracterizan por ser divertidas o tontas. El famoso "efecto bouba/kiki" ha demostrado que las personas de todas las culturas y sistemas de escritura atribuirán la palabra sin sentido "bouba" a formas de manchas, mientras que "kiki" se asocia con formas abstractas puntiagudas.  

Cuando elige usar formas abstractas nítidas con bordes puntiagudos, captará rápidamente la atención de su espectador. Sin embargo, con formas más redondas, harás que se sientan más cómodos y divertidos.

Buzzworthy, el estudio de diseño de WordPress personalizado con sede en Brooklyn, utiliza muchas formas de manchas y animaciones de transición bulbosas para mostrar su estilo divertido y moderno.

cruces

A menudo utilizadas para mostrar la espiritualidad y la curación, la conexión o el equilibrio, las cruces aparecen todo el tiempo en el diseño web. Es la forma más común de connotar visualmente un encuentro o conexión entre dos cosas. Otro uso común para una cruz en el diseño es como un signo "más", que indica que puede agregar algo a un carrito o ampliar para obtener más información.

En los logotipos, las cruces generalmente se reservan para organizaciones religiosas debido a sus fuertes lazos religiosos, pero otros usos más agnósticos de la forma también han tenido éxito.

La Cruz Roja Americana es una de las organizaciones más notables en hacer uso de imágenes cruzadas. Su trabajo se encuentra en la intersección de las personas que necesitan ayuda y las personas que pueden ayudar durante o después de un desastre. El logo de la Cruz Roja los ubica en la intersección de esas dos cosas, al mismo tiempo que alude visualmente a la curación y la salud.

Espirales

Las espirales connotan movimiento y progresión. Las espirales y bucles redondeados a menudo ilustran la perfección, la belleza y la evolución. Si su espiral es más puntiaguda, como un movimiento en zigzag, es más probable que transmita un giro, un cambio o una nueva dirección que está tomando un producto, empresa o servicio.

La dirección de tu espiral también tendrá mucho que ver con cómo se percibe, especialmente si planeas animarla. Lo último que desea es tratar de transmitir desarrollo, crecimiento o creatividad y terminar enviando a sus usuarios a una espiral descendente literal. Como con la mayoría de las cosas, transmita un movimiento positivo haciendo que sus espirales se muevan hacia arriba y hacia la derecha cuando sea posible.

Rally, un estudio de productos digitales de Salt Lake City, UT, utiliza una espiral simple sobre un fondo blanco para la totalidad de su sitio. Los colores cambiantes y el movimiento dinámico de la espiral mantienen a los espectadores interesados ​​visualmente y crean una experiencia de usuario cohesiva.

Formas Orgánicas

Las formas orgánicas incluyen hojas, ramas, raíces, olas, estrellas, nubes y más. Donde las formas geométricas se pueden usar juntas para crear imágenes (ejemplo: un cuadrado con un triángulo en la parte superior se convierte en una casa simple), las formas orgánicas suelen ser independientes como una imagen en sí mismas.

Estas formas serán típicamente irregulares o asimétricas (pero no siempre) y tendrán una asociación con el mundo natural de alguna manera. La idea de “la nube” es un uso perfecto de imágenes orgánicas.

La idea del almacenamiento en la “nube” vincula algo muy técnico y embriagador, una “ubicación” intangible que contiene información, y lo vincula con el mundo natural, haciéndolo más accesible para los novatos en tecnología. SoundCloud, por ejemplo, es un sitio para compartir música en el que los usuarios pueden cargar archivos de audio y compartirlos con una creciente comunidad de amantes de la música en todo el mundo.

La mente detrás del diseño

Como siempre, estas no son reglas estrictas y rápidas. Use múltiples formas, grosores de línea y alineaciones dentro de su diseño para crear interés visual. Usar varios elementos juntos te permitirá contar una historia que tus lectores puedan ver con sus ojos y sentir en sus entrañas.

El centro de recursos de WP Engine es su fuente de información sobre todo lo relacionado con el diseño, y nuestra serie Psicología del diseño trata sobre el uso de los elementos fundamentales del diseño para atraer clientes con una marca bien planificada.

Lea las partes uno y dos para profundizar en los significados del color y cómo usarlos en su narración visual. Luego, esté atento a la cuarta parte, que analizará la importancia de su tipo de letra, la ubicación del contenido y la elección de palabras.