UX / UI

“Introducción a la Programación Web”

TIPOGRAFÍA
La tipografía y su importancia

La tipografía es un elemento que puede servir para potenciar el

mensaje o ir en contra de ello, según cómo se utilice.
Al igual que los colores, las tipografías también transmiten
emociones y sensaciones.

Por eso debemos conocer y poner especial cuidado en la elección de

la tipografía que vayamos a utilizar.

Por ejemplo: No usaremos el mismo tipo de fuente si queremos

reflejar que nuestro negocio es tradicional que si queremos transmitir
que somos una empresa moderna.
El 95% de la información en internet es lenguaje escrito.

Por eso, es muy importante saber elegir correctamente la familia

tipográfica que transmita lo que estamos buscando.
La tipografía debe ser legible para facilitar la lectura de un texto.
La tipografía debe tener estilo para potenciar el mensaje que
necesitamos transmitir. Le da personalidad al texto.
Tipografías Serif

Provienen de la época en que las letras se

tallaban en bloques de piedra, donde era muy
complicado que los bordes quedasen rectos. Por
ese motivo se introdujeron unos remates en los
extremos llamados serif o serifas.
Transmiten:

• Tradicionalismo
• Seriedad
• Respeto
• Elegancia
Tipografías Sans Serif

También conocidas como “de palo seco”, se

reconocen por tener terminaciones rectas y no
poseer serif.
Transmiten:

• Modernidad • Tecnología
• Seguridad • Estabilidad
• Alegría • Bajo perfil
• Minimalismo o simpleza • Sobriedad
Tipografías Manuscritas

Son fuentes que parecen estar escritas en Caligráfica

cursiva o ser caligráficas.
Transmiten:

• Elegancia
• Afecto
• Creatividad
• Hecho a mano
Tipografías Decorativas o de Fantasía

Son tipografías que no se ajustan a ninguna de

las clasificaciones anteriores y que casi siempre
se han creado con un fin específico, donde la
legibilidad no se ha tenido demasiado en cuenta.
¿Qué debemos tener en cuenta a la hora de elegir una tipografía?

¿Qué tipo de texto es? No es lo mismo buscar una tipografía para un

logotipo, que para un titular o para un texto largo. En un logotipo
buscarás algo con cierta personalidad y con fuerza visual. En cambio
en un texto largo necesitarás un estilo limpio y legible, así que una
tipografía muy recargada no sería muy buena idea.
¿A quién nos dirigimos? Al elegir la tipografía, debemos tener en
cuenta para quién estamos diseñando y utilizar un lenguaje que esas
personas puedan entender.
¿Qué queremos transmitir? Es importante tener claro qué
sensaciones queremos transmitir con nuestro diseño.
Por ejemplo, las letras finas transmiten delicadeza, mientras que las
gruesas son más impactantes.
¿Qué elementos rodean a la tipografía? El texto no es un elemento
aislado. Está ubicado en un formato y unas medidas concretas: un
banner de NxN, un póster, etc… Esto significa que el espacio
disponible no es infinito y condiciona la elección de la tipografía. Por
otro lado, el texto está rodeado de colores, imágenes, iconos…
Debemos buscar siempre un tipo de letra que sea coherente con lo
que hay alrededor.
Formatos Web

• TTF
• Woff
• Eot
• SVG
Tipografías de íconos

• Fontawesome
Ventajas

• Tener muchos iconos de manera inmediata, solo instalando la

tipografía

• Se pueden ampliar sin que se pixelen

Desventajas

• Son de un solo color, no se pueden combinar dentro del mismo

icono
Interletrado

Es el espacio que hay entre cada letra de un texto. Se lo conoce

también como Kerning.
Interlineado

Es el espacio que hay entre cada línea de un texto.

Ancho de línea

Es el ancho de un bloque de texto. Busca facilitar la continuidad de la

lectura.
Errores típicos:

• Texto a lo largo de todo el ancho del sitio

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
Errores típicos:

• Texto en columna muy angosta con saltos de línea muy seguidos

Lorem Ipsum is simply
dummy text of the
printing and typesetting
industry. Lorem Ipsum
has been the industry's
standard dummy text
ever since the 1500s,
when an unknown
printer took a galley of
type and scrambled it
to make a type
specimen book.
Recomendación:

• Entre 50 y 75 caracteres por línea, ó

• 10 palabras por línea
Lorem Ipsum is simply dummy text of the printing and Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and when an unknown printer took a galley of type and
scrambled it to make a type specimen book. scrambled it to make a type specimen book.
Alineaciones

• Izquierda
• Derecha
• Centrado
• Justificado
COLOR
Color

¿Qué es el color?

El color es luz que llega a nuestros ojos y nuestros ojos lo envían al

cerebro para que la interprete de cierta forma y así nosotros
entendemos que ciertos elementos o cosas que vemos tienen colores
determinados.
La importancia del color en el diseño

Es una de las herramientas más potentes que tenemos a nuestro

alcance para impregnar significado y provocar sensaciones con
nuestro diseño.
Cuando el color se utiliza con propósito y con sentido, el significado
puede cambiar o potenciarse mucho más.
La rueda cromática

Es una forma visual de entender los colores y su relación.

Está compuesta por tres grupos de colores:

• Primario
• Secundario
• Terciario
Colores primarios

Se componen de rojo, azul y amarillo. Estos son

equidistantes entre sí en la rueda, formando un
triángulo. También son la base para todos los
demás colores de la rueda.
Colores secundarios

Se crean mezclando dos colores primarios,

formando verde, naranja y violeta.
Colores terciarios

Se forman al mezclar un
secundario y un primario.
Colores cálidos

Varían entre el rojo y el amarillo, que incluyen varias versiones de

esos colores además del naranja. Se consideran colores “cálidos”
porque evocan una sensación de calidez.

Por ejemplo, el fuego está asociado con el calor, y por lo general se

quema entre el espectro de rojos y amarillos. Los colores cálidos
también pueden promover una sensación de agresión y se
consideran audaces.
Colores fríos

En el otro lado de la rueda de colores, en contraste con los colores

cálidos, hay colores que se consideran "fríos". Estos colores varían
entre azul, violeta y verde.

Los colores fríos reciben esta designación debido a su naturaleza

calmante y relajante. A menudo se asocian con climas invernales o
agua.
Tono

Selección de un color dentro de nuestra rueda cromática.

Saturación

Intensidad del color con el que estamos trabajando.

Brillo

Funciona similar a la saturación.

Partiendo desde el centro del espectro vamos sumando negro (hacia
la izquierda) o sumando blanco (hacia la derecha)
Colores complementarios

Son colores opuestos entre sí en la rueda de color.

Colores triádicos

Consisten en tres colores que son equidistantes entre sí en la rueda

de color.
Colores tetrádicos

Están formados por dos conjuntos de colores complementarios 60

grados en la rueda de color, formando un rectángulo.
Colores análogos

Están formados con tres o más colores adyacentes entre sí en la

rueda de colores. Hay un color dominante (o tono), combinado con
un segundo para apoyar, y un tercero para acentuar la paleta de
colores.
Los esquemas de color análogos crean una pantalla visualmente
agradable y relajante. Sin embargo, proporcionan una experiencia de
bajo contraste, ya que todos los colores se alinean entre sí.

No se deben usar para contenido que requiera la atención directa del

usuario, pero se pueden usar para crear fondos que no compitan con
el contenido principal del sitio.
Psicología del color

Los humanos percibimos la vida en colores y algunos de ellos marcan

nuestra apreciación de la realidad.

Por ello, los colores se asocian con experiencias y eso hace que cada
color tenga un significado propio.
Cada color tiene un contexto y un significado diferente, y la
psicología del color puede afectar la forma en que las personas
perciben un diseño y se relacionan con los colores utilizados. Elegir
los colores correctos puede ayudar a comunicar de manera no verbal
el contexto y la emoción de un producto o servicio.

Cada color tiene un significado específico (tanto positivo como

negativo) en base a ciertos contextos. Esto puede evocar distintas
emociones en el usuario.
¿Cuáles son estos contextos que definen el significado de cada color?

• Universal: por ejemplo, el cielo es celeste en todo el mundo, el rojo es

el color de la sangre, la vegetación es verde.

• Macro social: por ejemplo, en Medio Oriente al blanco se lo asocia

con la muerte, los funerales; mientras que en Occidente es el negro.

• Social: por ejemplo, si usamos los colores celeste y blanco, en

Argentina las personas lo asociarían con algo patrio; mientras que en
Italia esto no sucedería.
• Micro social: por ejemplo, si hablo de fanáticos del fútbol y
pintamos todo de rojo, van a empatizar más los hinchas de
Independiente que los de Racing.

• Personal: por ejemplo, si toda mi vida jugué al basket, el naranja

me simboliza la pelota y de ahí al deporte.
Significados generales de los colores

Rojo:

• Calor • Valentía
• Pasión • Agresividad
• Fuerza • Peligro
Azul:

• Frío • Confianza
• Inteligencia • Seriedad
• Calma • Profesionalismo
Amarillo:

• Alegría • Curiosidad
• Energía • Verano
• Optimismo • Alerta
Violeta:

• Creatividad • Misterio
• Calidad • Fantasía
• Lujo • Particularidad
Verde:

• Naturaleza • Salud
• Paz • Inocencia
• Equilibrio • Crecimiento
Naranja:

• Cálido • Lúdico
• Amistad • Llamativo
• Seguridad • Optimismo
Negro:

• Oscuridad • Glamour
• Sofisticado • Poder
• Elegancia • Sobriedad
Blanco:

• Claridad • Bondad
• Simpleza • Limpieza
• Pureza • Sutileza
Características de una buena selección de colores

• Debe representar a la marca

• Debe potenciar el mensaje
• Debe proyectar las sensaciones correctas
Cómo seleccionar los colores correctos

• Analizar el branding de la empresa

Cómo seleccionar los colores correctos

• Técnicas básicas de relaciones

Cómo seleccionar los colores correctos

• Trabajar con referencias gráficas

Regla 60-30-10 para la elección de una paleta de colores

Esta es una de las reglas más importantes cuando hablamos de UI y

colores. Es bastante simple:

• el 60% de los elementos deben estar en un color neutro,

• el 30% en un color complementario y

• el 10% restante en un color de acento.

Regla 60-30-10: PASO 1

¡Establecé el color principal! Puede ser el color principal del producto o

marca.
Regla 60-30-10: PASO 2

Vamos a establecer un color secundario. Para esto, duplicá el color

principal y cambiá el modo de color a HSB. Colocá el valor S
(Saturación) entre 5-10 puntos y el valor B (Brillo) entre 95-100
puntos.
Regla 60-30-10: PASO 3

Ahora elegimos un acento o énfasis. Para esto, duplicá nuevamente el

color principal. Aumentá o disminuí el valor H (tono) en 30-40 puntos
y aumentá el valor B (brillo) en 5-10 puntos.
Regla 60-30-10: PASO 4

¡Ahora tenemos una fantástica combinación de tres colores!

¡Vamos a aplicarlos! Según la regla 60/30/10, distribuí el porcentaje

para cada color:
FORMAS
Y SOMBRAS
Formas

Generan emociones, sentimientos y marcos perceptuales.

Es importante conocer su impacto en el usuario al momento de

decidirse por una u otra alternativa.

Son de gran ayuda para reforzar los conceptos que deseamos

transmitir.
Sombras

Las sombras juegan un rol muy importante en el diseño, básicamente

realzan elementos.

Los elementos en los que aplicamos una sombra se sienten más cerca
del usuario, lo que hace que se destaquen y se sientan más altos en la
jerarquía.
Jerarquía de sombras

Cuanto mayor sea el desenfoque y el valor de Y utilizados en la

sombra, mayor será la elevación. Es por eso que el elemento de la
derecha parece "más alto" que el de la izquierda.
Usá sombras suaves

Las sombras suaves son sombras con baja opacidad (generalmente

alrededor del 5-10%) y valores de Y y desenfoque relativamente
altos. Intentá evitar el uso de sombras predeterminadas.
Evitá sombras negras

No uses sombras hechas con color negro puro (# 000000). En su

lugar, usá un tono oscuro del color principal. Se ve mejor y mucho
más realista.
En este ejemplo, este color de sombra se crea tomando el color
principal y reduciendo su valor de brillo (de HSB) a 30
Gracias!