Taller Casiopea/ Pruebas de tipografías y colores

Título	Taller Casiopea/ Pruebas de tipografías y colores
Período	2024-2024
Asignatura	Taller de Titulación de Diseño
Del Curso	Taller Casiopea
Carreras	Diseño
Alumno(s)	Francisca Ortega, Fauve Bellenger
Profesor	Herbert Spencer

Introducción

El contenido de esta página se enmarca dentro del proyecto de título de diseño de interacción de la creación de una nueva skin para nuestra wiki Casiopea. En este momento, se encuentra el proceso de selección de colores y tipografías. En esta página se encuentra el registro de las distintas propuestas que se han estado ideando hasta ahora.

Dentro de esta página se encuentra, primeramente, una sección donde se muestras las herramientas que se usaron dentro de este proceso, con el fin de compartirlas para futuros estudiantes que estén interesados en proyectos de esta área del diseño, como lo son el Diseño UI, pero que también pueden llegar a ser de utilidad en otros proyectos gráficos.

A continuación, se encuentra el registro de las propuestas de tipografías ypaletas de colores que se cree pueden funcionar dentro de la nueva skin.

Herramientas de utilidad

Se utilizaron dos herramientas gratuitas para testear y visualizar los contrastes de colores y legibilidad de los textos y colores de manera rápida: Realtime Colors y Typecale.

Realtime Colors:

Realtime Colors es una herramienta para testear paletas de colores y mezclas de tipografías (header y body), para evaluar los contrastes y la legibilidad.

Pros:

Fácil de compartir
Fácil de usar
Rápido para probar paletas y visualizarlas en un diseño realista predeterminado
Exporta en distintos formatos para código (CSS, LESS, Bootstrap, etc)
Se puede linkear a un archivo de Figma y añadir las variables de colores de forma automática
Se puede elegir una tipografía para los headings y otra distinta para el body (de Google Fonts)
Se puede elegir la escala de los textos
Gratis (hasta ahora: junio del 2024)

Contras:

No se puede modificar el interlineado, espacio entre carácteres, ni el peso de las fuentes

Typescale:

En cuanto a Typescale, esta es similar a Realtime Colors, ya que se pueden modificar los colores, la tipografía y el tipo de escala. La diferencia es que Typescale sirve para visualizar de mejor manera la legibilidad de los textos, pudiendo personalizarlos aún más.

Pros:

Se puede editar el tamaño base del body
Se puede modificar el tipo de escala
Se puede elegir la tipografía (de Google Fonts)
Se puede modificar el peso, interlineado y espaciado entre las letras
Se puede elegir el color de fondo y del texto
Genera distintos tamaños para los textos (p, h1, h2, h3, etcétera)
Rápido para probar textos y visualizarlos en diseños realista predeterminados por el sitio
Es mejor para visualizar lecturas más largas que en Realtime Colors

Contras:

Es freemium
En la versión gratuita no te deja personalizar textos de los headings, diferenciándolos de los textos del body
En la versión gratuita no se puede exportar en CSS
En la versión gratuita no se puede guardar

Otras herrmaientas:

Calculadora de escalas

Prueba de Tipografías

Criterios para la elección

"La tipografía debe adaptarse al propósito del proyecto, y su diseño debe ser legible y completo".

Para elegir la/s tipografía/s que se utilizarán en la wiki, es importante tomar en cuenta distintos aspectos: La tipografía debe adaptarse al propósito del proyecto, esto quiere decir que el tipo de fuente es coherente, armoniza con el resto del diseño; además, el diseño de la tipografía es legible y completo, o sea que tiene soporte multilingüe, sus detalles son legibles, contiene una gama de estilos y pesos, el espaciado entre letras está bien hecho, entre otras cosas. ^[1]

Legibilidad:

"Debemos tomar en cuenta todos los factores que puedan facilitar la lectura a los distintos usuarios".

La legibilidad de un texto se ve afectada por la tipografía, y por la dificultad del contenido mismo. Por esto, se debe tomar en consideración que la tipografía que se elija se usará en cuerpos de texto de gran extensión y, muchas veces, complejos de comprender, especialmente para estudiantes nuevos. Por esto, debemos tomar en cuenta todos los factores que puedan facilitar la lectura a los distintos usuarios. ^[2]

Uno de estos factores es el contorno formado por las palabras, que significa que es más fácil distinguir un texto escrito de esta forma, QUE UN TEXTO ESCRITO DE ESTA FORMA. Esto ocurre ya que nuestro cerebro es capás de identificar palabras por la froma general antes que por cada letra individual.

Otro factor importante son las escalas. En palabras simples, las escalas son una serie de estilos de texto de distintos tamaños (por ejemplo H1, H2, H3, y así), que ayudan a distinguir la jerarquía de los contenidos. ^[3] Se le llama escalas porque estos textos mantienen una proporción entre sí. Se pueden usar distintas proporciones, algunas más pequeñas, se adaptan de mejor manera a pantallas de mobil, y otras proporciones más grandes funcionan bien en desktop. Spencer Mortensen lo explica en mayor detalle en su artículo Typographic scale.^[4]

Estilo de la tipografía

"Si los estudiantes nuevos llegaran a percibir a la wiki como una herramienta anticuada, pueden asumir que será dificil de usar, lo que les puede generar ansiedad, y su aprendizaje se vería afectado."

Ahora, si bien la legibilidad es un factor importante para este proyecto, una de las razones del por qué se está creando una nueva skin es para actualizar la imagen de la wiki. La tipografía aquí juega un rol importante, ya que, aunque se use una que facilite la lectura, no queremos dar la impresión incorrecta. El estilo de la tipografía es un factor que puede influir en cómo es percibida la wiki, tanto que, si los estudiantes nuevos llegaran a percibir a la wiki como una herramienta anticuada, pueden asumir que será dificil de usar, lo que les puede generar ansiedad, y su aprendizaje se vería afectado. Esto se puede evitar utilizando una tipografía que sea percibida como moderna.

Si bien se podría pensar de que una tipografía moderna debería ser una sans-serif para un diseño minimalista, en los últimos años se ha visto un auge en la utilización de serifas, tanto en branding como en el diseño de interfaces. Según Creative Review, esto se viene viendo desde el rebranding de Mailchimp en 2018, en un momento en que todos estaban usando fuentes sin serifa, Mailchimp decidió diferenciarse con Cooper Light, comenzando esta renovación. ^[5]

En conjunto con esto, en el mundo del marketing se le ha ido dando cada vez más importancia a lo humano y la cercanía que existe entre las marcas y sus usuarios, y una forma de transmitirlo es a través del diseño, y la utilización de tipografías menos "perfectas", menos "minimalistas". Se sabe que las modas son cíclicas, pero en un momento en que pareciera que todas las marcas relacionadas al diseño y con gran presencia digital están comenzando a usar este tipo de letras, puede ser una buena forma de marcar una diferencia con las demás skins de wikis más tradicionales.

Propuestas de tipografías

A continuación, se registran algunas propuestas para las mezclas de las tipografías de la nueva skin.

Merriweather

Headings: Merriweather Sans
Body: Merriweather

Visualizar textos

PT

Heading: PT Sans
Body: PT Serif

Visualizar textos

Source

Heading: Source Sans 3
Body: Source Serif 4
Codigo: Source Code Pro

Visualizar textos

Prueba de Colores

Criterios de elección de colores

Propuestas de paletas de color

Prueba A

Muestra de colores

Visualización de la paleta de colores
¿Qué es esto?
Esta tabla se hizo para visualizar en la wiki los contrastes entre los colores de esta propuesta de paleta.
Para visualizar de mejor manera los colores, recomendamos hacer click en el enlace de la visualización, el cual lleva a la página de Realtime Colors.					aaaaaaa
Realtime Colors es una herramienta, pensada para hacer el proceso de creación de paletas de colores para proyectos de diseño de interfáz más fáciles de compartir con los demás agentes involucrados en el proyecto, como clientes, desarrolladores, u otros diseñadores; pero para una visualización más rápida dentro de la misma wiki, decidimos crear algunas tablas como esta.		aaaaaaa
Y este texto de aquí, puede ser un pie de imagen.				aaaaaaa

Botón Secundario	Botón Primario		aaaaaaa

Códigos de colores y enlace a Realtime Colors

Texto: #000000
Fondo: #ffffff
Primario: #a53218
Secundario: #838383

Link a la visualización

Prueba B

Muestra de colores

Visualización de la paleta de colores
¿Qué es esto?
Esta tabla se hizo para visualizar en la wiki los contrastes entre los colores de esta propuesta de paleta.
Para visualizar de mejor manera los colores, recomendamos hacer click en el enlace de la visualización, el cual lleva a la página de Realtime Colors.					aaaaaaa
Realtime Colors es una herramienta, pensada para hacer el proceso de creación de paletas de colores para proyectos de diseño de interfáz más fáciles de compartir con los demás agentes involucrados en el proyecto, como clientes, desarrolladores, u otros diseñadores; pero para una visualización más rápida dentro de la misma wiki, decidimos crear algunas tablas como esta.		aaaaaaa
Y este texto de aquí, puede ser un pie de imagen.				aaaaaaa

Botón Secundario	Botón Primario		aaaaaaa

Códigos de colores y enlace a Realtime Colors

Texto: #4a456c
Fondo: #fffaf6
Primario: #953100
Secundario: #7a7a7a

Link a la visualización

Prueba C

Muestra de colores

Visualización de la paleta de colores
¿Qué es esto?
Esta tabla se hizo para visualizar en la wiki los contrastes entre los colores de esta propuesta de paleta.
Para visualizar de mejor manera los colores, recomendamos hacer click en el enlace de la visualización, el cual lleva a la página de Realtime Colors.					aaaaaaa
Realtime Colors es una herramienta, pensada para hacer el proceso de creación de paletas de colores para proyectos de diseño de interfáz más fáciles de compartir con los demás agentes involucrados en el proyecto, como clientes, desarrolladores, u otros diseñadores; pero para una visualización más rápida dentro de la misma wiki, decidimos crear algunas tablas como esta.		aaaaaaa
Y este texto de aquí, puede ser un pie de imagen.				aaaaaaa

Botón Secundario	Botón Primario		aaaaaaa

Códigos de colores y enlace a Realtime Colors

Texto: #34314b
Fondo: #fffaf6
Primario: #952000
Secundario: #5f5855

Link a la visualización

Prueba D

Muestra de colores

Visualización de la paleta de colores
¿Qué es esto?
Esta tabla se hizo para visualizar en la wiki los contrastes entre los colores de esta propuesta de paleta.
Para visualizar de mejor manera los colores, recomendamos hacer click en el enlace de la visualización, el cual lleva a la página de Realtime Colors.					aaaaaaa
Realtime Colors es una herramienta, pensada para hacer el proceso de creación de paletas de colores para proyectos de diseño de interfáz más fáciles de compartir con los demás agentes involucrados en el proyecto, como clientes, desarrolladores, u otros diseñadores; pero para una visualización más rápida dentro de la misma wiki, decidimos crear algunas tablas como esta.		aaaaaaa
Y este texto de aquí, puede ser un pie de imagen.				aaaaaaa

Botón Secundario	Botón Primario		aaaaaaa

Códigos de colores y enlace a Realtime Colors

Texto: #130300
Fondo: #FFFEFD
Primario: #953100
Secundario: #775D2B

Link a la visualización

Prueba E

Muestra de colores

Visualización de la paleta de colores
¿Qué es esto?
Esta tabla se hizo para visualizar en la wiki los contrastes entre los colores de esta propuesta de paleta.
Para visualizar de mejor manera los colores, recomendamos hacer click en el enlace de la visualización, el cual lleva a la página de Realtime Colors.					aaaaaaa
Realtime Colors es una herramienta, pensada para hacer el proceso de creación de paletas de colores para proyectos de diseño de interfáz más fáciles de compartir con los demás agentes involucrados en el proyecto, como clientes, desarrolladores, u otros diseñadores; pero para una visualización más rápida dentro de la misma wiki, decidimos crear algunas tablas como esta.		aaaaaaa
Y este texto de aquí, puede ser un pie de imagen.				aaaaaaa

Botón Secundario	Botón Primario		aaaaaaa

Códigos de colores y enlace a Realtime Colors

Texto: #313131
Fondo: #FAF7F3
Primario: #953100
Secundario: #606283

Link a la visualización

Prueba F

Muestra de colores

Visualización de la paleta de colores
¿Qué es esto?
Esta tabla se hizo para visualizar en la wiki los contrastes entre los colores de esta propuesta de paleta.
Para visualizar de mejor manera los colores, recomendamos hacer click en el enlace de la visualización, el cual lleva a la página de Realtime Colors.					aaaaaaa
Realtime Colors es una herramienta, pensada para hacer el proceso de creación de paletas de colores para proyectos de diseño de interfáz más fáciles de compartir con los demás agentes involucrados en el proyecto, como clientes, desarrolladores, u otros diseñadores; pero para una visualización más rápida dentro de la misma wiki, decidimos crear algunas tablas como esta.		aaaaaaa
Y este texto de aquí, puede ser un pie de imagen.				aaaaaaa

Botón Secundario	Botón Primario		aaaaaaa

Códigos de colores y enlace a Realtime Colors

Texto: #203541
Fondo: #f6f3ea
Primario: #880207
Secundario: #8ca0ab (gris medio, derivado del color del texto)

Link a la visualización

Prueba G

Muestra de colores

Códigos de colores y enlace a Realtime Colors

Texto:
Fondo:
Primario:
Secundario:

[--- Link a la visualización]

[1] ttps://fonts.google.com/knowledge/choosing_type/a_checklist_for_choosing_type

[2] ttps://fonts.google.com/knowledge/readability_and_accessibility/how_type_influences_readability

[3] ttps://fonts.google.com/knowledge/glossary/scale

[4] ttps://spencermortensen.com/articles/typographic-scale/

[5] ttps://www.creativereview.co.uk/return-serif-type-trend/

[1]

[2]

[3]

[4]

[5]