La psicología del diseño digital: Cómo los colores, tipos de letra y espaciado afectan tu estado de ánimo
He querido escribir este artículo para hacer hincapié en algunas de las reglas básicas sobre el diseño y su impacto en nuestros lectores o clientes. Hay un nuevo movimiento de creativos multidisciplinares en el que todos debemos hacer "de todo" y muchas veces necesitamos un repaso de dichas reglas para no caer en un mal uso, como puede ser la mezcla de tipografías, colores, o un mala distribución del espacio, los cuales pueden repercutir en la forma que comunicamos. He recopilado las siguientes líneas de varias fuentes, son pautas o reglas de sentido común, muchas de ellas ya las sabemos. Basta con ser buenos observadores o basarnos en nuestra propia experiencia como consumidores de páginas, sean impresas o digitales.
La nueva generación de contenidos digitales ya está a la orden del día, nuevos métodos para diseñar, nuevas formas de interactuar con el lector, nuevos desafíos que en muchos casos nada tienen que ver con el diseño tradicional para medios impresos, se abren nuevas vías de publicación y nuevas herramientas las cuales pueden dejarnos abrumados ante tal abanico de posibilidades.
La entrega de un gran sitio web o una publicación digital (o impresa), es mucho más que sólo la entrega de contenido y hacer que se vea bien. Cuando los visitantes llegan a nuestros contenidos estos producen un conjunto de sentimientos. El tipo de sentimientos que producen - positivos o negativos - están enteramente en nuestras manos y no debe ser pasado por alto en el diseño de contenido.
Con los años, se ha desarrollado un conocimiento común, que se produce para ayudar a los diseñadores a crear efectos visuales más impactantes, los cuales afectan a la psicología de sus espectadores. Para lograr esto, hay que entender cómo los diferentes elementos de diseño y su utilización pueden afectar el estado de ánimo, la actitud y la experiencia que el visitante tendrá durante la navegación por nuestras páginas.
A continuación presento cuatro grandes áreas de diseño y desarrollo digital que tienen el mayor impacto en la psicología de los visitantes de nuestro sitio web o nuestra publicación. Estas son herramientas necesarias para crear una publicación visualmente atractiva que anima a los visitantes a regresar.
CONTENIDO
El contenido es impulsado por el diseño que se ve en pantalla. Los visitantes entran en nuestras páginas para acceder a la información que necesitan o para leer un artículo en el que están interesados. El diseño debe ayudar a encontrar la información que necesitan de forma rápida y con facilidad.
En los primeros días de la web, era común ver páginas y páginas cargadas de contenido (aún a día de hoy es difícil encontrar la información en pantallas de banners publicitarios, fotografías fuera de lugar, tipografías ilegibles); esto hace extremadamente difícil encontrar el contenido y llegar a la información necesaria. El resultado es la generación de estrés, la ansiedad y en general un sentimiento desagradable para el visitante.
Un buen diseño debería ser editado y organizado pensando en el visitante, proporcionando la información adecuada y necesaria, esto generará un sentimiento de bienestar en el lector tras encontrar la información o el artículo deseado en nuestra página.
ESPACIO
La forma en que una página se organiza puede afectar dramáticamente la forma en que un visitante se siente mientras la lee. La organización de contenidos debe ser una prioridad en cualquier diseño de sitios web, pero esta organización debe tener en cuenta el espacio que ocupa dentro del cuadro.
"El espacio en blanco" es el área del diseño en el que ningún contenido o elemento visual exige nuestra atención. El espacio en blanco juega un papel importante en cualquier tipo de trabajo de diseño, ya que da visualmente un lugar de descanso para el visitante. Estos lugares de descanso se encuentran a menudo en los márgenes y el espacio alrededor de las cosas.
El concepto de minimalismo se basa en utilizar la menor cantidad de contenido visual necesaria para transmitir la idea, es actualmente muy popular a través de los contenidos digitales, especialmente en servicios como Squarespace.
Dicho de otra manera, si un visitante llega a nuestra publicación y cada centímetro de la pantalla está ocupada por palabras, gráficos o cosas parpadeantes, esta empieza a recibir un sentimiento de caos y se le hace incómodo. Si ningún espacio en blanco está presente, no hay nada para que se muevan sus ojos en la búsqueda de un descanso visual.
Si nos tomamos el tiempo para editar y organizar nuestro contenido de una manera que sea respetuosa con el espacio que tiene para presentar la información, damos la sensación de profesionalidad, organización y buen rollo en general a los visitantes. Mantener las cosas simples con páginas bien organizadas usando el espacio en blanco adecuado le dice a los visitantes que conoces lo que es importante y que no queremos hacer que pierdan el tiempo.
Os recomiendo una visita la la página de Smashing Magazine para realizar un análisis sobre la simplicidad, el espacio y su repercusión en el diseño
COLOR
Os recomiendo este otro artículo sobre el uso de la tipografía por MLG Diseño, de los cuales he extraído las siguientes normas básicas sobre el uso de tipografía en cualquier ámbito de diseño:
CONCLUSIÓN
A menudo forma parte del trabajo de los diseñadores entender la psicología y su aplicación en el diseño, entender los conceptos básicos en algunas áreas clave del diseño nos ayudarán a entender y a producir contenido de calidad y gestionar el diseño de manera más efectiva.
Una gran parte de la psicología de diseño se puede utilizar en otras áreas. Basta con ser observadores, sobretodo utilizar el sentido común y el buen gusto.
La nueva generación de contenidos digitales ya está a la orden del día, nuevos métodos para diseñar, nuevas formas de interactuar con el lector, nuevos desafíos que en muchos casos nada tienen que ver con el diseño tradicional para medios impresos, se abren nuevas vías de publicación y nuevas herramientas las cuales pueden dejarnos abrumados ante tal abanico de posibilidades.
La entrega de un gran sitio web o una publicación digital (o impresa), es mucho más que sólo la entrega de contenido y hacer que se vea bien. Cuando los visitantes llegan a nuestros contenidos estos producen un conjunto de sentimientos. El tipo de sentimientos que producen - positivos o negativos - están enteramente en nuestras manos y no debe ser pasado por alto en el diseño de contenido.
Con los años, se ha desarrollado un conocimiento común, que se produce para ayudar a los diseñadores a crear efectos visuales más impactantes, los cuales afectan a la psicología de sus espectadores. Para lograr esto, hay que entender cómo los diferentes elementos de diseño y su utilización pueden afectar el estado de ánimo, la actitud y la experiencia que el visitante tendrá durante la navegación por nuestras páginas.
A continuación presento cuatro grandes áreas de diseño y desarrollo digital que tienen el mayor impacto en la psicología de los visitantes de nuestro sitio web o nuestra publicación. Estas son herramientas necesarias para crear una publicación visualmente atractiva que anima a los visitantes a regresar.
CONTENIDO
El contenido es impulsado por el diseño que se ve en pantalla. Los visitantes entran en nuestras páginas para acceder a la información que necesitan o para leer un artículo en el que están interesados. El diseño debe ayudar a encontrar la información que necesitan de forma rápida y con facilidad.
En los primeros días de la web, era común ver páginas y páginas cargadas de contenido (aún a día de hoy es difícil encontrar la información en pantallas de banners publicitarios, fotografías fuera de lugar, tipografías ilegibles); esto hace extremadamente difícil encontrar el contenido y llegar a la información necesaria. El resultado es la generación de estrés, la ansiedad y en general un sentimiento desagradable para el visitante.
Un buen diseño debería ser editado y organizado pensando en el visitante, proporcionando la información adecuada y necesaria, esto generará un sentimiento de bienestar en el lector tras encontrar la información o el artículo deseado en nuestra página.
ESPACIO
La forma en que una página se organiza puede afectar dramáticamente la forma en que un visitante se siente mientras la lee. La organización de contenidos debe ser una prioridad en cualquier diseño de sitios web, pero esta organización debe tener en cuenta el espacio que ocupa dentro del cuadro.
"El espacio en blanco" es el área del diseño en el que ningún contenido o elemento visual exige nuestra atención. El espacio en blanco juega un papel importante en cualquier tipo de trabajo de diseño, ya que da visualmente un lugar de descanso para el visitante. Estos lugares de descanso se encuentran a menudo en los márgenes y el espacio alrededor de las cosas.
El concepto de minimalismo se basa en utilizar la menor cantidad de contenido visual necesaria para transmitir la idea, es actualmente muy popular a través de los contenidos digitales, especialmente en servicios como Squarespace.
Dicho de otra manera, si un visitante llega a nuestra publicación y cada centímetro de la pantalla está ocupada por palabras, gráficos o cosas parpadeantes, esta empieza a recibir un sentimiento de caos y se le hace incómodo. Si ningún espacio en blanco está presente, no hay nada para que se muevan sus ojos en la búsqueda de un descanso visual.
Si nos tomamos el tiempo para editar y organizar nuestro contenido de una manera que sea respetuosa con el espacio que tiene para presentar la información, damos la sensación de profesionalidad, organización y buen rollo en general a los visitantes. Mantener las cosas simples con páginas bien organizadas usando el espacio en blanco adecuado le dice a los visitantes que conoces lo que es importante y que no queremos hacer que pierdan el tiempo.
Os recomiendo una visita la la página de Smashing Magazine para realizar un análisis sobre la simplicidad, el espacio y su repercusión en el diseño
COLOR
A menudo los colores son dictados por la identidad de la organización o marca. Cómo se usan estos colores afecta a la forma en que el visitante se siente cuando visitan su sitio.
La mayoría de las identidades visuales tienen colores neutrales (es decir, los tintes, matices y tonalidades de blancos, grises y negros) que se utilizan junto con sus principales colores. En la mayoría de los diseños modernos, estos colores neutros a menudo toman una posición dominante en términos de la cantidad de espacio que ocupan.
Por ejemplo, si los colores principales de la organización son de color azul y amarillo, con neutrales en blanco y negro, es probable que puedan elegir un fondo blanco para mostrar su contenido, en lugar de un fondo azul o amarillo. Observemos como en el siguiente ejemplo el aire de los márgenes y los iconos en gris ofrecen un lugar de descanso para el lector:
Los tipos de colores que utilizamos también juegan en la psicología de su diseño web. Colores más fríos (azules, verdes, morados) a menudo proporcionan un atractivo, sensación de relax y profesionalidad. En contraste, un mal uso podrían dar una sensación de frialdad y distancia. Colores cálidos (amarillos, naranjas, rojos) son calmantes y dan un sentido de creatividad, pero también pueden emitir sentimientos negativos como la ira y el estrés. Además, los neutros como el blanco a menudo dan un sentimiento positivo de la apertura, pero también podían transmitir aburrimiento o un diseño algo soso. Los grises se consideran a menudo modernos y limpios, pero pueden ser muy fríos y poco atractivos. Los negros se asocian a menudo con ser corte profesional y limpio, pero también es muy repetitivo y puede ser bastante genérico.
Hay otros factores relativos al color, su armonía y las reglas cromáticas, los tonos, la luminosidad, la coherencia entre ellos también dará una imagen cuidada de nuestro diseño. Dar un repaso a la armonía de color nos dará ventaja a la hora de decidir como trabajarlo, además es un mundo apasionante y quizás junto la selección de tipografía la parte más divertida a la hora de ser creativos. Según la wikipedia:
La mayoría de las identidades visuales tienen colores neutrales (es decir, los tintes, matices y tonalidades de blancos, grises y negros) que se utilizan junto con sus principales colores. En la mayoría de los diseños modernos, estos colores neutros a menudo toman una posición dominante en términos de la cantidad de espacio que ocupan.
Por ejemplo, si los colores principales de la organización son de color azul y amarillo, con neutrales en blanco y negro, es probable que puedan elegir un fondo blanco para mostrar su contenido, en lugar de un fondo azul o amarillo. Observemos como en el siguiente ejemplo el aire de los márgenes y los iconos en gris ofrecen un lugar de descanso para el lector:
Los tipos de colores que utilizamos también juegan en la psicología de su diseño web. Colores más fríos (azules, verdes, morados) a menudo proporcionan un atractivo, sensación de relax y profesionalidad. En contraste, un mal uso podrían dar una sensación de frialdad y distancia. Colores cálidos (amarillos, naranjas, rojos) son calmantes y dan un sentido de creatividad, pero también pueden emitir sentimientos negativos como la ira y el estrés. Además, los neutros como el blanco a menudo dan un sentimiento positivo de la apertura, pero también podían transmitir aburrimiento o un diseño algo soso. Los grises se consideran a menudo modernos y limpios, pero pueden ser muy fríos y poco atractivos. Los negros se asocian a menudo con ser corte profesional y limpio, pero también es muy repetitivo y puede ser bastante genérico.
Hay otros factores relativos al color, su armonía y las reglas cromáticas, los tonos, la luminosidad, la coherencia entre ellos también dará una imagen cuidada de nuestro diseño. Dar un repaso a la armonía de color nos dará ventaja a la hora de decidir como trabajarlo, además es un mundo apasionante y quizás junto la selección de tipografía la parte más divertida a la hora de ser creativos. Según la wikipedia:
"La armonía cromática, o armonía de los colores, es concebida hoy, sobre todo en los ámbitos pictóricos y en los de la iconolingüística, como el conjunto de técnicas que se aplica a la creación de un color para lograr cierto equilibrio en la interacción de los colores que lo componen. Asimismo se denomina así al efecto estético de calma que ese equilibrio produce en el espectador. Suelen emplearse también las designaciones armonía del color y armonía del colorido"Para obtener más información sobre la forma exacta los colores juegan en la psicología de diseño de páginas web. Vandelay tiene un interesante artículo que resume cada color primario y secundario y sus efectos en los lectores.
 |
| Estudia las armonías de color y la relación entre ellos, Adobe Color (antiguo Kuler) te ayuda a crear temas de color basados en el tono, intensidad y matiz |
Series de inspiración a través del color en sitios web:
Azules - Verdes - Rojos - Naranjas - Amarillos - Púrpuras - Rosas - Marrones
TIPOGRAFÍA
Por último, la tipografía puede transmitir toneladas de emociones y sentimientos para los visitantes. Hay miles de tipos de letra por ahí, y gracias al avance de la tecnología web como CSS3 o Adobe TypeKit, una rica y atractiva variedad de tipos de letra han encontrado su camino en sitios web también. Esto ha abierto la puerta a miles de variantes que podemos utilizar. Y una gran elección conlleva también a una gran responsabilidad.
Los tipos de letra están diseñados para ser utilizados en situaciones específicas. Las fuentes serif (aquellos con pequeños trazos de pie en las letras como Times New Roman) se asocian a menudo con la profesionalidad, la académica, y la gravedad, mientras que fuentes san-serif (como Helvetica) dan una sensación de modernidad, limpieza o un toque informal.
Por ejemplo, la mayoría de los sitios web de noticias (por ejemplo, The New York Times) utilizan fuentes serif para ayudar a transmitir el sentimiento de la tradición, la importancia y el conocimiento. Transmiten autoridad, lo que está leyendo es importante y que saben de lo que están hablando.
Las fuentes Sans-serif utilizan cada vez más para transmitir una sensación de modernidad, sofisticación y lujo. Los que están en la industria de la tecnología suelen utilizar fuentes san-serif mucho más que fuentes serif porque quieren que los visitantes sientan que están al día.
Para más información sobre qué tipo de fuentes puedes utilizar para el diseño digital, da un vistazo a Super Dev, tiene dos grandes infografías para ayudarnos a navegar y situar el uso de la tipografía.
Extraído de la página Super Dev
La forma en que se presenta la tipografía en la página también es importante. El Leading (interlineado, o espacio entre líneas) y kerning (espacio entre las letras) se debe evaluar también. Un buen espacio en blanco entre líneas hace que el texto esté aireado y sea más fácil de leer; poco espacio da un sentimiento de colapso, las líneas se juntan y cuesta diferenciar entre párrafos.
Busca la relación entre el espacio entre párrafos y márgenes. Entre los bloques de texto y otros elementos de la página. Considera el tamaño de la fuente (y su relación con el espaciado). Párrafos ajustados son poco atractivos y difícil de leer. Colocar elementos como fotografías o gráficos demasiado cerca, hacen que la página se colapse. Un tamaño de fuente demasiado grande o demasiado pequeño puede hacer que el visitante se sienta como si estuviera gritando o hablando en susurros.
Azules - Verdes - Rojos - Naranjas - Amarillos - Púrpuras - Rosas - Marrones
TIPOGRAFÍA
Por último, la tipografía puede transmitir toneladas de emociones y sentimientos para los visitantes. Hay miles de tipos de letra por ahí, y gracias al avance de la tecnología web como CSS3 o Adobe TypeKit, una rica y atractiva variedad de tipos de letra han encontrado su camino en sitios web también. Esto ha abierto la puerta a miles de variantes que podemos utilizar. Y una gran elección conlleva también a una gran responsabilidad.
Los tipos de letra están diseñados para ser utilizados en situaciones específicas. Las fuentes serif (aquellos con pequeños trazos de pie en las letras como Times New Roman) se asocian a menudo con la profesionalidad, la académica, y la gravedad, mientras que fuentes san-serif (como Helvetica) dan una sensación de modernidad, limpieza o un toque informal.
Por ejemplo, la mayoría de los sitios web de noticias (por ejemplo, The New York Times) utilizan fuentes serif para ayudar a transmitir el sentimiento de la tradición, la importancia y el conocimiento. Transmiten autoridad, lo que está leyendo es importante y que saben de lo que están hablando.
Las fuentes Sans-serif utilizan cada vez más para transmitir una sensación de modernidad, sofisticación y lujo. Los que están en la industria de la tecnología suelen utilizar fuentes san-serif mucho más que fuentes serif porque quieren que los visitantes sientan que están al día.
Para más información sobre qué tipo de fuentes puedes utilizar para el diseño digital, da un vistazo a Super Dev, tiene dos grandes infografías para ayudarnos a navegar y situar el uso de la tipografía.
Extraído de la página Super Dev
La forma en que se presenta la tipografía en la página también es importante. El Leading (interlineado, o espacio entre líneas) y kerning (espacio entre las letras) se debe evaluar también. Un buen espacio en blanco entre líneas hace que el texto esté aireado y sea más fácil de leer; poco espacio da un sentimiento de colapso, las líneas se juntan y cuesta diferenciar entre párrafos.
 |
| Kerning |
Os recomiendo este otro artículo sobre el uso de la tipografía por MLG Diseño, de los cuales he extraído las siguientes normas básicas sobre el uso de tipografía en cualquier ámbito de diseño:
- Establecer claramente la jerarquía, ya sea mediante color, tamaño, negritas, etc
- Establecer siempre un tamaño mínimo para la tipografía
- Escoger una tipografía adecuada para el cuerpo de los artículos o secciones.
- Ceñirse a no más de tres tipografías por página.
- Dejar un interlineado que facilite la lectura
- No usar demasiado las letras capitales o mayúsculas
- No excederse en el uso de los textos centrados
- Usa un contraste adecuado
CONCLUSIÓN
A menudo forma parte del trabajo de los diseñadores entender la psicología y su aplicación en el diseño, entender los conceptos básicos en algunas áreas clave del diseño nos ayudarán a entender y a producir contenido de calidad y gestionar el diseño de manera más efectiva.
Una gran parte de la psicología de diseño se puede utilizar en otras áreas. Basta con ser observadores, sobretodo utilizar el sentido común y el buen gusto.
Más fuentes: