# Cuadrículas, Colores y Tipografías
## Evitando el Pixel-Pushing
Una de las cosas más difíciles de manejar cuando comienzas como diseñador visual es la cantidad de tiempo que pasas moviendo elementos en tu pantalla hasta que estás "feliz" con el resultado final. Después de horas y horas de trabajo, presentarás tu diseño final a alguien, orgulloso de tu mayor creación. La respuesta probablemente será: "Oh sí, se ve bien".
¡¿Bien?!... ¡BIEN! Después de pasar las últimas 12 horas decidiendo si la fuente debería ser de 14pt o 16pt, o si el espaciado entre el título y el párrafo debería ser de 10 píxeles o 15?
Los diseñadores visuales tienden a ser personas orientadas a los detalles que disfrutan teniendo interfaces de usuario perfectas en píxeles. Cambiar constantemente los elementos en pequeños incrementos de píxeles es uno de los mayores consumidores de tiempo durante el proceso de diseño visual.
Naturalmente, al principio, tendrás que iterar y cambiar cosas mucho mientras pulimentas tus habilidades visuales. Es importante que, a medida que mejore, crees un sistema para ti mismo para que no pases demasiado tiempo y energía atrapado en los píxeles.
:::success
:art: **Consejo de Figma**
Cuando tenemos una capa seleccionada, podemos moverla usando las `flechas de dirección`. La capa se moverá en incrementos de 1px.
Mover 1px a la vez puede ser útil para ajustes perfectos de píxeles, pero no es útil si queremos movernos con precisión a través de un tablero de arte completo. Podemos mantener presionada la tecla `mayúsculas` mientras presionamos las `flechas de dirección` y el elemento se moverá por incrementos de 10px en lugar de 1px.
Para cambiar este comportamiento (es decir, usar la cuadrícula de 8px y moverse por 8px en lugar de 10), puedes instalar el complemento [Nudg.it](http://nudg.it/).
:::
### Simplificación de las Decisiones de Diseño
El pixel-pushing podría haber estado bien para los días de impresión. Cuando una vez que se imprimía el cartel, la portada del CD o el libro, el trabajo estaba hecho. Pero la naturaleza iterativa de las interfaces de usuario significa que no importa cuán perfectos fueran esos píxeles, mañana tendrás que reorganizar el diseño, agregar características y todo ese tiempo perfeccionando los píxeles se perderá.
Además, en el diseño de productos, no estarás tratando con UN solo diseño de cartel. Trabajarás simultáneamente con TONELADAS de pantallas y elementos. Estás diseñando sistemas con relaciones funcionales, no solo imágenes estáticas.
**CADA UNO DE ESTOS ELEMENTOS ESTÁ COMPUESTO DE UNA SERIE DE DECISIONES:**
- color, espaciado, bordes, relleno, sombras, estilo de fuente
Debido a que el diseño es abierto, hay un millón de formas en que las cosas podrían ir cuando se multiplican todos estos factores. Tener que tomar todas estas decisiones puede ser abrumador y agotador muy rápidamente, y podrías comenzar a sentirte quemado rápidamente.
 =400x)
Para evitar esto, necesitas establecer **disciplina**.
### Los diseñadores necesitan un conjunto de reglas a seguir.
Demasiadas decisiones pueden ser agotadoras. Eliminar incertidumbres y variables eliminará la toma de decisiones y simplificará la producción. Tener reglas establecidas permite a los diseñadores producir diseños que sean confiablemente buenos y consistentes.
Como hablamos en la unidad de aprendizaje "Analizando Estéticas", hay un conjunto básico de heurísticas que, cuando se siguen correctamente, siempre producirán un buen diseño.
:::warning
Crear reglas para estos heurísticos es personal para cada diseñador (no hay una cantidad perfecta de píxeles para separar dos imágenes), pero te guiaremos a través de los conceptos básicos para que puedas comenzar a crear un flujo de trabajo y un conjunto de reglas para maximizar tus esfuerzos de diseño y minimizar la incertidumbre y la toma de decisiones.
:::
:::info
**Demostración en vivo:**
Mientras aprendemos sobre estos conceptos, los aplicaremos para rediseñar esta página de inicio en una demostración en vivo.
[Campamento de Equitación](http://www.willowsouth.com/day_camp,_summer_camp,_horseback_riding_camp_for_kids_in_johns_creek.htm)
:::
## Alineación
La alineación es la primera gran lección de diseño visual que los diseñadores principiantes deben aprender.
### Alinear correctamente tus diseños
- Hace que la disposición sea visualmente más atractiva.
- Facilita a los usuarios escanear una página.
- Te permite tomar decisiones conscientes sobre dónde colocar los elementos y cómo interactúan entre sí.
> Crear una buena alineación une la brecha visual entre cada elemento en tu diseño, ayudándonos a crear relaciones entre los elementos que tenemos. De lo contrario, tendríamos un diseño con bloques de texto e imágenes por todas partes, sin sentido y sin estructura.
>
Las principales cosas que puedes comenzar son:
- Márgenes de diseño izquierdo y derecho
- Columnas o filas de texto/objetos
Con el tiempo, querrás alinear todo con algo más. Nada debería estar flotando libremente al azar, cada elemento debería relacionarse con algo más.
:::info
En la imagen anterior, nota cómo se alinea la ventana principal (fondo blanco).
- Todas las "filas" de elementos están alineadas tanto en el margen izquierdo como en el derecho.
- Los botones están alineados horizontalmente entre sí y espaciados para lograr la alineación vertical con el gráfico y la tabla más largos.
- Los iconos están alineados con el texto y alineados entre sí.
:::
La alineación es una excelente manera de acelerar el proceso de toma de decisiones sobre dónde se deben colocar las cosas porque reduce inmensamente la cantidad de opciones que tienes y crea un sistema a seguir.
:::success
No tienes que alinear cada elemento en toda la página en la misma línea. Al **mezclar las alineaciones** estás asegurando que tu sitio esté organizado y estructurado al tiempo que creas interés visual. Mezclar alineaciones no es sobre la introducción de nuevas cuadrículas, columnas o extras a tu estructura. En cambio, se trata de decidir qué elementos se alinearán con qué columnas. Mira los objetos en términos de *módulos* o *grupos*, y decide qué cosas se alinearán entre sí.
:::
### Alinear Texto
Hay 4 formas de alinear el texto:
- Izquierdo, derecho, centrado, justificado
### Izquierdo
Debido a la cultura occidental de leer de izquierda a derecha, el alineamiento izquierdo es el formato más común utilizado.
 =400x)
### Derecho
Tener grandes cantidades de texto alineado a la derecha es muy difícil de leer.
- El alineamiento a la derecha generalmente se deja para pequeñas características de diseño, como en un pie de página para la dirección o información de contacto, o en un encabezado con una lista de enlaces de navegación.
 =400x)
### Justificado
El alineamiento justificado funciona bien en la impresión, donde el diseño es estático. Pero en la web, donde los diseños son fluidos y responsivos, es mejor quedarse con el texto alineado a la izquierda para evitar el espaciado incómodo producido en el alineamiento justificado.
 =400x)
### Centrado
Pequeñas cantidades de texto pueden funcionar bien en alineación centrada, aunque esto será más difícil de leer en grandes bloques de texto.
 =400x)
- El texto centrado también es la forma habitual de alinear el texto dentro de los botones o cuando se combina con iconos
- Con las **cabeceras**, puede funcionar bien en tu diseño alinearlas centralmente, aunque esto depende del tamaño del texto y de dónde se esté colocando.
 =400x)
- Por lo general, cuando se utiliza la alineación central, se mantiene este estilo consistente para la mayoría de los elementos de texto en la página
### Cómo alinear elementos
:::info
**Tutorial en vivo:**
Veamos las herramientas que pueden ayudarte a hacer esto en Figma
- Reglas
- Herramientas de alineación
- Usando vista --> mostrar diseño
:::
### Alineando elementos de varias capas
- Cuando tienes un elemento con relleno dentro, ¿alineas el borde externo del relleno o el borde del texto?
:::success
:+1: Regla general: Alinéate con el que tenga más peso visual.
:::
### Alineando círculos y rectángulos horizontalmente
Muchas veces alinearás elementos redondos, como iconos, con elementos cuadrados o rectangulares, como cuadros de texto. ¡Aquí hay un truco que podría ayudar a que se vean perfectamente alineados!
- Los rectángulos son planos, por lo que todos los puntos en la parte inferior de este caen en la línea de alineación
- El círculo tiene solo un punto alineado en la parte superior e inferior - por lo que visualmente parece más pequeño.
- Para que ambos objetos parezcan del mismo tamaño, o parezcan alineados en la parte inferior, es un buen truco hacer que el círculo sobresalga de las líneas de alineación. Haz el círculo unos pocos píxeles más grande para que se vea más uniforme.
- Esta misma lógica se aplica a rectángulos u objetos puntiagudos.
### Alineando iconos y fuentes
:::info
**Pregunta de discusión:**
¿Qué altura de X usas para alinear? ¿Alineas la altura de X para letras mayúsculas o minúsculas?
:::
### Alineación central de objetos irregulares
 =400x)
:::warning
:exclamation: Cuando se selecciona un triángulo en una herramienta de diseño, por lo general tiene un área de selección rectangular, por lo que el centro es el centro del rectángulo pero no el centro del triángulo.
:::
Entonces, ¿cómo encuentras el punto central de una forma irregular fácilmente? Encontrando su **Centro de Masa**
> El centro de masa, o punto central, significa que la distancia entre los bordes más largos y el centro es la misma. Así que solo usando un círculo detrás y haciéndolo apuntar al borde de la forma, porque el borde del círculo al centro es el radio, todos los radios tienen el mismo tamaño.
>
Una vez que tienes el centro verdadero, puedes decidir cómo alinear el objeto y luego eliminar la capa del círculo.
:::info
[El artículo original](https://medium.com/@erqiudao/the-play-button-is-not-optical-alignment-4cea11bda175) profundiza en los detalles de este método.
:::
Como puedes ver, ¡solo en términos de alineación hay toneladas de decisiones que tomar! Todo se reducirá a una cuestión de contexto y preferencia. Pero definir qué sistemas funcionan para ti desde el principio te ayudará a crear consistencia y eficiencia en tu proceso.
## Cuadrículas
A muchos diseñadores les encanta trabajar con sistemas de cuadrícula. Se han vuelto cada vez más populares con el uso creciente de marcos de codificación como **Bootstrap**, en los que los desarrolladores diseñan el contenido utilizando una cuadrícula de 12 columnas.
:::warning
Esto no significa que todas las cuadrículas deban tener 12 columnas, pero es uno de los sistemas de cuadrícula más populares utilizados en el diseño de productos.
:::
### ¿Por qué deberías usar una cuadrícula?
Una cuadrícula puede crear una estructura básica, un esqueleto para tu diseño. Consisten en líneas "invisibles" sobre las cuales se pueden colocar los elementos de tu diseño. Al hacerlo, los elementos se unen en un "sistema" general y apoyan tu composición de manera racional.
 =500x)
- **Claridad/Orden** - Las cuadrículas aportan orden a una disposición, lo que facilita que los visitantes encuentren y naveguen a través de la información.
- **Eficiencia** - Las cuadrículas permiten a los diseñadores agregar rápidamente elementos a una disposición. Muchas decisiones de disposición se abordan mientras se construye la estructura de la cuadrícula.
- **Economía** - Las cuadrículas hacen que sea más fácil para otros diseñadores colaborar en el diseño, ya que proporcionan un plan de dónde colocar los elementos.
- **Consistencia/Armonía** - Las cuadrículas llevan a la consistencia en la disposición de las páginas en un solo sitio o incluso en varios sitios, creando una armonía estructural en el diseño.
:::success
:key: En el diseño web receptivo, las cuadrículas crean un sistema para reorganizar fácilmente los elementos según el tamaño de pantalla en el que se muestren.
:::
Aunque a veces se puede romper la cuadrícula para agregar energía visual a tu diseño, las cuadrículas se utilizan como un primer enfoque para alinear todo. Las cuadrículas son un punto de partida teórico.
### Elementos de una cuadrícula
- **Márgenes**
- Los márgenes son el espacio negativo entre el borde del formato y el borde exterior del contenido.
- Las proporciones de margen ayudan a establecer la tensión general en una composición. Cuanto más pequeño sea el margen, mayor será la tensión.
- **Columnas**
- Las columnas son bandas verticales de módulos. Puede haber cualquier número de columnas en una cuadrícula. Más columnas dan más flexibilidad, pero también pueden hacer que la cuadrícula sea difícil de trabajar.
- **Canalizos**
- Los canalizos son los espacios que separan los módulos vertical u horizontalmente. Normalmente pensamos en los canalizos como el espacio entre columnas, pero también son el espacio entre filas.
:::warning
¿Y las filas?
- Las filas son el equivalente horizontal de las columnas. En línea es más difícil planificar las filas ya que la altura del formato a menudo es inconsistente y dinámica.
:::
## Cuándo no usar cuadrículas
Evita las cuadrículas en interfaces con mucha información. Cuando necesitas muchos controles avanzados, es difícil ceñirse a una cuadrícula. Todavía puedes crear una fuerte sensación de alineación, pero probablemente la cuadrícula no funcionará bien.
## Figma: Configuración de una cuadrícula
- Selección de elemento --> Layout grid
Verás columnas rojas superpuestas en tu pantalla. Todo lo que diseñes irá directamente debajo de ellas.
## La cuadrícula de 12 columnas
### ¿Por qué 12 columnas? ¡FLEXIBILIDAD!
- 12 es divisible por 2, 3, 4, 6 y 12, por lo que hay muchas opciones.
## Espaciado
El espaciado es una de las herramientas más importantes que puedes usar para crear **Jerarquía visual** (junto con la tipografía).
El espacio en blanco, también conocido como espacio negativo, es el espacio entre diferentes elementos (gráficos, columnas, imágenes, texto, etc.) que no contiene nada.
- No debes pensar en esto como un espacio donde no creaste contenido, sino como un ingrediente clave en la disposición de tu sitio.
> El espacio en blanco debe considerarse un elemento activo, no un fondo pasivo.
-- Jan Tschichold
>
- No tiene que ser **blanco**. El espacio en blanco puede estar lleno de cualquier color siempre que esté libre de cualquier elemento.
- El espacio en blanco se utiliza para espaciar el contenido y lograr una mayor legibilidad.
- También juega un papel importante en la disposición visual y la posición de la marca.
:::success
**Consejo profesional:** En el mundo real, el espacio vacío es un lujo. (Piensa en castillos enormes y vacíos o en vestíbulos de edificios costosos).
 =400x)
### Cuando quieras comunicar lujo en un producto, ¡usar más espacio en blanco hará el truco!
 =400x)
:::
> Hoy en día, la mayoría de los sitios web ofrecen enormes cantidades de información, y a veces eso se convierte en un diseño desordenado y complejo que hace que tus lectores pierdan el enfoque de lo que buscan en tu sitio web, se sientan incómodos y finalmente se vayan... Es por eso que la necesidad de que los diseñadores creen diseños extremadamente claros y comprendan cómo funciona el espacio en blanco es un ingrediente clave.
-- Pixeltohtml.com
>
El uso del espacio en blanco hace que tu diseño parezca que tienes espacio de sobra y que estás siendo intencional al elegir qué objetos presentar.
 =400x)
:::info
:key: La separación **física** entre los elementos también debe reflejar la separación **lógica** entre ellos.
:::
El espacio puede ayudarte a agrupar cosas que van juntas y separar las que no pertenecen a la misma categoría, permitiéndote dividir el diseño de manera lógica.
- El espaciado debe ser consistente
- entre enlaces de navegación
- entre elementos relacionados en una lista o diseño de cuadrícula
- texto
- imágenes
- iconos
### Espacio en blanco y texto
Agregar espacio a las líneas de contenido crea texto más fácil de digerir.
 =300x)
- Hay muchas oportunidades diferentes para jugar con el espaciado en un texto:
- Entre encabezado y subencabezado
- Entre subencabezado y párrafo
- Entre párrafos
- Entre líneas de texto
### Bloque de texto
:::success
:+1: Regla de oro: En cuanto a la legibilidad, un buen ancho de párrafo es de alrededor de 50-70 caracteres.
:::
### Espaciado del texto
- **Entre párrafos**
- Debe haber una "media línea en blanco" entre párrafos. Debe ser distinguible del espaciado de línea.
:::success
:+1: Regla de oro: El espaciado entre párrafos debe ser la mitad de la altura de línea.
 =300x)
:::
- **Entre líneas**
- En general, para una buena legibilidad, el espaciado entre líneas debe caber una letra (del mismo estilo de fuente) entre las líneas.
 =400x)
- **Entre caracteres**
- Mantén *automático* en la mayoría de los casos.
- Si tienes texto en mayúsculas, deberás agregar un poco de espacio entre caracteres o espaciado de letra porque el tipo de letra no fue diseñado para usarse de esta manera.
## Recursos adicionales
- [Usar rejillas de línea base para un diseño pulido](https://www.youtube.com/watch?v=-Kp66bBZoy8)
- [Espacio en los sistemas de diseño](https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62)
- [Diseñando rejillas](https://zellwk.com/blog/designing-grids/)
- [Mejorando el diseño con ritmo vertical](https://webdesign.tutsplus.com/articles/improving-layout-with-vertical-rhythm--webdesign-14070)
- :book: [El zen del espacio en blanco en el diseño de interfaz de usuario web](https://www.google.es/search?q=whitespace+ui+design&oq=whitespace+ui+design&aqs=chrome..69i57j0l2.3131j0j7&sourceid=chrome&ie=UTF-8)
# Color
 =500x)
# Codificación de color: HEX, RGB y HSB
 =500x)
## ¿Por qué necesitamos 'codificar' colores?
El color necesita ser codificado porque el código es la forma en que las computadoras almacenan los colores. El color es una percepción del ojo humano, no podemos almacenar ondas de luz en el disco duro de una computadora.
Hoy en día, los modelos de color más utilizados son [RGB](https://en.wikipedia.org/wiki/RGB_color_model) y [HSB](http://dba.med.sc.edu/price/irf/Adobe_tg/models/hsb.html). Nos permiten especificar el color atendiendo a diferentes propiedades.
## Teoría del color RGB
> El modelo de color RGB es un modelo de color aditivo en el que se agregan luz roja, verde y azul juntas de varias maneras para reproducir una amplia gama de colores.
[nombre=Wikipedia]
>
En el sistema RGB, R significa **rojo**, G significa **verde** y B significa **azul**. La codificación de colores RGB asume que cada color tiene tres componentes: rojo, verde y azul. En la codificación de colores RGB, estos tres componentes pueden tener valores desde 0 (nada) hasta 255 (cantidad máxima).
:::danger
:eyes: **HEX: El triplete Hex** no es un **modelo de color**. Un triplete hexadecimal es un número hexadecimal de tres bytes de seis dígitos utilizado en HTML, CSS, SVG y otras aplicaciones informáticas para representar colores. Pueden representar toda la codificación de color, incluidos RGB, HSB o CMYK.
:::
Nos vamos a **centrar en HSB** porque es el sistema de color más intuitivo y práctico con un amplio uso.
## Teoría del color HSB
### ¿Qué es el matiz? (H)
**H** representa **tonalidad**; y nos dice el color (ya sea que miremos rojo, azul, morado, amarillo, etc.). Se codifica como un grado, que varía de 0 a 359, como si miráramos un círculo.
:::info
**Actividad de clase:**
:runner: Ve a Figma y abre el inspector de color. Haz clic en `R G B` y cambia el valor a HSB. Mueve el color. Verás que los valores en `S` y `B` están cambiando, pero el valor de `H` se mantendrá igual.
**¿Por qué?**
La tonalidad no está cambiando, porque el color base (tonalidad) es el mismo. Estamos viendo todos los posibles valores para una tonalidad.
Si mueves el selector de color horizontal (el icono del arco iris), cambiarás la tonalidad, de 0 a 360 (360 es lo mismo que 9).
:::
### ¿Qué es la saturación? (S)
**S** representa la saturación; nos dice qué tan fuerte es el color. Su valor puede ser cualquier cosa entre 0 y 100.
También se puede pensar en ello como el matiz inyectado en un tono gris. La saturación 0 va a ser gris porque tiene un 0% de matiz inyectado, mientras que la saturación 100 va a ser lo opuesto, 100% de matiz, no gris.
:::info
:bulb: La saturación va a estar en el eje X, a la izquierda y a la derecha en el Selector de color de Figma. ¡¡Pruébalo!!
:::
### ¿Qué es el brillo? (B)
**B** representa la luminancia; la B significa brillo. Al igual que 'S', el valor del tercer componente varía entre 0 y 100.
Un color con un brillo de 0 siempre será negro, sin importar qué matiz o saturación tenga. Pero 100 de brillo no será blanco, sino el matiz brillante completo.
:::info
:bulb: El brillo va a estar en el eje Y, arriba y abajo en el Selector de color de Figma. ¡Prueba mover el color o cambiar su valor y mira cómo cambia!
:::
---
 =20x) Cuando seleccionamos el Selector de color o gotero, podemos ver los diferentes valores de Matiz, Saturación, Brillo y el valor HEX.
 =300x)
Si ves valores `R G B` en su lugar, necesitas cambiar `R G B` a `H S B` haciendo clic en las letras.
---
### Interacción entre saturación y brillo
El matiz, la saturación y el brillo están relacionados. Un alto brillo no necesita saturación para mostrar el matiz, pero si tienes un brillo más bajo en tu color, necesitarás mucha más saturación para que aparezca el matiz.
## Luminosidad
La luminosidad se refiere generalmente a 'brillo percibido' o 'brillo intrínseco'. La luminosidad no es el valor de brillo en HSB. La luminosidad nos ayudará a usar el color en el diseño de interfaces de usuario creando el contraste adecuado, evitando colores conflictivos y mejorando la accesibilidad.
☝🏼 **Ejemplo:** Ambos rellenos anteriores tienen un brillo de 100 en HSB. Pero, el amarillo parece tener mucho más brillo, es más intenso. Esto se debe a la luminosidad.
Abre Figma y pruébalo.
### ¿Cómo sabemos la luminosidad exacta?
Tenemos que crear un fondo blanco detrás de ambos rectángulos y luego cambiar el modo de fusión de los colores a Luminosidad.
 =200x)
Con la combinación de mezcla Luminosidad, el brillo de los grises resultantes es la luminosidad del color.
 =300x)
Volviendo a nuestro ejemplo inicial, pensamos que el amarillo tiene más luminosidad, el brillo percibido era mayor. Ahora, si vemos el brillo, el amarillo tiene 86 mientras que el azul solo tiene 58.
:::
### Luminosidad en colores comunes
 =400x)
> [name="Extracto de Kennedy Design Inc.]
>
En el gráfico anterior hay tres puntos máximos y tres puntos mínimos.
- Puntos bajos: rojo, verde y azul
- Puntos altos: cian, magenta y amarillo
> Desplazar el matiz hacia el rojo (0°), verde (120°) o azul (240°) disminuirá la luminosidad o la claridad percibida del color. Y desplazar el matiz hacia el amarillo (60°), cian (180°) o magenta (300°) aumentará la claridad percibida del color.
[name="Kennedy Design Inc."]
>
Digamos que seleccionas un color verde. Puede convertirse en más luminoso restando grados del matiz o acercándolo al amarillo. También puedes agregar grados de matiz para aumentar la luminosidad acercándolo más al azul o al rojo.
### ¿Por qué es útil la luminosidad?
La luminosidad nos ayuda a solucionar problemas de contraste que chocan. En lugar de cambiar los colores basados en nuestra percepción y nuestra intuición, podemos usar la luminosidad como un marco para solucionar problemas de contraste.
Tomemos otro ejemplo, en este caso con otros colores. Nuestro cliente exige que nuestros colores sean morado y azul. Nos da estos colores.
 =370x)
A primera vista, estos colores obviamente chocan y el borde entre ellos no tiene contraste. **¿Por qué sucede esto?**
Veamos su luminosidad.
 =300x)
Estos colores tienen **la misma luminosidad.** El problema ahora es: ¿cómo podemos solucionarlo?
## Cómo usar el matiz, la saturación y el brillo para cambiar la luminosidad y mejorar el contraste.
### Usando el matiz
Podemos cambiar el matiz de ambos colores para mejorar su contraste. Podemos mover el morado hacia un color con más grados de matiz (disminuir la luminosidad) y mover el azul hacia un color con menos grados de matiz (aumentar la luminosidad). Su brecha de matiz es más grande, por lo que el efecto de ellos juntos mejora.
 =370x)
### Usando la saturación
También podemos extender la brecha entre su saturación. Primero, echemos un vistazo a un ejemplo.
Vamos a crear una paleta de colores basada solo en un matiz y brillo. Solo vamos a cambiar la saturación y luego mirar la luminosidad.
 =370x)
 =370x)
El color más luminoso es blanco y su saturación es 0. ¡Esto significa que, independientemente del matiz que seleccionemos, si la saturación es 0 y el brillo es 100, el resultado será blanco!
### Usando el brillo
Cuando aumentamos el brillo de un color, aumentamos su luminosidad. Sin embargo, el brillo y la saturación no son opuestos. En el selector de color de la aplicación Figma, es notable que el brillo y la saturación se mueven en diferentes ejes (echa un vistazo a la imagen a continuación).
 =500x)
El blanco y el negro no son exactamente opuestos. El negro aparece cuando el brillo es 0, pero cuando el brillo es 100, pueden suceder dos cosas:
- Cuando nos acercamos a 100 en saturación, aumenta la intensidad del color.
- Cuando nos acercamos a 0 en saturación, nos acercamos al blanco porque se reduce la intensidad del color.
:::warning
⬆️ Para aumentar la luminosidad, podemos:
- Aumentar el brillo
- Disminuir la saturación
- Mover el matiz hacia el máximo de luminosidad más cercano (gráfico de matiz-luminosidad)
⬇️ Para disminuir la luminosidad, podemos:
- Disminuir el brillo
- Aumentar la saturación
- Mover el matiz hacia el mínimo de luminosidad más cercano
:::
# Selección de colores primarios/secundarios
Ahora que hemos aprendido a usar el color para crear o arreglar el contraste, es hora de definir nuestros propios colores.
### Selección de un color de marca primario
Por lo general, nuestro logotipo definirá cuál es nuestro color primario (piense en Airbnb, Twitter o Facebook, por ejemplo).
 =100x) =250x)
 =100x)  =250x)
Hay cinco temas diferentes a considerar al definir nuestro color de marca principal:
### 1) No elijas la opción de color obvia
Si nuestra marca es ecológica, tal vez el verde no sea el mejor color. Si nuestros usuarios son mujeres, no deberíamos seleccionar un tono rosado. Nuestra marca debe destacar. Usar los mismos colores que utilizan otras empresas no nos ayudará a destacar. Por ejemplo, [Semplice](https://www.semplice.com/) usa negro y amarillo para una plataforma de diseño.
 =400x)
### 2) No busques colores cambiando los valores del selector de colores
Ya conocemos el poder de los mood boards, ¡utilicémoslos!
 =400x)
### 3) El diseño es un ejercicio de resolución de problemas
¿Podemos explicar por qué nuestro color elegido es el mejor?
 =400x)
### 4) Explora diferentes colores o gradientes
No tenemos que seleccionar solo un tono para nuestra marca. Podemos explorar diferentes colores o incluso gradientes. Google es un gran ejemplo de esto.
 =400x)
 =400x)
### 5) Los colores son subjetivos
No deberíamos elegir colores basados en gráficos psicológicos de colores. La inspiración y cómo una cierta combinación nos hace sentir es un enfoque mejor.
### Elegir un color de marca secundario
Hay dos colores secundarios diferentes, funcionales y no funcionales. Un mensaje de error solo tiene una función funcional, no apoya a la marca de ninguna manera. Los colores no funcionales son colores que apoyan a la marca.
Ambos colores deben apoyar al primario y tener coherencia entre ellos. El proceso de selección de colores no es solo elegir una paleta de Adobe Color. Es más bien un proceso iterativo ajustando los colores para encontrar **aquellos que funcionan**.
## Elegir colores funcionales
> Ejemplo de Bootstrap
>
- Mensajes de error: los mensajes de error no siempre deben ser rojos. Sí, el rojo es el color más utilizado para los errores. Si nuestro color principal es un color similar al rojo, debemos tener cuidado porque no queremos que nuestro color de marca se asocie con mensajes de error.
 =400x)
- Colores de advertencia: el amarillo es uno de los colores con más luminosidad y con un fondo blanco, será ilegible. Una forma de arreglarlo es ajustar su brillo o, aún mejor, empujarlo hacia un poco de rojo.
- Validación o "buenos mensajes": aquí podemos usar colores verdes o azules. Estos colores pueden parecer muy diferentes cuando los cambiamos un poco.
No hay un color predeterminado para usar en colores secundarios funcionales. Solo considere que los colores deben coincidir con nuestro color principal.
### Elegir colores no funcionales
### No te quedes con los ajustes preestablecidos
Casi todos los programas que usamos nos darán automáticamente colores preestablecidos. Debemos evitarlos y explorar el color por nuestra cuenta. Para hacer eso:
- Selecciona un color que te guste: si comienzas con más de uno, tendrás más dificultades para encontrar la armonía entre tus colores.
- Guarda tus esquemas de color: si encuentras un esquema de color que te gusta, probablemente te será útil más adelante.
- La práctica hace la perfección: cuanto más juegues con el color y practiques el diseño, mejor te volverás. Nadie crea su obra maestra la primera vez.
## Hay diferentes enfoques que podemos tomar para elegir nuestros colores secundarios.
### 1. **Monocromático:**
Los diseños monocromáticos están compuestos de varios tonos del mismo color. Por ejemplo, una gama de azules que varían de claro a oscuro.
 =210x)
##  =200x)
- **Efecto:** Pulido, sutil y conservador. Fácil de manejar y siempre se ve equilibrado y atractivo.
- **Cómo usarlos:** El color principal puede integrarse con colores neutros como el negro, el blanco o el gris. Sin embargo, puede ser difícil cuando se usa este esquema, resaltar los elementos más importantes. Para contrarrestar esto, utiliza tonos, sombras y tonos del color clave para mejorar el esquema.
- **Consejo:** Los esquemas monocromáticos no suelen "destacarse", por lo que si buscas un esquema de color brillante y llamativo, piensa en un esquema diferente o agrega un "toque de color" estratégicamente. (es decir, Qatar utiliza un esquema monocromático, pero agrega amarillo con moderación para hacer que los precios se destaquen)
 =300x)
---
### 2. **Análogo:**
Tonos que están uno al lado del otro en la rueda de colores. Los esquemas de color análogos se encuentran a menudo en la naturaleza y son armónicos y agradables a la vista.
 =200x)
##  =200x)
- **Efecto:** Bajo contraste, suave. Se combinan bien y crean diseños serenos y cómodos.
- **Cómo usarlos:** Se utilizan mejor cuando todos los elementos deben combinarse bien en lugar de cuando hay una necesidad de alto contraste.
- **Consejo:** Un enfoque de alto contraste es elegir un color para dominar y un segundo para apoyar. El tercer color se usa junto con negro, blanco o gris como acento.
 =300x)
---
### 3. **Complementario:**
Opuestos en la rueda de colores, como rojo/verde o azul/naranja.
##  =200x)
- **Efecto:** Aspecto vibrante. Alto contraste y alta intensidad.
- **Cómo usarlos:** Difícil de usar en grandes dosis, pero funcionan bien cuando se quiere que algo se destaque. Este esquema de color debe manejarse bien para que no sea chocante, utiliza tonos y sombras para equilibrar la intensidad del contraste entre los colores complementarios. Lo mejor es utilizar un color predominantemente y utilizar el segundo color como acento.
- **Consejo:** Usa un color más claro para el fondo para equilibrar la intensidad de esta paleta.
 =300x)
### 4. **Complementario dividido:**
Cualquier color en la rueda de color más los dos que están a los lados de su complemento. El esquema de color complementario dividido es una variación del esquema de color complementario.
##  =300x)
- **Efecto:** Esto crea una paleta de colores más matizada que el esquema de colores complementarios, mientras se retienen los beneficios de los colores contrastantes. (tiene menos tensión)
- **Cómo usarlos:** El esquema de color complementario dividido a menudo es una buena opción para principiantes porque generalmente funciona bien (normalmente no hay choques). Elija un color y hágalo el color dominante en su paleta.
 =300x)
- **Consejo:** El aspecto positivo y negativo del modelo de color complementario dividido es que se pueden usar dos colores en el esquema y obtener un excelente contraste... pero eso también significa que puede ser difícil encontrar el equilibrio adecuado entre los colores. Como resultado, es posible que tenga que jugar un poco más con este para encontrar la combinación correcta de contraste.
---
### 5. **Tríada:**
Cualquier tres colores que estén equidistantes en la rueda de color.
##  =300x)
- **Efecto:** Estos esquemas de colores tienden a ser bastante vibrantes, incluso si usas versiones pálidas o insaturadas de tus tonos.
- **Cómo usarlos:** Los colores deben estar cuidadosamente equilibrados. Deja que un color domine y usa los otros dos como acentos. Al cambiar la intensidad de los colores en el diseño, puedes resaltar puntos importantes y conclusiones. Para subordinar algunos de tus colores en un esquema tríada, puedes elegir un color dominante y usar los otros con moderación, o simplemente subordinar los otros dos colores eligiendo un matiz más suave.
- **Consejo:** ¡Esta es también una gran paleta cuando deseas codificar por color diferentes tareas/categorías para separarlas visualmente =300x)
---
### 6) **Tetradic/ Complementario doble:**
Trabajar con un Tetrad rectangular significa que eliges un rectángulo de cuatro colores en la rueda de color básica. Eso significa que siempre estás trabajando con **dos pares de colores complementarios**.
=500x)
- **Efecto:** Muy llamativo, pero puede ser aún más difícil de aplicar que un par de colores complementarios ya que más colores son más difíciles de equilibrar.
- **Cómo usarlos:** Elija uno de los cuatro para que sea el color dominante y use los otros como colores de acento para categorizar la información. Ajusta la saturación, el valor, etc. de algunos o todos los colores para que funcionen bien en diferentes partes de tu diseño como el texto y el fondo.
- **Consejo:** Es más fácil de manejar si eliges dos pares complementarios adyacentes, como en el gráfico de arriba.
 =300x)
## Gray, el color más importante
El ojo humano es capaz de distinguir alrededor de 500 tonos de gris. Dependiendo de la intensidad del color, se han cargado con varios significados. La amplia gama de tonos grises y sus efectos asociados nos permiten afirmar que este color es uno de los más **versátiles e impredecibles**.
En el diseño web, el gris es el único color que puede ir bien con cualquier otra combinación de colores. Es sutil y discreto, por lo que es una gran herramienta para crear la *sensación* en tus diseños.
> [name=Página de aterrizaje de Wonderland]
>
Un tono de gris adecuado señalará el contenido y hará que el diseño sea completo. Un sitio web nunca se verá elegante, si lo haces en un solo tono de gris. Debes hacer una composición de grises y hacerlo sabiamente.
Otro uso para el gris es en los menús de navegación. Puedes basar tu diseño en imágenes y luego un panel de menú en el lado izquierdo en un gris neutro será un pico de elegancia. Una caja de búsqueda con un campo gris es algo muy común para muchos proyectos web también.
## Contenido de texto y negro puro
El negro puro es un color muy poco natural. No existe en la vida real. Como ya discutimos, nuestro objetivo es proporcionar una interfaz natural que se vea familiar y haga sentir cómodo al usuario.
Cuando escribimos contenido, nuestro primer impulso podría ser seleccionar un negro puro para la tipografía. Sin embargo, esto podría verse como demasiado pesado. Lo que hacen los diseñadores es asignar un gris muy oscuro (o uno muy claro si el fondo es oscuro) para que el texto sea más legible y atractivo para el usuario.
Echa un vistazo a estos ejemplos:
Aunque el contraste no es del 100%, el texto casi negro se ve un poco mejor, más integrado con el diseño.
## Cómo lo hace Facebook:
Aunque el ejemplo anterior es mejor, aún podemos mejorarlo.
:::info
**Ejercicio de clase:** ¿Te has fijado cómo funciona el famoso azul de Facebook?
##
---
Aunque el color que la gente asocia más a Facebook es el azul de Facebook, el promedio general de todos los colores utilizados por Facebook es en realidad gris.
*Abre tu medidor digital y echa un vistazo al gris en toda la pantalla*. Esos colores grises están realmente teñidos con un poco del azul de Facebook. Esto ayuda a que el diseño sea consistente y crea la "sensación" de la aplicación.
:::
## Solo un poco de color
El gris plano no es natural ni interesante. La técnica de *Solo un poco de color* consiste en crear grises enriquecidos coherentes con nuestros colores de marca. Las interfaces creadas con esta técnica se ven limpias. El gris proporciona una sensación y una atmósfera muy sutiles pero poderosas en toda la aplicación.
:::success
**Ejercicio de clase:**
:::
1. Abre Figma y agrega cualquier Artboard.
2. Agrega un encabezado, un título y algún texto. Si lo deseas, agrega más elementos como tarjetas.
3. Rellena el encabezado con un color seleccionado. Cambia el selector RGB predeterminado en la sección de relleno a HSB.
4. Toma nota del tono que estás seleccionando.
5. Selecciona el título. Figma creará el texto en negro puro por defecto.
6. Cambia el color a tu color de marca seleccionado, el del encabezado.
 =700x)
---
1. Cambia la saturación (S) y el brillo (B) a cero.
---
:eyes: *Aunque el color del texto ahora es gris, el matiz no ha cambiado. El objetivo es agregar saturación hasta que "sientas" el color de la marca.*
---
1. Agrega brillo a tu color hasta que encuentres el tono adecuado de gris. Si tu fondo es claro, el texto debe ser un poco más oscuro para ganar legibilidad. En el ejemplo, agregamos 40 puntos de brillo.
 =700x)
---
1. ¡Comienza la diversión! Lentamente, agrega saturación. El objetivo es **empezar a percibir una parte del tinte proveniente del gris sin cambiar el gris al color.**
 =700x)
:heavy_check_mark: ¡Ahora tu título muestra un gris enriquecido y elegante! ¡Esta técnica se puede aplicar a colores cálidos o fríos!
:::success
:ok_hand: **Consejo profesional:** Al seleccionar este o cualquier otro gris y cambiar la opacidad del color, puedes crear diferentes niveles de visibilidad para dibujar o desviar la atención de un elemento.
:::
## Ajuste
Los niveles de visibilidad provienen del contraste entre el fondo y el elemento. El negro es el color menos brillante y el blanco es el color más brillante. Aunque no parezca natural, entre ellos existe el mayor contraste posible.
Los elementos más importantes deben ser muy visibles. Los elementos menos importantes deben ser menos visibles pero aún así encontrarlos. Tenemos muchas oportunidades para jugar con tonos de gris.
¿Qué pasa si tenemos dos grises muy similares? ¿Cómo podemos mejorar este contraste? Echemos un vistazo a la interfaz del reloj a continuación.
 =300x)
En el ejemplo anterior, el brillo del fondo está establecido en 94 (casi blanco) y tiene dos elementos principales.
- El encabezado con un fondo blanco puro.
- La caja de la hora con un fondo blanco puro.
La diferencia entre la hora y el fondo y el encabezado y el fondo es notable.
Agregamos un borde muy ligero con un poco de sombra para mejorar el borde y definir el área del elemento. Veamos cómo se ve el encabezado con este estilo:
 =300x)
## Selección de colores
Para el diseño visual, el color es una parte muy importante del proceso. La selección de colores para un producto puede ser uno de los pasos más emocionantes en el diseño de la IU. Aunque parezca uno de los aspectos más "artísticos" del diseño, el diseño en realidad no se trata de arte sino de resolver problemas.
:::success
:ok_hand: **Consejo profesional:** Usas colores para resolver problemas, no solo para que se vea bien. En lugar de pensar en seleccionar una paleta de colores, encuentra colores que te ayuden a resolver problemas.
:::
## Interfaces oscuras
Las interfaces oscuras son aquellas en las que, en lugar de tener un fondo blanco y elementos oscuros, tienes un fondo oscuro y elementos claros.
La capacidad de crear interfaces oscuras es una buena habilidad para tener porque algunas aplicaciones funcionan mejor con fondos oscuros.
> [name=Tubik Studio]
>
## Beneficios de las interfaces oscuras
- Es una configuración más flexible
- Proporcionan estilo y elegancia
- Pueden agregar una sensación de misterio a la aplicación
- Disfrutan de un campo más amplio de uso de contraste
- Es más fácil de mantener la jerarquía visual
---
## Cuándo usar interfaces oscuras
Las interfaces oscuras van bien cuando tenemos imágenes hermosas e importantes o muchos gráficos. Su estado de ánimo le presta una atmósfera teatral.
Si tienes mucho texto, será más difícil leerlo en una interfaz oscura. Sin embargo, puedes reducir la opacidad del texto en el fondo o agregar espaciado entre las líneas entre el texto.
> [name=Tubik Studio]
>
## Consejos para diseñar interfaces oscuras
Cuando creas interfaces oscuras, recuerda:
- Los fondos oscuros absorben parte de la luz de los demás elementos, por lo que debe haber suficiente espacio vacío o "aire" entre los elementos
- La longitud de la línea puede hacer que los bloques de copia sean más legibles y digeribles para los usuarios
- Los problemas del diseño del espacio interlineal, así como la longitud de la línea de texto, pueden tener un gran impacto en la legibilidad, especialmente en un fondo oscuro, por lo que el tamaño del párrafo, el kerning y el interlineado deben pensarse cuidadosamente.
- Oscuro no siempre significa negro, por lo que en cada caso particular de diseño es razonable tomar un tiempo probando diferentes tipos de fondos oscuros y colores para presentar el contenido, estando abiertos a experimentos
- Los tonos, gradientes y brillos pueden influir en la legibilidad
- Las fuentes sin serif suelen ser más legibles, mientras que las fuentes con serif se ven más elegantes. Aplicar este factor en la práctica puede mejorar la legibilidad del contenido.
[fuente: design4users.com](https://design4users.com/2016/12/09/dark-side-of-ui-when-dark-is-good-for-users/)
# Tipografía
## ¿Qué es la tipografía?
> La tipografía (de las raíces griegas τύπος typos = "impresión" y -γραφία -graphia = "escritura") es el arte y técnica de organizar los tipos para hacer el lenguaje escrito legible, legible y atractivo cuando se muestra.
[nombre=Wikipedia]
>
Aunque desde un punto de vista simplista este significado es totalmente preciso, hay mucho más en ello que eso. En el diseño web, las fuentes hablan más alto que las palabras. Esto significa que el diseño de un producto está intrínsecamente unido a su tipografía y funciona como elemento del diseño, la cuadrícula y el aspecto general del diseño.
## Diferencia entre fuentes y tipos de letra
Antes de la aparición de los ordenadores, cuando el texto se imprimía únicamente, la distinción estaba clara: una fuente era un tipo de letra físicamente creado en metal con un tamaño, peso y estilo específicos. No se podía comprar un tipo de letra, se tenía que comprar una fuente de un tipo de letra determinado. El tipo de letra es la *definición*, la fuente es la *instancia*.
> En el ejemplo anterior, Garamond sería el tipo de letra: describía todos los miles de bloques de metal que un impresor podría tener a mano y que habían sido diseñados con los mismos principios básicos de diseño. Una fuente describía un subconjunto de bloques en ese mismo tipo de letra. Cada fuente encarnaba un tamaño y peso particular. Por ejemplo, Garamond en negrita en fuente de 12 puntos se consideraba una fuente diferente que Garamond normal en fuente de 8 puntos.
>
Por lo tanto, un tipo de letra es una familia de fuentes. Y dentro de ese tipo de letra, hay pesos o variaciones variables. Por ejemplo, ligero, negrita, semi-negrita, condensado, cursiva, etc. Cada variación es una fuente diferente.
 =500x)
Hoy en día, la distinción no es tan significativa. Algunos diseñadores intercambian los términos sin distinción. Sin embargo, debes recordar la diferencia para convertirte en un respetable nerd de la tipografía. :guiño:
## Anatomía de un tipo de letra
Para entender cómo se describe un tipo de letra, es necesario aprender algunos términos clave:
### Líneas
Los caracteres alineados se pueden medir por al menos cinco líneas que definen secciones como guías (imagina algo como un pentagrama musical).
Aquí están las cinco líneas:
- La **línea base** es la línea donde se coloca el texto.
- La **altura de mayúscula** marca la parte superior de las letras mayúsculas.
- El **ascendente** muestra donde tocan la parte superior de letras como *h* o *k*.
- La línea **descendente** define dónde terminan los caracteres que van por debajo de la línea de base (como la *g*).
- La **altura x** muestra la altura de las letras minúsculas (excluyendo ascendentes y descendentes).
**Dato curioso: La altura x suele medirse utilizando la altura de la letra minúscula x :sonrisa:**
### Espacio
El espaciado también es muy importante cuando se habla de tipografía. Vamos a ver los términos relacionados con el espaciado.
**Kerning**
El kerning es un ajuste de espaciado de uno o varios pares específicos de caracteres adyacentes. Algunas letras, debido a sus formas, necesitan ser espaciadas de manera diferente. De lo contrario, pueden parecer desagradables y difíciles de leer. Las letras mayúsculas *A* y *V* son el caso típico en el que se necesita esto.
 =250x)
**Tracking**
El tracking es un ajuste uniforme del espacio entre letras completas entre ellas.
:::info
En Figma, puedes ajustar el tracking en el campo de entrada de *spacing* llamado "character".
:::
**Leading**
El leading describe la cantidad de espacio entre líneas de texto. Puedes medir el leading obteniendo la distancia entre dos líneas de base. El leading se llama line-height en CSS.
:::info
En Figma, puedes ajustar el leading en el campo de entrada de *spacing* llamado "line".
:::
 =500x)
## Estilos de tipografía
Existen varios métodos diferentes para clasificar las fuentes y las familias de tipos. Las clasificaciones más comunes son por estilo técnico:
**Serif**
Un tipo de letra con remates o de estilo antiguo debe su nombre a un [remate](https://en.wikipedia.org/wiki/Serif), una pequeña línea vertical u horizontal que sale de los extremos superiores e inferiores de cada letra.
 =250x)
Las fuentes con remates son:
- Formales
- Clásicas
- Fáciles de leer
Las fuentes con remates son abrumadoramente preferidas para textos extensos impresos en libros, periódicos y revistas.
:::success
:capital_abcd: Echa un vistazo a [ejemplos de tipos **serif**](https://en.wikipedia.org/wiki/List_of_serif_typefaces)
:::
**Sans-Serif**
Por otro lado, las formas de letra sin remates no tienen *remates* al final de los trazos. Además, no hay transiciones gruesas/finas en los trazos, tienen el mismo grosor todo el camino.
 =500x)
Las fuentes sin remates se consideran:
- Versátiles
- Modernas
- Fáciles de leer
Las fuentes sin remates se han convertido en las fuentes más prevalentes para mostrar texto en pantallas de ordenador.
:::success
:capital_abcd: Echa un vistazo a [ejemplos de tipos **sans-serif**](https://en.wikipedia.org/wiki/List_of_sans_serif_typefaces)
:::
**Display**
Los tipos de letra de display provienen del estilo de publicidad de principios de 1900. Se crean para vender productos, por lo que tienden a ser muy llamativos. Se utilizan para atraer al lector al texto, crear un ambiente o sentimiento o anunciar información importante.
 =300x)
- Útiles para crear un ambiente o establecer un tono
- Difíciles de leer en grandes cantidades de texto
:::success
:capital_abcd: Echa un vistazo a [ejemplos de tipos **display**](https://en.wikipedia.org/wiki/List_of_display_typefaces)
:::
**Manuscrito**
Los tipos de letra manuscritos son aquellos que parecen escritos a mano. No los usarás mucho porque son difíciles de leer. Sin embargo, pueden ser útiles para establecer un ambiente cercano.
Son
- Muy informales
- Cálidos
- Difíciles de leer
**Monoespaciado**
Las letras y caracteres de tipo monoespaciado ocupan cada uno la misma cantidad de espacio horizontal.
Son muy comunes en los primeros ordenadores y terminales informáticos, debido a las limitaciones de capacidad gráfica.
:::success
:capital_abcd: Echa un vistazo a [ejemplos de tipos **monoespaciados**](https://en.wikipedia.org/wiki/List_of_monospace_typefaces)
:::
### El mensaje está en el medio
Un gran ejemplo de la influencia que puede tener la tipografía es mirar el mismo texto con diferentes tipos de letra.
Fíjate cómo la tipografía puede definir y alterar el mensaje.
### Fuentes de trabajo
Este es el argot tipográfico para una fuente que puede servir para cualquier propósito. Estas fuentes funcionan bien como encabezados, texto corporal, tablas de números, lo que sea. Por lo general, estas fuentes también tienen múltiples pesos como ligero, normal, negrita y extra negrita.
El proceso de elegir una fuente se simplifica drásticamente al tener algunas fuentes de trabajo para elegir. Algunas fuentes no pueden funcionar en diferentes situaciones. Por ejemplo, una fuente de escritura a mano no sería una buena elección para un párrafo de texto. Las fuentes de trabajo pueden funcionar en cualquier situación.
Dos ejemplos de fuentes de trabajo son *Avenir Next* y *Freight*.
## La importancia de la tipografía en la interfaz de usuario
Como el texto es uno de los elementos más prevalentes en una interfaz de usuario, es extremadamente importante saber cómo elegir las fuentes adecuadas.
La tipografía se trata de:
- Equilibrio
- Posicionamiento
- Jerarquía
- Estructura
### Entonces, ¿por dónde empezamos al elegir una fuente?
Lo principal que se busca en una tipografía es la legibilidad. Necesitamos usar fuentes que cooperen en lugar de resistir la voluntad del usuario de interactuar con el producto.
Elija una fuente que permita a un usuario leer fácilmente el contenido, completar formularios y seguir instrucciones.
### Una vez que tenemos la fuente, ¿qué más hay que hacer?
Elegir la fuente es la base para una buena tipografía. Sin embargo, es solo una pequeña parte del trabajo. La habilidad principal de la tipografía es más acerca de estilizar el texto para que puedas crear jerarquía visual y un diseño que sea fácil de escanear, donde diferentes elementos tipográficos sostengan su propio terreno entre sí.
## Elegir Fuentes
### Colocación
Al elegir una fuente, una de las cosas principales a considerar es dónde se usará la fuente.
- **Fuentes para el cuerpo**
- Párrafos
- **Fuentes para los títulos**
- Solo un par de palabras o unas pocas líneas como máximo
- **Fuentes para los elementos de la interfaz de usuario**
- Menús
- Enlaces "leer más"
- Botones
- Etiquetas
### Fuentes para el cuerpo
Las fuentes para el cuerpo se utilizan en párrafos y contenido. Esto es en lo que las personas pasan la mayor parte del tiempo mirando. También se usan en tamaños pequeños y, por lo tanto, tienen más restricciones.
:::warning
:exclamation: Si solo va a usar una fuente para toda su interfaz de usuario, debe asegurarse de que funcione bien como fuente para el cuerpo.
:::
### Cómo elegir una fuente de texto para el cuerpo:
:key: **Busque: buena legibilidad y facilidad de lectura en tamaños pequeños**
:+1: Regla general: Al buscar una fuente para el cuerpo, desea buscar fuentes donde:
- La **altura-x es más alta** en lugar de más baja.
La altura-x más alta significa que los caracteres serán más grandes, incluso en tamaños de fuente pequeños. Estas fuentes también tendrán más espacio entre sí, lo que es excelente para la legibilidad.
- El **contrafuerte** o la apertura es más abierta que cerrada.
Los contrafuertes abiertos, especialmente en letras como C, hacen que la fuente sea más legible. Cuanto más abierto sea el contrafuerte, es probable que la altura-x sea mayor para acomodarlo.
Para el texto del cuerpo, desea adherirse a fuentes sans serif y serif. Las serifs de zapato pueden ser decorativas y, por lo tanto, distraídas, recomendamos alejarse de ellas para los párrafos.
:::success
Cualquier fuente que tenga la palabra **TEXTO** en el título está diseñada específicamente para ser una fuente para el cuerpo.
:::
:::warning
Las fuentes de serifa de zapato pueden funcionar ocasionalmente, pero en su mayor parte, son demasiado decorativas y no muy legibles. Son mejores para los títulos.
:::
:::danger
No use fuentes que sean *manuscritas* o *monoespaciadas*, o demasiado decorativas. Estas fuentes no están diseñadas para ser fuentes para el cuerpo. Será tedioso leer un párrafo completo con una fuente de espacio único.
:::
### Acerca de las fuentes de serif
:exclamation: No todas las fuentes de serif están destinadas a ser fuentes para el cuerpo. La distinción está en las *serifas*.
- Cuando las serifas son muy delgadas, los detalles se pierden en tamaños pequeños y la fuente se representa mal.
- Estos tipos de fuentes serif se ven bonitos y elegantes cuando se muestran grandes, como en un título, pero no son ideales para la legibilidad en tamaños pequeños.
- Cuando las serifas son gruesas, puede ver los detalles en tamaños pequeños, por lo que se representan bien.
### Buenas fuentes de texto para el cuerpo
### Futura, Avenir (que proviene de Futura)
Avenir es una de las mejores fuentes *gratuitas* de sans-serif para el texto del cuerpo porque tiene una sensación espaciada.
### Proxima Nova
Actualmente, una de las fuentes *pagas* más populares debido a su variedad y gran legibilidad.
Estas dos fuentes son populares porque tienen una altura-x alta
- Altura-x alta, buena cantidad de espaciado, contrafuertes muy abiertos.
- También tiene muchos pesos, lo que permite flexibilidad de jerarquía, opciones de tamaño y color.
### Montserrat
Si su proyecto no tiene presupuesto para una fuente paga, Montserrat es una **alternativa gratuita** a Proxima Nova. Tiene líneas más gruesas, así que use el peso ligero como el peso normal.
:::success
Consejo profesional: Type Wolf es un excelente sitio para encontrar alternativas de fuentes y buenas opciones de combinación de fuentes. Enumera **Proxima Nova** en las *fuentes similares* a la derecha. Si se desplaza hacia abajo, también le ofrece opciones de combinación de fuentes.
:::
:::info
:book: Algunos recursos que enumeran buenas fuentes para el cuerpo:
- [9 Legible Paragraph Fonts para la Web](https://signaltower.co/legible-paragraph-fonts-for-the-web/)
- [Diez familias de fuentes diseñadas para funcionar de manera confiable en 9px a 18px](http://www.fontbureau.com/ReadingEdge/)
- [10 mejores fuentes web de Google para párrafos](http://www.webtutorialplus.com/10-best-google-web-fonts-for-paragraphs/)
:::
## Fuentes de títulos
¡Las fuentes de títulos son donde puedes divertirte! Debido a que se usan con moderación y en tamaños grandes. Hay mucho menos preocupación por la legibilidad y, por lo tanto, hay menos restricciones. **Aquí es donde tienes la mayor oportunidad en la tipografía para jugar con la marca y la identidad visual que estás buscando.**
### Cómo elegir una fuente de título:
Puedes hacer una de dos cosas:
1. Elija algo que comunique su marca
2. Elija algo limpio y simple
- Elija formas de letras que se vean interesantes
- Elija un peso interesante
- Ya sea DELGADO o NEGRO / GRUESO
Si buscas una apariencia de marca muy específica, debes listar tus **atributos de marca** que definen tu marca y buscar fuentes que encarnen estas características.
### Elementos de la interfaz de usuario de fuentes
Con las fuentes utilizadas para los elementos generales de la interfaz de usuario como botones, etiquetas y barras de navegación, tienes mucha más libertad en la edición de la fuente. Puedes experimentar usando todas las letras en mayúsculas o agregando espacio entre caracteres. Estas suelen tener una o dos palabras, por lo que puedes usar fuentes que no son muy buenas para el cuerpo de manera muy efectiva aquí.
:::success
Al igual que con las fuentes de títulos, estos elementos tipográficos ofrecen una oportunidad para sugerir la identidad de la marca. Una marca sólida utiliza pequeñas oportunidades como esta para colar su identidad.
:::
### Números:
Si tiene una interfaz de usuario con muchos datos, con tablas o listas de números, debe asegurarse de elegir una fuente en la que los números se alineen bien.
- Elija una fuente donde todos los caracteres numéricos tengan el mismo ancho para que se alineen correctamente.
### Directrices generales
1. Mantenlo **simple**
- La mejor manera de hacer que algo se destaque, de manera positiva, es NO elegir una fuente loca.
- Si elige una fuente loca, atenúela con algo que tenga una sensación similar pero sea más simple.
2. Manténgase alejado de las fuentes predeterminadas si no desea que su producto parezca demasiado genérico
- Ej: Times, Helvetica
3. Use **contexto** para elegir fuentes de título / pantalla que vayan con su identidad visual.
- Puede leer sobre la historia / fondo de la fuente si busca la fuente en [typewolf.com](http://typewolf.com/).
## Combinación de fuentes
### 1 fuente para todo
La forma más fácil de asegurarse de que sus fuentes coincidan es simplemente elegir una fuente y luego agregar variedad.
Puede agregar variedad cambiando:
- Peso
- Tamaño
- Opacidad
- *Cursiva*
- Color
- MAYÚSCULAS y minúsculas
En el diseño móvil, por ejemplo, la mayoría de los productos eligen una sola fuente. La pantalla es pequeña, no hay mucho espacio para mostrar diferentes fuentes.
:::warning
:warning: Cuando solo tiene 1 tipo de letra, impulsa la marca general
- Elija uno que no tenga demasiada personalidad
- Elija uno que funcione bien en párrafos
:::
Probablemente elegirá entre **Serif** vs **Sans Serif**. Para UI, Sans Serif es más común porque se sienten nuevos y frescos.
### 2 o más fuentes
> -- Erik Kennedy
>
Básicamente hay dos formas principales en las que puede querer combinar sus fuentes.
### 1. Orgánicamente
Elija esto si va por un aspecto utilitario y limpio, ligeramente marcado. En este caso, se preocupará más por que las fuentes coincidan. Cuando tiene 2 tipos de letra, ambos están impulsando la marca, por lo que debe asegurarse de que se complementen entre sí.
### 2. Marcado
Elija esto si se preocupa más por comunicar visualmente de qué se trata la marca y retratar una cierta personalidad. En este caso, las fuentes no necesitan coincidir tanto, siempre y cuando apoyen la marca.
### Consejos + trucos para la combinación de fuentes
- Combina una fuente de serif con una fuente sans-serif
- Use tipos de letra de la misma familia
- ej: Adele + Adele Sans (una tiene serifs, la otra no, pero la forma es esencialmente la misma, por lo que definitivamente coincide bien)
- Opción C: Use fuentes del mismo diseñador
- Google Fonts: busque el nombre del diseñador o fundador, es posible que descubra que tienen fuentes similares
- Opción D: combina dos fuentes que coincidan estéticamente
- Esto será más una elección personal
:::success
:+1: **Regla general:** Si tiene un tipo de letra muy neutral para el cuerpo, será más fácil combinar una fuente con más personalidad en el título.
:::
### Encontrar fuentes que se combinen entre sí
### La técnica de superposición
Esta es una técnica desarrollada por [Erik Kennedy](https://medium.com/@erikdkennedy) y la usa principalmente para diseños de marca bajos / medios.
1. Encuentra una fuente de serif y una fuente sans-serif
2. Escriba la palabra "guantes de mano" en ambas fuentes
- Las palabras *guantes de mano* tienen una buena variedad de caracteres para que realmente puedas ver si las fuentes coinciden
1. Alinearlos en Figma y ajustar su tamaño
1. Asegurarse de que sean similares.
- La *estructura base* es similar entre ambos
- Altura x
- Qué tan abiertos/cerrados son los contadores
- La forma/el ancho de las letras deberían ser similares
:::warning
:exclamation: Al elegir una fuente, ten cuidado con los tipos de letra que no ofrecen opciones de estilo *itálico* o **negrita**. Descubrir esto a mitad de tu diseño y tener que elegir una nueva fuente para todo puede ser una gran pérdida de tiempo.
:::
## Establecer un sistema
Al igual que todo en el diseño de UI, el uso de la tipografía debe ser sistemático.
Asegúrate de mantener :key: la consistencia en todo tu uso y estilo de fuentes.
- ¿Qué fuentes estás usando para qué?
- Especifica:
- Fuente
- Ubicación
- Título
- Cuerpo
- Otra ubicación
- Peso
- Opacidad
## Estilizando texto
¿Grande o pequeño? ¿Negrita o delgado? La mayoría de estas cosas serán obvias, pero cuando las pones en práctica no es algo fácil de hacer.
El objetivo es lograr un nivel de equilibrio entre elementos para crear jerarquía y, en última instancia, un diseño que sea fácil de escanear. La clave es decidir cuidadosamente cómo se destacan los elementos en relación entre sí.
### Estilo descendente
Querrás crear una jerarquía visual entre el título, subtítulo y cuerpo. Hay algunas formas diferentes de hacer esto.
- opacidad más baja
- MAYÚSCULAS vs. minúsculas
- grande vs. pequeño
- Espaciado
- Ponlo en una línea separada
:::warning
Probablemente querrás evitar el texto colorido. Hay muchos problemas de usabilidad que surgen con esto.
Mantén el texto en escala de grises, en su lugar utiliza colores para los elementos de la UI.
:::
### Estilizando tablas
- El encabezado debe distinguirse de la tabla.
- Para los campos numéricos, asegúrate de usar una fuente que tenga números que se alineen bien.
- Para la usabilidad, es importante poder distinguir las filas entre sí.
- Asegúrate de que esté en línea con el resto de la UI.
### Usando cursiva
La cursiva es *neutralmente llamativa*
- No atrae demasiada atención, pero aún así hace que las cosas sean interesantes.
- Esta es una buena manera de agregar variedad a tu estilo de texto sin tener que lidiar con la jerarquía y el equilibrio.
- Bueno cuando estás tratando de lograr un aspecto *Refinado*.
### Subrayando texto
En la UI, cualquier cosa con un subrayado se interpreta como un enlace. Tiene una affordance inherente y la gente podría intentar hacer clic en él, solo para descubrir que no es clickeable (lo que podrían interpretar como roto).
**NO SUBRAYES** el texto solo para estilizarlo, a menos que en realidad sea un enlace.
Al decidir sobre el color del enlace, los diseñadores deben considerar el contraste de colores y tener en cuenta a los usuarios con daltonismo. Para acomodar a todos los usuarios, los enlaces deben tener un contraste de 3:1 con el texto negro.
### Texto llamativo editorial
No siempre tendrás que usar estos como diseñador de UI, pero si estás trabajando en un proyecto impulsado por el contenido (tiene un blog o una tonelada de artículos), es importante saber acerca de estos elementos de estilo llamativos.
### Citas textuales
Se utilizan para llamar tu atención mientras escaneas el artículo con la intención de atraerte para que lo leas.
- Usa el texto como un elemento visual: agrega una regla horizontal con el mismo grosor y color que el texto en sí.
- Considera la "grilla" al colocarlos.
### Lede / Run-in
Las primeras palabras o la primera oración se estilizan de manera diferente para llamar la atención. Por lo general, se usan mayúsculas (o una fuente de pequeñas mayúsculas) y una fuente diferente.
### Letra capital
Las letras capitales se utilizan típicamente en documentos al comienzo de una sección o capítulo. Es una letra mayúscula grande al comienzo de un párrafo o bloque de texto que tiene la profundidad de dos o más líneas de texto normal. Trata de apuntar a un espacio igual debajo y a la derecha de la letra capital.
### Resumen
Un resumen de una sección/artículo por encima del resto del artículo.
- Por lo general, se escribe en un estilo diferente al del resto del artículo
- Fuente más pequeña, fuente diferente, quizás cursiva, pero con menos opacidad
### Superposición de texto en imágenes
[Este artículo](https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-2-430de537ba96) tiene algunos consejos y trucos geniales para trabajar con texto e imágenes.
## Recursos adicionales
- [Serif Vs. Sans: The Final Battle](https://www.webdesignerdepot.com/2013/03/serif-vs-sans-the-final-battle/)
- [Instalación de fuentes](https://www.fontshop.com/content/installation-guide)
- Artículo: [Tipografía en el diseño de UI y cómo elegir la fuente adecuada](https://line25.com/articles/typography-ui-design-choose-proper-font)
- [Google Fonts](https://fonts.google.com/) - El repositorio más grande de fuentes completamente gratis en el mundo
- [Typekit](https://typekit.com/) - El servicio de fuentes de Adobe, disponible por menos de $5/mes o gratis con una suscripción de una sola aplicación de Adobe Creative Cloud ($19.99/mes a partir de septiembre de 2016)
- [WhatFont](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm) - Una impresionante extensión de Chrome para identificar las fuentes utilizadas en los sitios web que visitas en Chrome
- [Guía definitiva de Typewolf para fuentes gratuitas](https://www.typewolf.com/free-fonts) - El mejor recurso tipográfico pago que recomendaría para el diseñador principiante. Jeremiah Shoaf, AKA "Typewolf", ha creado una guía increíble que enumera la fuente gratuita más similar a 600 fuentes profesionales
Sign in with Wallet
Connect another wallet