Páginas web: Cómo el color, la tipografía y el espacio puede impactar el estado de ánimo

¿Alguna vez has pensado en el estado de ánimo cuando diseñas páginas web? El estado de ánimo tiene un impacto en dos formas: el estado del ánimo del mismo proyecto y el estado de ánimo de los usuarios. Juntos crean una experiencia que conecta a cada usuario con una página web.

Aunque no siempre puedas ser el responsable por el estado de ánimo de los usuarios, o sus días buenos o malos, puedes crear un estética que enfatice la emoción correcta para tu página web. Las técnicas básicas de diseño web —color, tipografía y espacio— son componentes clave para establecer el estado de ánimo de un proyecto web.

Diseño web y estado de ánimo

Los estados de ánimo son una extensión de las emociones. Este menos definido sentimiento, con frecuencia, cae en la categoría de bueno o malo y dura por periodos más largos de tiempo. Los estados de ánimo cambian con base en eventos, factores medioambientales o, incluso, al ver algo, pero es principalmente una sentimiento que sucede y es menos intenso que una emoción específica. Puede impactar cómo una persona piensa acerca de todo lo que interactúa con él o ella.

Lo que hace que el estado de ánimo sea especialmente interesante e importante para diseñadores web es que investigaciones han mostrado que este influencia en la publicidad y actitudes hacia marcas. Uno de los descubrimiento más comunes es que las personas prefieren ver información cuando se presenta de una forma feliz.

Cuando piensas en estados de ánimo, vienen dos extremos a la mente: lo bueno o lo malo (o positivo y negativo). Estos estados de ánimo, con frecuencia, emergen de influencias emocionales como ira, miedo, disgusto, felicidad, tristeza y sorpresa. También puede ocurrir para un grupo de personas, lo que resulta en un estado de ánimo común que crea una experiencia emocional compartida.

Entonces, ¿cómo todo esto afecta el diseño web? El estado de ánimo establece la forma en que los usuarios se conectan con un proyecto. ¿Lo verán de una forma negativa o positiva? ¿Cómo procesarán la información presentada? ¿El estado de ánimo de la página web establece una conexión con el humor de los usuarios en una forma que crea una sensación grupal?

Color

Las asociaciones de colores en términos de estados de ánimo requieren mucho contexto. Cómo el color es usado —un color dominante contra una acento— y otros colores en proximidad a este pueden tener un gran efecto.

Las técnicas de diseño como el tinte, tono, saturación y contaste pueden crear mucha diferencia. La calidez o frialdad de los colores también están asociados directamente con el humor.

• Los colores cálidos son relajantes y creativos, pero puede sentirse caóticos y estresantes (rojo, amarillo, anaranjado).
• Los colores fríos son profesionales y acogedores, pero pueden sentirse hostiles y duros (azul, verde, morado).

Asociaciones positivas de color

• Rojo: Amor, urgencia, juventud.
• Anaranjado: Energía, ambición, entusiasmo.
• Amarillo: Ánimo, diversión, energía.
• Verde: Crecimiento, naturaleza, suerte.
• Azul: Paz, confianza, seguridad.
• Morado: Sabiduría, respeto, riqueza.

Asociaciones negativas de color

• Rojo: Peligro, guerra, fastidio.
• Anaranjado: Ansiedad, agresividad, nerviosismo.
• Amarillo: Inseguridad, distracción, pánico.
• Verde: Envidia, temor, incierto.
• Azul: Luto, remordimiento, ecuanimidad.
• Morado: Aburrimiento, odio, disgusto.

Añadir un color negro a cualquier a color le da una asociación más negativo, mientras que añadir blanco crea una sensación más positiva. Esto aplica a la combinación de colores de cada matiz y colores y contras a su alrededor.

Tipografía

La tipografía puede presentar una interesante caso de estudio con respecto del estado de ánimo. Existen dos consideraciones principales —estética y legibilidad.

La tipografía puede ser usada principalmente como un elemento virtual y ofrece más oportunidades para diferentes tipos de sentimientos. Además, la tipografía se usa para transmitir información y necesita ser legible. Una tipografía que no es fácil de leer, sin importar el contexto, creará una asociación negativa.

Las fuentes legibles incluyen cada palabras de la plantilla, desde encabezados hasta el texto de cuerpo. Cuando piensan en las fuentes, los diseñadores suelen optar por un estilo serif o sans serif. Las fuentes serif son consideradas un poco más profesionales y series, mientras que las fuentes sans serif están asociadas con páginas web más modernas, limpias e informales.

La tipografía usada con propósitos puramente estéticos pueden caer casi en cualquier categoría. Conectar las fuentes con el contexto general de una página web también puede impactar el estado de ánimo, en especial si tus fuentes son neutrales. Por ejemplo, se piensa que la fuente Helvetica se opone a las propiedades de las fuentes de su alrededor.

Asociaciones positivas

• Serif con brochazos delgados.
• Letras redondas.
• Fuentes innovadoras.
• Estilos de fuente de cola larga o con ademanes.
• Fuentes modernas.

Asociaciones negativas

• Brochazos gruesos.
• Letras con brochazos o líneas toscas.
• Mayúsculas.
• Letras desordenadas escritas a mano o brochazos temblorosos.
• Estilos de letras mezclados.
• Letras ajustadas.
• Estilos de letras antiguos.

Espacio

Solo un espacio físico puede hacerte sentir de una cierta forma y crear un estado de ánimo. El concepto va en paralelo con el espacio físico porque generalmente los espacios abiertos son más positivos acogedores, mientras que los espacio cerrados o estrechos son más negativos.

El espacio es el elemento conector que un proyecto de diseño de páginas web que brinda a los usuarios un descanso visual. El espacio crear un flujo de elemento en elemento, diciendo a las personas dónde mirar, qué leer primero y lo que es más importante en la información que están procesando. Además puede hacerte sentir en casa o perdido en un caos.

Los diseñadores usualmente usan espacio para implicar un estado de ánimo total para el proyecto. Un espaciado y organización sencillos pueden fusionar el color y la tipografía para crear un estado de ánimo positivo, y una falta de este puede tener el impacto opuesto.

Asociaciones positivas

• Espacio abierto.
• Fuente consistente.
• Espaciado común entre elementos.
• Muchos márgenes.
• Contraste entre espacio negativos y positivos y otros elementos.

Asociaciones negativas

• Espacios cerrados.
• Alineación de objetos pobre.
• Espacios divididos entre textos que dificultan la legibilidad.
• Elementos que son demasiado pequeños o grandes con relación de otros elementos.
• Elementos superpuestos o elementos que chocan uno con el otro.
• Falta de organización u orden.

Conclusión

Lo bueno acerca de comprender las técnicas de diseño web y estado de ánimo es que puedes impactar en el humor de tu audiencia. Aunque no puedas hacer que todos tengan un buen día, un diseño que use agrupaciones o elementos que tengan sensaciones positivas o negativas pueden contagiar a las personas que miran una página web.

Usa una combinación de color, tipografía y espacio para diseñar un estado de ánimo que encaje con tu marca y sea más atractivo para los usuarios. Es importante notar que las asociaciones positivas, por lo general, obtienen las mejores respuestas.

En Staff Creativa, agencia digital en Lima, Perú, somo profesionales especializados en diseño de páginas web. Podemos ayudarte a crear la página web perfecta para tu empresa. ¡Contáctanos!

Traducido y adaptado de Design Shack. Si encuentras un artículo interesante en idioma inglés sobre Diseño Web, Redes Sociales, Imagen Corporativa o Programación, háznoslo saber en los comentarios y nuestro equipo considerará su traducción y publicación.