Curso:

Curso de Diseño de
interfaz de usuario (UI)
Módulo 1:

Vinculando disciplinas de diseño

Unidad 1:

Asentando las bases: Fundamentos del

diseño
Presentación

En esta unidad vamos a conocer sobre qué se trata el Diseño de Interfaz (UI), cuál es
el rol que cumple el Diseñador UI y cómo se diferencia con el Diseñador Ux y de
Marca. También vamos a repasar conceptos sobre los fundamentos del diseño:
línea, punto, plano, espacio y volumen, texturas.
Objetivos
Que los participantes logren…

● Saber diferenciar los conceptos UX y UI y su interrelación.

● Entender el rol que cumple un Diseñador de Interfaz
● Incorporar los conceptos básicos sobre elementos de diseño para luego
implementarlos.
Bloques temáticos
1. Diseño UI: ¿Qué es y qué no es el diseño UI?
2. Diseño y comunicación: El rol del diseñador, la comunicación visual,
significación
3. Fundamentos del diseño: Forma, Espacio, Composición, Significado, Imagen,
Texturas, Tramas.
 1. Diseño UI: ¿Qué es y qué no es el
diseño UI?

UI vs UX
Muchas veces se suelen confundir estos 2 términos o también se piensa que
trabajan por separado y no se relacionan. A continuación vamos a definir por
separado cada concepto:

UX
Cuando hablamos de Diseño de Experiencia de Usuario, nos referimos al proceso
de investigación y análisis para identificar qué tan fácil es utilizar un
producto/servicio, ya sea una aplicación o una página web. El objetivo de este
proceso es permitir que una gran mayoría de personas, que tengan interacción con
nuestro producto, tenga la facilidad de comprender el funcionamiento del mismo
con la menor dificultad posible y con una experiencia satisfactoria.

Dentro de este análisis de experiencia se tienen en cuenta las emociones,

sentimientos del usuario, se mide el nivel de satisfacción a la hora de utilizar nuestro
producto. Parte de estos análisis obtiene resultados a través de diferentes métodos
de investigación como encuestas, entrevistas, focus group, talleres, etc.
A partir de este proceso de observación del usuario se pueden resolver los
problemas que se presenten a la hora de poner a prueba el funcionamiento de
nuestro servicio/producto.

UI
El Diseñador de Interfaz de Usuario es quien se encarga de “maquillar” la superficie
de un producto digital. La interfaz es el intermediario entre el usuario y la
funcionalidad de un producto, es todo lo que experimentamos a través de nuestros
ojos. Podemos decir que la funcionalidad es lo que no podemos ver a simple vista y
la interfaz es su representación gráfica. El papel que tiene el Diseñador UI es el de
crear interfaces utilizando recursos gráficos, tipografías, formas, animaciones,
microinteracciones, que permitan que el usuario navegue/explore de manera fácil y
sin trabas o dificultades.

Fuente: https://cremicro.com/ux-ve-ui-nedir-ui-ve-ux-design-nasil-yapilir/
Entonces...
Si bien estos conceptos son 2 cosas distintas, no pueden prescindir uno del otro,
no pueden trabajar por separado completamente. Sin un buen análisis de
experiencia de usuario, el diseño de la interfaz se vería afectada ya que no tiene un
buen respaldo sobre investigación de usuario para poder definir decisiones de
diseño. Igualmente si una interfaz está mal diseñada, la experiencia de usuario
tendría un impacto negativo, totalmente obstaculizada y dañada.
 2. Diseño y comunicación: El rol del
diseñador, la comunicación visual,
significación
El Diseñador UI es quien se encarga de diseñar la interfaz de un producto digital. Su
papel no es simplemente hacer que se “vea bonito” sino que tiene un objetivo más
allá. Lo importante a la hora de usar una interfaz, es que el usuario está enfocado en
realizar y completar tareas con el mínimo esfuerzo. No importa si el diseño es
estéticamente correcto, sino que ayude a resolver problemas de manera eficaz y
eficientemente.

Su rol es absorber toda la información que el equipo de UX ya se encargó de

analizar e investigar para poder plasmarlo hacia el público objetivo de forma
correcta.

UI vs Branding
Un Diseñador Gráfico o de Marca, también tiene su rol de investigador, ya que para
poder satisfacer las necesidades de sus clientes, debe conocer con profundidad sus
problemas de comunicación visual, así como también indagar sobre las
características que lo diferencian por sobre otros competidores para poder
resaltarlas a través de una buena campaña de diseño, donde se definen los
elementos de marca incluyendo logo, paleta de color, tipografías, texturas, etc. Lo
recomendable es que haya un diseñador de marca que trabaje también en conjunto
con el diseñador UI ya que puede facilitarle parte del estudio del cliente y también
refuerza el trabajo de diseño de interfaz para que sea aún más reconocible.

¡No me hagas pensar!

Este es un principio que el experto en Ux Steve Krug desarrolla a lo largo de su
libro con el mismo nombre.

“Se trata del principio fundamental, el voto de calidad primordial a la hora de decidir si
algo en el diseño web funciona o no. Si sólo tiene capacidad en su mente para una
única norma de usabilidad, quédese con ella”.

Como Diseñador de Interfaz, sabemos que es importante que el usuario complete

sus tareas de manera rápida y fácil. Lo que Steve recomienda con este principio es
que tengamos en cuenta algunos aspectos a la hora de crear una interfaz:

● Poder “entenderla”, esto quiere decir saber qué es y cómo usarla.

● No utilizar “nombres ingeniosos” para los elementos, por ejemplo utilizar
nombres producidos por departamentos de marketing ya que esto
simplemente aumenta la carga cognitiva.
● Ser claros con los vínculos externos “el usuario nunca debería emplear ni una
milésima de segundo en pensar en cosas como si se puede o no hacer clic en
esto o aquello”.

Lo que ocurre cuando estamos usando una aplicación o web es que los
interrogantes que van surgiendo aumentan el volumen de trabajo cognitivo del
usuario, lo que hace que el foco de su atención hacia la tarea que tiene que
implementar se desvirtúe. Las distracciones pueden ser leves, pero se acumulan y
hacen que el usuario termine abandonando a mitad de camino.

La apariencia de las cosas, sus nombres bien elegidos, la disposición de la página y

los textos pequeños y cuidadosamente elaborados, tienen que funcionar bien en
conjunto para conseguir un reconocimiento casi instantáneo.
3. Fundamentos del diseño: Forma,
Espacio, Composición, Significado, Color,
Tipografía, Imagen, Texturas, Tramas.

Las formas son un elemento esencial a la hora de comunicar, por esto mismo es
sumamente importante saber escoger las formas indicadas para el propósito de
comunicación y trabajarlas con el mayor cuidado posible, para poder transmitir un
mensaje de forma sencilla y concisa.

Se van a desenvolver y van a cumplir su función en determinado espacio, que

puede ser bidimensional o tridimensional, por ejemplo el espacio puede ser una
diapositiva de una presentación, una landing page, una tarjeta de presentación, una
animación, packaging, entre otros.

Comenzaremos hablando de los elementos básicos del diseño y luego

profundizaremos en aspectos como su distribución en el espacio.

La forma
El punto, línea y plano son las bases del diseño. A partir de estos elementos o
formas, el diseñador va a poder crear diferentes piezas como imágenes, iconos,
texturas, patrones, diapositivas, animaciones, sistemas tipográficos, entre otras
muchas posibilidades. A continuación, dejaremos algunos ejemplos donde veremos
la interacción de estos tres elementos para crear diferentes piezas.
 Fuente: Whirley Birdie https://whirlybirdie.com/ (Visitalo para una mejor experiencia)

El ejemplo dado es una web de profesionales y diseñadores, que promocionan la

creación de una nueva tipografía. Dentro de la web se pueden ver reflejados la
interacción de los elementos básicos de diseño, para transmitir diferentes datos y
diferentes niveles de lectura. También patrones a través de la repetición de estos
elementos.
 Fuente:
https://www.behance.net/gallery/121895511/Circle-of-life-landing-page?tracking_source=search_projects_appr
eciations%7Cweb%20design

Como en el caso anterior, este sitio web combina tanto líneas, puntos y planos para
la composición de página.

Punto
Este elemento puede considerarse la unidad mínima en diseño que no posee masa.
Puede ser desde una indefensa molécula o una partícula como también penetrar
como una bala y transmitir concentración de fuerza.

El punto puede confundirse con los demás elementos o bien expresar su propia
identidad, esto puede lograrse a través de su escala posición y relación con el
espacio.

Si utilizamos varios puntos ordenados en cierta dirección podemos obtener una

línea. En cambio, si utilizamos una gran cantidad de ellos podemos crear una
textura, una forma o un plano. Siempre dependerá del tratamiento que le demos a
este elemento según su finalidad. También crea sombras a través de su repetición
con diferentes tonalidades de grises. Si lo llevamos a términos tipográficos,
podríamos decir que el punto es la marca final de una oración.

Fuente:
https://www.behance.net/gallery/131510599/koncept-lendinga-dlja-logomashiny-veb-dizajner?tracking_sourc
e=search_projects_appreciations%7Cweb%20design

Tal como lo definimos, el punto es una fracción de una unidad completa en el

diseño, esto no quiere decir que sea literalmente con forma circular, las misceláneas
pueden comportarse como tal, teniendo en cuenta su relación con el espacio para
reforzar las composiciones gráficas y darles más dinamismo al diseño.
 Fuente:
https://www.behance.net/gallery/110794773/Visual-identity-homebaseio?tracking_source=search_projects_ap
preciations%7Cweb%20design
 El punto en la tipografía puede simbolizar la finalización de una oración. Fuente:
https://www.behance.net/gallery/20315389/New-identity-for-the-city-of-Porto?tracking_source=search_project
s_recommended%7Cdot

A través de la forma podemos generar un punto de atención, ayudándolo con la dotación de un color vibrante y
usándolo cómo único color. Fuente:
https://www.behance.net/gallery/58116279/Onet?tracking_source=search_projects_recommended%7Cdot

Línea
Podemos definir a la línea como una serie infinita de puntos o el punto en
movimiento o también podría ser la conexión entre dos puntos. A diferencia del
punto, la línea puede representar movimiento y dirección, ya que por sí misma
comunica una personalidad dinámica. La línea puede recorrer diferentes lugares de
la composición mientras que el punto son lugares en los que se concentra.
La línea contiene longitud pero carece de ancho. Su grosor puede variar al igual
que su recorrido, este puede ser recto, curvo, continuo o trazos. Su apariencia visual
también puede cambiar combinándose con texturas.

Las líneas pueden funcionar para separar y unir espacios y objetos, encerrar, marcar
una intersección, entre otros. Cuando vemos líneas determinando el borde de un
objeto se crea un plano, también cuando la línea aumenta su grosor esta adquiere
más peso haciendo que se convierta en un plano. Puedo obtener volúmenes, planos
y texturas a través de la repetición de las líneas.

Cuando definimos el elemento del punto pudimos hacer una comparación con la
tipografía diciendo que el punto formaba parte del final de una oración. En el caso
de la línea podemos decir que está presente tanto implícita como explícitamente,
los caracteres se agrupan en línea de texto y por otro lado en las columnas se
alinean sobre una línea que puede orientar su alineación a la izquierda, a la derecha
o justificado. Podemos observar en las composiciones tipográficas que siempre
están determinados y regidos en el orden de una línea.

En este proyecto podemos ver que tanto los gráficos cómo la tipografía están creadas a base de líneas
gestuales. Fuente: Awwwards. https://www.awwwards.com/sites/nordy-portrait
 Fuente: https://illustrators.pl/

Podemos reforzar un concepto a través del tratamiento de la línea, en este caso no es necesario cerrar la forma
para entender de que se trata y a su vez transmite dinamismo y fluidez. Fuente:
https://dribbble.com/shots/14174810-Fox-mark/attachments/5805796?mode=media
Con esta forma podemos también transmitir datos más duros cómo es en el caso del diseño de información.
Fuente: https://www.relajaelcoco.com/works/bbva

Plano
El plano representa una superficie plana que se extiende a lo ancho y alto. A medida
que vemos estas formas básicas, podemos decir que se van conformando una de la
otra. En el caso de la línea, está conformada por puntos y en el caso del plano
podemos decir que está conformado por una línea en movimiento o una línea de un
ancho considerable o una línea que determina los bordes de un elemento.

Un plano no tiene porqué ser totalmente sólido y liso sino que puede estar
perforado, puede contener texturas, también puede ser opaco o transparente.
Volviendo a la comparación de estas formas básicas con la tipografía, podríamos
decir que el texto es un plano que está constituido por líneas y puntos tipográficos,
El plano tipográfico puede ser la mancha tipográfica: esta puede ser densa o abierta.
Esto se logra a través de la configuración de ciertos aspectos de la tipografía que
veremos en la siguiente unidad.

Uso de planos de color. Fuente:

https://www.behance.net/gallery/122362151/Kim-Encel-consultant-website?tracking_source=search_projects_a
ppreciations%7Cweb%20design
 Uso de planos de color. Fuente:
https://www.behance.net/gallery/122362151/Kim-Encel-consultant-website?tracking_source=search_projects_a
ppreciations%7Cweb%20design
 Fuente:
https://www.behance.net/gallery/77939963/Web-site-Komod?tracking_source=search_projects_appreciations
%7Cweb%20design

Espacio y volumen
El volumen podemos definirlo como un objeto que contiene altura, ancho y
profundidad, este objeto estaría ocupando un lugar en el espacio tridimensional. A
través del uso de la línea podemos crear una perspectiva que simula distorsiones
ópticas, de manera que podamos tratar los objetos haciendo que los más cercanos
parezcan mucho más grande con respecto a los lejanos, que van haciéndose
mucho más pequeños a medida que se van alejando.
Además de la fotografía los mockups son una excelente forma de representación de masa y volumen a través
de herramientas de prototipado 3D. Proyectos:
https://www.behance.net/gallery/121963627/Box-Mockups?tracking_source=search_projects_recommended%
7Cmockups
https://www.behance.net/gallery/113612175/Free-Coffee-Cup-Mockups?tracking_source=search_projects_reco
mmended%7Cmockups

Fuente:
https://www.behance.net/gallery/127232665/Web-Design-artareastudio?tracking_source=search_projects_app
reciations%7Cweb%20design
Tratamiento de la forma
Ritmo y equilibrio
El equilibrio es una condición sumamente importante para el diseño ya que éste
ocupa un lugar primordial en nuestra cultura. A su vez ayudan a posicionar los
elementos en el espacio y al recorrido visual de las piezas. El equilibrio se logra a
través del tratamiento de los elementos en su peso y distribución de manera
uniforme y proporcional. El equilibrio no se logra solamente a través de un diseño
simétrico, sino que también se puede lograr en diseños asimétricos a través del
tratamiento de los contrastes entre los tamaños texturas, valores, colores y formas
para compensar o subrayar el peso de un objeto. De esta forma lograr un sentido
dinámico del equilibrio.

El ritmo es útil para la construcción de imágenes estáticas y las que no para

otorgarle movimiento que poseen duración y secuenciación. Sirve para crear
composiciones atractivas, con interrupción buscando un cambio y variación que
rompa esta secuencia.

Henry para lograr composiciones estables y con capacidad de sorprender (esta

oración no la entiendo jaja)

Vamos a ver algunos ejemplos de ritmo y equilibrio

Simetría

La composición se establece a través de un eje común donde se ve reflejado en

ambos lados iguales de dicho eje. Pueden ser simétricas de izquierda a derecha y
de arriba abajo. Muchos de los elementos naturales poseen de esta estructura
simétrica donde se ve una distribución uniforme y equilibrada.
En la simetría las contraformas son iguales lo que hace que la composición sea
estática ya que están en reposo los elementos Esto hace que el espectador con un
simple vistazo logré reconocer el material completo. En algunos casos puede hacer
que pierda el interés porque no aparece un punto de atención dónde va a cambiar
su composición, el caso de la simetría podemos lograr mayor participación con un
nivel de exigencia más alto de parte del espectador ya que son más atractivas
visualmente.

Asimetría

En este caso los elementos se van colocando de forma orgánica trabajando las
contraformas para lograr un equilibrio y un peso visual indicado.

Fuente: https://imborrable.com/blog/principios-diseno-grafico/

Simetría interrumpida

En el libro de Ellen Lupton, Diseño Gráfico: Nuevos fundamentos, podemos

visualizar el ejemplo de la diseñadora Katrina Keane donde rompe la simetría en
forma de cruz. A través de esta esta pieza gráfica comunica el malestar político que
existe entre las facciones ugandesa por la crisis del VIH sida, el texto narrativo
alterna entre la claridad y la oscuridad hasta que tiene un estallido dónde comunica
crisis caos y a su vez ayuda al equilibrio dentro de la pieza y punto de atención.
Ritmo y tiempo

Este concepto no suena familiar ya que lo conocemos gracias al sonido y la música.

Este recurso es muy utilizado por los diseñadores de animaciones, donde tienen el
desafío de componer simultáneamente los ritmos auditivos y visuales. El diseñador
emplea formas visuales similares al sonido a través de repeticiones, variandolos con
su tamaño e intensidad para dar una sensación de sorpresa.

Repetición y variación
Estas características logran una atracción visual muy fuerte gracias a la
yuxtaposición, que son dadas en la vida a tal punto que la belleza nace a través de
la interacción entre ambas.

Fuente: https://imborrable.com/blog/principios-diseno-grafico/

Escala
La escala se puede considerar de manera objetiva o subjetiva. En el primer caso, se
trata de las dimensiones del objeto de forma literal. La representación de esto
sucede normalmente en los mapas donde tienen escalas exactas, por ejemplo, en
cuanto a la forma subjetiva las calabazas hacen referencia al tamaño del objeto
según la sensación que produce sobre la persona que lo está viendo.

Cuando trabajamos, normalmente podemos llegar a tener un diseño monótono y

estático ya que tiene falta de contraste. El buen uso de la escala nos puede dar una
composición atractiva y sumamente rica gráficamente. Algunos proyectos, por
ejemplo el diseño de marca, son creados para ser reproducidos en diferentes
escalas. Por ejemplo, uno tiene que ser representado de forma visual que sea
legible tanto en una lapicera como en una gigantografía, para este caso se crean
diferentes versiones para diferentes soportes, desde los más chicos a los más
grandes. También hay diseños que son creados solamente para un soporte. Sea cual
sea el caso, y el tamaño final, siempre los trabajos tienen que tener un sentido de la
escala. A veces la escala puede depender del contexto, en el podemos tener la
dificultad de que esté a medida, de que sea grande y el diseño pueda perder
calidad. En cambio, tenemos la herramienta de los vectores gráficos que son
escalables y ahí se puede aumentar a grandes escalas sin perder la calidad. Hay
que tener muchísimo cuidado al escalar objetos y tipografías, al hacerlo tenemos
que realizarlo de forma proporcional y no distorsionada. Normalmente en los
programas de Adobe, por ejemplo, se utiliza la tecla shift para escalar de manera
proporcional. Hay que tener sumamente cuidado con distorsionar las tipografías.

La escala siempre es relativa. Esto va a depender según el tamaño, el color y la

ubicación de los elementos que lo rodean. Gracias al contraste de diferentes
escalas podemos lograr tensión, profundidad y movimiento. Normalmente las
piezas pequeñas tienden a alejarse y las más grandes a acercarse.

Fuente: https://imborrable.com/blog/principios-diseno-grafico/

Texturas
La textura es un elemento importante en la vida del ser humano, es la funcionalidad
principal de nuestro sentido del tacto. A través de la textura podemos deducir
ciertas cuestiones, también es la explicación a varias cuestiones de la naturaleza.
Por ejemplo la de proteger una flor, un piso uniforme nos indica que una calle tiene
un tránsito seguro. En cambio, cuando tenemos objetos como los reconocidos
serruchos. nos advierten cuando debemos prestar atención en la calle. El tacto es
un sentido fundamental en todos los humanos y principal en el caso de las personas
no videntes si hablamos de diseño inclusivo. La textura es un factor fundamental ya
que a través de esta, las personas no videntes pueden leer a través del sistema
braille y con este lenguaje pueden reconocer diferentes elementos a través del
tacto.

Los grandes contrastes entre texturas nos pueden hacer una composición
visualmente atractiva. Normalmente la textura de los elementos de diseño tienen
una relación con su función visual y su objetivo. En física, por ejemplo, las texturas
físicas van a afectar al tacto y a su aspecto, mientras que otro tipo de textura puede
afectarles visualmente. Por ejemplo, en superficies lisas o brillantes van a reflejar la
luz de manera diferente a cómo lo hace una textura blanda o una pedregosa.
Algunas texturas se pueden crear a través de efectos ópticos.

La textura va a darle mayor nivel de detalle a un objeto o imagen, ya que va a

proporcionar una cualidad distintiva a su superficie y va a recompensar la mirada de
quien la observa con mayor nivel de detalle. Podemos tener texturas de alto nivel de
contraste y otras de bajo contraste, que serían texturas más armónicas y sutiles.
Contraponiendo un nivel alto de textura y un nivel bajo de textura.
 https://thevirtualinstructor.com/blog/how-to-draw-texture

Color
En esta ocasión nos enfocaremos en ver cómo el color aporta a la forma en cuanto
a la composición gráfica, luego en el siguiente tema veremos cuestiones más
técnicas.

El color puede ayudarnos a resaltar elementos y a la vez hacer que otros sean más
útiles. Si utilizamos bien el color, este nos puede ayudar a diferenciar, destacar,
ocultar y establecer conexiones entre elementos.

Podemos diseñar a través del color haciendo una codificación de color. Por
ejemplo, en muchas identidades de marca el color puede adoptar diferentes
funciones en un proyecto o también en un servicio. En este tipo de proyectos se
suelen utilizar paletas cromáticas acotadas y explotarlas al máximo en cuanto al
significado de cada una. A través del color podemos comunicar etapas, funciones,
mensajes, diferenciar elementos, jerarquizar, entre otros. También podemos
servirnos del color para crear un énfasis rompiendo el ritmo visual que se viene
estableciendo.

Fuente: https://imborrable.com/blog/principios-diseno-grafico/
Color
Teoría básica del color
En 1666, sir Isaac Newton descubrió que, al atravesar un prisma, la luz se
descompone en lo que se ha llamado el espectro de colores: rojo, naranja, amarillo,
verde, azul y violeta. Newton los organizó en torno a un círculo, muy parecido al que
aún hoy en día utilizan los artistas para relacionar los colores.

Los colores próximos en círculo cromático o rueda son análogos. Los colores
análogos tienen una temperatura cromática relacionada. Dos colores situados frente
a frente en el círculo son complementarios. No comparten ningún elemento y tienen
temperaturas cromáticas opuestas: cálido contra frío.

La rueda de colores o círculo cromático

A continuación vamos a ver el “mapa básico” muestra las relaciones entre los
colores.

Colores primarios
El rojo, el amarillo y el azul son colores puros: esto quiere
decir no se pueden obtener mezclando otros colores. Los
demás colores del círculo son el resultado de la mezcla
entre estos tres colores primarios.
Colores secundarios
Naranja, violeta y verde son el resultado de cada una de las
mezclas de dos colores primarios.

Colores terciarios
Colores como el rojo anaranjado y amarillo verdoso se obtienen
a partir de la mezcla de un color primario y otro secundario.

Complementarios
Rojo - verde
Azul - naranja
Amarillo - violeta

Estos colores están enfrentados en el círculo cromático.

Colores análogos
Los esquemas de color que se construyen a partir de tonos que ocupan posiciones
adyacentes en el círculo cromático, presentan diferencias cromáticas mínimas.

Aspectos de color
Conocer los diferentes atributos del color nos ayudará a elegir y saber combinar
cromáticamente, de manera que nos permita resaltar las formas y/o elementos que
queramos distinguir y concentrar la atención.
Por ejemplo: podemos utilizar colores de valores muy distintos para crear ciertas
composiciones con un contraste marcado, cambiar el tono de un color a través de
su tinte o sombra, etc. A continuación vamos a detallar cada uno de estos aspectos.

Tono
El tono, es el lugar que ocupa un color dentro del espectro. Es su cualidad de color
puro. Llamamos a los colores por su tono ya sea: rojo, verde, azul, amarillo, etc.

ej: tono violeta

Intensidad
La intensidad de un color es su grado de luminosidad. Mediante la adición de
blanco o negro, o un color se torna más apagado, de igual manera que si se
neutraliza hacia el gris (reduciendo su saturación). Podríamos desglosar la
intensidad dentro de los siguientes 4 ítems.
● Valor
Es el término que se refiere a si un color es más claro o más oscuro. También
se le suele llamar brillo. El valor de un color es independiente de su tono o de
su intensidad.

● Sombra
La sombra es una variación del tono producida por el agregado de negro.

● Tinte
Es una variación del tono producido por el agregado de blanco.

● Saturación
La saturación indica la pureza relativa de un color a medida que disminuye o
aumenta su contenido de gris.

Sombra Tinte Saturación

Modelos de color
Como se mencionó anteriormente, en 1666 Isaac Newton con tan sólo 24 años
utilizó un prisma para descomponer un rayo de luz blanca y mostrar las longitudes
de onda que la componían. Esto ya estaba bastante visto, pero Newton fue un paso
más allá y, al hacerlo, cambió para siempre nuestra forma de concebir el color:
utilizó otro prisma para componer de vuelta las longitudes de onda y reunirlas de
nuevo.

Se consideraba que la luz pura blanca del Sol era un regalo de Dios y por tanto era
impensable que pudiese descomponerse o peor aún, crearse mezclando colores.

Durante la Edad Media, mezclar colores era un asunto tabú y se creía que iba en
contra del orden natural de las cosas. Incluso en los tiempos de Newton, la idea de
que una mezcla de colores pudiera tener como resultado el blanco era un anatema.

Fuente: https://spaceplace.nasa.gov/blue-sky/sp/

Cualquiera que haya tenido acceso a un juego de pinturas habrá jugado y probado
mezclar todos los colores. Cuantos más colores se mezclan más te acercas al negro,
no al blanco.
La ciencia de la óptica tiene explicación de por qué resulta el blanco al mezclar
luces de colores, mientras que si los que se mezclan son pinturas/pigmentos de
distintos colores se obtiene el negro.

Fundamentalmente hay 2 tipos de mezcla de color: aditiva y sustractiva. Con la

mezcla aditiva, las distintas longitudes de onda de la luz se combinan para crear
distintos colores y cuando se mezclan todas ellas el resultado es la luz blanca. Esto
es lo que Newton demostró con sus prismas.

Ocurre lo contrario cuando lo que se mezclan son pinturas. Como cada pigmento
solo refleja de vuelta al ojo de una proporción de la luz disponible, cuando se
combinan varias, son más las longitudes de onda que se sustraen. Si se mezclan
suficientes colores, se refleja una parte muy pequeña del espectro visible y, por
tanto, la mezcla se percibe como negra o casi negra.

mezcla aditiva mezcla sustractiva

Fuente: https://dqfilms.blogspot.com/2019/03/teoria-del-color-mezclas-aditiva-y.html
Los métodos de impresión domésticos y offset utilizan un sistema sustractivo
denominado CMYK. Con las iniciales anglosajonas CMYK (cian, magenta, yellow
amarillo y black negro) se designa a los “colores de proceso” y el proceso de
impresión a todos color se denomina cuatricromía.

RGB es el sistema aditivo utilizado para diseñar en pantalla. Combina porcentajes de

luz roja, verde y azul para generar los colores del espectro. Cuando se mezclan con
intensidad plena se obtiene blanco.

Vibración y valor
Cuando dos colores poseen valores muy próximos, se produce un efecto de
intensificación: en el cuadrado de la izquierda, el verde parece luminoso e inestable.
Sin embargo, cuando la diferencia es acotada, como con el amarillo, el verde parece
más oscuro
Tipografía
Las letras son entidades con personalidad propia que no podemos alterar de
manera caprichosa porque son un bien social con belleza y practicidad. La escritura
se basa en símbolos anclados en la historia y en la sociedad.
Las letras son imágenes de cosas: en los albores del nacimiento de la escritura, las
letras fueron imágenes de cosas. Aunque esto se ha perdido debido a la abstracción
de los signos de los antiguos alfabetos, la letra sigue siendo una imagen.

Las letras son productos históricos: cada uno de los diseños de letras que se han
realizado a lo largo de la historia viven pegados al tiempo en que nacieron y se
desarrollaron. Las letras nos hablan de ese tiempo y reflejan el espíritu de su época
y el de los hombres que las crearon.

Las letras son representaciones fonéticas: las letras que forman una palabra nos
remiten a imágenes mentales de lo que esas palabras representan en el lenguaje
verbal (significante y significado).

Las letras son símbolos retóricos: inevitablemente, cuando componemos un texto

llenamos la página de sensaciones y emociones asociadas a las letras que usamos.
Estas sensaciones pueden tener un carácter racional o una implicación tecnológica
e incluso política, religiosa o geográfica. No existe una tipografía neutra. Todas están
llenas de simbolismo. Este es el extraordinario poder de la tipografía: su fuerza
simbólica.

Los caracteres pueden transmitir no sólo información, sino también múltiples

emociones y sensaciones. La elección de un tipo de letra nunca es arbitraria y
requiere un ejercicio de reflexión que siempre tiene en su punto de mira al lector
receptor y los conceptos e ideas que se le quieren transmitir.

La expresión puede alterarse con un simple cambio tipográfico. Un mismo texto

compuesto con diferentes tipos produce sensaciones diferentes, aunque diga
exactamente lo mismo.
En la antigüedad los tipos se crearon en base a las formas de la caligrafía Cómo
imágenes manufacturadas que fueron diseñadas para reproducirse continuamente
en la historia la tipografía podemos ver una constante tensión entre lo manual y la
máquina.

El signo tipográfico
El lenguaje está compuesto de signos percibidos por los sentidos que siempre hay
que considerar y entender bajo estos tres aspectos:

1. manifiestan la situación o la intención del emisor (expresión, síntoma)

2. influyen en el receptor (apelación, señal)
3. transmiten información sobre objetos y hechos (representación, símbolo).

El signo es una referencia intuitiva a un objeto (lo de-signado). Los signos pueden
ser oídos (lenguaje hablado, música) o vistos (escritura, gestos, señales marítimas),
tactados (golpes, braille) u olidos (señales olfatorias con las que marca un animal su
terreno).

En este contexto, el problema del reconocimiento de caracteres tipográficos incluye

entonces el de la percepción de la forma, la memoria y el aprendizaje, y postula la
diferencia entre ver y reconocer, subrayando la necesidad de establecer jerarquías
dentro de las representaciones visuales, con el fin de resolver satisfactoriamente el
cúmulo de señales que llegan al sistema visual y perceptivo.

Vamos entonces a referirnos al tema que nos compete, el signo tipográfico y su

entorno. Los elementos de un texto deben articularse adecuadamente para
transmitir una información. Entre los componentes de un escrito se establecen
relaciones espaciales y funcionales que no solo determinan el aspecto general de la
pieza, sino que condicionan la transmisión del contenido.

Para que las letras porten un contenido semántico, deben agruparse en palabras;
estas, constituyen la entidad significativa de cada lengua. La combinación de letras
en palabras, de palabras en una oración y de las oraciones en un texto conforman el
lenguaje. El registro gráfico de ese lenguaje es la escritura.
Otra forma de aportar contenido semántico a las letras es otorgándoles estilos y
formas, los que podemos encontrar en las distintas familias tipográficas que han
sido diseñadas a través de nuestra historia.
Partes de la Tipografía
Una familia tipográfica se construye entre cinco líneas principales: línea de base
(donde descansan los caracteres), altura de x, línea de las mayúsculas y la de las
ascendentes. Finalmente, por debajo está la línea de los descendentes.

Entonces tenemos:

La línea de base es la línea sobre la que se apoya la altura de x.

La altura de x (línea media) es la altura de los signos de caja baja excluyendo los
ascendentes y los descendentes.

La altura de las mayúsculas es la altura de los signos de caja alta, tomada desde la
línea de base hasta la parte superior del carácter.

La alineación superior o altura de las ascendentes es la distancia medida desde la

línea media hasta la línea de los ascendentes.

La línea de los descendentes también conocida como alineación superior, es la

distancia medida desde la línea base hasta la línea que marca la terminación de los
trazos descendentes. Esta línea no tiene por qué guardar una relación de simetría
con la alineación superior.

Las letras están conformadas por distintas formas las cuales se entrelazan y se unen
manteniendo un estilo visual.
Las palabras utilizadas para definir las diferentes partes de las letras son una serie
de términos originados hace mucho tiempo y que son similares a las palabras que
son usadas para describir las partes del cuerpo humano.

No existe una unanimidad en cuanto a estos términos pero los siguientes son los
más consensuados:

Fuente:

http://www.hemisferiodigital.es/psicologia-de-la-tipografia/

Serif y Sans Serif

Elegir la familia tipográfica indicada, nos ayudará a poder tener un gran manejo
sobre la sensación que queremos transmitir, nos ayuda a controlar los efectos
funcionales, estéticos y psicológicos.

Si observamos con detenimiento podemos ver varias características diferentes en

cada familia, podemos ver algunas más mecánicas, otras más armónicas,
geométricas, etc.
Escoger el tipo adecuado depende del contenido del texto, el tono que se le va a
dar, el público al que está dirigido.

Dentro de la tipografía se presentan 2 grandes grupos, las familias tipográficas que

presentan serifas o remates y las que no presentan ningún tipo de terminación.

Se entiende por serifas, o remates, las pequeñas líneas que se encuentran en las
terminaciones de las letras, principalmente en los trazos verticales o diagonales.

La tipografía serif puede parecer autoritativa, profesional y sugiere el peso de la

historia o la experiencia. También se considera que dan cierto carácter elegante.

Fuente:
https://www.behance.net/gallery/106212351/NewYork-Typeface-FREE?tracking_source=search_projects_recom
mended%7Cserif

Las letras sans serif o de palo seco, son aquellas que no llevan ningún tipo de
terminación. Se considera el tipo más moderno. En la actualidad en la que nos
desprendemos de lo accesorio y solemos quedarnos solo con lo funcional. Un tipo
minimalista que puede parecer que da lugar a una lectura más clara y legible. Se
suele pensar que tiene un aire más juvenil.

Fuente:
https://www.behance.net/gallery/65264871/Cunia-Free-Font-Typeface?tracking_source=search_projects_reco
mmended%7Csans%20serif

Hay que tener cuidado con la elección de tipografías que llamen demasiado la
atención antes que el lector pueda llegar a las palabras, porque esto crea
inconvenientes en su lectura.

Familias tipográficas
Los impresores ya en el siglo XVI comenzaron a organizar los tipos romanos y
cursivos en familias, esto se formalizó a principios del siglo XX.
Dentro de una familia tipográfica podemos contar con diferentes variables como la
redonda, cursiva, versalitas y negritas. Actualmente las familias tipográficas, gracias
al avance de la tecnología, cuentan con gran cantidad de variables no solamente de
peso, sino también en su estructura. Algunas familias tienen sus variables en Sans
serif y Serif con el objetivo de que el diseñador que las utilice pueda trabajar con
mayor libertad obteniendo resultados creativos logrando una buena combinación.

Todas las familias tipográficas suelen incluir un alfabeto mayúscula, minúscula,

números y símbolos.

Tipografías distintivas
Utilizar de manera inteligente las variables tipográficas nos ayudará a darle
expresividad al texto escrito. Podemos expresar a través de la tipografía cambios de
entonación y diferentes sensaciones tal como si fuera una voz.

El uso de una sola distinción es suficiente para darle énfasis al texto hay que evitar la
superposición necesarias de tipografías distintivas.

Romana
Esta variable es también reconocida como Regular o redonda, donde se visualiza la
tipografía versión estándar de la fuente. La cursiva y La Romana fueron variables
fijadas a partir de la invención de los tipos móviles.
 Fuente:
https://www.behance.net/gallery/71413011/TT-Firs-Neue?tracking_source=search_projects_recommended%7C
roman,%20italic,%20small%20caps

Cursiva
Esta variante es utilizada para dar énfasis gracias a sus formas y trazos distintos que
emulan la calidez del trazo humano caligráfico. Hoy en día la conocemos con el
nombre de itálica y la utilizamos como un indicador diacrítico.

La palabra cursiva deriva de “curro” que significa correr en latín esto deriva en una
de sus principales características, ya que históricamente la itálica nace de la
escritura manual donde vemos un trazo más rápido y práctico.

Algunos caracteres cambian cuando se pasan a cursiva. las letras son más estrecha
también si las comparamos con las romanas y permiten ahorrar espacio en la
escritura
Es importante diferenciar que las cursivas no son letras inclinadas, sino que a veces
los programas inclinan forzosamente de manera mecánica, haciendo que dé como
resultado algo poco natural. Las verdaderas cursivas podemos notar que algunos
de sus caracteres varían en esta versión cómo por ejemplo la letra “a” cuando pasa
de romana a cursiva varía su estructura “a”, en cambio en la tipografía inclinada no
sucede esto, a continuación dejamos un ejemplo.

Tipografía inclinada. Fuente: https://www.myfonts.com/fonts/type-type/tt-norms/

Variable itálica. Fuente https://www.myfonts.com/fonts/ellenluff/larken/

Tampoco debemos confundir la escritura cursiva con los tipos Script que también
están basados en la escritura a mano pero no tienen la esencia de carácter diacrítico
como la cursiva.

Fuente: https://www.myfonts.com/fonts/cititype/the-pallace/

Variable de peso
Podemos encontrar en la familia diferentes variantes de peso que van desde muy
fino hasta sumamente ancho. También, estas variantes de peso contienen su versión
en cursiva.

En la Revolución Industrial nace esta la variable tipográfica bold (o negrita) como

respuesta a la necesidad de generar publicidad con letras más llamativas.

No es recomendable utilizar una tipografía negrita para texto corrido ya que esto
complejiza su lectura, al aumentar el trazo de la tipografía los blancos internos de la
letra disminuyen haciendo que su lectura sea más compleja.
Como vimos en la unidad 2 cuando hablamos de Ux Writing, el uso de tipografía
negrita ayuda a la localización de datos específicos, ya que el usuario con un simple
escaneo puede localizar estas palabras de forma rápida. Algunos diarios emplean la
tipografía negrita como elemento de resumen.

Fuente:https://www.behance.net/gallery/71413011/TT-Firs-Neue?tracking_source=search_projects_recommended%7Croman,%20italic,%20small
%20caps

Mayúsculas
Aunque no parezca la minúscula caja baja y la mayúscula caja alta son también
variantes tipográficas. Según cuál de estas dos utilicemos va a evocar diferentes
sensaciones y actitudes respecto a lo que se está leyendo.

La variable de caja alta nos ayuda a destacar mensajes ya que genera mayor
extensión e impacto pero tenemos que tener cuidado con las percepciones
psicológicas que transmite el uso de mayúscula, su uso excesivo puede resultar
molesta y requerir una carga cognitiva grande a leer.
 Fuente: https://www.myfonts.com/fonts/font-fabric/mont/

Versalitas
Esta variable tiene las características de las letras mayúsculas, pero con el tamaño
con la altura de X de las letras de caja baja. Esto da como resultado que se integran
muchísimo más en la línea de texto, es una buena alternativa para destacar EN
LUGAR DE USAR MAYÚSCULAS YA QUE ROMPEN EL BLOQUE DE TEXTO y las
versalitas ayudan a que la mancha sea un poco más homogénea.

Lo que suele suceder con las palabras en caja alta, en un párrafo donde se viene
utilizando tipografía en caja baja, es que además de romper completamente la
mancha tipográfica también dificulta la lectura del usuario. Hay varios estudios
realizados donde dicen que las mayúsculas requieren una mayor carga cognitiva al
leer, ya que nosotros podemos descifrar las palabras por las ascendentes y
descendentes de las letras, y como sabemos las mayúsculas carecen de esta. Esta
variable es una excelente opción para hacer un contraste en cuanto a las formas de
manera armónica y equilibrada.
 Fuente:
https://www.behance.net/gallery/71413011/TT-Firs-Neue?tracking_source=search_projects_recommended%7C
roman,%20italic,%20small%20caps

Números
Existen dos tipos de cifras tenemos por un lado de las cifras capitales y por otro las
cifras elzevirianas o cifras antiguas.

Las capitales tienen una anchura uniforme ya que fueron creadas con el fin de que
se alinean cuando se componen en columnas. Estas cifras tienen la altura de la
letra en caja alta, y da como resultado que al utilizar estos números dentro de un
texto corrido, donde se utiliza caja baja, van a contrastar al igual que las letras
mayúsculas. Estas cifras aparecieron a principios del siglo 20 para responder a las
necesidades del mundo de los negocios.

Las cifras antiguas son similares a las letras en caja baja, estas tienen ascendentes y
descendentes, lo que hace que se adapte más a un texto corrido en caja baja y no
contraste tanto. Cada una de las cifras tienen sus proporciones en ancho y un
espacio determinados a diferencia de las cifras capitales que tenían un ancho
uniforme.
 Fuente:
https://www.behance.net/gallery/68523935/TT-Nooks?tracking_source=search_projects_recommended%7Cro
man,%20italic,%20small%20caps

Fuentes Variables en la web

Las fuentes variables se tratan de archivos de fuentes tipográficas individuales que
pueden comportarse como fuentes múltiples, es decir, que con un único archivo
pueden representar todos los pesos posibles entre el mínimo y el de mayor peso
Una fuente variable es un formato de fuente OpenType que incluye una nueva
tecnología llamada tipografías variables OpenType.
Este tipo de tecnología fue desarrollada en conjunto por Google, Apple, Microsoft y
Adobe. Una fuente variable puede contener el conjunto completo de glifos de una
fuente, o glifos individuales con hasta 64,000 ejes de variación, incluyendo grosor,
ancho, inclinación y, en algunos casos, estilos específicos, como Condensado,
Negrita, etc.

Una fuente variable contiene tres componentes principales:

● Cada archivo de fuente contiene un único conjunto de contornos que forma la

base para la familia de fuentes.
● Un conjunto de ejes de diseño, como peso, ancho, tamaño óptico, para
describir las formas en que varía la familia de fuentes.
● También incluye un conjunto de deltas que describen cómo las formas de
contorno, el interletrado, el posicionamiento de marca y las métricas cambian
en esos ejes.

Las ventajas que presentan este tipo de fuentes es que ofrecen resultados
inmediatos ya que se pueden reflejar simplemente moviendo un control deslizante.
Si estás en vivo con un cliente, es más rápido poder mostrarle otras variables desde
esta herramienta para comparar los efectos en el momento.

Esto da como resultado un mayor control sobre la tipografía y que tenga un aspecto
más personalizado, con la oportunidad de encontrar siempre el peso que estamos
buscando sin estar limitados por la web ya que generalmente tienen un número
tope de pesos para no sobrecargar el sitio. Entre otras ventajas está la facilidad para
modificar estos tipos mediante valores css, reduciendo tiempos de desarrollo.

Permiten una personalización y control mayor sobre la tipografía. No siempre lo

genérico es bueno y la personalización cada vez es más importante. Con esto
tendremos oportunidad de encontrar siempre el peso que necesitemos teniendo así el
control absoluto sobre el diseño tipográfico de nuestra web sin las limitaciones
habituales.
Bibliografía utilizada y sugerida
Libros y otros manuscritos:
Krug, S. No me hagas pensar. Madrid. Anaya. 2016.

Lupton, E. Pensar con tipos. Barcelona. Gustavo Gili. 2011

Lupton, E. Type on screen. Nueva York. Princeton Architectural Press. 2014

Lupton, E., Cole Phillips, J. Diseño Gráfico. Nuevos Fundamentos. Barcelona. Gustavo
Gili. 2016

Norman, D. La psicología de los objetos cotidianos. Bilbao. Nerea. 2010

Santa Maria, J. On Web Typography. Nueva York. A Book Apart. 2014

Samara, T. Los elementos del diseño: Manual de estilo para diseñadores gráficos.
Barcelona. Gustavo Gili. 2018

Weinschenk. S. 100 Cosas más Sobre la Gente que Cada Diseñador Necesita Saber.
Madrid. Anaya Multimedia. 2016
Artículos de revista en formato electrónico:
(2019, 02). Introduction to variable fonts on the web. Web.dev. Obtenido 12, 2021, de
https://web.dev/variable-fonts/

Fuoco, G. (2020, 08). ¿Qué son las fuentes variables? — (Variable Fonts). Gastón
Fuoco. Obtenido 12, 2021, de
https://gfuoco-10743.medium.com/qu%C3%A9-son-las-fuentes-variables-variable-f
onts-4240874b5065

Fussell, G. (2018, 07). What are variable fonts. envatotuts+. Obtenido 12, 2021, de
https://design.tutsplus.com/es/articles/what-are-variable-fonts--cms-31310

Sieira, T. (2018, 03). Las fuentes variables: una tendencia con fuerza este 2018.
Obtenido 12, 2021, de
https://blog.elogia.net/las-fuentes-variables-una-tendencia-con-fuerza-este-2018