DISEÑO UX/UI

Clase 1
Introducción al Diseño
Les damos la bienvenida
Vamos a comenzar a grabar la clase
 Clase 00 Clase 01 Clase 02

Bienvenida Introducción al diseño Imágenes en el diseño

● ¿Qué es Codo a Codo? ● ¿Qué es el diseño? ● Impacto de la imagen

● Carreras IT ● Retórica de la imágen ● Fotografía
● Aula Virtual ● Diseño gráfico y Diseño ● Leyes Compositivas
● Información del curso UX ● Puntos de interés
● Diseño UI ● Composición en el diseño
● Usabilidad ● Imagen en diseño web
● Leyes Gestálticas
● Metodología: Diseño
centrado en el usuario
● Metodología: Design
Thinking
 Ejercicio
Clase 1
Pensar cuales son las similitudes
y diferencias entre:

DIBUJO - DISEÑO - ARTE - ILUSTRACIÓN

Dibujo Diseño Arte Ilustración

Todos estos ejemplos se encuentran en el Instagram: @inkerekes

¿Qué es el diseño?
El diseño es el proceso previo de configuración mental, «pre-figuración», en
la búsqueda de una solución en cualquier campo. Se aplica habitualmente
en disciplinas que requieren creatividad.
El diseño involucra variadas dimensiones que van más allá del aspecto, la
forma y el color, abarcando también la función de un objeto y su interacción
con el usuario.
Durante el proceso se debe tener en cuenta además la funcionalidad, la
operatividad, la eficiencia y la vida útil del objeto del diseño.
Comunicación visual
El emisor se desdobla en dos protagonistas:

○ Aquel que crea el mensaje y necesita transmitirlo (cliente o marca)

○ El diseñador que interviene para hacer que dicho mensaje sea efectivo.

El receptor es el sujeto para quien está destinada la comunicación, un sector de la

sociedad o el público ideal.

EI significado es lo que se desea expresar, es el mensaje. ¿Qué se comunica?

El significante está siempre unido al significado pues la comunicación se produce en el

cruce de ambos. ¿Cómo se comunica?
Comunicación casual y comunicación intencional
En la comunicación casual quien es receptor
interpreta “libremente” la imagen que está
viendo.

En la comunicación intencional existe un

emisor con la intención de que el receptor
interprete un mensaje concreto.
Características del diseñador
Un diseñador es una persona que ha entrenado su creatividad para enfocarla hacia
aspectos más pragmáticos, de manera que pueda ofrecer soluciones adaptadas al
problema que enfrenta.

Utiliza un conjunto de saberes aplicables a diversos campos de trabajo, que se sirven de la

geometría, la aritmética, la lógica, la ilustración, el mercadeo, la sociología o la
informática para un proceso que, fundamentalmente, comprende en las etapas que
figuran a continuación:
Etapas
1. Observación y análisis. Ya que la necesidad del diseño surge de la cotidianidad del
ser humano.

2. Planificación y proyección. Proponiendo un modo de solucionar la necesidad

detectada.

3. Construcción y ejecución. Llevando a la realidad lo proyectado y sometiéndolo a la

prueba de su funcionamiento.
El diseño como forma de comunicar
1. Es una disciplina dedicada a la producción de comunicaciones visuales orientadas a
un público específico.

2. Se encarga de comunicar a través de medios visuales y como finalidad transmitir un

mensaje específico despojado de rasgos personales.

3. El hecho de crear y cumplir con un propósito se centra en: la transformación de una

realidad existente por una deseada.
El diseño como forma de comunicar
4. Los diseños se basan en un mensaje concreto que se quiere transmitir y a partir de
ello obtener una respuesta del público al que está dirigido. Estos afectan el
conocimiento, las actitudes y el comportamiento de la gente.

5. Para poder crear estas piezas de comunicación, el mensaje se tiene que adecuar al
grupo al que se está introduciendo. De esta forma se analiza ampliamente a quién
irá encaminado el mensaje. ¿Qué piensa? ¿Qué hace? ¿Qué ve? ¿Qué siente? ¿En
qué cree?

6. En todo diseño debe haber correlación entre lo que se quiere transmitir y los
elementos utilizados sin resignar su objetivo final sea cual sea.
Tema: Diseño

El diseñador de comunicación visual trabaja en la interpretación, el

ordenamiento y la presentación visual de mensajes. Su sensibilidad
para la forma debe ser paralela a su sensibilidad para el contenido.

Autor/as/es: Frascara
Reglas del diseñador profesional
● El diseñador es un intérprete que ● El diseñador maneja conceptos, códigos
conforma mensajes producidos por y estética para poder enviar mensajes
otras personas. fácilmente comprendidos y absorbidos
por las audiencias a quienes se dirigen.
● El diseñador no adorna, es un
proceso de creación visual con el ● El diseño, por ética, debe tener como fin
propósito de comunicar un mensaje último mejorar y transformar el mundo
específico. donde vivimos.

● El diseño debe ser estético pero ● El diseño forma parte de nuestra vida
también funcional. diaria, estamos rodeados de diseño por
lo tanto debe ser cuidadoso.
La retórica de la imagen
La denotación, es el significado básico de
una palabra, constante, universal, el que una
palabra tiene para todos los conocedores de
una lengua.

Por ejemplo: un cuenco, una bombilla, una

infusión y yerba. Lo denotado sería lo real, lo
objetivo y lo literal, en lo que está de acuerdo
toda la comunidad lingüística, es decir el
significado que le da el diccionario.
La retórica de la imagen
La connotación, son todas aquellas ideas y
asociaciones que se despiertan a la hora de
visualizar un mate.

Por ejemplo: Argentinidad, charlas,

reunión con amigos, campo, Pampa, etc.
Lo connotado son otros significados que
podemos darle a la imagen.

Estas ideas o asociaciones a la imagen del

mate van a depender de quién sea el
observador. De su cultura, entorno, edad,
lugar, educación y muchos factores más.
Diseño gráfico - Diseño UX
El diseño gráfico se trata de la creación y El diseño de experiencia de usuario (UX)
proyección de objetos gráficos: es una disciplina relativamente nueva que
ilustraciones, composiciones, logotipos, utiliza varias premisas y reglas tomadas del
imágenes, tipografías, etc., atendiendo a diseño gráfico, marketing, diseño
aspectos estéticos, comunicacionales y industrial, etc.
simbólicos.
Es una práctica que sirve para diseñar
Esta rama del diseño tiene segmentos centrados en las necesidades de los
aplicados a diversos campos como: el usuarios. La experiencia de usuario es el
diseño editorial, el diseño publicitario, el conjunto de factores relativos a la
diseño corporativo, el diseño web y el interacción del usuario con un
diseño UX/UI. dispositivo, generando como resultado
una percepción positiva o negativa de
esa experiencia y su marca.
Diseño UX facetas
El diseño de experiencia de usuario (UX) es un conjunto de metodologías,
mindsets y procesos, orientados a diseñar un servicio o producto, teniendo en
consideración las necesidades de los usuarios finales (y no de quien está
desarrollando o diseñando).

Las 7 facetas o factores que construyen la experiencia de usuario de Peter

Morville:

Valioso - Útil - Deseable - Accesible - Creíble - Ubicable - Usable

Diseño UI
El diseño de interfaz de usuario (UI) refiere a todo aquello con lo que los
usuarios interactúan de forma directa.

Se trata de lo que vemos y tocamos en una interfaz o un dispositivo, es aquello

que permite interactuar con el producto o servicio.

“Un área híbrida, donde los límites entre diseño gráfico e industrial se
diluyen”

Lev Manovich.
¿Qué es la Usabilidad?
“El atributo de calidad de un producto, que se refiere sencillamente a su
facilidad de uso.
Implica el grado en que el usuario puede explotar o aprovechar la utilidad
de un producto.”

Jakob Nielsen - Padre de la usabilidad.

Características
● Facilidad de aprendizaje ● Eficacia

¿Cuán fácil es llevar a cabo las tareas la ¿Cuántos errores comete el usuario? La
primera vez? gravedad del error, puede recuperarse
fácilmente de esos errores?
● Eficiencia

Una vez que aprendieron el ● Satisfacción

funcionamiento, ¿cuán rápido las realizan? ¿Cuán agradable es usar el producto?
● Cualidad de ser recordado

Si pasan un tiempo sin usarlo,

¿Cuán fácil es que vuelvan a usarlo
eficientemente?
Diseño Centrado en el Usuario
● El DCU comprende una serie de métodos y técnicas para analizar, diseñar y evaluar
hardware y software (interface)

● Tiene un enfoque de diseño cuyo proceso está orientado por la información acerca
de quienes van a hacer uso del producto (usuarios)

● Tener en cuenta: ¿Quién usará el sistema?, ¿qué tareas llevará a cabo con el mismo?

● Un proceso iterativo (cíclico) en el cual diseño y evaluación se incorporan desde la

fase inicial del proyecto y en todas las fases que veremos a continuación:
Fases
1. Análisis. Entendiendo a los usuarios y sus necesidades

2. Diseño. Proyecto una solución que satisfaga las necesidades

3. Validación. Compruebo el valor que estoy agregando a los usuarios

Experiencia casual y experiencia diseñada
En la experiencia casual o accidental es
cuando vemos una comunicación que no
tiene diseño aplicado, probablemente no
fue hecha por un diseñador, y no tiene
criterio visual.

○ Genera confusión y malestar en

el usuario.

En la experiencia diseñada ningún detalle

fue dejado al azar, hay coherencia en sus
elementos, es intuitivo y claro para el
usuario.

○ Genera satisfacción en el
usuario.
¿Qué es Design Thinking?
Design Thinking es una metodología orientada al usuario, que se enfoca en
detectar y entender las necesidades de los mismos, con el objetivo de
generar soluciones innovadoras en un determinado marco de trabajo.
Aquellos productos y servicios diseñados de manera adecuada a través de
este método aportan valor a las personas.

El proceso de Design Thinking se compone de 5 etapas o fases.

Etapas del proceso

EMPATIZAR DEFINIR IDEAR PROTOTIPAR TESTEAR

Etapas del proceso
Empatizar: A través de esta etapa que tiene Prototipar: Damos forma de manera rápida y
como centro la investigación, buscamos simplificada a aquellas ideas que
conocer a nuestros usuarios. Este comienzo se seleccionemos. Al construir prototipos,
basa en comprender sus necesidades. rápidamente obtendremos feedback de
nuestros usuarios para poder realizar cambios y
Definir: Organizamos todo lo que aprendimos
mejoras antes de llegar al resultado final.
de nuestros usuarios y nos quedaremos con lo
que determina el problema central al cual Testear: En esta última etapa, mostramos el
podremos ofrecer soluciones como prototipo diseñado para obtener devoluciones
diseñadores/as. de nuestros usuarios. No estamos vendiendo
Idear: Se trata de "pensar fuera de la caja" para sino aprendiendo del feedback que recibimos.
dar con el mayor número de ideas posibles. Dado que Design Thinking es un proceso
No nos centramos en buscar la idea correcta si iterativo, nos permite volver a las etapas
no en imaginar la mayor cantidad de anteriores para realizar cambios y mejoras en
alternativas. nuestro producto.
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.

Todo en el Aula Virtual.

Muchas gracias por tu atención.
Nos vemos pronto
DISEÑO UX/UI
Clase 2
Imágenes en el diseño
Les damos la bienvenida
Vamos a comenzar a grabar la clase
 Clase 01 Clase 02 Clase 03

Introducción al diseño Imágenes en el diseño Gráfico vectorial vs. Mapa de bits

● ¿Qué es el diseño? ● ¿Qué son? y Diferenciación

● Impacto de la imagen
● Retórica de la imágen ● Resoluciones
● Fotografía Introducción a Adobe
● Diseño gráfico y Diseño UX ●
● Leyes Compositivas Photoshop
● Diseño UI
● Usabilidad ● Puntos de interés ● Formatos de imágenes
● Metodología: Diseño ● Composición en el ● Herramientas iniciales de Ps.
centrado en el usuario diseño ● Herramientas de ajuste de
● Imagen en diseño web imagen en Ps.
● Guardar y exportar imágenes
● Leyes Gestálticas en Ps.
● Ejercicio de práctica en Ps.
 Ejercicio
Clase 2
¿Qué tienen en común las
siguientes páginas web?
Llamativas, Atractivas, Buena calidad, Profesionales,
Tratamiento Digital, Coherentes, etc.
Y ahora?
Impacto de la Imagen
El impacto de las imágenes es vital tanto para el medio impreso como el virtual.
El usuario examina los detalles visibles, desde la imagen de la portada, el color, los
títulos, la organización de la información, la línea gráfica (coherencia) y todo lo que a
su juicio la hace sobresalir de otros textos o páginas web.
Las personas eligen empujados por lo que ven, la sensación que les produce y lo que
les dicen los titulares. Si a primera vista el medio les atrae, lo adquirirán.
El diseño por tanto, es la llave de acceso para alcanzar las metas, de ahí la
importancia de poseer una gráfica que destaque por sobre las demás.
Lo primero que elegimos es lo que más nos atrae visualmente.
En resumen: La primera impresión cuenta.
A una persona le lleva
alrededor de 50
milisegundos
(esto es 0.05 segundos)
en crear una primera
opinión sobre el sitio y
definir si se queda o se
va.

Esto quiere decir que el

usuario hace juicios
rápidos basándose
solamente en el diseño.
Ilustraciones o imágenes
● Conforman todos los elementos gráficos que se transforman en iconos: fotos, pinturas,
caricaturas, pictogramas, esquemas, gráficos, infografías y grabados.
● Ayudan a generar un ritmo dinámico en la puesta en página y conectan el texto con
dicha ilustración.
● Son una forma de contenido que informa ya que brindan testimonios de forma gráfica.
● Con las fotografías se aporta una información que con el texto muchas veces es difícil de
comunicar o en otros casos al lector le facilita la lectura porque entiende mejor el tema
y le aporta más datos.
● A su vez, las infografías pueden ser más eficaces y son un buen recurso para mostrar
datos de una forma más atractiva.
● Brindan información al lector que sea de complemento con el contenido escrito y no
reiterativo con lo que se está relatando.
● Por último las ilustraciones y caricaturas pueden ofrecer humor a las publicaciones y
también enriquecer visualmente la información.
Texto: “Vendemos tortas de cumpleaños para fiestas infantiles, con relleno
de chocolate con cobertura sabor frambuesa. Las hacemos del personaje
infantil que quieras y el envío es gratis!”

Imagen

El uso de la imagen
va a determinar si
compro o no.

La imagen aporta datos que no teníamos, como en este caso la habilidad decorativa del pastelero
Un poco sobre fotografía
Para aprender a distinguir entre buenas y
malas fotografías necesitamos entrenar
nuestra mente y también nuestros ojos.

Prestemos atención de ahora en más en:

si la imagen está nítida, si el foco está en el

lugar adecuado, si está sobreexpuesta
(demasiado blanca) o subexpuesta
(demasiado oscura), si está centrada, si
tiene manchas o reflejos molestos, si los
colores son los adecuados etc.
Una buena imagen es nítida, sin
manchas, reflejos o marcas de agua, no
se encuentra sobreexpuesta o
subexpuesta, ni deformada.
Se entiende perfectamente lo que se
quiere mostrar.
Regla de los tercios
En las artes visuales como la pintura, fotografía y diseño, la regla de los tercios
es una forma de composición para ordenar objetos dentro de la imagen.

Esta regla divide una imagen en nueve partes iguales, utilizando dos líneas
imaginarias paralelas y equiespaciadas de forma horizontal y dos más de las
mismas características de forma vertical, y los puntos de intersección
permiten ubicar los elementos en el centro de atención de la composición y
así crear una imagen con equilibrio visual.
Regla de los tercios
Ley de Horizonte y de la Mirada
● El horizonte debe ubicarse en el tercio superior o en el tercio inferior del cuadro
para romper con el excesivo equilibrio que se generaría si lo ubicamos a la mitad del
encuadre.

● La mirada del sujeto (u objeto) debe estar dirigida a la parte de la fotografía

donde haya más ‘aire’ para dirigir la atención del espectador hacia adentro de la
fotografía
Ley de Horizonte y de la Mirada
Ley de Pregnancia
En la teoría de la Gestalt, muchas de sus aplicaciones son a base de la ley de pregnancia y
buena forma.

Esta ley permite la fácil lectura de figuras que se interfieren formando aparentes
confusiones, pero en donde prevalecen sus propiedades de "buena forma", se ven como
desglosadas del conjunto.

Muy utilizado en las artes visuales, ya que involucra el hecho de que las personas tendemos
a organizar nuestro entorno buscando estabilidad, equilibrio, significado, seguridad,
etcétera y nos sentimos más confortables cuando lo que percibimos es comprensible.

La imagen es pregnante cuando es recordable, como “magnética”.

En las imágenes fotográficas, se utiliza muchas veces esta ley como base de composición,
ya que es normativa que las imágenes sean pregnantes y atractivas.
Ley de Pregnancia
Equilibrio o Ley de la Balanza
Al igual que el peso físico en una balanza, el equilibrio compositivo es la apreciación
subjetiva del peso visual en una imagen.

Cuando situamos el mismo peso a ambos lados de una balanza, ésta queda equilibrada.

Cabe aclarar que equilibrio visual no es sinónimo de simetría; más bien lo contrario: la
composición de los elementos, con todas sus variables de orden y forma, es un juego de
equilibrios.

Ley De La Compensación De Masas: Se compone con formas de diferente tamaño,

diferente color, forma o importancia para compensar la composición.
Equilibrio o Ley de la Balanza

Simetría Equilibrio o Balanza

Tipos de equilibrios
Punto de Interés
El punto de interés es la capacidad que tiene un elemento de una composición en
atraer la mirada del espectador.

Si los elementos principales se encuentran situados dentro de la ley de los tercios, será una
imagen aún más atractiva.

Para esto, es fundamental reconocer qué es lo importante de la escena y justamente

encuadrar sobre aquel punto y eliminar aquellas superficies que no aportan y distraen la
atención.
Punto de interés
Recorrido Visual
La sumatoria de varios puntos de interés forma el recorrido visual.

Recorrido que es sugerido por los puntos de interés ubicados de modo estratégico, para
que sean recorridos con la mirada, uno por uno, y al finalizar retomar el primero
nuevamente haciendo una secuencia continúa. Ese camino continuo es lo que se conoce
como recorrido visual.

De estos elementos (cada uno con su forma y color) será tan importante su particularidad
como también su ubicación y la relación entre ellos.

Según nuestra cultura occidental, leemos de izquierda a derecha y de arriba abajo.

Recorrido Visual
Proporción o Sección Áurea
A la proporción áurea se le han asignado muchas definiciones y nombres. Si revisamos
viejos textos, podremos encontrar referencias y denominaciones como: el número de oro, el
número áureo, el número dorado, el número phi (que no es el número pi), la sección áurea,
la medida áurea o la divina proporción.

El descubrimiento de esta proporción o número (1,618034) causó todo un revuelo en las

ciencias y las artes y ha obsesionado a artistas, diseñadores, arquitectos, y todo tipo de
profesionales en busca de la perfección visual, durante siglos.
Proporción Áurea

Rectángulo áureo Espiral de oro

Proporción Áurea
Proporción Áurea
Composición en el Diseño Gráfico
En diseño gráfico, una composición es la parte donde todos los elementos separados se
unen para formar un todo. Cuando todas tus letras, tus imágenes, tus gráficos y colores se
unen para formar un diseño cohesivo.

Es un conjunto de elementos visuales cuya interacción y orden dan paso a una idea.
Dichos elementos están contenidos en un “Marco de referencia” el cual señala (física o
virtualmente) los límites del diseño, además de definir el centro de la composición y las
sensaciones de espacio.
Elementos Gráficos
Existen 6 elementos gráficos que son la base del Diseño:

● La grilla/estructura (márgenes, calles, columnas, etc.)

● la tipografía (estilo del texto)
● las misceláneas (caracteres tipográficos no alfabéticos)
● Las imágenes o ilustraciones (fotografías, dibujos, gráficos, etc.)
● El color
● El reparto de blancos (espacios de aire entre gráficos, imágenes, columnas y otros)
El trabajo del diseñador incluye saber cómo combinar uniformemente estos elementos
para poder lograr un producto ordenado y claro.
Tema: Imágenes en el Diseño

Los símbolos sencillos y económicos funcionan mejor y de

forma más universal que los cargados de detalles.

Autor/as/es: Susan Kare

Diseño Web
La información está por todas partes, y por eso es extremadamente importante que los
diseñadores piensen en hacer diseños claros. Las piezas del diseño tienen que atraer la
atención de los usuarios, ya sea mientras compran en una tienda online, leen un blog o,
simplemente, navegan por internet.

El diseño web debe ser fácil de leer y de entender.

Debemos recordar que optar por un diseño sencillo en lugar de uno recargado es clave
para mantener interesados a los lectores. Una gran cantidad de elementos, imágenes,
colores, y formas diferentes en una página pueden hacer que una web se vea más
"barroca", lo cual distraerá la atención del usuario.

Una buena forma de crear una experiencia agradable en la web es recordar que menos es
más.
La Imagen
Según Villafañe definir lo que es una imagen es más complejo de lo que parece a simple
vista.

La definición más generalizada que tenemos es cuando funciona como representación de

un objeto o una idea, sin embargo, el concepto de imagen implica procesos como el
pensamiento, la percepción, la memoria y la conducta… Por lo tanto propone definir las
imagenes como lo que primariamente posee las siguientes tres características:

● selección de la realidad
● elementos configurados
● sintaxis (orden de esos elementos)
Dondis - La sintaxis de la imagen
El punto de vista subyacente de la psicología Gestalt, tal como la define von Ehrehfels, afirma
que:
"si tenemos doce observadores y cada uno de ellos escucha uno de los doce tonos de
una melodía, la suma de sus experiencias no correspondería a lo que se percibiría si
alguien escuchase la melodía entera"…
En todos los estímulos visuales y a todos los niveles de inteligencia visual, el significado no solo
reside en los datos representacionales, en la información ambiental o en los símbolos incluido
el lenguaje, sino también en las fuerzas compositivas que existen o coexisten con la
declaración visual fáctica.
Cualquier acontecimiento visual es una forma con contenido, pero el contenido está
intensamente influido por la significancia de las partes constituyentes, como el color, el
tono, la textura, la dimensión, la proporción y sus relaciones compositivas con el
significado.
Las leyes de la Gestalt
“La mente configura, por medio de ciertas leyes, los elementos que llegan a
través de los canales sensoriales o de la memoria (pensamiento, inteligencia
y resolución de problemas), es decir la percepción.
La palabra Gestalt hace referencia a figura, forma u organización.
La Gestalt analizó diversas áreas de la psicología (actitudes, el aprendizaje, la
motivación, etc.) pero se centró en la percepción.
No percibimos como elementos aislados, sino que por el contrario
percibimos como globalidad o conjunto organizado.”
“El todo es más que la suma de las partes”
Ley de la Buena Forma o Pregnancia
La Ley de Pregnancia fue establecida por la Psicología de la Gestalt y adoptada por la
Escuela de la Bauhaus.

Nuestra percepción tiene la capacidad de organizar los elementos de formas

sencillas para nuestro entendimiento. El cerebro disfruta las composiciones
armónicas y agradables para nuestros sentidos, esto lo hacemos simplificando lo
que percibimos y preferimos lo sencillo.

Pregnancia se refiere a la capacidad de una imagen o parte de ella de llamar nuestra

atención y permanecer en nuestra memoria debido a su simpleza.
Ley de la buena forma o pregnancia

Lo que vemos Lo que percibimos

Ley de Cierre
La Ley de cierre es la tendencia de la percepción a completar con la imaginación la
parte faltante de una imagen.

Cuando un objeto está incompleto o es un espacio que no está completamente

cerrado, el cerebro se encarga de activar unos mecanismos para completar la figura
mediante la adhesión de la información faltante.
Ley de cierre

No hace falta que pongamos un círculo para que nuestro cerebro perciba un círculo
Ley de Semejanza
Según la ley de semejanza, nuestra mente agrupa los elementos que comparten
características visuales y los unifica. La semejanza depende de la forma, el tamaño y
el color.

Elementos similares tienden a ser percibidos como parte del mismo conjunto.
Ley de semejanza

En estos casos agrupamos según color

Ley de Simetría
El principio de la simetría se basa en nuestra búsqueda de simplicidad, estabilidad y
orden.

Dictamina que las imágenes simétricas son percibidas como un solo elemento (tal vez
requiera ver con un poco de distancia). Va más allá del campo de la percepción de las
formas y representa uno de los fenómenos básicos de la naturaleza. La simetría utiliza
figuras divididas de forma geométricamente perfecta, lo que genera la aparición de una
variable importantísima: el equilibrio.

Tipos de simetría: por reflejo (percibida como si se reflejara la imagen), por rotación
(percibida como giratoria) o por traslación (donde un módulo se repite).
Ley de simetría

Las formas simétricas se asocian a aspectos positivos como estabilidad y solidez

Ley de Proximidad
Tenemos tendencia a percibir los objetos y las formas que están cerca las unas de las
otras como si pertenecieran a un mismo grupo (aunque estos elementos sean de
colores y formas diferentes).

Nuestro cerebro genera esta asociación para facilitar nuestra percepción de los
objetos y crear contornos dónde en principio no existen.
Ley de proximidad

Las formas pueden ser iguales o diferentes, pero se mimetizan gracias a su proximidad
Ley de Continuidad
Según la ley de continuidad los elementos que siguen un patrón se tienden a agrupar
perceptivamente, a pesar de que estén separados entre sí.

Los elementos mantienen un patrón o una dirección y tienden a agruparse entre sí. Estas
piezas que apuntan en un mismo sentido se perciben de forma continuada. Si estos
elementos forman líneas curvas o rectas las percibiríamos como una misma forma.

Estos elementos no seguirán la ley de continuidad si no poseen una dirección común.

Ley de continuidad

En la imagen de arriba, vemos un cruce de línea y curva en lugar de cuatro segmentos

distintos de línea y curva que se encuentran en un solo punto.
Ley de Figura - Fondo
Esta ley analiza la tendencia de nuestro cerebro a separar el fondo de los demás
elementos, y se basa en la premisa: no existe figura sin un fondo que la sustente.

Es la relación entre elementos positivos y espacio negativo.

Es lo primero que identifican las personas cuando ven una composición, qué es la
figura y cuál es el fondo, depende de eso donde va a estar puesta nuestra atención.
Ley de figura-fondo Reversible

Figura y fondo no son estáticos sino que pueden intercambiar sus papeles, el fondo puede
convertirse en la figura y la figura en fondo, pero nunca podremos prestar igual atención a las
dos a la vez. (Cuanto más básicas sean las figuras que aparecen, más sencillo será el
intercambio entre figura y fondo.)
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.

Todo en el Aula Virtual.

Muchas gracias por tu atención.
Nos vemos pronto
Introducción al Diseño UX/UI - DCU
Dibujo - Diseño - Arte - Ilustración

¿Qué es el Diseño?
El diseño es el proceso previo de configuración mental, «pre figuración», en la búsqueda de
una solución en cualquier campo. Se aplica habitualmente en disciplinas que requieren
creatividad.

El diseño involucra variadas dimensiones que van más allá del aspecto, la forma y el color,
abarcando también la función de un objeto y su interacción con el usuario.
Durante el proceso se debe tener en cuenta además la funcionalidad, la operatividad, la
eficiencia y la vida útil del objeto del diseño.

Comunicación visual
El Emisor se desdobla en dos protagonistas:

Aquel que crea el mensaje y necesita transmitirlo (cliente o marca)

El disena
̃ dor que interviene para hacer que dicho mensaje sea efectivo.

El receptor es el sujeto para quien está destinada la comunicació n, un sector

de la sociedad o el pú blico ideal.

EI significado es lo que se desea expresar, es el mensaje. ¿Qué se comunica?

El significante está siempre unido al significado pues la comunicació n se produce en el

cruce de

ambos. ¿Cómo se comunica?

Comunicación casual y comunicación intencional

En la comunicación casual quien es receptor interpreta “libremente” la imagen que está
viendo.

En la comunicación intencional existe un emisor con la intención de que el receptor

interprete un mensaje concreto.
Características del diseñador
Un diseñador es una persona que ha entrenado su creatividad para enfocarla hacia
aspectos más pragmáticos, de manera que pueda ofrecer soluciones adaptadas al
problema que enfrenta.

Utiliza un conjunto de saberes aplicables a diversos campos de trabajo, que se sirven de la

geometría, la aritmética, la lógica, la ilustración, el mercadeo, la sociología o la informática
para un proceso que, fundamentalmente, comprende en las etapas que figuran a
continuación:

Etapas
1) Observación y análisis. Ya que la necesidad del diseño surge de la cotidianidad del
ser humano.
2) Planificación y proyección. Proponiendo un modo de solucionar la necesidad
detectada.
3) Construcción y ejecución. Llevando a la realidad lo proyectado y sometiéndolo a la
prueba de su funcionamiento.

El diseño como forma de comunicar

1) Es una disciplina dedicada a la producción de comunicaciones visuales orientadas a
un público específico.
2) Se encarga de comunicar a través de medios visuales y como finalidad transmitir un
mensaje específico despojado de rasgos personales.
3) El hecho de crear y cumplir con un propósito se centra en: la transformación de una
realidad existente por una deseada.
4) Los diseños se basan en un mensaje concreto que se quiere transmitir y a partir de
ello obtener una respuesta del público al que está dirigido. Estos afectan el
conocimiento, las actitudes y el comportamiento de la gente.
5) Para poder crear estas piezas de comunicación, el mensaje se tiene que adecuar al
grupo al que se está introduciendo. De esta forma se analiza ampliamente a quién
irá encaminado el mensaje. ¿Qué piensa? ¿Qué hace? ¿Qué ve? ¿Qué siente? ¿En
qué cree?
6) En todo diseño debe haber correlación entre lo que se quiere transmitir y los
elementos utilizados sin resignar su objetivo final sea cual sea.
Frascara
"El diseñador de comunicación visual trabaja en la interpretación, el ordenamiento y
la presentación visual de mensajes. Su sensibilidad para la forma debe ser paralela a
su sensibilidad para el contenido".

Reglas del diseñador profesional

El diseñador es un intérprete que conforma mensajes producidos por otras personas.

El diseñador no adorna, es un proceso de creación visual con el propósito de comunicar un

mensaje específico.

El diseño debe ser estético pero también funcional.

El diseñador maneja conceptos, códigos y estética para poder enviar mensajes fácilmente
comprendidos y absorbidos por las audiencias a quienes se dirigen.

El diseño, por ética, debe tener como fin último mejorar y transformar el mundo donde
vivimos.

El diseño forma parte de nuestra vida diaria, estamos rodeados de diseño por lo tanto debe
ser cuidadoso.

La retórica de la imagen
La denotación, es el significado básico de una palabra, constante, universal, el que una
palabra tiene para todos los conocedores de una lengua.

Por ejemplo: un cuenco, una bombilla, una infusión y yerba. Lo denotado sería lo real, lo
objetivo y lo literal, en lo que está de acuerdo toda la comunidad lingüística, es decir el
significado que le da el diccionario.
La connotación, son todas aquellas ideas y asociaciones que se despiertan a la hora de
visualizar un mate.

por ejemplo: Argentinidad, charlas, reunión con amigos, campo, Pampa, etc.

Lo connotado son otros significados que podemos darle a la imagen.

Estas ideas o asociaciones a la imagen del mate van a depender de quién sea el
observador. De su cultura, entorno, edad, lugar, educación y muchos factores más.

Diseño gráfico - Diseño Ux

El diseño gráfico se trata de la creación y proyección de objetos gráficos: ilustraciones,
composiciones, logotipos, imágenes, tipografías, etc., atendiendo a aspectos estéticos,
comunicacionales y simbólicos.

Esta rama del diseño tiene segmentos aplicados a diversos campos como: el diseño
editorial, el diseño publicitario, el diseño corporativo, el diseño web y el diseño UX/UI.

El diseño de experiencia de usuario (UX) es una disciplina relativamente nueva que utiliza
varias premisas y reglas tomadas del diseño gráfico, marketing, diseño industrial, etc.

Es una práctica que sirve para diseñar centrados en las necesidades de los usuarios. La
experiencia de usuario es el conjunto de factores relativos a la interacción del usuario con
un dispositivo, generando como resultado una percepción positiva o negativa de esa
experiencia y su marca.

Diseño UX facetas
El diseño de experiencia de usuario (UX) es un conjunto de metodologías, mindsets y
procesos, orientados a diseñar un servicio o producto, teniendo en consideración las
necesidades de los usuarios finales (y no de quien está desarrollando o diseñado).
Las 7 facetas o factores que construyen la experiencia de usuario de Peter Morville:

Valioso - Útil - Deseable - Accesible - Creíble - Ubicable - Usable

Diseño UI
El diseño de interfaz de usuario (UI) refiere a todo aquello con lo que los usuarios
interactúan de forma directa.

Se trata de lo que vemos y tocamos en una interfaz o un dispositivo, es aquello que permite
interactuar con el producto o servicio.

“Un área híbrida, donde los límites entre diseño gráfico e industrial se diluyen”

Lev Manovich.

¿Qué es la Usabilidad?
“El atributo de calidad de un producto que se refiere sencillamente a su facilidad de uso.

Implica el grado en que el usuario puede explotar o aprovechar la utilidad de un producto.”

Jakob Nielsen - Padre de la usabilidad.

Características
Facilidad de aprendizaje: ¿Cuán fácil es llevar a cabo las tareas la primera vez?

Eficiencia: Una vez que aprendieron el funcionamiento, ¿cuán rápido las realizan?

Cualidad de ser recordado: Si pasan un tiempo sin usarlo, ¿cuán fácil es que vuelvan a
usarlo eficientemente?

Eficacia: ¿Cuántos errores comete el usuario? La gravedad del error, puede recuperarse
fácilmente de esos errores?

Satisfacción: ¿Cuán agradable es usar el producto?

Diseño Centrado en el Usuario

El DCU comprende una serie de métodos y técnicas para analizar, diseñar y evaluar
hardware y software (interface)

Tiene un enfoque de diseño cuyo proceso está orientado por la información acerca de
quienes van a hacer uso del producto (usuarios)

Tener en cuenta: ¿Quién usará el sistema? y qué tareas llevará a cabo con el mismo?

Un proceso iterativo (cíclico) en el cual diseño y evaluación se incorporan desde la fase

inicial del proyecto y en todas las fases que veremos a continuación:

Fases
Análisis. Entendiendo a los usuarios y sus necesidades
Diseño. Proyecto una solución que satisfaga las necesidades

Validación. Compruebo el valor que estoy agregando a los usuarios

Experiencia casual y experiencia diseñada

En la experiencia casual o accidental es cuando vemos una comunicación que no tiene
diseño aplicado, probablemente no fue hecha por un diseñador, y no tiene criterio visual.

Genera confusión y malestar en el usuario.

En la experiencia diseñada ningún detalle fue dejado al azar, hay coherencia en sus
elementos, es intuitivo y claro para el usuario.

Genera satisfacción en el usuario.

Imágenes en el diseño
¿Qué tienen en común las siguientes páginas web?

¿Por qué es importante?

El impacto de las imágenes es vital tanto para el medio impreso como el virtual.
El usuario examina los detalles visibles, desde la imagen de la portada, el color, los títulos,
la organización de la información, la línea gráfica (coherencia) y todo lo que a su juicio la
hace sobresalir de otros textos o páginas web.

Las personas eligen empujados por lo que ven, la sensación que les produce y lo que les
dicen los titulares. Si a primera vista el medio les atrae, lo adquirirán.

El diseño por tanto, es la llave de acceso para alcanzar las metas, de ahí la importancia de
poseer una gráfica que destaque por sobre las demás.

Lo primero que elegimos es lo que más nos atrae visualmente.

En resumen: La primera impresión cuenta.

Ilustraciones o imágenes
1) Conforman todos los elementos gráficos que se transforman en iconos: fotos,
pinturas, caricaturas, pictogramas, esquemas, gráficos, infografías y grabados.
2) Ayudan a generar un ritmo dinámico en la puesta en página y conectan el texto con
dicha ilustración.
3) Son una forma de contenido que informa ya que brindan testimonios de forma
gráfica.
4) Con las fotografías se aporta una información que con el texto muchas veces es
difícil de comunicar o en otros casos al lector le facilita la lectura porque entiende
mejor el tema y le aporta más datos.
5) A su vez, las infografías pueden ser más eficaces y son un buen recurso para
mostrar datos de una forma más atractiva.
6) Brindan información al lector que sea de complemento con el contenido escrito y no
reiterativo con lo que se está relatando.
7) Por último las ilustraciones y caricaturas pueden ofrecer humor a las publicaciones y
también enriquecer visualmente la información.

En fotografía
Para aprender a distinguir entre buenas y malas fotografías necesitamos entrenar nuestra
mente y también a nuestros ojos.

Prestemos atención de ahora en más en:

si la imagen esta nítida, si el foco está en el lugar adecuado, si está sobreexpuesta

(demasiado blanca) o subexpuesta (demasiado oscura), si está centrada, si tiene manchas
o reflejos molestos, si los colores son los adecuados etc.
La regla de los tercios
En las artes visuales como la pintura, fotografía y diseño, la regla de los tercios es una
forma de composición para ordenar objetos dentro de la imagen.

Esta regla divide una imagen en nueve partes iguales, utilizando dos líneas imaginarias
paralelas y equiespaciadas de forma horizontal y dos más de las mismas características de
forma vertical, y los puntos de intersección permiten ubicar los elementos en el centro de
atención de la composición y así crear una imagen con equilibrio visual.
Ley de Horizonte y de la Mirada
El horizonte debe ubicarse en el tercio superior o en el tercio inferior del cuadro para romper
con el excesivo equilibrio que se generaría si lo ubicamos a la mitad del encuadre.

La mirada del sujeto (u objeto) debe estar dirigida a la parte de la fotografía donde haya
más ‘aire’ para dirigir la atención del espectador hacia adentro de la fotografía.
Ley de pregnancia
En la teoría de la Gestalt, muchas de sus aplicaciones son a base de la ley de pregnancia y
buena forma.

Muy utilizado en las artes visuales, ya que trata de que las personas tendemos a organizar
nuestro entorno buscando estabilidad, equilibrio, significado, seguridad, etcétera y nos
sentimos más confortables cuando lo que percibimos es comprensible.

En las imágenes fotográficas, se utiliza muchas veces esta ley como base de composición,
ya que es normativa que las imágenes sean pregnantes y atractivas.
Equilibrio o Ley de la balanza
Al igual que el peso físico en una balanza, el equilibrio compositivo es la apreciación
subjetiva del peso visual en una imagen.

Cuando situamos el mismo peso a ambos lados de una balanza, ésta queda equilibrada.

Cabe aclarar que equilibrio visual no es sinónimo de simetría; más bien lo contrario: la
composición de los elementos, con todas sus variables de orden y forma, es un juego de
equilibrios.

Ley De La Compensación De Masas: Se compone con formas de diferente tamaño,

diferente color, forma o importancia para compensar la composición.
Tipos de equilibrios

Ley de la balanza
Simetría

Equilibrio o Balanza
Punto de interés
El punto de interés es la capacidad que tiene un elemento de una composición en atraer la
mirada del espectador.

Si los elementos principales se encuentran situados dentro de la ley de los tercios, será una
imagen aún más atractiva.

Para esto, es fundamental reconocer qué es lo importante de la escena y justamente

encuadrar sobre aquel punto y eliminar aquellas superficies que no aportan y distraen la
atención.
Recorrido visual
La sumatoria de varios puntos de interés forma el recorrido visual.

Recorrido que es sugerido por los puntos de interés ubicados de modo estratégico, para
que sean recorridos con la mirada, uno por uno, y al finalizar retomar el primero
nuevamente haciendo una secuencia continúa. Ese camino continuo es lo que se conoce
como recorrido visual.

De estos elementos (cada uno con su forma y color) será tan importante su particularidad
como también su ubicación y la relación entre ellos.

Según nuestra cultura occidental, leemos de izquierda a derecha y de arriba abajo.

Proporción o sección áurea
A la proporción áurea se le han asignado muchas definiciones y nombres. Si revisamos
viejos textos, podremos encontrar referencias y denominaciones como: el número de oro, el
número áureo, el número dorado, el número phi (que no es el número pi), la sección áurea,
la medida áurea o la divina proporción.

El descubrimiento de esta proporción o número (1,618034) causó todo un revuelo en las

ciencias y las artes y ha obsesionado a artistas, diseñadores, arquitectos, y todo tipo de
profesionales en busca de la perfección visual, durante siglos.

Nace de la creación del rectángulo áureo y de la espiral de oro.

El descubrimiento de Fibonacci causó muchísima fascinación.

Posteriormente, otro matemático y teólogo italiano llamado Luca Pacioli publicó un libro
denominado La Divina Proporción (1590), alegando 5 motivos por los que el número áureo
era divino. Desde la publicación de su libro, la proporción áurea fue tomada como la
proporción divina, alegando que la sucesión de Fibonacci y su número áureo se
relacionaban con algo más espiritual que la geometría.

Obtuvo la fama de conseguir realzar la armonía y la belleza de los objetos o el arte. Por el
auge de esta fama, a lo largo de la historia, la proporción áurea fue aplicada a innumerables
proyectos de arquitectura o pintura.

Rectángulo áureo
Espiral de oro

Ejemplos:
En el diseño
En diseño gráfico, una composición es la parte donde todos los elementos separados se
unen para formar un todo. Cuando todas tus letras, tus imágenes, tus gráficos y colores se
unen para formar un diseño cohesivo.

Es un conjunto de elementos visuales cuya interacción y orden dan paso a una idea. Dichos
elementos están contenidos en un “Marco de referencia” el cual señala (física o
virtualmente) los límites del diseño, además de definir el centro de la composición y las
sensaciones de espacio.

Elementos gráficos
Existen 6 elementos gráficos que son la base del Diseño:

● La grilla/estructura (márgenes, calles, columnas, etc.)

● la tipografía (estilo del texto)
● las misceláneas (caracteres tipográficos no alfabéticos)
● Las imágenes o ilustraciones (fotografías, dibujos, gráficos, etc.)
● El color
● El reparto de blancos (espacios de aire entre gráficos, imágenes, columnas y otros)

El trabajo del diseñador incluye saber cómo combinar uniformemente estos elementos para
poder lograr un producto ordenado y claro.
Susan Kare
"Los símbolos sencillos y económicos funcionan mejor y de forma más universal que los
cargados de detalles".

Diseño web
La información está por todas partes, y por eso es extremadamente importante que los
diseñadores piensen en hacer diseños claros. Las piezas del diseño tienen que atraer la
atención de los usuarios, ya sea mientras compran en una tienda online, leen un blog o,
simplemente, navegan por internet.

El diseño web debe ser fácil de leer y de entender.

Debemos recordar que optar por un diseño sencillo en lugar de uno recargado es clave para
mantener interesados a los lectores. Una gran cantidad de elementos, imágenes, colores, y
formas diferentes en una página pueden hacer que una web se vea más "barroca", lo cual
distraerá la atención del usuario.

Una buena forma de crear una experiencia agradable en la web es recordar que menos es
más.

La imagen
Según Villafañe definir lo que es una imagen es más complejo de lo que parece a simple
vista.

La definición más generalizada que tenemos es cuando funciona como representación de

un objeto o una idea, sin embargo, el concepto de imagen implica procesos como el
pensamiento, la percepción, la memoria y la conducta… Por lo tanto propone definir las
imagenes como lo que primariamente posee las siguientes tres características:

selección de la realidad;

elementos configurados;

sintaxis (orden de esos elementos).

Dondis - La sintaxis de la imagen

El punto de vista subyacente de la psicología Gestalt, tal como la define von Ehrehfels,
afirma que:

"si tenemos doce observadores y cada uno de ellos escucha uno de los doce tonos de una
melodía, la suma de sus experiencias no correspondería a lo que se percibiría si alguien
escuchase la melodía entera"…

En todos los estímulos visuales y a todos los niveles de inteligencia visual, el significado no
solo reside en los datos representacionales, en la información ambiental o en los símbolos
incluido el lenguaje, sino también en las fuerzas compositivas que existen o coexisten con la
declaración visual fáctica.
Cualquier acontecimiento visual es una forma con contenido, pero el contenido está
intensamente influido por la significancia de las partes constituyentes, como el color, el tono,
la textura, la dimensión, la proporción y sus relaciones compositivas con el significado.

Las leyes de la Gestalt

“La mente configura, por medio de ciertas leyes, los elementos que llegan a través de los
canales sensoriales o de la memoria (pensamiento, inteligencia y resolución de problemas),
es decir la percepción.

La palabra Gestalt hace referencia a figura, forma u organización.

La Gestalt analizó diversas áreas de la psicología (actitudes, el aprendizaje, la motivación,

etc.) pero se centró en la percepción.

No percibimos como elementos aislados, sino que por el contrario percibimos como
globalidad o conjunto organizado.”

“El todo es más que la suma de las partes”

Ley de la buena forma o pregnancia

La Ley de Pregnancia fue establecida por la Psicología de la Gestalt y adoptada por la
Escuela de la Bauhaus.

Nuestra percepción tiene la capacidad de organizar los elementos de formas sencillas para
nuestro entendimiento. El cerebro disfruta las composiciones armónicas y agradables para
nuestros sentidos, esto lo hacemos simplificando lo que percibimos y preferimos lo
sencillo.

Pregnancia se refiere a la capacidad de una imagen o parte de ella de llamar nuestra

atención y permanecer en nuestra memoria debido a su simpleza.

Lo que vemos y Lo que percibimos:

Ley de cierre
La Ley de cierre es la tendencia de la percepción a completar con la imaginación la parte
faltante de una imagen.
Cuando un objeto está incompleto o es un espacio que no está completamente cerrado, el
cerebro se encarga de activar unos mecanismos para completar la figura mediante la
adhesión de la información faltante.

No hace falta que pongamos un círculo para que nuestro cerebro perciba un círculo:

Ley de semejanza
Según la ley de semejanza, nuestra mente agrupa los elementos que comparten
características visuales y los unifica. La semejanza depende de la forma, el tamaño y el
color.

Elementos similares tienden a ser percibidos como parte del mismo conjunto.

En estos casos agrupamos según color:

Ley de simetría

El principio de la simetría se basa en nuestra búsqueda de simplicidad, estabilidad y orden.

Dictamina que las imágenes simétricas son percibidas como un solo elemento (tal vez
requiera ver con un poco de distancia). Va más allá del campo de la percepción de las
formas y representa uno de los fenómenos básicos de la naturaleza. La simetría utiliza
figuras divididas de forma geométricamente perfecta, lo que genera la aparición de una
variable importantísima: el equilibrio.

Tipos de simetría: por reflejo (percibida como si se reflejara la imagen), por rotación
(percibida como giratoria) o por traslación (donde un módulo se repite).

Las formas simétricas se asocian a aspectos positivos como estabilidad y solidez:

Ley de proximidad

Tenemos tendencia a percibir los objetos y las formas que están cerca las unas de las otras
como si pertenecieran a un mismo grupo (aunque estos elementos sean de colores y
formas diferentes).

Nuestro cerebro genera esta asociación para facilitar nuestra percepción de los objetos y
crear contornos dónde en principio no existen.

Las formas pueden ser iguales o diferentes, pero se mimetizan gracias a su proximidad:
Ley de continuidad
Según la ley de continuidad los elementos que siguen un patrón se tienden a agrupar
perceptivamente, a pesar de que estén separados entre sí.

Los elementos mantienen un patrón o una dirección y tienden a agruparse entre sí. Estas
piezas que apuntan en un mismo sentido se perciben de forma continuada. Si estos
elementos forman líneas curvas o rectas las percibiríamos como una misma forma.

Estos elementos no seguirán la ley de continuidad si no poseen una dirección común.

En la imagen de arriba, vemos un cruce de línea y curva en lugar de cuatro segmentos

distintos de línea y curva que se encuentran en un solo punto.

Ley de figura - fondo

Esta ley analiza la tendencia de nuestro cerebro a separar el fondo de los demás
elementos, y se basa en la premisa: no existe figura sin un fondo que la sustente.

Es la relación entre elementos positivos y espacio negativo.

Es lo primero que identifican las personas cuando ven una composición, qué es la figura y
cuál es el fondo, depende de eso donde va a estar puesta nuestra atención.

Figura y fondo no son estáticos sino que pueden intercambiar sus papeles, el fondo puede
convertirse en la figura y la figura en fondo, pero nunca podremos prestar igual atención a
las dos a la vez. (Cuanto más básicas sean las figuras que aparecen, más sencillo será el
intercambio entre figura y fondo.)
 DISEÑO UX/UI
Clase 3
Gráfico Vectorial vs. Mapa de Bits
Les damos la bienvenida
Vamos a comenzar a grabar la clase
 Clase 02 Clase 03 Clase 04

Imágenes en el diseño Gráfico vectorial vs. Research y Benchmarking

Mapa de bits
● Impacto de la imagen ● ¿Qué significa iterar?
● Fotografía ● UX Research
● Diferenciación
● Leyes aplicadas ● Insights
Puntos de interés
● Resoluciones
● ● Benchmarking
● Composición en el diseño ● Adobe Photoshop ● Tarea para el Proyecto
● Imagen en diseño web ● Formatos de imágenes Final
● Leyes de la Gestalt ● Ejercicio de práctica
¿Qué es un mapa de bits? y
¿Cómo se diferencia de un
gráfico vectorial?
Veremos el siguiente ejemplo
Mapa de Bits Gráfico vectorial

¿Parecen iguales cierto?

 Mapa de Bits Gráfico vectorial

Píxeles Vectores

No son iguales.
 Mapa de Bits Gráfico vectorial

Cuando ampliamos la imagen podemos notar la diferencia.

Mapa de bits vs. Gráfico vectorial
● Mapa de bits o Bitmap: es un grupo
de bits. Cada bit, la unidad mínima de
información, es cada píxel que
compone la imagen. Cada píxel es un
cuadro con información sobre su
color y la unión de muchos de estos
cuadros crea la imagen completa.
● No es escalable: alterar el tamaño de
un bitmap provoca que ésta se
“píxele”.
● Fotorrealista: pueden mostrar gran
cantidad de detalles y variaciones
sutiles en el color. Las fotografías son Mapas de Bits
Mapa de bits vs. Gráfico vectorial
● Gráfico vectorial o curvas: está formada
por la unión o superposición de
unidades básicas de información pero
en lugar de píxeles, estas unidades
básicas son vectores matemáticos, las
formas definidas por los vectores se
basan en las curvas Bézier.
● Es escalable: se puede escalar
libremente sin sacrificar la calidad.
(permanecen nítidas)
● Totalmente editables: Los objetos de
una imagen vectorial pueden constar de
Los “Logos” son Gráficos vectoriales
líneas, curvas y formas con atributos
editables como color, relleno y contorno.
Resumen
La mayoría de las imágenes digitales se pueden clasificar en: vectoriales y mapa de bits.

Las imágenes vectoriales tienen muchas ventajas como: que son escalables, es decir que
podemos aumentar o reducir su tamaño sin perder calidad/nitidez y que los archivos son
mucho más pequeños ya que requieren bastante menos información para definir la
imagen.

Las vectoriales se originan en un software. No puede escanear una imagen y guardarla

como un archivo vectorial sin utilizar un software de conversión especial.

No son adecuadas para producir imágenes fotorrealistas. Generalmente consisten en

áreas sólidas de color (o degradados), pero no pueden representar los tonos sutiles
continuos de una fotografía. Para este fin utilizaremos los mapas de bits con cuidado de
que cuenten con la resolución correcta para el uso que queremos darle.
Resolución
PPP (DPI): La resolución de una imagen es el
número de píxeles por pulgada que contiene
(1 pulgada = 2,54 centímetros).
La resolución se expresa en PPP (puntos por
pulgada en español) o DPI (dots per inch en
inglés).
Cuantos más píxeles haya por pulgada mejor será
la calidad de la imagen.
Una resolución de 300 dpi significa que la imagen
contiene 300 píxeles de ancho y 300 píxeles de alto,
por tanto, se compone de 90.000 píxeles (300x300
ppp).
La resolución de 72 PPP se utiliza en web
Por lo general, se considera que una resolución de
300ppp para una imagen es más que suficiente
antes de la impresión.
¿Qué es Photoshop?
Adobe Photoshop es el software líder en edición de imágenes de mapa de
bits, desarrollado por Adobe Systems Incorporated.

Usado principalmente para el retoque de fotografías, su nombre en español

significa "taller de fotos". Es conocido mundialmente.

Nos referiremos a este software como: Photoshop o Ps.

Photoshop
Ps es una más que conocida herramienta de edición de imágenes y fotografía, un
programa que se utiliza en PC para retocar fotos y hacer montajes de carácter profesional,
aunque también accesible para usuarios que llevan poco tiempo experimentando en ese
terreno.

Ps al ser un programa de edición fotográfica, trabaja con mapas de bits y cualquier formato
de imagen, permitiendo hacer pinturas digitales o montajes fotográficos y manipular,
modificar, editar o retocar cuanto se desee a través de todas las herramientas de las que
dispone.
Interfaz de Ps
Al ejecutar el programa podemos observar la interfaz estándar de Photoshop.

En la parte superior de la ventana se encuentra la barra de menús. En el costado izquierdo

la barra de herramientas, y, en el margen derecho, los paneles de herramientas
principales: capas, color, bibliotecas, etcétera. En la parte inferior encontramos una barra
de estado.

Cabe destacar que los programas de Adobe tienen una interfaz dividida en paneles, que
pueden ser flotantes, es decir que pueden estar flotando sobre la pantalla en vez de estar
pegados a ella, lo cual nos permite moverlos de un lugar a otro y reubicarlos según nuestra
conveniencia.
Barra de Menú
● Menú archivo: aquí encontramos los típicos comandos, como abrir, cerrar, guardar, importar, exportar, nuevo,
etcétera. Este menú es muy similar al de cualquier otro programa, sea o no de diseño. Desde aquí podemos crear
un nuevo documento y determinar su nombre, tamaño, resolución, modo de color y profundidad de bits.
● Menú edición: se encuentran los comandos que permiten copiar, cortar, pegar, deshacer y rehacer. También se
encuentran los comandos de transformación y opciones, personalización y preferencias del programa.
● Menú imagen: aquí podemos modificar todos los valores de la imagen, como el tamaño, el modo de color y la
profundidad de color. También se pueden realizar todos los ajustes de imagen disponibles, como brillo, contraste,
tono, saturación, etcétera.
● Menú capa: aquí encontramos todas las opciones de capas, como crear, duplicar, agrupar, etcétera.
● Menú selección: en este menú podemos editar, crear, perfeccionar y guardar nuestras selecciones.
● Menú filtro: desde aquí podemos aplicar filtros y también están las herramientas de enfoque y desenfoque.
● Menú 3D: todas las herramientas de la creación y edición de elementos tridimensionales.
● Menú vista: desde él podemos controlar los elementos que se muestran en pantalla.
● Menú ventana: aquí podemos hacer visible u ocultar cualquier panel de herramientas, personalizar el espacio
de trabajo y organizar los documentos abiertos.
● Menú ayuda: para acceder a la ayuda del programa y también los datos relacionados con la cuenta de usuario y
toda la documentación pertinente al programa y la versión utilizada.
Barra de Herramientas
En el costado izquierdo de la pantalla Pueden expandir algunas herramientas
estándar de Photoshop, ubicamos la con el fin de ver las que contiene ocultas.
barra de herramientas.
Un triángulo pequeño en el lateral inferior
En ella encontramos todas las derecho del icono de herramienta indica la
herramientas necesarias para trabajar una presencia de herramientas ocultas.
imagen de mapa de bits.
Para ver información sobre una
Dichas herramientas están organizadas
herramienta basta con colocar el puntero
por categorías.
sobre ella.
También podemos acceder a las diferentes
herramientas mediante atajos de teclado. En la información de herramientas que se
muestra debajo del puntero aparece el
Veremos todas las herramientas en la
siguiente imágen: nombre de la herramienta.
Barra de Herramientas
1. Herramientas de selección: permite seleccionar y aislar una parte de la imagen para poder editarla
independientemente del resto de ella.
2. Herramientas de recorte y creación de sectores: las herramientas de recorte nos permiten
recortar la imagen. La diferencia con las selecciones es que la zona excluida es eliminada del archivo.
Los sectores, por otra parte, son espacios rectangulares en la imagen que pueden contener
propiedades web, como enlaces, botones rollover y animaciones.
3. Herramientas de medida: estas nos permiten medir las dimensiones de partes del documento.
También podemos medir la información de color de un píxel, tomar muestras y crear notas.
4. Herramientas de retoque: aquí encontramos todas las herramientas que nos permiten modificar
los píxeles de la imagen.
5. Herramientas de pintura: ellas nos permiten pintar, borrar y colorear sobre una imagen.
6. Herramientas de texto y dibujo: aquí encontramos instrumentos de creación y modificación de
textos. Las herramientas de dibujo de este grupo son de dibujo vectorial, similares a las de Adobe
Illustrator, y las formas básicas, como rectángulos, elipses y líneas.
7. Herramientas de navegación: estas nos permiten desplazarnos libremente por el documento,
hacer zoom o rotar la vista.
Utilizaremos
Menú Herramientas

1. Selección. Con estas herramientas podemos seleccionar la parte de la imagen que

queremos editar.
2. Crop. Con esta herramienta vamos a poder recortar la imagen al tamaño que
deseemos.
3. Retoque. Con estas herramientas podemos corregir defectos, borrar elementos no
deseados o suavizar la apariencia de la imagen, etc.
Utilizaremos
Panel Capa

El software funciona por medio de capas que se superponen unas con otras, el orden de
estas va a determinar qué elemento aparece sobre cual.

El panel Capas de Photoshop contiene todas las capas, grupos de capas y efectos de capa
de una imagen.

Puede utilizar el panel Capas para mostrar y ocultar capas, crear capas nuevas y trabajar
con grupos de capas.
Utilizaremos
Menú Imagen - Ajustes

● Brillo/contraste

● Niveles

● Intensidad

● Tono/saturación

● Equilibrio de color
Ajustes
1. Brillo/contraste: según la opción utilizada, permite modificar la cantidad de luz u oscuridad en una
imagen o el contraste entre los tonos oscuros y claros y permite alejarlos o acercarlos.
2. Niveles: corrige la gama tonal y el equilibrio de color de una imagen ajustando los niveles de intensidad
de las sombras, los medios tonos y las iluminaciones de la imagen mediante la utilización de un gráfico
denominado histograma. Resulta ideal para corregir problemas de subexposición y sobreexposición. Los
ajustes se pueden guardar y cargar nuevamente en otro documento.
3. Intensidad: permite ajustar la intensidad o saturación del color global de una imagen. La intensidad
puede aumentar o disminuir la fuerza de los colores de forma equilibrada y proporcional y sin afectar los
tonos pieles. La saturación, por el contrario, es más agresiva con el cambio.
4. Tono/saturación: esta opción es más completa y compleja que la anterior. Posibilita ajustar valores de
tono, saturación y luminosidad de toda la imagen o de componentes de color individuales. También
posee una opción llamada colorear, que se utiliza para aplicar un color uniforme sobre toda la fotografía,
transformándola en una imagen monocroma.
5. Equilibrio de color: modifica la mezcla global de los colores de una imagen. Permite modificar la
temperatura de color de la imagen, crear o eliminar dominantes de color o acentuar algún color.
Formatos
JPEG - Es el formato más popular. El formato .JPEG (Joint Photographic Experts Group)
destaca por el alto nivel de compresión que ofrece y, que se basa en la pérdida de
calidad. Es por eso que este formato sacrifica valores imperceptibles por el ojo humano
para bajar el peso final, así como lo hace un archivo .MP3 con el sonido. No son muy
utilizadas entre quienes requieren fotos en alta calidad.

PNG - El formato .PNG (Portable Network Graphics) tiene un nivel de compresión que
casi no presenta pérdidas. La principal característica de este formato es que .PNG
permite el uso de transparencias (canal alpha o alfa) con bastante profundidad, ya sea
completa o en ciertos píxeles utilizando diferentes canales.
No son óptimas para diseño de impresión de alto nivel. Se utilizan para diseño web, o
en condiciones no profesionales, debido a su peso moderado y buena administración
del color.
JPEG PNG
Formatos
PSD - Es el formato por defecto del editor de imágenes Adobe Photoshop y por tanto es
un formato adecuado para editar imágenes con este programa y otros compatibles.

GIF - El famoso .GIF (Graphics Interchange Format), si bien es de baja calidad y ofrece una
escasa profundidad de colores, permite unir varios cuadros para formar una animación.
Pesa poco porque sacrifica la calidad de imagen.

SVG - Un formato menos conocido es .SVG (Scalable Vector Graphics), un formato estándar
en el diseño web, que trabaja en XML describiendo imágenes tanto estáticas como
animadas. Como cualquier imagen vectorial, su ventaja es ser totalmente escalable sin
ningún tipo de pérdida de calidad.
Formatos
RAW - Formato “en bruto” o “crudo”, esto quiere decir que contiene todos los píxeles de la
imagen captada, tal y como se han tomado. Es el formato que ofrece la mayor calidad
fotográfica y suele ser admitido por cámaras de gama media y alta (réflex, y compactas)
indicadas para fotógrafos aficionados avanzados y profesionales.

TIFF - El formato .TIFF (Tagged Image File Format) es el favorito a la hora de almacenar o
utilizar imágenes en altísima resolución y estupenda calidad, ya sea en la industria del
diseño o la publicidad.
Guardar y Exportar
Para guardar un archivo de Photoshop o PSD: vaya al menú Archivo y seleccione
cualquiera de los comandos de guardado: Guardar, Guardar como o Guardar una copia.
Al seleccionar un comando de guardado, se abre el cuadro de diálogo Guardar en el
ordenador o en los documentos en la nube.

Para exportar puede utilizar las opciones Exportación rápida cómo y Exportar como para
exportar un documento, mesas de trabajo, capas y grupos de capas de Photoshop en los
formatos de archivo PNG, JPG, y GIF.

Vaya a Archivo > Exportar > Exportación rápida como [formato de imagen].
El modo RGB (Red, Green y Blue)
utiliza los colores Rojo, Verde y Azul.
Es entendido como un estándar de la
Imagen digital. Es el modo por
defecto en las imágenes nuevas de
Ps., y es el que utilizan los monitores
para mostrar los colores.
(Lo desarrollaremos más adelante.)

(Archivo > Modo de color > RGB)

Tema: Imágenes

Si quieres vivir una vida creativa y artística, no debes mirar

demasiado hacia atrás. Debes estar dispuesto a arrojar a la
basura cualquier cosa que hiciste.

Autor/as/es: Steve Jobs

 Ejercicio
Clase 3
Práctica en Ps:
Editar una imagen, quitarle el
fondo, cambiar sus colores,
cambiar ajustes, cortarla, etc.
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.

Todo en el Aula Virtual.

Muchas gracias por tu atención.
Nos vemos pronto
 DISEÑO UX/UI
Clase 4
Research y Benchmarking
Les damos la bienvenida
Vamos a comenzar a grabar la clase
 Clase 03 Clase 04 Clase 05

Gráfico vectorial vs. Research y Benchmarking Arquetipos de Persona

Mapa de bits
● ¿Qué es una Persona?
● ¿Qué significa iterar?
● Diferenciación ● Proto Persona
● UX Research ● Mapa de empatía
● Resoluciones
● Insights ● Tarea para el Proyecto
● Adobe Photoshop
● Benchmarking Final
● Formatos de imágenes
● Ejercicio de práctica ● Tarea para el Proyecto
Final
 Diseño Centrado en el Usuario (DCU)

Analizar Diseñar Validar

Research Problemática

Benchmarking Competencia

Design Thinking

Empatizar Definir Idear Prototipar Evaluar

¿Qué piensan los usuarios?

Repaso - Diseño Centrado en el Usuario
El DCU comprende una serie de métodos y técnicas para analizar, diseñar y evaluar
hardware y software (interface)

Tiene un enfoque de diseño cuyo proceso está orientado por la información acerca de
quienes van a hacer uso del producto (usuarios)

Tener en cuenta: ¿Quién usará el sistema? y ¿qué tareas llevará a cabo con el mismo?

Un proceso iterativo (cíclico) en el cual diseño y evaluación se incorporan desde la fase

inicial del proyecto y en todas las fases que veremos a continuación:
Iterar
El desarrollo ágil propone un abordaje iterativo en sus 3 instancias:

● Análisis
● Diseño
● Validación
¿Qué significa iterar?
Iteraciones en el contexto de un proyecto se refieren a la técnica de
desarrollar y entregar componentes incrementales de funcionalidades de
un negocio.

Está comúnmente asociado al desarrollo ágil de software, pero podría

referirse a cualquier material.

Múltiples iteraciones contribuyen a crear un producto completamente

integrado.

Iterar es un proceso de mejora continua.

¿Qué es UX research?
La investigación de usuarios se enfoca en comprender los
comportamientos, necesidades y motivaciones de los usuarios a través de
técnicas de observación, análisis de tareas y otras metodologías de
retroalimentación.

Es el puente entre el Usuario y los Diseñadores.

UX research
● Observar:

○ Captar las necesidades de los usuarios, hablar con ellos, saber escuchar.
○ Identificar el público objetivo.
● Definir el problema, antes de ofrecer una solución debemos comprender el
problema.

● Respetar el objetivo del negocio, es tan importante como el diseño de la interfaz.

● Diseñamos para el usuario, basados en su experiencia, no en la nuestra, debemos ser

empáticos, es decir, poder ver desde su perspectiva, (no alcanza ponerse en el lugar
de otra persona, necesitamos saber que vive esa persona en esa situación en
particular.)
Investigación de Usuarios
Se trata de responder una pregunta o hipótesis que usted o su equipo de diseño tengan.

No existe un enfoque único para construir una práctica de investigación porque cada
organización tiene sus propios objetivos. Aprender qué tipo de investigación hacer, por qué y
cómo debe hacerlo son pasos importantes para establecer una práctica de investigación.

Algunos datos siempre son mejores que ninguno, pero saber cuándo recopilarlos y qué tipo de
datos necesita comienza por comprender el objetivo.

Behzod Sirjani, fundador de Yet Another Studio y exjefe de operaciones de investigación y

análisis de Slack, dice que debe intentar investigar cada vez que desee aumentar su
confianza en una decisión:

La investigación siempre debe orientarse en torno a una decisión porque saber lo que está
tratando de decidir lo ayudará a comprender lo que está tratando de ver y cómo realmente va a
hacer esa investigación.
Tema: UX research

Con las grandes decisiones, querés tener más confianza en

que estás haciendo lo correcto. Ahí es cuando deberías usar
la investigación como herramienta.

Autor/as/es: Behzod Sirjani

¿Qué es un insight?
Es un término utilizado en psicología proveniente del inglés que se puede
traducir al español como "visión interna" o más genéricamente
"percepción" o "entendimiento".

Mediante un insight el sujeto "capta", "internaliza" o comprende, una

"verdad" revelada.
Insight - visión interna o verdad revelada
No es un entendimiento común, sino un A veces podemos confundir los datos o el
descubrimiento de una verdad profunda feedback que recibimos de nuestros
consumidores como insights, pero lo cierto
y muchas veces oculta, que solo
es que debes ir más allá, pues la clave
encontraremos charlando con los usuarios para tener insights está en el análisis y la
e indagando sobre sus pensamientos más interpretación que hagas.
internos.
Los datos hacen parte del proceso para
¿Por qué hizo eso? ¿Qué pensó en ese obtener insights pero se convierten en
conocimientos o verdades claves cuando
momento? ¿Qué motivó su decisión?.
les añades interpretación. Datos sin
interpretación no son insights.
Entender el por qué de lo que hacen o la
motivación detrás de tus consumidores
hará que sean verdaderos insights.
Insight
En el ejemplo la marca Falabella quiso que su público de mujeres jóvenes-adultas se sintieran
identificadas con sus ideales apelando a los sentimientos en este comercial, utilizando el insight
que se basa en la “inseguridad”.

La marca descubre y analiza que para la mayoría de las mujeres, el miedo propio a enfrentar los
retos en sus carreras es su mayor enemigo, ellas mismas son su peor enemigo, ese miedo las
obliga a retroceder o abandonar antes de siquiera haberlo intentado, al igual que cuando de
pequeños una ola nos intimida y nos hace retroceder, estas mujeres están a punto de retroceder y
ceder ante el miedo y no enfrentar las situaciones más desafiantes de sus vidas.

Enviando un mensaje positivo, de empoderamiento femenino y coraje, nos muestra las

imágenes de estas mujeres enfrentando cada una de sus situaciones clave y sobretodo en la
última una mujer que enfrenta al miedo mismo, representado como un lobo, que se esfuma
en cuanto lo enfrenta. Todas terminan teniendo éxito, era cuestión de atreverse.

Finaliza con el lema de Atrévete. Cambia. Que las invita a desarrollarse plenamente.
Insight
Cuando encontramos un insight y lo Por ejemplo:
utilizamos a nuestro favor vamos a conseguir
que el usuario piense: “tal cual”, “a mi me
pasa lo mismo”, “me siento identificado”,
“yo se como se siente”, “me causa gracia o
tristeza porque me pasó”, “cómo lo
supieron?”, etc.

Y cuando el usuario piensa de esta manera y

se identifica de una forma sentimental con
nuestro mensaje, es cuando se logra una
conexión significativa con la marca, cuando
los emocione y forme parte de la vida de las
personas.
Tema: Insight

La gente no quiere comprar productos, quiere vivir

emociones; ser parte de sus historias

Autor/as/es: Andy Stalman

 Ejercicio
Clase 4
Pensar sobre las necesidades de
las personas a nuestro alrededor.
Determinar un problema que
tengan y su posible solución.
¿Qué es benchmarking?
El benchmarking competitivo consiste en identificar información específica
acerca de sus competidores directos, y compararlos.
Consiste en tomar "comparadores" o benchmarks, que podría traducirse como
medida de calidad.
Es un proceso de investigación que proporciona información valiosa para la
toma de decisiones.
Es una actividad continua porque el mercado está constantemente cambiando.
Al realizarlo nos da una “foto” del momento que estamos analizando.
No es un proceso para copiar o imitar a la competencia.
Benchmarking competitivo
“La toma de referencia de los mejores y lograr adoptar sus métodos y estrategias, dentro
de la legalidad establecida.” David Kearns

Hay tres tipos de Benchmarking:

● Funcional: ayuda a identificar las mejores prácticas en procesos, funciones,

operaciones o servicios de una empresa excelente en el área que se pretende mejorar.
● Interno: realizado en las empresas grandes con el fin de identificar buenas prácticas
relevantes en un área para replicarlas en diferentes países o unidades de negocio.
● Competitivo: pretende identificar las mejores prácticas con respecto a los líderes
del sector.
○ Según Boxwel: significa mediar sus funciones, procesos, actividades, productos y
servicios en comparación con los de sus competidores y mejorar los propios de
forma que sean, en el caso superar los mejores en su clase, pero, por lo
menos, iguales a los que de sus competidores.
Benchmarking competitivo
El Benchmarking no es un proceso de copia, consiste en sacar lo mejor de esa empresa
modelo, y adaptar las características que pensamos que son interesantes.

Coca Cola siempre ha sabido venderse bien, pero Pepsi oferta más productos a precios más
económicos. Los intentos de copia de los anuncios de Pepsi hacia Coca Cola no han
terminado saliendo bien.

Pero no hay que tomar al benchmarking como algo negativo, recordemos que es una
estrategia beneficiosa, que no es más que una forma de crecer, de ser más eficaz y
productivo.

Hemos visto el ejemplo de empresas que utilizan benchmarking y cómo les sirve para
mantener una mejora constante. Como hemos comentado aquí, el Benchmarking es una
estrategia a largo plazo de mejora constante observando alrededor tuyo.

El benchmarking puede hacernos dar el salto y aportar un punto de vista diferente, partiendo
de la observación y el análisis.
Estudio de caso: Desafío Pepsi
En octubre de 1993 Pepsi Cola lanzó una
campaña publicitaria, denominada "Desafío
Pepsi", consistente en invitar al público a
realizar una prueba de sabor a ciegas.

Grupos de promotores ubicados en distintos

puntos servían a los interesados dos vasos de
bebida cola proveniente de dos botellas
distintas, cuyas respectivas marcas e
identificaciones se mantenían ocultas. Se
pedía al consumidor que indicara cuál de las
dos bebidas le había gustado más y
efectuada la elección se descubren las
botellas - una de la bebida "Pepsi Cola" y la
otra de la bebida "Coca Cola"- de modo tal
que el interesado pudiera enterarse de cuál de
los dos había elegido. Resultando en que la
mayoría elegía Pepsi.
Tarea para el Proyecto Final
Para comenzar con el Proyecto Final que vamos a desarrollar durante todo este curso:

Vamos a realizar una Investigación de Usuario, indagando sobre sus comportamientos,

necesidades y motivaciones, realizando preguntas que nos permitan descubrir: ¿qué
hace?, ¿qué piensa?, ¿qué dice?, ¿en qué cree?, ¿que lo frustra?, ¿qué lo motiva?, ¿qué le
preocupa?

Tenemos que determinar en primera instancia:

● ¿Quién es nuestro usuario? (en quién basamos nuestra investigación)

● ¿Cuál es el problema? (necesidad detectada)
● ¿Cuál es la solución que vamos a ofrecer? (En forma de una App).

Informe: Nota periodística que valide la problemática, captura de redes sociales donde los
usuarios exponen que esa situación es un problema para ellos, etc.
Tarea para el Proyecto Final
Siguiendo con el Proyecto Final que vamos a desarrollar durante todo este curso:

Vamos a realizar un Benchmarking, comparando 3 competidores directos de nuestra App y

tenemos que realizar un cuadro comparativo:

● Nombre y “logo” de las 3 Apps (Para poder ver el diseño de mi competencia)

● Reseña de las 3 Apps (Para poder ver el enfoque de mi competencia)
● Captura de las 3 Apps (Para poder ver el diseño de mi competencia)
● Cantidad de Pasos por Acción (De 3 acciones por cada una de las 3 App)
● Vocabulario o Errores (Óptimo, Error menor, Error mayor - que no me permite operar)
● Diseño (Óptimo, Básico, Malo)
● Fortalezas y Debilidades (De cada una de las 3 App)
Finalmente realizar un breve informe con las conclusiones que obtenemos del cuadro. (¿Quién es
mi competencia?, ¿quiénes son sus usuarios?, ¿Cómo les hablan?, ¿En qué se diferencian?, ¿Qué
puedo ofrecer en mi App que ellos no tengan?, ¿Cómo puedo superar su propuesta?).
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.

Todo en el Aula Virtual.

Muchas gracias por tu atención.
Nos vemos pronto
 Mapa de bits vs. Gráfico vectorial
¿Qué es un mapa de bits? y ¿Cómo se diferencia de un gráfico
vectorial?
Veremos el siguiente ejemplo:
Mapa de bits o Bitmap:
Es un grupo de bits. Cada bit, la unidad mínima de información, es cada píxel que compone
la imagen. Cada píxel es un cuadro con información sobre su color y la unión de muchos
de estos cuadros crea la imagen completa.
No es escalable: alterar el tamaño de un bitmap provoca que esta se “píxele”.
Fotorrealista: pueden mostrar gran cantidad de detalles y variaciones sutiles en el
color.

Las fotografías son Mapas de Bits

Gráfico vectorial o curvas:

Está formada por la unión o superposición de unidades básicas de información pero en
lugar píxeles, estas unidades básicas son vectores matemáticos, las formas definidas por
los vectores se basan en las curvas Bézier.
Es escalable: se pueden escalar libremente sin sacrificar la calidad. (permanecen nítidas)
Totalmente editables: Los objetos de una imagen vectorial pueden constar de líneas, curvas
y formas con atributos editables como color, relleno y contorno.

Los “Logos” son Gráficos vectoriales

Resumen:
La mayoría de las imágenes digitales se pueden clasificar en: vectoriales y mapa de bits.
Las imágenes vectoriales tienen muchas ventajas como: que son escalables, es decir que
podemos aumentar o reducir su tamaño sin perder calidad/nitidez y que los archivos son
mucho más pequeños ya que requieren bastante menos información para definir la imagen.
Las vectoriales se originan en un software. No puede escanear una imagen y guardarla
como un archivo vectorial sin utilizar un software de conversión especial.
No son adecuadas para producir imágenes fotorrealistas. Generalmente consisten en áreas
sólidas de color (o degradados), pero no pueden representar los tonos sutiles continuos de
una fotografía. Para este fin utilizaremos los mapa de bits con cuidado de que cuenten con
la resolución correcta para el uso que queremos darle.
 Resolución
PPP (DPI): La resolución de una imagen es el número de píxeles por pulgada que contiene
(1 pulgada = 2,54 centímetros).
La resolución se expresa en PPP (puntos por pulgada en español) o DPI (dots per inch en
inglés).
Cuantos más píxeles haya por pulgada mejor será la calidad de la imagen.
Una resolución de 300 dpi significa que la imagen contiene 300 píxeles de ancho y 300
píxeles de alto, por tanto, se compone de 90.000 píxeles (300x300 ppp).
Por lo general, se considera que una resolución de 300 ppp para una imagen es más que
suficiente antes de la impresión.

La resolución de 72 PPP se utiliza en web

 ¿Qué es Photoshop?
Adobe Photoshop es el software líder en edición de imágenes de mapa de bits, desarrollado
por Adobe Systems Incorporated. Usado principalmente para el retoque de fotografías, su
nombre en español significa "taller de fotos".
Es conocido mundialmente.
Nos referiremos a este software como: Photoshop o Ps.

Ps es una más que conocida herramienta de edición de imágenes y fotografía, un programa

que se utiliza en PC para retocar fotos y hacer montajes de carácter profesional, aunque
también accesible para usuarios que llevan poco tiempo experimentando en ese terreno.
Ps al ser un programa de edición fotográfica, trabaja con mapas de bits y cualquier formato
de imagen, permitiendo hacer pinturas digitales o montajes fotográficos y manipular,
modificar, editar o retocar cuanto se desee a través de todas las herramientas de las que
dispone.

Interfaz de Ps:
Al ejecutar el programa podemos observar la interfaz estándar de Photoshop.
En la parte superior de la ventana se encuentra la barra menús. En el costado izquierdo la
barra de herramientas, y, en el margen derecho, los paneles de herramientas principales:
capas, color, bibliotecas, etcétera. En la parte inferior encontramos una barra de estado.
Cabe destacar que los programas de Adobe tienen una interfaz dividida en paneles, que
pueden ser flotantes, es decir que pueden estar flotando sobre la pantalla en vez de estar
pegados a ella, lo cual nos permite moverlos de un lugar a otro y reubicarlos según nuestra
conveniencia.
Barra de Menú:
Menú archivo: aquí encontramos los típicos comandos, como abrir, cerrar, guardar,
importar, exportar, nuevo, etcétera. Este menú es muy similar al de cualquier otro
programa, sea o no de diseño. Desde aquí podemos crear un nuevo documento y
determinar su nombre, tamaño, resolución, modo de color y profundidad de bits.
Menú edición: se encuentran los comandos que permiten copiar, cortar, pegar, deshacer y
rehacer. También se encuentran los comandos de transformación y opciones,
personalización y preferencias del programa.
Menú imagen: aquí podemos modificar todos los valores de la imagen, como el tamaño, el
modo de color y la profundidad de color. También se pueden realizar todos los ajustes de
imagen disponibles, como brillo, contraste, tono, saturación, etcétera.
Menú capa: aquí encontramos todas las opciones de capas, como crear, duplicar, agrupar,
etcétera.
Menú selección: en este menú podemos editar, crear, perfeccionar y guardar nuestras
selecciones.
Menú filtro: desde aquí podemos aplicar filtros y también están las herramientas de enfoque
y desenfoque.
Menú 3D: todas las herramientas de la creación y edición de elementos tridimensionales.
Menú vista: desde él podemos controlar los elementos que se muestran en pantalla.
Menú ventana: aquí podemos hacer visible u ocultar cualquier panel de herramientas,
personalizar el espacio de trabajo y organizar los documentos abiertos.
Menú ayuda: para acceder a la ayuda del programa y también los datos relacionados con la
cuenta de usuario y toda la documentación pertinente al programa y la versión utilizada.

Barra de Herramientas:
En el costado izquierdo de la pantalla estándar de Photoshop, ubicamos la barra de
herramientas.
En ella encontramos todas las herramientas necesarias para trabajar una imagen mapa de
bits.
Dichas herramientas están organizadas por categorías.
También podemos acceder a las diferentes herramientas mediante atajos de teclado.
Veremos todas las herramientas en la siguiente imágen:

Pueden expandir algunas herramientas con el fin de ver las que contiene ocultas. Un
triángulo pequeño en el lateral inferior derecho del icono de herramienta indica la presencia
de herramientas ocultas.
Para ver información sobre una herramienta basta con colocar el puntero sobre ella. En la
información de herramientas que se muestra debajo del puntero aparece el nombre de la
herramienta.

Herramientas de selección: permiten seleccionar y aislar una parte de la imagen para poder
editarla independientemente del resto de ella.
Herramientas de recorte y creación de sectores: las herramientas de recorte nos permiten
recortar la imagen. La diferencia con las selecciones es que la zona excluida es eliminada
del archivo. Los sectores, por otra parte, son espacios rectangulares en la imagen que
pueden contener propiedades web, como enlaces, botones rollover y animaciones.
Herramientas de medida: estas nos permiten medir las dimensiones de partes del
documento. También podemos medir la información de color de un píxel, tomar muestras y
crear notas.
Herramientas de retoque: aquí encontramos todas las herramientas que nos permiten
modificar los píxeles de la imagen.
Herramientas de pintura: ellas nos permiten pintar, borrar y colorear sobre una imagen.
Herramientas de texto y dibujo: aquí encontramos instrumentos de creación y modificación
de textos. Las herramientas de dibujo de este grupo son de dibujo vectorial, similares a las
de Adobe Illustrator, y las formas básicas, como rectángulos, elipses y líneas.
Herramientas de navegación: estas nos permiten desplazarnos libremente por el
documento, hacer zoom o rotar la vista.

Utilizaremos:
Menú Herramientas:
Selección. Con estas herramientas podemos seleccionar la parte de la imagen que
queremos editar.
Crop. Con esta herramienta vamos a poder recortar la imagen al tamaño que deseemos.
Retoque. Con estas herramientas podemos corregir defectos, borrar elementos no
deseados o suavizar la apariencia de la imagen, etc.
Panel capa:
El software funciona por medio de capas que se superponen unas con otras, el orden de
estas va a determinar que elemento aparece sobre cual.
El panel Capas de Photoshop contiene todas las capas, grupos de capas y efectos de capa
de una imagen.
Puede utilizar el panel Capas para mostrar y ocultar capas, crear capas nuevas y trabajar
con grupos de capas.
Menú Imagen - Ajustes:
Brillo/contraste
Niveles
Intensidad
Tono/saturación
Equilibrio de
color

Ajustes:
Brillo/contraste: según la opción utilizada, permite modificar la cantidad de luz u oscuridad
en una imagen o el contraste entre los tonos oscuros y claros y permite alejarlos o
acercarlos.
Niveles: corrige la gama tonal y el equilibrio de color de una imagen ajustando los niveles de
intensidad de las sombras, los medios tonos y las iluminaciones de la imagen mediante la
utilización de un gráfico denominado histograma. Resulta ideal para corregir problemas de
subexposición y sobreexposición. Los ajustes se pueden guardar y cargar nuevamente en
otro documento.
Intensidad: permite ajustar la intensidad o saturación del color global de una imagen. La
intensidad puede aumentar o disminuir la fuerza de los colores de forma equilibrada y
proporcional y sin afectar los tonos piel. La saturación, por el contrario, es más agresiva con
el cambio.
Tono/saturación: esta opción es más completa y compleja que la anterior. Posibilita ajustar
valores de tono, saturación y luminosidad de toda la imagen o de componentes de color
individuales. También posee una opción llamada colorear, que se utiliza para aplicar un
color uniforme sobre toda la fotografía, transformándola en una imagen monocroma.
Equilibrio de color: modifica la mezcla global de los colores de una imagen. Permite
modificar la temperatura de color de la imagen, crear o eliminar dominantes de color o
acentuar algún color.

Formatos:
JPEG - Es el formato más popular: El formato .JPEG (Joint Photographic Experts Group)
destaca por el alto nivel de compresión que ofrece y, que se basa en la pérdida de calidad.
Es por eso que este formato sacrifica valores imperceptibles por el ojo humano para bajar el
peso final, así como lo hace un archivo .MP3 con el sonido. No son muy utilizadas entre
quienes requieren fotos en alta calidad.
PNG - El formato .PNG (Portable Network Graphics) tiene un nivel de compresión que casi
no presenta pérdidas. La principal característica de este formato es que .PNG permite el
uso de transparencias (canal alpha o alfa) con bastante profundidad, ya sea completa o en
ciertos píxeles utilizando diferentes canales. No son óptimas para diseño de impresión de
alto nivel. Se utilizan para diseño web, o en condiciones no profesionales, debido a su peso
moderado y buena administración del color.

PSD - Es el formato por defecto del editor de imágenes Adobe Photoshop y por tanto es un
formato adecuado para editar imágenes con este programa y otros compatibles.
GIF - El famoso .GIF (Graphics Interchange Format), si bien es de baja calidad y ofrece una
escasa profundidad de colores, permite unir varios cuadros para formar una animación.
Pesa poco porque sacrifica la calidad de imagen.
SVG - Un formato menos conocido es .SVG (Scalable Vector Graphics), un formato
estándar en el diseño web, que trabaja en XML describiendo imágenes tanto estáticas como
animadas. Con la llegada del lenguaje HTML5 ha hecho que caiga en desuso. Como
cualquier imagen vectorial, su ventaja era ser totalmente escalable sin ningún tipo de
pérdida de calidad.
BMP - Cuando hablamos de imágenes estamos refiriéndonos generalmente a un “mapa de
bits”, y por eso .BMP es la extensión otorgada por Windows a esos archivos. El formato
padre de varios de los ya nombrados, obviamente depende 100% de los píxeles y su
información, por lo que no se puede comprimir, y preferentemente tampoco se debería
escalar (si buscamos mantener calidad).
RAW - Formato “en bruto” o “crudo”, esto quiere decir que contiene todos los píxeles de la
imagen captada, tal y como se han tomado. Es el formato que ofrece la mayor calidad
fotográfica y suele ser admitido por cámaras de gama media y alta (réflex, y compactas)
indicadas para fotógrafos aficionados avanzados y profesionales.
TIFF - El formato .TIFF (Tagged Image File Format) es el favorito a la hora de almacenar o
utilizar imágenes en altísima resolución y estupenda calidad, ya sea en la industria del
diseño o la publicidad.

Guardar y Exportar:
Para guardar un archivo de Photoshop o PSD: vaya al menú Archivo y seleccione
cualquiera de los comandos de guardado: Guardar, Guardar como o Guardar una copia. Al
seleccionar un comando de guardado, se abre el cuadro de diálogo Guardar en el
ordenador o en los documentos en la nube.
Para exportar puede utilizar las opciones Exportación rápida como y Exportar como para
exportar un documento, mesas de trabajo, capas y grupos de capas de Photoshop en
los formatos de archivo PNG, JPG, y GIF.
Vaya a Archivo > Exportar > Exportación rápida como [formato de imagen].

El modo RGB (Red, Green y Blue) utiliza los colores Rojo, Verde y Azul. Es entendido como
un estándar de la Imagen digital. Es el modo por defecto en las imágenes nuevas de Ps., y
es el que utilizan los monitores para mostrar los colores.
(Lo desarrollaremos más adelante.)
"Si quieres vivir una vida creativa y artística, no debes mirar demasiado hacia atrás. Debes
estar dispuesto a arrojar a la basura cualquier cosa que hiciste".
Steve Jobs.

Ejercicio Clase 3
Práctica de Photoshop: editar una imagen, quitarle el fondo, cambiar sus colores, cambiar
ajustes, cortarla, etc.
 Research y Benchmarking
Repaso - Diseño Centrado en el Usuario
El DCU comprende una serie de métodos y técnicas para analizar, diseñar y evaluar
hardware y software (interface)
Tiene un enfoque de diseño cuyo proceso está orientado por la información acerca de
quienes van a hacer uso del producto (usuarios)
Tener en cuenta: ¿Quién usará el sistema? y qué tareas llevará a cabo con el mismo?
Un proceso iterativo (cíclico) en el cual diseño y evaluación se incorporan desde la fase
inicial del proyecto y en todas las fases que veremos a continuación:
Iterar:
El desarrollo ágil propone un abordaje iterativo en sus 3 instancias:
Análisis
Diseño
Validación

¿Qué es UX Research?
La investigación de usuarios se enfoca en comprender los comportamientos, necesidades
y motivaciones de los usuarios a través de técnicas de observación, análisis de tareas y
otras metodologías de retroalimentación.
Es el puente entre el Usuario y los Diseñadores.

UX research:
Observar:
Captar las necesidades de los usuarios, hablar con ellos, saber escuchar.
Identificar el Público objetivo.
Definir el Problema, antes de ofrecer una solución debemos comprender el problema.
Respetar eI Objetivo del negocio, es tan importante como el diseño de la interfaz.
Diseñamos para el usuario, basados en su experiencia, no en la nuestra, debemos ser
empáticos, es decir, poder ver desde su perspectiva, (no alcanza ponerse en el lugar de
otra persona, necesitamos saber que vive esa persona en esa situación en particular.)
 ¿Qué significa iterar?
Iteraciones en el contexto de un proyecto se refieren a la técnica de desarrollar y entregar
componentes incrementales de funcionalidades de un negocio.
Está comúnmente asociado al desarrollo ágil de software, pero podría referirse a cualquier
material.
Múltiples iteraciones contribuyen a crear un producto completamente integrado.
Iterar es un proceso de mejora continua.

Investigación de Usuarios:
Se trata de responder una pregunta o hipótesis que usted o su equipo de diseño tengan.
No existe un enfoque único para construir una práctica de investigación porque cada
organización tiene sus propios objetivos. Aprender qué tipo de investigación hacer, por qué
y cómo debe hacerlo son pasos importantes para establecer una práctica de investigación.
Algunos datos siempre son mejores que ninguno, pero saber cuándo recopilarlos y qué
tipo de datos necesita comienza por comprender el objetivo.
Behzod Sirjani, fundador de Yet Another Studio y exjefe de operaciones de investigación y
análisis de Slack, dice que debe intentar investigar cada vez que desee aumentar su
confianza en una decisión:
La investigación siempre debe orientarse en torno a una decisión porque saber lo que está
tratando de decidir lo ayudará a comprender lo que está tratando de ver y cómo realmente
va a hacer esa investigación.

"Con las grandes decisiones, querés tener más confianza en que estás haciendo lo
correcto. Ahí es cuando deberías usar la investigación como herramienta".
Behzod Sirjani.
 ¿Qué es un insight?
Es un término utilizado en psicología proveniente del inglés que se puede traducir al
español como "visión interna" o más genéricamente "percepción" o "entendimiento".
Mediante un insight el sujeto "capta", "internaliza" o comprende, una "verdad" revelada.

Insight:
No es un entendimiento común, sino un descubrimiento de una verdad profunda y muchas
veces oculta, que solo encontraremos charlando con los usuarios e indagando sobre sus
pensamientos más internos.
¿Por qué hizo eso? ¿Qué pensó en ese momento? ¿Que motivó su decisión?.
A veces podemos confundir los datos o el feedback que recibimos de nuestros
consumidores como insights, pero lo cierto es que debes ir más allá, pues la clave para
tener insights está en el análisis y la interpretación que hagas.
Los datos hacen parte del proceso para obtener insights pero se convierten en
conocimientos o verdades claves cuando les añades interpretación. Datos sin interpretación
no son insights.
Entender el por qué de lo que hacen o la motivación detrás de tus consumidores hará que
sean verdaderos insights.
En el ejemplo la marca Falabella quiso que su público de mujeres jóvenes-adultas se
sintieran identificadas con sus ideales apelando a los sentimientos en este
comercial, utilizando el insight que se basa en la “inseguridad”.
La marca descubre y analiza que para la mayoría de las mujeres, el miedo propio a
enfrentar los retos en sus carreras es su mayor enemigo, ellas mismas son su peor
enemigo, ese miedo las obliga a retroceder o abandonar antes de siquiera haberlo
intentado, al igual que cuando de pequeños una ola nos intimida y nos hace retroceder,
estas mujeres están a punto de retroceder y ceder ante el miedo y no enfrentar las
situaciones más desafiantes de sus vidas.
Enviando un mensaje positivo, de empoderamiento femenino y coraje, nos muestra las
imágenes de estas mujeres enfrentando cada una de sus situaciones clave y sobretodo en
la última una mujer que enfrenta al miedo mismo, representado como un lobo, que se
esfuma en cuanto lo enfrenta. Todas terminan teniendo éxito, era cuestión de atreverse.
Finaliza con el lema de Atrévete. Cambia. Que las invita a desarrollarse plenamente.
Cuando encontramos un insight y lo utilizamos a nuestro favor vamos a conseguir que el
usuario piense: “tal cual”, “a mi me pasa lo mismo”, “me siento identificado”, “yo se como se
siente”, “me causa gracia o tristeza porque me pasó”, “cómo lo supieron?”, etc.
Y cuando el usuario piensa de esta manera y se identifica de una forma sentimental con
nuestro mensaje, es cuando se logra una conexión significativa con la marca, cuando los
emocione y forme parte de la vida de las personas.
Por ejemplo:
“La gente no quiere comprar productos, quiere vivir emociones; ser parte de sus historias”
Andy Stalman.

Ejercicio Clase 4
Observar las necesidades de las personas a nuestro alrededor, determinar un problema que
tengan y su posible solución.
 ¿Qué es Benchmarking?
El benchmarking competitivo consiste en identificar información específica acerca de sus
competidores directos, y compararlos.
Consiste en tomar "comparadores" o benchmarks, que podría traducirse como medida de
calidad.
Es un proceso de investigación que proporciona información valiosa para la toma de
decisiones.
Es una actividad continua porque el mercado está constantemente cambiando. Al realizarlo
nos da una “foto” del momento que estamos analizando.
No es un proceso para copiar o imitar a la competencia.

Benchmarking competitivo
“La toma de referencia de los mejores y lograr adoptar sus métodos y estrategias, dentro de
la legalidad establecida.” David Kearns
Hay tres tipos de Benchmarking:
Funcional: ayuda a identificar las mejores prácticas en procesos, funciones, operaciones o
servicios de una empresa excelente en el área que se pretende mejorar.
Interno: realizado en las empresas grandes con el fin de identificar buenas prácticas
relevantes en un área para replicarlas en diferentes países o unidades de negocio.
Competitivo: pretende identificar las mejores prácticas con respecto a los líderes del sector.
Según Boxwel: significa mediar sus funciones, procesos, actividades, productos y servicios
en comparación con los de sus competidores y mejorar los propios de forma que sean, en el
caso ideal los mejores en su clase, pero, por lo menos, superiores a los que de sus
competidores.

En octubre de 1993 Pepsi Cola lanzó una campaña publicitaria, denominada "Desafío
Pepsi", consistente en invitar al público a realizar una prueba de sabor a ciegas.
Grupos de promotores ubicados en distintos puntos servían a los interesados dos vasos de
bebida cola proveniente de dos botellas distintas, cuyas respectivas marcas e
identificaciones se mantenían ocultas. Se pedía al consumidor que indicara cuál de las dos
bebidas le había gustado más y efectuada la elección se descubren las botellas - una de la
bebida "Pepsi Cola" y la otra de la bebida "Coca Cola"- de modo tal que el interesado
pudiera enterarse de cuál de los dos había elegido. Resultando en que la mayoría elegía
Pepsi.

Benchmarking competitivo
El Benchmarking no es un proceso de copia, consiste en sacar lo mejor de esa empresa
modelo, y adaptar las características que pensamos que son interesantes.
Coca Cola siempre ha sabido venderse bien, pero Pepsi oferta más productos a precios
más económicos. Los intentos de copia de los anuncios de Pepsi hacia Coca Cola no han
terminado saliendo bien.
Pero no hay que tomar al benchmarking como algo negativo, recordemos que es una
estrategia beneficiosa, que no es más que una forma de crecer, de ser más eficaz y
productivo.
Hemos visto el ejemplo de empresas que utilizan benchmarking y cómo les sirve para
mantener una mejora constante. Como hemos comentado aquí, el Benchmarking es una
estrategia a largo plazo de mejora constante observando alrededor tuyo.
El benchmarking puede hacernos dar el salto y aportar un punto de vista diferente,
partiendo de la observación y el análisis.
 Proyecto Final
TAREA PARA EL PROYECTO FINAL
Para comenzar con el Proyecto Final que vamos a desarrollar durante todo este curso:
Vamos a realizar una Investigación de Usuario, indagando sobre sus comportamientos,
necesidades y motivaciones, realizando preguntas que nos permitan descubrir: ¿qué hace?,
¿qué piensa?, ¿qué dice?, ¿en qué cree?, ¿que lo frustra?, ¿qué lo motiva?, ¿qué le
preocupa?...
y tenemos que determinar en primera instancia:
¿Quién es nuestro Usuario? (en quién basamos nuestra investigación)
¿Cuál es el Problema? (necesidad detectada)
¿Cuál es la Solución que vamos a ofrecer? (En forma de una App).
Pensar 2 opciones, por si una de ellas es descartada más adelante, pero tener en cuenta
que vamos a desarrollar solo una de estas dos opciones.

Para comenzar con el Proyecto Final que vamos a desarrollar durante todo este curso:
Vamos a realizar un Benchmarking, comparando 3 competidores directos de nuestra App.
y tenemos que realizar un cuadro comparativo:
Nombre y “logo” de las 3 App (Para poder ver el diseño de mi competencia)
Reseña de las 3 App (Para poder ver el enfoque de mi competencia)
Captura de las 3 App (Para poder ver el diseño de mi competencia)
Cantidad de Pasos por Acción (De 3 acciones por cada una de las 3 App)
Vocabulario o Errores (Óptimo, Error menor, Error mayor - que no me permite operar)
Diseño (Óptimo, Básico, Malo)
Fortalezas y Debilidades (De cada una de las 3 App)
Finalmente realizar un breve informe con las conclusiones que obtenemos del cuadro.
(¿Quién es mi competencia?, ¿quiénes son sus usuarios?, ¿Cómo les hablan?, ¿En qué se
diferencian?, ¿Qué puedo ofrecer en mi App que ellos no tengan?, ¿Cómo puedo superar
su propuesta?.)
DISEÑO UX/UI
Clase 5
User Persona
Les damos la bienvenida
Vamos a comenzar a grabar la clase
 Clase 04 Clase 05 Clase 06

Research y Benchmarking Arquetipos de Persona Entrevistas Cualitativas

● ¿Qué significa iterar? ● ¿Qué es una Persona? ● ¿Qué es una entrevista?

● UX Research ● Tipos de entrevista
● Proto Persona y User
● Insights ● Etapas de una entrevista
Persona
● Benchmarking ● Tarea para el Proyecto
● Tarea para el Proyecto ● Mapa de empatía Final
Final ● Tarea para el Proyecto
Final
 Diseño Centrado en el Usuario (DCU)

Analizar Diseñar Validar

Design Thinking

Empatizar Definir Idear Prototipar Evaluar

Proto Personas Entrevistas Cualitativas

Mapa de empatía
¿Qué es una persona?
Según la Real Academia Española los dos primeros resultados que
aparecen son:
1. f. Individuo de la especie humana.
2. f. Hombre o mujer cuyo nombre se ignora o se omite.
Persona
Según la Sociología: puede definirse persona como un ser sociable que vive y se desarrolla
en sociedad, pero al mismo tiempo nunca deja de actuar con un carácter individual. Es
decir somos “yo” y “nosotros” al mismo tiempo.

Según la Psicología: persona designa a un ser concreto, abarcando tanto sus aspectos
físicos como psíquicos para definir su carácter singular y único. Percibe e interpreta el
estado de ánimo, el carácter y la forma de actuar de las personas, además estudia las
cualidades y facultades que tiene la persona, como la razón, los sentimientos y los valores
que lo distingue de los demás seres
Persona en el diseño UX/UI

● Es un individuo ficticio que se crea para identificar un público específico.

● Son modelos de personas que representan a los usuarios durante el

proceso de diseño.

● Son imaginarios pero están creados con mucho detallismo y precisión.

● No están diseñadas únicamente según su información demográfica.

Tema: Personas en Diseño UX/UI

Las personas son arquetipos basados en patrones de

comportamiento revelados durante el proceso de investigación
de usuarios.

Autor/as/es: Alan Cooper

¿Por qué necesitamos crear personas?

● Comprender lo que quieren los usuarios no es suficiente. Tienes que

entender el contexto.

● Para diseñar una experiencia que deleite a los usuarios, debemos

documentar sus pensamientos, sentimientos, expectativas y motivaciones.

● Las personas combinan estos conocimientos en una narrativa que ayuda

a tomar mejores decisiones y diseñar mejores productos.
Proto persona

● Utilizaremos los datos recolectados de la investigación de usuarios,

nuestras observaciones y suposiciones para crear una hipótesis.

● La Proto persona es una primera versión (sin validar) de lo que luego va

a ser la User persona (validada).
Características
● Las proto personas son una parte clave del diseño UX. Nos aseguramos de hablar al
público objetivo y construimos personas detalladas que reflejan los deseos,
necesidades, expectativas y frustraciones de los usuarios.

● Cuando se habla de grupos de usuarios, segmentos de mercado y otros datos, puede

ser fácil olvidar que al final hay un ser humano. Las personas son más que
estadísticas. Son narrativas que van a inspirar y respaldar las decisiones que
tomemos.

● Siempre que la comprensión de todos los que formen parte del proceso de diseño sea
clara, algo tan simple como el nombre de la persona disparará una amplia gama de
datos: datos demográficos, atributos, deseos, comportamientos, preocupaciones,
miedos y citas.
La proto persona debe tener
1. Datos: nombre y apellido, profesión.

2. Datos demográficos: lugar de residencia, edad, sexo, nivel de educación, estado civil, ingresos

3. Biografía: breve reseña de cómo es, cómo vive, qué la define

4. Intereses: hobbies, modo de vida

5. Hábitos de consumo: ¿Qué consume?, cómo lo hace?, ¿por qué lo hace?

6. Objetivos, sueños, metas: ¿Qué quieren hacer y por qué?

7. Su relación con la tecnología: ¿Qué usa?, ¿con qué frecuencia?, para qué?

8. Frustraciones y motivaciones: ¿Qué se interpone en su camino? ¿Qué los hace avanzar?

9. Una frase que identifique lo mejor posible cómo piensa: Se expresa entre comillas “quote”
Una imagen que nos de conexión emocional

Es muy importante darle

una cara a la proto
persona que estamos
creando, no olvidemos
que representan a
personas reales.

Utilicen todo lo aprendido en las clases anteriores sobre imagen al momento de

seleccionar la fotografía y darle el tratamiento digital apropiado en Photoshop.
Requisitos básicos de la fotografía
Que la imagen esté nítida (buena calidad,
no “pixelada”).

Que el foco esté en el sujeto.

Que no esté sobreexpuesta (demasiado

blanca) o subexpuesta (demasiado
oscura).

Que esté centrada en el punto de interés.

Que no tenga manchas, reflejos o marcas

de agua.

Que el tratamiento del color sea el

adecuado (sin filtros).
 Ejercicio
Clase 5
Comentemos en clase de qué
tratan nuestras ideas de
Proyecto y qué persona creen
que podría identificar a sus
usuarios.
¿Qué es un mapa de empatía?
Es un esquema visual con preguntas sobre el cliente objetivo ideal de un
producto o servicio determinado.
Sirve para entender mejor a este prototipo de persona y por tanto poder
satisfacer mejor sus necesidades y comunicarnos empatizando al máximo
con ella.
Este lienzo ayuda a reflexionar sobre cómo la afectan el entorno y las
emociones internas que vive.
Es importante tomarla como uno de los puntos de partida para identificar
cómo es este user persona.
¿Qué piensa y qué siente?

¿Qué da sentido a su vida?

¿Qué le preocupa?

¿Qué le hace feliz?

¿Qué otros pensamientos y sentimientos podrían motivar su

comportamiento?
¿Qué ve?

¿Qué ve en el mercado?

¿Qué ve en su entorno inmediato?

¿Qué ve a otros diciendo y haciendo?

¿Qué está viendo y leyendo?

¿Qué escucha?

¿Qué está oyendo decir a los demás?

¿Qué está escuchando de sus amigos?

¿Qué está escuchando de sus colegas?

¿Qué está escuchando de otros?

¿Qué dice y qué hace?
¿Qué le hemos oído decir?
¿Qué podemos imaginarle diciendo?
¿Cómo es su rutina?
¿Qué comportamiento hemos observado?
¿Qué podemos imaginarle haciendo?
¿Qué necesita hacer de manera diferente?
¿Qué trabajo(s) quiere o necesita conseguir?
¿Qué decisiones debe tomar?
¿Cómo sabremos que tuvo éxito?
¿Qué lo motiva?

¿Cuáles son sus deseos?

¿Cuáles son sus necesidades?

¿Qué espera que suceda?

¿Cuáles son sus sueños?

¿Qué lo frustra?

¿Cuáles son sus miedos?

¿Cuáles son sus obstáculos?

¿Qué teme que suceda?

¿Cuáles son sus frustraciones?

¿Qué le causa ansiedad?

¿Qué lo enoja?
Tarea para el Proyecto Final
Para continuar con el Proyecto Final que vamos a desarrollar durante todo este curso:

Vamos a realizar un Mapa de Empatía, que nos ayudará a responder preguntas específicas
sobre nuestros usuarios siempre teniendo en mente nuestra idea de App.

Tenemos que determinar en primera instancia:

● ¿Quién es la persona que estamos intentando comprender? (proto persona)

● ¿En qué situación se encuentra? (datos que estén relacionados con nuestra app)
● ¿Cuál es su papel en la situación?
○ (¿Por qué es él/ella y no otro/a? que lo conecta a nuestro proyecto.
¿Qué condiciones hace que sea un futuro usuario de nuestra app?).
Tarea para el Proyecto Final
Vamos a realizar las Fichas de dos (dos) Proto Personas que deben ser diferentes y contener la siguiente
información:
● Datos personales y foto.
● Datos demográficos.
● Biografía.
● Intereses
● Hábitos de consumo.
● Objetivos, sueños, metas.
● Su relación con la tecnología.
● Frustraciones y motivaciones.
● Una frase.
Tener en cuenta que todas las tareas serán entregadas juntas en la Pre entrega (que se encuentra
marcada en el cronograma del curso de la clase 0)
En el ejemplo se muestra la presentación de 2 protopersonas, de las cuales una fue validada y pasó a ser
user persona luego de las entrevistas.
Las tareas se entregan mediante una presentación de Google Slides por equipo.
Ejemplos de entrega
OBJETIVO
Facilitar la búsqueda de un
psicólogo acorde a la problemática
del paciente, tipo de terapia,
características del profesional,
experiencia, disponibilidad horaria y
ubicación.
SOLUCIÓN PROPUESTA
Crear una aplicación mobile en donde
los usuarios puedan buscar un
psicólogo según la problemática del
paciente, la especialidad del
profesional, costo, disponibilidad
horaria, modalidad (presencial o
virtual), zona geográfica; y acceder a
una breve reseña del mismo para
poder ponerse en contacto y
coordinar un primer encuentro con el
profesional
RESEARCH
NOTAS PERIODÍSTICAS: pretendemos encontrar por dónde se aborda la problemática elegida y cómo es
tratada la misma desde los distintos medios digitales. En esta búsqueda podremos comprobar si es o no
una problemática actual.

Tu Terapia - Nota periodística:

En la nota se menciona cuál es el modelo de monetización de la app. Se basa en comisiones. “Somos un
marketplace y cobramos una comisión por sesión de aproximadamente el 20%. La otra parte se la queda el
psicólogo por lo que trabaja”, explica. El año pasado, la facturación de TuTerapia fue de 60 mil dólares.
También tienen un plan para empresas que se llama: TuTerapia Business. Fuente:
[Link]
(02/05/2021)

Cómo buscar un psicólogo - Nota periodística:

En la nota se mencionan las pautas necesarias para encontrar y elegir a los profesionales de la salud mental
que mejor se adapten al paciente. Cómo buscar un psicólogo en 8 pasos.
[Link]
 BENCHMARKING
Conozcamos a nuestra competencia.

[Link] Psicoterapia Online [Link]

Plataforma dedicada a acortar las Plataforma que ofrece un servicio Plataforma de atención
distancias entre el profesional y el de psicología en línea, de manera psicológica online creada por dos
consultante. Ofrece una amplia privada y personal. Cuenta con psicólogos.
variedad de terapeutas, profesionales de la salud mental, Permite que cualquier persona
distribuidos en diferentes zonas del psicólogos y psicólogas pueda acceder a consultas con su
país, para conformar una red de cualificados, para ofrecer la "terapeuta ideal". Mediante una
profesionales que logren brindar comprensión y el sustento que el serie de preguntas la persona
sus servicios de ayuda a cada vez paciente está buscando. hace un match con un
más personas. psicólogo/a de su equipo.
Fortalezas y Debilidades de cada una:
1. FORTALEZAS: Es una página web intuitiva,
eficaz, eficiente.
DEBILIDADES: Su diseño no está logrado,
resulta poco moderno.

2. FORTALEZAS: Es la única que se accede desde

la App Store.
DEBILIDADES: No es realmente una app, ya que
te redirige a una web. No tiene diseño aplicado,
es más bien una serie de formularios.

3. FORTALEZAS: Es una página web: intuitiva,

amigable, eficaz, eficiente y con buen diseño
aplicado.
DEBILIDADES: Cometió un error en el resultado,
recomendó mujeres cuando se había
seleccionado la opción de terapeuta hombre.
Conclusiones

Tu Terapia
#1 Clara, muy intuitiva, rápido de completar y avanzar.
Los resultados de la búsqueda deberían coincidir con lo seleccionado de las
opciones dadas.

Psicoterapia Online
#2 Claro, conciso, y explicativa. Intuitiva, didáctica, con categorías bien diferenciadas.
Formulario de registración debería ser más breve.

Psiconnection
#3 Claro, conciso, y explicativa. Intuitiva, didáctica, con categorías bien
diferenciadas.
 Sobre Marta
Marta Bio: María Marta nunca hizo terapia. Tiene tres hijos adultos independizados. El
menor se fue a vivir sólo recientemente, el mayor vive en Europa y el otro vive
Ama de casa con sus hijos y su esposa en Tigre. El marido aún trabaja por lo que ella pasa
mucho tiempo sola. Los fines de semana la visitan los nietos y pasan el día en la
Tipo de Usuario:
pileta. El domingo a la noche siente un bajón sabiendo que se viene una
Quiere ir a terapia
semana sola. Su hobbie es mirar Netflix y fotos de su familia en Facebook,
presencial.
ambas aplicaciones descargadas por su hijo cuando la visitó por última vez.

“Al final… lo primero es la familia.” Objetivos y Metas

Los Benvenuto ● Conectarse con sus nietos.
● Encontrar una actividad que la satisfaga.
● Generar recuerdos lindos para su familia.

Género: Estado Civil:

Femenino Casada Frustraciones Motivaciones
● Odia sentirse sola. ● Poder ser feliz estando
Edad: Ciudad: ● Le molesta no poder sola.
60 años Banfield, Bs. As., Argentina. comunicarse con sus hijos. ● Encontrar un hobbie.
● Le molesta no ser ● Hablar con alguien para
independiente en el uso de contar sus problemas.
JUSTIFICACIÓN: tiene capacidad económica la tecnología ● Sentirse escuchada..
para llevar adelante una psicoterapia. Pertenece ● Sentir que todos están
a la generación baby boomer. Está en sus ocupados y ella no.. Habilidades
primeros años de adulto mayor. Padece de
Tecnológicas: no está
síndrome del nido vacío.
familiarizada con las apps. Para
todo lo tecnológico necesita
ayuda de su hijo menor.
 Sobre Pili
Pilar Bio: Pilar ya ha hecho terapia antes. Vive con sus padres y sus dos hermanos
Estudiante avanzada de mayores. Hace danza desde los 8 años y ahora tiene un canal de tik tok sobre
baile. Vive a la moda y sigue todas las tendencias. Tuvo una relación amorosa
Hotelería y Turismo
desde el colegio pero recientemente se separó. Además de la danza, su hobbies
incluyen mirar películas y series en todas las plataformas digitales (Netflix, HBO,
Tipo de Usuario:
Amazon Prime y Disney+). Le gusta visitar los bares de moda de Palermo con su
Quiere ir a terapia.
grupo de amigas. Viajó mucho por el mundo con su familia.
“Cariño, si no supiste valorarme
Objetivos y Metas
aprenderás a extrañarme.”
● Encontrar un terapeuta que la ayude a superar esta etapa.
Frase de Tik Tok ● Superar sus miedos para poder cumplir sus objetivos personales.
● Procesar mejor sus emociones.
Género: Estado Civil:
Femenino Soltera
Frustraciones Motivaciones
● No tener con quien hablar ● Estar mejor.
Edad: Ciudad:
sus problemas. ● Ser feliz.
25 años San Isidro, Bs. As., Argentina.
● No encontrar a un terapeuta ● Sentirse realizada.
acorde a sus necesidades.
● Que su terapeuta no se Habilidades
JUSTIFICACIÓN: tiene capacidad económica para centre en los conflictos que Tecnológicas: tiene todas las
llevar adelante una psicoterapia. Pertenece a la le parecen más importantes. redes sociales actuales (LinkedIn,
generación nativo-digital. Está en plena juventud. ● No tener buena Tik Tok, YouTube, Instagram,
Padece de ansiedad generalizada. conectividad. Twitch). Está muy familiarizada
con las apps.
 MAPA DE EMPATÍA
Tener un Que las Apps no No encontrar
Le importa que le
Sentirse a espacio para le permitan a un
den herramientas El costo de la
gusto con su poder hablar realizar todas las terapeuta
para solucionar terapia
terapeuta de sus acciones ahí acorde a sus
sus problemas
problemas mismo necesidades

Quiere encontrar Que su terapeuta Tener una

un terapeuta no se centre en mala
acorde a sus los conflictos experiencia al
posibilidades que le parecen contratar un
económicas más importantes servicio

Utiliza con
frecuencia
Sentirse
Apps para
escuchado
contratar
servicios

Tener un Procesar
Consulta
Le importa su Ya tiene terapeuta que mejor sus
terapeutas de la Resolver sus
bienestar experiencia le haga una emociones
obra social porque problemas
personal en terapia buena para sentirse
no conoce otros
devolución mejor
Proyecto Final

Fecha de la Pre entrega:

Clase 11
Semana del 10 de Abril
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.

Todo en el Aula Virtual.

Muchas gracias por tu atención.
Nos vemos pronto
DISEÑO UX/UI
Clase 6
Entrevistas Cualitativas
Les damos la bienvenida
Vamos a comenzar a grabar la clase
 Clase 05 Clase 06 Clase 07

Arquetipos de Persona Entrevistas Cualitativas POV y MVP

● ¿Qué es una Persona? ● ¿Qué es una entrevista? ● ¿Qué es un POV?

● Proto Persona Tipos de entrevista
● ● Recursos: storytelling y
● Mapa de empatía Etapas de una entrevista
● Tarea para el Proyecto
● storyboard
● Tarea para el Proyecto ● ¿Qué es un MVP?
Final
Final ● Listado de
funcionalidades
● Tarea para el Proyecto
Final
 Diseño Centrado en el Usuario (DCU)

Analizar Diseñar Validar

Proto Personas User Persona

Mapa de empatía

Design Thinking

Empatizar Definir Idear Prototipar Evaluar

Proto Personas Entrevistas Cualitativas

Mapa de empatía
¿Qué es una entrevista?
Es una técnica de gran utilidad en la investigación cualitativa para
recabar datos; se define como una conversación que se propone un fin
determinado distinto al simple hecho de conversar. Es un instrumento
técnico que adopta la forma de un diálogo coloquial.

Una persona pregunta y la otra responde, no hay ida y vuelta.

Entrevista
Tiene como propósito obtener información en relación con un tema determinado.

Se busca que la información recabada sea lo más precisa posible.

Se pretende conseguir los significados que los informantes atribuyen a los temas en
cuestión.

El entrevistador debe mantener una actitud activa durante el desarrollo de la

entrevista, en la que la interpretación sea continua con la finalidad de obtener una
comprensión profunda del discurso del entrevistado.
Tipos de entrevistas
Estructuradas - Semiestructuradas - Flexibles

Se considera que las entrevistas semiestructuradas son las que ofrecen un grado de
flexibilidad aceptable, a la vez que mantienen la suficiente uniformidad para alcanzar
interpretaciones acordes con los propósitos del estudio.

Se asocia con la expectativa de que es más probable que los sujetos entrevistados
expresen sus puntos de vista de manera relativamente abierta, que en una entrevista
estandarizada o un cuestionario.
Consejos para realizar una entrevista exitosa
1. Contar con una guía de entrevista, con preguntas agrupadas por temas o categorías, con base
en los objetivos del estudio.
2. Elegir un lugar agradable que favorezca un diálogo profundo con el entrevistado y sin ruidos
que entorpezcan la entrevista y la grabación.
3. Explicar al entrevistado los propósitos de la entrevista y solicitar autorización para grabarla.
4. Tomar los datos del entrevistado que se consideren apropiados para los fines de la
investigación.
5. El entrevistador debe tener una actitud receptiva y sensible, no mostrar desaprobación en los
testimonios.
6. Seguir la guía de preguntas de manera que el entrevistado hable de manera libre y
espontánea, si es necesario se modifica el orden y contenido de las preguntas acorde al
proceso de la entrevista.
7. No interrumpir el curso del pensamiento del entrevistado y dar libertad de tratar otros temas
que el entrevistador perciba relacionados con las preguntas.
8. Con prudencia y sin presión invitar al entrevistado a explicar, profundizar o aclarar aspectos
relevantes para el propósito del estudio.
Objetivos: Se expresan en verbos en infinitivo, es decir que finalizan en ar er ir.

Por ejemplo: El objetivo de mi entrevista es validar la proto persona “nombre”.

Conocer los gustos y costumbres de mis usuarios. Entender sus motivaciones y
frustraciones al momento de contratar servicios (relacionado a mi proyecto).
Entrevista semiestructurada
Otra manera de denominar a la entrevista semiestructurada es: entrevista etnográfica
(identidad, cultura y estilos de vida de grupos de personas).

Se puede definir como una “conversación amistosa” entre informante y entrevistador,

convirtiéndose este último en un oidor, alguien que escucha con atención, no impone ni
interpretaciones ni respuestas, guiando el curso de la entrevista hacia los temas que a
él le interesan.

Su propósito es realizar un trabajo de campo para comprender la vida social y cultural de

diversos grupos, y así lograr explicar sus conductas.
Fases de la entrevista
1. Preparación. Es el momento previo a la entrevista, en el cual se planifican los aspectos
organizativos de la misma como son los objetivos, redacción de preguntas guía y
convocatoria.
2. Apertura. Es la fase cuando se está con el entrevistado en el lugar de la cita, en el que
se plantean los objetivos que se pretenden con la entrevista, el tiempo de duración.
También, es el momento oportuno para solicitar el consentimiento de grabar o
filmar la conversación.
3. Desarrollo. Constituye el núcleo de la entrevista, en el que se realiza el intercambio de
información siguiendo la guía de preguntas con flexibilidad. Es cuando el
entrevistador hace uso de sus recursos para obtener la información que se requiere.
4. Cierre. Es el momento en el que conviene anticipar el final de la entrevista para que el
entrevistado recapitule mentalmente lo que ha dicho y provocar en él la oportunidad
de que profundice o exprese ideas que no ha mencionado. Se hace una síntesis de
la conversación para puntualizar la información obtenida y finalmente se agradece al
entrevistado su participación en el estudio.
Preguntas Abiertas Preguntas Cerradas

La respuesta es libre La respuesta es

específica
¿Por qué te gusta el Preguntas de Clarificación
teatro? ¿En qué sentido?
¿Qué te motiva a viajar? ¿Escuchas la radio? ¿Qué quiere decir con eso?

¿Podrías contarnos una Sí - No Preguntas de Profundización

experiencia real que hayas
¿Qué más?
tenido?
¿Ves televisión? ¿POR QUÉ?
Preguntar sobre
experiencias reales es muy Sí - No Esta pregunta hace que el entrevistado
importante porque la analice su propia respuesta y explique
persona sale de solo dar su qué lo llevó a dar esa respuesta, sus
opinión (pensamientos) motivaciones, tal vez descubramos un
sino a hablar desde una insight.
realidad (acciones).
Que NO hacer cuando realizamos la entrevista
1. No debemos preguntar presuponiendo la respuesta.
2. No debemos guiar una respuesta determinada.
3. No debemos interrumpir o apresurar al entrevistado.
4. No debemos hacer preguntas confusas o que puedan interpretarse de otra forma.
5. No debemos hacer preguntas largas o varias preguntas dentro de una misma.
6. No debemos pedir directamente que confirmen nuestra hipótesis, problemática o
solución.
7. No debemos olvidar realizar preguntas para validar la proto persona. Son para
saber si esa persona es un posible usuario, si su perfil está representado en la proto
persona que creamos, para saber si su entrevista nos sirve realmente.
 Ejercicio
Clase 6
Vamos a practicar en clase
algunas preguntas de validación
de nuestras proto personas.
Entrevista
Este es un ejemplo de cómo puedes preparar un script para una entrevista. Lo más importante es que
generes empatía con el usuario, que no lo interrumpas y que grabes todo. Si un usuario te da una
respuesta muy corta o cerrada, siempre es bueno preguntar ¿por qué?

1. ¿Cuál es tu nombre?
2. ¿Qué edad tienes?
3. ¿A qué te dedicas?
4. ¿Con quién vivís?
5. ¿Es la primera vez que buscas departamento?
6. ¿Por qué motivo estás buscando mudarte?
7. ¿Cómo han sido tus experiencias anteriores a la hora de buscar un departamento? ¿Por qué?
8. Por favor contame en detalle… Cual es tu proceso para buscar un departamento?
9. ¿Qué es lo más importante para ti a la hora de buscar un departamento?
10. ¿Has usado sitios para encontrar departamento?
11. ¿Cuáles?
12. ¿Cuál es tu favorito?
13. ¿Qué es lo que más te preocupa al buscar un departamento en internet?
Interpretación
Una vez que las entrevistas han sido efectuadas y grabadas, se transcriben para realizar su
correspondiente análisis e interpretación; por último, se redacta el informe de
investigación.

Lo importante de realizar un análisis de los datos obtenidos es generar una comprensión

que emerge de las preguntas y los testimonios de la investigación.

Luego de realizar las entrevistas podremos validar la proto persona que será a partir de
ese momento una User persona.
Tarea para el Proyecto Final
Para continuar con el Proyecto Final que vamos a desarrollar durante todo este curso:
Vamos a realizar 5 entrevistas, esto nos permitirá recopilar datos e insights sobre los usuarios, empatizar
con ellos, validar la proto persona y transformarla en una user persona.
Para elegir a los entrevistados tendremos en cuenta:
● Que sea mayor de 18 años.
● Que entren en el grupo de usuarios que necesitamos validar (mi proto persona)
● Que la problemática de mi proyecto los atraviesa directamente (¿la solución que voy a brindar en
mi app influye en la vida de esta persona?)
● Que tenga disponibilidad para realizar la entrevista presencial o virtual (dentro de un tiempo
razonable) y permita que la misma sea grabada (sino la entrevista no será válida).
Realizar un informe: sobre los resultados de las entrevistas, los datos recopilados, los insights que
consiguieron descubrir (si es que los hay), especificar de qué forma los entrevistados validaron a la proto
persona y se transformaron en user personas de ahora en más.
Nota: Tener en cuenta que el docente puede pedir acceso a las grabaciones en cualquier momento de
la cursada.
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.

Todo en el Aula Virtual.

Muchas gracias por tu atención.
Nos vemos pronto
 User persona
Persona
Según la Real Academia Española los dos primeros resultados que aparecen son:
1. f. Individuo de la especie humana. 2. f. Hombre o mujer cuyo nombre se ignora o
se omite.
Según la Sociología: puede definirse persona como un ser sociable que vive y se desarrolla
en sociedad, pero al mismo tiempo nunca deja de actuar con un carácter individual. Es
decir somos “yo” y “nosotros” al mismo tiempo.
Según la Psicología: persona designa a un ser concreto, abarcando tanto sus aspectos
físicos como psíquicos para definir su carácter singular y único. Percibe e interpreta el
estado de ánimo, el carácter y la forma de actuar de las personas, además estudia las
cualidades y facultades que tiene la persona, como la razón, los sentimientos y los valores
que lo distingue de los demás seres.

Persona en Diseño UX/UI

Es un individuo ficticio que se crea para identificar un público específico.
Son modelos de personas que representan a los usuarios durante el proceso de diseño.
Son imaginarios pero están creados con mucho detallismo y precisión.
No están diseñadas únicamente según su información demográfica.

"Las personas son arquetipos basados en patrones de comportamiento revelados durante

el proceso de investigación de usuarios."
Alan Cooper.

¿Por qué necesitamos crear personas?

Con comprender lo que quieren los usuarios no es suficiente. Tienes que entender el
contexto.
Para diseñar una experiencia que deleite a los usuarios, debemos documentar sus
pensamientos, sentimientos, expectativas y motivaciones.
Las personas combinan estos conocimientos en una narrativa que ayudan a tomar mejores
decisiones y diseñar mejores productos.
 Proto persona
Utilizaremos los datos recolectados de la investigación de usuarios, nuestras
observaciones y suposiciones para crear una hipótesis.
La Proto persona es una primera versión (sin validar) de lo que luego va a ser la User
persona (validada).

Características:
Las proto personas son una parte clave del diseño UX. Nos aseguramos de hablar al
público objetivo y construimos personas detalladas que reflejan los deseos, necesidades,
expectativas y frustraciones de los usuarios.
Cuando se habla de grupos de usuarios, segmentos de mercado y otros datos, puede ser
fácil olvidar que al final hay un ser humano. Las personas son más que estadísticas. Son
narrativas que van a inspirar y respaldar las decisiones que tomemos.
Siempre que la comprensión de todos los que formen parte del proceso de diseño sea clara,
algo tan simple como el nombre de la persona disparará una amplia gama de datos: datos
demográficos, atributos, deseos, comportamientos, preocupaciones, miedos y citas.

La Proto persona debe tener:

1) Datos - Nombre y apellido; Profesión.
2) Datos demográficos - Lugar de residencia, edad, sexo, nivel de educación, estado
civil, ingresos
3) Biografía - breve reseña de cómo es, cómo vive?, qué la define?.
4) Intereses - hobbies, modo de vida.
5) Hábitos de consumo - ¿Qué consume?, cómo lo hace?, por qué lo hace?.
6) Objetivos, sueños, metas. ¿Qué quieren hacer y por qué?
7) Su relación con la tecnología - ¿Qué usa?, con qué frecuencia?, para qué?.
8) Frustraciones y motivaciones - ¿Qué se interpone en su camino? ¿Qué los hace
avanzar?
9) Una frase que identifique lo mejor posible cómo piensa - Se expresa entre
comillas “quote”
Una imagen que nos de conexión emocional.

Es muy importante darle una cara a la proto persona que estamos creando, no olvidemos
que representan a personas reales.
Utilicen todo lo aprendido en las clases anteriores sobre imagen al momento de seleccionar
la fotografía y darle el tratamiento digital apropiado en Photoshop.

Repaso sobre la imagen:

Los requisitos básicos de nuestra foto:
Que la imagen esté nítida (buena calidad, no “pixelada”).
Que el foco esté en el sujeto.
Que no esté sobreexpuesta (demasiado blanca) o subexpuesta (demasiado oscura).
Que esté centrada en el punto de interés.
Que no tenga manchas, reflejos o marcas de agua.
Que el tratamiento del color sea el adecuado (sin filtros).
Ejercicio Clase 5
Comentemos en clase de qué tratan nuestras ideas de Proyecto y qué persona creen que
podría identificar a sus usuarios.
 ¿Qué es un Mapa de Empatía?
Es un esquema visual con preguntas sobre el cliente objetivo ideal de un producto o servicio
determinado.
Sirve para entender mejor a este prototipo de persona y por tanto poder satisfacer mejor sus
necesidades y comunicarnos empatizando al máximo con ella.
Este lienzo ayuda a reflexionar sobre cómo la afectan el entorno y las emociones internas
que vive.
Es importante tomarla como uno de los puntos de partida para identificar cómo es este user
persona.

¿Qué piensa y siente?

¿Qué da sentido a su vida?
¿Qué le preocupa?
¿Qué le hace feliz?
¿Qué otros pensamientos y sentimientos podrían motivar su comportamiento?

¿Qué ve?
¿Qué ve en el mercado?
¿Qué ve en su entorno inmediato?
¿Qué ve a otros diciendo y haciendo?
¿Qué está viendo y leyendo?

¿Qué escucha?
¿Qué está oyendo decir a los demás?
¿Qué está escuchando de sus amigos?
¿Qué está escuchando de sus colegas?
¿Qué está escuchando de otros?

¿Qué dice y hace?

¿Qué le hemos oído decir?
¿Qué podemos imaginarle diciendo?
¿Cómo es su rutina?
¿Qué comportamiento hemos observado?
¿Qué podemos imaginarle haciendo?
¿Qué necesita hacer de manera diferente?
¿Qué trabajo(s) quiere o necesita conseguir?
¿Qué decisiones debe tomar?
¿Cómo sabremos que tuvo éxito?

¿Qué resultados espera?

¿Cuáles son sus deseos?
¿Cuáles son sus necesidades?
¿Qué espera que suceda?
¿Cuáles son sus sueños?

¿Qué lo frustra?
¿Cuáles son sus miedos?
¿Cuáles son sus obstáculos?
¿Qué teme que suceda?
¿Cuáles son sus frustraciones?
¿Qué le causa ansiedad?
¿Qué lo enoja?

Proyecto Final
TAREA PARA EL PROYECTO FINAL:
Para continuar con el Proyecto Final que vamos a desarrollar durante todo este curso:
Vamos a realizar un Mapa de Empatía, que nos ayudará a responder preguntas específicas
sobre nuestros usuarios siempre teniendo en mente nuestra idea de App.
y tenemos que determinar en primera instancia:
¿Quién es la persona que estamos intentando comprender? (proto persona)
¿En qué situación se encuentra? (datos que estén relacionados con nuestra app)
¿Cuál es su papel en la situación? (por qué es el/ella y no otro/a? que lo conecta a nuestro
proyecto, qué condiciones hace que sea un futuro usuario de nuestra app?).
Pensar 2 opciones, por si una de ellas es descartada más adelante, pero tener en cuenta
que vamos a desarrollar solo una de estas dos opciones.

Vamos a realizar la Ficha de Proto Persona.

Tiene que contener la siguiente información:
Datos personales y foto.
Datos demográficos.
Biografía.
Intereses
Hábitos de consumo.
Objetivos, sueños, metas.
Su relación con la tecnología.
Frustraciones y motivaciones.
Una frase.
Tener en cuenta que todas las tareas serán entregadas juntas en las fechas de pre entregas
marcadas en el programa del curso, para esa instancia todo deberá presentarse con diseño.
 Entrevistas Cualitativas
¿Qué es una entrevista?
Es una técnica de gran utilidad en la investigación cualitativa para recabar datos; se define
como una conversación que se propone un fin determinado distinto al simple hecho de
conversar. Es un instrumento técnico que adopta la forma de un diálogo coloquial.
Una persona pregunta y la otra responde, no hay ida y vuelta.

Persona en Diseño UX/UI

Tiene como propósito obtener información en relación con un tema determinado.
Se busca que la información recabada sea lo más precisa posible.
Se pretende conseguir los significados que los informantes atribuyen a los temas en
cuestión.
El entrevistador debe mantener una actitud activa durante el desarrollo de la entrevista, en
la que la interpretación sea continua con la finalidad de obtener una comprensión
profunda del discurso del entrevistado.
 Tipos de entrevistas
Estructuradas - Semiestructuradas - Flexibles
Se considera que las entrevistas semiestructuradas son las que ofrecen un grado de
flexibilidad aceptable, a la vez que mantienen la suficiente uniformidad para
alcanzar interpretaciones acordes con los propósitos del estudio.
Se asocia con la expectativa de que es más probable que los sujetos entrevistados
expresen sus puntos de vista de manera relativamente abierta, que en una entrevista
estandarizada o un cuestionario.

Consejos para realizar una entrevista exitosa

1) Contar con una guía de entrevista, con preguntas agrupadas por temas o
categorías, con base en los objetivos del estudio.
2) Elegir un lugar agradable que favorezca un diálogo profundo con el entrevistado
y sin ruidos que entorpezcan la entrevista y la grabación.
3) Explicar al entrevistado los propósitos de la entrevista y solicitar autorización
para grabarla.
4) Tomar los datos del entrevistado que se consideren apropiados para los fines de
la investigación.
5) El entrevistador debe tener una actitud receptiva y sensible, no
mostrar desaprobación en los testimonios.
6) Seguir la guía de preguntas de manera que el entrevistado hable de manera libre
y espontánea, si es necesario se modifica el orden y contenido de las preguntas
acorde al proceso de la entrevista.
7) No interrumpir el curso del pensamiento del entrevistado y dar libertad de tratar
otros temas que el entrevistador perciba relacionados con las preguntas.
8) Con prudencia y sin presión invitar al entrevistado a explicar, profundizar o
aclarar aspectos relevantes para el propósito del estudio.

Objetivos: Se expresan en verbos en infinitivo, es decir que finalizan en ar er ir.

Por ejemplo: El objetivo de mi entrevista es validar la proto persona “nombre”.
Conocer los gustos y costumbres de mis usuarios. Entender sus motivaciones y
frustraciones al momento de contratar servicios (relacionado a mi proyecto).
Entrevista semiestructurada
Otra manera de denominar a la entrevista semiestructurada es: entrevista etnográfica.
Se puede definir como una “conversación amistosa” entre informante y entrevistador,
convirtiéndose este último en un oidor, alguien que escucha con atención, no impone ni
interpretaciones ni respuestas, guiando el curso de la entrevista hacia los temas que a él le
interesan.
Su propósito es realizar un trabajo de campo para comprender la vida social y cultural de
diversos grupos, y así lograr explicar sus conductas.

Fases de la entrevista
1) Preparación. Es el momento previo a la entrevista, en el cual se planifican los
aspectos organizativos de la misma como son los objetivos, redacción de preguntas
guía y convocatoria.
2) Apertura. Es la fase cuando se está con el entrevistado en el lugar de la cita, en
el que se plantean los objetivos que se pretenden con la entrevista, el tiempo de
duración. También, es el momento oportuno para solicitar el consentimiento de
grabar o filmar la conversación.
3) Desarrollo. Constituye el núcleo de la entrevista, en el que se realiza el intercambio
de información siguiendo la guía de preguntas con flexibilidad. Es cuando el
entrevistador hace uso de sus recursos para obtener la información que se requiere.
4) Cierre. Es el momento en el que conviene anticipar el final de la entrevista para que
el entrevistado recapitule mentalmente lo que ha dicho y provocar en él la
oportunidad de que profundice o exprese ideas que no ha mencionado. Se hace
una síntesis de la conversación para puntualizar la información obtenida y
finalmente se agradece al entrevistado su participación en el estudio.

Preguntas Abiertas:
La respuesta es libre
¿Por qué te gusta el teatro?
¿Qué te motiva a viajar?
¿Podrías contarnos una experiencia real que hayas tenido?
Preguntar sobre experiencias reales es muy importante porque la persona sale de solo dar
su opinión (pensamientos) sino a hablar desde una realidad (acciones).

Preguntas Cerradas:
La respuesta es específica
¿Escuchas la radio?
Sí - No
¿Ves televisión?
Sí - No

Preguntas de Clarificación:
¿En qué sentido?
¿Qué quiere decir con eso?

Preguntas de Profundización:
¿Qué más?
¿POR QUÉ?
Esta pregunta hace que el entrevistado analice su propia respuesta y explique qué lo llevó a
dar esa respuesta, sus motivaciones, tal vez descubramos un insight.

Que NO hacer cuando realizamos la entrevista

1) No debemos preguntar presuponiendo la respuesta.
2) No debemos guiar una respuesta determinada.
3) No debemos interrumpir o apresurar al entrevistado.
4) No debemos hacer preguntas confusas o que puedan interpretarse de otra forma.
5) No debemos hacer preguntas largas o varias preguntas dentro de una misma.
6) No debemos pedir directamente que confirmen nuestra hipótesis, problemática
o solución.
7) No debemos olvidar realizar preguntas para validar la proto persona. Son para
saber si esa persona es un posible usuario, si su perfil está representado en la proto
persona que creamos, para saber si su entrevista nos sirve realmente.

Ejercicio Clase 6
Vamos a practicar en clase algunas preguntas de validación de nuestras proto personas.

Interpretación
Una vez que las entrevistas han sido efectuadas y grabadas, se transcriben para realizar su
correspondiente análisis e interpretación; por último, se redacta el informe de investigación.
Lo importante de realizar un análisis de los datos obtenidos es generar una comprensión
que emerge de las preguntas y los testimonios de la investigación.
Luego de realizar las entrevistas podremos validar la proto persona que será a partir de ese
momento una User persona.

Proyecto Final
TAREA PARA EL PROYECTO FINAL:
Para continuar con el Proyecto Final que vamos a desarrollar durante todo este curso:
Vamos a realizar 5 entrevistas, esto nos permitirá recopilar datos e insights sobre los
usuarios, empatizar con ellos, validar la proto persona y transformarla en una user persona.
Para elegir a los entrevistados tendremos en cuenta:
Que sea mayor de 18 años.
Que entren en el grupo de usuarios que necesitamos validar (proto persona)
Que la problemática de mi proyecto los atraviesa directamente (¿la solución que voy a
brindar en mi app influye en la vida de esta persona?)
Que tenga disponibilidad para realizar la entrevista presencial o virtual (dentro de un tiempo
razonable) y permita que la misma sea grabada (sino la entrevista no será válida).
Realizar un informe sobre los resultados de las entrevistas, los datos recopilados, los
insights que consiguieron descubrir (si es que los hay), especificar de qué forma los
entrevistados validaron a la proto persona y se transformaron en user personas de ahora
en más.
DISEÑO UX/UI
Clase 7
POV y MVP
Les damos la bienvenida
Vamos a comenzar a grabar la clase
 Clase 06 Clase 07 Clase 08

Entrevistas Cualitativas POV y MVP Arquitectura de la Información

● ¿Qué es una entrevista? ● ¿Qué es la Arquitectura de

● ¿Qué es un POV?
● Tipos de entrevista la Información?
● Etapas de una entrevista ● Recursos:
Storytelling y Storyboard ● Card Sorting en Optimal
● Tarea para el Proyecto Workshop
Final ● ¿Qué es un MVP?
● Matriz de Similitud y
● Listado de
Dendrograma
funcionalidades
● Mapa del sitio en
● Tarea para el Proyecto Whimsical
Final ● Tarea para el Proyecto
Final
 Diseño Centrado en el Usuario (DCU)

Analizar Diseñar Validar

Design Thinking

Empatizar Definir Idear Prototipar Evaluar

POV

MVP
¿Qué es POV?
POV o Point of view, en español significa Punto de vista.

En UX sirve para obtener de forma concisa el qué, para quién y por qué
estamos creando nuestro producto o servicio.

Si podemos entender realmente la problemática de nuestros usuarios

podremos generar una solución adecuada, focalizada y con valor
agregado.
Punto de vista
Para elaborar un “Punto de Vista” tenemos que pensar en una historia (breve y
significativa) sobre el problema que vamos a abordar y cómo vamos a usar esa visión
única que nos da el diseño para elaborar una solución para ese usuario.

● Usuario (descripción del usuario, por qué es nuestro usuario y no otro)

● Necesita (problema a abordar — en forma de verbo)
● Porque (describimos la clave del problema, lo que motiva a hacer)
Storytelling en UX
Estas técnicas narrativas son herramientas muy útiles para el diseño de servicios y
productos digitales.

Es el arte de crear una secuencia de eventos, reales o ficticios, creando una atmósfera que
envuelva y cautive.

Se trata de una manera de contar un mensaje para transmitir cosas e intentar influir en
nuestro comportamiento.
Estructura y requisitos
POV

Usuario (user persona)- Necesita (relacionado a nuestra app) - porque (insight)

Técnica de Storytelling:

Arco argumental + Emoción (atmósfera que envuelva, cautive, les resulte familiar)

Estructura de la narración

Introducción - Nudo - Desenlace

¿Por qué es importante?
Contar historias es un recurso muy efectivo porque apela a la forma en la que funciona la
mente humana.

● Es un impulso natural de mantener orden y dotar de significado a lo que

observamos.

Las historias nos ayudan a recordar, las procesamos de una forma mucho más profunda
de lo que procesamos otro tipo de información. Toda la información rica en detalles que
nos da la descripción de los personajes, ubicación y los eventos, los relacionamos con
nuestra experiencia personal, nos ayuda a conectar de manera personal con la
información e ideas que transmite la historia.

● Las emociones juegan un papel muy importante también. Una historia cercana que
cala hondo o toca un punto sensible en el usuario puede desencadenar reacciones
muy fuertes o memorias profundas.
Tema: Storytelling

"La gente olvidará lo que dijiste, olvidará lo que hiciste, pero

nunca olvidarán lo que les hiciste sentir".

Autor/as/es: Maya Angelou.

Consejos para contar una buena historia
No se trata simplemente de tener una historia y contarla. La magia está en el arte de
contarla, quiénes y cómo lo hagan. Solo así se conseguirá atraer a la audiencia, conectar
con ella y diferenciarnos del conjunto.
Para que la historia pase al siguiente nivel, es importante que gire en torno a personas
reales antes que «usuarios sin nombre». Cuando se da un poco de información acerca
del trasfondo de la historia y el usuario, ayuda a vincular la historia con las necesidades
de los usuarios.
Contar historias que les resulte familiar a los receptores ayuda a crear una buena
conexión entre dicho receptor y la propia historia.
En relación a la trama, se describe cómo y porqué un usuario podría interactuar con un
producto. Esto puede basarse de nuevo en una interacción real que se haya observado
o puede ser un ejemplo hipotético pero realista.
Compartir datos del usuario es efectivo, pero hacerlo describiendo
esos datos a través de una historia rápida es incluso mucho más
persuasivo.
Datos: Durante el testeo, el 64% de los usuarios abandonaron la web
tras haber realizado una búsqueda sin obtener resultados.
Efectivo: Julia estaba tan frustrada mientras intentaba buscar un
producto en la web de diferentes formas sin obtener resultados, que
finalmente se sintió tonta por no saber hacerlo y salió de la web
resoplando. 64% de los usuarios, durante el test, se sintieron de
forma similar y abandonaron la web tras una búsqueda sin
resultados.
Súper efectivo: Julia, mamá de tres, cuando terminó las tareas del
hogar, fue a su pc a intentar realizar una búsqueda.. Se frustró
mucho luego de buscar de mil formas en la web y no obtener
resultados. Aquella situación hizo que se sintiera tonta por no
considerarse buena con la pc, así que se rindió y salió de la web
angustiada. Realizamos un test y sus resultados indican que 6 de
cada 10 usuarios se sintieron igual que Julia y abandonaron la web
tras una búsqueda sin resultados.
¿Qué es un Storyboard?
Es el guión gráfico. Es un conjunto de ilustraciones que aparecen en
secuencia y que se utilizan como guía para entender una historia.

La característica principal del storyboard es su representatividad: es visual,

la historia aparece frente a nuestros ojos como algo menos abstracto que en
el guión.

Un storyboard se parece mucho a una historieta de la narración.

¿Cómo crear un storyboard?
1. Elabora una línea temporal. Piensa cuál va a ser el inicio de tu spot, el desarrollo y el
desenlace. Te ayudará comenzar creando un listado de todo lo que va a pasar, para
después ordenarlo.

2. Identifica cuáles son los momentos clave de tu historia. Aquellos en los que se
representa el mensaje que quieres transmitir o los que destaquen las cualidades de tu
producto.

3. Ten en cuenta que el storyboard sirve para mostrar visualmente una idea. No es el
anuncio ni el vídeo final, debe dibujarse rápidamente sin mucho detalle, bastan
unos bocetos para plasmar las ideas.
¿Cómo crear un storyboard?
4. Elabora los bocetos y los complementas con información. Utilizar globos de diálogo,
una descripción aclaratoria debajo del cuadro, etc.

5. Si no se te ocurre qué representar en cada viñeta, piensa en dónde puedes "cortar"

la historia. Un ejemplo sencillo: En la primera viñeta podría aparecer un personaje
triste porque tiene una necesidad que no logra cubrir. En la siguiente, el anuncio de
nuestro producto. Y, en la última, el mismo personaje feliz, sin el problema que le
atormentaba.
 Ejercicio
Clase 7
Agarren hoja y lápiz, vamos a
practicar rápidamente cómo
hacer un storyboard.
Relato breve para el Ejercicio en clase de Storyboard
Un hombre se le acercó a un sabio anciano y le dijo:
– Me han contado que eres muy sabio. Por favor dime, ¿qué cosas haces como sabio que
no podamos hacer los demás?
El anciano le contestó:
– Bueno, cuando como, simplemente como; duermo cuando estoy durmiendo, y cuando
hablo contigo, sólo hablo contigo.
El hombre lo miró con asombro y le dijo:
– Pero yo también puedo hacer esas cosas y no por eso soy un sabio.
– Yo no lo creo así -replicó el anciano…
– Cuando duermes, recuerdas los problemas que tuviste durante el día, o te preocupas
por los que podrás tener al levantarte. Cuando comes, estás pensando en qué harás
después. Mientras hablas conmigo, estás pensando en qué vas a preguntarme o cómo
vas a responderme antes de que termine de hablar.
¿Qué es un MVP?
Minimum Viable Product - Producto Mínimo Viable.
En desarrollo de producto, el producto viable mínimo es un producto con
suficientes características para satisfacer a los clientes iniciales, y
proporcionar retroalimentación para el desarrollo futuro.
En desarrollo de startups (empresas emergentes altamente innovadoras),
para garantizar que una startup tenga éxito, se necesita desarrollar
productos escalables, que deben introducirse gradualmente. Esta práctica
es muy funcional para reducir riesgos y evitar gastos excesivos. Se basa en
una validación real, basada en pruebas y feedbacks de los clientes.
MVP:
MVP
Es la versión de un nuevo producto que permite a un equipo recolectar, con el menor
esfuerzo posible, la máxima cantidad de conocimiento validado sobre sus potenciales
clientes.

Se utiliza para obtener un conocimiento rápido y cuantitativo del mercado de un producto,

o de algunas funcionalidades en particular.

Tiene solamente aquellas funcionalidades que permiten que el producto sea lanzado.
MVP
Al pensar en un nuevo servicio, producto o canal, se suelen establecer hipótesis o
pequeños supuestos acerca de lo que se necesita para solucionar una necesidad.

Un ejercicio para determinar el producto mínimo viable, permite establecer qué ideas
son válidas y cuáles deben descartarse antes de iniciar la producción.

Para lograrlo necesitamos:

● Listado de tareas
● Determinar cuales son prioridad, imprescindible.
● Determinar futuras versiones, deseable.
Tarea para el Proyecto
Para continuar con el Proyecto Final que vamos a desarrollar durante todo este curso:

Vamos a realizar un POV aplicando las técnicas de Storytelling y Storyboard, esto nos
permitirá a nosotros y a otros/as comprender y empatizar con nuestros usuarios.

Para ello realizaremos las siguientes tareas:

● POV - Completar la frase: Usuario - Necesita - Porque.

● Storytelling - Crear una narración sobre nuestro proyecto que cuente con un:
Inicio - Nudo - Desenlace, que cree una conexión emocional con nuestra User
Persona. Que sea persuasiva y tenga relación con nuestros usuarios.
● Storyboard - Representar visualmente la narración. Ilustrando los momentos clave de
la historia (6 dibujos máximo).
Recuerden que no es necesario saber dibujar “bien” sino que se entienda la idea.
Puede ser a mano o digital, si es a mano deberán pasarlo a tinta y escanearlo con
buena calidad y buena luz para que se pueda visualizar correctamente.
Tarea para el Proyecto
Para continuar con el Proyecto Final que vamos a desarrollar durante todo este curso:

Vamos a definir un MVP, esto nos permitirá tener en claro cuales son las funcionalidades básicas que
debe tener mi app.

Para hacerlo debemos:

● Redactar una lista de tareas (todas las que se me ocurran relacionadas a mi proyecto).
● Definir prioridades, cuáles tareas son imprescindibles para el funcionamiento de la app.
● Definir cuáles tareas son deseables para versiones más avanzadas de mi app en un futuro
(versión 2.0).
● Identificar cuál es la función básica y primordial que mi usuario realizará en mi app, y por qué
es deseable para mi usuario.

Realizar un informe sobre las conclusiones del ejercicio, cuáles tareas se desarrollaran primero y por
qué (explicar brevemente cada tarea).
Ejemplo de entrega
POV
Pilar es una estudiante avanzada
que vive en Buenos Aires. Ya ha
hecho terapia antes.
Ella necesita encontrar a un
psicólogo que se adecue mejor a
sus necesidades y la ayude a
superar esta etapa de su vida,
porque quiere sentirse mejor y más
realizada.
Storytelling:
El novio de Pilar terminó la
relación que tenía con ella
desde la escuela.
Ella se siente muy triste y no
sabe cómo buscar un terapeuta
con el que se sienta cómoda.
Recurre a su mamá y a sus
amigas para que le
recomienden alguno. Intenta
atenderse con los distintos
terapeutas que sus conocidas
le recomendaron, sin tener
éxito, luego de un año, continúa
con el mismo problema. Hasta
que un día en su celular
aparece la solución, una app
para buscar terapeuta!
Usandola al fin consigue
encontrar a su terapeuta ideal
que la ayuda a mejorar y
encontrar la felicidad.
STORYBOARD:
Nos ayuda a predecir y
explorar visualmente la
experiencia de un usuario
con un producto.

Facilita la tarea de
comprender cómo las
personas podrían
interactuar con la app.
 MVP
IMPRESCINDIBLES DESEABLES
(versión lanzamiento) (más adelante)

Mi cuenta Mi cuenta
● Datos personales: nombre y apellido, dni, ● Gestionar mis turnos.
email, ciudad, género, fecha de ● Configurar preferencias que permitan búsquedas y
nacimiento, motivo de consulta. sugerencias más efectivas.
● Sugerencias. ● Mis valoraciones y reseñas realizadas sobre el profesional.
Buscar psicólogo ● Dar de baja (cuenta).
● Medios de pago.
● Filtrar por problemática del paciente
(ejemplo: adicción, trastorno alimenticio, Conectar usuarios
fobias, duelo, depresión, ansiedad, etc.), ● Chat entre paciente y profesional.
tipo de terapia (psicoanálisis, TCC, Buscar psicólogo
sistémica, etc.), costo, disponibilidad
● Mejorar el filtro (valoraciones).
horaria del profesional, zona geográfica.
● Gestionar todos los turnos con el profesional.
● Agendar un primer turno con el
● Testimonios sobre la app.
profesional.
Historia clínica
● Gestionar la historia clínica del paciente para que el
psicólogo que derive pueda registrar información del
paciente.
En pleno auge de la virtualidad y el trabajo
a distancia, cada vez son más las personas
que optan por un estilo de vida que les
permita vivir viajando.

Sin embargo, las ofertas para alquilar

sostienen precios elevados y por periodos
cortos.
POV Punto de vista

¿Quién es, qué necesita y por qué?

Paula es freelancer y tiene ganas de vivir en diferentes lugares durante

el año. Necesita encontrar alojamientos por periodos de tiempo largos y
a costos razonables, porque quiere hospedarse por algunos meses y
sentirse como en casa.
MVP Mínimo producto viable

VERSIÓN LANZAMIENTO

Prioridades Home Buscador Perfil

- Novedades - Encontrar alojamientos - Gestionar mis reservas

- Sugerencias - Filtrar por ubicación - Administrar publicaciones
IMPRESCINDIBLE - Chat entre usuarios y plazos de alquiler propias

- Recordatorio de próximas - Llevar un historial de los - Llevar un registro de mis

reservas alojamientos vistos valoraciones y opiniones
DESEABLE - Ver valoraciones y opiniones
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.

Todo en el Aula Virtual.

Muchas gracias por tu atención.
Nos vemos pronto
 DISEÑO UX/UI
Clase 8
Arquitectura de la información
Les damos la bienvenida
Vamos a comenzar a grabar la clase
 Clase 07 Clase 08 Clase 09

POV y MVP Arquitectura de la Información User Flow

● ¿Qué es un POV? ● ¿Qué es un mapa de sitio? ● ¿Qué es un User Flow?

● Recursos: storytelling y ● Cardsorting ● Tipos de flujo de usuario
storyboard ● Optimal Workshop ● Task Flow y Flow Chart
● ¿Qué es un MVP? ● Whimsical ● ¿Qué es el Happy Path?
● Listado de funcionalidades ● Tarea para el Proyecto ● Tarea para el Proyecto
● Tarea para el Proyecto Final
Final
Final
 Diseño Centrado en el Usuario (DCU)

Analizar Diseñar Validar

Design Thinking

Empatizar Definir Idear Prototipar Evaluar

POV Arquitectura de Información

MVP Cardsorting
¿Qué es Arquitectura de la
Información?
En pocas palabras, la arquitectura de la información es el arte de organizar
la información de la forma más clara y lógica posible.
Para que el usuario pueda encontrar fácilmente lo que está buscando.
Además, también nos permitirá poder añadir fácilmente nuevas
funcionalidades y escalar el producto.
Se trata de organizar, estructurar y etiquetar correctamente todos sus
elementos.
Tema: Arquitectura de la información

La arquitectura de la información es la práctica de decidir cómo

organizar las partes de algo para que sea comprensible

Autor/as/es: Information Architecture Institute.

Arquitectura de la información

Es crucial para el desarrollo de cualquier sitio, aplicación o software.

Esto implica una relación estrecha entre todas las partes del proceso, los involucrados
(desde la empresa, los diseñadores, programadores e inclusive usuarios testers) deben
funcionar en sintonía.

La arquitectura de la información funciona como base para el trabajo de los diseñadores

UX y brinda los recursos necesarios para estructurar el sistema, haciéndolo comprensible y
fácil de usar.
La arquitectura de la información permite que Un usuario que ingresa a un sitio web se
las jerarquías presentes en páginas web, pregunta:
aplicaciones y programas nos orienten hacia
¿Qué es esto? ¿Qué función cumple? ¿Qué
donde tenemos que ir según nuestras puedo hacer? ¿Dónde está lo que buscaba?
necesidades. La estructura debe estar
construida en base a una lógica simple para La arquitectura de la información busca dar
que sea intuitiva. Podría parecer que podemos respuesta a estas preguntas para que el
usuario pueda navegar y permanecer. Así,
prescindir de ella, pero se convierte en algo
ofrece la posibilidad de incrementar la calidad
central ya que se encarga del estudio, análisis, del servicio en pos de que sea más navegable,
organización y disposición de la información. Es usable y accesible.
decir, determina la estructura que tendrá
nuestro sistema de información de nuestro
Esto implica garantizar que los usuarios
tengan una experiencia satisfactoria, en
proyecto. cuanto a navegación y usabilidad, a través de
Entender cómo navega un usuario puede ser de la estructura y el lenguaje que se utilice en la
suma utilidad para determinar en qué medida construcción del producto digital.
es necesaria la arquitectura de la información.
Arquitectura de la información
Es un documento vital en el que se definen la organización y relaciones entre todos los
elementos de nuestra app.

De ella depende el resto del proceso, los wireframes, prototipos y diseño final.

En este punto del proyecto idearemos una arquitectura de la información para

representar y comprender el modelo mental de nuestra user persona, saber como
prefieren y reconocen la información cuando ingresan a una app.

Para lograr esto necesitamos que el usuario forme parte del proceso de diseño.

Utilizaremos la técnica de Card Sorting.

Card Sorting

Vamos a entregarle a nuestros usuarios unas tarjetas o cards con los nombres de todos los
elementos que componen nuestra app, es decir categorías y subcategorías de los
contenidos que encontraríamos en nuestra app (utilizando para esto la lista de tareas que
creamos para el MVP - Imprescindibles, y también los resultados del Benchmarking donde
pudimos analizar qué funcionalidades ofrece la competencia) y luego convocamos a los
usuarios para que las agrupen y asocien como deseen.

Recordando que diseñamos para el usuario, no para nosotros los diseñadores.

Objetivos

● Agrupar

Los distintos contenidos

● Jerarquizar

Subordinar unos contenidos a otros

● Rotular

Nombrar las categorías

Tipos de Card Sorting

● Abierto - El usuario puede agrupar libremente

● Cerrado - Los grupos ya están predefinidos

● Individual

● Grupal

● Presencial

● Remoto

● Cualitativo - Debemos poder observar y registrar el proceso de decisión

● Cuantitativo - Procesamiento estadístico de datos

Optimal Workshop
Card Sorting Abierto - Optimalsort

1. Introducimos los nombres en cada tarjeta.

2. Redactamos una introducción para los usuarios.
3. Configuramos los datos que se dan antes de comenzar el cardsorting, consigna
detallada: leer, asociar, agrupar, jerarquizar estas tarjetas, también nombrar las
categorías a donde pertenecen. Preguntas para poder organizar y segmentar a los
usuarios que participen.
4. Redactamos las preguntas finales que se les hará a los usuarios una vez finalizado el
cardsorting: ¿Qué tan difícil te resultó agrupar las tarjetas? Fácil 1-10 Difícil ¿Cuál tarjeta
te generó dudas al momento de ordenarla? ¿No sabías el significado de alguna tarjeta?.
5. Incluimos a los participantes enviándoles el enlace aclarando que es muy importante
realizarlo desde una PC o no será posible finalizar el cardsorting.
6. Lanzamos el Cardsorting con el botón “Launch”, y recordar que una vez realizado esto
no se podrán realizar más cambios. Chequear en “Study settings” que no esté en “Draft”.
Conclusiones
La herramienta nos brindará dos gráficos (en “Analysis”):

● Dendrograma (Dendrogram)- Este diagrama nos permite ver los grupos y etiquetas
principales elegidas por los usuarios.
● Matriz de similitud (Similarity matrix)- Este diagrama detecta grupos o tarjetas que
fueron más frecuentemente emparejadas entre los usuarios, donde el número sea
mayor es donde más similitud hay.

A partir de estos resultados debemos analizar e interpretar la información, que luego nos
servirá para realizar nuestra arquitectura de la información para nuestro proyecto con
información validada por los usuarios.
Dendrograma
Mapa de sitio
A partir de los resultados obtenidos del cardsorting y del análisis posterior de sus
diagramas, vamos a poder realizar el mapa del sitio, este permitirá ver las relaciones y
agrupaciones establecidas entre los contenidos.

En algunas ocasiones será necesario renombrar algunas categorías o incluso permitir el

acceso a algún apartado desde distintas categorías.

Allí indicaremos las secciones principales de nuestra app, cómo se conectan a las
subsecciones y qué relación hay entre ellas, partiendo de la “Home”.
 Mapa de sitio
abreviado de Discord.
Es una herramienta online gratuita súper intuitiva y simple de usar, utilizaremos el
“Flowchart” para diagramar:
Para que todos los integrantes del equipo puedan editar un mismo archivo, se debe crear
un Workspace y asignarle un nombre.
A continuación, enviar invitación por mail a los integrantes del equipo. Una vez hecho, me
aparecerá en la sección Teams un equipo conformado por los integrantes invitados al
Workspace.
Por último, es muy importante asegurarse de que los archivos sobre los cuales se trabajará en
equipo se creen en el Workspace y en el Team que comparten como equipo y no en My Files
ya que todo lo que esté en esa sección corresponde a archivos personales.
 Ejercicio
Práctico Nº8
Consigna:
Optimal Workshop y Whimsical
Optimal Workshop
paso a paso
Comenzamos el estudio haciendo click en “Create
study”
y elegimos Card Sorting.
Agregamos Cards
(Tarjetas) que
correspondan a las
funciones de nuestra
app con el botón
“Add card”.
Elegimos el tipo de
Card Sorting a
realizar según los
criterios vistos en
clase.
Definimos los mensajes
que van a guiar a la
persona durante el
ejercicio. Son:

Welcome screen
Pantalla de bienvenida

Instructions
Instrucciones

Thank you screen

Pantalla de
agradecimiento

Closed
Cierre
En este paso
podemos agregar
preguntas para
conocer y entender
mejor a las y los
participantes:

Pre-study questions
Preguntas antes del
estudio

Post-study
questions
Preguntas al final del
estudio
Por último,
configuramos
el idioma, la
duración del
estudio y
accedemos al link
para compartirlo.
Haciendo click en “Preview” tenemos una vista previa del estudio.
Lo compartimos haciendo click en “Launch”.
Una vez que
recopilamos
todas las respuestas
necesarias, en la
pestaña
de “Analysis” (Análisis)
encontramos los
resultados del estudio.
Como vimos en
clase,
nos vamos a focalizar
en los siguientes
para realizar el
informe:

Similarity matrix
Matriz de similitud

Dendrograms
Dendrogramas
Tarea para el Proyecto
Para continuar con el Proyecto Final que vamos a desarrollar durante todo este curso:
Vamos a realizar la Arquitectura de la información de nuestro proyecto aplicando la técnica de
Card Sorting Abierto con Optimal Workshop, obtendremos como resultado el Dendrograma y la
Matriz de similitud con las que realizaremos un informe de conclusiones.
Para ello realizaremos las siguientes tareas:
● Completar las tarjetas: 20 (tareas que surgen del MVP y Benchmarking)
● Crear una introducción detallada para los participantes, explicando la consigna que deben
cumplir con respecto a las tarjetas, realizarles preguntas de segmentación básicas (por
ejemplo: nombre, ciudad, edad) y redactar las preguntas finales para los usuarios, para
clarificar sus decisiones y ver si comprendieron el lenguaje de las tarjetas.
● Invitar a 10 participantes mínimo (que pertenezcan al grupo de la user persona) y enviarles el
link para el cardsorting, debemos recordarles que se realiza exclusivamente desde una PC.
● Analizar e interpretar los resultados (gráficos y respuestas), y realizar un informe con las
conclusiones del estudio (aciertos, errores, correcciones realizadas, conclusiones, etc.).
Tarea para el Proyecto
Luego vamos crear el Mapa de sitio, en Whimsical, utilizando la información validada por los
usuarios, obtenida del informe del estudio de CardSorting y sus gráficos.
Para hacerlo debemos:
● Ir a Whimsical y seleccionar Flowchart
● Definir cuáles van a ser mis categorías y subcategorías a partir de los resultados dados por
los participantes/usuarios (como ellos ordenaron la información)
● Crear el diagrama de mi app, utilizando los recuadros y flechas, en forma vertical, partiendo
desde la HOME, siguiendo a las categorías principales y luego desde estas a las
subcategorías y dentro las tareas u opciones que se encuentren.
Tener en cuenta que como resultado debe quedar el diagrama de app lo más ordenado y
coherente posible. Vamos a tratar de respetar al máximo las preferencias del usuario y también
tener en cuenta nuestra interpretación de los resultados (por ej: si en las preguntas finales
notamos que varias tarjetas no fueron comprendidas, pudieron ser ubicadas en lugares incorrectos
o al azar, y tendremos que renombrarlas para facilitar su comprensión).
Ejemplo de entrega
05.1

Card Sorting Elegimos las siguientes 19 tarjetas para que nuestros usuarios las organicen. Además agregamos
información personal como nombre, edad y domicilio; preguntas sobre su alimentación y por
último su opinión sobre la dificultad de la actividad.

Ajuste Ayuda Apto Vegano Buscar Carrito

producto

Cerrar sesión Cosmética Comida Datos Elegir

Personales producto

Envío Estado del Flexitariano Medios de Mercado

pedido Pago

Pedidos Vegetariano
Notificaciones Vegano
Anteriores
05.2

Dendrograma

Nuestros participantes son mayormente veganos y vegetarianos. 10 de ellos pudieron agrupar las tarjetas. A 5
de ellos les resultó fácil. Sin embargo algunos destacaron que algunas tarjetas podría ser subcategorías de
otras más amplias

Alimentación, categorías por dieta, Opciones

Categorías,secciones

Barra de opciones, tarea, info útil

Acciones de compra, compra, envíos

05.3

Matriz de similitud

4 Grupos
Obtuvimos como resultado 4
agrupaciones distintas:
-Flexitariano, vegetariano, vegano, apto
vegano
-Mercado y cosmética
-Notificaciones, ajustes y cerrar sesión
-Estado del pedido, envio, medios de
pago y carrito
05.4

Mapa de sitio

Link a Whimsical
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.

Todo en el Aula Virtual.

Muchas gracias por tu atención.
Nos vemos pronto
 POV y MVP

¿Qué es POV?
POV o Point of view, en español significa Punto de vista.

En UX sirve para obtener de forma concisa el qué, para quién y por qué estamos creando nuestro
producto o servicio.
Si podemos entender realmente la problemática de nuestros usuarios podremos generar una solución
adecuada, focalizada y con valor agregado.

Punto de vista
Para elaborar un “Punto de Vista” tenemos que
pensar en una historia (breve y significativa) sobre el
problema que vamos a abordar y cómo vamos a usar
esa visión única que nos da el diseño para elaborar
una solución para ese usuario.
● Usuario (descripción del usuario, por qué es nuestro usuario y no otro)
● Necesita (problema a abordar — en forma de verbo)
● Porque (describimos la clave del problema, lo que motiva a hacer).

Storytelling en UX
Estas técnicas narrativas son herramientas muy útiles para el diseño de servicios y productos
digitales.
Es el arte de crear una secuencia de eventos, reales o ficticios, creando una atmósfera que envuelva y
cautive.
Se trata de una manera de contar un mensaje para transmitir cosas e intentar influir en nuestro
comportamiento.

Estructura y requisitos:
User persona - Necesita (relacionado a nuestra app) - porque: insight Arco
argumental + Emoción
Introducción - Nudo - Desenlace

¿Por qué es importante?

Contar historias es un recurso muy efectivo porque apela a la forma en la que funciona la mente
humana.
Es un impulso natural de mantener orden y dotar de significado a lo que observamos.
Las historias nos ayudan a recordar, las procesamos de una forma mucho más profunda de lo que
procesamos otro tipo de información. Toda la información rica en detalles que nos da la descripción
de los personajes, ubicación y los eventos, los relacionamos con nuestra experiencia personal, nos
ayuda a conectar de manera personal con la información e ideas que transmite la historia.
Las emociones juegan un papel muy importante también. Una historia cercana que cala hondo o toca
un punto sensible en el usuario puede desencadenar reacciones muy fuertes o memorias profundas.

"La gente olvidará lo que dijiste, olvidará lo que hiciste, pero nunca olvidarán lo que les
hiciste sentir".
Maya Angelou.
Consejos para contar una buena historia
No se trata simplemente de tener una historia y contarla. La magia está en el arte de contarla, quiénes
y cómo lo hagan. Solo así se conseguirá atraer a la audiencia, conectar con ella y diferenciarnos del
conjunto.
Para que la historia pase al siguiente nivel, es importante que gire en torno a personas reales antes que
«usuarios sin nombre». Cuando se da un poco de información acerca del trasfondo de la historia y el
usuario, ayuda a vincular la historia con las necesidades de los usuarios.
Contar historias que les resulte familiar a los receptores ayuda a crear una buena conexión entre dicho
receptor y la propia historia.
En relación a la trama, se describe cómo y porqué un usuario podría interactuar con un producto. Esto
puede basarse de nuevo en una interacción real que se haya observado o puede ser un ejemplo
hipotético pero realista.

Compartir datos del usuario es efectivo, pero hacerlo describiendo esos datos a través de una historia
rápida es incluso mucho más persuasivo.
Datos: Durante el testeo, el 64% de los usuarios abandonaron la web tras haber realizado una
búsqueda sin obtener resultados.
Efectivo: Julia estaba tan frustrada mientras intentaba buscar un producto en la web de diferentes
formas sin obtener resultados, que finalmente se sintió tonta por no saber hacerlo y salió de la web
resoplando. 64% de los usuarios, durante el test, se sintieron de forma similar y abandonaron la web
tras una búsqueda sin resultados.
Súper efectivo: Julia, mamá de tres, cuando terminó las tareas del hogar, fue a su pc a intentar realizar
una búsqueda.. Se frustró mucho luego de buscar de mil formas en la web y no obtener resultados.
Aquella situación hizo que se sintiera tonta por no considerarse buena con la pc, así que se rindió y
salió de la web angustiada. Realizamos un test y sus resultados indican que 6 de cada 10 usuarios se
sintieron igual que Julia y abandonaron la web tras una búsqueda sin resultados.
 ¿Qué es un Storyboard?

Es el guión gráfico. Es un conjunto de ilustraciones que aparecen en secuencia y que se utilizan como
guía para entender una historia.
La característica principal del storyboard es su representatividad: es visual, la historia aparece frente a
nuestros ojos como algo menos abstracto que en el guión.
Un storyboard se parece mucho a una historieta de la narración.

¿Cómo crear un storyboard?

1) Elabora una línea temporal. Piensa cuál va a ser el inicio de tu spot, el desarrollo y el
desenlace. Te ayudará comenzar creando un listado de todo lo que va a pasar, para después
ordenarlo.
2) Identifica cuáles son los momentos clave de tu historia. Aquellos en los que se representa el
mensaje que quieres transmitir o los que destaquen las cualidades de tu producto.
3) Ten en cuenta que el storyboard sirve para mostrar visualmente una idea. No es el anuncio ni
el vídeo final, debe dibujarse rápidamente sin mucho detalle, bastan unos bocetos para plasmar
las ideas.
 4) Elabora los bocetos y los complementas con información. Utilizar globos de diálogo, una
descripción aclaratoria debajo del cuadro, etc.
5) Si no se te ocurre qué representar en cada viñeta, piensa en dónde puedes "cortar" la historia.
Un ejemplo sencillo: En la primera viñeta podría aparecer un personaje triste porque tiene
una necesidad que no logra cubrir. En la siguiente, el anuncio de nuestro producto. Y, en la
última, el mismo personaje feliz, sin el problema que le atormentaba.

Ejercicio Clase 7
Agarren hoja y lápiz, vamos a practicar rápidamente cómo hacer un storyboard.

Relato breve para el Ejercicio en clase de Storyboard:

Un hombre se le acercó a un sabio anciano y le dijo:

– Me han contado que eres muy sabio. Por favor, ¿qué cosas haces como sabio que no podamos
hacer los demás?
El anciano le contestó:
– Bueno, cuando como, simplemente como; duermo cuando estoy durmiendo, y cuando hablo
contigo, sólo hablo contigo.
El hombre lo miró con asombro y le dijo:

– Pero yo también puedo hacer esas cosas y no por eso soy un sabio.
– Yo no lo creo así -replicó el anciano.
– Cuando duermes, recuerdas los problemas que tuviste durante el día, o te preocupas por los que
podrás tener al levantarte. Cuando comes, estás pensando en qué harás después. Mientras hablas
conmigo, estás pensando en qué vas a preguntarme o cómo vas a responderme antes de que termine
de hablar.

¿Qué es un MVP?

Minimum Viable Product - Producto Mínimo Viable.

En desarrollo de producto, el producto viable mínimo es un producto con suficientes características

para satisfacer a los clientes iniciales, y proporcionar retroalimentación para el desarrollo futuro.
En desarrollo de startups (empresas emergentes altamente innovadoras), para garantizar que una
startup tenga éxito, se necesita desarrollar productos escalables, que deben introducirse
gradualmente. Esta práctica es muy funcional para reducir riesgos y evitar gastos excesivos. Se
basa en una validación real, basada en pruebas y feedbacks de los clientes.

MVP
Es la versión de un nuevo producto que permite a un equipo recolectar, con el menor esfuerzo
posible, la máxima cantidad de conocimiento validado sobre sus potenciales clientes.

Se utiliza para obtener un conocimiento rápido y cuantitativo del mercado de un producto, o de

algunas funcionalidades en particular.
Tiene solamente aquellas funcionalidades que permiten que el producto sea lanzado.

Al pensar en un nuevo servicio, producto o canal, se suelen establecer hipótesis o pequeños

supuestos acerca de lo que se necesita para solucionar una necesidad.
Un ejercicio para determinar el producto mínimo viable, permite establecer qué ideas son válidas y
cuáles deben descartarse antes de iniciar la producción.
Para lograrlo necesitamos:

● Listado de tareas
● Determinar cuales son prioridad, imprescindible.
● Determinar futuras versiones, deseable.
Proyecto Final
TAREA PARA EL PROYECTO FINAL

Para continuar con el Proyecto Final que vamos a desarrollar durante todo este curso: Vamos a
realizar un POV aplicando las técnicas de Storytelling y Storyboard, esto nos permitirá a
nosotros y a otros/as comprender y empatizar con nuestros usuarios.
Para ello realizaremos las siguientes tareas:
Completar la frase: Usuario - Necesita - Porque.

Crear una narración sobre nuestro proyecto que cuente con un Inicio - Nudo - Desenlace, que cree una
conexión emocional con nuestra user persona. Que sea breve y persuasiva. Representar visualmente la
narración con un storyboard, ilustrando los momentos clave de la historia (6 dibujos máximo).
Recuerden que no es necesario saber dibujar “bien” sino que se entienda la idea. Puede ser a mano o
digital, si es a mano deberán pasarlo a tinta y escanearlo con buena calidad y buena luz para que se
pueda visualizar correctamente.

Para continuar con el Proyecto Final que vamos a desarrollar durante todo este curso: Vamos a definir
un MVP, esto nos permitirá tener en claro cuales son las funcionalidades básicas que debe tener mi
app.
Para hacerlo debemos:

Redactar una lista de tareas (todas las que se me ocurran relacionadas a mi proyecto). Definir
prioridades, cuáles tareas son imprescindibles para el funcionamiento de la app. Definir cuáles tareas
son deseables para versiones más avanzadas de mi app en un futuro (versión 2.0).
Identificar cuál es la función básica y primordial que mi usuario realizará en mi app, y por qué es
deseable para mi usuario.
Realizar un informe sobre las conclusiones del ejercicio, cuáles tareas se desarrollaran primero y por
qué (explicar brevemente cada tarea).
 Arquitectura de la información

¿Qué es Arquitectura de la información?

En pocas palabras, la arquitectura de la información es el arte de organizar la información de la
forma más clara y lógica posible.
Para que el usuario pueda encontrar fácilmente lo que está buscando. Además, también nos permitirá
poder añadir fácilmente nuevas funcionalidades y escalar el producto.
Se trata de organizar, estructurar y etiquetar correctamente todos sus elementos.

«La arquitectura de la información es la práctica de decidir cómo organizar las partes de

algo para que sea comprensible»
Information Architecture Institute.

Arquitectura de la información
Es crucial para el desarrollo de cualquier sitio, aplicación o software.

Esto implica una relación estrecha entre todas las partes del proceso, los involucrados (desde la
empresa, los diseñadores, programadores e inclusive usuarios testers) deben funcionar en
sintonía.
La arquitectura de la información funciona como base para el trabajo de los diseñadores UX y brinda
los recursos necesarios para estructurar el sistema, haciéndolo comprensible y fácil de usar.

La arquitectura de la información permite que las jerarquías presentes en páginas web, aplicaciones y
programas nos orienten hacia donde tenemos que ir según nuestras necesidades. La estructura debe
estar construida en base a una lógica simple para que sea intuitiva. Podría parecer que podemos
prescindir de ella, pero se convierte en algo central ya que se encarga del estudio, análisis,
organización y disposición de la información. Es decir, determina la estructura que tendrá nuestro
sistema de información de nuestro proyecto.
Entender cómo navega un usuario puede ser de suma utilidad para determinar en qué medida es
necesaria la arquitectura de la información.
Un usuario que ingresa a un sitio web se pregunta:

¿Qué es esto? ¿Qué función cumple? ¿Qué puedo hacer? ¿Dónde está lo que buscaba? La
arquitectura de la información busca dar respuesta a estas preguntas para que el usuario pueda navegar
y permanecer. Así, ofrece la posibilidad de incrementar la calidad del servicio en pos de que sea más
navegable, usable y accesible.
Esto implica garantizar que los usuarios tengan una experiencia satisfactoria, en cuanto a navegación y
usabilidad, a través de la estructura y el lenguaje que se utilice en la construcción del producto digital.

Es un documento vital en el que se definen la organización y relaciones entre todos los elementos de
nuestra app.
De ella depende el resto del proceso, los wireframes, prototipos y diseño final.
En este punto del proyecto idearemos una arquitectura de la información para representar y
comprender el modelo mental de nuestra user persona, saber como prefieren y reconocen la
información cuando ingresan a una app.
Para lograr esto necesitamos que el usuario forme parte del proceso de diseño. Utilizaremos
la técnica de Card Sorting.
 Card Sorting

Vamos a entregarle a nuestros usuarios unas tarjetas o cards con los nombres de todos los elementos
que componen nuestra app, es decir categorías y subcategorías de los contenidos que encontraríamos
en nuestra app (utilizando para esto la lista de tareas que creamos para el MVP - Imprescindibles, y
también los resultados del Benchmarking donde pudimos analizar qué funcionalidades ofrece la
competencia) y luego convocamos a los usuarios para que las agrupen y asocien como deseen.
Recordando que diseñamos para el usuario, no para nosotros los diseñadores.

Objetivos
Agrupar: los distintos contenidos

Jerarquizar: subordinar unos contenidos a otros Rotular:

nombrar las categorías

Tipos de Card Sorting

Abierto - El usuario puede agrupar libremente Cerrado
- Los grupos ya están predefinidos Individual
Grupal Presencial
Remoto
Cualitativo - Debemos poder observar y registrar el proceso de decisión
Cuantitativo - Procesamiento estadístico de datos

Optimal Workshop
Card Sorting Abierto - Optimalsort - Híbrido Introducimos los
nombres en cada tarjeta. Redactamos una introducción para los
usuarios.
Configuramos los datos que se dan antes de comenzar el cardsorting, consigna detallada: leer, asociar,
agrupar, jerarquizar estas tarjetas, también nombrar las categorías a donde pertenecen. Preguntas para
poder organizar y segmentar a los usuarios que participen.
Redactamos las preguntas finales que se les hará a los usuarios una vez finalizado el cardsorting: ¿Qué
tan difícil te resultó agrupar las tarjetas? Fácil 1-10 Difícil ¿Cuál tarjeta te generó dudas al momento de
ordenarla? ¿No sabías el significado de alguna tarjeta?.
Incluimos a los participantes enviándoles el enlace y aclarando que deben realizarlo desde una PC o
no será posible finalizar el cardsorting.
Lanzamos el Cardsorting con el botón “Launch”, y recordar que una vez realizado esto no se podrán
realizar más cambios. Chequear en “Study settings” que no esté en “Draft”.

Conclusiones
La herramienta nos brindará dos gráficos (en
“Analysis”):

Dendrograma (Dendrogram)- Este diagrama

nos permite ver los grupos y etiquetas
principales elegidas por los usuarios.
Matriz de similitud (Similarity matrix)-
Este diagrama detecta grupos o tarjetas que
fueron más frecuentemente emparejadas
entre los usuarios, donde el número sea
mayor es donde más similitud hay.
A partir de estos resultados debemos analizar e interpretar la información, que luego nos servirá para
realizar nuestra arquitectura de la información para nuestro proyecto con información validada por los
usuarios.

Dendrograma
 Mapa del sitio

A partir de los resultados obtenidos del cardsorting y del análisis posterior de sus diagramas, vamos a
poder realizar el mapa del sitio, este permitirá ver las relaciones y agrupaciones establecidas entre los
contenidos.
En algunas ocasiones será necesario renombrar algunas categorías o incluso permitir el acceso a algún
apartado desde distintas categorías.
Allí indicaremos las secciones principales de nuestra app, cómo se conectan a las subsecciones y qué
relación hay entre ellas, partiendo de la “Home”.

Mapa de sitio abreviado de Discord

Es una herramienta online gratuita súper intuitiva y simple de usar, utilizaremos el
“Flowchart” para diagramar:

Ejercicio Clase 8
Optimal Workshop y Whimsical

Proyecto Final
TAREA PARA EL PROYECTO FINAL

Para continuar con el Proyecto Final que vamos a desarrollar durante todo este curso: Vamos a
realizar la Arquitectura de la información de nuestro proyecto aplicando la técnica de Card Sorting
Abierto con Optimal Workshop, obtendremos como resultado el Dendrograma y la Matriz de
similitud con las que realizaremos un informe de conclusiones. Para ello realizaremos las siguientes
tareas:
Completar las tarjetas: 20 aprox (tareas que surgen del MVP y Benchmarking)
Crear una introducción detallada para los participantes, explicando la consigna que deben cumplir
con respecto a las tarjetas, realizarles preguntas de segmentación básicas (por ejemplo: nombre,
ciudad, edad) y redactar las preguntas finales para los usuarios, para clarificar sus decisiones y ver si
comprendieron el lenguaje de las tarjetas.
Invitar a 10 participantes mínimo (idealmente que se asimilen a la user persona) y enviarles el link
para el cardsorting y recordarles que se realiza desde una PC si o si.
Analizar e interpretar los resultados (gráficos y respuestas), y realizar un informe con las conclusiones
del estudio (aciertos, errores, correcciones realizadas, conclusiones, etc.).

Luego vamos crear el Mapa de sitio, en Whimsical, utilizando la información validada por los
usuarios, obtenida del informe del estudio de CardSorting y sus gráficos.
Para hacerlo debemos:

Ir a Whimsical y seleccionar Flowchart

Definir cuáles van a ser mis categorías y subcategorías a partir de los resultados dados por los
participantes/usuarios. (como ellos ordenaron la información)
Crear el diagrama de mi app, utilizando los recuadros y flechas, en forma vertical, partiendo desde la
HOME, siguiendo a las categorías principales y luego desde estas a las subcategorías y dentro las
tareas u opciones que se encuentren.
Tener en cuenta que como resultado debe quedar el diagrama de app lo más ordenado y coherente
posible. Vamos a tratar de respetar al máximo las preferencias del usuario y también tener en cuenta
nuestra interpretación de los resultados (por ej: si en las preguntas finales notamos que varias tarjetas
no fueron comprendidas, pudieron ser ubicadas en lugares incorrectos o al azar, y tendremos que
renombrarlas para facilitar su comprensión.)
DISEÑO UX/UI
Clase 10
Repaso
Les damos la bienvenida
Vamos a comenzar a grabar la clase
 Clase 09 Clase 10 Clase 11

User Flow Repaso e Integración Pre-entrega del Proyecto Final

● ¿Qué es un User Flow? ● Repaso de todos los

● Tipos de flujo de usuario
ejercicios que forman
● Task Flow
● ¿Qué es el Happy Path?
parte de la Preentrega.
● Tarea para el Proyecto ● Proyecto Guía.
Final ● Espacio de consultas.
Codo a Codo - Diseño UX/UI
Diploma
Se otorga una constancia de participación en el programa.

Requisitos para obtener el diploma:

● Asistir al 65% de las clases en vivo (sincrónicas)

● Acceder semanalmente al Aula Virtual
● Realizar los ejercicios obligatorios semanales
● Aprobar el Proyecto Final Obligatorio
● Aprobar el EFI (Examen Final Integrador)
¿Qué es el diseño?
El diseño es el proceso previo de configuración mental, «pre-figuración», en
la búsqueda de una solución en cualquier campo. Se aplica habitualmente
en disciplinas que requieren creatividad.

El diseño involucra variadas dimensiones que van más allá del aspecto, la
forma y el color, abarcando también la función de un objeto y su interacción
con el usuario.

Durante el proceso se debe tener en cuenta además la funcionalidad, la

operatividad, la eficiencia y la vida útil del objeto del diseño.
El diseño como forma de comunicar
1. Es una disciplina dedicada a la producción de comunicaciones visuales orientadas a
un público específico.

2. Se encarga de comunicar a través de medios visuales y como finalidad transmitir un

mensaje específico despojado de rasgos personales.

3. El hecho de crear y cumplir con un propósito se centra en: la transformación de una

realidad existente por una deseada.
El diseño como forma de comunicar
4. Los diseños se basan en un mensaje concreto que se quiere transmitir y a partir de
ello obtener una respuesta del público al que está dirigido. Estos afectan el
conocimiento, las actitudes y el comportamiento de la gente.

5. Para poder crear estas piezas de comunicación, el mensaje se tiene que adecuar al
grupo al que se está introduciendo. De esta forma se analiza ampliamente a quién
irá encaminado el mensaje. ¿Qué piensa? ¿Qué hace? ¿Qué ve? ¿Qué siente? ¿En
qué cree?

6. En todo diseño debe haber correlación entre lo que se quiere transmitir y los
elementos utilizados sin resignar su objetivo final sea cual sea.
Tema: Diseño

El diseñador de comunicación visual trabaja en la interpretación, el

ordenamiento y la presentación visual de mensajes. Su sensibilidad
para la forma debe ser paralela a su sensibilidad para el contenido.

Autor/as/es: Frascara
Comunicación visual
El emisor se desdobla en dos protagonistas:

○ Aquel que crea el mensaje y necesita transmitirlo (cliente o marca)

○ El diseñador que interviene para hacer que dicho mensaje sea efectivo.

El receptor es el sujeto para quien está destinada la comunicación, un sector de la

sociedad o el público ideal.

EI significado es lo que se desea expresar, es el mensaje. ¿Qué se comunica?

El significante está siempre unido al significado pues la comunicación se produce en el

cruce de ambos. ¿Cómo se comunica?
Reglas del diseñador profesional
● El diseñador es un intérprete que ● El diseñador maneja conceptos, códigos
conforma mensajes producidos por y estética para poder enviar mensajes
otras personas. fácilmente comprendidos y absorbidos
por las audiencias a quienes se dirigen.
● El diseñador no adorna, es un
proceso de creación visual con el ● El diseño, por ética, debe tener como fin
propósito de comunicar un mensaje último mejorar y transformar el mundo
específico. donde vivimos.

● El diseño debe ser estético pero ● El diseño forma parte de nuestra vida
también funcional. diaria, estamos rodeados de diseño por
lo tanto debe ser cuidadoso.
La retórica de la imagen
La denotación, es el significado básico de
una palabra, constante, universal, el que una
palabra tiene para todos los conocedores de
una lengua.

Por ejemplo: un cuenco, una bombilla, una

infusión y yerba. Lo denotado sería lo real, lo
objetivo y lo literal, en lo que está de acuerdo
toda la comunidad lingüística, es decir el
significado que le da el diccionario.
La retórica de la imagen
La connotación, son todas aquellas ideas y
asociaciones que se despiertan a la hora de
visualizar un mate.

Por ejemplo: Argentinidad, charlas,

reunión con amigos, campo, Pampa, etc.
Lo connotado son otros significados que
podemos darle a la imagen.

Estas ideas o asociaciones a la imagen del

mate van a depender de quién sea el
observador. De su cultura, entorno, edad,
lugar, educación y muchos factores más.
Diseño UX facetas
El diseño de experiencia de usuario (UX) es un conjunto de metodologías, mindsets
y procesos, orientados a diseñar un servicio o producto, teniendo en consideración
las necesidades de los usuarios finales (y no de quien está desarrollando o
diseñando).

Las 7 facetas o factores que construyen la experiencia de usuario de Peter Morville:

Valioso - Útil - Deseable - Accesible - Creíble - Ubicable - Usable

¿Qué es la Usabilidad?
“El atributo de calidad de un producto, que se refiere sencillamente a su
facilidad de uso.
Implica el grado en que el usuario puede explotar o aprovechar la utilidad
de un producto.”

Jakob Nielsen - Padre de la usabilidad

Características
● Facilidad de aprendizaje ● Eficacia
¿Cuán fácil es llevar a cabo las tareas la ¿Cuántos errores comete el usuario? La
primera vez? gravedad del error, puede recuperarse
● Eficiencia fácilmente de esos errores?

Una vez que aprendieron el ● Satisfacción

funcionamiento, ¿cuán rápido las realizan?
¿Cuán agradable es usar el producto?
● Cualidad de ser recordado
Si pasan un tiempo sin usarlo,
¿Cuán fácil es que vuelvan a usarlo
eficientemente?
¿Qué es Design Thinking?
Design Thinking es una metodología orientada al usuario, que se enfoca en
detectar y entender las necesidades de los mismos, con el objetivo de
generar soluciones innovadoras en un determinado marco de trabajo.

Aquellos productos y servicios diseñados de manera adecuada a través de

este método aportan valor a las personas.

El proceso de Design Thinking se compone de 5 etapas o fases.

Etapas del proceso
Empatizar: A través de esta etapa que tiene Prototipar: Damos forma de manera rápida y
como centro la investigación, buscamos simplificada a aquellas ideas que
conocer a nuestros usuarios. Este comienzo seleccionemos. Al construir prototipos,
se basa en comprender sus necesidades. rápidamente obtendremos feedback de
nuestros usuarios para poder realizar cambios
Definir: Organizamos todo lo que aprendimos y mejoras antes de llegar al resultado final.
de nuestros usuarios y nos quedaremos con lo Testear: En esta última etapa, mostramos el
que determina el problema central al cual prototipo diseñado para obtener
podremos ofrecer soluciones como devoluciones de nuestros usuarios. No
diseñadores/as. estamos vendiendo sino aprendiendo del
feedback que recibimos.
Idear: Se trata de "pensar fuera de la caja"
para dar con el mayor número de ideas Dado que Design Thinking es un proceso
posibles. No nos centramos en buscar la idea iterativo, nos permite volver a las etapas
correcta si no en imaginar la mayor cantidad anteriores para realizar cambios y mejoras en
de alternativas. nuestro producto.
Diseño Centrado en el Usuario
● El DCU comprende una serie de métodos y técnicas para analizar, diseñar y evaluar
hardware y software (interface)

● Tiene un enfoque de diseño cuyo proceso está orientado por la información acerca
de quienes van a hacer uso del producto (usuarios)

● Tener en cuenta: ¿Quién usará el sistema?, ¿qué tareas llevará a cabo con el mismo?

● Un proceso iterativo (cíclico) en el cual diseño y evaluación se incorporan desde la

fase inicial del proyecto y en todas las fases que veremos a continuación:
Fases
1. Análisis. Entendiendo a los usuarios y sus necesidades

2. Diseño. Proyecto una solución que satisfaga las necesidades

3. Validación. Compruebo el valor que estoy agregando a los usuarios

Iterar: es un proceso de
mejora continua.
Impacto de la Imagen
El impacto de las imágenes es vital tanto para el medio impreso como el virtual.
El usuario examina los detalles visibles, desde la imagen de la portada, el color, los
títulos, la organización de la información, la línea gráfica (coherencia) y todo lo que a
su juicio la hace sobresalir de otros textos o páginas web.
Las personas eligen empujados por lo que ven, la sensación que les produce y lo que
les dicen los titulares. Si a primera vista el medio les atrae, lo adquirirán.
El diseño por tanto, es la llave de acceso para alcanzar las metas, de ahí la
importancia de poseer una gráfica que destaque por sobre las demás.
Lo primero que elegimos es lo que más nos atrae visualmente.
En resumen: La primera impresión cuenta.
A una persona le lleva
alrededor de 50
milisegundos
(esto es 0.05 segundos)
en crear una primera
opinión sobre el sitio y
definir si se queda o se
va.

Esto quiere decir que el

usuario hace juicios
rápidos basándose
solamente en el diseño.
Un poco sobre fotografía
Para aprender a distinguir entre buenas y
malas fotografías necesitamos entrenar
nuestra mente y también nuestros ojos.

Prestemos atención de ahora en más en:

si la imagen está nítida, si el foco está en

el lugar adecuado, si está sobreexpuesta
(demasiado blanca) o subexpuesta
(demasiado oscura), si está centrada, si
tiene manchas o reflejos molestos, si los
colores son los adecuados etc.

Importante: que no se deformen ni

tengan marcas de agua.
Diseño Web
La información está por todas partes, y por eso es extremadamente importante que los
diseñadores piensen en hacer diseños claros. Las piezas del diseño tienen que atraer la
atención de los usuarios, ya sea mientras compran en una tienda online, leen un blog o,
simplemente, navegan por internet.

El diseño web debe ser fácil de leer y de entender.

Debemos recordar que optar por un diseño sencillo en lugar de uno recargado es clave
para mantener interesados a los lectores. Una gran cantidad de elementos, imágenes,
colores, y formas diferentes en una página pueden hacer que una web se vea más
"barroca", lo cual distraerá la atención del usuario.

Una buena forma de crear una experiencia agradable en la web es recordar que menos es
más.
Las leyes de la Gestalt
“La mente configura, por medio de ciertas leyes, los elementos que llegan a
través de los canales sensoriales o de la memoria (pensamiento, inteligencia
y resolución de problemas), es decir la percepción.
La palabra Gestalt hace referencia a figura, forma u organización.
La Gestalt analizó diversas áreas de la psicología (actitudes, el aprendizaje, la
motivación, etc.) pero se centró en la percepción.
No percibimos como elementos aislados, sino que por el contrario
percibimos como globalidad o conjunto organizado.”
“El todo es más que la suma de las partes”
Mapa de bits vs. Gráfico vectorial
● Mapa de bits o Bitmap: es un grupo
de bits. Cada bit, la unidad mínima de
información, es cada píxel que
compone la imagen. Cada píxel es un
cuadro con información sobre su
color y la unión de muchos de estos
cuadros crea la imagen completa.
● No es escalable: alterar el tamaño de
un bitmap provoca que ésta se
“píxele”.
● Fotorrealista: pueden mostrar gran
cantidad de detalles y variaciones
sutiles en el color. Las fotografías son Mapas de Bits
Mapa de bits vs. Gráfico vectorial
● Gráfico vectorial o curvas: está formada
por la unión o superposición de
unidades básicas de información pero
en lugar de píxeles, estas unidades
básicas son vectores matemáticos, las
formas definidas por los vectores se
basan en las curvas Bézier.
● Es escalable: se puede escalar
libremente sin sacrificar la calidad.
(permanecen nítidas)
● Totalmente editables: Los objetos de
una imagen vectorial pueden constar de
líneas, curvas y formas con atributos Los “Logos” son Gráficos vectoriales
editables como color, relleno y contorno.
¿Qué es Photoshop?
Adobe Photoshop es el software líder en edición de imágenes de mapa de
bits, desarrollado por Adobe Systems Incorporated.
Usado principalmente para el retoque de fotografías, su nombre en español
significa "taller de fotos". Es conocido mundialmente.
Nos referiremos a este software como: Photoshop o Ps.
Formatos
JPEG - Es el formato más popular. El formato .JPEG (Joint Photographic Experts Group)
destaca por el alto nivel de compresión que ofrece y, que se basa en la pérdida de
calidad. Es por eso que este formato sacrifica valores imperceptibles por el ojo humano
para bajar el peso final, así como lo hace un archivo .MP3 con el sonido. No son muy
utilizadas entre quienes requieren fotos en alta calidad.

PNG - El formato .PNG (Portable Network Graphics) tiene un nivel de compresión que
casi no presenta pérdidas. La principal característica de este formato es que .PNG
permite el uso de transparencias (canal alpha o alfa) con bastante profundidad, ya sea
completa o en ciertos píxeles utilizando diferentes canales.
No son óptimas para diseño de impresión de alto nivel. Se utilizan para diseño web, o
en condiciones no profesionales, debido a su peso moderado y buena administración
del color.
JPEG PNG
¿Qué es UX research?
La investigación de usuarios se enfoca en comprender los
comportamientos, necesidades y motivaciones de los usuarios a través de
técnicas de observación, análisis de tareas y otras metodologías de
retroalimentación.

Es el puente entre el Usuario y los Diseñadores.

Investigación de Usuarios
Se trata de responder una pregunta o hipótesis que usted o su equipo de diseño tengan.

No existe un enfoque único para construir una práctica de investigación porque cada
organización tiene sus propios objetivos. Aprender qué tipo de investigación hacer, por qué y
cómo debe hacerlo son pasos importantes para establecer una práctica de investigación.

Algunos datos siempre son mejores que ninguno, pero saber cuándo recopilarlos y qué tipo de
datos necesita comienza por comprender el objetivo.

Behzod Sirjani, fundador de Yet Another Studio y exjefe de operaciones de investigación y

análisis de Slack, dice que debe intentar investigar cada vez que desee aumentar su
confianza en una decisión:

La investigación siempre debe orientarse en torno a una decisión porque saber lo que está
tratando de decidir lo ayudará a comprender lo que está tratando de ver y cómo realmente va a
hacer esa investigación.
Insight - visión interna o verdad revelada
No es un entendimiento común, sino un A veces podemos confundir los datos o el
descubrimiento de una verdad profunda feedback que recibimos de nuestros
consumidores como insights, pero lo cierto
y muchas veces oculta, que solo
es que debes ir más allá, pues la clave
encontraremos charlando con los usuarios para tener insights está en el análisis y la
e indagando sobre sus pensamientos más interpretación que hagas.
internos.
Los datos hacen parte del proceso para
¿Por qué hizo eso? ¿Qué pensó en ese obtener insights pero se convierten en
conocimientos o verdades claves cuando
momento? ¿Qué motivó su decisión?.
les añades interpretación. Datos sin
interpretación no son insights.
Entender el por qué de lo que hacen o la
motivación detrás de tus consumidores
hará que sean verdaderos insights.
¿Qué es benchmarking?
El benchmarking competitivo consiste en identificar información específica
acerca de sus competidores directos, y compararlos.
Consiste en tomar "comparadores" o benchmarks, que podría traducirse
como medida de calidad.
Es un proceso de investigación que proporciona información valiosa para la
toma de decisiones.
Es una actividad continua porque el mercado está constantemente
cambiando. Al realizarlo nos da una “foto” del momento que estamos
analizando.
No es un proceso para copiar o imitar a la competencia.
Persona en el diseño UX/UI

● Es un individuo ficticio que se crea para identificar un público específico.

● Son modelos de personas que representan a los usuarios durante el proceso de

diseño.

● Son imaginarios pero están creados con mucho detallismo y precisión.

● No están diseñadas únicamente según su información demográfica.

La proto persona debe tener
1. Datos personales y foto: nombre y apellido, profesión.

2. Datos demográficos: lugar de residencia, edad, sexo, nivel de educación, estado civil,
ingresos

3. Biografía: breve reseña de cómo es, cómo vive, qué la define

4. Intereses: hobbies, modo de vida

5. Hábitos de consumo: ¿Qué consume?, cómo lo hace?, ¿por qué lo hace?

6. Objetivos, sueños, metas: ¿Qué quieren hacer y por qué?

7. Su relación con la tecnología: ¿Qué usa?, ¿con qué frecuencia?, para qué?

8. Frustraciones y motivaciones: ¿Qué se interpone en su camino? ¿Qué los hace avanzar?

9. Una frase que identifique lo mejor posible cómo piensa: Se expresa entre comillas “quote”
¿Qué es un mapa de empatía?
Es un esquema visual con preguntas sobre el cliente objetivo ideal de un
producto o servicio determinado.
Sirve para entender mejor a este prototipo de persona y por tanto poder
satisfacer mejor sus necesidades y comunicarnos empatizando al máximo
con ella.
Este lienzo ayuda a reflexionar sobre cómo la afectan el entorno y las
emociones internas que vive.
Es importante tomarla como uno de los puntos de partida para identificar
cómo es este user persona.
¿Qué es una entrevista?
Es una técnica de gran utilidad en la investigación cualitativa para recabar
datos; se define como una conversación que se propone un fin
determinado distinto al simple hecho de conversar. Es un instrumento
técnico que adopta la forma de un diálogo coloquial.

Una persona pregunta y la otra responde, no hay ida y vuelta.

Fases de la entrevista
1. Preparación. Es el momento previo a la entrevista, en el cual se planifican los aspectos
organizativos de la misma como son los objetivos, redacción de preguntas guía y
convocatoria.
2. Apertura. Es la fase cuando se está con el entrevistado en el lugar de la cita, en el que
se plantean los objetivos que se pretenden con la entrevista, el tiempo de duración.
También, es el momento oportuno para solicitar el consentimiento de grabar o
filmar la conversación.
3. Desarrollo. Constituye el núcleo de la entrevista, en el que se realiza el intercambio de
información siguiendo la guía de preguntas con flexibilidad. Es cuando el
entrevistador hace uso de sus recursos para obtener la información que se requiere.
4. Cierre. Es el momento en el que conviene anticipar el final de la entrevista para que el
entrevistado recapitule mentalmente lo que ha dicho y provocar en él la oportunidad
de que profundice o exprese ideas que no ha mencionado. Se hace una síntesis de
la conversación para puntualizar la información obtenida y finalmente se agradece al
entrevistado su participación en el estudio.
¿Qué es POV?
POV o Point of view, en español significa Punto de vista.

En UX sirve para obtener de forma concisa el qué, para quién y por qué
estamos creando nuestro producto o servicio.

Si podemos entender realmente la problemática de nuestros usuarios

podremos generar una solución adecuada, focalizada y con valor
agregado.
Estructura y requisitos
POV

Usuario (user persona)- Necesita (relacionado a nuestra app) - porque (insight)

Técnica de Storytelling:

Arco argumental + Emoción (atmósfera que envuelva, cautive, les resulte familiar)

Estructura de la narración

Introducción - Nudo - Desenlace

Tema: Storytelling

"La gente olvidará lo que dijiste, olvidará lo que hiciste, pero

nunca olvidarán lo que les hiciste sentir".

Autor/as/es: Maya Angelou.

¿Qué es un Storyboard?
Es el guión gráfico. Es un conjunto de ilustraciones que aparecen en
secuencia y que se utilizan como guía para entender una historia.

La característica principal del storyboard es su representatividad: es visual,

la historia aparece frente a nuestros ojos como algo menos abstracto que en
el guión.

Un storyboard se parece mucho a una historieta de la narración.

¿Qué es un MVP?
Minimum Viable Product - Producto Mínimo Viable.
En desarrollo de producto, el producto viable mínimo es un producto con
suficientes características para satisfacer a los clientes iniciales, y
proporcionar retroalimentación para el desarrollo futuro.
En desarrollo de startups (empresas emergentes altamente innovadoras),
para garantizar que una startup tenga éxito, se necesita desarrollar
productos escalables, que deben introducirse gradualmente. Esta práctica
es muy funcional para reducir riesgos y evitar gastos excesivos. Se basa en
una validación real, basada en pruebas y feedbacks de los clientes.
MVP
Al pensar en un nuevo servicio, producto o canal, se suelen establecer hipótesis o
pequeños supuestos acerca de lo que se necesita para solucionar una necesidad.

Un ejercicio para determinar el producto mínimo viable:

Para lograrlo necesitamos:

● Listado de tareas
● Determinar cuales son prioridad, imprescindible.
● Determinar futuras versiones, deseable.
¿Qué es Arquitectura de la
Información?
En pocas palabras, la arquitectura de la información es el arte de organizar
la información de la forma más clara y lógica posible.
Para que el usuario pueda encontrar fácilmente lo que está buscando.
Además, también nos permitirá poder añadir fácilmente nuevas
funcionalidades y escalar el producto.
Se trata de organizar, estructurar y etiquetar correctamente todos sus
elementos.
Arquitectura de la información

Es un documento vital en el que se definen la organización y relaciones entre todos

los elementos de nuestra app.

De ella depende el resto del proceso, los wireframes, prototipos y diseño final.

En este punto del proyecto idearemos una arquitectura de la información para

representar y comprender el modelo mental de nuestra user persona, saber como
prefieren y reconocen la información cuando ingresan a una app.

Para lograr esto necesitamos que el usuario forme parte del proceso de diseño.

Utilizaremos la técnica de Card Sorting en Optimal Workshop.

Optimal Workshop
Card Sorting Abierto - Optimalsort

1. Introducimos los nombres en cada tarjeta.

2. Redactamos una introducción para los usuarios.
3. Configuramos los datos que se dan antes de comenzar el cardsorting, consigna
detallada: leer, asociar, agrupar, jerarquizar estas tarjetas, también nombrar las
categorías a donde pertenecen. Preguntas para poder organizar y segmentar a los
usuarios que participen.
4. Redactamos las preguntas finales que se les hará a los usuarios una vez finalizado el
cardsorting: ¿Qué tan difícil te resultó agrupar las tarjetas? Fácil 1-10 Difícil ¿Cuál
tarjeta te generó dudas al momento de ordenarla? ¿No sabías el significado de alguna
tarjeta?.
5. Incluimos a los participantes enviándoles el enlace aclarando que es muy
importante realizarlo desde una PC o no será posible finalizar el cardsorting.
6. Lanzamos el Cardsorting con el botón “Launch”, y recordar que una vez realizado
esto no se podrán realizar más cambios. Chequear en “Study settings” que no esté en
“Draft”.
Conclusiones
La herramienta nos brindará dos gráficos (en “Analysis”):

● Dendrograma (Dendrogram)- Este diagrama nos permite ver los grupos y etiquetas
principales elegidas por los usuarios.
● Matriz de similitud (Similarity matrix)- Este diagrama detecta grupos o tarjetas que
fueron más frecuentemente emparejadas entre los usuarios, donde el número sea
mayor es donde más similitud hay.

A partir de estos resultados debemos analizar e interpretar la información, que luego nos
servirá para realizar nuestra arquitectura de la información para nuestro proyecto con
información validada por los usuarios.
Mapa de sitio

A partir de los resultados obtenidos del cardsorting y del análisis posterior de sus
diagramas, vamos a poder realizar el mapa del sitio, este permitirá ver las relaciones y
agrupaciones establecidas entre los contenidos.

En algunas ocasiones será necesario renombrar algunas categorías o incluso permitir el

acceso a algún apartado desde distintas categorías.

Allí indicaremos las secciones principales de nuestra app, cómo se conectan a las
subsecciones y qué relación hay entre ellas, partiendo de la “Home”.
¿Qué significa User Flow?
Podemos definir User Flow como la ruta que sigue un usuario en un sitio
web o aplicación para completar una tarea. El flujo de usuario comprende
desde el punto de su entrada sumando el conjunto de pasos que ejecuta
hasta que completa la tarea con un resultado exitoso.

Definir los flujos de usuario conduce a una mejor experiencia de usuario, ya

que lo coloca en el centro del proceso de diseño.
User Flow y Diagrama de Flujo
Los user flows son un elemento más del diseño y preparación del proyecto de un entorno
digital, ya que nos permite identificar situaciones futuras y necesidades del usuario
dentro de nuestra web o aplicación.

La manera más común para representar los flujos de usuario es mediante diagramas
de flujo (Flow charts), en los cuales representamos, de manera separada, cada paso que
lleva a cabo el usuario.

El diagrama de flujo o flow chart es una manera de representar gráficamente un

proceso a través de una serie de pasos bien estructurados y relacionados que permiten
comprender un todo.
Task Flow
El flujo de tareas, más conocido como task flow, es un diagrama que representa el
trayecto que debe realizar un usuario para llevar a cabo una tarea concreta.
¿Qué es el Happy Path?
En el contexto del modelado de software o información, un camino feliz es
un escenario predeterminado que no presenta condiciones excepcionales
o de error.

En Design Thinking empleamos el término Happy path para describir el

escenario de uso, en el cual un usuario toma el camino más corto para la
consecución de un objetivo concreto, y en el que además todos los puntos
de contacto e interrelación entre él y el producto le satisfacen.
Figuras Geométricas
User flow
El User Flow, es un diagrama que representa el trayecto que realiza un usuario para
realizar todas las tareas posibles en mi app o web.

Inicio

Fin
Proyecto Final

Fecha de la Preentrega:
Clase 11
Tarea para el Proyecto Final
Para comenzar con el Proyecto Final que vamos a desarrollar durante todo este curso:

Vamos a realizar una Investigación de Usuario, indagando sobre sus comportamientos,

necesidades y motivaciones, realizando preguntas que nos permitan descubrir: ¿qué
hace?, ¿qué piensa?, ¿qué dice?, ¿en qué cree?, ¿que lo frustra?, ¿qué lo motiva?, ¿qué le
preocupa?...

y tenemos que determinar en primera instancia:

● ¿Quién es nuestro usuario? (en quién basamos nuestra investigación)

● ¿Cuál es el problema? (necesidad detectada)
● ¿Cuál es la solución que vamos a ofrecer? (En forma de una App).

Informe: Nota periodística que valide la problemática, captura de redes sociales donde los
usuarios exponen que esa situación es un problema para ellos, etc.
Tarea para el Proyecto Final
Siguiendo con el Proyecto Final que vamos a desarrollar durante todo este curso:

Vamos a realizar un Benchmarking, comparando 3 competidores directos de nuestra App y

tenemos que realizar un cuadro comparativo:

● Nombre y “logo” de las 3 Apps (Para poder ver el diseño de mi competencia)

● Reseña de las 3 Apps (Para poder ver el enfoque de mi competencia)
● Captura de las 3 Apps (Para poder ver el diseño de mi competencia)
● Cantidad de Pasos por Acción (De 3 acciones por cada una de las 3 App)
● Vocabulario o Errores (Óptimo, Error menor, Error mayor - que no me permite operar)
● Diseño (Óptimo, Básico, Malo)
● Fortalezas y Debilidades (De cada una de las 3 App)
Finalmente realizar un breve informe con las conclusiones que obtenemos del cuadro. (¿Quién es
mi competencia?, ¿quiénes son sus usuarios?, ¿Cómo les hablan?, ¿En qué se diferencian?, ¿Qué
puedo ofrecer en mi App que ellos no tengan?, ¿Cómo puedo superar su propuesta?).
Tarea para el Proyecto Final
Para continuar con el Proyecto Final que vamos a desarrollar durante todo este curso:

Vamos a realizar un Mapa de Empatía, que nos ayudará a responder preguntas específicas
sobre nuestros usuarios siempre teniendo en mente nuestra idea de App.

Tenemos que determinar en primera instancia:

● ¿Quién es la persona que estamos intentando comprender? (proto persona)

● ¿En qué situación se encuentra? (datos que estén relacionados con nuestra app)
● ¿Cuál es su papel en la situación?
○ (¿Por qué es él/ella y no otro/a? que lo conecta a nuestro proyecto.
¿Qué condiciones hace que sea un futuro usuario de nuestra app?).
Tarea para el Proyecto Final
Vamos a realizar las Fichas de dos (dos) Proto Personas que deben ser diferentes y contener la siguiente
información:

● Datos personales y foto.

● Datos demográficos.
● Biografía.
● Intereses
● Hábitos de consumo.
● Objetivos, sueños, metas.
● Su relación con la tecnología.
● Frustraciones y motivaciones.
● Una frase.

Tener en cuenta que todas las tareas serán entregadas juntas en la Pre entrega (que se encuentra marcada en el
cronograma del curso de la clase 0)

En el ejemplo se muestra la presentación de 2 protopersonas, de las cuales una fue validada y pasó a ser user
persona luego de las entrevistas.

Las tareas se entregan mediante una presentación de Google Slides por equipo.
Tarea para el Proyecto Final
Para continuar con el Proyecto Final que vamos a desarrollar durante todo este curso:

Vamos a realizar 5 entrevistas, esto nos permitirá recopilar datos e insights sobre los usuarios, empatizar con
ellos, validar la proto persona y transformarla en una user persona.

Para elegir a los entrevistados tendremos en cuenta:

● Que sea mayor de 18 años.

● Que entren en el grupo de usuarios que necesitamos validar (mi proto persona)
● Que la problemática de mi proyecto los atraviesa directamente (¿la solución que voy a brindar en mi app
influye en la vida de esta persona?)
● Que tenga disponibilidad para realizar la entrevista presencial o virtual (dentro de un tiempo razonable) y
permita que la misma sea grabada (sino la entrevista no será válida).

Realizar un informe: sobre los resultados de las entrevistas, los datos recopilados, los insights que consiguieron
descubrir (si es que los hay), especificar de qué forma los entrevistados validaron a la proto persona y se
transformaron en user personas de ahora en más.

Nota: Tener en cuenta que el docente puede pedir acceso a las grabaciones en cualquier momento de la cursada.
Tarea para el Proyecto Final
Para continuar con el Proyecto Final que vamos a desarrollar durante todo este curso:

Vamos a realizar un POV aplicando las técnicas de Storytelling y Storyboard, esto nos
permitirá a nosotros y a otros/as comprender y empatizar con nuestros usuarios.

Para ello realizaremos las siguientes tareas:

● POV - Completar la frase: Usuario - Necesita - Porque.

● Storytelling - Crear una narración sobre nuestro proyecto que cuente con un:
Inicio - Nudo - Desenlace, que cree una conexión emocional con nuestra User
Persona. Que sea persuasiva y tenga relación con nuestros usuarios.
● Storyboard - Representar visualmente la narración. Ilustrando los momentos clave de
la historia (6 dibujos máximo).
Recuerden que no es necesario saber dibujar “bien” sino que se entienda la idea.
Puede ser a mano o digital, si es a mano deberán pasarlo a tinta y escanearlo con
buena calidad y buena luz para que se pueda visualizar correctamente.
Tarea para el Proyecto Final
Para continuar con el Proyecto Final que vamos a desarrollar durante todo este curso:

Vamos a definir un MVP, esto nos permitirá tener en claro cuales son las funcionalidades básicas que
debe tener mi app.

Para hacerlo debemos:

● Redactar una lista de tareas (todas las que se me ocurran relacionadas a mi proyecto).
● Definir prioridades, cuáles tareas son imprescindibles para el funcionamiento de la app.
● Definir cuáles tareas son deseables para versiones más avanzadas de mi app en un futuro
(versión 2.0).
● Identificar cuál es la función básica y primordial que mi usuario realizará en mi app, y por qué
es deseable para mi usuario.

Realizar un informe sobre las conclusiones del ejercicio, cuáles tareas se desarrollaran primero y por
qué (explicar brevemente cada tarea).
Tarea para el Proyecto Final
Para continuar con el Proyecto Final que vamos a desarrollar durante todo este curso:

Vamos a realizar la Arquitectura de la información de nuestro proyecto aplicando la técnica de Card

Sorting Abierto con Optimal Workshop, obtendremos como resultado el Dendrograma y la Matriz
de similitud con las que realizaremos un informe de conclusiones.

Para ello realizaremos las siguientes tareas:

● Completar las tarjetas: 20 (tareas que surgen del MVP y Benchmarking)

● Crear una introducción detallada para los participantes, explicando la consigna que deben
cumplir con respecto a las tarjetas, realizarles preguntas de segmentación básicas (por
ejemplo: nombre, ciudad, edad) y redactar las preguntas finales para los usuarios, para
clarificar sus decisiones y ver si comprendieron el lenguaje de las tarjetas.
● Invitar a 10 participantes mínimo (que pertenezcan al grupo de la user persona) y enviarles el
link para el cardsorting, debemos recordarles que se realiza desde una PC si o si.
● Analizar e interpretar los resultados (gráficos y respuestas), y realizar un informe con las
conclusiones del estudio (aciertos, errores, correcciones realizadas, conclusiones, etc.).
Tarea para el Proyecto Final
Luego vamos crear el Mapa de sitio, en Whimsical, utilizando la información validada por los
usuarios, obtenida del informe del estudio de CardSorting y sus gráficos.

Para hacerlo debemos:

● Ir a Whimsical y seleccionar Flowchart

● Definir cuáles van a ser mis categorías y subcategorías a partir de los resultados dados por
los participantes/usuarios (como ellos ordenaron la información)
● Crear el diagrama de mi app, utilizando los recuadros y flechas, en forma vertical, partiendo
desde la HOME, siguiendo a las categorías principales y luego desde estas a las subcategorías
y dentro las tareas u opciones que se encuentren.

Tener en cuenta que como resultado debe quedar el diagrama de app lo más ordenado y coherente
posible. Vamos a tratar de respetar al máximo las preferencias del usuario y también tener en
cuenta nuestra interpretación de los resultados (por ej: si en las preguntas finales notamos que
varias tarjetas no fueron comprendidas, pudieron ser ubicadas en lugares incorrectos o al azar, y
tendremos que renombrarlas para facilitar su comprensión.)
Tarea para el Proyecto Final
Para comenzar a diseñar la interfaz del prototipo del Proyecto Final que vamos a desarrollar:

Comenzaremos realizando en whimsical el Task Flow de nuestro proyecto. Luego podremos realizar el User
Flow, empezando con la Función principal de nuestra app (happy path), después le sumaremos los posibles
errores que puedan surgir y por último las demás tareas o funcionalidades que vayan a formar parte de la
primera versión (MVP) de nuestro proyecto.

Para ello necesitaremos previamente tener hechos:

● User persona
● MVP
● POV - Storytelling + Storyboard
● Arquitectura de la información
● Analizar e interpretar las conclusiones de nuestros informes previos.

Aclaraciones: Para el User flow deben utilizar las figuras geométricas sugeridas en esta clase como código para
los diagramas, el diagrama se realiza de izquierda a derecha, arriba a abajo, tiene un comienzo y un fin, en lo
posible acomodarlo de forma que no se crucen las flechas.
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.

Todo en el Aula Virtual.

Muchas gracias por tu atención.
Nos vemos pronto
DISEÑO UX/UI
Clase 9
User Flow
Les damos la bienvenida
Vamos a comenzar a grabar la clase
 Clase 08 Clase 09 Clase 10

Arquitectura de la Información User Flow Repaso e Integración

● ¿Qué es un mapa de sitio? ● ¿Qué es un User Flow? ● Repaso de todos los

● Cardsorting ejercicios que forman parte
● Tipos de flujo de usuario
● Optimal Workshop de la Preentrega.
Whimsical
● Task Flow
● ● Proyecto Guía.
● Tarea para el Proyecto ● ¿Qué es el Happy Path? ● Espacio de consultas.
Final ● Tarea para el Proyecto
Final
 Diseño Centrado en el Usuario (DCU)

Analizar Diseñar Validar

Design Thinking

Empatizar Definir Idear Prototipar Evaluar

POV Arquitectura de Información

MVP User Flow

¿Qué significa User Flow?
Podemos definir User Flow como la ruta que sigue un usuario en un
sitio web o aplicación para completar una tarea. El flujo de usuario
comprende desde el punto de su entrada sumando el conjunto de
pasos que ejecuta hasta que completa la tarea con un resultado
exitoso.
Definir los flujos de usuario conduce a una mejor experiencia de
usuario, ya que lo coloca en el centro del proceso de diseño.
Ejemplo de User Flow
User Flow
Es importante diseñar teniendo en cuenta los flujos de usuario y por lo tanto centrarnos
en lo que el usuario necesita hacer y cómo integrarlo de la manera más eficiente y efectiva
posible.

Existen una serie de preguntas que nos ayudarán a definir el flujo de usuario:

● ¿Qué está tratando de lograr el usuario?

● ¿Qué es importante para el usuario y qué le dará confianza para continuar?
● ¿Qué información adicional necesitará el usuario para realizar la tarea?
● ¿Cuáles son sus dudas, frustraciones o barreras para realizar la tarea?
User Flow y Diagrama de Flujo
Los user flows son un elemento más del diseño y preparación del proyecto de un entorno
digital, ya que nos permite identificar situaciones futuras y necesidades del usuario
dentro de nuestra web o aplicación.

La manera más común para representar los flujos de usuario es mediante diagramas
de flujo (Flow charts), en los cuales representamos, de manera separada, cada paso que
lleva a cabo el usuario.

El diagrama de flujo o flow chart es una manera de representar gráficamente un

proceso a través de una serie de pasos bien estructurados y relacionados que permiten
comprender un todo.
Diagrama de Flujo
Diagrama de Flujo
Los diagramas de flujo se realizan de izquierda a derecha y de arriba a abajo. Es
importante en su realización evitar el cruce de líneas para facilitar la comprensión global
del proceso.

Para el user flow suelen utilizarse una serie de figuras geométricas que representan cada
paso del proceso. Estás formas ya están definidas y se conectan entre sí a través de flechas
y líneas que marcan la dirección del flujo y determinan el recorrido.
Figuras Geométricas
Flechas - Dirección de flujo
¿Cuándo creamos los user flow?
Lo ideal es crear los flujos de usuarios lo más pronto posible, justo después de definir la
arquitectura de la información y preferiblemente antes de comenzar con el diseño y
desarrollo de la interfaz. Si diseñamos la interfaz visual sin determinar los elementos con
los que interactúa un usuario al navegar podría generarnos muchos problemas y futuras
revisiones.
¿Cómo creamos un User flow?
● Definir la tarea que llevará a cabo el usuario.

● Listar los pasos a hacer por el usuario para completar un objetivo o tarea
determinada (Task flow).

● Agregar los posibles errores y cómo recuperarse de ellos.

Siempre simplifica la cantidad de pasos para completar una tarea.

 Task Flow
El flujo de tareas, más conocido como task flow, es un diagrama que representa el
trayecto que debe realizar un usuario para llevar a cabo una tarea concreta.

Entrada donde comienza la tarea - Acción (Seleccionar Elegir Tocar) - Acción (Seleccionar Elegir Tocar) - Acción donde finaliza la
tarea . con éxito.
 User flow
El User Flow, es un diagrama que representa el trayecto que realiza un usuario para
realizar todas las tareas posibles en mi app o web.

Inicio

Fin
Whimsical
Es una herramienta online gratuita súper intuitiva y simple de usar, utilizaremos el “Flowchart” para diagramar:
Usar lo aprendido hasta el momento
Con las conclusiones obtenidas del MVP, POV, Storyboard y la arquitectura de la
información, podremos realizar un Task flow rápidamente basado en la problemática y
necesidad de mi user persona, permitiéndole realizar la tarea, con éxito, para la cual
descargo la app de la forma más simple posible.
¿Qué es el Happy Path?
En el contexto del modelado de software o información, un camino feliz es
un escenario predeterminado que no presenta condiciones excepcionales
o de error.

En Design Thinking empleamos el término Happy path para describir el

escenario de uso, en el cual un usuario toma el camino más corto para la
consecución de un objetivo concreto, y en el que además todos los puntos
de contacto e interrelación entre él y el producto le satisfacen.
Happy Path
Cuando empezamos a imaginar un producto, lo hacemos pensando en el camino óptimo para el usuario. Y
en cuán satisfactoria será su experiencia al finalizar su recorrido por este Happy Path. El siguiente Task Flow
muestra el proceso de compra de una barra de pan a través de un Happy Path.

Sin embargo, todos sabemos que los errores ocurren constantemente. Y que, para llegar a Roma el usuario puede
usar más de un camino. Si quieres evitar que tus clientes se vayan a casa sumergidos en un mar de lágrimas, o a otra
panadería, debes tener en cuenta la mayoría de caminos probables y prevenir cuantos más errores o
distracciones mejor.
Para empezar, y antes de ponerte a diseñar pantallas, piensa. De lo que se trata es de no dejar al usuario en un
callejón sin salida cuando esté utilizando tu aplicación. Dibuja el diagrama de flujo de cada Happy path de tu
aplicación, que resuelva un objetivo concreto (pedir cita médica, cancelar una cita, cambiar la contraseña…)
 Ejercicio
Clase 9
Realizar el Task Flow con
Whimsical
Tarea para el Proyecto
Para comenzar a diseñar la interfaz del prototipo del Proyecto Final que vamos a desarrollar:
Comenzaremos realizando en whimsical el Task Flow de nuestro proyecto. Luego podremos
realizar el User Flow, empezando con la Función principal de nuestra app (happy path),
después le sumaremos los posibles errores que puedan surgir y por último las demás tareas o
funcionalidades que vayan a formar parte de la primera versión (MVP) de nuestro proyecto.
Para ello necesitaremos previamente tener hechos:
● User persona
● MVP
● POV - Storytelling + Storyboard
● Arquitectura de la información
● Analizar e interpretar las conclusiones de nuestros informes previos.
Aclaraciones: Deben utilizar las figuras geométricas sugeridas en esta clase como código para
los diagramas, el diagrama se realiza de izquierda a derecha, arriba a abajo, tiene un comienzo y
un fin, en lo posible acomodarlo de forma que no se crucen las flechas.
Ejemplo de entrega:
POV
Pilar es una estudiante avanzada
que vive en Buenos Aires. Ya ha
hecho terapia antes.
Ella necesita encontrar a un
psicólogo que se adecue mejor a
sus necesidades y la ayude a
superar esta etapa de su vida,
porque quiere sentirse mejor y más
realizada.
STORYBOARD
Nos ayuda a predecir y
explorar visualmente la
experiencia de un usuario
con un producto.

Facilita la tarea de
comprender cómo las
personas podrían
interactuar con la app.
 MVP
IMPRESCINDIBLES DESEABLES
(versión lanzamiento) (más adelante)

Mi cuenta Mi cuenta
● Datos personales: nombre y apellido, dni, ● Gestionar mis turnos.
email, ciudad, género, fecha de ● Configurar preferencias que permitan búsquedas y
nacimiento, motivo de consulta. sugerencias más efectivas.
● Sugerencias. ● Mis valoraciones y reseñas realizadas sobre el profesional.
Buscar psicólogo ● Dar de baja (cuenta).
● Medios de pago.
● Filtrar por problemática del paciente
(ejemplo: adicción, trastorno alimenticio, Conectar usuarios
fobias, duelo, depresión, ansiedad, etc.), ● Chat entre paciente y profesional.
tipo de terapia (psicoanálisis, TCC, Buscar psicólogo
sistémica, etc.), costo, disponibilidad
● Mejorar el filtro (valoraciones).
horaria del profesional, zona geográfica.
● Gestionar todos los turnos con el profesional.
● Agendar un primer turno con el
● Testimonios sobre la app.
profesional.
Historia clínica
● Gestionar la historia clínica del paciente para que el
psicólogo que derive pueda registrar información del
paciente.
 ARQUITECTURA
DE LA INFORMACIÓN
04 Se organiza la información de la forma más clara
posible para que la app tenga una buena usabilidad.
Realizamos un Card Sorting, técnica que se basa en
observar cómo los usuarios agrupan y asocian entre sí
una serie de tarjetas.
Cards utilizadas 1.
2.
Agenda
Blog
3. Chat con el terapeauta
4. ¿Cómo funciona?
5. Datos personales
6. Disponibilidad horaria
7. Edad del terapeuta
8. Género del terapeuta
9. Historia clínica
10. Medios de pago
11. Mis turnos
12. Preferencias
13. Problemática
14. Reseña del terapeuta
15. Sobre nosotros
16. Testimonios
17. Tipo de terapia
18. Valor de la sesión
19. Valoraciones
20. Zona de atención
MATRIZ DE SIMILITUD
Utilizando la Matriz de Similitud basada
en los resultados del Card Sorting Abierto
podemos ver que las personas que
completaron el estudio agrupan las
siguientes palabras/conceptos:
● Datos personales - Historia Clínica
● Género del terapeuta - Tipo de
terapia - Disponibilidad Horaria -
Zona de atención - Valor de la
sesión - Reseña del terapeuta
● Valoraciones - Testimonios
● Sobre nosotros - Cómo funciona?
● Mis turnos - Historia Clínica
 DENDROGRAMA
A partir del estudio de Card Sorting Abierto, 10 de 17 personas completaron el estudio, el
80% de Argentina, con un tiempo promedio de 7 minutos, y la mayoría generando 4
categorías.
Conclusión
Visualizando el Dendrograma (Best Merge Method) y analizando su
información se concluye lo siguiente:

1 Comprensión
No se comprendió correctamente la
etiqueta “Medios de pago” ya que

2
apuntaba a ser la sección donde la
persona realice el pago de sus sesiones. Categorización
El “Chat” fue separado y convertido en
3 Agrupación una categoría aparte por la mayoría de
las personas que completó el estudio.
La mayoría de las personas agrupó los
distintos filtros de búsqueda en una
categoría llamada “Buscador” o similar.
Se colocaron los datos personales dentro
de “Mi perfil” o similar.
Estructura de la App
Con toda la información obtenida realicé el
siguiente diagrama para la App utilizando
las 4 secciones principales:
● BUSCADOR
● SOBRE NOSOTROS
● MI PERFIL
● CHAT
 DIAGRAMAS DE FLUJO
05 Mediante los diagramas, comenzamos a pensar el trayecto
que recorren los usuarios para realizar todas las tareas
posibles que permitirá el sistema.
TASK FLOW
Pilar entra a la app para buscar un terapeuta.
 USER FLOW

Link: Ejemplo de User Flow

 Conclusión
● Se construyó el Task Flow (diagrama de tareas) en base
al POV, MVP, Arquitectura de la Información y el
Storyboard para clarificar cuáles serán las tareas que el
usuario deberá realizar.
● Se realizó el Task Flow del user persona para solucionar
la problemática seleccionada. A partir de este flujo se
generó el User Flow.
● Se armó el User Flow y se definió la funcionalidad
principal (Happy Path) para diagramar la búsqueda de
psicólogo, luego se sumaron posibles problemas
(errores de validación). Finalmente, se completaron el
resto de las funcionalidades (reservar primera sesión).
● El User Flow proporcionó una visión general de cómo
será la interfaz de la App.
 06
CONCLUSIÓN
GENERAL
Toda nuestro proyecto en pocas palabras
 CONCLUSIÓN GENERAL
La idea principal fue crear una app para la búsqueda de psicólogo, para solucionar el problema de
dificultad y tiempo que conlleva normalmente dicha búsqueda.
Investigamos qué otras aplicaciones similares había en el mercado y las comparamos mediante
un benchmarking que nos definió cada una de sus fortalezas y debilidades.
Se creó el perfil de Pilar para darle voz y vida a todos nuestros futuros usuarios que sufren esta
problemática, validando con 5 entrevistas su perfil, necesidades, frustraciones, pensamientos y
sentimientos. Con Pilar en mente creamos el Point of view y le dimos forma con un Storyboard.
Realizamos un Card Sorting Abierto donde 10 participantes nos ayudaron a definir las categorías y
grupos de nuestra futura App, y basándonos en sus resultados creamos el Task Flow y el User
Flow para ver cómo sería paso a paso la usabilidad de nuestra aplicación.
Al finalizar esta toda esta etapa de análisis tenemos en claro quién es nuestro usuario, cuál es su
problema y qué funciones debe tener nuestra App para solucionarlo, cómo debe estar organizada
para que sea comprensible y fácil para el user persona (Pilar) y como podría ser en su versión 2.0.
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.

Todo en el Aula Virtual.

Muchas gracias por tu atención.
Nos vemos pronto
 User Flow

¿Qué significa User Flow?

Podemos definir User Flow como la ruta que sigue un usuario en un sitio web o aplicación para
completar una tarea. El flujo de usuario comprende desde el punto de su entrada sumando el
conjunto de pasos que ejecuta hasta que completa la tarea con un resultado exitoso.
Definir los flujos de usuario conduce a una mejor experiencia de usuario, ya que lo coloca en el
centro del proceso de diseño.

Ejemplos de User flows:

User
Flow
Es

importante diseñar teniendo en cuenta los flujos de usuario y por lo tanto centrarnos en lo que el
usuario necesita hacer y cómo integrarlo de la manera más eficiente y efectiva posible.
Existen una serie de preguntas que nos ayudarán a definir el flujo de usuario:
● ¿Qué está tratando de lograr el usuario?
● ¿Qué es importante para el usuario y qué le dará confianza para continuar?
 ● ¿Qué información adicional necesitará el usuario para realizar la tarea?
● ¿Cuáles son sus dudas, frustraciones o barreras para realizar la tarea?

User Flow y Diagrama de flujo

Los user flows son un elemento más del diseño y preparación del proyecto de un entorno digital, ya
que nos permite identificar situaciones futuras y necesidades del usuario dentro de nuestra web o
aplicación.
La manera más común para representar los flujos de usuario es mediante diagramas de flujo (Flow
charts), en los cuales representamos, de manera separada, cada paso que lleva a cabo el usuario.

El diagrama de flujo o flow chart es una manera de representar gráficamente un proceso a través de
una serie de pasos bien estructurados y relacionados que permiten comprender un todo.

Diagrama de flujo

Los diagramas de flujo se realizan de izquierda a

derecha y de arriba a abajo. Es importante en su
realización evitar el cruce de líneas para facilitar la
comprensión global del proceso.
Para el user flow suelen utilizarse una serie de
figuras geométricas que representan cada paso
del proceso. Estás formas ya están definidas y se
conectan entre sí a través de flechas y líneas que
marcan la dirección del flujo y determinan el
recorrido.

Figuras geométricas
Flechas - Dirección del flujo

¿Cuándo creamos los user flow?

Lo ideal es crear los flujos de usuarios lo más pronto posible, justo después de definir la arquitectura de
la información y preferiblemente antes de comenzar con el diseño y desarrollo de la interfaz. Si
diseñamos la interfaz visual sin determinar los elementos con los que interactúa un usuario al navegar
podría generarnos muchos problemas y futuras revisiones.

Task Flow
El flujo de tareas,
más conocido como
task flow, es un diagrama que representa el trayecto que debe realizar un usuario para llevar a cabo una
tarea concreta.
Entrada donde comienza la tarea - Acción (Seleccionar Elegir Tocar) - Acción (Seleccionar Elegir
Tocar) - Acción donde finaliza la tarea con éxito.

User Flow
El User Flow, es un diagrama que representa el trayecto que realiza un usuario para realizar todas las
tareas posibles en mi app o web.

El User flow combina el Flow chart con el Task flow.

Whimsical
Es una herramienta online gratuita súper intuitiva y simple de usar, utilizaremos el
“Flowchart” para diagramar:
Usar lo aprendido hasta el momento
Con las conclusiones obtenidas del MVP, POV, Storyboard y la arquitectura de la información,
podremos realizar un Task flow rápidamente basado en la problemática y necesidad de mi user
persona, permitiéndole realizar la tarea, con éxito, para la cual descargo la app de la forma más
simple posible.

Ejercicio Clase 9
Realizar el Task Flow con Whimsical

¿Qué es el Happy Path?

En el contexto del modelado de software o información, un camino feliz es un escenario
predeterminado que no presenta condiciones excepcionales o de error.
En Design Thinking empleamos el término Happy Path para describir el escenario de uso, en el cual
un usuario toma el camino más corto para la consecución de un objetivo concreto, y en el que además
todos los puntos de contacto e interrelación entre él y el producto le satisfacen.
Happy path
Cuando empezamos a imaginar un producto, lo hacemos pensando en el camino óptimo para el
usuario. Y en cuán satisfactoria será su experiencia al finalizar su recorrido por este Happy path. El
siguiente Task Flow muestra el proceso de compra de una barra de pan a través de un Happy Path.
Cuando empezamos a imaginar un producto, lo hacemos pensando en el camino óptimo para el
usuario. Y en cuán satisfactoria será su experiencia al finalizar su recorrido por este Happy path. El
siguiente Task Flow muestra el proceso de compra de una barra de pan a través de un Happy Path.

Sin

embargo, todos sabemos que los errores ocurren constantemente. Y que, para llegar a Roma el usuario
puede haber más de un camino. Si quieres evitar que tus clientes se vayan a casa sumergidos en un mar
de lágrimas, o a otra panadería, debes tener en cuenta la mayoría de caminos probables y prevenir
cuantos más errores o distracciones mejor.
Para empezar, y antes de ponerte a diseñar pantallas, piensa. De lo que se trata es de no dejar al usuario
en un callejón sin salida cuando esté utilizando tu aplicación. Dibuja el diagrama de flujo de cada
Happy path de tu aplicación, que resuelva un objetivo concreto (pedir cita médica, cancelar una cita,
cambiar la contraseña…).

Pero… ¿y si escoge otro camino? ¿Y si se equivoca? ¿Qué opciones le ofrezco? Sobre los pasos de
los diagramas anteriores, empieza a repetirte esta pregunta una y otra vez: ¿y si…? ¿y si…? ¿y si…?
Verás que te irán apareciendo nuevos pasos y que éstos a su vez generan otros más. Por ejemplo: ¿Y
si se pulsa este botón y no está escrita la contraseña? Refleja cada opción, cada variante, y cuando
acabes, verás que algo tan sencillo como ir a comprar el pan, se puede llegar a convertir en algo así:
Proyecto Final
TAREA PARA EL PROYECTO FINAL

Para comenzar a diseñar la interfaz del prototipo del Proyecto Final que vamos a desarrollar:
Comenzaremos realizando en whimsical el Task Flow de nuestro proyecto. Luego podremos realizar el
User Flow, empezando con la Función principal de nuestra app (happy path), después le sumaremos
los posibles errores que puedan surgir y por último las demás tareas o funcionalidades que vayan a
formar parte de la primera versión (MVP) de nuestro proyecto.
Para ello necesitaremos previamente tener hechos:
● User persona
● MVP
● POV - Storytelling + Storyboard
● Arquitectura de la información
● Analizar e interpretar las conclusiones de nuestros informes previos.
Aclaraciones: Deben utilizar las figuras geométricas sugeridas en esta clase como código para los
diagramas, el diagrama se realiza de derecha a izquierda, arriba a abajo, tiene un comienzo y un fin,
en lo posible acomodarlo de forma que no se crucen las flechas.
 DISEÑO UX/UI
Clase 11
Preentrega del Proyecto Final
Les damos la bienvenida
Vamos a comenzar a grabar la clase
Preentrega del Proyecto Final Obligatorio

La pre entrega de este curso se realiza mediante el link al “Formulario

de Pre Entrega”.

1 solo representante del equipo debe completar en el formulario:

● Nombre del equipo

● Nombre completo de los integrantes del equipo
● Link al Proyecto en formato Google Slides
● Responder si o no en el listado de tareas
¡Felicitaciones!
Ya completaron la primera
parte del curso: Diseño UX/UI
Les compartimos algunas
frases sobre motivación y
trabajo en equipo:
Ejercicio Práctico
Clase 11
Exposición de los proyectos
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.

Todo en el Aula Virtual.

Muchas gracias por tu atención.
Nos vemos pronto
DISEÑO UX/UI
Clase 12
Prototipo y Wireframes
Les damos la bienvenida
Vamos a comenzar a grabar la clase
 Clase 11 Clase 12 Clase 13

Preentrega del Proyecto Final Prototipos y Wireframes Patrones de Diseño

● ¿Qué es un prototipo? ● ¿Qué son los patrones de

● Wireframes en diseño?
● UX Writing
baja/media/alta
● Material Design / Human
● Bocetos a mano Interface
● Wireframe digital ● Patrones de navegación
● Figma ● Patrones de interacción
● Tarea para el Proyecto ● Tarea para el Proyecto
Final Final
 Diseño Centrado en el Usuario (DCU)

Analizar Diseñar Validar

Lo-Fi Visual

Design Thinking

Empatizar Definir Idear Prototipar Evaluar

Wireframe a mano

Wireframe Digital
Luego de realizar la investigación previa, de haber
interpretado cada uno de los datos que fuimos consiguiendo,
vamos a comenzar a prototipar, plasmando todo ese
recorrido en las estructuras y cada elemento de la interfaz de
nuestro producto digital.
¿Qué significa Prototipo?
● Un prototipo es una representación de un producto o servicio basada
en una virtud o cualidad de este.
● Un prototipo es una representación material de ideas y soluciones, y
tiene relación con la experiencia.
● Un prototipo también es un objeto diseñado para una demostración
de cualquier tipo de producto, servicio, software, app, etc.
Ayudan a plasmar visualmente los objetivos de negocio y cómo se alinean
con las expectativas y necesidades de los usuarios y si son satisfechas a
través del producto digital diseñado.
Prototipado
El prototipado por definición es una técnica que permite realizar y materializar diversas
ideas de soluciones propuestas en un proyecto de diseño o rediseño de productos y
servicios.

En procesos colaborativos de diseño de nuevos productos y servicios, y de mejora continua,

un prototipo es esencial para validar ideas. En procesos de mejora continua, hacer un
prototipo permite testear oportunamente ideas antes de desplegarlas a gran escala y
descubrir oportunidades de mejora en etapas previas al diseño definitivo de un producto o
servicio.
¿Para qué hacemos prototipos?
● Dar forma y materializar una idea de solución.
● Generar un entendimiento común de posibles soluciones.
● Explorar la experiencia de los usuarios y obtener retroalimentación.
● Previsualizar el resultado de una idea.
● Fallar en forma temprana y a bajo costo.
● Identificar oportunidades para mejorar un diseño.
● Obtener lineamientos formales para el diseño final.
● Ahorrar dinero: en vez de desarrollar algo que no responde a las necesidades de la
audiencia objetivo, o peor, que nadie quiere, un prototipo permite validar en etapa
temprana.
Fidelidad: Baja - Media - Alta
● Prototipo de baja resolución o fidelidad: Cuando nos referimos a prototipos rápidos
o Lean UX, por lo general estamos hablando de prototipos de baja fidelidad que están
enfocados en el refinamiento de la interacción y no en perfeccionar los detalles de
implementación de la idea. Un prototipo de baja fidelidad permite iterar más rápido.
● Prototipo de media fidelidad: Este prototipo ya representa el producto final, y nos
permite realizar pruebas de usabilidad, aunque faltan todavía incluir las interacciones
y animaciones que se realizarán en la fase siguiente. En esta instancia ya tenemos un
prototipo funcional.
● Prototipo de alta fidelidad: Se trata de la parte visual del proyecto y debe contener
amplitud de detalles como los colores, tipografía, contenido, etc. Este tipo de
prototipo se puede utilizar en etapas más avanzadas de diseño y pruebas de
usabilidad para validar aspectos y detalles del producto final. Permite comprender el
producto final con una mayor precisión, lo que provoca una reducción de tiempo en
estimaciones y desarrollo.
¿Cómo debe ser tu prototipo?
● Que hable por sí solo. Un buen prototipo permite aprender más que una presentación
bonita llena de texto.
● Funcionalidades básicas. El prototipo debe tener lo mínimo para testear la propuesta de
valor, sin muchos adornos o funcionalidades que se alejen de lo principal que quieras
testear.
● Beneficios máximos. Que el prototipo transmita la esencia de la propuesta de valor.
Rápido. Privilegia los prototipos fáciles de construir por sobre los complejos. Si algo es
muy complejo, es porque seguramente estás agregando muchas funcionalidades.
● Barato. Tus primeros prototipos deben tener costo cero o ser muy baratos. En la medida
en que avanzas en el proceso de testeo de la propuesta de valor, los beneficios y las
funcionalidades, el segundo o tercer prototipo podrá ser más acabado.
● Desechable. Lo interesante del prototipado es que aprendas mucho y puedas desechar
cualquier solución que no validaste. Piensa en el prototipo como algo suficientemente
barato y simple de hacer, que te permite aprender rápido.
Errores típicos en la etapa de prototipado
● Gastar demasiado tiempo dinero o recursos humanos en la construcción de un
prototipo.

● Pensar que una app lo arregla todo. Abarcar demasiadas funcionalidades.

● Enamorarse del prototipo. La idea principal de realizar un prototipo es cometer

errores en esta etapa, corregirlos, aprender de ellos, iterar, mejorar. La primera versión
no va a ser parecida a la final.
Tips para hacer un prototipo
● No te enamores de tus ideas. Refinar tus ideas demasiado temprano te impide crear y explorar
alternativas. No te enamores demasiado rápido.
● Empieza con prototipos de baja fidelidad. Es preferible gastar cero o lo menos posible en tus
primeros prototipos. Es difícil dejar de lado un prototipo complejo y es más probable que te
enamores de él.
● Acepta la incertidumbre. No esperes que todo esté claro y definido para empezar a prototipar y
testear tus ideas. Es normal que te falte información o que no controles todos los factores acerca de
la ejecución. Aprovecha este proceso para aprender en el camino.
● No tengas miedo de que roben tus ideas. Una idea sin implementación no vale nada. Todas las
personas tienen ideas, por lo que no tengas miedo de compartir con otros y recibir comentarios. El
desafío está en llevar tus ideas a cabo.
● Usa técnicas creativas. Explora prototipos innovadores utilizando técnicas diferentes del resto de tu
industria.
● Registra los aprendizajes. Lo más interesante en la etapa de prototipado no es la complejidad del
prototipo, sino todo lo aprendido en el proceso. Registra los hallazgos y aprendizajes ya que te serán
útiles en las próximas etapas.
● Sé abierto a comentarios y retroalimentación. No te lo tomes como algo personal. No existen
buenas o malas ideas. Si recibes comentarios negativos acerca de tu prototipo, no significa que la
idea sea mala. La retroalimentación vale oro para mejorar tu prototipo y llevar mejor a cabo una idea.
¿Qué es un Wireframe?
Un wireframe, también conocido como un esquema de página o plano de
pantalla, es una guía visual que representa la estructura esquelética de un
sitio web o aplicación.

Los wireframes se crean con el propósito de organizar los elementos para

que estos lleven a cabo, lo mejor posible, su propósito particular.

Con los wireframes nos centraremos en el diseño del contenido.

Normalmente se hacen en escala de grises o en blanco y negro.

Wireframe (Baja)
Es la representación de baja fidelidad (lo-fi) de un diseño.

Su objetivo es comunicar la estructura de la solución de diseño que estamos pensando:

¿Dónde estarán los menús? ¿El logo? ¿Qué jerarquía tendrán los distintos grupos de
contenido? ¿Los Call To Action principales? (elemento que invita al usuario a realizar una
determinada acción por ej: Botón)

Van a ser en escala de grises porque su análisis se centra en lo estructural y no en el

contenido, es decir que el contenido de texto e imágenes aún no estará definido. Lo
elemental es que se tenga una idea del espacio y jerarquía que ocuparían.

No se recomienda invertir demasiado tiempo en ellos: cuanto más rápido lo hacemos, más
rápido nos ponemos de acuerdo sobre qué construir realmente. No deben ponerle detalles,
ya que estaremos gastando tiempo de más en una instancia que aún tiene muchos
cambios por experimentar.
Tema: Wireframes

El diseño digital es como una pintura al óleo, excepto que la

pintura nunca se seca

Autor/as/es: Neville Brody.

Wireframes a mano o en papel Boceto sencillo y esquemático
de la estructura y elementos de
la interfaz de la app
 Ejercicio
Clase 12
Realizar el wireframe de la Home
en papel y a mano.
Dibujar 3 opciones de Home.
Ejemplos de Home
Wireframe Digital
Al ser digital nos permite agregar un poco más de detalles y prolijidad que
en el wireframe a mano, pero sigue siendo un boceto de los elementos que
forman la interfaz.

“Es un espacio en donde se articula la interacción entre cuerpo humano,

herramienta, y el objeto de acción” Gui Bonsiepe - Del objeto a la interface.

Utilizaremos la herramienta “Figma” que sirve, entre muchas otras

funciones, para crear prototipos y wireframes digitales.
Wireframes a digitales
Vamos a pasar a digital los bocetos
que hicimos en papel, usando los
elementos dados por el/la docente
en Figma.
Tipos de app
● App Nativa: que se descargan e instalan desde el “store”, se diseñan para Android o
IOS basándonos en las guías o guidelines de cada una, no requieren internet para
funcionar, permiten utilizar el 100% de rendimiento del dispositivo.

● Web App: no necesitan instalarse, pueden verse desde el navegador, ni se actualizan,

requieren conexión a internet para funcionar, no permiten usar el hardware del
teléfono.

● App Híbrida: es una combinación entre las anteriores. Se desarrolla primero la web y
luego se crea una app nativa. mismo código multiplataforma.
Tarea para el Proyecto Final
Para comenzar a diseñar la interfaz del prototipo del Proyecto Final que vamos a desarrollar:

Comenzaremos realizando el boceto del Wireframe a mano de nuestro “Happy Path”, es decir el
camino feliz que recorre el usuario para solucionar su problema en nuestra app.
Empieza por Registrarse en la app, llega a la Home, y luego las siguientes pantallas para completar
el happy path. Luego de tener todos los bocetos de las pantallas a mano y usándolos de referencia
haremos los Wireframes Digitales en Figma utilizando los elementos provistos para facilitar la tarea.

Para tener claro que pantallas voy a diseñar necesitaremos previamente tener hechos:

● Task Flow
● User Flow
● Mapa de Sitio
● MVP + POV + Storyboard

Aclaración: Los wireframes digitales van a estar en Fidelidad Baja, es decir, en escala de grises, con
los elementos dados, sin el contenido de texto específico, ni imágenes aplicadas.
Ejemplos de entrega
Home - Buscador de Psicólogo
WIREFRAME A MANO WIREFRAME DIGITAL
Happy Path - Wireframes en baja
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.

Todo en el Aula Virtual.

Muchas gracias por tu atención.
Nos vemos pronto
 Prototipo: Wireframe a mano y digital

Luego de realizar la investigación previa, de haber interpretado cada uno de los datos que fuimos
consiguiendo, vamos a comenzar a prototipar, plasmando todo ese recorrido en las estructuras y cada
elemento de la interfaz de nuestro producto digital.

¿Qué significa Prototipo?

● Un prototipo es una representación de un producto o servicio basada en una virtud o cualidad
de este.
● Un prototipo es una representación material de ideas y soluciones, y tiene relación con la
experiencia.
● Un prototipo también es un objeto diseñado para una demostración de cualquier tipo de
producto, servicio, software, app, etc.

Ayudan a plasmar visualmente los objetivos de negocio y cómo se alinean con las expectativas y
necesidades de los usuarios y si son satisfechas a través del producto digital diseñado.

Prototipado

El prototipado por definición es una técnica que permite realizar y materializar diversas ideas de
soluciones propuestas en un proyecto de diseño o rediseño de productos y servicios.
En procesos colaborativos de diseño de nuevos productos y servicios, y de mejora continua, un
prototipo es esencial para validar ideas. En procesos de mejora continua, hacer un prototipo permite
testear oportunamente ideas antes de desplegarlas a gran escala y descubrir oportunidades de mejora en
etapas previas al diseño definitivo de un producto o servicio.
¿Para qué hacemos prototipos?
● Dar forma y materializar una idea de solución.
● Generar un entendimiento común de posibles soluciones.
● Explorar la experiencia de los usuarios y obtener retroalimentación.
● Previsualizar el resultado de una idea.
● Fallar en forma temprana y a bajo costo.
● Identificar oportunidades para mejorar un diseño.
● Obtener lineamientos formales para el diseño final.
● Ahorrar dinero: en vez de desarrollar algo que no responde a las necesidades de la audiencia
objetivo, o peor, que nadie quiere, un prototipo permite validar en etapa temprana.

Fidelidad: Baja - Media - Alta

● Prototipo de baja resolución o fidelidad: Cuando nos referimos a prototipos rápidos o Lean
UX, por lo general estamos hablando de prototipos de baja fidelidad que están enfocados en el
refinamiento de la interacción y no en perfeccionar los detalles de implementación de la idea.
Un prototipo de baja fidelidad permite iterar más rápido.
● Prototipo de media fidelidad: Se trata de la parte visual del proyecto y debe contener amplitud
de detalles como los colores, tipografía, contenido, etc. Es el prototipo que mejor representa el
producto final, aún así, faltaría incluir las interacciones que se realizarán en la fase siguiente.
● Prototipo de alta fidelidad: Este tipo de prototipo se puede utilizar en etapas más avanzadas de
diseño para validar aspectos y detalles del producto final. Un prototipo de mayor fidelidad
puede ayudar a equipos de ingeniería a comprender el producto final con una mayor precisión,
lo que provoca una reducción de tiempo en estimaciones y desarrollo.

¿Cómo debe ser tu prototipo?

● Que hable por sí solo. Un buen prototipo permite aprender más que una
presentación bonita llena de texto.
● Funcionalidades básicas. El prototipo debe tener lo mínimo para testear la propuesta de valor,
sin muchos adornos o funcionalidades que se alejen de lo principal que quieras testear.
 ● Beneficios máximos. Que el prototipo transmita la esencia de la propuesta de valor. Rápido.
Privilegia los prototipos fáciles de construir por sobre los complejos. Si algo es muy complejo,
es porque seguramente estás agregando muchas funcionalidades.
● Barato. Tus primeros prototipos deben tener costo cero o ser muy baratos. En la medida en
que avanzas en el proceso de testeo de la propuesta de valor, los beneficios y las
funcionalidades, el segundo o tercer prototipo podrá ser más acabado.
● Desechable. Lo interesante del prototipado es que aprendas mucho y puedas desechar
cualquier solución que no validaste. Piensa en el prototipo como algo suficientemente
barato y simple de hacer, que te permite aprender rápido.

Errores típicos
● Gastar demasiado: tiempo, dinero o recursos humanos en la construcción de un prototipo.
● Pensar que una app lo arregla todo. Abarcar demasiadas funcionalidades.
● Enamorarse del prototipo. La idea principal de realizar un prototipo es cometer errores en
esta etapa, corregirlos, aprender de ellos, iterar, mejorar. La primera versión no va a ser
parecida a la final.

Tips para hacer un prototipo

● No te enamores de tus ideas. Refinar tus ideas demasiado temprano te impide crear y explorar
alternativas. No te enamores demasiado rápido.
● Empieza con prototipos de baja fidelidad. Es preferible gastar cero o lo menos posible en tus
primeros prototipos. Es difícil dejar de lado un prototipo complejo y es más probable que te
enamores de él.
● Acepta la incertidumbre. No esperes que todo esté claro y definido para empezar a prototipar y
testear tus ideas. Es normal que te falte información o que no controles todos los factores
acerca de la ejecución. Aprovecha este proceso para aprender en el camino.
● No tengas miedo de que roben tus ideas. Una idea sin implementación no vale nada. Todas las
personas tienen ideas, por lo que no tengas miedo de compartir con otros y recibir comentarios.
El desafío está en llevar tus ideas a cabo.
● Usa técnicas creativas. Explora prototipos innovadores utilizando técnicas diferentes del resto
de tu industria.
 ● Registra los aprendizajes. Lo más interesante en la etapa de prototipado no es la
complejidad del prototipo, sino todo lo aprendido en el proceso. Registra los hallazgos y
aprendizajes ya que te serán útiles en las próximas etapas.
● Sé abierto a comentarios y retroalimentación. No te lo tomes como algo personal. No existen
buenas o malas ideas. Si recibes comentarios negativos acerca de tu prototipo, no significa que
la idea sea mala. La retroalimentación vale oro para mejorar tu prototipo y llevar mejor a cabo
una idea.

¿Qué es un Wireframe?

● Un wireframe, también conocido como un esquema de página o plano de pantalla, es una

guía visual que representa la estructura esquelética de un sitio web o aplicación.
● Los wireframes se crean con el propósito de organizar los elementos para que estos lleven a
cabo, lo mejor posible, su propósito particular.

Con los wireframes nos centraremos en el diseño del contenido. Normalmente se hacen
en escala de grises o en blanco y negro.

Wireframe (Baja)
Es la representación de baja fidelidad (lo-fi) de un diseño.

Su objetivo es comunicar la estructura de la solución de diseño que estamos pensando:

¿Dónde estarán los menús? ¿El logo? ¿Qué jerarquía tendrán los distintos grupos de contenido? ¿Los
Call To Action principales? (elemento que invita al usuario a realizar una determinada acción por ej:
Botón)
Van a ser en escala de grises porque su análisis se centra en lo estructural y no en el contenido, es
decir que el contenido de texto e imágenes aún no estará definido. Lo elemental es que se tenga
una idea del espacio y jerarquía que ocuparían.
No se recomienda invertir demasiado tiempo en ellos: cuanto más rápido lo hacemos, más rápido nos
ponemos de acuerdo sobre qué construir realmente. No deben ponerle detalles, ya que estaremos
gastando tiempo de más en una instancia que aún tiene muchos cambios por experimentar.

"El diseño digital es como una pintura al óleo, excepto que la pintura nunca se seca". Neville
Brody.

Boceto sencillo y
esquemático de la estructura
y elementos de la interfaz de la
app
Ejercicio Clase 11
Realizar el wireframe de la home en papel o a mano. Dibujar 3 opciones de Home.

Wireframe Digital

Al ser digital nos permite agregar un poco más de detalles y prolijidad que en el wireframe a mano, pero
sigue siendo un boceto de los elementos que forman la interfaz.
“Es un espacio en donde se articula la interacción entre cuerpo humano, herramienta, y el objeto de
acción” Gui Bonsiepe - Del objeto a la interface.
Utilizaremos la herramienta “Figma” que sirve, entre muchas otras funciones, para crear
prototipos y wireframes digitales.
Wireframes digitales:

Vamos a pasar a
digital los bocetos
que hicimos en papel,
usando los elementos
dados por el/la
docente en Figma.

Tipos de app
● App Nativa: que se descargan e instalan desde el “store”, se diseñan para Android o IOS
basándonos en las guías o guidelines de cada una, no requieren internet para funcionar,
permiten utilizar el 100% de rendimiento del dispositivo.
● Web App: no necesitan instalarse, pueden verse desde el navegador, ni se actualizan,
requieren conexión a internet para funcionar, no permiten usar el hardware del
teléfono.
● App Híbrida: es una combinación entre las anteriores. Se desarrolla primero la web y luego se
crea una app nativa. mismo código multiplataforma.

Proyecto Final
TAREA PARA EL PROYECTO FINAL

Para comenzar a diseñar la interfaz del prototipo del Proyecto Final que vamos a desarrollar:
Comenzaremos realizando el boceto del Wireframe a mano de nuestro “Happy Path”, es decir el
camino feliz que recorre el usuario para solucionar su problema en nuestra app. Empieza por
Registrarse en la app, la Home, y luego las siguientes pantallas para completar el happy path. Luego de
tener todos los bocetos de las pantallas a mano y usándolos de referencia haremos los Wireframes
Digitales en Figma utilizando los elementos provistos para facilitar la tarea.
Para tener claro que pantallas voy a diseñar necesitaremos previamente tener hechos:
● Task Flow
● User Flow
● Mapa de Sitio
● MVP + POV + Storyboard
Aclaración: Los wireframes digitales van a estar en Fidelidad Baja, es decir, en escala de grises, con
los elementos dados, sin el contenido de texto específico, ni imágenes aplicadas.
DISEÑO UX/UI
Clase 13
Patrones de Diseño
Les damos la bienvenida
Vamos a comenzar a grabar la clase
Cronograma

Clase 12 Clase 13 Clase 14

Prototipo y Wireframes Patrones de Diseño Prototipo Funcional

● ¿Qué es un prototipo? ● ¿Qué son los patrones de ● Métricas UX

● Wireframes en diseño? ● Prototipo funcional
baja/media/alta ● UX Writing ● Demostración en Figma
● Bocetos a mano ● Material Design / Human ● Tarea para el Proyecto
● Wireframe digital Interface Final
● Figma ● Patrones de navegación
● Tarea para el Proyecto ● Patrones de interacción
Final ● Tarea para el Proyecto
Final
Mapa de Conceptos

Diseño Centrado en el Usuario (DCU)

Analizar Diseñar Validar

Mi-Fi Visual y Contenido

Design Thinking

Empatizar Definir Idear Prototipar Evaluar

Wireframe Digital
Patrones de diseño
Son técnicas para resolver problemas comunes en el desarrollo de
software y otros ámbitos referentes al diseño de interacción o interfaces.
Un patrón de diseño resulta ser una solución a un problema de diseño, es
decir son soluciones a problemas comunes que podemos encontrar en
webs y apps, que ya han sido testeadas y estudiadas para dar una
respuesta. Además son reutilizables, lo que significa que pueden resolver
un mismo problema en distintas circunstancias.
Patrones de diseño, origen
Se empezó a hablar de los patrones de diseño en los años 70 con la publicación del libro
“El lenguaje de patrones” de Christopher Alexander. En él se hacía referencia a
problemas arquitectónicos que podían encontrarse y a cómo estructurar o disponer los
elementos para solucionar estos problemas. Más tarde, en 1995, se recogería esta idea
para llevarla al mundo de la programación, surgiendo el famoso libro “Patrones de
diseño”.

Como podemos ver es un concepto que puede aplicarse a muchos sectores y también
actualmente en el mundo del diseño de interfaces, la experiencia de usuario y la
usabilidad.
“Los usuarios pasan más tiempo en otros sitios que en el tuyo”

Esta frase nos quiere decir que los usuarios ya tienen un

comportamiento marcado y unos modelos mentales porque han
visitado muchas webs o aplicaciones antes que la nuestra, y que por
lo tanto esperan que nuestro producto funcione del mismo modo que
todos los otros que ya conoce.

Los patrones nos permiten ahorrar tiempo y ya sabemos que

funcionan.
Patrones de lectura
Los usuarios repasan la información con la mirada, no leen.

● Escanean la información, de arriba a abajo y ven lo que les llama la atención.

● Navegan chocando con los elementos hasta que encuentran lo que quieren.
● Si encuentran lo que buscan, dejan partes de la página sin siquiera mirarla.
● Encuentran palabras clave relacionadas a lo que están buscando.
● Luego de encontrar lo que buscan, es posible que ocurra una lectura detallada, es
decir que profundicen en lo que más les importa.
Patrón de lectura “F”
Jakob Nielsen realizó un estudio de “eye tracking” a casi 250 personas y descubrió que
al visitar una web la forma de lectura era similar a la letra F.

1. Escaneaban la información localizada arriba a la izquierda, y el primer párrafo.

2. Luego la vista se mueve hacia abajo al comienzo del párrafo siguiente.

3. Y por último escanean la información bajando por el lado izquierdo de la página de

manera vertical.
Patrón de lectura “F”
¿Cómo debemos presentar los textos?
● Textos concisos, nadie quiere leer un ● No usar lenguaje promocional o
bloque de texto largo. Ir directo al marketinero que genere desconfianza.
grano, a la información principal, 75 ● No utilizar TEXTOS EN MAYÚSCULAS,
palabras máximo. dificulta la lectura y puede
● Alinear los textos a la izquierda, malinterpretarse.
porque facilita la lectura. ● En el caso de cometer un error, el
● Usar jerarquías visuales, que exista usuario debe comprender qué error
una mayor y menor importancia. Usar cometió y cómo puede recuperarse y
la negrita para palabras clave así se continuar navegando.
destacan. ● Incluir subtítulos cada 3 párrafos y
● Formatos escaneables, en bloques dividir por temas. Usar números y
breves de información. viñetas para agilizar la lectura.
● Lenguaje claro para los usuarios, con
el que buscan la información.
Test de los 5 segundos
Mostramos un diseño a una persona 5 segundos, lo retiramos, luego le preguntamos
qué recuerda de lo que vió.

Esto nos permite saber si el diseño fue comprendido y si los focos de atención más
importantes estaban bien ubicados.

Les preguntamos:

● ¿Qué recordás de la información?

● ¿Qué llamó más tu atención?

 Ejercicio
Clase 13
Test de los 5 segundos
¿Cuál es el tono o lenguaje apropiado?
● Tener en cuenta el ambiente al que pertenece nuestro proyecto, para poder
establecer el tono del mensaje: serio, elegante, social, informal, humorístico,
informativo, corporativo, familiar etc. Piensa en cómo hablaría tu empresa si fuera
una persona.
● Dado el caso debemos hablar como hablan nuestros usuarios, por más que algo se
llama técnicamente de una manera, para que el usuario comprenda debemos utilizar
la jerga que utiliza.
● No debemos hablar como robots, no es lo mismo cometer un error y que te digan
“error #589”, a que digan “ups!, tu nombre de usuario no coincide con la
contraseña, por favor intenta nuevamente”.
● Podemos involucrar más al usuario si en vez de poner “continuar” “ok”, ponemos:
“Si, realizar la compra”, “No, prefiero seguir mirando”.
Manual de estilo, marca o identidad (enfocado al lenguaje)

Un manual de estilo, guía de estilo o libro de estilo, es una guía

compuesta por un conjunto de criterios preceptuados, por normas
para el diseño y la redacción de documentos, ya sea para el uso
general, o para ser utilizados por los redactores de periódicos u otras
organizaciones que también publican textos.
Manual de estilo, marca o identidad (enfocado al lenguaje)
Su objetivo general es dar coherencia y unificar
criterios. Periodistas, editores y correctores
recurren al manual de estilo para resolver dudas y
crear una identidad única.

● Definir mensajes clave y público objetivo.

● Mantener la coherencia entre todos los
contenidos, aunque hayan sido creados por
diferentes personas.
● Resolver dudas comunes entre el equipo de
creación de contenidos, con el ahorro de
tiempo y esfuerzos que esto supone.
● Ofrece pautas de trabajo para los nuevos
redactores, freelancers o los bloggers
invitados.
● Marca el estándar de calidad para todos los
contenidos que se producen.
La importancia de tener buena ortografía

● Una mala escritura puede crear confusión, poca claridad y falta de coherencia.
● Si una empresa importante comete un error en un diseño para la vía pública o en
una publicidad audiovisual por ejemplo, podría provocar la pérdida de millones de
dólares en ventas.
● Podría provocarnos la pérdida de una oportunidad de trabajo si presentamos un
CV o portafolio que contenga errores ortográficos.
● Estas fallas tienen el potencial de destruir las relaciones con los clientes, no
volveremos a ser contratados, y podríamos ser despedidos.
● Otras investigaciones muestran que tan pronto como las personas identifican errores
ortográficos en el texto de una página web, inmediatamente la abandonan porque
temen que se trate de un sitio fraudulento.
Patrones de navegación
Formas de navegar los contenidos para evitar que los usuarios se pierdan:
● Drawer: El menú (Hamburguesa) nos permite cambiar rápidamente de
pantalla, para aplicaciones con más de 5 destinos no relacionados y poco
frecuentes.
● Barra inferior: Nos permite ver la navegación principal de la app, 3 a 5
secciones máximo. (IOS Tab bar/Android Bottom Navigation.)
● Pestañas: Organizan y permiten la navegación entre grupos de contenido
que están relacionados. (IOS Segmented control 2 a 5 como botone
/Android Tabs 4 fijas o 7 con scroll.)
● Retornos: Se posiciona arriba a la izquierda (IOS Chevron/Android Back.)
Patrones de interacción
Formas en que el usuario sujeta el
teléfono y el modo que utilizan sus dedos
condiciona la posición de los elementos.
Patrones de interacción
● Listas

● Desborde

● Buscar

● Cuadro de diálogo

● Notificaciones

● Introducción de datos
Listas

● Contenido dispuesto verticalmente.

● Muestra ítems y permite al usuario

seleccionar alguno de ellos para más
información.

● Contienen elementos con acciones

primarias y complementarias, que se
representan mediante iconos y
textos.
Desborde

● Funciones extra y de uso poco

frecuente

● Ocultas la mayor parte del tiempo,

hasta que el usuario las reclame.

● Contienen acciones que no entran en

la barra de acción por lo que pasan al
desborde.
Buscar

● Opción para buscar accesible desde

la barra de acciones o desde un
campo de búsqueda.
Cuadro de diálogo

● Se utilizan para interrumpir al

usuario de forma temporal para que
tome una decisión, o para explicar
algo que ha sucedido antes de
continuar.
● Mientras están visibles, no es posible
hacer otra cosa en el resto de la
aplicación.
● Limitar su uso.
● Por lo general, se centran en la
pantalla, y por encima de cualquier
otro elemento de la interfaz.
Notificaciones

● Se utiliza para mostrar que acaba de

ocurrir, o bien que sucederá en
breve.

● Se utilizan mensajes simples de

confirmación que desaparecen
luego de unos segundos.

● Las notificaciones no siempre

requieren la intervención del usuario
y no interrumpen su flujo.
Introducción de datos

● No siempre se debe obligar al

usuario a utilizar el teclado.

● Existen otras alternativas: menús

deslizantes, desplegables, checkbox,
o una lista, donde el usuario pueda
elegir entre varias opciones.

● Además, existe en el teléfono los

sensores de ubicación, cámaras y
micrófonos que también podrán ser
un input de datos para una
aplicación.
[Link]
[Link]
Android - Google: Material Design
IOS - Apple: Human Interface
Tarea para el Proyecto Final
Para continuar diseñando la interfaz del prototipo del Proyecto Final que vamos a desarrollar:

A partir de los Wireframes digitales (pantallas sencillas), vamos a incorporar los Patrones de Diseño
(los de navegación y luego los de interacción) vistos en clase. En este punto debemos decidir si
diseñamos para IOS o para Android según la preferencia de nuestra User persona.

Para realizar esta tarea necesitaremos previamente tener hechos los:

● Mapa de sitio
● User Flow
● Wireframes a mano
● Wireframes digitales

Aclaraciones: Guarden todo el proceso, es decir guarden los wireframes digitales y luego sobre una
copia incorporen los patrones de diseño. Para esta tarea utilizaremos el Anexo de la clase 13.
Ejemplo de entrega
EVOLUCIÓN DEL PROTOTIPO
 1- Login
WIREFRAME A MANO WIREFRAME DIGITAL PATRONES DE DISEÑO

Botón

Botón

Botón de
registrar
 2- Sign in
WIREFRAME A MANO WIREFRAME DIGITAL PATRONES DE DISEÑO

Botón

Campo de
texto

Campo de texto
(password)

Control de
selección
 3- Home Drawer
Botón de
notificaciones
WIREFRAME A MANO WIREFRAME DIGITAL PATRONES DE DISEÑO

Barra de
App (arriba)

Imagen

Botón en
acción
flotante

Card
 4- Buscador
WIREFRAME A MANO WIREFRAME DIGITAL PATRONES DE DISEÑO
Navegación
Título
Subtítulo

Botones de
selección

Interacción
 5- Resultados
WIREFRAME A MANO WIREFRAME DIGITAL PATRONES DE DISEÑO

Título

Card

Navegación

Interacción
 6- Reseña
WIREFRAME A MANO WIREFRAME DIGITAL PATRONES DE DISEÑO

Card

Navegación

Interacción
 7- Agenda
WIREFRAME A MANO WIREFRAME DIGITAL PATRONES DE DISEÑO

Título

Calendar

Botón de
selección

Botón
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.

Todo en el Aula Virtual.

Muchas gracias por tu atención.
Nos vemos pronto
 DISEÑO UX/UI
Clase 14
Prototipo Funcional y Métricas
Les damos la bienvenida
Vamos a comenzar a grabar la clase
 Clase 13 Clase 14 Clase 15

Patrones de Diseño Prototipo Funcional Pruebas de Usabilidad

Detalle: Detalle: Detalle:

● ¿Qué son los patrones de ● Métricas UX ● Testeo con usuarios

diseño? ● Prototipo funcional ● Guía del Moderador
● UX Writing ● Demostración en Figma ● Consejos para realizarla
● Material Design y ● Tarea para el Proyecto Final ● Guía del Observador
Human Interface ● Planillas de Registro
● Patrones de navegación ● Tarea para el Proyecto Final
● Patrones de interacción
● Tarea para el Proyecto Final
 Diseño Centrado en el Usuario (DCU)

Analizar Diseñar Validar

Mi-Fi Visual y Contenido

Lo-Fi Funcionalidad

Design Thinking

Empatizar Definir Idear Prototipar Evaluar

Wireframe Digital

Prototipo Funcional
¿Qué es un Prototipo Funcional?
● Una vez diseñadas las pantallas de nuestro prototipo debemos
conectarlas para indicar la dirección y secuencia de las mismas,
para que el usuario pueda recorrerlas, ir y venir por donde desee.
● A través de un prototipo funcional se comprende y representa la
interacción entre humano y máquina y cómo debería de
responder el sistema y cada uno de los elementos que lo
componen.
● Esta parte es indispensable para realizar las pruebas de usabilidad
con usuarios reales.
Gestos:

Son los medios para realizar acciones o navegar por los contenidos.

Seguramente recuerdan haber usado muchas aplicaciones donde

tocaron para presionar un botón, o mantuvieron presionado para
seleccionar algo de una lista, arrastraron hacia abajo o arriba para ver
información no visible en ese momento, giraron para ver mejor una
imagen, deslizaron una tarjeta para ver otra información oculta, etc.
Gestos:

Tap o tocar - Para acciones directas.

Doble toque - Para acciones rápidas. Acerca o aleja, selecciona texto, likea.

Mantener pulsado - Editar listas, mover, mostrar un menú.

Arrastrar - Mover, borrar o archivar.

Deslizar - Scroll, pasar de una foto a otra, abrir una solapa.

Juntar y separar - Zoom, rotar.

Mapa de clics y Mapa de Scroll:

El Mapa de clics analiza donde los usuarios hicieron Clic o Tap.

● Nos indica dónde los usuarios han tocado más en nuestra
aplicación.
● Saber cuáles secciones no se utilizan o no son recorridas.
El Mapa de scroll analiza dónde lo hacen y dónde dejan de hacerlo.
● La atención de los usuarios suele ser mayor con la primera
información que aparece y va disminuyendo a medida que va
scrolleando.
● Puede medirse también que les llama la atención durante el scroll
ya que se detienen más tiempo sobre determinada información.
Fidelidad media:

● Aún no tengo imagenes en mi prototipo

● Tengo algunos títulos pero algunos espacios tienen textos de
relleno
● Antes teníamos una funcionalidad nula, pero ahora vamos a
comenzar a conectar pantallas y realizar microinteracciones, etc.
● Con el prototipo en media vamos a realizar las primeras pruebas
de usabilidad con usuarios reales, para que los testers no se
dejen llevar o conquistar por imágenes o colores, sino por la
estructura y funcionamiento de la app.
En los testeos debemos saber ver y escuchar
oportunidades de mejora:
● Los usuarios nos pueden dar a entender que algo no se
comprende.
● Pueden dar a entender que algo no es sencillo de usar.
● Pueden tardar demasiado en realizar una tarea simple.
● Dar opiniones sobre cómo se podría mejorar la experiencia.
● Pueden perderse y no encontrar la funcionalidad principal para lo
cual fue creada la app.
● Pueden ir a secciones no esperadas que les llaman más la
atención y que eran secciones secundarias.
● Quedar atascados sin retornos.
● Y una gran lista de etcéteras.
Prototipo Funcional
Debemos simular un flujo real de recorrido del usuario, por ejemplo:
simular que aparezca un formulario de registro, que aparezca un
teclado, que el usuario registre sus datos, que toque un botón que lo
lleve a la home, pero todo esto sin imágenes, colores, y con algunos
textos de ejemplo.

El prototipo nos permite conectar pantallas mediante:

● Disparador - Donde comienza la interacción del usuario
● Acción - Conecta el disparador de la acción con el destino
● Destino - A dónde nos conduce la acción
¿Cómo hago que mi prototipo sea funcional?
Imagina que ya tenés las pantallas diseñadas del chat. Ya definiste que diseñas para
IOS y usas el modelo “iPhone 11 Pro”.

Ojo que para este

momento todas las
pantallas deben
“entrar” en el modelo
de dispositivo elegido.
Chequeen porque sino
van a continuar
diseñando en el espacio
incorrecto.
¿Cómo hago que mi prototipo sea funcional?
Ojo que para enlazar pantallas necesitás estar en la pestaña Prototype

Cuando muevas el
cursor encima de los
diferentes Frames verás
que aparecen
marcados con un
borde azul que tiene
una pequeña bola
blanca a la derecha:
esto es un nodo y es lo
que te permitirá
enlazar un elemento
con otro.
Como resultado
quedan unidas por
una flecha azul.
¿Cómo hago que mi prototipo sea funcional?

Con este enlazado básico, si

haces clic en el icono de Play
que está situado al lado del
botón de Share podrás visualizar
el prototipo.
Podrás observar que si haces clic
en un sitio en el que no hay
ningún enlace definido se verán
brevemente unos rectángulos
azules:
estos te indican siempre donde
existe una interacción para
guiarte.
¿Cómo hago que mi prototipo sea funcional?
Voy seleccionando los elementos que necesite enlazar (con cuidado de
seleccionar el elemento y no el texto o el ícono que contengan) y me aparecerá
una pequeña bolita que es de donde nace la flecha azul.
¿Cómo hago que mi prototipo sea funcional?
Nos aparecen las siguientes opciones:

Disparador: Acción:
On tap significa al hacer clic. Open overlay sirve para un
aviso que bloquea la pantalla.

Teclado
Error
Pop up
Métricas
Las métricas son una técnica de medir o evaluar un aspecto concreto
de manera cuantitativa, es decir son los resultados de una estrategia
de investigación que se centra en cuantificar la recopilación y el
análisis de datos.
Vamos a obtener datos numéricos.
Tomaremos decisiones en base a datos reales de usuarios reales.
● Vamos a evaluar qué hace y qué dice el usuario.
● Queremos saber en qué estadío estamos y si la app es exitosa.
● Ver donde están los errores y mejorarlos.
Tipos de métricas:

Eficacia - Facilidad de uso. Si los usuarios pueden realizar una tarea.

Eficiencia - Rendimiento de uso. Cuantos pasos y tiempo tardó.

Satisfacción - Emociones vinculadas al uso. Qué tanta satisfacción o

frustración sintió el usuario.
Métricas de los testeos:

Vamos a realizar 3 cuadros comparativos:

● Primero coloco los usuarios que realizarán la prueba de usabilidad:
Usuario 1, 2, 3, 4, 5 y Promedio.
● Coloco la lista de tareas a medir: Tarea A, B, C, D, E.
● Y luego voy a completar con: 1-Realizada con éxito / 0-No realizada con
éxito. (Eficacia)
● También voy a contar cuántos pasos tardaron en realizar la tarea con
éxito y en cuanto tiempo. (Eficiencia)
● Y por último, cuando finalizó el testeo, con un formulario de google les
voy a realizar una encuesta de satisfacción: del 1(muy sencillo) al
10(muy difícil) ¿Qué tan sencillo fue realizar la tarea principal de mi
proyecto? ¿Qué tan sencillo fue ubicar los elementos que buscabas?
Métrica NPS:

Net Promoter Score es una métrica elaborada por primera vez en 1993
por Fred Reichheld y posteriormente adoptada por Bain & Company y
Satmetrix en 2003 como una manera de pronosticar el
comportamiento de los clientes cuando realizan compras y
recomendaciones.
● NPS - ¿Recomendarías nuestra app a otras personas?
0 Muy poco probable - 10 Muy probable
Divide a los usuarios en Promotores, Pasivos y Retractores.
Tarea para el Proyecto:
Para continuar diseñando la interfaz del prototipo del Proyecto Final:

Una vez diseñadas las pantallas del “Happy Path” con los Patrones de diseño, vamos a convertir el
prototipo en un Prototipo Funcional conectando el camino que va a recorrer el usuario, para poder
realizar las pruebas de usabilidad.

Para este punto tendremos previamente tener hechos los:

● Wireframes a mano
● Wireframes digitales (En fidelidad baja, clase 12)
● Wireframes con patrones de diseño (En fidelidad baja, clase 13)

Aclaraciones: Ahora que haremos el prototipo funcional pasaremos a una Fidelidad media, es decir,
continuamos en escala de grises, con pantallas diseñadas con los elementos dados en la clase 13, ya
tenemos las pantallas diseñadas para Android o IOS, con las medidas de uno de los modelos de
celular que ofrece Figma, con partes del texto específico de mi proyecto (lo que permita
comprender y ubicar al usuario en una prueba de usabilidad) y sin imágenes.
Ejemplos de entregas
 COMPLETÓ LA TAREA CON ÉXITO
TAREA U1 U2 U3 U4 U5 PROMEDIO

Métricas de Registrarse
Acceder al buscador en la home
1
1
1
1
1
1
1
1
1
1
1
1

Eficiencia y Buscar psicólogo con filtros

Seleccionar uno de los resultados
1
1
1
1
1
1
1
1
1
1
1
1

Eficacia Reservar su primera sesión 1

TIEMPO
1 1 1 1 1

TAREA U1 U2 U3 U4 U5 PROMEDIO
U1 Florencia Registrarse 01:23 00:35 01:10 00:25 00:50 00:53
U2 Félix Acceder al buscador en la home 01:00 00:20 01:00 00:15 00:45 00:40
U3 Graciela Buscar psicólogo con filtros 01:25 00:25 01:20 00:20 01:00 00:54
U4 Ezequiel Seleccionar uno de los resultados 00:50 00:15 00:40 00:10 00:35 00:30
U5 Adrián Reservar su primera sesión 01:00 00:20 00:55 00:10 00:55 00:40
PASOS
TAREA U1 U2 U3 U4 U5 PROMEDIO
Registrarse 4 2 4 2 2 2,8
Acceder al buscador en la home 3 1 3 1 2 2
Buscar psicólogo con filtros 5 1 5 1 3 3
Seleccionar uno de los resultados 3 1 3 1 2 2
Reservar su primera sesión 3 2 3 2 3 2,6
Métricas de Satisfacción
La mayoría de los usuarios opinaron que:
● Fue muy sencillo acceder al buscador.
● Fue sencillo realizar la búsqueda de psicólogo.
● Fue muy sencillo elegir un psicólogo de los resultados
obtenidos de la búsqueda.
● Fue muy sencillo reservar la primera sesión con el
terapeuta.
● El 80% usuarios recomendarían esta app para la
búsqueda de psicólogo.
El 20% respondieron que tal vez la recomendarían.
Ningún usuario no la recomendaría.
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.

Todo en el Aula Virtual.

Muchas gracias por tu atención.
Nos vemos pronto
 Patrones de diseño

¿Qué son?
Son técnicas para resolver problemas comunes en el desarrollo de software y otros ámbitos referentes al
diseño de interacción o interfaces.
Un patrón de diseño resulta ser una solución a un problema de diseño, es decir son soluciones a
problemas comunes que podemos encontrar en webs y apps, que ya han sido testeadas y estudiadas
para dar una respuesta. Además son reutilizables, lo que significa que pueden resolver un mismo
problema en distintas circunstancias.

Origen
Se empezó a hablar de los patrones de diseño en los años 70 con la publicación del libro “El lenguaje
de patrones” de Christopher Alexander. En él se hacía referencia a problemas arquitectónicos que
podían encontrarse y a cómo estructurar o disponer los elementos para solucionar estos problemas.
Más tarde, en 1995, se recogería esta idea para llevarla al mundo de la programación, surgiendo el
famoso libro “Patrones de diseño”.
Como podemos ver es un concepto que puede aplicarse a muchos sectores y también actualmente en el
mundo del diseño de interfaces, la experiencia de usuario y la usabilidad.

Patrones de diseño:
“Los usuarios pasan más tiempo en otros sitios que en el tuyo”.

Esta frase nos quiere decir que los usuarios ya tienen un comportamiento marcado y unos modelos
mentales porque han visitado muchas webs o aplicaciones antes que la nuestra, y que por lo tanto
esperan que nuestro producto funcione del mismo modo que todos los otros que ya conoce.

Los patrones nos permiten ahorrar tiempo y ya sabemos que funcionan.

 Patrones de lectura

Los usuarios repasan la información con la mirada, no leen.

Escanean la información, de arriba a abajo y ven lo que les llama la atención. Navegan
chocando con los elementos hasta que encuentran lo que quieren. Si encuentran lo que
buscan, dejan partes de la página sin siquiera mirarla.
Encuentran palabras clave relacionadas a lo que están buscando.
Luego de encontrar lo que buscan, es posible que ocurra una lectura detallada, es decir que profundicen
en lo que más les importa.

Patrón de lectura “F”

Jakob Nielsen realizó un estudio de “eye tracking” a casi 250 personas y descubrió que al visitar una
web la forma de lectura era similar a la letra F.
1) Escaneaban la información localizada arriba a la izquierda, y el primer párrafo.
2) Luego la vista se mueve hacia abajo al comienzo del párrafo siguiente.
3) Y por último escanean la información bajando por el lado izquierdo de la página de manera
vertical.
¿Cómo debemos presentar los textos?
● Textos concisos, nadie quiere leer un bloque de texto largo. Ir directo al grano, a la
información principal, 75 palabras máximo.
● Alinear los textos a la izquierda, porque facilita la lectura.
● Usar jerarquías visuales, que exista una mayor y menor importancia. Usar la negrita para
palabras clave así se destacan.
● Formatos escaneables, en bloques breves de información.
 ● Lenguaje claro para los usuarios, con el que buscan la información.
● No usar lenguaje promocional o marketinero que genere desconfianza.
● No utilizar TEXTOS EN MAYÚSCULAS, dificulta la lectura y puede malinterpretarse.
● En el caso de cometer un error, el usuario debe comprender qué error cometió y cómo
puede recuperarse y continuar navegando.
● Incluir subtítulos cada 3 párrafos y dividir por temas. Usar números y viñetas para agilizar
la lectura.

Test de los 5 segundos:

Mostramos un diseño a una persona 5 segundos, lo retiramos, luego le preguntamos qué recuerda de lo
que vió.
Esto nos permite saber si el diseño fue comprendido y si los focos de atención más importantes estaban
bien ubicados.

Les preguntamos:

● ¿Qué recordás de la información?

● ¿Qué llamó más tu atención?

Ejercicio Clase 12
Test de los 5 segundos

¿Cuál es el tono o lenguaje apropiado?

● Tener en cuenta el ambiente al que pertenece nuestro proyecto, para poder establecer el tono
del mensaje: serio, elegante, social, informal, humorístico, informativo, corporativo,
familiar etc. Piensa en cómo hablaría tu empresa si fuera una persona.
● Dado el caso debemos hablar como hablan nuestros usuarios, por más que algo se llama
técnicamente de una manera, para que el usuario comprenda debemos utilizar la jerga que
utiliza.
 ● No debemos hablar como robots, no es lo mismo cometer un error y que te digan “error #589”,
a que digan “ups!, tu nombre de usuario no coincide con la contraseña, por favor intenta
nuevamente”.
● Podemos involucrar más al usuario si en vez de poner “continuar” “ok”, ponemos: “Si,
realizar la compra”, “No, prefiero seguir mirando”.

Manual de estilo, marca o identidad (enfocado al lenguaje)

Un manual de estilo, guía de estilo o libro de estilo, es una guía compuesta por un conjunto de criterios
preceptuados, por normas para el diseño y la redacción de documentos, ya sea para el uso general, o
para ser utilizados por los redactores de periódicos u otras organizaciones que también publican textos.
Su objetivo general es dar coherencia y unificar criterios. Periodistas, editores y correctores recurren al
manual de estilo para resolver dudas y crear una identidad única.
● Definir mensajes clave y público objetivo.
● Mantener la coherencia entre todos los contenidos, aunque hayan sido creados por diferentes
personas.
● Resolver dudas comunes entre el equipo de creación de contenidos, con el ahorro de tiempo
y esfuerzos que esto supone.
● Ofrece pautas de trabajo para los nuevos redactores, freelancers o los bloggers invitados.
● Marca el estándar de calidad para todos los contenidos que se producen.

La importancia de tener buena ortografía

● Una mala escritura puede crear confusión, poca claridad y falta de coherencia.
● Si una empresa importante comete un error en un diseño para la vía pública o en una
publicidad audiovisual por ejemplo, podría provocar la pérdida de millones de dólares en
ventas.
● Podría provocarnos la pérdida de una oportunidad de trabajo si presentamos un CV o
portafolio que contenga errores ortográficos.
● Estas fallas tienen el potencial de destruir las relaciones con los clientes, no
volveremos a ser contratados, y podríamos ser despedidos.
● Otras investigaciones muestran que tan pronto como las personas identifican errores
ortográficos en el texto de una página web, inmediatamente la abandonan porque temen que se
trate de un sitio fraudulento.
 Patrones de navegación

Formas de navegar los contenidos para evitar que los usuarios se pierdan.

● Drawer: El menú (Hamburguesa) nos permite cambiar rápidamente de pantalla, para

aplicaciones con más de 5 destinos no relacionados y poco frecuentes.
● Barra inferior: Nos permite ver la navegación principal de la app, 3 a 5 secciones máximo.
(IOS Tab bar/Android Bottom Navigation.)
● Pestañas: Organizan y permiten la navegación entre grupos de contenido que están
relacionados. (IOS Segmented control 2 a 5 como botone /Android Tabs 4 fijas o 7 con scroll.)
● Retornos: Se posiciona arriba a la izquierda (IOS Chevron/Android Back.)

Patrones de interacción
Formas en que el usuario sujeta el teléfono y el modo que utilizan sus dedos condiciona la posición de
los elementos.

Patrones de interacción
● Listas
● Desborde
● Buscar
● Cuadro de diálogo
● Notificaciones
● Introducción de datos
 Material Design y Human Interface

[Link]

[Link]
Android - Google - Material Design

IOS -

Apple - The Human Interface

Wireframe Digital
Al ser digital nos permite agregar un poco más de detalles y prolijidad que en el wireframe a mano,
pero sigue siendo un boceto de los elementos que forman la interfaz.
“Es un espacio en donde se articula la interacción entre cuerpo humano, herramienta, y el objeto de
acción” Gui Bonsiepe - Del objeto a la interface.
Utilizaremos la herramienta “Figma” que sirve, entre muchas otras funciones, para crear
prototipos y wireframes digitales.

Proyecto Final

TAREA PARA EL PROYECTO FINAL

Para continuar diseñando la interfaz del prototipo del Proyecto Final que vamos a desarrollar:
A partir de los Wireframes digitales (pantallas sencillas), vamos a incorporar los Patrones de Diseño
(los de navegación y luego los de interacción) vistos en clase. En este punto debemos decidir si
diseñamos para IOS o para Android según la preferencia de nuestra User persona.
Para realizar esta tarea necesitaremos previamente tener hechos los:

● Mapa de sitio
● User Flow
● Wireframes a mano
● Wireframes digitales

Aclaración: Guarden todo el proceso, es decir guarden los wireframes digitales y luego sobre una
copia incorporen los patrones de diseño.

¿Qué es un Prototipo funcional?

Una vez diseñadas las pantallas de nuestro prototipo debemos conectarlas para indicar la dirección y
secuencia de las mismas, para que el usuario pueda recorrerlas, ir y venir por donde desee.
A través de un prototipo funcional se comprende y representa la interacción entre humano y máquina y
cómo debería de responder el sistema y cada uno de los elementos que lo componen.
Esta parte es indispensable para realizar las pruebas de usabilidad con usuarios reales.

Gestos
Son los medios para realizar acciones o navegar por los contenidos.

Seguramente recuerdan haber usado muchas aplicaciones donde tocaron para presionar un botón, o
mantuvieron presionado para seleccionar algo de una lista, arrastraron hacia abajo o arriba para ver
información no visible en ese momento, giraron para ver mejor una imagen, deslizaron una tarjeta para
ver otra información oculta, etc.
● Tap o tocar - Para acciones directas.
● Doble toque - Para acciones rápidas. Acerca o aleja, selecciona texto, likea.
● Mantener pulsado - Editar listas, mover, mostrar un menú.
● Arrastrar - Mover, borrar o archivar.
 ● Deslizar - Scroll, pasar de una foto a otra, abrir una solapa.
● Juntar y separar - Zoom, rotar.

Mapa de clics y Mapa de Scroll

El Mapa de clics analiza donde los usuarios hicieron Clic o Tap.
● Nos indica donde los usuarios han tocado más en nuestra aplicación.
● Saber cuáles secciones no se utilizan o no son recorridas. El Mapa
de scroll analiza dónde lo hacen y dónde dejan de hacerlo.
● La atención de los usuarios suele ser mayor con la primera información que aparece y va
disminuyendo a medida que va scrolleando.
● Puede medirse también que les llama la atención durante el scroll ya que se detienen
más tiempo sobre determinada información.

Fidelidad media
● Aún no tengo imagenes en mi prototipo
● Tengo algunos títulos pero algunos espacios tienen textos de relleno
● Antes teníamos funcionalidad nula, pero ahora vamos a comenzar a conectar pantallas
y realizar microinteracciones, etc.
● Con el prototipo en media vamos a realizar las primeras pruebas de usabilidad con usuarios
reales, para que los testers no se dejen llevar o conquistar por imágenes o colores, sino por la
estructura y funcionamiento de la app.

En los testeos debemos saber ver y escuchar oportunidades de mejora:

● Los usuarios nos pueden dar a entender que algo no se comprende.
● Pueden dar a entender que algo no es sencillo de usar.
● Pueden tardar demasiado en realizar una tarea simple.
● Dar opiniones sobre cómo se podría mejorar la experiencia.
● Pueden perderse y no encontrar la funcionalidad principal para lo cual fue creada la app.
● Pueden ir a secciones no esperadas que les llaman más la atención y que eran secciones
secundarias.
● Quedar atascados sin retornos.
 ● Y una gran lista de etcéteras.

Prototipo funcional
Debemos simular un flujo real de recorrido del usuario, por ejemplo: simular que aparezca un
formulario de registro, que aparezca un teclado, que el usuario registre sus datos, que toque un botón
que lo lleve a la home, pero todo esto sin imágenes, colores, y con algunos textos de ejemplo.
El prototipo nos permite conectar pantallas mediante:
● Disparador - Donde comienza la interacción del usuario
● Acción - Conecta el disparador de la acción con el destino
● Destino - A dónde nos conduce la acción

¿Cómo hago que mi prototipo sea funcional?

 Métricas
Las métricas son una técnica de medir o evaluar un aspecto concreto de manera cuantitativa, es decir
son los resultados de una estrategia de investigación que se centra en cuantificar la recopilación y el
análisis de datos.
Vamos a obtener datos numéricos.

Tomaremos decisiones en base a datos reales de usuarios reales.

● Vamos a evaluar qué hace y qué dice el usuario.
● Queremos saber en qué estadío estamos y si la app es exitosa.
● Ver donde están los errores y mejorarlos.

Tipos de métricas
● Eficacia - Facilidad de uso. Si los usuarios pueden realizar una tarea.
● Eficiencia - Rendimiento de uso. Cuantos pasos y tiempo tardó.
● Satisfacción - Emociones vinculadas al uso. Qué tanta satisfacción o frustración sintió el
usuario.

Métricas de los testeos

Vamos a realizar 3 cuadros comparativos:

● Primero coloco los usuarios que realizarán la prueba de usabilidad: Usuario 1, 2, 3, 4, 5 y

Promedio.
● Coloco la lista de tareas a medir: Tarea A, B, C, D, E.
● Y luego voy a completar con: 1-Realizada con éxito / 0-No realizada con éxito.
(Eficacia)
● También voy a contar cuántos pasos tardaron en realizar la tarea con éxito y en cuanto
tiempo. (Eficiencia)
● Y por último, cuando finalizó el testeo, con un formulario de google les voy a realizar una
encuesta de satisfacción: del 1(muy sencillo) al 10(muy difícil) ¿Qué tan sencillo fue realizar
la tarea principal de mi proyecto? ¿Qué tan sencillo fue ubicar los elementos que buscabas?...
Métrica NPS
Net Promoter Score es una métrica elaborada por primera vez en 1993 por Fred Reichheld y
posteriormente adoptada por Bain & Company y Satmetrix en 2003 como una manera de pronosticar
el comportamiento de los clientes cuando realizan compras y recomendaciones.
● NPS - ¿Recomendarías nuestra app a otras personas? 0 Muy
poco probable - 10 Muy probable
○ Divide a los usuarios en Promotores, Pasivos y Retractores.

Proyecto Final

TAREA PARA EL PROYECTO FINAL

Para continuar diseñando la interfaz del prototipo del Proyecto Final:

Una vez diseñadas las pantallas del “Happy Path” con los Patrones de diseño, vamos a convertir el
prototipo en un Prototipo Funcional conectando el camino que va a recorrer el usuario, para poder
realizar las pruebas de usabilidad.
Para este punto tendremos previamente tener hechos los:
Wireframes a mano

Wireframes digitales (En fidelidad baja, clase 11)

Wireframes con patrones de diseño (En fidelidad baja, clase 12)

Aclaraciones: Ahora que haremos el prototipo funcional pasaremos a una Fidelidad media, es decir,
continuamos en escala de grises, con pantallas diseñadas con los elementos dados en la clase 12, ya
tenemos las pantallas diseñadas para Android o IOS, con las medidas de uno de los modelos de celular
que ofrece Figma, con partes del texto específico de mi proyecto (lo que permita comprender y ubicar
al usuario en una prueba de usabilidad) y sin imágenes.
DISEÑO UX/UI
Clase 15
Pruebas de Usabilidad
Les damos la bienvenida
Vamos a comenzar a grabar la clase
 Clase 14 Clase 15 Clase 16

Prototipo Funcional Pruebas de Usabilidad Atomic Design

● Prototipo funcional ● Testeo con usuarios ● ¿Qué es el Atomic Design?

● Métricas UX ● Guía del Moderador ● Componentes y variantes
● Tarea para el Proyecto Final ● Consejos para realizarla ● Tarea para el Proyecto Final
● Guía del Observador
● Planillas de Registro
● Tarea para el Proyecto Final
 Diseño Centrado en el Usuario (DCU)

Analizar Diseñar Validar

Mi-Fi Visual y Contenido

+ Funcionalidad

Design Thinking

Empatizar Definir Idear Prototipar Evaluar

Wireframe Digital Pruebas de usabilidad

Prototipo Funcional
ITERAR
Pruebas de usabilidad
La prueba de usabilidad por parte del usuario es una técnica usada en
el diseño de interacciones centrado en el usuario para evaluar un
producto mediante pruebas con usuarios reales.

Esto puede ser visto como una práctica de usabilidad irreemplazable,

dado que entrega información directa de cómo los usuarios reales
utilizan el sistema.
Definición
La Norma ISO 9241-11 define usabilidad como “el grado en que un producto
puede ser utilizado por usuarios específicos para lograr los objetivos
específicos con efectividad, eficiencia y satisfacción en un contexto de uso”.
¿En qué consisten estas pruebas?
Las pruebas de usabilidad consisten en seleccionar a un grupo de usuarios y
solicitarles que lleven a cabo las tareas para las cuales fue diseñado el sistema,
en tanto el equipo de diseño, desarrollo y otros involucrados toman nota de la
interacción, particularmente de los errores y dificultades con las que se
encuentran los usuarios.

No es necesario que se trate de una aplicación completamente terminada,

pudiendo tratarse de un prototipo.
¿Para qué sirven?
● Validar si los usuarios logran realizar tareas sobre un prototipo o sistema.

● Detectar problemas de usabilidad (qué tan fácil es el uso de una

determinada interfaz).
¿Para qué no sirven?
● Definir cuál es la mejor versión de nuestro sistema (Test A/B).

● Definir con certeza los motivos de mal funcionamiento del desarrollo.

Test A/B: como el propio término indica, se comparan dos versiones (A y B), que son idénticas salvo por una variación
que puede afectar al comportamiento del usuario. Por ejemplo, en una página web de comercio electrónico, el proceso
de compra es normalmente un buen candidato para realizar un test A/B, dado que, incluso mejoras marginales en la tasa
de abandono, pueden implicar incrementos significativos en las ventas.
¿Cuándo llevarlas a cabo?
● Cuanto más temprano mejor: como toda evaluación, cuanto más
esperamos para su realización, más costoso resultará la reparación de los
errores de diseño descubiertos. Es importante destacar que las pruebas de
usabilidad pueden realizarse durante todo el proceso de elaboración de un
producto.

● Se puede realizar varias pruebas de usabilidad: se puede y se deberían

realizar varias pruebas de usabilidad sobre un mismo producto a medida
que se realizan cambios en el mismo para así poder mejorarlo
continuamente.
Evaluación heurística
● La evaluación heurística es una variante de la inspección de usabilidad
donde los especialistas en usabilidad juzgan si cada elemento de la
interfaz de usuario sigue los principios de usabilidad establecidos.

● Un análisis heurístico se puede realizar en cualquier etapa avanzada del

proceso de diseño (Obviamente, no sería productivo hacerlo demasiado
pronto). Con los nuevos productos, un análisis heurístico suele realizarse
más tarde en la fase de diseño, después de hacer wireframes y prototipos, y
antes de que comience el diseño visual y el desarrollo de la interfaz de
usuario.
Tipos de prueba
● Pruebas de usabilidad remotas
● Pruebas de usabilidad presenciales
● Pruebas de usabilidad presenciales en contexto de uso
¿Cuántos usuarios necesitamos?
Una investigación (Virzi, 1992 y Nielsen Landauer, 1993) muestra que:
5 usuarios es suficiente para exponer el 80% de los problemas de usabilidad.

La verdad es que el número real de usuarios necesarios depende de la

complejidad de la aplicación dada y de sus objetivos de usabilidad.

El aumento de los participantes en un prueba de usabilidad, da lugar a un

aumento de los costos, la planificación, la gestión de los participantes y el
análisis de datos.

Pero como pauta general, con un presupuesto chico, 5 es un buen número para
empezar.
¿Qué es lo mínimo que debemos tener presente al realizar las pruebas?

● Antes
○ Definir el objetivo de la prueba
○ Escribir el guión de la prueba: cuántas tareas y cómo se abordarán.
○ Usuarios: cantidad, quiénes, cómo los obtengo, cómo los contacto.
○ Prototipo: sitio web, app.
○ Roles: moderador, observador, usuario.
○ Tabla de evaluación: qué y cómo evaluaré cada tarea.
● Durante
○ Locación: remoto, presencial (en contexto de uso o no).
○ Registro: audio, video, fotografías, apuntes.
○ Evaluación: qué y cómo evaluaré cada tarea.
● Después
○ Cómo ordenar y priorizar los hallazgos.
○ Presentación de resultados.
○ Aplicación de mejoras
Pasos para realizar las pruebas de usabilidad
1. Formular los objetivos
○ Los objetivos nos permiten evidenciar cuáles son los propósitos que esperamos
cumplir con una determinada prueba.
○ Es la primera actividad que debemos realizar. Con esto buscamos saber cuáles
son los flujos y tareas que deben ser puestas a prueba.
○ Con los objetivos definidos podemos definir escenarios, tareas y criterios de
evaluación.
2. Elegir a los usuarios
○ La muestra mínima es una definición que está vinculada a muchos factores
(presupuesto, tiempo, espacio, capacidad de análisis).
○ Podemos seguir la recomendación de realizar un test con solo 5 personas, lo que
nos entregaría el 80% de los errores de nuestro prototipo.
3. Escribir el guión de la prueba
Todo proceso de evaluación debe contemplar un guión o pauta que ordene
qué se evalúa y en qué orden.
Esto nos permite estandarizar nuestra prueba de usabilidad y asegurar que el
orden y las instrucciones que son entregadas a los participantes sean las
mismas, evitando posibles sesgos.
Elementos a considerar:
● Introducción y firma de consentimiento informado, esto último,
recomendado en un contexto de investigación de mercado/científica).
● Preguntas previas.
● Tareas y el escenario hipotético.
● Preguntas posteriores.
● Cierre y agradecimiento.
3.A Escribir el guión de la prueba
● Introducción
○ Comenzar con un agradecimiento.
○ Introducir a lo que serán las pruebas de usabilidad.
○ Es el momento para hacer las aclaraciones necesarias (grabación de la conversación,
dudas, etc.).
○ Ejemplo para la app Buscador de Psicólogo: “Mi nombre es Irina y estamos
haciendo el diseño para una aplicación. Te agradecemos por participar. Te solicito
permiso para grabar tu interacción con el sistema.”
○ Importante que diga en voz alta lo que vaya haciendo/pensando.
○ Ejemplo: “A medida que vayas avanzando, te pedimos que vayas relatando lo que
vayas haciendo y pensando.”
○ Indicarle que no hay respuestas buenas o malas, correctas o incorrectas.
● Preguntas previas de validación
○ El objetivo es validar que son los usuarios que necesitamos (user personas).
Ejemplo: “Decime por favor tu nombre y edad. Comentame si podrías actualmente
afrontar una terapia y si alguna vez fuiste a terapia.”
3.B Escribir el guión de la prueba
● Tareas y escenario hipotético
○ Listado de tareas a realizar con un criterio claro para determinar el éxito/fracaso. Es
importante tener presente este criterio (cuál es el camino ideal o simple para completar la
tarea).
○ Para pensar el listado de tareas podés utilizar como guía el MVP o lo que tengas diseñado
hasta el momento en tu sistema.
○ Ejemplo escenario hipotético: “Imaginate que te llamas Pilar, que terminás con tu pareja,
te sentís triste y pensás que tendrías que hablar de tus problemas con un profesional por
lo que necesitas encontrar un terapeuta, y encontrás en la Play Store una app que te
puede ayudar.”
● Preguntas posteriores
○ Despejamos dudas nuestras o dudas del usuario que participó en la prueba.
○ Hacemos preguntas en cuanto a la satisfacción del usuario.
○ Para esto podemos enviarle un formulario de Google para que responda a nuestras
preguntas ahí. Ejemplo: métricas de satisfacción.
● Cierre y agradecimiento
○ Agradecemos y se le pregunta si lo podemos volver a contactar en caso de necesitarlo.
4. Evaluar las tareas realizadas

La evaluación de las tareas asignadas a

los usuarios deben considerar una
tabla con criterios específicos de
evaluación con una rúbrica clara y
establecida según los criterios de
usabilidad definidos al momento de
diseñar la app.

La tabla de evaluación contempla los

criterios necesarios para dar por
lograda o no lograda una tarea y sus
subtareas.
5. Análisis de resultados

Generar un informe con los resultados de las pruebas.

Con toda la información recolectada lo que debemos hacer es analizar y sintetizar

para así obtener cuales son los problemas de diseño y qué se puede hacer para
mejorarlos y obtener un mejor resultado.
Roles
● Moderador: un miembro activo de nuestro equipo. Debe hacer sentir
cómodos a los participantes. Poner a grabar luego de que el usuario
acepte. Asegurar la validez del estudio.
● Usuario: alguien que nunca haya escuchado hablar de nuestro proyecto
(neutral).
● Observador: un miembro pasivo de nuestro equipo. Asistente del
moderador. Debe registrar problemas que enfrentan los participantes en el
test, éxito/fracaso de cada tarea, cantidad de pasos que demora en realizar
cada tarea y tiempo de demora en cada una. Puede registrar reacciones u
otros comentarios realizados durante la prueba. Al finalizar, comparte sus
notas con el equipo.
Durante la ejecución
● Antes de comenzar, permita despejar las dudas sobre la prueba.
● Entregarle el dispositivo mediante el cual ejecutará la prueba o bien el link.
● Indicarle a la persona que deberá expresar verbalmente cada una de
sus acciones y pensamientos, mientras utiliza la interfaz.
● No decirle al usuario como continuar o que tocar cuando cometa
errores.
● Dejar fluir la interacción con el sistema.
● No agregar información o indicios, más allá de lo propuesto en el guión.
● Prestar atención al detalle: reacciones verbales o no, comentarios,
preguntas realizadas, etc.
 Ejercicio
Clase 15
Escribir una introducción y un
escenario hipotético para tus
pruebas de usabilidad.
Después de las pruebas
● Analizar los resultados

● Setear prioridades en relación a la mejoras surgidas luego del análisis

● Iterar el diseño implementando las mejoras

● Elaborar un informe que contenga los principales hallazgos, conclusiones

e incluso citas textuales que permitan entender la experiencia de los
usuarios.

● Recordar siempre: “El diseñador no es el usuario. El usuario no es el

diseñador.”
 COMPLETÓ LA TAREA CON ÉXITO
TAREA U1 U2 U3 U4 U5 PROMEDIO

Métricas de Registrarse
Acceder al buscador en la home
1
1
1
1
1
1
1
1
1
1
1
1

Eficiencia y Buscar psicólogo con filtros

Seleccionar uno de los resultados
1
1
1
1
1
1
1
1
1
1
1
1

Eficacia Reservar su primera sesión 1

TIEMPO
1 1 1 1 1

TAREA U1 U2 U3 U4 U5 PROMEDIO
U1 Florencia Registrarse 01:23 00:35 01:10 00:25 00:50 00:53
U2 Félix Acceder al buscador en la home 01:00 00:20 01:00 00:15 00:45 00:40
U3 Graciela Buscar psicólogo con filtros 01:25 00:25 01:20 00:20 01:00 00:54
U4 Ezequiel Seleccionar uno de los resultados 00:50 00:15 00:40 00:10 00:35 00:30
U5 Adrián Reservar su primera sesión 01:00 00:20 00:55 00:10 00:55 00:40
PASOS
TAREA U1 U2 U3 U4 U5 PROMEDIO
Registrarse 4 2 4 2 2 2,8
Acceder al buscador en la home 3 1 3 1 2 2
Buscar psicólogo con filtros 5 1 5 1 3 3
Seleccionar uno de los resultados 3 1 3 1 2 2
Reservar su primera sesión 3 2 3 2 3 2,6
Métricas de Satisfacción
La mayoría de los usuarios opinaron que:
● Fue muy sencillo acceder al buscador.
● Fue sencillo realizar la búsqueda de psicólogo.
● Fue muy sencillo elegir un psicólogo de los resultados
obtenidos de la búsqueda.
● Fue muy sencillo reservar la primera sesión con el
terapeuta.
■ El 80% usuarios recomendarían esta app para
la búsqueda de psicólogo.
■ El 20% respondieron que tal vez la
recomendarían.
■ Ningún usuario no la recomendaría.
Tarea para el Proyecto
Para continuar con el Proyecto Final que estamos desarrollando:
Realizar 5 Pruebas de Usabilidad con usuarios que se ajusten al perfil de tu proyecto (User
personas). Crear tres cuadros con los datos cuantitativos de las métricas de eficiencia, eficacia y
satisfacción (para la métrica de satisfacción usaremos Google form para crear un formulario con las
preguntas, y finalizadas las pruebas se las enviaremos a los usuarios.)
● Escenario Hipotético.
● Listado de tareas, Preguntas (para antes y después de las pruebas) Intro. y Cierre.
● Planillas de registro (usar una por usuario para tomar notas):
○ Nombre del usuario.
○ Criterio de éxito de la tarea que se puede verificar/observar. Ej: Reservar una sesión.
○ ¿Pudo realizar la tarea con éxito? Responder: 1: Sí / 0: No
○ ¿Cuántos pasos le tomó realizar la tarea? ¿Cuánto tiempo tardó?
○ Registro de problemas detectados. Observaciones.
● Informe de conclusiones (uno sobre todas las pruebas):
○ Qué funcionó, Qué no funcionó y Recomendaciones generales.
Proyecto Final

Entrega Final: Clase 26

Ejemplo de entrega
TESTEOS - Métricas de Eficiencia y Eficacia

Completo la tarea con éxito

TAREA 1: Realizar U1 U2 U3 U4 U5 Promedio
meditación

Registrarse 1 1 1 1 1 100%

Acceder a la sección 1 1 1 1 1 100%

Meditación

Seleccionar la 1 1 1 1 1 100%
categoría "Insomnio"

Elegir una 1 1 1 1 1 100%

meditación

Visualizar el botón 1 1 1 1 1 100%

"reproducir"

Referencia y notas:
1- La tarea se completó con éxito
Ver más
métricas 0 - La tarea no se completó correctamente
TESTEOS - Métricas de satisfacción

Según tu percepción, el mensaje

y los objetivos que Tranky: 100%
podés con todo transmite a Satisfacción
través de sus opciones: ¿Qué tan probable sería que
uses y recomiendes Tranky:
podés con todo en tu
● Es muy claro a vida diaria?
simple vista. 100%
● Muy 100%
probable.

La mayoría de los usuarios opinaron que:

- Tranky es una app con un diseño muy claro a simple vista.

- La mayoría de las tareas se realizaron con rapidez y sin inconvenientes.
- El 100% de los/las participantes utilizarían la app en su rutina diaria y la recomendarían.
- “Le veo un estilo simple, directo y útil”. “intuitiva y fácil. Me imagino usándola. Necesitaba una app que le diera
música para calmar y notas. ”
TESTEOS - Conclusiones - Prueba de Usabilidad

Pendientes ordenados por prioridad:

Si bien todos los usuarios pudieron completar las tareas, se deben revisar algunas
funcionalidades ya que resultan poco claras. A continuación, se listan los pendientes
ordenados de mayor a menor prioridad:

1. Sugerencia de registro más sencillo para no completar tantos datos y que se pueda
registrar/loguear con google/facebook. Prioridad: Alta.
2. Agregar la opción de “Compartir” vía correo o whatsapp, las notas del diario en conjunto
con la meditación/sonido realizado. Prioridad: Media.
3. Cambiar el ícono de la sección Meditación. Prioridad: Baja.
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.

Todo en el Aula Virtual.

Muchas gracias por tu atención.
Nos vemos pronto
DISEÑO UX/UI
Clase 16
Atomic Design
Les damos la bienvenida
Vamos a comenzar a grabar la clase
 Clase 15 Clase 16 Clase 17

Pruebas de Usabilidad Atomic Design Figma

● ¿En qué consisten? ● ¿Qué es un sistema de ● La plataforma

● ¿Para qué sirven y cuándo diseño? ● Principios básicos
llevarlas a cabo? ● Atomic Design ● Comunidad en Figma
● Tipos de prueba y pasos ● Resumen de los ● Exportar e importar
para realizarlas elementos de Atomic archivos
● Roles ● Componentes y variables
Design
● Tarea para el Proyecto Final ● Auto-Layout
● Componentes
● UI Kit ● Prototipado funcional
● Tarea para el Proyecto Final
 Diseño Centrado en el Usuario (DCU)

Analizar Diseñar Validar

Mi-Fi Visual y Contenido

Design Thinking

Empatizar Definir Idear Prototipar Evaluar

Wireframe Digital

Atomic Design
¿Qué es un sistema de diseño?
El diseño web actualmente está siendo reemplazado por los:
sistemas de diseño, compuestos de una serie de elementos que no importa si
son utilizados en una app, web o la interfaz que se requiera, ya que son
adaptables.
Para optimizar tiempos los desarrolladores y diseñadores van a crear
interfaces con las mismas reglas, sistemas y elementos para que funcionen
en cualquier entorno.
Ya no se van a diseñar páginas específicas sino los elementos de la UI o
Interfaz de usuario.
Atomic Design
Brad Frost en su libro “Atomic Design” introduce una metodología para crear
y mantener sistemas de diseño efectivos.

Toma de la naturaleza la estructura de:

Átomos - Moléculas - Organismos

Link: [Link]
Josh Duck es un desarrollador Web que se dedica a construir redes sociales y
sitios web de alto tráfico. Él es el creador de la tabla periódica de elementos
mínimos de html que luego actualizó a mobile.
 Títulos

Texto lineal Tablas

Salto de línea

Contenedor

Etiqueta
Entrada de datos
Link Botón

Imagen Todos ellos son:

Átomos
La unidad mínima, no se desglosan y por si solas no funcionan.

Son componentes simples y reutilizables, por Ej: barra de búsqueda.

Son complejos y reutilizables, por Ej: un encabezado.

Aclaración:
Los botones son
En Alta se llaman sistemas.
átomos.
Los átomos, moléculas y organismos
juntos forman plantillas.
Resumen de los elementos de Atomic Design
● Átomos - Son elementos únicos que no se pueden desglosar o separar.

● Moléculas - Grupos de átomos que forman componentes simples.

● Organismos - Grupos de moléculas que forman secciones complejas.

● Plantillas/Templates - Grupos de organismos organizados en un espacio.

● Páginas/Sistema - Es el diseño final con el contenido real.

Lo que estaría antes que el átomo, son los elementos de los estilos, como la paleta
de color, la grilla, las tipografías, los tamaños del texto, es decir “el estilo”.

Aclaración: un texto es un átomo, el estilo de ese texto es lo que forma a ese

átomo, sus características son los protones, electrones y neutrones.
Protones electrones y neutrones

ÁTOMOS
MOLÉCULAS
ORGANISMOS
PLANTILLA
PÁGINA
Componentes
Elementos de diseño flexibles, que ayudan a crear y mantener elementos
repetidos, mientras varias las instancias para diferentes diseños y contextos.

Nos ayuda a diseñar más rápido, a ser consistentes entre pantallas, crear
instancias de los elementos, ser más eficientes en diseños complejos.

● Componente maestro - Componente hijo o Instancia - Variante.

El componente maestro puede tener componentes hijos, entonces cuando

modifiquemos a los componentes maestros, van a cambiar automáticamente
los hijos donde sea que se encuentren aplicados.
 Componentes anidados
Crear componentes en los tres niveles atómicos.

El icono solo es
un átomo.

Esto es un componente anidado

con su/s variante/s.

Toda la Barra de navegación (bar-nav) es un organismo.

El icono + el contenedor + el texto es una molécula.

 Wireframe con Patrones
Wireframe Funcional
Wireframe Digital
Atomic Design
Sistemas en
Wireframe a Mano Fidelidad Alta

User Flow
Tema: Imágenes

Cuando estoy trabajando en un problema, nunca pienso en

su belleza. Solo pienso en cómo resolver el problema. Pero
cuando lo termino, si la solución no es bella, sé que está
equivocada.

Autor/as/es: Richard Buckminster Fuller

UI Kit
Con Atomic Design crearemos los elementos de UI o interfaz de usuario.

En esta etapa quedarán definidos los elementos de nuestro UI kit.

Serán los elementos “finales” de mi prototipo.

A continuación veremos un ejemplo de cómo se presenta el UI Kit en el caso del

proyecto “MiSalud”:
Logo.

El logo está conformado por una cruz que

representa la salud con un corazón en el
centro que representa la familia (los que
más queremos), ya que para MiSalud lo más
importante es el bienestar de la familia.

Por otro lado, los colores utilizados generan

tranquilidad, confianza y profesionalismo.
Este tipo de colores son muy utilizados en el
rubro de la salud.

Algunas variantes.
Atomic design.
UI KIT. VER EN FIGMA
Colores
y Tipografía.

Como colores primario y secundario usamos el azul en En la aplicación utilizamos la tipografía Roboto, ya que es la
diferentes tonos, ya que es un color que produce un efecto recomendada para el sistema operativo Android.
calmante y emite seguridad. Transmite Inteligencia,
confianza, seguridad, serenidad, comunicación, En los títulos de la presentación utilizamos la tipografía
eficiencia, lógica, reflexión, calma. Montserrat porque transmite profesionalidad..

Para el acento utilizamos un verde agua, que sería una

Hola,
mezcla entre verdes y azules, un color muy utilizado en el
ámbito de la salud. Transmite Salud, paz, equilibrio,
restauración, conciencia, armonía.
Soy la tipografía Montserrat.
Tengo las variables y morfología
Primario Secundario Acento justas para representar los valores
de la app MiSalud.

Hola,
Soy la tipografía Roboto.
Tipografía Sans Serif que aporta
#0A4499 #9EC9FE #1ED5BE claridad visual gracias a su
neutralidad y legibilidad.
 Ejercicio
Clase 16
Ver los paso a paso en el
Anexo de la clase 16
Tarea para el Proyecto Final
Para continuar con el Proyecto Final que estamos desarrollando:
A partir de los Wireframes y las conclusiones obtenidas de las Pruebas de Usabilidad, vamos a
modificar el prototipo incorporando todos los conceptos de Atomic Design.
Para ello realizaremos las siguientes tareas:
● Crearemos átomos, moléculas y organismos.
● Luego crearemos componentes con dichos elementos.
● Crearemos componentes hijos o instancias de los componentes maestros.
● Luego los incorporaremos a las plantillas (es decir formaremos las pantallas con ellos).
● Crearemos variantes de los elementos para los casos que sea necesario.
Aclaración: No se desesperen, el incorporar los elementos de atomic design no lleva solo dos días de
trabajo, sino un poquito de trabajo todos los días hasta lograr todas las pantallas del Happy Path.
Recomiendo que en esta etapa diseñen lento y con cuidado ya que estos serán los elementos
definitivos de la app y deben funcionar correctamente.
Ejemplo de entrega
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.

Todo en el Aula Virtual.

Muchas gracias por tu atención.
Nos vemos pronto
 Pruebas de usabilidad

La prueba de usabilidad por parte del usuario es una técnica usada en el diseño de interacciones
centrado en el usuario para evaluar un producto mediante pruebas con usuarios reales.
Esto puede ser visto como una práctica de usabilidad irreemplazable, dado que entrega información
directa de cómo los usuarios reales utilizan el sistema.

Definición
La Norma ISO 9241-11 define usabilidad como “el grado en que un producto puede ser utilizado por
usuarios específicos para lograr los objetivos específicos con efectividad, eficiencia y satisfacción en
un contexto de uso”.

¿En qué consisten estas pruebas?

Las pruebas de usabilidad consisten en seleccionar a un grupo de usuarios y solicitarles que lleven a
cabo las tareas para las cuales fue diseñado el sistema, en tanto el equipo de diseño, desarrollo y
otros involucrados toman nota de la interacción, particularmente de los errores y dificultades con las
que se encuentran los usuarios.
No es necesario que se trate de una aplicación completamente terminada, pudiendo tratarse de un
prototipo.
¿Para qué sirven?
● Validar si los usuarios logran realizar tareas sobre un prototipo o sistema.
● Detectar problemas de usabilidad (qué tan fácil es el uso de una determinada interfaz).

¿Para qué no sirven?

● Definir cuál es la mejor versión de nuestro sistema (Test A/B).
● Definir con certeza los motivos de mal funcionamiento del desarrollo.
● Detectar errores en nuestro sistema.

Test A/B: como el propio término indica, se comparan dos versiones (A y B), que son idénticas salvo
por una variación que puede afectar al comportamiento del usuario. Por ejemplo, en una página web de
comercio electrónico, el proceso de compra es normalmente

un buen candidato para realizar un test A/B, dado que, incluso mejoras marginales en la tasa de
abandono, pueden implicar incrementos significativos en las ventas.
¿Cuándo llevarlas a cabo?
● Cuanto más temprano mejor: como toda evaluación, cuanto más esperamos para su
realización, más costoso resultará la reparación de los errores de diseño descubiertos. Es
importante destacar que las pruebas de usabilidad pueden realizarse durante todo el proceso de
elaboración de un producto.
● Se puede realizar varias pruebas de usabilidad: se puede y se deberían realizar varias
pruebas de usabilidad sobre un mismo producto a medida que se realizan cambios en el
mismo para así poder mejorarlo continuamente.

Tipos de prueba
Pruebas de usabilidad remotas

Pruebas de usabilidad presenciales

Pruebas de usabilidad presenciales en contexto

de uso

¿Cuántos usuarios necesitamos?

Una investigación (Virzi, 1992 y Nielsen Landauer, 1993) muestra que 5 usuarios es suficiente para
exponer el 80% de los problemas de usabilidad.
La verdad es que el número real de usuarios necesarios depende de la complejidad de la aplicación
dada y de sus objetivos de usabilidad.
El aumento de los participantes en un prueba de usabilidad, da lugar a un aumento de los costos, la
planificación, la gestión de los participantes y el análisis de datos.
Pero como pauta general, con un presupuesto chico, 5 es un buen número para empezar.

¿Qué es lo mínimo que debemos tener presente al realizar las pruebas?

Antes:

● Definir el objetivo de la prueba

● Escribir el guión de la prueba: cuántas tareas y cómo se abordarán.
● Usuarios: cantidad, quiénes, cómo los obtengo, cómo los contacto.
● Prototipo: sitio web, app.
● Roles: moderador, observador, usuario.
● Tabla de evaluación: qué y cómo evaluaré cada tarea. Durante:
● Locación: remoto, presencial (en contexto de uso o no).
● Registro: audio, video, fotografías, apuntes.
● Evaluación: qué y cómo evaluaré cada tarea. Después:
 ● Cómo ordenar y priorizar los hallazgos.
● Presentación de resultados.
● Aplicación de mejoras.

Pasos para realizar las pruebas de usabilidad

1) Formular los objetivos:

● Los objetivos nos permiten evidenciar cuáles son los propósitos que esperamos cumplir
con una determinada prueba.
● Es la primera actividad que debemos realizar. Con esto buscamos saber cuáles son los flujos
y tareas que deben ser puestas a prueba.
● Con los objetivos definidos podemos definir escenarios, tareas y criterios de
evaluación.

2) Elegir a los usuarios:

● La muestra mínima es una definición que está vinculada a muchos factores
(presupuesto, tiempo, espacio, capacidad de análisis).
● Podemos seguir la recomendación de realizar un test con solo 5 personas, lo que nos
entregaría el 80% de los errores de nuestro prototipo.

3) Escribir el guión de la prueba:

● Todo proceso de evaluación debe contemplar un guión o pauta que ordene qué se evalúa y en
qué orden.
● Esto nos permite estandarizar nuestra prueba de usabilidad y asegurar que el orden y las
instrucciones que son entregadas a los participantes sean las mismas, evitando posibles sesgos.
● Elementos a considerar:
○ Introducción y firma de consentimiento informado
○ (esto último, recomendado en un contexto de investigación de
mercado/científica).
○ Preguntas previas.
○ Tareas y escenario hipotético.
○ Preguntas posteriores.
 ○ Cierre y agradecimiento.

Introducción:

Comenzar con un agradecimiento.

Introducir a lo que serán las pruebas de usabilidad.

Es el momento para hacer las aclaraciones necesarias (grabación de la conversación, dudas, etc.).
Ejemplo para la app Buscador de Psicólogo: “Mi nombre es Irina y estamos haciendo el diseño para
una aplicación. Te agradecemos por participar. Te solicito permiso para grabar tu interacción con el
sistema.”
Importante que diga en voz alta lo que vaya haciendo/pensando. Ejemplo: “A medida que vayas
avanzando, te pedimos que vayas relatando lo que vayas haciendo y pensando.” Indicarle que no hay
respuestas buenas o malas, correctas o incorrectas.

Preguntas previas de validación:

El objetivo es validar que son los usuarios que necesitamos (user personas).

Ejemplo: “Decime por favor tu nombre y edad. Comentame si podrías actualmente afrontar una terapia
y si alguna vez fuiste a terapia.”

Tareas y escenario hipotético:

Listado de tareas a realizar con un criterio claro para determinar el éxito/fracaso. Es importante tener
presente este criterio (cuál es el camino ideal o simple para completar la tarea).
Para pensar el listado de tareas podés utilizar como guía el MVP o lo que tengas diseñado hasta el
momento en tu sistema.
Ejemplo escenario hipotético: “Imaginate que terminás con tu pareja, te sentís triste y pensás que
tendrías que hablar de tus problemas con un profesional por lo que necesitas encontrar un terapeuta,
y encontrás en la Play Store una app que te puede ayudar.”

Preguntas posteriores:
Despejamos dudas nuestras o dudas del usuario que participó en la prueba.

Hacemos preguntas en cuanto a la satisfacción del usuario. Para esto podemos enviarle un formulario
de Google para que responda a nuestras preguntas ahí. Ejemplo: métricas de satisfacción.

Cierre y agradecimiento:

Agradecemos y se le pregunta si lo podemos volver a contactar en caso de necesitarlo.

4) Evaluar las tareas realizadas:

● La evaluación de las tareas asignadas a los usuarios deben considerar una tabla con criterios
específicos de evaluación con una rúbrica clara y establecida según los criterios de usabilidad
definidos al momento de diseñar la app.
● La tabla de evaluación contempla los criterios necesarios para dar por lograda o no lograda
una tarea y sus subtareas.

5) Análisis de
resultados:
● Generar un
informe con los
resultados de las
pruebas.
● Con toda la
información
recolectada
lo que
debemos
hacer es analizar y sintetizar para así obtener cuales son los problemas de diseño y qué se
puede hacer para mejorarlos y obtener un mejor resultado.
Roles
● Moderador: un miembro activo de nuestro equipo. Debe hacer sentir cómodos a los
participantes. Poner a grabar luego de que el usuario acepte. Asegurar la validez del estudio.
 ● Usuario: alguien que nunca haya escuchado hablar de nuestro proyecto (neutral).
● Observador: un miembro pasivo de nuestro equipo. Asistente del moderador. Debe registrar
problemas que enfrentan los participantes en el test, éxito/fracaso de cada tarea, cantidad de
pasos que demora en realizar cada tarea y tiempo de demora en cada una. Puede registrar
reacciones u otros comentarios realizados durante la prueba. Al finalizar, comparte sus notas
con el equipo.

Durante la ejecución
● Antes de comenzar, permita despejar las dudas sobre la prueba.
● Entregarle el dispositivo mediante el cual ejecutará la prueba o bien el link.
● Indicarle a la persona que deberá expresar verbalmente cada una de sus acciones y
pensamientos, mientras utiliza la interfaz.
● No decirle al usuario como continuar o que tocar cuando cometa errores.
● Dejar fluir la interacción con el sistema.
● No agregar información o indicios, más allá de lo propuesto en el guión.
● Prestar atención al detalle: reacciones verbales o no, comentarios, preguntas realizadas,
etc.

Ejercicio Clase 14
Escribir una introducción y un escenario hipotético para tus pruebas de usabilidad.

Después de las pruebas

● Analizar los resultados
● Setear prioridades en relación a la mejoras surgidas luego del análisis
● Iterar el diseño implementando las mejoras
● Elaborar un informe que contenga los principales hallazgos, conclusiones e incluso citas
textuales que permitan entender la experiencia de los usuarios.
● Recordar siempre: “El diseñador no es el usuario. El usuario no es el diseñador.”
 Proyecto Final

TAREA PARA EL PROYECTO FINAL

Para continuar con el Proyecto Final que estamos desarrollando:

Realizar 5 Pruebas de Usabilidad con usuarios que se ajusten al perfil de tu proyecto (User personas).
Crear tres cuadros con los datos cuantitativos de las métricas de eficiencia, eficacia y satisfacción (para
la métrica de satisfacción usaremos Google form para crear un formulario con las preguntas, y
finalizadas las pruebas se las enviaremos a los usuarios.)
● Escenario Hipotético.
● Listado de tareas, Preguntas (para antes y después de las pruebas) Intro. y Cierre.
● Planillas de registro (usar una por usuario para tomar notas):
○ Nombre del usuario.
○ Criterio de éxito de la tarea que se puede verificar/observar. Ej: Reservar una sesión.
○ ¿Pudo realizar la tarea con éxito? Responder: 1: Sí / 0: No
○ ¿Cuántos pasos le tomó realizar la tarea? ¿Cuánto tiempo tardó?
○ Registro de problemas detectados. Observaciones.
● Informe de conclusiones (uno sobre todas las pruebas):
○ Qué funcionó, Qué no funcionó y Recomendaciones generales.

Atomic Design

¿Qué es un sistema de diseño?

El diseño web actualmente está siendo reemplazado por los sistemas de diseño, compuestos de una
serie de elementos que no importa si son utilizados en una app, web o la interfaz que se requiera, ya
que son adaptables.
Para optimizar tiempos los desarrolladores y diseñadores van a crear interfaces con las mismas
reglas, sistemas y elementos para que funcionen en cualquier entorno.
Ya no se van a diseñar páginas específicas sino los elementos de la UI o Interfaz de usuario.
Atomic Design
Brad Frost en su libro “Atomic Design” introduce una metodología para crear y mantener sistemas
de diseño efectivos.
Toma de la naturaleza la estructura de:

Átomos - Moléculas - Organismos

Josh Duck es un desarrollador Web que se dedica a construir redes sociales y sitios web de alto tráfico.
Él es el creador de la tabla periódica de elementos mínimos de html que luego actualizó a mobile.
Resumen de los elementos de Atomic Design
● Átomos - Son elementos únicos que no se pueden desglosar o separar.
● Moléculas - Grupos de átomos que forman componentes simples.
● Organismos - Grupos de moléculas que forman secciones complejas.
● Plantillas/Templates - Grupos de organismos organizados en un espacio.
● Páginas/Sistema - Es el diseño final con el contenido real.
Lo que estaría antes que el átomo, son los elementos de los estilos, como la paleta de color, la grilla,
las tipografías, los tamaños del texto, es decir “el estilo”.

Aclaración: un texto es un átomo, el estilo de ese texto es lo que forma a ese átomo, sus
características son los protones, electrones y neutrones.

Componentes

Elementos de diseño flexibles, que ayudan a crear y mantener elementos repetidos, mientras varias
las instancias para diferentes diseños y contextos.
Nos ayuda a diseñar más rápido, a ser consistentes entre pantallas, crear instancias de los elementos,
ser más eficientes en diseños complejos.
Componente maestro - Componente hijo o Instancia - Variante.
El componente maestro puede tener componentes hijos, entonces cuando modifiquemos a los
componentes maestros, van a cambiar automáticamente los hijos donde sea que se encuentren
aplicados.

Componentes anidados

UI Kit
Con atomic design crearemos los elementos de UI o interfaz de usuario. Aquí
quedarán definidos los elementos de nuestro UI kit.
Serán los elementos “finales” de mi prototipo.

"Cuando estoy trabajando en un problema, nunca pienso en su belleza. Solo pienso en cómo resolver
el problema. Pero cuando lo termino, si la solución no es bella, sé que está equivocada."
Richard Buckminster Fuller.

Proyecto Final

TAREA PARA EL PROYECTO FINAL

Para continuar con el Proyecto Final que estamos desarrollando:

A partir de los Wireframes y las conclusiones obtenidas de las Pruebas de Usabilidad, vamos a
modificar el prototipo incorporando todos los conceptos de Atomic Design.
Para ello realizaremos las siguientes tareas:
● Crearemos átomos, moléculas y organismos.
● Luego crearemos componentes con dichos elementos.
● Crearemos componentes hijos o instancias de los componentes maestros.
● Luego los incorporaremos a las plantillas (es decir formaremos las pantallas con ellos).
● Crearemos variantes de los elementos para los casos que sea necesario. Aclaración: no se
desesperen, el incorporar los elementos de atomic design no lleva solo dos días de trabajo, sino un
poquito de trabajo todos los días hasta lograr todas las
pantallas del happy path. Recomiendo que en esta etapa diseñen lento y con cuidado ya que estos
serán los elementos definitivos de la app y deben funcionar correctamente.
DISEÑO UX/UI
Clase 17
Práctica Figma
Les damos la bienvenida
Vamos a comenzar a grabar la clase
 Clase 16 Clase 17 Clase 18

Atomic Design Práctica Figma Sistema de grillas

● ¿Qué es un sistema de Resolución

● La plataforma ●
diseño? Diseño modular
● Atomic Design ● Principios básicos ●
● Comunidad en Figma ● Aplicación de grillas
● Resumen de los elementos ● Tarea para el Proyecto
de Atomic Design ● Exportar e importar
Final
● Componentes archivos
● UI Kit ● Componentes y variables
● Tarea para el Proyecto ● Auto-Layout
Final ● Prototipado funcional
La plataforma
Figma es una herramienta para crear Prototipos, que también nos permite
editar gráficos vectoriales.

La misma cuenta con su versión desktop app, web app y mobile app,
aunque esta última únicamente permite visualizar y probar Prototipos pero
no trabajar en ella.
Crear archivos

1) Seleccionamos “Drafts” → “+ Design 2) Se nos abrirá una mesa de

file” o directamente “+ Design file” trabajo llamada “Drafts / Untitled”
Crear archivos - ¿Cómo volvemos al inicio?
● Desde la desktop app: ● Desde la web app:
clickeamos el ícono de “Figma” y clickeamos el ícono “Home” y se nos
seleccionamos “Back to files” cambia de pestaña.
Crear archivos - ¿Cómo volvemos al archivo?
● En “Recents” se encuentran todos los ● En “Drafts” se encuentran todos los
archivos que alguna vez abrimos, archivos que nosotros creamos o que
sean nuestros o no. duplicamos.
Mesa de trabajo

Barra de herramientas y navegación

Panel de Opciones de
capas herramientas
Mesa de trabajo
Personalizar archivos - Renombrar
Para nombrar un archivo debemos seguir
los siguientes pasos:

1. Clickeamos “Untitled”

2. Escribimos el nombre que deseamos

para nuestro archivo

3. Damos “Enter” o clickeamos sobre la

mesa de trabajo y listo.
Personalizar archivos - Páginas
Un archivo de Figma puede contener muchas páginas con diferente contenido dentro de
cada una de ellas. Por defecto, siempre que creemos un archivo, nos ubicaremos en una
página llamada “Page 1”. Podemos renombrar la página donde estamos clickeando “Page 1”

Si trabajamos de forma privada (dentro de Drafts), podemos crear infinita cantidad de

páginas. Si trabajamos de forma colaborativa (dentro de Teams), podemos crear hasta 3
páginas dentro de un archivo de forma gratuita.
Personalizar archivos - Páginas
● Para poder crear páginas nuevas, clickeamos el ícono “+” y repetimos el proceso de
renombrar. Las páginas nuevas se ubicarán debajo de nuestra página original, pero
podemos arrastrarlas para subirlas o bajarlas en el orden que deseemos.
● En el modo privado de Figma (Drafts) podemos tener infinita cantidad de páginas
dentro de nuestro archivo. Si creamos el archivo en grupo de trabajo (Teams)
podremos tener solo 3 páginas y solo 3 archivos máximo de forma gratuita.
● Dando click derecho a cada página, podemos duplicarlas, eliminarlas, copiar un
vínculo directo a dicha página y también renombrarlas.
Personalizar archivos
Principios básicos
Entre las distintas herramientas que encontramos en este editor están
aquellas para modificar textos y elementos con los que estaremos
trabajando.

Pero primero, para comenzar a prototipar necesitamos:

crear nuestros frames.
Frames
Podemos crear “frames” o “pantallas/marcos” imitando el tamaño de un
celular de dos maneras:

● Forma manual

● Forma automática
Forma manual

Clickeamos el dropdown de la Presionamos el mouse y

sección “Frame” (el numeral) y creamos nuestro frame a Cambiamos el
seleccionamos “Frame” o gusto. tamaño.
presionamos la tecla F.
Forma automática

Clickeamos el ícono de
la sección “Frame”. En
las opciones de
herramientas, elegimos
el diseño y el tamaño.
El frame se crea
automáticamente.
Frames
Duplicar
Todo lo que creemos, desde frames hasta
incluso elementos, puede duplicarse de 3
formas distintas:

● Ctrl C + Ctrl V (copiar y pegar manual)

● Seleccionar elemento, mantener ALT

presionado y arrastrar la copia

● Presionando Ctrl + D siempre que

hayamos duplicado con ALT
previamente.
Ordenar
Desde las opciones de herramienta, siempre que tengamos seleccionado un grupo de
elementos podremos ordenarlos a nuestro gusto.
Textos
Textos
Fuente (Tipografía)
Decoración
Peso

Tamaño
Sangrías
Espacio entre líneas

Listados Interletrado

Espacio entre párrafos

Grafía (mayúsculas
Posición
y minúsculas)
Contenedor

Y más opciones Alineación del texto

Más opciones
Elementos
Tamaño (píxeles)
● Clickeamos el dropdown de la
sección “Elementos”
Posición y
● Elegimos el diseño (incluso
Redondeado
podemos importar imágenes y
vectores) Fusión y
● El frame se crea automáticamente Transparencia

Color y
transparencia del
color

Borde
(grosor, estilo,
transparencia y
demás)
Comunidad
En Figma hay una sección llamada Community donde podemos encontrar
muchos archivos y Plugins útiles compartidos para que podamos usarlos en
nuestros diseños.

Veamos cómo acceder a esta sección:

Archivos
Desde la Home, clickeamos la sección “Community”. Allí podemos escribir en el buscador
para encontrar desde diseños hasta componentes, plugins y mucho más.
Archivos
Seleccionamos cualquier archivo y,
luego de la carga, podemos incluso
ver lo que contiene.

Si decidimos tenerlo en nuestro

dashboard, podemos seleccionar
Open in Figma.

Esto genera una copia de la cual

nosotros seremos los dueños.
Podremos editar todo a nuestro
gusto.
Plugins
Los plugins nos ayudan a agilizar
nuestro diseño. Podemos buscarlos
en la comunidad, seleccionar la
pestaña “Plugins” y hacer click en
Try it out para probarlos.
Plugins
Otra manera de trabajar con Plugins si ya nos encontramos en la Mesa de Trabajo de un
archivo de Figma, es seleccionar “Resources” en la barra de herramientas (o presionando
Shift+I) y buscarlos e instalarlos desde la pestaña “Plugins”
Plugins
Una vez instalados, damos click derecho a
nuestra mesa de trabajo, seleccionamos
“Plugins → Nombre de nuestro plugin” y
podemos comenzar a utilizarlo.
Plugins más usados
● Iconify: Librería de íconos

● Unsplash: Librería de imágenes

● Autoflow: Flechas que interconectan elementos automáticamente

● Figit: Librería de elementos UI

● Colorblind: Chequeo de usabilidad del color para daltónicos

● Blush: Librería de ilustraciones

● Beautiful Shadows: Creador de sombras ajustando la fuente de luz

Plugins más usados
● Mapsicle: Librería de mapas

● Blobs: Creador de figuras estilo globo

● Dot Grid: Creador de grillas punteadas

● Confetti: Multiplicador de elementos para imitar confetti

● Icon Resizer: Permite unificar criterios de tamaños de íconos y frames

contenedores

● Better logos: Librería de logos vectorizados de múltiples marcas

Archivos
Así como podemos crear un archivo nuevo, en Figma también podemos
importar un archivo que tengamos descargado.

También podemos exportar archivos en los que estuvimos trabajando y

exportar nuestros Assets.
Exportar
Para guardar un archivo Figma en nuestra
computadora personal, debemos realizar
el recorrido:

“Figma → File → Save local copy…”.

Al completar la acción, se nos pregunta

dónde queremos guardar el archivo.
Exportar Assets
Si queremos exportar algún componente o capa específica, debemos seleccionarlo e ir a
“Export” que se encuentra en las opciones de herramientas (abajo a la derecha).
Ahí podremos seleccionar el tamaño y el formato en el que deseamos exportar.
Importar

Para abrir un
archivo Figma que
tenemos en
nuestra pc, vamos
a seleccionar
“Import”, elegimos
el archivo y
esperamos la
carga. Al terminar,
tendremos el
archivo en “Drafts”
Atajos
En Figma, al igual que en muchos otros Softwares, tenemos la posibilidad
de realizar diferentes acciones a través varios atajos desde el teclado para
agilizar el proceso de diseño.

Veamos los atajos que más se utilizan:

Atajos más comunes
F: Crear frame H: Mover mesa de trabajo

R: Crear Rectángulo V: Mover/Modificar elementos

O: Crear Círculo K: Mover/Modificar elementos

escalados
L: Crear Líneas
Crtl + C: Copiar
Shift + L: Crear Flechas
Ctrl + V: Pegar
T: Crear Texto
Ctrl + D: Duplicar (previamente
P: Crear Vectores
duplicado con Alt)
C: Agregar Comentarios
Ctrl + R: Renombrar
Atajos más comunes
Ctrl + A: Aplicar auto-layout Shift + 1: Encajar todo en la pantalla

Ctrl + G: Agrupar Shift + 2: Zoom al elemento

seleccionado
Ctrl + Alt + G: Aplicar frame
Shift + 3: Cambiar de páginas
Shift + Ctrl + R: Desagrupar
Shift + R: Aplicar regla a la mesa de
+ : Acercar
trabajo
- : Alejar
Alt + Ctrl + C: Copiar propiedades

Alt + Ctrl + V: Pegar propiedades

Componentes
Una vez que comenzamos a trabajar con Atomic Design, se vuelve
necesario empezar a crear nuestros componentes padres para poder luego
trabajar en nuestras pantallas con los componentes hijos.
Componentes
Cuando tenemos nuestro elemento terminado,
podemos transformarlo en componente con:
Click derecho → Crear Componente / Ctrl + Alt + K /
Clickeando el ícono Componente (arriba en el rombo)

Un componente se verá en el panel de capas con un

rombo compuesto en violeta. Todas las copias que
hagamos de él serán sus “hijos” (imitarán todas sus
propiedades) y se representan con un rombo lineal en
violeta en el panel de capas
Componentes
Cualquier cambio que hagamos al Componente Padre lo imitarán los componentes hijos.

IMPORTANTE:
Nunca utilizar el
componente
padre en nuestro
diseño
Información útil
Si por algún motivo decidimos modificar manualmente a un componente hijo en alguna
de sus propiedades, este dejará de ligarse a su padre.
Podemos restablecer la conexión dando “Click derecho → Reset all Changes”.
Información útil
Si por algún motivo no
encontramos al
componente padre,
podemos ubicarlo a
través de cualquiera de
sus hijos haciendo:
“Click derecho →
Go to main component”.
Información útil
Otra manera de
encontrar al componente
padre si lo perdemos es ir
a:
“Assets → Local
Components” y allí nos
aparecerán todos los
componentes padres
que tenemos creados
Variantes
Nuestros componentes
pueden ser parte de una
familia con variantes.
Para crearlos, tenemos
diversas formas:
Variantes
Podemos aplicar propiedades a nuestras variantes para poder ubicarlas fácilmente.
Variantes
Creamos hijos y aplicamos las propiedades que deseemos para nuestro diseño.
 Assets

Podemos utilizar:
librería de
componentes
para ubicarlos
rápidamente.
Si tenemos
componentes
relacionados
(no variantes)
dentro de un
frame, nos
permitirá
seleccionarlos y
cambiarlos entre
ellos.
Auto-Layout
Es una herramienta muy útil que nos permite dar estructura a los distintos
componentes de manera que automáticamente el contenido se adapte al
tamaño de un contenedor o al revés. También nos permite automatizar el
espaciado entre varios elementos dentro de un contenedor.
Cómo crear un Auto-Layout
Podemos crear Auto-layouts de 2 maneras diferentes:

1. Shift + A en la selección
2. Click derecho → Add Auto-Layout

Al aplicarlo, aparece en
nuestras opciones de
herramienta todo lo que
podemos editar con nuestro
Auto-Layout
 Opciones de Herramientas
Orientación del
auto-layout
Distancia / Espaciado
entre los elementos
dentro de un Posición del contenido
auto-layout

Márgenes o “padding”
(Ahora podemos tener
márgenes negativos -
sobreponer elementos)
Incluir el marco en el
auto-layout

Cuando sobreponemos
elementos, cuál es el que
queda por encima.
Auto Layout - Paso a Paso
Seleccionamos todos los elementos que queremos que
formen parte del Auto-Layout y lo aplicamos (Shift + A)

Decidimos la alineación y el
posicionamiento de nuestros
elementos
Auto Layout - Paso a Paso
Definimos el diseño de nuestro
elemento paso a paso:

● Añadir Auto-Layout
● Distancia entre elementos
● Márgenes
● Relleno / Color
● Líneas / Grosor / Color
● Redondeo de puntas

* No es necesario que se realicen todos

los pasos y en este orden, solo los que
se necesiten para el diseño
Edición de Auto-Layouts
Con la nueva
actualización de
Figma, podemos
editar nuestro
auto-layout
directamente desde la
mesa de trabajo
Nuevas funcionalidades

Con la nueva actualización de Figma, También podemos crear márgenes negativos

podemos editar nuestro auto-layout y apilarlos a nuestro gusto
directamente desde la mesa de trabajo
Auto-Layout responsivo
Si queremos que nuestro diseño sea responsive, debemos lograr que crezca según el
contenido. Para ello utilizamos la opción “Fill Container” en lugar de “Fix” o “Hug Content” en
el elemento que debería aumentar de tamaño según el contenedor en que se encuentre.
Prototipado funcional
Una vez que tengamos listo el diseño de nuestro Prototipo con Patrones,
empezaremos a incluir las interacciones para que el mismo sea funcional.
Prototype

Seleccionamos la pantalla en la que

queremos empezar a trabajar y vamos a
las opciones de herramientas y
seleccionamos la pestaña “Prototype”.
Enlazando elementos y/o pantallas
Hacemos click sobre el elemento
o pantalla que queremos enlazar
y se mostrará un nodo como
círculo blanco.

Al seleccionarlo aparecerá una

flecha mientras arrastramos
hacia el elemento o la pantalla
que queremos que se conecte.

Se nos abrirán los detalles de

interacción.
Detalles de interacción
Entre los detalles de interacción
podremos elegir el disparador, la
acción y la animación.
Probando el Prototipo Funcional
Para probar el
Prototipo
Funcional,
hacemos click
en “Present”
que tiene el
ícono Play.

En “Options”
podemos
adaptarlo al
tamaño de la
pantalla.
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.

Todo en el Aula Virtual.

Muchas gracias por tu atención.
Nos vemos pronto
DISEÑO UX/UI
Clase 18
Grillas
Les damos la bienvenida
Vamos a comenzar a grabar la clase
 Clase 17 Clase 18 Clase 19

Práctica Figma Sistema de grillas Estándares y Guidelines

● La plataforma Leyes UX ( guías de estilo)

● Resolución ●
● Principios básicos
● Comunidad en Figma
● Diseño modular ● Guidelines de Android
● Exportar e importar ● Aplicación de grillas ● Tarea para el Proyecto
archivos ● Tarea para el Proyecto Final
● Componentes y variables Final
● Auto-Layout
● Prototipado funcional
 Diseño Centrado en el Usuario (DCU)

Analizar Diseñar Validar

Mi-Fi Visual y Contenido

Design Thinking

Empatizar Definir Idear Prototipar Evaluar

Wireframe Digital

Sistema de Grillas
¿Qué es Diseño modular?
El diseño modular es un enfoque donde se subdivide un sistema en partes
más pequeñas llamadas módulos, que pueden ser creadas
independientemente y luego utilizadas en diferentes sistemas.
Esta filosofía puede aplicarse en prácticamente todas las ramas del diseño,
aunque es adoptada especialmente en arquitectura y diseño industrial.
En diseño web, la modularidad consiste en el uso de bloques cuadrados o
rectangulares, alineados a una grilla, para presentar distintos tipos de
contenido.
Diseño Web modular
En los diseños modulares, la pantalla se divide horizontalmente en columnas de igual ancho y
verticalmente en filas de igual alto, opcionalmente con una separación (también de medida fija) entre
ellas. Cada módulo, bloque o widget de contenido tendrá un ancho equivalente a una o más columnas.
Esto tiene su origen en la aparición de los dispositivos móviles, dado que era mucho más complicado
adaptar una página web como unidad que ajustar los diferentes módulos a las dimensiones de cada
dispositivo.
Y es que con el diseño web modular los elementos del diseño cambian su ubicación, se vuelven más
pequeños o incluso desaparecen, en función del tipo de dispositivo desde el cual esté accediendo el
usuario.
Por otra parte, otra de las ventajas del diseño web modular es que posibilita un mayor dinamismo en el
diseño web, dado que los diseñadores web pueden modificar con mayor facilidad la posición de los
elementos.
Asimismo, el diseño modular, conlleva a la reutilización, lo que significa que se pueden usar de manera
consecutiva un mayor número de elementos de diseño, como pueden ser las imágenes de las páginas,
optimizando el trabajo de los diseñadores.
Tan simple como jugar con legos
¿Qué es una grilla?
Es un elemento sistémico, organizador y estructurante del espacio
gráfico.

Esto significa que la grilla, también llamada cuadrícula o retícula, es

básicamente una serie de líneas verticales y horizontales que dividen una
página en columnas, secciones y módulos, lo que permite a los
diseñadores administrar el espacio para poblarlo con diferentes contenidos.
Origen de las grillas
Históricamente las grillas están estrechamente relacionadas con el nacimiento de la
tipografía y por supuesto de la imprenta, pero desde mucho antes se utilizaban en
manuscritos para ordenar los textos y que finalmente el “usuario” pudiera leer fácilmente.

Con la revolución industrial esto fue mucho más desarrollado, ya que el proceso llevó a que
fuera necesario comunicar muchos mensajes al mismo tiempo sin hacer que estos
compitan. Actualmente su uso sigue vigente en muchas áreas del diseño, como: Diseño
gráfico editorial y en Diseño UX/UI.
¿Qué es el diseño editorial?
Se ha definido como una rama del diseño que busca la calidad en la narrativa visual en los
textos y se presenta en medios tales como periódicos, revistas, folletos, etc.

Siempre se debe tener en cuenta que la lectura sea fluida. La jerarquía es de lo más
importante, saber cómo guiar al lector dentro de la publicación

¿Qué quiero que lea primero?

¿Qué quiero que lea primero?
Tema: Grillas

El diseño editorial es el marco a través del que una historia se lee e

interpreta. Consiste tanto en la arquitectura global de la
publicación como en el tratamiento específico de la historia…

Autor/as/es: Martin Venezky

Grillas en UX/UI
Puede llegar a ser difícil imaginar una grilla en la diagramación de productos digitales, ya
que operan en múltiples dispositivos y tamaños de pantalla, pero lo cierto es que las
grillas llegan para salvar nuestros diseños del desorden y el caos, ayudando al ojo
humano a seguir un ritmo, sostener la jerarquía del contenido y le dicen a nuestro
cerebro donde esperar que se encuentren los elementos.

Crean consistencia incluso en el diseño responsivo entre dispositivos de diferentes

tamaños, contribuyendo a la proporción de los elementos en una página y que finalmente
todo siga una estructura de lectura que agrade al ojo.
Grillas
Mientras se desarrolla el proceso de prototipado debemos considerar la grilla.

La más popular actualmente está compuesta de 12 columnas (web) ya que muchos

frameworks de desarrollo web utilizan esta estructura, y porque el número 12 es fácil de
dividir en espacios más pequeños como 9, 8, 6, 4, 3, 2, 1 (Mobile)

Es importante construir una grilla bien trabajada y que pueda desenvolverse bien en
múltiples dispositivos, con el fin de facilitar que todos los sistemas y flujos conversen
entre sí, no solo en tipografía, color y forma, sino también en el invisible camino que sigue
el ojo humano en la lectura.

Si miramos un diseño y sentimos que algo está raro, es posible que sea una grilla mal
trabajada o contenidos que se ubicaron mal en la estructura definida.
La importancia de lo invisible
Es muy importante trabajar con atención el aire que se le da a los contenidos ya que este
no solo permite descansar la vista, sino que da ritmo al contenido y sostiene la jerarquía
que hayamos definido.

Prestar atención a los márgenes horizontales y a que todo en el sistema de grilla debería
tener el mismo aire y espaciado, por lo que hay que prestar atención a la estructura que
estamos construyendo.

No hay nada más incómodo y poco agradable a la vista que una acumulación de
elementos, donde no hay orden, sentido, ni espacio para respirar.
Como se puede apreciar en las imágenes, los módulos se ordenan utilizando
la Grilla: las cajas de texto y fotografías empiezan y terminan dentro de las estructuras
formadas por las columnas y calles de la misma.

Siempre dejando

libres los márgenes.

Comprender el diseño
En el diseño se utilizan elementos y espacios uniformes para fomentar la coherencia entre
plataformas, entornos y tamaños de pantalla.

Las áreas de diseño son la base de las

experiencias interactivas. Son los bloques
de construcción de un diseño y están
compuestos por elementos y
componentes que comparten una función
similar.

Las áreas de diseño también pueden

agrupar contenedores más pequeños.
1 Encabezado 2 Navegación 3 Cuerpo
Body y Menú
La región del BODY se utiliza para mostrar la
mayor parte del contenido de una aplicación.

Por lo general, contiene componentes como

listas, tarjetas, botones e imágenes.

La región del BODY utiliza valores de escala para

tres parámetros:
1. Dimensiones verticales y horizontales
2. Número de columnas
3. Márgenes.
El menú de navegación contiene componentes y
elementos de navegación, como el cajón de
navegación o el riel de navegación.
Ejemplo de Body y Menú Ayuda a los usuarios a navegar entre destinos en
una aplicación o acceder a acciones importantes.
Columnas, calles y márgenes
Las columnas nos sirven para colocar áreas
que luego pueden ser imágenes, videos o
textos según la necesidad de nuestros
elementos con los que se deba trabajar.

Esto puede ir dependiendo según nuestra

piezas a diseñar.

Vamos a ver distintas aplicaciones con

algunos ejemplos.
1 Columna 2 Calles 3 Márgenes
Columnas

En el diseño se utilizan elementos y espacios uniformes para fomentar la coherencia entre

plataformas, entornos y tamaños de pantalla.
Columnas

Las calles es el espacio entre columnas que ayuda a separar el contenido. Los anchos de las
calles son valores fijos en cada rango de punto de corte. Para adaptarse mejor a un tamaño de
pantalla dado, los anchos pueden cambiar según nuestra propuesta de diseño.
Márgenes
Los márgenes son el espacio entre el
contenido y los bordes izquierdo y derecho
de la pantalla. Los anchos de margen se
definen según el patrón de diseño.

Los márgenes nos ayudan a dar la

sensación de equilibrio visual ya que si
pegamos los elementos al borde es lo que
se suele decir que el diseño se cae, como si
estuviera saliendo de la pantalla y dificulta
la lectura a los usuarios.
Sobre las calles

En este ejemplo podemos ver como las calles son

el soporte de las columnas y las distintas áreas Veamos una distancia adecuada de las calles para
donde luego podemos ubicar los elementos con que las áreas tomen posición en el marco general.
los que vamos a trabajar.
Sobre las calles

Vemos un mal uso de las calles donde es casi de Márgenes y calles vemos que no tienen la misma
la misma medida la calle que las columnas medida y mantiene el criterio de diseño.
separando los elementos y quitándole
protagonismo a los elementos.
Grilla, Calles y Márgenes Horizontales

El planteo de la grilla en horizontal sigue los Las cuadrículas horizontales se pueden colocar para
mismos parámetros que de manera vertical adaptarse a diferentes alturas, dejando espacio para
las barras de aplicaciones u otras regiones de la
interfaz de usuario en la parte superior.
Grilla de cuadrícula

Una vez planteada la grilla general se puede hacer un sistema de retícula para contener
iconos, botones y otros elementos para mantener la coherencia visual.
Alineación de los elementos
Alineación de los elementos
Alineación de los elementos
Ejemplos de distintos tipos de maquetación y grilla
Ejemplos de distintos tipos de maquetación y grilla
Ejemplos de maquetación y grilla en APP
Ejemplos de maquetación y grilla en APP
Ejemplos de maquetación y grilla en APP
Prototipos
Prototipos
Prototipos
Creando grillas
paso a paso
Luego de crear un nuevo
frame con el tamaño del
dispositivo correcto,
agregamos una Layout grid
Cambiamos su tamaño y color
si lo deseamos
Cambiamos a Columns y
colocamos de 1 - 4 columnas
Cambiamos los valores de los
márgenes y las calles
En este paso podemos crear
un sistema de grillas, para
poder usar nuevamente la
grilla creada en próximas
pantallas.
Cuando aparece en las
opciones significa que todo
fue creado correctamente.
Tarea para el Proyecto
Para continuar con el Proyecto Final que estamos desarrollando:

Agregar al diseño de pantallas las Grillas y ordenar los elementos de cada pantalla de acuerdo a
estas, cuidando de que si ampliamos la imagen sea pixel perfect.

Para ello realizaremos las siguientes tareas:

● Elegir el sistema de grillas que necesita mi diseño, 1, 2, 3 o 4 columnas máximo.
● Márgenes de 16 dp para Android
● Mínimo de Calles de 8 dp para Android (si necesito más grande deben ser múltiplos de esa
medida).
● Medida recomendada para los elementos que pueden ser tocados por los usuarios: 48 dp
para Android
● Los elementos más pequeños deben medir como mínimo 24 dp x 24dp.
Aclaración: Recordar utilizar la Grilla de Columnas para el orden vertical y la Grilla de Cuadrícula
para el orden horizontal.
Ejemplo de entrega
UI KIT. VER EN FIGMA
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.

Todo en el Aula Virtual.

Muchas gracias por tu atención.
Nos vemos pronto
 Grillas Maquetación y
proporciones

Qué es Diseño modular

El diseño modular es un enfoque donde se subdivide un sistema en partes más pequeñas llamadas
módulos, que pueden ser creadas independientemente y luego utilizadas en diferentes sistemas.
Esta filosofía puede aplicarse en prácticamente todas las ramas del diseño, aunque es adoptada
especialmente en arquitectura y diseño industrial.
En diseño web, la modularidad consiste en el uso de bloques cuadrados o rectangulares, alineados a una
grilla, para presentar distintos tipos de contenido.
Diseño Web modular
En los diseños modulares, la pantalla se divide horizontalmente en columnas de igual ancho y
verticalmente en filas de igual alto, opcionalmente con una separación (también de medida fija) entre
ellas. Cada módulo, bloque o widget de contenido tendrá un ancho equivalente a una o más columnas.
Esto tiene su origen en la aparición de los dispositivos móviles, dado que era mucho más complicado
adaptar una página web como unidad que ajustar los diferentes módulos a las dimensiones de cada
dispositivo.
Y es que con el diseño web modular los elementos del diseño cambian su ubicación, se vuelven más
pequeños o incluso desaparecen, en función del tipo de dispositivo desde el cual esté accediendo el
usuario.
Por otra parte, otra de las ventajas del diseño web modular es que posibilita un mayor dinamismo en el
diseño web, dado que los diseñadores web pueden modificar con mayor facilidad la posición de los
elementos.

Asimismo, el diseño modular, conlleva a la reutilización, lo que significa que se pueden usar de
manera consecutiva un mayor número de elementos de diseño, como pueden ser las imágenes de las
páginas, optimizando el trabajo de los diseñadores.

Tan simple como jugar con legos:

 Qué es una grilla

Es un elemento sistémico, organizador y estructurante del espacio gráfico.

Esto significa que la grilla, también llamada cuadrícula o retícula, es básicamente una serie de líneas
verticales y horizontales que dividen una página en columnas, secciones y módulos, lo que permite a
los diseñadores administrar el espacio para poblarlo con diferentes contenidos.

Origen de las grillas

Históricamente las grillas están estrechamente relacionadas con el nacimiento de la tipografía y por
supuesto de la imprenta, pero desde mucho antes se utilizaban en manuscritos para ordenar los textos
y que finalmente el “usuario” pudiera leer fácilmente. Con la revolución industrial esto fue mucho
más desarrollado, ya que el proceso llevó a que fuera necesario comunicar muchos mensajes al mismo
tiempo sin hacer que estos compitan. Actualmente su uso sigue vigente en muchas áreas del diseño,
como: Diseño gráfico editorial y en Diseño UX/UI.

¿Qué es el diseño editorial? Se ha definido como una rama del disenõ que busca la calidad
en la narrativa visual en los textos y se presenta en medios tales como perió dicos, revistas,
folletos, etc.
Siempre se debe tener en cuenta que la lectura sea fluida. La jerarquiá es de lo más
importante, saber có mo guiar al lector dentro de la publicació n hay que cuestionar
¿Qué quiero que lea primero?
 "El diseño editorial
es el marco a través del
que una historia se
lee e interpreta. Consiste
tanto en la
arquitectura global
de la publicació n como
en el tratamiento
específico de la
historia…"
Martin Venezky.
 Grillas en UX/UI

Puede llegar a ser difícil imaginar una grilla en la diagramación de productos digitales, ya que operan
en múltiples dispositivos y tamaños de pantalla, pero lo cierto es que las grillas llegan para salvar
nuestros diseños del desorden y el caos, ayudando al ojo humano a seguir un ritmo, sostener la
jerarquía del contenido y le dicen a nuestro cerebro donde esperar que se encuentren los elementos.
Crean consistencia incluso en el diseño responsivo entre dispositivos de diferentes tamaños,
contribuyendo a la proporción de los elementos en una página y que finalmente todo siga una
estructura de lectura que agrade al ojo.

Grillas
Mientras se desarrolla el proceso de prototipado debemos considerar la grilla.

La más popular actualmente está compuesta de 12 columnas (web) ya que muchos frameworks de
desarrollo web utilizan esta estructura, y porque el número 12 es fácil de dividir en espacios más
pequeños como 9, 8, 6, 4, 3, 2, 1 (Mobile)
Es importante construir una grilla bien trabajada y que pueda desenvolverse bien en múltiples
dispositivos, con el fin de facilitar que todos los sistemas y flujos conversen entre sí, no solo en
tipografía, color y forma, sino también en el invisible camino que sigue el ojo humano en la lectura.
Si miramos un diseño y sentimos que algo está raro, es posible que sea una grilla mal trabajada o
contenidos que se ubicaron mal en la estructura definida.

La importancia de lo invisible
Es muy importante trabajar con atención el aire que se le da a los contenidos ya que este no solo
permite descansar la vista, sino que da ritmo al contenido y sostiene la jerarquía que hayamos definido.
Prestar atención a los márgenes horizontales y a que todo en el sistema de grilla debería tener el mismo
aire y espaciado, por lo que hay que prestar atención a la estructura que estamos construyendo.
No hay nada más incómodo y poco agradable a la vista que una acumulación de elementos, donde no
hay orden, sentido, ni espacio para respirar.

Comprender el diseño
En el diseño se utilizan elementos y espacios uniformes para fomentar la coherencia entre plataformas,
entornos y tamaños de pantalla.
Las áreas de diseño son la base de las experiencias interactivas. Son los bloques de construcción de un
diseño y están compuestos por elementos y componentes que comparten una función similar.
Las áreas de diseño también pueden agrupar contenedores más pequeños.

Body
y Menú
La región
del

BODY se utiliza para mostrar la mayor parte del contenido de una aplicación. Por lo general, contiene
componentes como listas, tarjetas, botones e imágenes.
La región del BODY utiliza valores de escala para tres parámetros:

1) Dimensiones verticales y horizontales

2) Número de columnas
3) Márgenes.

El menú de navegación contiene componentes y elementos de navegación, como el cajón de

navegación o el riel de navegación.
Ayuda a los usuarios a navegar entre destinos en una aplicación o acceder a acciones importantes.
Columnas, calles y márgenes
Las columnas nos sirven para colocar áreas que luego pueden ser imágenes, videos o textos según la
necesidad de nuestros elementos con los que se deba trabajar.
Esto puede ir dependiendo según nuestra piezas a diseñar. Vamos a ver
distintas aplicaciones con algunos ejemplos.

Columnas
En este ejemplo podemos ver cómo se adaptan las columnas a dos modelos de pantallas distintos.
Se intenta trabajar con coherencia el ancho de las columnas para que el usuario asocie que está dentro
de la misma identidad visual propuesta.
Calles
Las calles es el espacio entre columnas que ayuda a separar el contenido. Los anchos de las calles son
valores fijos en cada rango de punto de corte. Para adaptarse mejor a un tamaño de pantalla dado, los
anchos pueden cambiar según nuestra propuesta de diseño.
Márgenes
Los márgenes son el espacio entre el contenido y los bordes izquierdo y derecho de la pantalla. Los
anchos de margen se definen según el patrón de diseño.
Los márgenes nos ayudan a dar la sensación de equilibrio visual ya que si pegamos los elementos al
borde es lo que se suele decir que el diseño se cae, como si estuviera saliendo de la pantalla y
dificulta la lectura a los usuarios.

Sobre las calles

En este ejemplo podemos ver como las calles son el soporte de las columnas y las distintas áreas donde
luego podemos ubicar los elementos con los que vamos a trabajar.
Veamos una distancia adecuada de las calles para que las áreas tomen posición en el marco general.

Vemos un mal uso de las calles donde es casi de la misma medida la calle que las columnas separando
los elementos y quitándole protagonismo a los elementos.
Márgenes y calles vemos que no tienen la misma medida y mantiene el criterio de diseño.

Grilla, Calles y Márgenes

Horizontales

El planteo de la grilla en
horizontal sigue los mismos
parámetros que de manera
vertical

Las cuadrículas
horizontales se pueden
colocar para adaptarse a
diferentes alturas, dejando
espacio para las barras de
aplicaciones u otras regiones de
la interfaz de usuario en la parte
superior.
Grilla de cuadrícula
Una vez planteada la grilla general se puede hacer un sistema de retícula para contener iconos, botones
y otros elementos para mantener la coherencia visual.
Alineación de los elementos
Ejemplos de distintos tipos de maquetación y grilla

Ejemplos de
maquetación y grilla en APP
Prototipos
 Proyecto Final

TAREA PARA EL PROYECTO FINAL

Para continuar con el Proyecto Final que estamos desarrollando:

Agregar al diseño de pantallas las Grillas y ordenar los elementos de cada pantalla de acuerdo a estas,
cuidando de que si ampliamos la imagen sea Pixel perfect.
Para ello realizaremos las siguientes tareas:

Elegir el sistema de grillas que necesita mi diseño, 1, 2, 3 o 4 columnas máximo. Márgenes de

16 dp para Android y 18 dp para IOS.
Mínimo de altura de Calles de 8 dp para Android y 11 dp para IOS (si
necesito más grande deben ser múltiplos de esa medida).
Medida recomendada para los elementos que pueden ser tocados por los usuarios: 48 dp para
Android y 44 dp para IOS.
Los elementos más pequeños deben medir como mínimo 24 dp x 24dp.

Aclaración: Recordar utilizar la Grilla de Columnas para el orden vertical y la Grilla de

Cuadrícula para el orden horizontal.
DISEÑO UX/UI
Clase 19
Estándares y Guidelines
Les damos la bienvenida
Vamos a comenzar a grabar la clase
 Clase 18 Clase 19 Clase 20

Sistema de grillas Estándares y Guidelines Illustrator y Moodboard

Resolución ● Repaso de mapa de bits

● ● Leyes UX ( guías de
● Illustrator
● Diseño modular estilo) ● Trabajo con vectores
● Aplicación de grillas ● Guidelines de Android ● Moodboard
● Tarea para el Proyecto Final ● Tarea para el Proyecto Final ● Armado de moodboard
● Tarea para el Proyecto Final
 Diseño Centrado en el Usuario (DCU)

Analizar Diseñar Validar

Leyes UX Mi-Fi Visual y Contenido

Guidelines de diseño

Design Thinking

Empatizar Definir Idear Prototipar Evaluar

Wireframe Digital
¿Qué son las leyes UX?
Las Leyes UX son una recopilación de leyes o normas que los diseñadores
deben tener en cuenta a la hora de pensar y mejorar la experiencia de
usuario.

Están basadas en principios psicológicos y neurocientíficos; aplicar estos

conceptos en nuestros diseños nos permitirá adaptar nuestros productos a
la naturaleza y composición psicológica de las personas.
Leyes UX

● Ley de Pregnancia ● Ley de Parkinson

● Ley de Hick ● Efecto de Von Restorff
● Ley de Tesler ● Principio de Pareto
● Ley de Proximidad ● Efecto de Usabilidad Estética
● Efecto de Posición Serial ● Efecto Zeigarnik
● Ley de Fitt ● Ley de Miller
● Ley de Jakob Nielsen
Ley de Pregnancia

La ley de Pregnancia o también llamada Ley de la Buena Forma afirma que

las personas tendemos a percibir las formas más sencillas primero y que en
un impacto visual compuesto por más formas tendemos a descomponer y
reconocer las formas o figuras más simples primero.

Las personas vamos a tratar de reducir el esfuerzo de análisis de las cosas

con la intención de no gastar recursos energéticos y cognitivos. Es por eso
que daremos una interpretación sencilla a las imágenes.
Ley de Pregnancia

Ejemplo: dados cuatro puntos, veremos un cuadrado, en lugar de otros esquemas

visuales más complejos.
Ley de Pregnancia

Un ejemplo habitual en UX donde aplica esta ley suele darse en el diseño de

iconos. Donde lo óptimo es crear iconografía con las formas más sencillas posibles,
de manera que los usuarios sean capaces de reconocerla y entenderla lo más
fácilmente posible.
Ley de Hick
Cuantas más opciones haya y más complejidad se añade a un diseño, más le
costará al usuario entender qué está haciendo y escoger qué debe hacer.
A su vez cuantas menos opciones haya disponibles mejor, porque habrá
menos probabilidad de error.

Cuando en una página mostramos distintos estímulos para el usuario: no

sabrá qué decisión debe tomar y probablemente no hará nada.
Por este motivo es recomendable dividir procesos largos en distintas
etapas
Ley de Hick
Ley de Hick
Ley de Hick

Un ejemplo para visualizar esta ley es en los videojuegos. La primera vez que una
persona utilice un juego le costará mucho entender todo lo que tiene que hacer,
mientras que otra que lleve mucho tiempo jugando lo hará todo mucho más
deprisa y de forma fluida.
Ley de Tesler

También conocida como Ley de Conservación de la Complejidad, establece

que para cualquier sistema existe una cierta cantidad de complejidad que
no se puede reducir.

Siempre debemos intentar simplificar todos los elementos y funcionalidades,

como marcan los principios de usabilidad de Nielsen. Pero también debemos
ser conscientes que hay ciertas funcionalidades que son indispensables e
inmutables. No debemos intentar modificar esos mínimos que nos
garantizan la funcionalidad mínima de nuestro producto.
Ley de Tesler
Ley de Tesler
Ley de Tesler

En el proceso de reserva de Airbnb no se pueden reducir las opciones, pero se

pueden separar para ir completándolas una a una.
Ley de Tesler
Ley de Proximidad

La ley de proximidad aplicada a la experiencia de usuario (UX) se centra en la

relación entre los elementos de diseño en función de la distancia entre
ellos, por lo que cuanto más cerca estén, más relacionados parecerán.
Puedes utilizar esta ley para reunir elementos con el fin de crear un grupo
que el cerebro interpretará como una imagen completa o utilizarla para
organizar el contenido de un sitio.
Ley de Proximidad
Ley de Proximidad

Un ejemplo es la muestra de productos de una tienda online al organizar de una manera más
próxima los elementos como la valoración, la imagen de producto, el precio, el botón…
consiguen generar un componente formado por diferentes elementos próximos entre sí.
Efecto Posición Serial

El efecto de posición en serie define la tendencia de las personas a retener y

recordar mejor la información que aparece al principio y al final de una
agrupación de elementos.

Este sesgo se apoya y se produce debido a dos sesgos de la memoria, estos

son el efecto de primacía (cuándo se recuerdan los primero elementos de
una lista) y el efecto de actualidad o recencia (que es la tendencia a
recordar mejor los últimos elementos o palabras de una lista)
Efecto Posición Serial
Efecto Posición Serial
Efecto Posición Serial
Ley de Fitts

El tiempo que se requiere para llegar a un objeto es proporcional a la

distancia a la que se encuentra y su tamaño. Según esta ley, los movimientos
más rápidos hacia objetivos más pequeños dan una mayor tasa de error.

Siempre debemos tener en cuenta el tamaño, la posición y la distancia de

los elementos que queremos que nuestros usuarios cliqueen en nuestro
producto digital.
Ley de Fitts

Es imprescindible colocar las acciones importantes en lugares donde llegue nuestro

pulgar, con botones de un tamaño considerable y llamativos. La navegación debe ser fácil e
intuitiva y los formularios lo más cortos posibles.
Ley de Fitts
Ley de Parkinson

Establece que el trabajo se expande hasta que ocupa por completo el

tiempo destinado para su realización.

Lo que significa que cualquier tarea se va a demorar más en el tiempo,

cuanto más tiempo le demos al usuario para realizarla.

Por eso, es importante intentar reducir el tiempo para las tareas de los
usuarios para que tengan una mayor satisfacción y mejore el tiempo en tarea
Ley de Parkinson
Ley de Parkinson
Ley de Parkinson
Efecto Von Restorff

Este efecto conocido como el efecto de aislamiento, predice que cuando múltiples
objetos similares se encuentran presentes, el único que es diferente del resto es
el que con mucha probabilidad será recordado.

Esta ley se utiliza cuando se quiere destacar un elemento o funcionalidad por

encima de las demás, dirigiendo la atención de la persona.

Por ejemplo, si estamos comparando los diferentes planes de precios, se puede

resaltar una columna para centrar la atención sobre esa opción
Efecto Von Restorff
Efecto Von Restorff
Efecto Von Restorff
Principio de Pareto

El principio de Pareto dice que una minoría de causas produce la mayoría

de los efectos. La aplicación de este principio aconseja que la mayoría de los
esfuerzos deben enfocarse a las áreas que puedan proporcionar los
mayores beneficios a la mayoría de los usuarios.

Siempre durante los procesos iniciales de los proyectos definir de manera

totalmente clara los objetivos del producto digital para que la mayoría de los
esfuerzos vayan enfocados a la obtención de estos resultados
Principio de Pareto
Principio de Pareto

Al centrarse en el 20% de las cosas con el potencial de hacer la mayor diferencia en su uso , se
asegura de utilizar menos recursos para obtener los máximos beneficios en su estrategia.
Efecto Zeigarnik

Este efecto establece que si una actividad ha sido interrumpida, es más

probable que las personas las recuerden más que aquellas que se han
completado. El motivo de esta retención de la información podría ser la
tensión cognitiva que se genera, ya que inconscientemente nuestro cerebro
espera completar la tarea en algún momento.

Este efecto se ve potenciado si somos conscientes de que no se ha terminado

(porque estamos viendo una barra de progreso) y estamos en un punto
intermedio, es más probable que terminemos la tarea.
Efecto Zeigarnik

Una aplicación que utiliza Zeigarnik es LinkedIn: utiliza la siguiente gráfica para recordarte
constantemente que no has completado tu perfil.
Ley de Miller

La Ley de Miller como principio psicológico determina que una persona

adulta es capaz de recordar en la memoria a corto plazo un máximo de 7
elementos de manera simultánea.

Se permite igualmente una variación de + o - 2 en la cantidad de elementos,

es decir de entre 5 a 9 elementos.
Ley de Miller
Ley de Miller

Un ejemplo es con los prefijos correspondientes los números de móvil son muchos números
uno tras otros, siendo difícil recordarlos todos seguidos, la separación hace que sea más fácil
procesar y recordar el número completo. Pasando de 675789645 a 675-789-645
Ley de Jakob

Nos dice que los usuarios prefieren sitios similares a los que suelen
frecuentar o ya conocen.

Nos aconseja usar patrones en el diseño para facilitar la experiencia del

usuario.

Generar familiaridad permite definir funcionamientos para cosas específicas.

Los usuarios usamos el conocimiento que ya tenemos del pasado al
interactuar con algo nuevo.
Ley de Jakob

Un ejemplo es la forma inusual de la sección “Añadir amigos” en Snapchat que es una red
social que se caracteriza porque los mensajes que se envían a través del chat, se eliminan
automáticamente después de su lectura, a menos que los usuarios decidan guardarlos.
Para conocer más leyes UX:
[Link]
¿Qué son las Guidelines?
Las pautas de diseño (comúnmente llamadas Guidelines) son conjuntos de
recomendaciones sobre cómo aplicar los principios de diseño para brindar una
experiencia de usuario positiva. Los diseñadores utilizan estas pautas para juzgar
cómo adoptar principios como la intuición, la capacidad de aprendizaje, la eficiencia y
la consistencia para que puedan crear diseños atractivos y satisfacer y superar las
necesidades de los usuarios.
Son reglas generales para que pueda crear un trabajo que nunca frustre a los usuarios.
Pioneros de la industria como Don Norman y Jakob Nielsen identificaron áreas que los
diseñadores y desarrolladores deben considerar para diseñar productos que ofrezcan la
mejor experiencia de usuario.
Guidelines

Los psicólogos cognitivos proporcionaron las bases de muchas pautas de

diseño a través de los hallazgos de sus estudios. Aún existen otras pautas de
diseño gracias simplemente al sentido común.

Los usuarios pueden saber cuándo una página web parece demasiado
ocupada o sobrecargada en el momento en que la ven, entonces los
diseñadores también deberían poder notarlo y entender por qué.
Guidelines

Las Guidelines se dividen en varios grupos, incluidos estos:

Estilo: por ejemplo, logotipos de marca, colores.

Diseño: por ejemplo, cuadrícula o estructura de lista

Componentes de la interfaz de usuario (UI): por ejemplo, menús, botones

Texto: por ejemplo, fuente, tono, etiquetas/campos

Accesibilidad: que sea accesible para usuarios con alguna discapacidad

Patrones de diseño: por ejemplo, formularios

¿Para qué se utilizan?

Las marcas tienen Guidelines para que los diseñadores adapten los diseños para
minimizar la carga cognitiva y maximizar la legibilidad.

Microsoft, Apple y Google son ejemplos de empresas que tienen estándares ejemplares
(por ejemplo, Material Design de Google) para su uso en la personalización.

Los diseñadores también tienen que adaptarse a las consideraciones culturales de los
usuarios (por ejemplo, el uso del color y la dirección del texto).

Además, cuando diseña para dispositivos móviles , debe equilibrar la consistencia de la

marca y el uso máximo del espacio de pantalla limitado. Es por eso que los
diseñadores a menudo usan imágenes o íconos para representar información en diseños
móviles.
Consejos

En todos los casos, es mejor aplicar las pautas de diseño con cuidado,
equilibrando los datos y las perspectivas de los usuarios con las directivas de la
marca para crear diseños que los usuarios encuentren intuitivos y placenteros.

En este link podemos ver las pautas que recomienda Jakob Nielsen al
momento de diseñar una página de inicio:

[Link]
Investigar: [Link]
Tema: Guidelines

Aprende las reglas como un profesional, para que puedas

romperlas como un artista

Autor/as/es: Pablo Picasso

Tarea para el Proyecto
Para continuar con el Proyecto Final que estamos desarrollando:
De a poco ir incorporando las Guidelines o Pautas de diseño de Android = “Material Design”
para el cual estamos diseñando, cuidando de respetar la estética, valores y pilares de la
marca Android.
Para ello investigaremos:
● Qué tipo de botones usan.
● Cuántos colores permiten.
● Cómo son los iconos.
● Qué tipografía recomienda.
● Es un diseño Flat = chato o con volumen y sombras.
● Qué valores o principios inspiraron estas decisiones estéticas en sus pautas de diseño.
Realizar un breve informe.
Recuerden utilizar los elementos
que se encuentran en el:

Anexo de la Clase de Guidelines.

Ejemplo
UI Style Guide (Android)
Guía de estilos
Ejemplos de estudiantes
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.

Todo en el Aula Virtual.

Muchas gracias por tu atención.
Nos vemos pronto
DISEÑO UX/UI
Clase 20
Illustrator y Moodboard
Les damos la bienvenida
Vamos a comenzar a grabar la clase
 Clase 19 Clase 20 Clase 21

Estándares y Guidelines Illustrator y Moodboard Color en el diseño

● Leyes UX ( guías de estilo) ● Repaso de mapa de bits ● Principios básicos

● Guidelines de Android y ● Illustrator ● Psicología del color
● Esquemas y paletas de
IOS ● Trabajo con vectores
colores
● Tarea para el Proyecto Final ● Moodboard ● Herramientas
● Armado de moodboard ● Tarea para el Proyecto Final
● Tarea para el Proyecto
Final
Repaso:
● ¿Qué es un mapa de bits?
● ¿Cómo se diferencia de un gráfico vectorial?

Veremos el siguiente ejemplo

Mapa de Bits Gráfico vectorial

¿Parecen iguales cierto?

 Mapa de Bits Gráfico vectorial

Píxeles Vectores

No son iguales.
 Mapa de Bits Gráfico vectorial

Cuando ampliamos la imagen podemos notar la diferencia.

Mapa de bits vs. Gráfico vectorial
● Mapa de bits o Bitmap: es un grupo
de bits. Cada bit, la unidad mínima de
información, es cada píxel que
compone la imagen. Cada píxel es un
cuadro con información sobre su
color y la unión de muchos de estos
cuadros crea la imagen completa.
● No es escalable: alterar el tamaño de
un bitmap provoca que ésta se
“píxele”.
● Fotorrealista: pueden mostrar gran
cantidad de detalles y variaciones
sutiles en el color. Las fotografías son Mapas de Bits
Mapa de bits vs. Gráfico vectorial
● Gráfico vectorial o curvas: está formada
por la unión o superposición de
unidades básicas de información pero
en lugar de píxeles, estas unidades
básicas son vectores matemáticos, las
formas definidas por los vectores se
basan en las curvas Bézier.
● Es escalable: se puede escalar
libremente sin sacrificar la calidad.
(permanecen nítidas)
● Totalmente editables: Los objetos de
una imagen vectorial pueden constar de
Los “Logos” son Gráficos vectoriales
líneas, curvas y formas con atributos
editables como color, relleno y contorno.
Resumen
La mayoría de las imágenes digitales se pueden clasificar en: vectoriales y mapa de bits.
Las imágenes vectoriales tienen muchas ventajas como: que son escalables, es decir que
podemos aumentar o reducir su tamaño sin perder calidad/nitidez y que los archivos son
mucho más pequeños ya que requieren bastante menos información para definir la
imagen.
Las vectoriales se originan en un software. No puede escanear una imagen y guardarla
como un archivo vectorial sin utilizar un software de conversión especial.
No son adecuadas para producir imágenes fotorrealistas. Generalmente consisten en
áreas sólidas de color (o degradados), pero no pueden representar los tonos sutiles
continuos de una fotografía. Para este fin utilizaremos los mapas de bits con cuidado de
que cuenten con la resolución correcta para el uso que queremos darle.
Resolución
PPP (DPI): La resolución de una imagen es el
número de píxeles por pulgada que contiene
(1 pulgada = 2,54 centímetros).
La resolución se expresa en PPP (puntos por
pulgada en español) o DPI (dots per inch en
inglés).
Cuantos más píxeles haya por pulgada mejor
será la calidad de la imagen.
Una resolución de 300 dpi significa que la imagen
contiene 300 píxeles de ancho y 300 píxeles de
alto, por tanto, se compone de 90.000 píxeles
(300x300 ppp).
La resolución de 72 PPP se utiliza en web
Por lo general, se considera que una resolución de
300ppp para una imagen es más que suficiente
antes de la impresión.
¿Qué es Illustrator?
Adobe Illustrator es un editor de gráficos vectoriales.

Es desarrollado y comercializado por Adobe Systems, definiendo el

lenguaje gráfico contemporáneo mediante el dibujo vectorial.

Es conocido mundialmente.

Nos referiremos a este software como: Illustrator o Ai.

Illustrator
● Adobe Illustrator es la aplicación de diseño estándar del sector que te
permite plasmar tu visión creativa con formas, colores, y tipografías.

● Permite crear logotipos, iconos, dibujos, tipografías e ilustraciones

complejas para cualquier medio: impresos, en webs y apps, para vídeos y
animaciones, etc.

● Su función primordial es la creación de material gráfico-ilustrativo

altamente profesional basándose para ello en la producción de objetos
matemáticos denominados vectores.

● La extensión de sus archivos es .AI

Interfaz de Ai
Al ejecutar el programa podemos observar la interfaz de Illustrator:
Cuando arranca la aplicación, lo primero que encontramos es la pantalla de bienvenida, que nos
permite elegir entre Abrir un archivo existente o Crear un nuevo documento.
Si lo que queremos es crear un nuevo documento, podremos elegir uno de los perfiles
predefinidos según lo que queramos obtener. Estos perfiles se diferencian en valores preestablecidos
para el tamaño, el modo de color, las unidades, la orientación, la transparencia y la resolución.
En este punto, es importante definir si trabajaremos en un archivo cuya publicación será para web,
video, móvil, presentación o si será un archivo imprimible.
En cada caso, podremos definir las medidas del escritorio (píxeles, centímetros, milímetros, etc)
como también corresponde establecer un modo de color:
● CMYK (cian, magenta, amarillo y negro) son los 4 colores con cuyas mezclas aditivas se obtienen
los colores en impresión off-set o láser.
● RGB (red, green, blue) son los colores del espectro de pantalla.
Captura de pantalla del software Adobe Illustrator 2020.

Tutoriales

Perfiles
predefinidos
Archivos abiertos recientemente
Captura de pantalla del software Adobe Illustrator CS5 2010
Captura de pantalla del software Adobe Illustrator 2020
Barra de Menú
● Menú Archivo: aquí encontramos los típicos comandos, como abrir, cerrar, guardar, importar, exportar,
nuevo, etcétera. Este menú es muy similar al de cualquier otro programa, sea o no de diseño. Desde aquí
podemos crear un nuevo documento.
● Menú Edición: se encuentran los comandos que permiten copiar, cortar, pegar, deshacer y rehacer.
También se encuentran los comandos de transformación y opciones, personalización y preferencias del
programa.
● Menú Objeto: todos los elementos son llamados objetos y se crean a partir de trazados elementales. Estos
pueden editarse, cambiar sus propiedades, por ejemplo expandirse.
● Menú Texto: Para crear una línea de texto, columnas, filas, que adopte una forma o que siga un trazado.
Edición de textos, párrafos, tipografías. Utilizar letras como objetos y editar su forma.
● Menú seleccionar: Permite seleccionar y deseleccionar objetos. Todos los elementos juntos, o algunos que
comparten algún atributo.
● Menú Efecto: Encontramos posibilidades de efectos que se le pueden aplicar a los trazados. Los efectos se
muestran en el panel apariencia.
● Menú Ver: desde él podemos controlar los elementos que se muestran en pantalla. Previsualización, reglas
y cuadrículas.
● Menú Ventana: aquí podemos hacer visible u ocultar cualquier panel de herramientas, personalizar el
espacio de trabajo y organizar los documentos abiertos.
● Menú Ayuda: para acceder a la ayuda del programa y también los datos relacionados con la cuenta de
usuario y toda la documentación pertinente al programa y la versión utilizada.
Barra de herramientas
● En el costado izquierdo de la
pantalla estándar de Illustrator,
ubicamos la barra de herramientas.

Dichas herramientas están organizadas

por categorías.

También podemos acceder a las

diferentes herramientas mediante atajos
de teclado.

● Veremos todas las herramientas en

la siguiente imágen:
Distribución de Herramientas
Un elemento fundamental para empezar a utilizar Illustrator es conocer las herramientas que tu
mesa de trabajo tiene.

Las herramientas de la mesa de trabajo son: la barra de herramientas, el menú, la paleta de control,
la barra de estado y la paleta de colores.

Tenemos la barra o panel que se dividen en:

● Las herramientas de selección: como selección directa, varita mágica, lazo, borrador y mesa de
trabajo;
● Las de dibujo como: pluma, segmento de línea, rectángulo y lápiz;
● Las de texto: para agregar palabras;
● Las de pintura: como pincel, pincel de manchas, malla, cuentagotas y degradado;
● Las de reformar: como escala, rotar, anchura, reformar, transformación libre, perspectiva y
mezcla;
● Y por último herramientas como: rociar símbolo, para ingresar símbolos predeterminados,
gráfica de columnas, sector y corte, y de movimiento y zoom como mano y zoom
Pueden expandir algunas herramientas
con el fin de ver las que contiene ocultas.
Un triángulo pequeño en el lateral inferior
derecho del icono de herramienta indica la
presencia de herramientas ocultas.

Para ver información sobre una

herramienta basta con colocar el
puntero sobre ella. En la información de
herramientas que se muestra debajo del
puntero aparece el nombre de la
herramienta.
Atajos
El programa tiene una serie de atajos en el teclado
que ayudan a trabajar con más rapidez:
● A= Selección directa ● L= Lazo
● Z= Zoom
● Q= Lazo
● V= Selección
● R= Rotación ● P= Pluma
● T= Herramienta de texto ● B= Pincel
● H= Mano
● Y= Varita mágica
● U= Malla ● CTRL+R= mostrar/ocultar reglas
● I= Cuentagotas ● Ctrl + Z= Deshacer
● O= Reflejar ● Ctrl + X= Cortar
● S= Escalar ● Ctrl + C= Copiar
● G= Degradado ● Ctrl + V= Pegar
● ALT + desplazar= duplicar objetos
● H= Mover
● CTRL + G= agrupar, entre otros
● J= Gráficos ● SHIFT + clic= seleccionar varios
● K= Pintura interactiva
● G= Degradado
Atajos
Pluma
● La herramienta Pluma de Illustrator, en simples palabras, es una función del
programa que te permitirá trazar líneas en la mesa de trabajo, con mucha facilidad y
precisión, fundamentales para iniciar cualquier tarea de edición.

● El tipo de trazado más sencillo que se puede dibujar con la herramienta Pluma es una
línea recta, que se crea haciendo clic con la pluma para crear dos puntos de ancla. Si
se sigue haciendo clic, se crea un trazado compuesto de segmentos rectilíneos
conectados por puntos de vértice.

● Puede crear una curva añadiendo un punto de ancla donde la curva cambie de
dirección y arrastrando las líneas de dirección que formen la curva. La longitud y la
pendiente de las líneas de dirección determinan la forma de la curva.
 Pluma

Jugá y aprendé con la pluma:

[Link]
Pluma
Las curvas son fáciles de modificar y se pueden visualizar e imprimir más rápido si se las
dibuja utilizando los menos puntos de ancla posibles. Usar demasiados puntos puede
también introducir protuberancias no deseadas en una curva. En su lugar, dibuje puntos
de ancla bien espaciados y practique la formación de curvas ajustando la longitud y
los ángulos de las líneas de dirección.
A continuación vamos a seguir los pasos para lograr una curva:
Pluma
1. Seleccione la herramienta Pluma.
2. Sitúe la herramienta Pluma donde desee que empiece la curva y mantenga pulsado el botón del ratón.
3. Aparece el primer punto de ancla y el puntero de la herramienta Pluma se convierte en una punta de flecha.
4. Arrastre para definir la inclinación del segmento curvo que está creando y suelte el botón del ratón.
5. En general, extienda la línea de dirección alrededor de un tercio de la distancia al siguiente punto de ancla que planea
dibujar. (Más adelante, puede ajustar uno o ambos lados de la línea de dirección.)
6. Mantenga pulsada la tecla Mayús para limitar la herramienta a múltiplos de 45°.
7. [Link]ón de la herramienta Pluma B. Iniciar el arrastre (con el botón del ratón presionado) C. Arrastre para extender
las líneas de dirección (ver en la imagen)
8. Sitúe la herramienta Pluma donde desea que termine el segmento curvo y, a continuación, lleve a cabo uno de los
procedimientos siguientes:
9. Para crear una curva en forma de “C”, arrastre en dirección opuesta a la línea de dirección anterior. Suelte el botón
del ratón.
10. Para crear una curva en forma de "S", arrastre en la misma dirección que la línea de dirección anterior. Suelte el
botón del ratón.
11. Para cerrar el trazado, coloque la herramienta Pluma sobre el primer punto de ancla (hueco). Si está situada
correctamente, aparecerá un pequeño círculo junto al puntero de la herramienta Pluma . Haga clic o arrastre para
cerrar el trazado. Para dejar el trazado abierto, pulse Ctrl (Windows) o Comando (Mac OS) y haga clic en cualquier
lugar lejos de todos los objetos.
Guardar y Exportar
Para guardar un archivo de Illustrator o Ai: vaya al menú Archivo y seleccione cualquiera
de los comandos de guardado: Guardar, Guardar como o Guardar una copia. Al
seleccionar un comando de guardado, se abre el cuadro de diálogo Guardar en el
ordenador o en los documentos en la nube.

Para exportar puede utilizar las opciones Exportación rápida cómo y Exportar como en los
formatos de archivo PNG, JPG...

Vaya a Archivo > Exportar > Exportación rápida como [formato de imagen].
 Ejercicio
Clase 20
Práctica de Illustrator:
Elegir un dibujo infantil básico y
calcar su figura con la pluma.
¿Qué es un Moodboard?
Moodboard o muro de inspiración o tablero de inspiración…
Consiste en un collage de imágenes, texto y muestras de objetos en una
composición.
Puede estar basado en un tema o tratarse de cualquier material escogido al
azar.
Cualquier proyecto creativo pasa por este proceso de crear un moodboard
incluso varios según la fase del proyecto en la que te encuentras.
Moodboard
El moodboard es una herramienta visual que puede ser física o digital.

No es un sencillo collage bonito, es un collage hecho con intención, con estrategia y como
síntesis de tus ideas.

No hay una sóla manera de hacer un moodboard ni existe un sólo tipo de moodboard. A lo largo
de un proyecto, puedes necesitar varios de estos visuales a medida que vayas concretizando lo
que quieres.

No son algunas imágenes bonitas, es mucho más que eso, es la expresión en una sola imagen
(collage de muchas imágenes en una sola composición) de una idea, de un concepto, de una
tendencia, de un proyecto…

Puede llegar a ser una asociación de varias ideas para llevarnos a una nueva idea o a un nuevo
concepto. Jugar con tus ideas, con estilos, con colores, con temas varios puede llevarte a una
conclusión diferente y a un nuevo concepto.
El moodboard nos permite
● Aclarar nuestras ideas
● Bajar al papel (o a la pantalla) nuestra inspiración
● Expresar nuestra creatividad
● Descubrir nuestro estilo y definir una mezcla de estilos
● Comunicar nuestras ideas

A veces, queremos explicar a alguien el proyecto que tenemos en mente pero a veces
también, necesitamos para nosotras mismas tener una hoja de ruta, tener una "foto" del
proyecto.

Crear un moodboard como herramienta nos ayudará a no perdernos ni a perder el norte

mientras avanza el proyecto.
¿Cómo hacer un Moodboard?
1. PALABRAS CLAVES Y TÍTULO - Elegí 3 palabras claves que transmitan lo que quieres sentir,
palabras que definen tu proyecto. Escribe también un título para tu moodboard: nombre del
proyecto (no utilices tus palabras clave en el título).

2. RECOPILAR IMÁGENES - Ve recopilando muchas imágenes de texturas, objetos, materiales,

personas, emociones, acciones, etc. Todos estos elementos te ayudarán a transmitir aquello que
deseas plasmar. Recopilar imágenes debe resultar muy agradable, casi mágico, intentar sentir la
inspiración. Las palabras claves te ayudarán a no perderte y centrarte en lo importante.

3. FILTRANDO, ELIGIENDO Y COMPONIENDO - En Ai irás moviendo los elementos para quedarse con
los que más te gustan, lo que más te inspira y lo que más expresa tu concepto. Cuando lo tengas
claro, podrás ir fijando las imágenes correctamente en tu moodboard. No intentes rellenar todo el
espacio, deja respirar los elementos, juega con la simetría o la asimetría, con la armonía o el caos. No
dudes en mirar muchos ejemplos pero también ten en cuenta que las características de tu proyecto
se pueden ver reflejadas en el "layout" (digamos en la estructura) de tu moodboard. Ya tenés listo el
moodboard de tu proyecto para exportar como imagen.
Tarea para el Proyecto Final
Para continuar con el Proyecto Final que estamos desarrollando:

Crear un Moodboard en Ai con imágenes que hablan solas (sin textos o narraciones) sobre el
proyecto y temática que abarca. Tener en cuenta para armarlo y seleccionar las imágenes, las tres
palabras clave que representen y guíen la estética del proyecto, (los valores y el alma del proyecto.)

Puede incluir imágenes de:

● Emociones que provoca en las personas.

● Acciones relacionadas.
● Colores que generan la sensación que ustedes quieran generar con su app.
● Texturas relacionadas a la temática.
● Elementos relacionados a la temática.
● App que utilizan como modelo o inspiración, o alguna que es como esperan que luzcan al
finalizar el curso en fidelidad alta.

Aclarar cuáles fueron las tres palabras clave fuera del moodboard.
Ejemplo de entrega:
APP DE ENCUESTAS, SEGUIMIENTO
Y GESTIÓN DE RESULTADOS

Objetivo: Ofrecer a empresas, bancos y proveedores de servicios

básicos, un medio para entrevistar a sus clientes y empleados. Además,
realizar un seguimiento de las encuestas y llevar un registro de sus
resultados. A través de esta app, buscan adquirir feedback
y mejorar sus servicios.
MOODBOARD
 Disparadores

TECNOLOGÍA
PROFESIONAL
BANCO
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.

Todo en el Aula Virtual.

Muchas gracias por tu atención.
Nos vemos pronto
 Estándares y Guidelines
Qué son las leyes UX
Las Leyes UX son una recopilación de leyes o normas que los diseñadores deben tener en cuenta a la
hora de pensar y mejorar la experiencia de usuario.
Están basadas en principios psicológicos y neurocientíficos; aplicando estos conceptos en nuestros
diseños nos permitirá adaptar nuestros productos a la naturaleza y composición psicológica de las
personas.

Leyes UX
Ley de Pregnancia
Ley de Hick
Ley de Tesler
Ley de Proximidad
Efecto de Posición Serial
Ley de Fitt
Ley de Parkinson
Efecto de Von Restorff
Principio de Pareto
Efecto de Usabilidad Estética
Efecto Zeigarnik
Ley de Miller
Ley de Jakob Nielsen
Ley de Parkinson
Para conocer más leyes de UX: [Link]

Qué son las Guidelines

Las pautas de diseño (comúnmente llamadas Guidelines) son conjuntos de recomendaciones sobre cómo
aplicar los principios de diseño para brindar una experiencia de usuario positiva. Los diseñadores utilizan
estas pautas para juzgar cómo adoptar principios como la intuición, la capacidad de aprendizaje, la
eficiencia y la consistencia para que puedan crear diseños atractivos y satisfacer y superar las
necesidades de los usuarios.
Son reglas generales para que pueda crear un trabajo que nunca frustre a los usuarios.
Pioneros de la industria como Don Norman y Jakob Nielsen identificaron áreas que los diseñadores y
desarrolladores deben considerar para diseñar productos que ofrezcan la mejor experiencia de usuario.

Guidelines
Los psicólogos cognitivos proporcionaron las bases de muchas pautas de diseño a través de los hallazgos
de sus estudios. Aún existen otras pautas de diseño gracias simplemente al sentido común.
Los usuarios pueden saber cuándo una página web parece demasiado ocupada o sobrecargada en el
momento en que la ven, entonces los diseñadores también deberían poder notarlo y entender por qué.

Las Guidelines se dividen en varios grupos, incluidos estos:

● Estilo: por ejemplo, logotipos de marca, colores.
● Diseño: por ejemplo, cuadrícula o estructura de lista
● Componentes de la interfaz de usuario (UI): por ejemplo, menús, botones
● Texto: por ejemplo, fuente, tono, etiquetas/campos
● Accesibilidad: que sea accesible para usuarios con alguna discapacidad
● Patrones de diseño: por ejemplo, formularios

Para qué se utilizan

Las marcas tienen Guidelines para que los diseñadores adapten los tableros para minimizar la carga
cognitiva y maximizar la legibilidad .
Microsoft, Apple y Google son ejemplos de empresas que tienen estándares ejemplares (por ejemplo,
Material Design de Google) para su uso en la personalización.
Los diseñadores también tienen que adaptarse a las consideraciones culturales de los usuarios (por
ejemplo, el uso del color y la dirección del texto).
Además, cuando diseña para dispositivos móviles , debe equilibrar la consistencia de la marca y el uso
máximo del espacio de pantalla limitado. Es por eso que los diseñadores a menudo usan imágenes o
íconos para representar información en diseños móviles.

Consejos
En todos los casos, es mejor aplicar las pautas de diseño con cuidado, equilibrando los datos y las
perspectivas de los usuarios con las directivas de la marca para crear diseños que los usuarios encuentren
intuitivos y placenteros.
En este link podemos ver las pautas que recomienda Jakob Nielsen al momento de diseñar una página de
inicio:
[Link]

"Aprende las reglas como un profesional, para que puedas romperlas como un artista."
Pablo Picasso.

Material Design y Human Interface

[Link]
[Link]

Android - Google - Material Design

IOS - Apple - The Human Interface
 Proyecto Final
TAREA PARA EL PROYECTO FINAL
Para continuar con el Proyecto Final que estamos desarrollando:
De a poco ir incorporando las Guidelines o Pautas de diseño del sistema operativo para el cual estamos
diseñando, cuidando de respetar la estética, valores y pilares de la marca, ya sea Android o iOS -
Material Design o Human interface.
Para ello investigaremos:
● Qué tipo de botones usan.
● Cuántos colores permiten.
● Cómo son los iconos.
● Qué tipografía recomienda.
● Es un diseño Flat=chato o con volumen y sombras.
● Qué valores o principios inspiraron estas decisiones estéticas en sus pautas de diseño.
Realizar un breve informe sobre el tipo de diseño y guidelines que están usando.
 Illustrator y Moodboard

Repaso de algunos temas.

¿Qué es un mapa de bits? y ¿Cómo se diferencia de un gráfico vectorial?

Veremos el siguiente ejemplo:

Mapa de bits o
Bitmap:
Es un grupo de bits. Cada
bit, la unidad mínima de
información, es cada píxel
que compone la imagen. Cada
píxel es un cuadro con
información sobre su color
y la unión de muchos de estos
cuadros crea la imagen
completa.
No es
escalable:
alterar el
tamaño de
un bitmap
provoca
que esta se “píxele”. Fotorrealista: pueden mostrar gran cantidad de detalles y variaciones sutiles
en el color.

Las fotografías son Mapas de

Bits

Gráfico vectorial o
curvas:
Está formada por la unión o
superposición de unidades
básicas de información pero
en lugar píxeles, estas unidades
básicas son vectores matemáticos, las formas definidas por los vectores se basan en las curvas Bézier.
Es escalable: se pueden escalar libremente sin sacrificar la calidad. (permanecen nítidas)

Totalmente editables: Los objetos de una imagen vectorial pueden constar de líneas, curvas y formas
con atributos editables como color, relleno y contorno.
Los “Logos” son Gráficos vectoriales

Comparación:
La mayoría de las imágenes digitales se pueden clasificar en: vectoriales y mapa de bits. Las
imágenes vectoriales tienen muchas ventajas como: que son escalables, es decir que podemos
aumentar o reducir su tamaño sin perder calidad/nitidez y que los archivos son mucho más pequeños
ya que requieren bastante menos información para definir la imagen. Las vectoriales se originan en un
software. No puede escanear una imagen y guardarla como un archivo vectorial sin utilizar un
software de conversión especial.
No son adecuadas para producir imágenes fotorrealistas. Generalmente consisten en áreas sólidas de
color (o degradados), pero no pueden representar los tonos sutiles continuos de una fotografía. Para
este fin utilizaremos los mapa de bits con cuidado de que cuenten con la resolución correcta para el
uso que queremos darle.

Resolución:
PPP (DPI): La resolución de una imagen es el número de píxeles por pulgada que contiene (1 pulgada
= 2,54 centímetros).
La resolución se expresa en PPP (puntos por pulgada en español) o DPI (dots per inch en inglés).
Cuantos más píxeles haya por pulgada mejor será la calidad de la imagen.

Una resolución de 300 dpi significa que la imagen contiene 300 píxeles de ancho y 300 píxeles de alto,
por tanto, se compone de 90.000 píxeles (300x300 ppp).
Por lo general, se considera que una resolución de 300 ppp para una imagen es más que suficiente antes
de la impresión.
La resolución de 72 PPP se utiliza en web

¿Qué es Illustrator?

Adobe Illustrator es un editor de gráficos vectoriales. Es desarrollado y comercializado por Adobe

Systems, definiendo el lenguaje gráfico contemporáneo mediante el dibujo vectorial. Es conocido
mundialmente.
Nos referiremos a este software como: Illustrator o Ai.

Sobre Illustrator:
● Adobe Illustrator es la aplicación de diseño estándar del
sector que te permite plasmar tu visión creativa con formas, colores, y tipografías.
● Permite crear logotipos, iconos, dibujos, tipografías e ilustraciones complejas para cualquier
medio: impresos, en webs y apps, para vídeos y animaciones, etc.
● Su función primordial es la creación de material gráfico-ilustrativo altamente
profesional basándose para ello en la producción de objetos matemáticos
 denominados vectores.
● La extensión de sus archivos es .AI

Interfaz de Ai:
Al ejecutar el programa podemos observar la interfaz de Illustrator.

Cuando arranca la aplicación, lo primero que encontramos es la pantalla de bienvenida, que nos
permite elegir entre Abrir un archivo existente o Crear un nuevo documento.
Si lo que queremos es crear un nuevo documento, podremos elegir uno de los perfiles predefinidos
según lo que queramos obtener. Estos perfiles se diferencian en valores preestablecidos para el tamaño,
el modo de color, las unidades, la orientación, la transparencia y la resolución.
En este punto, es importante definir si trabajaremos en un archivo cuya publicación será para web,
video, móvil, presentación o si será un archivo imprimible.
En cada caso, podremos definir las medidas del escritorio (píxeles, centímetros, milímetros, etc)
como también corresponde establecer un modo de color:
● CMYK (cian, magenta, amarillo y negro) son los 4 colores con cuyas mezclas aditivas
se obtienen los colores en impresión off-set o láser.
● RGB (red, green, blue) son los colores del espectro de pantalla.
Barra de Menú
● Menú Archivo: aquí encontramos los típicos comandos, como abrir, cerrar, guardar, importar,
exportar, nuevo, etcétera. Este menú es muy similar al de cualquier otro programa, sea o no
de diseño. Desde aquí podemos crear un nuevo documento.
● Menú Edición: se encuentran los comandos que permiten copiar, cortar, pegar, deshacer y
rehacer. También se encuentran los comandos de transformación y opciones,
personalización y preferencias del programa.
● Menú Objeto: todos los elementos son llamados objetos y se crean a partir de trazados
elementales. Estos pueden editarse, cambiar sus propiedades, por ejemplo expandirse.
● Menú Texto: Para crear una línea de texto, columnas, filas, que adopte una forma o que siga
un trazado. Edición de textos, párrafos, tipografías. Utilizar letras como objetos y editar su
forma.
● Menú seleccionar: Permite seleccionar y deseleccionar objetos. Todos los elementos juntos, o
algunos que comparten algún atributo.
● Menú Efecto: Encontramos posibilidades de efectos que se le pueden aplicar a los trazados.
Los efectos se muestran en el panel apariencia.
● Menú Ver: desde él podemos controlar los elementos que se muestran en pantalla.
Previsualización, reglas y cuadrículas.
● Menú Ventana: aquí podemos hacer visible u ocultar cualquier panel de herramientas,
personalizar el espacio de trabajo y organizar los documentos abiertos.
● Menú Ayuda: para acceder a la ayuda del programa y también los datos relacionados
con la cuenta de usuario y toda la documentación pertinente al programa y la versión
utilizada.
 Barra de Herramientas

En el costado izquierdo de la pantalla estándar de

Illustrator, ubicamos la barra de herramientas.
Dichas herramientas están organizadas por categorías.

También podemos acceder a las diferentes herramientas mediante atajos

de teclado. Veremos todas las herramientas en la siguiente imágen:
Distribución de Herramientas
Un elemento fundamental para empezar a utilizar Illustrator es conocer las herramientas que tu mesa
de trabajo tiene.
Las herramientas de la mesa de trabajo son: la barra de herramientas, el menú, la paleta de control, la
barra de estado y la paleta de colores.

Tenemos la barra o panel que se dividen en:

Las herramientas de selección: como selección directa, varita mágica, lazo, borrador y mesa de trabajo;
Las de dibujo como: pluma, segmento de línea, rectángulo y lápiz; Las de
texto: para agregar palabras;
Las de pintura: como pincel, pincel de manchas, malla, cuentagotas y degradado;

Las de reformar: como escala, rotar, anchura, reformar, transformación libre, perspectiva y mezcla;
Y por último herramientas como: rociar símbolo, para ingresar símbolos predeterminados, gráfica de
columnas, sector y corte, y de movimiento y zoom como mano y zoom.
Pueden expandir algunas herramientas con el fin de ver las que contiene ocultas. Un triángulo
pequeño en el lateral inferior derecho del icono de herramienta indica la presencia de herramientas
ocultas.
Para ver información sobre una herramienta basta con colocar el puntero sobre ella. En la información
de herramientas que se muestra debajo del puntero aparece el nombre de la herramienta.
Atajos
El programa tiene una serie de atajos en el teclado que ayudan a trabajar con más rapidez: A=
Selección directa
Q= Lazo
R=Rotación
T=Herramienta de texto H=
Mano
Y=Varita mágica
U=Malla I=Cuentagotas
O= Reflejar S=Escalar
G=Degradado H=Mover
J=Gráficos
K=Pintura interactiva L=Lazo
Z=Zoom
V=Selección
P=Pluma B=Pincel
CTRL+R=mostrar/ocultar reglas Ctrl +
Z=Deshacer
Ctrl + X=Cortar Ctrl +
C=Copiar Ctrl +
V=Pegar
ALT+desplazar=duplicar objetos
CTRL+G=agrupar, entre otros
SHIFT+clic=seleccionar varios
Pluma
La herramienta Pluma de Illustrator, en simples palabras, es una función del programa que te permitirá
trazar líneas en la mesa de trabajo, con mucha facilidad y precisión, fundamentales para iniciar
cualquier tarea de edición.
El tipo de trazado más sencillo que se puede dibujar con la herramienta Pluma es una línea recta, que
se crea haciendo clic con la pluma para crear dos puntos de ancla. Si se sigue haciendo clic, se crea un
trazado compuesto de segmentos rectilíneos conectados por puntos de vértice.
Puede crear una curva añadiendo un punto de ancla donde la curva cambie de dirección y arrastrando
las líneas de dirección que formen la curva. La longitud y la pendiente de las líneas de dirección
determinan la forma de la curva.
Las curvas son fáciles de modificar y se pueden visualizar e imprimir más rápido si se las dibuja
utilizando los menos puntos de ancla posibles. Usar demasiados puntos puede también introducir
protuberancias no deseadas en una curva. En su lugar, dibuje puntos de ancla bien espaciados y
practique la formación de curvas ajustando la longitud y los ángulos de las líneas de dirección.

A continuación vamos a seguir los pasos para lograr una curva:

 1) Seleccione la herramienta Pluma.
2) Sitúe la herramienta Pluma donde desee que empiece la curva y mantenga pulsado el botón
del ratón.
3) Aparece el primer punto de ancla y el puntero de la herramienta Pluma se convierte en una
punta de flecha.
4) Arrastre para definir la inclinación del segmento curvo que está creando y suelte el botón del
ratón.
5) En general, extienda la línea de dirección alrededor de un tercio de la distancia al siguiente
punto de ancla que planea dibujar. (Más adelante, puede ajustar uno o ambos lados de la
línea de dirección.)
6) Mantenga pulsada la tecla Mayús para limitar la herramienta a múltiplos de 45°.
7) [Link]ón de la herramienta Pluma B. Iniciar el arrastre (con el botón del ratón
presionado) C. Arrastre para extender las líneas de dirección (ver en la imagen)
8) Sitúe la herramienta Pluma donde desea que termine el segmento curvo y, a
continuación, lleve a cabo uno de los procedimientos siguientes:
9) Para crear una curva en forma de “C”, arrastre en dirección opuesta a la línea de dirección
anterior. Suelte el botón del ratón.
10) Para crear una curva en forma de "S", arrastre en la misma dirección que la línea de dirección
anterior. Suelte el botón del ratón.
11) Para cerrar el trazado, coloque la herramienta Pluma sobre el primer punto de ancla (hueco).
Si está situada correctamente, aparecerá un pequeño círculo junto al puntero de la herramienta
Pluma . Haga clic o arrastre para cerrar el trazado. Para dejar el trazado abierto, pulse Ctrl
(Windows) o Comando (Mac OS) y haga clic en cualquier lugar lejos de todos los objetos.

Guardar y Exportar

Para guardar un archivo de Illustrator o Ai: vaya al menú Archivo y seleccione cualquiera de los
comandos de guardado: Guardar, Guardar como o Guardar una copia. Al seleccionar un comando de
guardado, se abre el cuadro de diálogo Guardar en el ordenador o en los documentos en la nube.
Para exportar puede utilizar las opciones Exportación rápida cómo y Exportar como en los formatos de
archivo PNG, JPG...
Vaya a Archivo > Exportar > Exportación rápida como [formato de imagen].
Ejercicio Clase 20
Práctica de Illustrator: Elegir un dibujo infantil básico y calcar su figura con la pluma.

¿Qué es un Moodboard?

Moodboard o muro de inspiración o tablero de inspiración.

Consiste en un collage de imágenes, texto y muestras de objetos en una composición. Puede estar
basado en un tema o tratarse de cualquier material escogido al azar.
Cualquier proyecto creativo pasa por este proceso de crear un moodboard incluso varios según la fase
del proyecto en la que te encuentras.

El moodboard es
una herramienta
visual que puede
ser física o digital.

No es un
sencillo collage
bonito, es un
collage hecho
con intención,
con estrategia y
como síntesis de
tus ideas.
No hay una sóla
manera de hacer
un moodboard ni
existe un sólo
tipo de
moodboard. A lo largo de un proyecto, puedes necesitar varios de estos visuales a medida que vayas
concretizando lo que quieres.
No son algunas imágenes bonitas, es mucho más que eso, es la expresión en una sola imagen (collage
de muchas imágenes en una sola composición) de una idea, de un concepto, de una tendencia, de un
proyecto…
Puede llegar a ser una asociación de varias ideas para llevarnos a una nueva idea o a un nuevo
concepto. Jugar con tus ideas, con estilos, con colores, con temas varios puede llevarte a una
conclusión diferente y a un nuevo concepto.

El moodboard nos permite:

- Aclarar nuestras ideas
- Bajar al papel (o a la pantalla) nuestra inspiración
- Expresar nuestra creatividad
- Descubrir nuestro estilo y definir una mezcla de estilos
- Comunicar nuestras ideas
A veces, queremos explicar a alguien el proyecto que tenemos en mente pero a veces también,
necesitamos para nosotras mismas tener una hoja de ruta, tener una "foto" del proyecto.
Crear un moodboard como herramienta nos ayudará a no perdernos ni a perder el norte mientras avanza
el proyecto.

¿Cómo hacer un Moodboard?

1. PALABRAS CLAVES Y TÍTULO - Elegí 3 palabras claves que transmitan lo que quieres sentir,
palabras que definen tu proyecto. Escribe también un título para tu moodboard: nombre del proyecto
(no utilices tus palabras clave en el título).
2. RECOPILAR IMÁGENES - Ve recopilando muchas imágenes de texturas, objetos, materiales,
personas, emociones, acciones, etc. Todos estos elementos te ayudarán a transmitir aquello que
deseas plasmar. Recopilar imágenes debe resultar muy agradable, casi mágico, intentar sentir la
inspiración. Las palabras claves te ayudarán a no perderte y centrarte en lo importante.
3. FILTRANDO, ELIGIENDO Y COMPONIENDO - En Ai irás moviendo los elementos para
quedarte con los que más te gustan, lo que más te inspira y lo que más expresa tu concepto. Cuando
lo tengas claro, podrás ir fijando las imágenes correctamente en tu moodboard. No intentes rellenar
todo el espacio, deja respirar los elementos, juega con la simetría o la asimetría, con la armonía o el
caos. No dudes en mirar muchos ejemplos pero también ten en cuenta que las características de tu
proyecto se pueden ver reflejadas en el "layout" (digamos en la estructura) de tu moodboard. Ya tenés
listo el moodboard de tu proyecto para exportar como imagen.
 Proyecto Final

TAREA PARA EL PROYECTO FINAL

Para continuar con el Proyecto Final que estamos desarrollando:

Crear un Moodboard en Ai con imágenes que hablen solas (sin textos o narraciones) sobre el proyecto
y temática que abarca. Tener en cuenta para armarlo y seleccionar las imágenes, las tres palabras clave
que representen y guíen la estética del proyecto, (los valores y el alma del proyecto.)
Puede incluir imágenes de:
Emociones que provoca en las personas. Acciones
relacionadas.
Colores que generan la sensación que ustedes quieran generar con su app. Texturas
relacionadas a la temática.
Elementos relacionados a la temática.

App que utilizan como modelo o inspiración, o alguna que es como esperan que luzcan al finalizar el
curso en fidelidad alta.
Aclarar cuáles fueron las tres palabras clave fuera del moodboard.
DISEÑO UX/UI
Clase 21
Color en el diseño
Les damos la bienvenida
Vamos a comenzar a grabar la clase
 Clase 20 Clase 21 Clase 22

Illustrator y Moodboard Color en el diseño Tipografía

● Repaso de mapa de bits ● Principios básicos ● Tipos de tipografía

● Illustrator ● Psicología del color ● Familias tipográficas
● Trabajo con vectores ● Jerarquías tipográficas
● Esquemas y paletas de
● Moodboard ● Legibilidad
● Armado de moodboard colores ● Tarea para el Proyecto
● Tarea para el Proyecto ● Herramientas Final
Final ● Tarea para el Proyecto
Final
 Diseño Centrado en el Usuario (DCU)

Analizar Diseñar Validar

Mi-Fi Visual y Contenido

Hi-Fi Visual y Contenido

Design Thinking

Empatizar Definir Idear Prototipar Evaluar

Wireframe Digital

Atomic + Guidelines + Grillas

Color
¿Qué es el color?
El color es la impresión producida por un tono de luz en los órganos visuales, o más
exactamente, es una percepción visual que se genera en el cerebro de los humanos y
otros animales al interpretar las señales nerviosas que le envían los fotorreceptores
en la retina del ojo, que a su vez interpretan y distinguen las distintas longitudes de
onda que captan de la parte visible del espectro electromagnético.

Todo cuerpo iluminado absorbe una parte de las ondas electromagnéticas y refleja las
restantes. Las ondas reflejadas son captadas por el ojo e interpretadas en el cerebro
como distintos colores según las longitudes de onda correspondientes.
La luz blanca puede ser descompuesta en todos los colores del espectro visible.
En la naturaleza esta descomposición da lugar al arcoíris.
Tema: Color

Cada color tiene numerosos significados asociativos y

simbólicos. Por ello, el color nos ofrece un enorme vocabulario
de gran utilidad en la alfabetidad visual.

Autor/as/es: Donis A. Dondis

Definiciones de color
● Color: Sensación originada en la acción de las radiaciones cromáticas de los cuerpos o
sustancias reflejantes sobre los receptores fisiológicos y los centros cerebrales de la
visión. Según la teoría ondulatoria de la luz, percibimos las distintas longitudes de
onda como diferencias de colores.

● Color Cálido: Se refiere a las radiaciones del espectro luminoso que presentan las
máximas longitudes de onda (rojo, naranja, amarillo) que producen una reacción
subjetiva percibida como temperatura.

● Color Frío: A diferencia de los llamados cálidos, los colores fríos se sitúan en el sector
del espectro correspondiente a las longitudes de onda mínimas, identificándose en
la percepción visual con sensaciones de temperatura, opuestas a la de los colores
cálidos.
Ondas electromagnéticas visibles
Las ondas electromagnéticas existen en un gran rango de frecuencias que se conoce como
espectro electromagnético.

El espectro visible es una pequeña banda a la derecha de la región infrarroja y a la

izquierda de la ultravioleta. Esta pequeña región es la porción del espectro
electromagnético que a los humanos nos permite ver. Cuando hablamos de luz, nos
referimos al tipo de onda electromagnética que estimula a la retina de nuestros ojos. La
longitud del color rojo es la más larga del espectro visible, mientras que la violeta es la
más corta; entre el rojo y el violeta se encuentran los demás colores

Cuando todas las longitudes de onda del espectro visible llegan a nuestro ojo al mismo
tiempo, percibimos el blanco. En realidad, el blanco no es un color, sino más bien la suma
de todos los colores y el negro tampoco es un color, sino la ausencia de longitudes de
onda del espectro visible.
En 1666, al pulir unas lentes para su
telescopio, Isaac Newton empezó a
preguntarse por qué se producían franjas
de colores en los bordes de las lentes y a
pensar sobre ello.
Esta inquietud, que ya se planteaba desde la
época de Aristóteles, pero recién con Newton
hizo que fuera explicado:
¡La luz puede ser separada!

Cada color es característico de una longitud

de onda y si hacemos pasar luz blanca por
un prisma, la dispersión produce colores:
rojo, naranja, amarillo, verde, azul, índigo y La separación de la luz visible se conoce
violeta. como dispersión.
¿Cuál es la verdad sobre el color?
Cuando vamos a la primaria nos enseñan que hay colores primarios y secundarios:
● Colores Primarios: Cualquiera de las sensaciones de color de los matices
fundamentales, rojo, amarillo, azul, perceptualmente irreductibles, de los que
derivan los demás colores.
● Colores Secundarios: Aquellos colores formados a partir de la mezcla de dos
primarios.
Pero cuando estudiamos diseño nos dicen que los colores primarios son:
(RGB) Rojo · , Verde · y Azul · , y que si los sumamos nos dan Blanco.
Y que si juntamos Rojo y Verde = Amarillo ·
Rojo y Azul = Magenta ·
Azul y Verde = Cyan ·
Y que Cyan + Magenta + Amarillo = Negro (CMYK)
Síntesis de color
En la superposición de colores luz, denominada síntesis aditiva de color, el color blanco
resulta de la suma de todos los colores luz, mientras que el negro es la ausencia de luz.

En la mezcla de los colores primarios en la síntesis sustractiva de color, con tintas

pigmentos o pinturas, amarillo, cian y magenta; el blanco solo se consigue si el pigmento
o el soporte son de ese color, mientras que el negro es resultado de la superposición
completa de los colores cyan, magenta y amarillo, una mezcla que en cierta medida logra
absorber todas las longitudes de onda de la luz.

Aunque también se utiliza la tinta Negra, K, o Key para que el negro sea intenso.
El color es esencial
El color es, indiscutiblemente, uno de los recursos esenciales en la construcción de la
comunicación visual.

Esencial, como fenómeno físico que afectará inevitablemente a toda creación

perceptible por el ojo humano, que comunica y provoca una respuesta emocional de
carácter inconsciente en el observador.

Como toda manifestación comunicacional, está vinculada a un contexto social, cultural, etc.
Entender el color como fruto de la cultura y sometido a sus variaciones nos sitúa como
agentes activos en los procesos de interpretación en el marco de una sociedad.
Color y cultura
Los humanos damos significado a lo que vemos, interpretamos los estímulos visuales y los
transformamos en cosas a las que damos sentido, a la vez condicionados por un
determinado contexto cultural. También hacemos esto con los colores, damos significado
al color según cómo y dónde se presenta. Es un proceso complejo de identificación de
indicios y señales, de interpretación y decodificación. Del mismo modo que damos
significado a lo que vemos, somos capaces de utilizar el color para comunicar, señalar o
informar.

Las diferentes trayectorias culturales humanas han ido construyendo complejas estructuras
de convenciones, códigos e interpretaciones simbólicas sobre los colores. La progresiva
globalización cultural de los últimos tiempos ha borrado algunas diferencias y ha hecho
converger algunas convenciones.
La oposición verde-rojo como sistema de codificación tiene un
significado claramente implantado en nuestra sociedad y en todo el
mundo:

paso permitido o prohibido, aparato encendido o apagado, polo

positivo o negativo, aceptar o cancelar.

Si como diseñadores hacemos uso de este código socialmente

establecido, nos aseguramos una fácil interpretación a la vez que
contribuimos a consolidar y perpetuar su significación.
Al entrar en un supermercado las combinaciones de color en los productos toman
significado para nosotros, nos ayudan a localizarlos y a navegar por el supermercado.

En conjunto, se agrupan formando zonas y en detalle nos lanzan señales sobre las
calidades, sobre todo simbólicas, de cada producto.
El color y el apetito
El color es a menudo el primer elemento que las personas observan en cualquier
producto alimenticio. Por lo tanto, el color predetermina el sabor y la calidad de los
alimentos que comemos independientemente de la realidad ya que antes siquiera de que
las papilas adquieran el sentido del gusto a través del alimento, ya se han enviado señales
al cerebro para interpretar el sabor a través de los ojos.

Por esa razón las empresas de marketing utilizan la psicología del color y dedican mucho
tiempo a elegir los colores correctos al diseñar sus productos.
Los colores que reducen el apetito, son los que tienen una relativa ausencia
en la naturaleza o que se pueden asociar a alimentos en mal estado o quemados.

Azul. Aparte de los arándanos, no es fácil encontrar el azul como color natural. Muchas
dietas milagro que tienen como objetivo la pérdida de peso sugiere el uso de platos azules
para comer porque se come menos comida debido a la naturaleza del color. El uso de luces
azules en los comedores es utilizado para un menor consumo de alimentos.

Gris. Generalmente aleja a las personas de la comida debido a que lo asocian con el moho o
alimentos en mal estado en general. En realidad, muchos alimentos procesados son grises,
pero se les suele agregar color para compensar la pérdida de color que resulta de la
exposición de los alimentos a la luz, el aire y otras condiciones.

Negro. Se utiliza para hacer que el apetito de una persona disminuya. Aunque puede ser un
color elegante para vestir, a la hora de comer puede transmitir que el alimento está en mal
estado o quemado.
Colores que dan hambre: Son los que más se encuentran en la naturaleza
y que usan las industrias alimenticias y de marketing para vender alimentos

Verde. Es un color que se asocia con lo saludable. Las ensaladas están llenas de alimentos
verdes y las verduras que son tan importantes para la salud.

Naranja. Estimula el cerebro, lo que aumenta la actividad mental y a menudo provoca una
sensación de hambre. Muchos alimentos saludables son de color naranja; calabaza,
zanahorias, naranjas y calabazas, etc.

Rojo y amarillo. Al ser colores considerados cálidos, aumentan la presión arterial, la

frecuencia cardíaca y hacen que el hambre sea más frecuente. Es por eso que la mayoría de
las cadenas de comidas rápidas tienen un logo de color rojo o amarillo que usan en sus
productos. La combinación de ambos colores nos da la sensación de más hambre.

Blanco. La mayoría de los restaurantes usan platos blancos ya que hacen que la comida se
vea más fresca y apetitosa en el contraste de colores. Por otro lado, este color se asocia con
la limpieza y la pureza.
Color en los ambientes
¿Sabías además que los colores a tu alrededor pueden estar influenciando tus emociones
y tu estado de ánimo? Ciertas tonalidades pueden facilitar que nos irritemos, mientras que
otras pueden favorecer nuestra relajación. Incluso ciertos colores pueden ayudarnos
también a descansar la vista.

Hay una gama de tonalidades que están asociados a la tranquilidad y que nos transmiten
calma. Estos colores suelen ser los más recomendados para pintar las paredes de una casa
o para generar un ambiente más tranquilo.
El color azul es el color de la tranquilidad, la calma y la armonía por
excelencia. Relaja la mente y reduce los síntomas de estrés y ansiedad.
El azul claro suele estar relacionado con la sabiduría y se estudia su efecto sobre la
reducción del ritmo cardíaco. Este color nos puede producir tales sensaciones al estar
relacionado con la calma del mar o del cielo tranquilo.

Los verdes transportan a nuestra mente hacia la naturaleza, se dice que es el color más
relajante para el sistema nervioso de los seres humanos. El verde es un tranquilizante
natural e incluso se habla de un poder curativo ayudando a estabilizar las emociones. En
cambio un verde más amarillento se asocia con la enfermedad, con la envidia y con
sensaciones desagradables.

El color blanco es el color de la luz y el bienestar emocional. En la antigüedad, se utilizaba

este color para la gran mayoría de edificios puesto que les daba un efecto de soberbia y
pureza.

No se recomiendan paredes rojas, marrones o grises, ya que irritan o desmotivan.

Psicología del color
Los colores despiertan respuestas emocionales específicas en las personas.

El factor psicológico está formado por las diferentes impresiones que emanan del ambiente
creado por el color, que pueden ser:

de calma, de recogimiento, de plenitud, de alegría, opresión, violencia...

La psicología de los colores fue ampliamente estudiada por Goethe, que examinó el
efecto del color sobre los individuos:
• Blanco: puede expresar paz, soleado, feliz, activo, puro e inocente;
crea una impresión luminosa de vacío positivo y de infinito.
El blanco es el fondo universal de la comunicación gráfica.
• Negro: es el símbolo del silencio, de lo desconocido y, a veces, impuro y maligno. Confiere nobleza y
elegancia, sobre todo cuando es brillante.
• Gris: simboliza la indecisión y la ausencia de energía, expresa duda.
• Amarillo: es el color más luminoso, más cálido, y expansivo. Es el color del sol, de la luz y del oro, y como
tal es intenso y agudo. Suelen interpretarse como animados, joviales, excitantes, afectivos e impulsivos.
• Rojo: significa vitalidad, es el color de la sangre, de la pasión, de la fuerza bruta y del fuego. Color
fundamental, ligado al principio de la vida, expresa la sensualidad, la virilidad, la energía; es exultante y
agresivo.
• Azul: es el símbolo de la profundidad. Inmaterial y frío, de tranquilidad y melancolía. Oscuro: infinito.
• Violeta: es el color de la templanza, de la lucidez y de la reflexión. Es místico, melancólico y podría
representar también la introversión.
• Verde: es el color más tranquilo y sedante. Evoca la vegetación, el frescor y la naturaleza. Es el color de la
calma indiferente: no transmite alegría, tristeza o pasión.
• Marrón: es evocador del ambiente otoñal y da la impresión de gravedad y equilibrio. Es el color realista,
tal vez porque es el color de la tierra que pisamos.
Psicología del color
En esta ocasión compararemos dos de las teorías del color más reconocidas: la teoría de
Goethe, quien se dedicó a estudiar los colores desde el punto de vista de la percepción
para, así, establecer una relación entre los colores y algunos estados de ánimo.

En contraste, Lüscher dividió los colores primarios en 2 categorías: los colores heterónomos
(el amarillo y el azul que representan la luz y la oscuridad respectivamente) y los colores
autónomos (el rojo y el verde que representan el ataque-defensa del organismo).
El círculo cromático o rueda de
colores:

Es una representación ordenada y

circular de los colores de acuerdo
con su matiz o tono, en donde se
representa a los colores primarios y
sus derivados.

Su uso es compatible tanto con los

modelos Síntesis sustractiva de color,
como con los modelos Síntesis
aditiva de color.
Esquema de colores y sus combinaciones
● Esquema acromático: No existe color, solo negro, blanco y grises.
● Esquema análogo: Se toma un color y se acompañan con los contiguos.
● Esquema de choque: Combinamos un color con el tono que está a la derecha o a la
izquierda de su complemento en el círculo cromático.
● Esquema complementario: Utilizamos dos colores opuestos en el círculo cromático.
● Esquema monocromático: Un color combinado con sus tintes y matices.
● Esquema neutral: Se utiliza un color con el agregado del negro o de su
complementario.
● Esquema complementario dividido: Consta de un color y los dos análogos de su
complementario.
● Esquema primario: Colores primarios saturados.
● Esquema secundario: Colores secundarios.
● Esquema triada terciario: Se utilizan colores equidistantes uno del otro en el círculo
cromático.
Paleta de colores
La paleta de colores o paleta cromática son una selección de colores que aplicados en
una misma imagen, gustan a la vista. Normalmente la define el diseñador o director de
arte de un proyecto. Se utiliza para el diseño de una pieza gráfica, la decoración de un
ambiente o la creación de una obra artística.

Una paleta de colores contiene un conjunto de tonalidades que se hablan entre sí. Cada
una de estas tiene uno o varios significados y tienen la capacidad de evocar
emociones en las personas.

Es una de las herramientas de diseño gráfico más elementales, ya que se utiliza para crear
combinaciones de colores que trabajen bien juntos.
Adobe Color
 Ejercicio
Clase 21
1. Elegir un personaje muy famoso
2. Obtener la paleta
3. Que tus compañeros/as adivinen a qué
personaje pertenecen.
4. Luego deberán debatir:
¿Por qué creen que sus diseñadores
eligieron esa paleta para ese personaje?
(Tener en cuenta la personalidad del
personaje, sus intenciones, ambiciones,
poderes etc.)
Tarea para el Proyecto final
Para continuar con el Proyecto Final que estamos desarrollando:
Vamos a utilizar todo lo visto en clase para definir una Paleta de 3 colores:
1 principal, 1 secundario y 1 acento como lo indica Android.
Asegurate que los colores o el color que elijas exprese el alma del proyecto que estás diseñando.
Para ello realizaremos las siguientes tareas:
● Investigar sobre qué colores simbolizan las 3 palabras clave de mi proyecto.
● Crear la paleta con Adobe color CC.
● Realizar un breve informe sobre el analisis de color y allí justificar porque fueron elegidos.
● Luego los incorporaremos a los elementos de las pantallas.
● En la mayoría de los casos mantendremos el blanco como fondo principal de pantallas
(aunque no forma parte de la paleta de 3 colores).
Ejemplos de entrega
 Moodboard

Tiempo

Calma

Profesional
 Palabras guía:
PALETA DE COLORES Tiempo - Calma - Profesional
Primario - Secundario - Acento

#777DF2 #ACB0F2 #F25E5E

Elegí el color principal teniendo en mente a la user persona “Pilar” y la temática “Psicología”.
El morado es un color que transmite sensibilidad, delicadeza, elegancia, lujo o espiritualidad.
El color morado se asocia a la elegancia y la sensibilidad.
Es muy utilizado en publicidad para remarcar la distinción o el lujo.
El color secundario lila acompaña al principal.

El color de Acento en su mayoría compuesto del color rojo

pero con mezcla de blanco y un poco de amarillo,
que lo convierten en más femenino y delicado.
Se eligió por su intensidad, su capacidad de llamar la
atención y destacar, para que sirva de guía para el usuario.
EVOLUCIÓN DEL PROTOTIPO
5) FIDELIDAD ALTA
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.

Todo en el Aula Virtual.

Muchas gracias por tu atención.
Nos vemos pronto
DISEÑO UX/UI
Clase 22
Tipografía
Les damos la bienvenida
Vamos a comenzar a grabar la clase
 Clase 21 Clase 22 Clase 23

Color en el diseño Tipografía UI KIT y Alta fidelidad

● Principios básicos ● Tipos de tipografía ● ¿Qué es un UI Kit?

● Psicología del color ● Familias tipográficas ● Elementos que lo
Esquemas y paletas de componen
● ● Jerarquías tipográficas
colores ● Librerías en Figma
● Legibilidad ● ¿Qué es un Sistema de
● Herramientas
● Tarea para el Proyecto Diseño?
● Tarea para el Proyecto
Final ● Alta Fidelidad
Final
● Tarea para el Proyecto
Final
 Diseño Centrado en el Usuario (DCU)

Analizar Diseñar Validar

Mi-Fi Visual y Contenido

Hi-Fi Visual y Contenido

Design Thinking

Empatizar Definir Idear Prototipar Evaluar

Wireframe Digital

Atomic + Guidelines + Grillas

Color + Tipografía
¿Qué es tipografía?
Podemos definir la tipografía como “el arte de diseñar las letras”. Se
denomina así a la disciplina que estudia la representación gráfica de las
letras para que el lenguaje escrito sea efectivo.
Es el estilo o la apariencia del texto. Se refiere al arte de trabajar con él.
La tipografía está donde quiera que se mire; en libros, sitios web, letreros y
avisos, en señales de tráfico y empaques de productos.
La palabra tipografía proviene de dos términos griegos: “typos” que
significa golpe, marca o forma, y “graphia” que significa cualidad de
escribir.
Imprenta: tipos móviles
Morfología de las tipografías

Serif Sans-Serif

Interletraje
Interlineado Caja
Morfología de las tipografías

La anatomía tipográfica se refiere a las características determinadas de una fuente.

Estudiando sus características nos permite dividirlas en 4 grupos:
Romanas
Con serifa (romanas) cuentan con remates o terminales, que son esos pequeños adornos
ubicados en los extremos de los trazos de los caracteres.

Las tipografías Serif suelen ser concebidas como serias y tradicionales. Cuentan con un aire
académico o institucional. Son tipografías idóneas para párrafos o textos largos, ya que los
pequeños terminales o serifas contribuyen a que se cree una línea imaginaria bajo el texto
que facilita mucho la lectura a nuestro ojo.

Algunos ejemplos de fuentes tipográficas Serif son: Times New Roman, Garamond o Book
Antigua.

Y recuerda, dentro de las tipografías con serifa, podemos incluir también las tipografías
egipcias o Slab Serif.
Palo seco
Sin serifa (palo seco) se caracterizan por la ausencia de remates y terminales. Se diseñan
sin serifas. Sus trazos apenas presentan contrastes.

Las tipografías Sans Serif suelen asociarse con la tipografía comercial, ya que ofrecen un
resultado muy bueno para la impresión de titulares o poco texto, en carteles y publicidad.
Este estilo de fuente evoca modernidad, seguridad, neutralidad y minimalismo.

Es muy recurrida también para textos en pantalla y textos en tamaños pequeños. Gracias
precisamente a la ausencia de terminales y remates, esta tipografía puede resultar más
legible en textos de pequeño tamaño que su hermana mayor.

Algunos ejemplos de tipografías San Serif son: Futura, Helvética, Arial, Gotham o Avenir.
Manuscritas
Cursivas (manuscritas) también se denominan como cursivas o script. Son tipografías que
representan o imitan la caligrafía a mano, por lo que en ocasiones también se les puede
denominar como tipografías caligráficas.

Generalmente este tipo de tipografías cuentan con una tendencia itálica o cursiva claro.
Las letras se ligan entre sí y encontramos curvas más pronunciadas que en las tipografías
con serifa o de palo seco.

Cómo se relacionan con la caligrafía, cuentan con una personalidad algo más humana y
cercana. Algunas tipografías cursivas podrían ser Beckham Script o Parisienne.
Exposición
Decorativas (exposición) también se les denomina como tipografías display. Están
consideradas como tipografías divertidas, que pueden transmitir una gran variedad de
sensaciones. Cuentan con un carácter y personalidad muy fuerte.
Desde el punto de vista de la psicología tipográfica son transgresoras y contribuyen a
llamar más la atención.
Dentro de este conjunto de decorativas entrarían las tipografías cuyas características no
se ajustan a los tres conjuntos anteriores. Suelen crearse para fines específicos donde la
legibilidad no se tiene demasiado en cuenta. Como por ejemplo un logo o un título. Son
muy expresivas y suelen contar con atributos más temáticos.
Eso sí, definitivamente no son tipografías idóneas para párrafos de texto.
Pueden llegar a transmitir falta de cuidado o desinterés en el diseño.
Tipografía
Resulta imposible no tener un contacto directo constante con las tipografías. Nos
acompañan en todo momento, ya que forman parte de nuestra rutina diaria. Hablamos por
tanto de un elemento visual casi omnipresente del que podemos hacer uso desde el
diseño gráfico.

Además, las tipografías son una herramienta clave a la hora de diseñar la identidad de
marca o branding de un proyecto.
Junto con el logo, la paleta de colores y otros recursos, forman parte del branding visual
que diseñamos estratégicamente para reforzar el mensaje que queremos enviar desde la
empresa.
Familias tipográficas
Una familia tipográfica es un conjunto de caracteres, alfabéticos o no, que cuentan con
unas características comunes en su estructura y en su estilo. Esto nos permite identificarlas
como una misma familia.

Los miembros que integran una misma familia tipográfica se parecen entre sí, pero
cuentan con algunos rasgos propios como variaciones de peso, inclinación y proporción.
Esto lo voy a aclarar con más detalle en el siguiente punto.

Existen multitud de familias tipográficas. Originalmente surgieron con la creación de la

imprenta pero otras han ido apareciendo como resultado de la digitalización de todo el
proceso de diseño de tipografías.

Por ejemplo, las familias Gotham, Futura o Swift.

Variables tipográficas
Las variables tipográficas son las opciones que podemos encontrar dentro de una misma familia
tipográfica. Son modificaciones de la morfología de la tipografía, es decir de su forma. Actúan sobre el
grosor (tono) del trazo, el ancho o proporción del carácter y la inclinación del eje vertical de los caracteres
de una misma familia tipográfica.
Gracias a estas variables tipográficas vamos a poder establecer una jerarquía visual en nuestras
composiciones. También nos ayudan a satisfacer las necesidades que nos pueden surgir a la hora de
comunicar visualmente con tipografías.
Variable de peso: Denominada también como variable de grosor o tono, afecta directamente al trazo de
los caracteres. Se modifica la relación entre el ancho del trazo y los espacios vacíos dentro de cada signo
tipográfico. La tipografía bold o negrita presenta un grosor de trazo mayor, mientras que la tipografía
light presenta un grosor del trazo menor.
Variable de inclinación: modifica el eje de los caracteres. Hace referencia al ángulo de inclinación de la
tipografía. Dentro de la variable tipográfica de inclinación vamos a poder reconocer dos tipos. Las oblicuas
y las itálicas.
Legibilidad
La legibilidad es la facilidad con que se puede leer y comprender un texto.

En un sentido más amplio es la aptitud de un texto de ser leído fácil y cómodamente, y

esta aptitud hace referencia a elementos tipográficos, de presentación del escrito en la
página, y también al estilo, a la claridad de la exposición, a la manera de escribir, al
lenguaje.

La legibilidad debe ser uno de los temas más importantes cuando se trata de un
proyecto de diseño. Si un texto no se puede leer, entonces su mensaje no va a llegar a
nadie. Un buen diseño se muestra en una forma que es comprensible; la legibilidad
conforma una gran parte de la comprensión.
Tema: Tipografía

No puedes ser un buen tipógrafo sino eres un buen lector. La

tipografía es leer.

Autor/as/es: Anónimo
Importancia de las jerarquías
La jerarquía tipográfica presenta las letras de manera que las palabras más importantes
se muestran causando un mayor impacto, por lo que los usuarios pueden escanear el
texto para obtener información clave. Sin jerarquía tipográfica, cada letra, cada palabra y
cada frase en un diseño se vería igual.
Jerarquías
Nivel Primario- El nivel primario de la tipografía comprende letras de gran tamaño. Estas abarcan
titulares y cubiertas, lo cual también es conocido como «muebles» que atraen a los lectores en el
diseño. Esta tipografía es la más grande (a menos que se utilice arte tipográfico).

Nivel Secundario- El nivel secundario de la tipografía comprende la información que tiende a ser
analizada y que ayuda a los lectores a permanecer con el diseño. Esto incluye elementos tales como
subtítulos, citas, infografías y otros pequeños bloques de texto que añaden información al nivel
primario. El diseño de estos bloques textuales está en el lado grande, pero por lo general, son mucho
más pequeños que las letras en el nivel primario de la tipografía.

Nivel Terciario- El nivel terciario de la tipografía comprende el texto principal del diseño. A menudo
es una de las tipografías más pequeñas, pero debe ser lo suficientemente grande como para ser
completamente legible por todos los usuarios potenciales. El tipo de letra debe ser simple y
consistente en el diseño, espaciamiento y el uso general.

Otros niveles- Los otros niveles de la tipografía incluyen efectos que se aplican a escribir en el nivel
terciario para pequeñas áreas de impacto. Efectos tales como negrita, cursiva, subrayado y color
pueden llamar la atención sobre las áreas específicas del texto principal.
Jerarquías visuales y niveles de Lectura
Jerarquías visuales y niveles de Lectura
En el terreno de la Comunicación visual el principal
componente es la imagen, la cual tiene dos niveles
de aprehensión: el figurativo y el significativo.

El primero se relaciona con lo que la imagen

denota, aquello que se puede ver a simple vista,
que está explícito en el discurso visual.
El segundo se vincula con lo que la imagen
connota, está en el área de los significados.
Dichos niveles, figurativo-significativo se perciben
como una unidad comunicacional.

Toda imagen será interpretada y se revelará por

conocimiento del sistema de signos empleado, como
tal es un lenguaje que deberá ser aprendido para
promover una fluida manipulación y transmisión de
acciones y pensamientos proyectuales.

En el proceso de diseño, es imprescindible considerar

las características del receptor del mensaje, tanto en
lo que a las imágenes refiere como al texto.
Connotación tipográfica

Contrato serio

Relájate y disfruta

Músculo, autos y cerveza

Frivolidad Ligera

Siglo 21

La elección tipográfica está en contradicción con su significado.

Tipografía como imagen
La tipografía puede comportarse como una imagen gracias a los atributos formales que
definen su personalidad gráfica.

Separados del componente informativo del lenguaje, los tipos quedan liberados de su
función lingüística, convirtiéndose en una representación visual de sí mismos con un
significado connotativo asociado.
Tipografía como imagen

Valor estético de la tipografía.

Tipografía como imagen

Tipografía Helvetica creada

en 1957, sus aspectos
morfológicos y su gran
variedad nos permiten hacer
trabajos tan
“modernos”como hace 60
años de su creación.
Tipografía como imagen

¿Qué nos quiere decir este diseño?

“La buena tipografía es invisible”.

“La mala tipografía está en todos lados”.

 Tipografía como imagen

Misma foto, distinta tipografía, distinto concepto, distinta clave tonal (alta-clara/baja-oscura)
Semantización
Acento semántico

El acento semántico se emplea para poner de relieve determinadas ideas

mediante la aplicación de un signo visual sobre una o varias palabras así, dichas
ideas se enfatizan.

Se emplea frecuentemente en titulares y en la generación de logotipos. Posee gran

poder de semantización y produce fuerte anclaje entre idea y palabra por lo que
posibilita la retención del concepto en la mente del receptor:
Semantización
Semantización
Semantización
Semantización
Semantización
 Ejercicio
Clase 22
Semantización tipográfica:
Usando como referencia los ejemplos
vistos:
van a crear una puesta tipográfica.
Podría ser sobre un adjetivo, un personaje
famoso o una película.
Tarea para el Proyecto
Para continuar con el Proyecto Final que estamos desarrollando:

Vamos a utilizar todo lo visto en clase para definir una tipografía para utilizar en la
presentación de slides, es decir para la Entrega Final del proyecto. Será únicamente
para los títulos, y será acompañada con Roboto en los textos más largos.

Asegurate que la tipografía que elijas exprese el alma del proyecto que estás diseñando.

Realizar un breve informe sobre tu elección junto con una muestra de la tipografía elegida.

Dentro del prototipo vamos a utilizar:

● Tipografía Roboto para Android

Ejemplo de entrega:
moodboard Paleta cromática
Desarrollamos un proceso de
identificación de colores de nuestro
moodboard y seleccionamos tres
colores que nos representan.

PRIMARIO SECUNDARIO ACENTO

#F2921D #FFF3F2 #28769C

El color anaranjado aporta espíritu de

independencia y confianza. Representa
la creatividad, seguridad y fuerza que
queremos que se refleje en nuestra
aplicación. Elegimos el azul como
acento, para generar contraste.
 Selección tipográfica
En la app se utilizará la tipografía En el diseño de esta presentación,
Roboto, fuente recomendada para utilizamos la tipografía Bebas Neue,
aplicaciones en Sistema Android. en su variable Regular. La selección
A continuación, presentamos las fue realizada en base a la búsqueda
diferentes variables y tamaños para de una tipografía sans serif, de fuerte
evidenciar su funcionamiento. presencia y rasgos duros para la
sección de títulos.

Hola,
soy la tipografía Roboto
puedo facilitar la lectura de las páginas
Hola,
Soy moderna, legible y clara,
soy la tipografía bebas neue
puedo facilitar la lectura de las páginas
Tu vista se cansará menos y podre ayudarte a que Soy moderna, legible y clara,
tengas una mejor usabilidad Tu vista se cansará menos y podre ayudarte a que
tengas una mejor usabilidad

Mis alternativas son infinitas. Mis alternativas son infinitas.

 MOODBOARD
OBJETIVO:
Ofrecer a nuestros
usuarios la solución para
ver y compartir en forma
colaborativa las imágenes
de un evento al que
concurren sus hijos/as.

PALABRAS CLAVES
★ Niñez
★ Eventos
★ Fotos
PALETA DE COLORES

Primario
Violeta se lo asocia a la reflexión y a la
templanza, feminidad y elegancia.

Secundario
Lila, o lavanda es el producto de la desaturación
del color violeta, se lo asocia a la delicadeza. Es
un tono emocional que transmite calma y
tranquilidad.

Acento
Anaranjado por su calidez, se lo asocia a la
niñez, la alegría y la sociabilidad, dos elementos
fundamentales en nuestra App. Niñez es una de
nuestras palabras claves del Moodboard.
 TIPOGRAFÍA
Títulos LIVE PICS
ASAP LIVE PICS
Diseño simple de estilo minimalista LIVE PICS
Terminaciones redondeadas para una mejor
visualización en pantalla. LIVE PICS
Fuente de palo seco pensada para las necesidades
de sitios web, y sistemas operativos actuales. LIVE PICS
LIVE PICS

LIVE PICS
Bloques de texto
LIVE PICS
ROBOTO LIVE PICS
Elección basada en las guidelines de MATERIAL
DESIGN 3 para Android. LIVE PICS
LIVE PICS
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.

Todo en el Aula Virtual.

Muchas gracias por tu atención.
Nos vemos pronto
 El color en el diseño
¿Qué es el color?
El color es la impresión producida por un tono de luz en los órganos visuales, o más
exactamente, es una percepción visual que se genera en el cerebro de los humanos y otros
animales al interpretar las señales nerviosas que le envían los fotorreceptores en la retina
del ojo, que a su vez interpretan y distinguen las distintas longitudes de onda que captan de
la parte visible del espectro electromagnético.
Todo cuerpo iluminado absorbe una parte de las ondas electromagnéticas y refleja las
restantes. Las ondas reflejadas son captadas por el ojo e interpretadas en el cerebro como
distintos colores según las longitudes de onda correspondientes.
La luz blanca puede ser descompuesta en todos los colores del espectro visible. En la
naturaleza esta descomposición da lugar al arcoíris.

“Cada color tiene numerosos significados asociativos y simbólicos. Por ello, el color nos
ofrece un enorme vocabulario de gran utilidad en la alfabetidad visual.”
Donis A. Dondis.

Definiciones de color:
-Color: Sensación originada en la acción de las radiaciones cromáticas de los cuerpos o
sustancias reflejantes sobre los receptores fisiológicos y los centros cerebrales de la visión.
Según la teoría ondulatoria de la luz, percibimos las distintas longitudes de onda como
diferencias de colores.
-Color Cálido: Se refiere a las radiaciones del espectro luminoso que presentan las máximas
longitudes de onda (rojo, naranja, amarillo) que producen una reacción subjetiva percibida
como temperatura.
-Color Frío: A diferencia de los llamados cálidos, los colores fríos se sitúan en el sector del
espectro correspondientes a las longitudes de onda mínimas, identificándose en la
percepción visual con sensaciones de temperatura, opuestas a la de los colores cálidos.

Ondas electromagnéticas visibles:

Las ondas electromagnéticas existen en un gran rango de frecuencias que se conoce como
espectro electromagnético.
El espectro visible es una pequeña banda a la derecha de la región infrarroja y a la
izquierda de la ultravioleta. Esta pequeña región es la porción del espectro electromagnético
que a los humanos nos permite ver. Cuando hablamos de luz, nos referimos al tipo de onda
electromagnética que estimula a la retina de nuestros ojos. La longitud del color rojo es la
más larga del espectro visible, mientras que la violeta es la más corta; entre el rojo y el
violeta se encuentran los demás colores
Cuando todas las longitudes de onda del espectro visible llegan a nuestro ojo al mismo
tiempo, percibimos el blanco. En realidad, el blanco no es un color, sino más bien la suma
de todos los colores y el negro tampoco es un color, sino la ausencia de longitudes de onda
del espectro visible.

En 1666, al pulir unas lentes para su telescopio, Isaac Newton empezó a preguntarse por
qué se producían franjas de colores en los bordes de las lentes y a pensar sobre ello.
Esta inquietud, que ya se planteaba desde la época de Aristóteles, pero recién con Newton
hizo que fuera explicado:
¡La luz puede ser separada!
Cada color es característico de una longitud de onda y si hacemos pasar luz blanca por un
prisma, la dispersión produce colores: rojo, naranja, amarillo, verde, azul, índigo y violeta.

La separación de la luz visible se conoce como dispersión.

¿Cuál es la verdad sobre el color?
Cuando vamos a la primaria nos enseñan que hay colores primarios y secundarios:
-Colores Primarios: Cualquiera de las sensaciones de color de los matices fundamentales,
rojo, amarillo, azul, perceptualmente irreductibles, de los que derivan los demás colores. -
Colores Secundarios: Aquellos colores formados a partir de la mezcla de dos primarios.
Pero cuando estudiamos diseño nos dicen que los colores primarios son:
(RGB) Rojo, Verde y Azul, y que si los sumamos nos dan Blanco.
Y que si juntamos:
● Rojo y Verde = Amarillo
● Rojo y Azul = Magenta
● Azul y Verde = Cyan
Y que Cyan + Magenta + Amarillo = Negro (CMYK)
Síntesis de color:
En la superposición de colores luz, denominada síntesis aditiva de color, el color blanco
resulta de la suma de todos los colores luz, mientras que el negro es la ausencia de luz.
En la mezcla de los colores primarios en la síntesis sustractiva de color, con tintas
pigmentos o pinturas, amarillo, cian y magenta; el blanco solo se consigue si el pigmento o
el soporte son de ese color, mientras que el negro es resultado de la superposición
completa de los colores cian, magenta y amarillo, una mezcla que en cierta medida logra
absorber todas las longitudes de onda de la luz.
Aunque también se utiliza la tinta Negra, K, o Key para que el negro sea intenso.

El color es esencial:
El color es, indiscutiblemente, uno de los recursos esenciales en la construcción de la
comunicación visual.
Esencial, como fenómeno físico que afectará inevitablemente a toda creación perceptible
por el ojo humano, que comunica y provoca una respuesta emocional de carácter
inconsciente en el observador.
Como toda manifestación comunicacional, está vinculada a un contexto social, cultural, etc.
Entender el color como fruto de la cultura y sometido a sus variaciones nos sitúa como
agentes activos en los procesos de interpretación en el marco de una sociedad.
 Color y cultura
Los humanos damos significado a lo que vemos, interpretamos los estímulos visuales y los
transformamos en cosas a las que damos sentido, a la vez condicionados por un
determinado contexto cultural. También hacemos esto con los colores, damos significado al
color según cómo y dónde se presenta. Es un proceso complejo de identificación de indicios
y señales, de interpretación y decodificación. Del mismo modo que damos significado a lo
que vemos, somos capaces de utilizar el color para comunicar, señalar o informar.
Las diferentes trayectorias culturales humanas han ido construyendo complejas estructuras
de convenciones, códigos e interpretaciones simbólicas sobre los colores. La progresiva
globalización cultural de los últimos tiempos ha borrado algunas diferencias y ha hecho
converger algunas convenciones.

La oposición verde-rojo como sistema de codificación tiene un significado claramente

implantado en nuestra sociedad y en todo el mundo:
paso permitido o prohibido, aparato encendido o apagado, polo positivo o negativo, aceptar
o cancelar.
Si como diseñadores hacemos uso de este código socialmente establecido, nos
aseguramos una fácil interpretación a la vez que contribuimos a consolidar y perpetuar su
significación.
Al entrar en un supermercado las combinaciones de color en los productos toman
significado para nosotros, nos ayudan a localizarlos y a navegar por el supermercado.
En conjunto, se agrupan formando zonas y en detalle nos lanzan señales sobre las
calidades, sobre todo simbólicas, de cada producto.
El color y el apetito:
El color es a menudo el primer elemento que las personas observan en cualquier producto
alimenticio. Por lo tanto, el color predetermina el sabor y la calidad de los alimentos que
comemos independientemente de la realidad ya que antes siquiera de que las papilas
adquieran el sentido del gusto a través del alimento, ya se han enviado señales al cerebro
para interpretar el sabor a través de los ojos.
Por esa razón las empresas de marketing utilizan la psicología del color y dedican mucho
tiempo a elegir los colores correctos al diseñar sus productos.

Los colores que reducen el apetito, son los que tienen una relativa ausencia
en la naturaleza o que se pueden asociar a alimentos en mal estado o quemados.
Azul. Aparte de los arándanos, no es fácil encontrar el azul como color natural. Muchas
dietas milagro que tienen como objetivo la pérdida de peso sugiere el uso de platos azules
para comer porque se come menos comida debido a la naturaleza del color. El uso de luces
azules en los comedores es utilizado para un menor consumo de alimentos.
Gris. Generalmente aleja a las personas de la comida debido a que lo asocian con el moho
o alimentos en mal estado en general. En realidad, muchos alimentos procesados son
grises, pero se les suele agregar color para compensar la pérdida de color que resulta de la
exposición de los alimentos a la luz, el aire y otras condiciones.
Negro. Se utiliza para hacer que el apetito de una persona disminuya. Aunque puede ser un
color elegante para vestir, a la hora de comer puede transmitir que el alimento está en mal
estado o quemado.

Colores que dan hambre: Son los que más se encuentran en la naturaleza
y que usan las industrias alimenticias y de marketing para vender alimentos
Verde. Es un color que se asocia con lo saludable. Las ensaladas están llenas de alimentos
verdes y las verduras que son tan importantes para la salud.
Naranja. Estimula el cerebro, lo que aumenta la actividad mental y a menudo provoca una
sensación de hambre. Muchos alimentos saludables son de color naranja; calabaza,
zanahorias, naranjas y calabazas, etc.
Rojo y amarillo. Al ser colores considerados cálidos, aumentan la presión arterial, la
frecuencia cardíaca y hacen que el hambre sea más frecuente. Es por eso que la mayoría
de las cadenas de comidas rápidas tienen un logo de color rojo o amarillo que usan en sus
productos. La combinación de ambos colores nos da la sensación de más hambre.
Blanco. La mayoría de los restaurantes usan platos blancos ya que hacen que la comida se
vea más fresca y apetitosa en el contraste de colores. Por otro lado, este color se asocia
con la limpieza y la pureza.

Color en los ambientes:

¿Sabías además que los colores a tu alrededor pueden estar influenciando tus emociones y
tu estado de ánimo? Ciertas tonalidades pueden facilitar que nos irritemos, mientras que
otras pueden favorecer nuestra relajación. Incluso ciertos colores pueden ayudarnos
también a descansar la vista.
Hay una gama de tonalidades que están asociados a la tranquilidad y que nos transmiten
calma. Estos colores suelen ser los más recomendados para pintar las paredes de una casa
o para generar un ambiente más tranquilo.

El color azul es el color de la tranquilidad, la calma y la armonía por

excelencia. Relaja la mente y reduce los síntomas de estrés y ansiedad.
El azul claro suele estar relacionado con la sabiduría y se estudia su efecto sobre la
reducción del ritmo cardíaco. Este color nos puede producir tales sensaciones al estar
relacionado con la calma del mar o del cielo tranquilo.
Los verdes transportan a nuestra mente hacia la naturaleza, se dice que es el color más
relajante para el sistema nervioso de los seres humanos. El verde es un tranquilizante
natural e incluso se habla de un poder curativo ayudando a estabilizar las emociones. En
cambio un verde más amarillento se asocia con la enfermedad, con la envidia y con
sensaciones desagradables.
El color blanco es el color de la luz y el bienestar emocional. En la antigüedad, se utilizaba
este color para la gran mayoría de edificios puesto que les daba un efecto de soberbia y
pureza.
No se recomiendan paredes rojas, marrones o grises, ya que irritan o desmotivan.
 Psicología del color
Los colores despiertan respuestas emocionales específicas en las personas.
El factor psicológico está formado por las diferentes impresiones que emanan del ambiente
creado por el color, que pueden ser:
de calma, de recogimiento, de plenitud, de alegría, opresión, violencia...

La psicología de los colores fue ampliamente estudiada por Goethe, que examinó el efecto
del color sobre los individuos:
● Blanco: puede expresar paz, soleado, feliz, activo, puro e inocente;
● crea una impresión luminosa de vacío positivo y de infinito.
● El blanco es el fondo universal de la comunicación gráfica.
● Negro: es el símbolo del silencio, de lo desconocido y, a veces, impuro y maligno.
Confiere nobleza y elegancia, sobre todo cuando es brillante.
● Gris: simboliza la indecisión y la ausencia de energía, expresa duda.
● Amarillo: es el color más luminoso, más cálido, y expansivo. Es el color del sol, de la
luz y del oro, y como tal es intenso y agudo. Suelen interpretarse como animados,
joviales, excitantes, afectivos e impulsivos.
● Rojo: significa vitalidad, es el color de la sangre, de la pasión, de la fuerza bruta y del
fuego. Color fundamental, ligado al principio de la vida, expresa la sensualidad, la
virilidad, la energía; es exultante y agresivo.
● Azul: es el símbolo de la profundidad. Inmaterial y frío, de tranquilidad y melancolía.
Oscuro: infinito.
● Violeta: es el color de la templanza, de la lucidez y de la reflexión. Es místico,
melancólico y podría representar también la introversión.
● Verde: es el color más tranquilo y sedante. Evoca la vegetación, el frescor y la
naturaleza. Es el color de la calma indiferente: no transmite alegría, tristeza o pasión.
● Marrón: es evocador del ambiente otoñal y da la impresión de gravedad y equilibrio.
Es el color realista, tal vez porque es el color de la tierra que pisamos.
En esta ocasión compararemos dos de las teorías del color más reconocidas: la teoría de
Goethe, quien se dedicó a estudiar los colores desde el punto de vista de la percepción
para, así, establecer una relación entre los colores y algunos estados de ánimo.
En contraste, Lüscher dividió los colores primarios en 2 categorías: los colores heterónomos
(el amarillo y el azul que representan la luz y la oscuridad respectivamente) y los colores
autónomos (el rojo y el verde que representan el ataque-defensa del organismo).
El círculo cromático o rueda de colores es una representación ordenada y circular de los
colores de acuerdo con su matiz o tono, en donde se representa a los colores primarios y
sus derivados.
Su uso es compatible tanto con los modelos Síntesis sustractiva de color, como con los
modelos Síntesis aditiva de color.
 Esquemas de colores y sus combinaciones
● Esquema acromático: No existe color, solo negro, blanco y grises.
● Esquema análogo: Se toma un color y se acompañan con los análogos.
● Esquema de choque: Combinamos un color con el tono que está a la derecha o a la
izquierda de su complemento en el círculo cromático.
● Esquema complementario: Utilizamos dos colores opuestos en el círculo cromático.
● Esquema monocromático: Un color combinado con sus tintes y matices.
● Esquema neutral: Se utiliza un color con el agregado del negro o de su
complementario.
● Esquema complementario dividido: Consta de un color y los dos análogos de su
complementario.
● Esquema primario: Colores primarios saturados.
● Esquema secundario: Colores secundarios.
● Esquema triada terciario: Se utilizan colores equidistantes uno del otro en el círculo
cromático.
 Paleta de colores
La paleta de colores o paleta cromática son una selección de colores que aplicados en una
misma imagen, gustan a la vista. Normalmente la define el diseñador o director de arte de
un proyecto. Se utiliza para el diseño de una pieza gráfica, la decoración de un ambiente o
la creación de una obra artística.
Una paleta de colores contiene un conjunto de tonalidades que se hablan entre sí. Cada
una de estas tiene uno o varios significados y tienen la capacidad de evocar emociones en
las personas.
Es una de las herramientas de diseño gráfico más elementales, ya que se utiliza para crear
combinaciones de colores que trabajen bien juntos.
[Link]
Ejercicio Clase 21
Elegir un personaje muy famoso
Obtener la paleta
Que tus compañeros/as adivinen a qué personaje pertenecen.
Luego deberán debatir:
¿Por qué creen que sus diseñadores eligieron esa paleta para ese personaje? (Tener en
cuenta la personalidad del personaje, sus intenciones, ambiciones, poderes etc.)
 Proyecto Final
TAREA PARA EL PROYECTO FINAL
Para continuar con el Proyecto Final que estamos desarrollando:
Vamos a utilizar todo lo visto en clase para definir una paleta de 3 colores, 1 principal, 1
secundario y 1 (un) acento (3 como lo indica Android pero si diseñas para IOS únicamente
vas a utilizar 1 color principal).
Asegurate que los colores o el color que elijas exprese el alma del proyecto que estás
diseñando.
Para ello realizaremos las siguientes tareas:
Investigar sobre qué colores simbolizan las 3 palabras clave de mi proyecto.
Crear la paleta con Adobe color CC.
Realizar un breve informe sobre el analisis de color y allí justificar porque fueron elegidos.
Luego los incorporaremos a los elementos de las pantallas.
En la mayoría de los casos mantendremos el blanco como fondo principal de pantallas
(aunque no forma parte de la paleta de 3 colores).
 Tipografía
¿Qué es tipografía?
Podemos definir la tipografía como “el arte de diseñar las letras”. Se denomina así a la
disciplina que estudia la representación gráfica de las letras para que el lenguaje escrito sea
efectivo.
Es el estilo o la apariencia del texto. Se refiere al arte de trabajar con él.
La tipografía está donde quiera que se mire; en libros, sitios web, letreros y avisos, en
señales de tráfico y empaques de productos.
La palabra tipografía proviene de dos términos griegos: “typos” que significa golpe, marca o
forma, y “graphia” que significa cualidad de escribir.

Morfología de las tipografías

La anatomía tipográfica se refiere a las características determinadas de una fuente.

Estudiando sus características nos permite dividirlas en 4 grupos:
Serif - Sans Serif - Egipcias/Bloque Serif - Fantasía

Romanas:
Con serifa (romanas) cuentan con remates o terminales, que son esos pequeños adornos
ubicados en los extremos de los trazos de los caracteres.
Las tipografías Serif suelen ser concebidas como serias y tradicionales. Cuentan con un aire
académico o institucional. Son tipografías idóneas para párrafos o textos largos, ya que los
pequeños terminales o serifas contribuyen a que se cree una línea imaginaria bajo el texto
que facilita mucho lectura a nuestro ojo.
Algunos ejemplos de fuentes tipográficas Serif son: Times New Roman, Garamond o Book
Antigua.
Y recuerda dentro de las tipografías con serifa, podemos incluir también las tipografías
egipcias o Slab Serif.

Palo seco:
Sin serifa (palo seco) se caracterizan por la ausencia de remates y terminales. Se diseñan
sin serifas. Sus trazos apenas presentan contrastes.
Las tipografías Sans Serif suelen asociarse con la tipografía comercial, ya que ofrecen un
resultado muy bueno para la impresión de titulares o poco texto, en carteles y publicidad.
Este estilo de fuente evoca modernidad, seguridad, neutralidad y minimalismo.
Es muy recurrida también para textos en pantalla y textos en tamaños pequeños. Gracias
precisamente a la ausencia de terminales y remates, esta tipografía puede resultar más
legible en textos de pequeño tamaño que su hermana mayor.
Algunos ejemplos de tipografías San Serif son: Futura, Helvética, Arial, Gotham o Avenir.

Manuscritas:
Cursivas (manuscritas) también se denominan como cursivas o script. Son tipografías que
representan o imitan la caligrafía a mano, por lo que en ocasiones también se les puede
denominar como tipografías caligráficas.
Generalmente este tipo de tipografías cuentan con una tendencia itálica o cursiva claro. Las
letras se ligan entre sí y encontramos curvas más pronunciadas que en las tipografías con
serifa o de palo seco.
Cómo se relacionan con la caligrafía, cuentan con una personalidad algo más humana y
cercana. Algunas tipografías cursivas podrían ser Beckham Script o Parisienne.

Exposición:
Decorativas (exposición) También se les denomina como tipografías display. Están
consideradas como tipografías divertidas, que pueden transmitir una gran variedad de
sensaciones. Cuentan con un carácter y personalidad muy fuerte. Desde el punto de vista
de la psicología tipográfica son transgresoras y contribuyen a llamar más la atención.
Dentro de este conjunto de decorativas entrarían las tipografías cuyas características no se
ajustan a los tres conjuntos anteriores. Suelen crearse para fines específicos donde la
legibilidad no se tiene demasiado en cuenta. Como por ejemplo un logo o un título. Son muy
expresivas y suelen contar con atributos más temáticos.
Eso sí, definitivamente no son tipografías idóneas para párrafos de texto.
Pueden llegar a transmitir falta de cuidado o desinterés en el diseño.

Tipografía:
Resulta imposible no tener un contacto directo constante con las tipografías. Nos
acompañan en todo momento, ya que forman parte de nuestra rutina diaria. Hablamos por
tanto de un elemento visual casi omnipresente del que podemos hacer uso desde el diseño
gráfico.
Además, las tipografías son una herramienta clave a la hora de diseñar la identidad de
marca o branding de un proyecto. Junto con el logo, la paleta de colores y otros recursos,
forman parte del branding visual que diseñamos estratégicamente para reforzar el mensaje
que queremos enviar desde la empresa.

Familias tipográficas:
Una familia tipográfica es un conjunto de caracteres, alfabéticos o no, que cuentan con unas
características comunes en su estructura y en su estilo. Esto nos permite identificarlas como
una misma familia.
Los miembros que integran una misma familia tipográfica se parecen entre sí, pero cuentan
con algunos rasgos propios como variaciones de peso, inclinación y proporción. Esto lo voy
a aclarar con más detalle en el siguiente punto.
Existen multitud de familias tipográficas. Originalmente surgieron con la creación de la
imprenta pero otras han ido apareciendo como resultado de la digitalización de todo el
proceso de diseño de tipografías.
Por ejemplo, las familias Gotham, Futura o Swift.

Variables tipográficas:
Las variables tipográficas son las opciones que podemos encontrar dentro de una misma
familia tipográfica. Son modificaciones de la morfología de la tipografía, es decir de su
forma. Actúan sobre el grosor (tono) del trazo, el ancho o proporción del carácter y la
inclinación del eje vertical de los caracteres de una misma familia tipográfica.
Gracias a estas variables tipográficas vamos a poder establecer una jerarquía visual en
nuestras composiciones. También nos ayudan a satisfacer las necesidades que nos pueden
surgir a la hora de comunicar visualmente con tipografías.
Variable de peso: Denominada también como variable de grosor o tono, afecta
directamente al trazo de los caracteres. Se modifica la relación entre el ancho del trazo y los
espacios vacíos dentro de cada signo tipográfico. La tipografía bold o negrita presenta un
grosor de trazo mayor, mientras que la tipografía light presenta un grosor del trazo menor.
Variable de inclinación: modifica el eje de los caracteres. Hace referencia al ángulo de
inclinación de la tipografía. Dentro de la variable tipográfica de inclinación vamos a poder
reconocer dos tipos. Las oblicuas y las itálicas.

Legibilidad:
La legibilidad es la facilidad con que se puede leer y comprender un texto.
En un sentido más amplio es la aptitud de un texto de ser leído fácil y cómodamente, y esta
aptitud hace referencia a elementos tipográficos, de presentación del escrito en la página, y
también al estilo, a la claridad de la exposición, a la manera de escribir, al lenguaje.
La legibilidad debe ser uno de los temas más importantes cuando se trata de un proyecto de
diseño. Si un texto no se puede leer, entonces su mensaje no va a llegar a nadie. Un buen
diseño se muestra en una forma que es comprensible; la legibilidad conforma una gran
parte de la comprensión.

“No puedes ser un buen tipógrafo sino eres un buen lector. La tipografía es leer.”
Anónimo.
 Importancia de las jerarquías
La jerarquía tipográfica presenta las letras de manera que las palabras más importantes se
muestran causando un mayor impacto, por lo que los usuarios pueden escanear el texto
para obtener información clave. Sin jerarquía tipográfica, cada letra, cada palabra y cada
frase en un diseño se vería igual.

Jerarquías:
Nivel Primario- El nivel primario de la tipografía comprende letras de gran tamaño. Estas
abarcan titulares y cubiertas, lo cual también es conocido como «muebles» que atraen a los
lectores en el diseño. Esta tipografía es la más grande (a menos que se utilice arte
tipográfico).
Nivel Secundario- El nivel secundario de la tipografía comprende la información que tiende a
ser analizada y que ayuda a los lectores a permanecer con el diseño. Esto incluye
elementos tales como subtítulos, citas, infografías y otros pequeños bloques de texto que
añaden información al nivel primario. El diseño de estos bloques textuales está en el lado
grande, pero por lo general, son mucho más pequeños que las letras en el nivel primario de
la tipografía.
Nivel Terciario- El nivel terciario de la tipografía comprende el texto principal del diseño. A
menudo es una de las tipografías más pequeñas, pero debe ser lo suficientemente grande
como para ser completamente legible por todos los usuarios potenciales. El tipo de letra
debe ser simple y consistente en el diseño, espaciamiento y el uso general.
Otros niveles- Los otros niveles de la tipografía incluyen efectos que se aplican a escribir en
el nivel terciario para pequeñas áreas de impacto. Efectos tales como negrita, cursiva,
subrayado y color pueden llamar la atención sobre las áreas específicas del texto principal.

Jerarquías visuales y niveles de Lectura

Connotación tipográfica
Connotación tipográfica
 Tipografía como imagen
La tipografía puede comportarse como una imagen gracias a los atributos
formales que definen su personalidad gráfica.
Separados del componente informativo del lenguaje, los tipos quedan liberados de su
función lingüística, convirtiéndose en una representación visual de sí mismos con un
significado connotativo asociado.
Semantización
Ejercicio Clase 22
Semantización tipográfica:
Usando como referencia los ejemplos vistos:
van a crear una puesta tipográfica.
Podría ser sobre un adjetivo, un personaje famoso o una película.
 Proyecto Final
TAREA PARA EL PROYECTO FINAL
Para continuar con el Proyecto Final que estamos desarrollando:
Vamos a utilizar todo lo visto en clase para definir una tipografía para utilizar en la
presentación de slides, es decir para la Entrega Final del proyecto. Será únicamente para
los títulos, y será acompañada con Roboto o San Francisco, según el caso, en los textos
más largos.
Asegurate que la tipografía que elijas exprese el alma del proyecto que estás diseñando.
Realizar un breve informe sobre tu elección junto con una muestra de la tipografía elegida.
Dentro del prototipo vamos a utilizar:
Tipografía Roboto para Android.
Tipografía San Francisco y New York para IOS.
DISEÑO UX/UI
Clase 23
UI kit y Alta Fidelidad
Les damos la bienvenida
Vamos a comenzar a grabar la clase
 Clase 22 Clase 23 Clase 24

Tipografía UI KIT y Alta fidelidad Logo

● Tipos de tipografía ● ¿Qué es un UI Kit? ● El logo y sus características

● Familias tipográficas ● Tipos de logo
● Elementos que lo
● Jerarquías tipográficas ● ¿Cómo crear nuestro logo?
componen
● Legibilidad ● Tarea para el Proyecto
● Tarea para el Proyecto ● Librerías en Figma Final
Final ● ¿Qué es un Sistema de
Diseño?
● Alta Fidelidad
● Tarea para el Proyecto
Final
 Diseño Centrado en el Usuario (DCU)

Analizar Diseñar Validar

Hi-Fi Visual y Contenido

Design Thinking

Empatizar Definir Idear Prototipar Evaluar

Wireframe Digital

UI Kit
¿Qué es un UI Kit?
Un kit de interfaz de usuario (del inglés User Interface Kit) es un archivo
cerrado que incluye varios elementos ya prediseñados y reutilizables
imprescindibles para el diseño de la interfaz de usuario, como por
ejemplo: botones, iconos, tablas, formularios, sliders, etc.
La mayoría de estos kits cuentan con estilos -los atributos visuales del
diseño- como: fuentes, colores y formas.
Los UI Kits pueden ser bastante simples con unos pocos botones y
componentes de diseño o extremadamente robustos con conmutadores
que cambian las fuentes, los colores y las formas sobre la marcha.
UI Kit
UI Kit
UI Kit
UI Kit

VER MÁS
UI Kit

VER MÁS
UI Kit
Beneficios del uso de UI Kit
1. Ahorrar tiempo y dinero: No tienes que dedicar tiempo a crear los componentes desde
cero ni preocuparte por los detalles estándar de cada uno. No hay necesidad de
comenzar el patrón de un sitio web o móvil desde cero, lo que permite utilizar nuestro
tiempo de forma más eficiente, acelerar el proceso de diseño y prestar atención a otras
partes importantes del trabajo.

2. Comprensión: Puedes aprender buenas prácticas de los UI Kits existentes: cómo están
diseñados los componentes (dimensiones, márgenes y paddings), qué elementos los
componen (formas, textos, iconos), y qué tamaños son apropiados.
Beneficios del uso de UI Kit
3. Versatilidad: Aunque para algunas personas puede resultar limitante trabajar con
componentes prediseñados, el comenzar a trabajar de una base bien estructurada hace
más simple comenzar a realizar cambios y adaptaciones para obtener el resultado
buscado, ya que el cambio de estilos es mucho más rápido.

4. Coherencia y consistencia: Cada elemento colocado en el UI Kit tiene un propósito que

mantiene la relación lógica entre sus partes y componentes. Y no solo se refiere a los
elementos per se, sino que permite unificar atributos de estilo visual únicos como fuentes,
colores, y tamaños permitidos en el diseño.

La creación de estos kits forma un lazo con los desarrolladores de nuestro proyecto, ya que
ayudan en la creación del código y a mantener el respeto visual planteado por nosotros.
Pestaña “Inspect” (Figma)

Los desarrolladores pueden chequear

fácilmente el código que crea nuestro
elemento (en este caso, un componente
“button”) para imitarlo a la perfección sin
necesidad de explicaciones.
Formatos
Si bien hay gran cantidad de UI Kits en formatos .psd (Photoshop), no se recomienda
utilizarlos para diseñar UI, aunque sí para el uso y armado de mockups. Para todo lo demás,
necesitamos utilizar elementos .svg (vectorizados), archivos .ai (Illustrator), o archivos .pdf
editables para que puedan ser escalables, livianos y reutilizables.

Sin embargo, la mejor manera de presentar nuestro UI Kit es hacerlo mediante archivos
de softwares de diseños de interfaces, tales como Sketch, Figma o Adobe XD.
¿Qué debe incluir un UI Kit?
Para que un UI kit pueda ser útil, usable y escalable, un factor primordial es ser muy
ordenado: cualquiera debe poder encontrar fácilmente un componente o cierta
información o un color.

Cada elemento debe estar nombrado: Tab Bar, Nav Bar, Modals, etc.

Lo importante es dejar todo en orden y claro para que quien vaya a usar un UI kit pueda
hacerlo con total seguridad y no comprometer los tiempos ni la calidad del producto final.
Sistema de color / Paleta de color
Definir al menos 3 colores:

● Color primario
● Color secundario
● Color acento

Se puede incluso añadir colores para la

comunicación:

El color de fondo predeterminado y el

color de la tipografía.
La regla 60 - 30 - 10
La regla 60 - 30 - 10 es conocida como la proporción ideal del color y es aplicada en
diferentes aspectos del diseño: gráfico, moda e interior.

Esta regla explica que podemos usar tres colores completamente distintos, pero que
lo verdaderamente importante es tener un control en la cantidad de color que usamos
de cada uno.

● El color dominante de la marca, que normalmente será asociado como nuestro

color corporativo, inundará el 60% de nuestra web.
● El 30% irá destinado a un color que acompañará al color dominante, pudiendo
hacer juegos y composiciones de entre ambos.
● Y el último color, el menos presente en la web, tendrá solamente un 10% de
protagonismo. Normalmente se usaría para Call to Actions que nos faciliten la
navegación en la web.
La regla 60 - 30 - 10
Se debe escoger un color dominante y usarlo en el 60% del espacio, otro secundario para
que esté en un 30% y un último color para el 10% restante. Sí, solo 3 colores.
La regla 60 - 30 - 10
El color primario debería ser nuestro color pleno. El color secundario puede ser un color
diferente, pero se lo suele crear utilizando el color primario bajando su saturación a 5 y
aumentando el brillo a 100. El acento puede ser un color complementario del primario.
Sistema de íconos
Definir cuáles serán los íconos a utilizar y
sus estados:

● Activo
● Inactivo

Se puede incluir estados de alerta y

aprobación también para determinados
íconos:
como x-marks, trash-cans y check icons
Tipografías
Definir la familia y variable tipográfica
que se utilizará para, al menos, las
siguientes jerarquías:

1. Títulos
2. Subtítulos
3. Citas
4. Párrafos y Textos
5. Botones
Color en tipografías
Hoy en día, las interfaces cada vez están más limpias y más blancas (fondos), por eso es
importante tenerlo en cuenta al elegir el color de nuestras tipografías.

El de la izquierda usa negro #000000 y el otro usa un azul muy oscuro #15163D. Parecen
negros los dos, pero no lo son. ¿Por qué esto es tan importante?
Color en tipografías
Al bajarle la opacidad a los dos vemos
cómo uno va hacia un gris y el otro a un
gris con un tono de azul.

Cuando usamos textos con un tono de

algún color le estamos dando más
oportunidades a que tengan más armonía
con su entorno.
Color en tipografías
Color en tipografías
A simple vista, los dos pueden parecer que son negros, pero uno tiene ciertas tonalidades
de violeta que es un color complementario y que hace contraste con el amarillo. Al hacer
esto, logramos un contraste y a la vez una armonía.
Componentes
Definir cada uno de los elementos que se
usarán, como por ejemplo:

1. Barras (superiores, inferiores)

2. Formularios (selectores, campos de
textos, botones, etc.).
3. Tarjetas (Solo Texto, Texto+Imagen,
etc, Texto+iconos, etc.)
4. Botones
5. Etc.

Si el componente tiene estados (ej: activo,

inactivo), se deben mostrar también.
Componentes
Tab Bar

Pagination
Componentes
Breadcrumbs

Slider
Componentes
Tags

Notification
Componentes
Progress bar

Loader
Componentes
Toast

Tabs
Componentes
Radio button

Checkbox
Componentes
Tooltips

Search field
Grillas y columnas
Comunicar cuál será el sistema de
grillas y columnas a utilizar

● Estilo (columna o grilla)

● Cantidad de columnas
● Márgenes
● Calles
Ilustraciones y formas
Se pueden definir todas aquellos
elementos específicos que se necesiten en
el UI Kit, como por ejemplo:

● Mapas
● Selector de asiento de cine
● Ilustraciones
● Gráficos
● Figuras decorativas
● Etc.
Librerías en Figma
Las librerías son archivos que nos permiten compartir todos los componentes y estilos
creados en ellas con el equipo. A nivel de organización, se las trata como un archivo más
que se utilizan para sistemas de diseño o assets que se quieran compartir entre archivos y
proyectos.

Estas librerías pueden incluir los colores, tipografías y componentes que se diseñaron
previamente. Se utilizan, mayoritariamente, cuando trabajamos en equipo, pero podemos
hacer uso de ellas sin necesidad de publicarlas, sino de forma privada. Esto nos ayudará
a acceder a todos nuestros estilos de una forma mucho más dinámica.
Guías de estilo (Style Guides)
Podemos crear guías de estilo que se
verán en el panel de opciones de
herramientas, como por ejemplo:

● Estilos de colores
● Estilos de Tipografías
● Estilos de Grillas
● Estilos de Efectos
(sombras, blur, etc.)
Guías de estilo (Style Guides)
En este ejemplo, aplicaremos la guía de
estilo para textos. Para crearla, debemos:

1. Seleccionar el texto que queremos

2. Presionar el ícono “Style”
3. Presionar el ícono “Create Style”
Guías de estilo (Style Guides)

Aparecerá un modal para introducir el

nombre de nuestro estilo.
El estilo creado aparecerá en el panel de
4. Escribir nombre opciones de herramienta listo para su uso.
5. Presionar “Create Style”
Guías de estilo (Style Guides)
Una vez cargados todos nuestros estilos, podemos editar nuestras pantallas desde el
ícono “Styles” de una forma mucho más rápida y consistente.

Ver en el ejemplo siguiente:

Sistemas de diseño
Los sistemas de diseño (Design System) son reglas y guías que establecen el punto de
partida y la organización de un diseño. De esta forma, se facilita el trabajo en equipo
haciendo que todos los miembros estén alineados. Recoge tanto la filosofía de una
marca, como el tono y la forma de comunicación.

En este documento se detallan muchas guías de trabajo, lo que consigue que los
diseñadores se puedan centrar en problemas más complejos, evitando los relacionados
únicamente con el estilo.
UI Kit vs. Sistemas de diseño

¿En qué se diferencian con los UI Kit?

La principal ventaja de los sistemas de diseño es que son documentos vivos: es un

modo de trabajo en equipo, una manera de establecer valores y principios que
identifican el proceder para crear el producto final. Están específicamente adaptados al
proyecto y se crea una guía de estilo que puede utilizar todo el equipo, no solo los
diseñadores. Es decir, los sistemas de diseño son transversales y afectan a todos los
aspectos del producto, desde el contenido hasta lo puramente visual.

Los UI Kits, en cambio, son documentos cerrados que nos sirven de referencia en el
desarrollo de una interfaz. Son plantillas para facilitar el trabajo, lo que se puede volver
en nuestra contra si no las personalizamos adecuadamente al proyecto en el que estás
trabajando.
Ejemplos de Sistemas de diseño

🔗 Sistema de diseño - Material Design

(Utilizado en diseños de Google)
Ejemplos de Sistemas de diseño

🔗 Sistema de diseño - Human Interface

(Utilizado en diseños de Apple)
Ejemplos de Sistemas de diseño

🔗 Sistema de diseño - Obelisco

(Utilizado en Gobierno de la Ciudad)
Ejemplos de Sistemas de diseño

🔗 Sistema de diseño - Andes UI

(Utilizado en Mercado Libre/Pago)
Ejemplos de Sistemas de diseño

🔗 Sistema de diseño - Freddicons

(Utilizado en Mailchimp)
Ejemplos de Sistemas de diseño

🔗 Sistema de diseño - Polaris

(Utilizado en Shopify)
Alta fidelidad (Hi-Fi)
Los wireframes de alta fidelidad permiten un mayor acercamiento al resultado final. En
ellos se utiliza contenido real y pueden contener imágenes o color para especificar
llamados a la acción y puntos de decisión, íconos, y otros elementos que aporten detalles.
Es lo más cercano al producto final que podemos crear.

En este tipo de wireframes, la interacción y el contenido reinan por sobre la simpleza, lo

que permite entregar un trabajo más acabado que permitirá realizar correcciones
conscientes y aterrizadas sobre el proyecto. Su gran ventaja es que requiere menos
imaginación del cliente para comprender un prototipo.
Alta fidelidad (Hi-Fi)
Para que un proyecto sea considerado en alta fidelidad, debemos volcar todo lo
realizado con anterioridad en nuestro UI Kit a nuestro prototipo funcional y ser lo más
realistas posibles en cuanto a contenido:

● Todas las pantallas que componen el proyecto deben estar creadas.

(En nuestro caso mínimo las pantallas del Happy Path)
● El prototipo funcional debe encontrarse perfectamente creado.
● El contenido (los titulares, cuerpos de texto, descripciones y demás) deben ser las
que planeamos mantener al momento de llevar a cabo el diseño (programadores).
● Debe tener imágenes reales del proyecto
Alta fidelidad (Hi-Fi)
Alta fidelidad (Hi-Fi)
Alta fidelidad (Hi-Fi)
Tarea para el Proyecto
Para continuar con el Proyecto Final que estamos desarrollando vamos a crear el UI Kit
correspondiente a nuestro proyecto, el cual deberá incluir:

● Paleta de color: primario, secundario y acento y a parte el color de fondo y el de tipografía, todos
con sus respectivos códigos hexadecimales por ej: #58C3BB
● Jerarquías tipográficas: Tipografía correspondiente a las guidelines y sus variables tipográficas
con sus muestras ( light - medium - bold - italic) para títulos, subtítulos, párrafos, citas, botones y lo
que se necesite.
● Sistema de íconos: estado activo y estado desactivado.
● Componentes: tales como barras de navegación superiores e inferiores, tarjetas, botones (con sus
variables), formularios, modales, etc.
● Ilustraciones y figuras: sólo si el proyecto lo requiere.
Cómo mostrar el UI kit: diferenciar por medio de títulos qué elementos estamos mostrando y todo se
presenta en un archivo unificado visualmente atractivo.

En otra slide no olvidar mostrar la evolución de pantallas desde wireframes a mano a alta fidelidad.
Proyecto Final

Fecha de la Entrega final:

Clase 26
Ejemplo de entrega
 ATOMIC DESIGN
Navigation Bar Tab Bar Álbum
Átomos Átomos Organismo Átomos

Moléculas

Organismo Moléculas

Moléculas

VER MÁS
 COLOR Y TIPOGRAFÍA
Primario
Violeta se lo asocia a la reflexión y a la Títulos
templanza, feminidad y elegancia.
ASAP
Secundario Diseño simple de estilo minimalista
Lila, o lavanda es el producto de la desaturación Terminaciones redondeadas para una mejor
del color violeta, se lo asocia a la delicadeza. Es visualización en pantalla.
un tono emocional que transmite calma y Fuente de palo seco pensada para las necesidades
tranquilidad. de sitios web, y sistemas operativos actuales.

Acento
Anaranjado por su calidez, se lo asocia a la
niñez, la alegría y la sociabilidad, dos elementos Bloques de texto
fundamentales en nuestra App. Niñez es una de
nuestras palabras claves del Moodboard. ROBOTO
Elección basada en las guidelines de MATERIAL
DESIGN 3 para Android.
DISEÑO DE LOGO

Con la creación del logo buscamos transmitir el concepto de “vive a

través de tus fotos”

La imagen nace de la unión de una cámara de fotos y una carpeta de

archivo o almacenamiento, las cuales son dos de las funciones
principales de nuestra App. Éstos son los elementos necesarios para
transmitir nuestra misión.

Las formas empleadas son simples y redondeadas y con gran

significado, ya que al utilizarlas, nos lleva a pensar en fotos, eventos,
recuerdos, almacenamiento, etc.

El brillo o destello utilizado es un “guiño” para las mujeres, ya que

hemos detectado que son ellas, en su gran mayoría, las encargadas de
capturar más momentos para recordar.

Los colores y las tipografías empleadas enfatizan esta idea de que es

una actividad más que nada femenina, teniendo como acento el
amarillo anaranjado que nos retrotrae a los más pequeños, a la alegría
y la sociabilidad.
 DISEÑO DE LOGO
Bocetos Logotipo Isotipo Logotipo

Carpeta + Cámara Live Pics

En vivo
+ Fotos

Tipografía Paleta de colores Aplicaciones

Tamaños App Icon

Celuar + Foto
 UI KIT
Nav Bar Tap Bar Botones Álbumes Paleta de colores

Primario Secundario Acento

#712673 #CCBDDCC #F2B441

Textos

Perfil Títulos H1 32pt

Mensajes importantes

Títulos H2 22pt

Switch
Títulos H3 14pt

Ilustración

Iconos Párrafos p 10pt

Usuarios
Logo.

El logo está conformado por una cruz que

representa la salud con un corazón en el
centro que representa la familia (los que
más queremos), ya que para MiSalud lo más
importante es el bienestar de la familia.

Por otro lado, los colores utilizados generan

tranquilidad, confianza y profesionalismo.
Este tipo de colores son muy utilizados en el
rubro de la salud.

Algunas variantes.
Atomic design.
UI KIT. VER EN FIGMA
Colores
y Tipografía.

Como colores primario y secundario usamos el azul en En la aplicación utilizamos la tipografía Roboto, ya que es la
diferentes tonos, ya que es un color que produce un efecto recomendada para el sistema operativo Android.
calmante y emite seguridad. Transmite Inteligencia,
confianza, seguridad, serenidad, comunicación, En los títulos de la presentación utilizamos la tipografía
eficiencia, lógica, reflexión, calma. Montserrat porque transmite profesionalidad..

Para el acento utilizamos un verde agua, que sería una

Hola,
mezcla entre verdes y azules, un color muy utilizado en el
ámbito de la salud. Transmite Salud, paz, equilibrio,
restauración, conciencia, armonía.
Soy la tipografía Montserrat.
Tengo las variables y morfología
Primario Secundario Acento justas para representar los valores
de la app MiSalud.

Hola,
Soy la tipografía Roboto.
Tipografía Sans Serif que aporta
#0A4499 #9EC9FE #1ED5BE claridad visual gracias a su
neutralidad y legibilidad.
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.

Todo en el Aula Virtual.

Muchas gracias por tu atención.
Nos vemos pronto
DISEÑO UX/UI
Clase 24
Logo
Les damos la bienvenida
Vamos a comenzar a grabar la clase
 Clase 23 Clase 24 Clase 25

UI KIT y Alta fidelidad Logo Branding

● ¿Qué es logo?
● ¿Qué es un UI Kit? ¿Qué es branding?
● Logotipo, Isotipo, ●
● Elementos que lo ¿Qué es marca ?
componen Imagotipo e Isologo. ●
● Características y función ● Steve Jobs
● Librerías en Figma ● Estrategia de Branding
● ¿Qué es un Sistema de de los logos.
● Tarea para el Proyecto
Diseño? ● Diseñador UX/UI y Final
● Alta Fidelidad Diseñador gráfico.
● Tarea para el Proyecto ● Tarea para el Proyecto
Final Final
 Diseño Centrado en el Usuario (DCU)

Analizar Diseñar Validar

Hi-Fi Visual y Contenido

Design Thinking

Empatizar Definir Idear Prototipar Evaluar

Wireframe Digital

Atomic + Guidelines + Grillas

Color + Tipografía + Logo

¿Qué es un “logo”?
De manera habitual se le llama logo al elemento gráfico que identifica a una
empresa, un proyecto, una institución, un producto, etc.
Logo viene de logotipo, que es un símbolo que se caracteriza por estar compuesto de
imágenes, símbolos y/o letras para representar a una institución, marca, persona o
sociedad.
Alrededor del año 1800 empezaron a surgir los primeros logotipos. Se trataban de
símbolos y colores muy rudimentarios, pero que pretendían servir de identificador
entre los propietarios de productos y captar mayor atención por parte de los
incipientes compradores. Posteriormente, los logotipos han ido adaptándose a las
diferentes épocas, convirtiéndose en una referencia de identificación por parte de las
marcas a las que representan.
Logotipo
Logotipo: Traducido al inglés como “word mark”, se refiere exclusivamente al diseño
tipográfico del nombre o palabra que define a la marca que se quiere representar.
Isotipo
Isotipo: se traduce al inglés como brand mark y representa la imagen simbólica de la
marca por ejemplo, la manzana de Apple, y la curva de Nike.

Siglas, anagramas, monogramas, pictogramas o firmas: clasificados dentro de los isotipos,

enfatizan la palabra pero no necesariamente en el nombre completo. Se conoce en inglés
como letter mark. Ej: CNN, LG, eBay.
Imagotipo
Imagotipo: traducido al inglés como “combo mark”, combina en la iconografía tanto
palabra como imagen. Se caracteriza porque tanto la imagen como la palabra
pueden funcionar por separado. Por ejemplo: Unilever y Adidas.
Isologo
Isologo: se traduce al inglés como “emblem”. Es una especie de emblema, ya que
combina, como en el imagotipo, tanto imagen como palabra, pero están fusionadas,
representando una especie de “escudo” de la marca. Algunos ejemplos como: Nikon, Ikea,
Samsung y Amazon.
Tema: Logo

Los logos más sólidos son los que cuentan historias sencillas

Autor/as/es: Sol Sender

Carácteristicas
Sencillo: Un logotipo debe ser fácil de recordar. Es recomendable evitar degradados y
utilizar una tipología fácilmente reconocible y un máximo de dos o tres colores.
Adaptable: con la llegada de las nuevas tecnologías es importante que un logotipo se
adapte a cualquier soporte. Debe ser escalable a cualquier tamaño para utilizarlo en el
soporte que se precise.
Legible: Una de las características a tener en cuenta es que pueda leerse sin problemas.
La legibilidad es un aspecto fundamental.
Atemporal: Esta característica es de suma importancia porque las modas cambian de
forma continua. Por lo tanto, tener un logotipo que permanezca en el tiempo y en el
recuerdo del público es muy relevante.
Original: El logotipo debe ser único y original como la empresa a la que representa. Hay
que investigar los logotipos del mercado al que pertenece la firma para marcar diferencia.
Función
El logotipo tiene como objetivo ser la representación gráfica de una compañía. Se utiliza
para dar a conocer e identificar a la empresa o institución por un amplio periodo de
tiempo, de tal forma que los receptores asocien a esa empresa los productos o servicios
ofrecidos por ella.

Para tener una identidad de marca exitosa o branding tienes que contar una historia que
influya en las emociones de los clientes.

Tu logo estará presente en todos los materiales de tu marca (membretes, tarjetas, páginas
web, redes sociales etc.) y crearán una identidad de marca concreta y comercializable.
Sobre los logos
Los logos son un punto de identificación; son el símbolo que usan los clientes para reconocer tu marca.
Idealmente, querrás que las personas en cuanto vean tu logo lo relacionen con la memoria de lo que
hace tu empresa y, lo que es más importante, cómo los hace sentir.
Como un buen logo es un elemento visual, estéticamente agradable, transmite un recuerdo positivo de
tu marca que el nombre de tu empresa por sí solo podría no transmitir.
Y siendo honestos, es probable que parte de tu público olvide el nombre de tu negocio pero asociará
inmediatamente tu logo con sus recuerdos sobre tu marca.
Los consumidores anhelan la consistencia. A medida que tu marca crezca, tu logo se volverá más
reconocible para una amplia gama de consumidores, y esta familiaridad crea la percepción de que es
fiable y accesible.
Cuando sales a comprar ropa de deporte y de repente ves unas zapatillas Nike, estás dispuesto a
comprarlas. ¿Por qué? Porque con Nike sabes que estás en buenas manos; es una marca en la que
confías. Una vez que les gustes, tus clientes te buscarán una y otra vez, y tu logo es lo primero que
buscarán.
Crear logos no te convierte en diseñador gráfico
Los diseñadores de logos son diseñadores gráficos profesionales que crean imágenes personalizadas
únicas para la marca del cliente o empresa que los contrata.
Los diseñadores de logos pueden ser independientes (freelancers) o empleados de una agencia de
diseño o publicidad. La mayoría de los diseñadores profesionales tienen un título en diseño gráfico.
Si buscas contratar a un diseñador de logos, hay que tener en cuenta que el proceso de diseño tomará
más tiempo que si lo crearas usando un “creador de logos” en línea, pero al elegir usar los servicios de un
diseñador de logos profesional, estás garantizando que el logo sea totalmente único, que cumpla con
su función y que tenga la calidad necesaria para que una marca se vea profesional y confiable.
Para ser diseñador ux/ui no es necesario ser diseñador gráfico, es por eso que para salir del apuro
hasta que puedas acudir con un profesional (de tu equipo o externo) que diseñe el logo de tu cliente, o
como en este caso, si necesitas un logo rápido de ejemplo para ver como quedaría aplicado en el
prototipo te dejo algunas herramientas online con las que puedes crear logos de forma rápida y
gratuita:
Creador de logos de Zyro. Visme. Oberlo. Canva. FreeLogoDesign. LogoMakr. DesignEvo. Namecheap.
 Ejercicio
Clase 24
Crear Boceto de Logo a mano y
luego pasar el logo en Ai con
las herramientas:
Pluma y Buscatrazos
Tarea para el Proyecto
Crear un Logo con Illustrator, utilizando la herramienta pluma y el buscatrazos.
(Si no pueden utilizar el software pueden crear uno con una herramienta online)

Requisitos del logo:

● Qué se relacione con la temática.

● Que tenga fondo transparente (PNG).
● Que tenga buena calidad (Que no se vea pixelado o borroso).
● Que respete la paleta de colores (que no tenga colores que no pertenecen a la paleta).
● Si es con texto que sea legible en tamaño muy pequeño.
● Si es con texto que se comprenda la tipografía y que se relacione con la temática.
● Que se relacione con las tres palabras elegidas para el moodboard.

Realizar un breve informe sobre el logo, que tipo de logo es, como se relaciona a su
proyecto, qué elementos tiene y por qué, ¿qué mensaje envía a los usuarios de esa marca?
Ejemplo de entrega:
DISEÑO DE LOGO

Con la creación del logo buscamos transmitir el concepto de “vive a

través de tus fotos”

La imagen nace de la unión de una cámara de fotos y una carpeta de

archivo o almacenamiento, las cuales son dos de las funciones
principales de nuestra App. Éstos son los elementos necesarios para
transmitir nuestra misión.

Las formas empleadas son simples y redondeadas y con gran

significado, ya que al utilizarlas, nos lleva a pensar en fotos, eventos,
recuerdos, almacenamiento, etc.

El brillo o destello utilizado es un “guiño” para las mujeres, ya que

hemos detectado que son ellas, en su gran mayoría, las encargadas de
capturar más momentos para recordar.

Los colores y las tipografías empleadas enfatizan esta idea de que es

una actividad más que nada femenina, teniendo como acento el
amarillo anaranjado que nos retrotrae a los más pequeños, a la alegría
y la sociabilidad.
 DISEÑO DE LOGO
Bocetos Logotipo Isotipo Logotipo

Carpeta + Cámara Live Pics

En vivo
+ Fotos

Tipografía Paleta de colores Aplicaciones

Tamaños App Icon

Celuar + Foto
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.

Todo en el Aula Virtual.

Muchas gracias por tu atención.
Nos vemos pronto
 ¿Qué es un UI Kit?
Un kit de interfaz de usuario (del inglés User Interface Kit) es un archivo cerrado que incluye varios
elementos ya prediseñados y reutilizables imprescindibles para el diseño de la interfaz de usuario, como
por ejemplo: botones, iconos, tablas, formularios, sliders, etc.
La mayoría de estos kits cuentan con estilos -los atributos visuales del diseño- como: fuentes, colores y
formas.

Los UI Kits pueden ser bastante simples con unos pocos botones y componentes de diseño o
extremadamente robustos con conmutadores que cambian las fuentes, los colores y las formas sobre la
marcha.

Ejemplo de UI Kit
Beneficios del uso de UI Kit
1. Ahorrar tiempo y dinero: No tienes que dedicar tiempo a crear los componentes desde cero ni
preocuparte por los detalles estándar de cada uno. No hay necesidad de comenzar el patrón de un sitio
web o móvil desde cero, lo que permite utilizar nuestro tiempo de forma más eficiente, acelerar el
proceso de diseño y prestar atención a otras partes importantes del trabajo.

2. Comprensión: Puedes aprender buenas prácticas de los UI Kits existentes: cómo están diseñados los
componentes (dimensiones, márgenes y paddings), qué elementos los componen (formas, textos, iconos),
y qué tamaños son apropiados.

3. Versatilidad: Aunque para algunas personas puede resultar limitante trabajar con componentes
prediseñados, el comenzar a trabajar de una base bien estructurada hace más simple comenzar a realizar
cambios y adaptaciones para obtener el resultado buscado, ya que el cambio de estilos es mucho más
rápido.

4. Coherencia y consistencia: Cada elemento colocado en el UI Kit tiene un propósito que mantiene la
relación lógica entre sus partes y componentes. Y no solo se refiere a los elementos per se, sino que
permite unificar atributos de estilo visual únicos como fuentes, colores, y tamaños permitidos en el
diseño.

La creación de estos kits forma un lazo con los desarrolladores de nuestro proyecto, ya que ayudan en la
creación del código y a mantener el respeto visual planteado por nosotros.

Pestaña “Inspect” (Figma)

Los desarrolladores pueden chequear fácilmente el código que crea nuestro elemento (en este caso, un
componente “button”) para imitarlo a la perfección sin necesidad de explicaciones.
Formatos
Si bien hay gran cantidad de UI Kits en formatos .psd (photoshop), no se recomienda utilizarlos para
diseñar UI, aunque sí para el uso y armado de mockups. Para todo lo demás, necesitamos utilizar
elementos .svg (vectorizados), archivos .ai (illustrator), o archivos .pdf editables para que puedan ser
escalables, livianos y reutilizables.

Sin embargo, la mejor manera de presentar nuestro UI Kit es hacerlo mediante archivos de softwares de
diseños de interfaces, tales como Sketch, Figma o Adobe XD.

Sistema de color / Paleta de color

Definir al menos 3 colores:
- Color primario
- Color secundario
- Color acento

Se puede incluso añadir colores para la comunicación:

El color de fondo predeterminado y el color de la tipografía.

La regla 60 - 30 - 10
La regla 60 - 30 - 10 es conocida como la proporción ideal del color y es aplicada en diferentes aspectos
del diseño: gráfico, moda e interior.
Esta regla explica que podemos usar tres colores completamente distintos, pero que lo verdaderamente
importante es tener un control en la cantidad de color que usamos de cada uno.
El color dominante de la marca, que normalmente será asociado como nuestro color corporativo,
inundará el 60% de nuestra web.
El 30% irá destinado a un color que acompañará al color dominante, pudiendo hacer juegos y
composiciones de entre ambos.
Y el último color, el menos presente en la web, tendrá solamente un 10% de protagonismo. Normalmente
se usaría para Call to Actions que nos faciliten la navegación en la web.

Se debe escoger un color dominante y usarlo en el 60% del espacio, otro secundario para que esté en un
30% y un último color para el 10% restante. Sí, solo 3 colores.

El color primario debería ser nuestro color pleno. El color secundario puede ser un color diferente, pero
se lo suele crear utilizando el color primario bajando su saturación a 5 y aumentando el brillo a 100. El
acento puede ser un color complementario del primario.

Sistema de íconos
Definir cuáles serán los íconos a utilizar y sus estados:
- Activo
- Inactivo
Se puede incluir estados de alerta y aprobación también para determinados íconos (como x-marks, trash-
cans y check icons)

Tipografías
Definir la familia y variable tipográfica que se utilizará para, al menos, las siguientes jerarquías:
1. Títulos
2. Subtítulos
3. Citas
4. Párrafos y Textos
5. Botones

Color en tipografías
Hoy en día, las interfaces cada vez están más limpias y más blancas (fondos), por eso es importante
tenerlo en cuenta al elegir el color de nuestras tipografías.
El de la izquierda usa negro #000000 y el otro usa un azul muy oscuro #15163D. Parecen negros los dos,
pero no lo son. ¿Por qué esto es tan importante?
Al bajarle la opacidad a los dos vemos cómo uno va hacia un gris y el otro a un gris con un tono de azul.
Cuando usamos textos con un tono de algún color le estamos dando más oportunidades a que tengan más
armonía con su entorno.

A simple vista, los dos pueden parecer que son negros, pero uno tiene ciertas tonalidades de violeta que
es un color complementario y que hace contraste con el amarillo. Al hacer esto, logramos un contraste y
a la vez una armonía.
 Componentes
Definir cada uno de los elementos que se usarán, como por ejemplo:
1. Barras (superiores, inferiores)
2. Formularios (selectores, campos de textos, botones, etc.).
3. Tarjetas (Solo Texto, Texto+Imagen, etc, Texto+iconos, etc.)
4. Botones
5. Etc.

Si el componente tiene estados (ej: activo, inactivo), se deben mostrar también.

Grillas y columnas
Comunicar cuál será el sistema de grillas y columnas a utilizar
● Estilo (columna o grilla)
● Cantidad de columnas
● Márgenes
● Calles
● Tipo (constraits)
Ilustraciones y formas
Se pueden definir todas aquellos elementos específicos que se necesiten en el UI Kit, como por ejemplo:
● Mapas
● Selector de asiento de cine
● Ilustraciones
● Gráficos
● Figuras decorativas
● Etc.
Librerías en Figma
Las librerías son archivos que nos permiten compartir todos los componentes y estilos creados en ellas
con el equipo. A nivel de organización, se las trata como un archivo más que se utilizan para sistemas de
diseño o assets que se quieran compartir entre archivos y proyectos.
Estas librerías pueden incluir los colores, tipografías y componentes que se diseñaron previamente. Se
utilizan, mayoritariamente, cuando trabajamos en equipo, pero podemos hacer uso de ellas sin necesidad
de publicarlas, sino de forma privada. Esto nos ayudará a acceder a todos nuestros estilos de una forma
mucho más dinámica.

Guías de estilo (Style Guides)

Podemos crear guías de estilo que se verán en el panel de opciones de herramientas, como por ejemplo:
Estilos de colores
Estilos de Tipografías
Estilos de Grillas
Estilos de Efectos (sombras, blur, etc.)

En este ejemplo, aplicaremos la guía de estilo para textos. Para crearla, debemos:
1. Seleccionar el texto que queremos
2. Presionar el ícono “Style”
3. Presionar el ícono “Create Style”
Aparecerá un modal para introducir el nombre de nuestro estilo.

4. Escribir nombre
5. Presionar “Create Style”
El estilo creado aparecerá en el panel de opciones de herramienta listo para su uso.

Una vez cargados todos nuestros estilos, podemos editar nuestras pantallas desde el ícono “Styles” de
una forma mucho más rápida y consistente.
 Sistemas de diseño
Los sistemas de diseño (Design System) son reglas y guías que establecen el punto de partida y la
organización de un diseño. De esta forma, se facilita el trabajo en equipo haciendo que todos los
miembros estén alineados. Recoge tanto la filosofía de una marca, como el tono y la forma de
comunicación.
En este documento se detallan muchas guías de trabajo, lo que consigue que los diseñadores se puedan
centrar en problemas más complejos, evitando los relacionados únicamente con el estilo.

UI Kit vs. Sistemas de diseño

¿En qué se diferencian con los UI Kit?
La principal ventaja de los sistemas de diseño es que son documentos vivos: es un modo de trabajo en
equipo, una manera de establecer valores y principios que identifican el proceder para crear el producto
final. Están específicamente adaptados al proyecto y se crea una guía de estilo que puede utilizar todo el
equipo, no solo los diseñadores. Es decir, los sistemas de diseño son transversales y afectan a todos los
aspectos del producto, desde el contenido hasta lo puramente visual.
Los UI Kits, en cambio, son documentos cerrados que nos sirven de referencia en el desarrollo de una
interfaz. Son plantillas para facilitar el trabajo, lo que se puede volver en nuestra contra si no las
personalizamos adecuadamente al proyecto en el que estás trabajando.

Ejemplos de Sistemas de diseño

Sistema de diseño - Material Design: [Link]
(Utilizado en diseños de Google)
Sistema de diseño - Human Interface: [Link]
(Utilizado en diseños de Apple)

Sistema de diseño - Andes UI: [Link]

(Utilizado en Mercado Libre/Pago)
Sistema de diseño - Freddicons: [Link]
(Utilizado en Mailchimp)

Sistema de diseño - Polaris: [Link]

(Utilizado en Shopify)

Alta fidelidad (Hi-Fi)

Los wireframes de alta fidelidad permiten un mayor acercamiento al resultado final. En ellos se utiliza
contenido real y pueden contener imágenes o color para especificar llamados a la acción y puntos de
decisión, íconos, y otros elementos que aporten detalles. Es lo más cercano al producto final que
podemos crear.
En este tipo de wireframes, la interacción y el contenido reinan por sobre la simpleza, lo que permite
entregar un trabajo más acabado que permitirá realizar correcciones conscientes y aterrizadas sobre el
proyecto. Su gran ventaja es que requiere menos imaginación del cliente para comprender un prototipo.

Para que un proyecto sea considerado en alta fidelidad, debemos volcar todo lo realizado con
anterioridad en nuestro UI Kit a nuestro prototipo funcional y ser lo más realistas posibles en cuanto a
contenido:
Todas las pantallas que componen el proyecto deben estar creadas.
(En nuestro caso con el happy path de la tarea principal de la app alcanza)
El prototipo funcional debe encontrarse perfectamente creado.
El contenido (los titulares, cuerpos de texto, descripciones y demás) deben ser las que planeamos
mantener al momento de llevar a cabo el diseño (programadores).
Debe tener imágenes reales del proyecto
 Proyecto Final

TAREA PARA EL PROYECTO FINAL

Para continuar con el Proyecto Final que estamos desarrollando vamos a crear el UI Kit correspondiente
a nuestro proyecto, el cual deberá incluir:
● Paleta de color: primario, secundario y acento y sumamos el color de fondo y el de tipografía.
● Jerarquías tipográficas: variables tipográficas (bold - medium - light - italic)
● para títulos, subtítulos, párrafos, citas, botones y lo que se necesite.
● Sistema de íconos: estado activo y estado desactivado.
● Componentes: tales como barras de navegación superiores e inferiores, tarjetas, botones (con sus
variables), formularios, modales, etc.
● Ilustraciones y figuras: sólo si el proyecto lo requiere.
Realizar una muestra del UI kit donde diferenciaremos qué elementos estamos mostrando y se presentará
en un archivo unificado y visualmente atractivo.
DISEÑO UX/UI
Clase 25
Branding
Les damos la bienvenida
Vamos a comenzar a grabar la clase
 Clase 24 Clase 25 Clase 26

Logo Branding Entrega Final

● ¿Qué es logo? ● ¿Qué es branding? ● Exposición de proyectos

● Logotipo, Isotipo, ● Consultorio de dudas
● ¿Qué es marca ?
Imagotipo e Isologo.
● Características y función de
● Steve Jobs
los logos. ● Estrategia de Branding
● Diseñador UX/UI y ● Tarea para el Proyecto
Diseñador gráfico. Final
● Tarea para el Proyecto
Final
 Diseño Centrado en el Usuario (DCU)

Analizar Diseñar Validar

Hi-Fi Visual y Contenido

Design Thinking

Empatizar Definir Idear Prototipar Evaluar

Wireframe Digital

Atomic + Guidelines + Grillas

Color + Tipografía + Logo

¿Qué significa Branding?
Branding es un término en inglés, empleado en marketing, que hace referencia al proceso
de hacer y construir una marca mediante la administración estratégica del conjunto total
de activos vinculados en forma directa o indirecta al nombre y/o símbolo (logotipo) que
identifican a la marca influyendo en el valor de la marca, tanto para el cliente como para la
empresa propietaria de la marca.
El branding se refiere a todas esas acciones premeditadas que se llevan a cabo para
influenciar en la percepción que la gente tiene de un producto o servicio, y que así lo
elijan una y otra vez. Fundamentalmente, es la forma en que tu producto o servicio vive en el
corazón y la mente de tu cliente.
Aunque pueda parecer una idea sencilla de comprender, el branding es un concepto difícil
de definir y muy debatido porque las marcas representan algo emotivo y subjetivo. Para
poder llegar a comprender el concepto, es necesario retroceder y entender
qué es la marca.
¿Qué es marca?
Philip Kotler se refiere a las marcas desde el concepto brindado por la American Marketing
Association, que las define como “nombre, término, signo, símbolo diseño o combinación
de ellos, cuyo objeto es identificar los bienes o servicios de un vendedor o grupo de
vendedores con objeto de diferenciarlo de sus competidores” (Kotler, 2000).
Sin embargo, esta definición, a pesar de ser acertada, posee ciertas limitaciones al plasmar
los verdaderos alcances de lo que es una marca, ya que “no da cuenta de las diversas
transformaciones que ha enfrentado la economía capitalista en las últimas décadas”
(Estrella, 1997, p. 27), y por tanto no permite develar los alcances, funciones y realidades de lo
que es una marca en el contexto contemporáneo.
Para comprender apropiadamente lo que estos “logos” son al día de hoy es necesario
entender su evolución, es decir, los distintos caminos que les han permitido llegar hasta el
punto crucial en el que se encuentran en el mundo contemporáneo.
Como vemos a la marca actualmente
Seth Godin: “La marca es el conjunto de expectativas, recuerdos, historias y
asociaciones que provocan que el consumidor se decida por un producto o servicio
en vez de otro”. Lo que significa que el branding es todo lo que haces para influir
activamente en esas decisiones. También dice que: "La marca es el conjunto de
promesas que le haces a tu cliente, lo que espera de ti cuando te comprometes a
prestar tu servicio"

Cuando los consumidores hacen una elección, ¿cómo toman sus decisiones? Sea cual
sea su motivación, la marca es lo que da forma a la percepción de tu empresa en sus
mentes y, en última instancia, lo que convierte a los nuevos clientes en compradores
fieles.

Andy Stalman: define el concepto de marca directamente como “un sentimiento”.

Tema: Branding

Apple en su esencia, su valor central, es que creemos que la gente con

pasión puede cambiar el mundo para bien. Eso es lo que creemos.
Creemos que las personas pueden cambiar el mundo para que sea
mejor y las personas que están suficientemente locas para pensar que
pueden cambiar el mundo son las que en realidad lo hacen.

Autor/as/es: Steve Jobs - Think Different.

Steve Jobs
El nombre Steve Jobs despierta como pocos una admiración única en el mundo.
Simboliza el culto por la simpleza, la perfección y la belleza, tres conceptos que unidos
llevaron a convertir a Apple en la marca más valiosa del mundo. Según la consultora
Interbrand, valía en 2014 U$S120.000 millones, más que Google y Coca-Cola.
Sus lecciones sobre innovación, marketing y diseño son las más recordadas.
Sobre el diseño, explicaba que “no es solo la apariencia, el diseño es cómo funciona” y
se negaba a pensar que “quien golpea primero, golpea mejor”, ya que lo importante,
resaltaba, era “ser el mejor”. La calidad y la estética siempre primaban, como explicaba:
“La mayoría de la gente piensa que el diseño es una chapa, es una simple decoración.
Para mí, nada es más importante en el futuro que el diseño. El diseño es el alma de
todo lo creado por el hombre.”
Steve Jobs
Tras un trabajo intensivo de ocho semanas para encontrar y definir el valor central de la
empresa, el CEO expuso los resultados en una charla interna con los trabajadores de la
compañía y presentó el origen de lo que se convertiría más adelante en la campaña:
'Think Different'.

En la conversación, Jobs dijo: "el marketing se trata de los valores. Este es un mundo
muy complicado, muy ruidoso, y no tendremos oportunidad de que la gente recuerde
mucho sobre nosotros, por lo que tenemos que ser muy claros sobre lo que queremos
que sepan sobre nosotros".

Resaltó a Nike como "el mejor ejemplo de marketing que ha visto el universo",
recordando que a pesar de que venden un commodity, como son los tenis, las personas
piensan en la marca como algo mucho más grande e importante que una compañía de
zapatos. "En sus comerciales, Nike nunca habla de su producto o de por qué sus
zapatos son mejores que los de Reebok ¿Que hace Nike en su publicidad? Honran a
grandes atletas y el gran atletismo. Son quienes son, y esa es su esencia".
Marca no es
Una marca no es un logo, no es un packaging, no es una campaña de publicidad.

Ni siquiera una marca es lo que vos creés que tenés.

Una marca es lo que los demás piensan que eres. Una percepción fundamentada sobre cómo te
ven, qué sentimientos despertas en su interior y qué dicen de vos.

En un negocio, nada es más importante que la marca, porque precisamente es lo que define y
encapsula su esencia.

Es un error común de percepción de las empresas jóvenes y los nuevos emprendimientos pensar
que el branding es únicamente el logo que combina con la paleta de colores de tu empresa y con el
diseño de tu página web o app.

Como un jingle que no sale de tu cabeza, el verdadero branding genera mnemotecnia; el

sentimiento, la experiencia y la emoción a largo plazo que el consumidor asocia a tu marca. Es
una cualidad intangible de tu marca que los clientes conectarán y relacionarán en su vida diaria.
¿Por qué es importante el branding?
El mundo del marketing está saturado. Si tu marca solo tuviera alrededor de 7
segundos para causar una impresión, todo recaería en la fuerza de tu estrategia de
branding y en su buen diseño desde el principio. El branding eficaz es un mecanismo
capaz de hacer que tu empresa destaque y capte la atención de tus posibles clientes.
Cuando se hace bien, el branding adquiere el poder de influenciar, inspirar y provocar
cambios sustanciales.
Echa un vistazo a las marcas grandes y establecidas tales como Google, Apple, Nike o
Coca-Cola. No es una coincidencia que tengan éxito. Estas empresas entienden mejor
que nadie la importancia del branding, y la esgrimen y aprovechan en cada aspecto de
su negocio y su marketing. Además, nunca se detienen. Continúan optimizando sus
estrategias, aprendiendo de sus errores y creciendo a través de sus constantes
esfuerzos de branding para mantener la lealtad de sus clientes.
Estrategia de branding
Una buena marca no siempre es cuantificable, ni siquiera racional: es experiencial y se basa
en sentimientos. Puede ser difícil conceptualizar una cualidad intangible, más aún,
intentar medirla.

Si necesitamos darle una definición básica, una estrategia de marca es un plan útil para
identificar lo que representa su marca de adentro hacia afuera.

A través de la investigación y el análisis, este proceso esencial le permite determinar el

posicionamiento competitivo y definir la forma más auténtica de llegar a su mercado
objetivo a nivel emocional.
Una estrategia para branding debe tener en cuenta
varios aspectos
● Madurez de la empresa: Es decir, en qué etapa de desarrollo se encuentra la empresa. No es lo
mismo crear una marca para una empresa nueva que renovar una marca que ya lleva varios
años en el mercado y ya posee un cierto número de seguidores.
● Target: Esta métrica se basa en la edad, el género, los gustos y muchos otros aspectos del
potencial cliente.
● Estudio de mercado: Dicho estudio busca descifrar la manera en que su target visualiza la
marca, cuáles son sus puntos fuertes y en qué está fallando o, simplemente, no existe en la
mente del consumidor.
● Plataformas: Se plantean las principales plataformas que pueden ser utilizadas por la marca
para tener el mayor impacto posible en el mercado actual.
● Tipo de promoción: En este nivel la herramienta promocional que puede utilizar una marca
puede ser variada, pero siempre debe complementarse entre sí. Es decir, una marca no puede
desvirtuar su identidad, ya que esta es uno de los aspectos básicos a la hora de posicionarse en
la mente de la franja de público hacia la que va dirigida.
● Originalidad: Definir en tu marca algún objeto, color, o frase para que la reconozcan como suya
y poseas autonomía sobre ella.
¿Para qué sirve?
1. Potencia y trabaja las diferencias de nuestra marca con la del resto de competidores
de nuestro sector.

2. Es fundamental para el posicionamiento de la marca. Sin branding el cliente o

consumidor no ubicará la marca.

3. Es la manera profesional de enfocar y trabajar la marca a largo plazo.

4. Es la vértebra de la estrategia de marketing digital, dándole sentido común y

coherencia.

5. El branding define las líneas comunicacionales de la marca en todos los canales,

soportes y plataformas.
Branding
El branding es un proceso estratégico y analítico, pero también exige creatividad y
consistencia con cada uno de los aspectos de la marca. Debido a la gran cantidad de
elementos a considerar del branding, te recomendamos crear una estrategia de branding
sólida, consistente y apropiada. Así, podrás usarla como una guía de estilo de tu
compañía, donde se tomen muy en cuenta tanto los elementos visuales como los no
visuales del branding como un todo.

Veamos cuáles son los elementos más importantes del branding:

Elementos visuales
● Nombre de la marca -Sí estamos hablando de branding, lo es todo. El nombre de tu negocio debe
manifestar quién eres, mientras informas qué haces y al mismo tiempo das una buena impresión.
Necesitas verificar que el nombre que escojas esté disponible, que no tenga connotaciones
lingüísticas inusuales o que sea difícil de pronunciar, y que represente los valores de tu marca.
● Logo - Es común pensar en el logo cuando se habla de branding. A menudo se cree que forman una
sola idea, pero son dos entidades muy diferentes. El logo es uno de los elementos más importantes
de la marca, pero es solo una pieza más del branding. Es la mínima expresión de tu marca, tu
símbolo.
● Colores de la marca - La paleta de colores dará forma a tu identidad de marca y será tu firma en la
estrategia de marketing. Es crucial entender el impacto psicológico de los colores en el consumidor
y la forma en que influencian en sus decisiones de compra. Los colores transmiten mensajes y la
personalidad de la marca.
● Tipografía - Afianzará la personalidad de tu marca y te ayudará a comunicar tu mensaje. La
recomendación es que nunca se usen más de tres fuentes diferentes. Y que sea coherente a los
demás elementos.
Elementos visuales
● Tarjetas de presentación - Aún mantienen su relevancia y son un elemento importante del
branding. Si tu empresa y tu red de contactos está en expansión, las tarjetas son una forma
profesional y amigable de invitar a recordar tu marca. Deben mantener la coherencia con el
resto de los elementos del branding.
● Página Web - Ahora más que nunca es crucial tener una presencia profesional en línea, dado
que es una parte esencial de una apropiada estrategia de branding y de marketing. A través de
ella podrás atraer nuevos usuarios, alcanzar nuevos consumidores potenciales, promocionar y
vender productos, enseñar e informar a los clientes y, sobre todo, comunicarte de manera
profesional.
● Eslogan - Técnicamente no es un elemento visual, pero cumple funciones sumamente
similares, no siempre es una parte esencial del branding, pero, cuando se hace bien, puede
convertirse en una poderosa herramienta de marketing.“Duracell, dura más”, o “Destapa la
felicidad con Coca-Cola”, son los ejemplos perfectos de eslóganes que representan a su marca.
Hacen que te imagines usando el producto al oírlos. Como puedes ver, cuando su diseño es
apropiado, el eslogan puede formar parte integral de la marca.
Elementos no visuales
● Misión - La misión de una empresa es una parte vital del branding. Su función es expresar los
propósitos de la marca y sus valores. En solo unas pocas oraciones, debe permitir a cualquiera
que conozca tu marca comprender claramente de qué se trata, como una explicación del “¿por
qué?”, que te permita delimitar no sólo qué ofrece tu negocio, sino también el propósito de por
qué lo hace.
● Visión - La visión es una redacción clara y concisa que sirve como un mapa de ruta para
delimitar la visión a futuro de la marca. La visión puede evolucionar con el tiempo, pero siempre
debe mantener afinidad con los valores de tu marca.
● Valores - En un mundo en donde la transparencia y la autenticidad son más relevantes que
nunca, los consumidores buscan honestidad y conectar con marcas que defiendan valores
similares a los suyos. Los valores de tu marca son la base de tu negocio. Imagina estos valores
como la brújula que dirige y respalda tu empresa, así como las decisiones y acciones que se
tomen.
● Identidad de marca - Te ayudará tanto a visualizar la personalidad de tu empresa como a
entender tu compromiso con la audiencia. Teniendo muy en cuenta la misión, la visión y los
valores que han dado forma a la persona de tu marca, la mezcla de todos estos elementos
resultará en una identidad definitiva y comprensible.
Elementos no visuales
● Historia - Nuestra historia y de dónde venimos es una parte crucial de la vida, y así también lo
es para el branding. Las historias son cautivadoras, atractivas, intrigantes y nos ayudan a
construir vínculos. Es tu oportunidad para desarrollar una narrativa que fomente un vínculo
significativo con tu audiencia y que los ayude a entender mejor de qué se trata tu negocio.
Deberá establecer el tono de todas las formas de contenido y elementos de branding de tu
empresa, ya sean publicaciones en redes sociales, campañas de marketing u otros contenidos
similares. Esto significa mantener la consistencia y la autenticidad todo el tiempo. La historia de
la marca puede encargarse de introducir a los fundadores de la compañía y los orígenes de la
empresa, o bien narrar una apasionante historia del propósito que impulsa el negocio.
● Voz de marca - La forma de comunicarse de la marca es tan única como la de una persona.
Hay que definir con qué tono va a comunicarse siempre la marca. La voz de tu marca dará
identidad a la forma de comunicarse, desarrollará mejor la consistencia de tu branding y
ayudará a generar confianza. Una vez hayas definido la voz de tu marca, podrás usarla en tus
estrategias de marketing y canales de comunicación. Esto tendrá solidez tanto internamente
con los empleados, como externamente con los clientes.
Consejos para gestionar tu marca
La consistencia es la clave: En la búsqueda del reconocimiento, la confianza y la lealtad de los clientes hacia tu
marca, la consistencia es un aspecto vital del branding. Las empresas confiables, que saben cómo mantener su
marca unificada y consistente en todas sus plataformas.

La reputación lo es todo: Todos conocemos ese sitio del que nos alejamos a toda costa, sólo por su mala
reputación. Incluso aunque no lo hayamos experimentado de primera mano. Lo mejor será cuidar la imagen de
tu marca a toda costa y desde el principio.

Cumplir tus promesas: Un aspecto fundamental consiste en siempre mantener tu palabra y cumplir tus
promesas. Esto incluye las promesas que tu marca ha hecho a tus clientes, empleados e inversionistas, así como
las acciones que tomas para mantenerlas.

Haz de la conversación un objetivo constante: Es crucial abrir y mantener un diálogo constante entre tu marca
y tus consumidores, tanto online como offline. Hacer preguntas y escuchar con atención las críticas. Esto te
ayudará a implementar cambios basados en los usuarios.

Construye vínculos duraderos: Todo se reduce a diferenciación, compromiso y lealtad. Asegúrate de cuidar bien
esos vínculos tan importantes. Después de todo, los clientes leales, que regresan por más, son los más
importantes.
 Ejercicio
Clase 25
Ver ejemplo de
manual de marca
[Link]
Tarea para el Proyecto
Para continuar con el Proyecto Final que estamos desarrollando:

Como vimos hoy en clase: el branding hace que todo lo referido a una marca se sienta
auténtico, honesto, coherente, y que cada elemento que la conforma nos transmita el
mismo mensaje. Es un todo que hace referencia a la marca, a su visión, misión y valores, la
suma de sus elementos representa su personalidad, su voz y define su actuar.

Esta tarea consiste en chequear que cada parte de su proyecto sea coherente, tanto en
contenido como en estética, es decir que cada una de las tareas realizadas se vea, se
sienta, y exprese el alma de su proyecto. Que todo se sienta parte del mismo “mundo”.

Poco a poco ir incorporando todos los conceptos y elementos aprendidos dentro de la

presentación de slides, ya sea en la forma de expresarse, en sus colores, en su tipografía.

Para la entrega final debe sentirse como un todo coherente diseñado a conciencia.
Ejemplo del branding de la
marca autocosmos:
Ejemplo de corrección de
una entrega:
Recordar nombrar los integrantes del equipo.

Portada del proyecto

La app que le hace frente a la decadencia de los oficios manuales.

A través de tutoriales breves, nos permite desarrollar nuevas
habilidades para contribuir al consumo responsable y sostenible.
Recordar aclarar problema - usuario - solución.

Objetivo y cliente
El objetivo de bili es fomentar el aprendizaje de oficios y el desarrollo de habilidades
manuales en las nuevas generaciones, para poder resolver de manera autónoma
cuestiones de la vida cotidiana y, a su vez, contribuir al consumo responsable.

El usuario al que se orienta esta app es de jóvenes autodidactas, que tienen la

intención de llevar un estilo de vida más sostenible. Al mismo tiempo, no poseen los
recursos para contratar a alguien o reponer las cosas cada vez que se rompe algo.
Recordar revisar que todo sea coherente. Un todo.

Branding - Valores de la marca

“Vas a poder:

Aprender cada día una

nueva habilidad,

contribuir a la sustentabilidad

y darle a tus cosas una

nueva posibilidad”
Recordar siempre justificar el diseño del logo.

Nombre + Logo
Recordar siempre justificar la elección de colores.

Colores

#009688 #DDEFF1 #FF7043

Recordar siempre justificar la elección tipográfica.

Familia tipográfica para Títulos en las Slides

Aa A
AaBbCc01234
aAaBbCc01234
ABCDEFGHIJKLMN ABCDEFGHIJKLMN
OPQRSTUVWXYZ OPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
0123456789 0123456789
¡!¿?$%#& ¡!¿?$%#&

Montserrat Regular Montserrat Bold

Recordar colocar las 3 palabras clave.

Moodboard
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.

Todo en el Aula Virtual.

Muchas gracias por tu atención.
Nos vemos pronto
DISEÑO UX/UI
Clase 26
Entrega final
Les damos la bienvenida
Vamos a comenzar a grabar la clase
 Clase 25 Clase 26 Clase 27

Branding Entrega final Elevator Pitch

● ¿Qué es branding? ● Exposición de proyectos ● ¿Qué es y para qué sirve?

● ¿Qué es marca ? ● Ejemplos en clase
● Steve Jobs ● Estructura del elevator
● Estrategia de Branding pitch
● Tarea para el Proyecto ● Storytelling
Final ● Tarea para el Proyecto
Final
Entrega del Proyecto Final Obligatorio
La entrega final de este curso se realiza mediante el link al “Formulario de Entrega Final”.

1 solo representante del equipo debe completar en el formulario:

● Nombre del equipo

● Nombre completo de los integrantes del equipo
● Link al Proyecto en formato Google Slides
● PDF
● Responder si o no en el listado de tareas
¡Felicitaciones!
Ya completaron la segunda
parte del curso: Diseño UX/UI
Preentrega:
Tarea para el Proyecto
Para comenzar con el Proyecto Final que vamos a desarrollar durante todo este curso:

Vamos a realizar una Investigación de Usuario, indagando sobre sus comportamientos,

necesidades y motivaciones, realizando preguntas que nos permitan descubrir: ¿qué hace?,
¿qué piensa?, ¿qué dice?, ¿en qué cree?, ¿que lo frustra?, ¿qué lo motiva?, ¿qué le preocupa?...

y tenemos que determinar en primera instancia:

● ¿Quién es nuestro usuario? (en quién basamos nuestra investigación)

● ¿Cuál es el problema? (necesidad detectada)
● ¿Cuál es la solución que vamos a ofrecer? (En forma de una App).

Informe: Nota periodística que valide la problemática, captura de redes sociales donde los
usuarios exponen que esa situación es un problema para ellos, etc.
Tarea para el Proyecto Final
Siguiendo con el Proyecto Final que vamos a desarrollar durante todo este curso:
Vamos a realizar un Benchmarking, comparando 3 competidores directos de nuestra App y
tenemos que realizar un cuadro comparativo:
● Nombre y “logo” de las 3 App (Para poder ver el diseño de mi competencia)
● Reseña de las 3 App (Para poder ver el enfoque de mi competencia)
● Captura de las 3 App (Para poder ver el diseño de mi competencia)
● Cantidad de Pasos por Acción (De 3 acciones por cada una de las 3 App)
● Vocabulario o Errores (Óptimo, Error menor, Error mayor - que no me permite operar)
● Diseño (Óptimo, Básico, Malo)
● Fortalezas y Debilidades (De cada una de las 3 App)
Finalmente realizar un breve informe con las conclusiones que obtenemos del cuadro. (¿Quién es
mi competencia?, ¿quiénes son sus usuarios?, ¿Cómo les hablan?, ¿En qué se diferencian?, ¿Qué
puedo ofrecer en mi App que ellos no tengan?, ¿Cómo puedo superar su propuesta?).
Tarea para el Proyecto
Para continuar con el Proyecto Final que vamos a desarrollar durante todo este curso:
Vamos a realizar un Mapa de Empatía, que nos ayudará a responder preguntas específicas sobre
nuestros usuarios siempre teniendo en mente nuestra idea de App.
Tenemos que determinar en primera instancia:
● ¿Quién es la persona que estamos intentando comprender? (proto persona)
● ¿En qué situación se encuentra? (datos que estén relacionados con nuestra app)
● ¿Cuál es su papel en la situación?
○ (¿Por qué es él/ella y no otro/a? que lo conecta a nuestro proyecto.
¿Qué condiciones hace que sea un futuro usuario de nuestra app?).
Tarea para el Proyecto
Vamos a realizar la Ficha de Proto Persona que debe contener la siguiente información:

● Datos personales y foto.

● Datos demográficos.
● Biografía.
● Intereses
● Hábitos de consumo.
● Objetivos, sueños, metas.
● Su relación con la tecnología.
● Frustraciones y motivaciones.
● Una frase.

Tener en cuenta que todas las tareas serán entregadas juntas en las Pre entregas (que se
encuentran marcadas en el cronograma del curso de la clase 0)

Las tareas se entregan mediante una presentación de Google Slides por equipo.
Tarea para el Proyecto
Para continuar con el Proyecto Final que vamos a desarrollar durante todo este curso:
Vamos a realizar 5 entrevistas, esto nos permitirá recopilar datos e insights sobre los usuarios,
empatizar con ellos, validar la proto persona y transformarla en una user persona.
Para elegir a los entrevistados tendremos en cuenta:
● Que sea mayor de 18 años.
● Que entren en el grupo de usuarios que necesitamos validar (proto persona)
● Que la problemática de mi proyecto los atraviesa directamente (¿la solución que voy a
brindar en mi app influye en la vida de esta persona?)
● Que tenga disponibilidad para realizar la entrevista presencial o virtual (dentro de un
tiempo razonable) y permita que la misma sea grabada (sino la entrevista no será válida).
Realizar un informe: sobre los resultados de las entrevistas, los datos recopilados, los insights que
consiguieron descubrir (si es que los hay), especificar de qué forma los entrevistados validaron a la
proto persona y se transformaron en user personas de ahora en más.
Tarea para el Proyecto
Para continuar con el Proyecto Final que vamos a desarrollar durante todo este curso:
Vamos a realizar un POV aplicando las técnicas de Storytelling y Storyboard, esto nos permitirá a
nosotros y a otros/as comprender y empatizar con nuestros usuarios.
Para ello realizaremos las siguientes tareas:
● POV - Completar la frase: Usuario - Necesita - Porque.
● Storytelling - Crear una narración sobre nuestro proyecto que cuente con un:
Inicio - Nudo - Desenlace, que cree una conexión emocional con nuestra User Persona.
Que sea persuasiva y tenga relación con nuestros usuarios.
● Storyboard - Representar visualmente la narración. Ilustrando los momentos clave de la
historia (6 dibujos máximo).
Recuerden que no es necesario saber dibujar “bien” sino que se entienda la idea. Puede ser a
mano o digital, si es a mano deberán pasarlo a tinta y escanearlo con buena calidad y buena
luz para que se pueda visualizar correctamente.
Tarea para el Proyecto
Para continuar con el Proyecto Final que vamos a desarrollar durante todo este curso:
Vamos a definir un MVP, esto nos permitirá tener en claro cuales son las funcionalidades básicas
que debe tener mi app.
Para hacerlo debemos:
● Redactar una lista de tareas (todas las que se me ocurran relacionadas a mi proyecto).
● Definir prioridades, cuáles tareas son imprescindibles para el funcionamiento de la app.
● Definir cuáles tareas son deseables para versiones más avanzadas de mi app en un futuro
(versión 2.0).
● Identificar cuál es la función básica y primordial que mi usuario realizará en mi app, y por
qué es deseable para mi usuario.
Realizar un informe sobre las conclusiones del ejercicio, cuáles tareas se desarrollaran primero y
por qué (explicar brevemente cada tarea).
Tarea para el Proyecto
Para continuar con el Proyecto Final que vamos a desarrollar durante todo este curso:
Vamos a realizar la Arquitectura de la información de nuestro proyecto aplicando la técnica de
Card Sorting Abierto con Optimal Workshop, obtendremos como resultado el Dendrograma y
la Matriz de similitud con las que realizaremos un informe de conclusiones.
Para ello realizaremos las siguientes tareas:
● Completar las tarjetas: 20 (tareas que surgen del MVP y Benchmarking)
● Crear una introducción detallada para los participantes, explicando la consigna que deben
cumplir con respecto a las tarjetas, realizarles preguntas de segmentación básicas (por
ejemplo: nombre, ciudad, edad) y redactar las preguntas finales para los usuarios, para
clarificar sus decisiones y ver si comprendieron el lenguaje de las tarjetas.
● Invitar a 10 participantes mínimo (que pertenezcan al grupo de la user persona) y enviarles
el link para el cardsorting, debemos recordarles que se realiza desde una PC si o si.
● Analizar e interpretar los resultados (gráficos y respuestas), y realizar un informe con las
conclusiones del estudio (aciertos, errores, correcciones realizadas, conclusiones, etc.).
Tarea para el Proyecto
Luego vamos crear el Mapa de sitio, en Whimsical, utilizando la información validada por los
usuarios, obtenida del informe del estudio de CardSorting y sus gráficos.
Para hacerlo debemos:
● Ir a Whimsical y seleccionar Flowchart
● Definir cuáles van a ser mis categorías y subcategorías a partir de los resultados dados
por los participantes/usuarios (como ellos ordenaron la información)
● Crear el diagrama de mi app, utilizando los recuadros y flechas, en forma vertical, partiendo
desde la HOME, siguiendo a las categorías principales y luego desde estas a las
subcategorías y dentro las tareas u opciones que se encuentren.
Tener en cuenta que como resultado debe quedar el diagrama de app lo más ordenado y
coherente posible. Vamos a tratar de respetar al máximo las preferencias del usuario y también
tener en cuenta nuestra interpretación de los resultados (por ej: si en las preguntas finales
notamos que varias tarjetas no fueron comprendidas, pudieron ser ubicadas en lugares
incorrectos o al azar, y tendremos que renombrarlas para facilitar su comprensión.)
Tarea para el Proyecto
Para comenzar a diseñar la interfaz del prototipo del Proyecto Final que vamos a desarrollar:
Comenzaremos realizando en whimsical el Task Flow de nuestro proyecto. Luego podremos
realizar el User Flow, empezando con la Función principal de nuestra app (happy path),
después le sumaremos los posibles errores que puedan surgir y por último las demás tareas o
funcionalidades que vayan a formar parte de la primera versión (MVP) de nuestro proyecto.
Para ello necesitaremos previamente tener hechos:
● User persona
● MVP
● POV - Storytelling + Storyboard
● Arquitectura de la información
● Analizar e interpretar las conclusiones de nuestros informes previos.
Aclaraciones: Para el User flow deben utilizar las figuras geométricas sugeridas en esta clase
como código para los diagramas, el diagrama se realiza de izquierda a derecha, arriba a abajo,
tiene un comienzo y un fin, en lo posible acomodarlo de forma que no se crucen las flechas.
Entrega final:
Tarea para el Proyecto
Para comenzar a diseñar la interfaz del prototipo del Proyecto Final que vamos a desarrollar:
Comenzaremos realizando el boceto del Wireframe a mano de nuestro “Happy Path”, es decir el
camino feliz que recorre el usuario para solucionar su problema en nuestra app.
Empieza por Registrarse en la app, llega a la Home, y luego las siguientes pantallas para
completar el happy path. Luego de tener todos los bocetos de las pantallas a mano y usándolos
de referencia haremos los Wireframes Digitales en Figma utilizando los elementos provistos para
facilitar la tarea.
Para tener claro que pantallas voy a diseñar necesitaremos previamente tener hechos:
● Task Flow
● User Flow
● Mapa de Sitio
● MVP + POV + Storyboard
Aclaración: Los wireframes digitales van a estar en Fidelidad Baja, es decir, en escala de grises,
con los elementos dados, sin el contenido de texto específico, ni imágenes aplicadas.
Tarea para el Proyecto Final
Para continuar diseñando la interfaz del prototipo del Proyecto Final que vamos a
desarrollar:
A partir de los Wireframes digitales (pantallas sencillas), vamos a incorporar los Patrones
de Diseño (los de navegación y luego los de interacción) vistos en clase. Para realizar esta
tarea necesitaremos previamente tener hechos los:
● Mapa de sitio
● User Flow
● Wireframes a mano
● Wireframes digitales
Aclaraciones: Guarden todo el proceso, es decir guarden los wireframes digitales y
luego sobre una copia incorporen los patrones de diseño. Para esta tarea utilizaremos
el Anexo de la clase 13.
Tarea para el Proyecto
Para continuar diseñando la interfaz del prototipo del Proyecto Final:
Una vez diseñadas las pantallas del “Happy Path” con los Patrones de diseño, vamos a convertir el
prototipo en un Prototipo Funcional conectando el camino que va a recorrer el usuario, para poder
realizar las pruebas de usabilidad.
Para este punto tendremos previamente tener hechos los:
● Wireframes a mano
● Wireframes digitales (En fidelidad baja, clase 12)
● Wireframes con patrones de diseño (En fidelidad baja, clase 13)
Aclaraciones: Ahora que haremos el prototipo funcional pasaremos a una Fidelidad media, es decir,
continuamos en escala de grises, con pantallas diseñadas con los elementos dados en la clase 13, ya
tenemos las pantallas diseñadas para Android con las medidas de uno de los modelos de celular que
ofrece Figma, con partes del texto específico de mi proyecto (lo que permita comprender y ubicar al
usuario en una prueba de usabilidad) y sin imágenes.
Tarea para el Proyecto
Para continuar con el Proyecto Final que estamos desarrollando:
Realizar 5 Pruebas de Usabilidad con usuarios que se ajusten al perfil de tu proyecto (User
personas). Crear tres cuadros con los datos cuantitativos de las métricas de eficiencia, eficacia y
satisfacción (para la métrica de satisfacción usaremos Google form para crear un formulario con
las preguntas, y finalizadas las pruebas se las enviaremos a los usuarios.)
● Escenario Hipotético.
● Listado de tareas, Preguntas (para antes y después de las pruebas) Intro. y Cierre.
● Planillas de registro (usar una por usuario para tomar notas):
○ Nombre del usuario.
○ Criterio de éxito de la tarea que se puede verificar/observar. Ej: Reservar una sesión.
○ ¿Pudo realizar la tarea con éxito? Responder: 1: Sí / 0: No
○ ¿Cuántos pasos le tomó realizar la tarea? ¿Cuánto tiempo tardó?
○ Registro de problemas detectados. Observaciones.
● Informe de conclusiones (uno sobre todas las pruebas):
○ Qué funcionó, Qué no funcionó y Recomendaciones generales.
Tarea para el Proyecto
Para continuar con el Proyecto Final que estamos desarrollando:
A partir de los Wireframes y las conclusiones obtenidas de las Pruebas de Usabilidad, vamos a
modificar el prototipo incorporando todos los conceptos de Atomic Design.
Para ello realizaremos las siguientes tareas:
● Crearemos átomos, moléculas y organismos.
● Luego crearemos componentes con dichos elementos.
● Crearemos componentes hijos o instancias de los componentes maestros.
● Luego los incorporaremos a las plantillas (es decir formaremos las pantallas con ellos).
● Crearemos variantes de los elementos para los casos que sea necesario.
Aclaración: No se desesperen, el incorporar los elementos de atomic design no lleva solo dos días
de trabajo, sino un poquito de trabajo todos los días hasta lograr todas las pantallas del Happy
Path. Recomiendo que en esta etapa diseñen lento y con cuidado ya que estos serán los
elementos definitivos de la app y deben funcionar correctamente.
Tarea para el Proyecto
Para continuar con el Proyecto Final que estamos desarrollando:

Agregar al diseño de pantallas las Grillas y ordenar los elementos de cada pantalla de acuerdo a
estas, cuidando de que si ampliamos la imagen sea pixel perfect.

Para ello realizaremos las siguientes tareas:

● Elegir el sistema de grillas que necesita mi diseño, 1, 2, 3 o 4 columnas máximo.
● Márgenes de 16 dp para Android
● Mínimo de Calles de 8 dp para Android (si necesito más grande deben ser múltiplos de esa
medida).
● Medida recomendada para los elementos que pueden ser tocados por los usuarios: 48 dp
para Android
● Los elementos más pequeños deben medir como mínimo 24 dp x 24dp.
Aclaración: Recordar utilizar la Grilla de Columnas para el orden vertical y la Grilla de Cuadrícula
para el orden horizontal.
Tarea para el Proyecto
Para continuar con el Proyecto Final que estamos desarrollando:
De a poco ir incorporando las Guidelines o Pautas de diseño de Android = “Material Design”
para el cual estamos diseñando, cuidando de respetar la estética, valores y pilares de la
marca Android.
Para ello investigaremos:
● Qué tipo de botones usan.
● Cuántos colores permiten.
● Cómo son los iconos.
● Qué tipografía recomienda.
● Es un diseño Flat = chato o con volumen y sombras.
● Qué valores o principios inspiraron estas decisiones estéticas en sus pautas de diseño.
Realizar un breve informe.
Tarea para el Proyecto
Para continuar con el Proyecto Final que estamos desarrollando:
Crear un Moodboard en Ai con imágenes que hablan solas (sin textos o narraciones) sobre el
proyecto y temática que abarca. Tener en cuenta para armarlo y seleccionar las imágenes, las tres
palabras clave que representen y guíen la estética del proyecto, (los valores y el alma del
proyecto.)
Puede incluir imágenes de:
● Emociones que provoca en las personas.
● Acciones relacionadas.
● Colores que generan la sensación que ustedes quieran generar con su app.
● Texturas relacionadas a la temática.
● Elementos relacionados a la temática.
● App que utilizan como modelo o inspiración, o alguna que es como esperan que luzcan al
finalizar el curso en fidelidad alta.
Aclarar cuáles fueron las tres palabras clave fuera del moodboard.
Tarea para el Proyecto
Para continuar con el Proyecto Final que estamos desarrollando:
Vamos a utilizar todo lo visto en clase para definir una Paleta de 3 colores:
1 principal, 1 secundario y 1 acento (3 como lo indica Android pero si diseñas para IOS
únicamente vas a utilizar 1 color principal).
Asegurate que los colores o el color que elijas exprese el alma del proyecto que estás diseñando.
Para ello realizaremos las siguientes tareas:
● Investigar sobre qué colores simbolizan las 3 palabras clave de mi proyecto.
● Crear la paleta con Adobe color CC.
● Realizar un breve informe sobre el analisis de color y allí justificar porque fueron elegidos.
● Luego los incorporaremos a los elementos de las pantallas.
● En la mayoría de los casos mantendremos el blanco como fondo principal de pantallas
(aunque no forma parte de la paleta de 3 colores).
Tarea para el Proyecto
Para continuar con el Proyecto Final que estamos desarrollando:
Vamos a utilizar todo lo visto en clase para definir una tipografía para utilizar en la
presentación de slides, es decir para la Entrega Final del proyecto. Será únicamente
para los títulos, y será acompañada con Roboto en los textos más largos.
Asegurate que la tipografía que elijas exprese el alma del proyecto que estás diseñando.
Realizar un breve informe sobre tu elección junto con una muestra de la tipografía elegida.
Dentro del prototipo vamos a utilizar:
● Tipografía Roboto para Android.
Tarea para el Proyecto
Para continuar con el Proyecto Final que estamos desarrollando vamos a crear el UI Kit
correspondiente a nuestro proyecto, el cual deberá incluir:
● Paleta de color: primario, secundario y acento y a parte el color de fondo y el de tipografía,
todos con sus respectivos códigos hexadecimales por ej: #58C3BB
● Jerarquías tipográficas: Tipografía correspondiente a las guidelines y sus variables
tipográficas con sus muestras ( light - medium - bold - italic) para títulos, subtítulos, párrafos,
citas, botones y lo que se necesite.
● Sistema de íconos: estado activo y estado desactivado.
● Componentes: tales como barras de navegación superiores e inferiores, tarjetas, botones (con
sus variables), formularios, modales, etc.
● Ilustraciones y figuras: sólo si el proyecto lo requiere.
Cómo mostrar el UI kit: diferenciar por medio de títulos qué elementos estamos mostrando y todo
se presenta en un archivo unificado visualmente atractivo.
En otra slide no olvidar mostrar la evolución de pantallas desde wireframes a mano a alta
fidelidad.
Tarea para el Proyecto
Para continuar con el Proyecto Final que estamos desarrollando:
Crear un Logo con Illustrator, utilizando la herramienta pluma y el buscatrazos.
(Si no pueden utilizar el software pueden crear uno con una herramienta online)
Requisitos del logo:
● Qué se relacione con la temática.
● Que tenga fondo transparente (PNG).
● Que tenga buena calidad (Que no se vea pixelado o borroso).
● Que respete la paleta de colores (que no tenga colores que no pertenecen a la paleta).
● Si es con texto que sea legible en tamaño muy pequeño.
● Si es con texto que se comprenda la tipografía y que se relacione con la temática.
● Que se relacione con las tres palabras elegidas para el moodboard.
Realizar un breve informe sobre el logo, que tipo de logo es, como se relaciona a su
proyecto, qué elementos tiene y por qué, ¿qué mensaje envía a los usuarios de esa marca?
Tarea para el Proyecto
Para continuar con el Proyecto Final que estamos desarrollando:
Como vimos en clase: el branding hace que todo lo referido a una marca se sienta
auténtico, honesto, coherente, y que cada elemento que la conforma nos transmita el
mismo mensaje. Es un todo que hace referencia a la marca, a su visión, misión y valores, la
suma de sus elementos representa su personalidad, su voz y define su actuar.
Esta tarea consiste en chequear que cada parte de su proyecto sea coherente, tanto en
contenido como en estética, es decir que cada una de las tareas realizadas se vea, se
sienta, y exprese el alma de su proyecto. Que todo se sienta parte del mismo “mundo”.
Poco a poco ir incorporando todos los conceptos y elementos aprendidos dentro de la
presentación de slides, ya sea en la forma de expresarse, en sus colores, en su tipografía.
Para la entrega final debe sentirse como un todo coherente diseñado a conciencia.
Ejercicio Práctico
Clase 26
Exposición de los proyectos
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.

Todo en el Aula Virtual.

Muchas gracias por tu atención.
Nos vemos pronto
 Branding
¿Qué significa Branding?
Branding es un término en inglés, empleado en marketing, que hace referencia al proceso de hacer y
construir una marca mediante la administración estratégica del conjunto total de activos vinculados en
forma directa o indirecta al nombre y/o símbolo (logotipo) que identifican a la marca influyendo en el
valor de la marca, tanto para el cliente como para la empresa propietaria de la marca.
El branding se refiere a todas esas acciones premeditadas que se llevan a cabo para influenciar en la
percepción que la gente tiene de un producto o servicio, y que así lo elijan una y otra vez.
Fundamentalmente, es la forma en que tu producto o servicio vive en el corazón y la mente de tu cliente.
Aunque pueda parecer una idea sencilla de comprender, el branding es un concepto difícil de definir y
muy debatido porque las marcas representan algo emotivo y subjetivo. Para poder llegar a comprender el
concepto, es necesario retroceder y entender
qué es la marca.

¿Qué es marca?
Philip Kotler se refiere a las marcas desde el concepto brindado por la American Marketing Association,
que las define como “nombre, término, signo, símbolo diseño o combinación de ellos, cuyo objeto es
identificar los bienes o servicios de un vendedor o grupo de vendedores con objeto de diferenciarlo de
sus competidores” (Kotler, 2000).
Sin embargo, esta definición, a pesar de ser acertada, posee ciertas limitaciones al plasmar los verdaderos
alcances de lo que es una marca, ya que “no da cuenta de las diversas transformaciones que ha
enfrentado la economía capitalista en las últimas décadas” (Estrella, 1997, p. 27), y por tanto no permite
develar los alcances, funciones y realidades de lo que es una marca en el contexto contemporáneo.
Para comprender apropiadamente lo que estos logos son al día de hoy es necesario entender su
evolución, es decir, los distintos caminos que les han permitido llegar hasta el punto crucial en el que se
encuentran en el mundo contemporáneo.

Como vemos a la marca actualmente:

Seth Godin: “La marca es el conjunto de expectativas, recuerdos, historias y asociaciones que provocan
que el consumidor se decida por un producto o servicio en vez de otro”. Lo que significa que el branding
es todo lo que haces para influir activamente en esas decisiones. También dice que: "La marca es el
conjunto de promesas que le haces a tu cliente, lo que espera de ti cuando te comprometes a prestar tu
servicio" cuando los consumidores hacen una elección, ¿cómo toman sus decisiones? Sea cual sea su
motivación, la marca es lo que da forma a la percepción de tu empresa en sus mentes y, en última
instancia, lo que convierte a los nuevos clientes en compradores fieles.
Andy Stalman: define el concepto de marca directamente como “un sentimiento”.

"Apple en su esencia, su valor central, es que creemos que que la gente con pasión puede cambiar el
mundo para bien. Eso es lo que creemos. Creemos que las personas pueden cambiar el mundo para que
sea mejor y las personas que están suficientemente locas para pensar que pueden cambiar el mundo son
las que en realidad lo hacen".
Steve Jobs - Think Different.

Steve Jobs:
El nombre Steve Jobs despierta como pocos una admiración única en el mundo. Simboliza el culto por la
simpleza, la perfección y la belleza, tres conceptos que unidos llevaron a convertir a Apple en la marca
más valiosa del mundo. Según la consultora Interbrand, valía en 2014 U$S120.000 millones, más que
Google y Coca-Cola.
Sus lecciones sobre innovación, marketing y diseño son las más recordadas.
Sobre el diseño, explicaba que “no es solo la apariencia, el diseño es cómo funciona” y se negaba a
pensar que “quien golpea primero, golpea mejor”, ya que lo importante, resaltaba, era “ser el mejor”. La
calidad y la estética siempre primaban, como explicaba: “La mayoría de la gente piensa que el diseño es
una chapa, es una simple decoración. Para mí, nada es más importante en el futuro que el diseño. El
diseño es el alma de todo lo creado por el hombre.”
Tras un trabajo intensivo de ocho semanas para encontrar y definir el valor central de la empresa, el CEO
expuso los resultados en una charla interna con los trabajadores de la compañía y presentó el origen de lo
que se convertiría más adelante en la campaña 'Think Different'.
En la conversación, Jobs dijo: "el marketing se trata de los valores. Este es un mundo muy complicado,
muy ruidoso, y no tendremos oportunidad de que la gente recuerde mucho sobre nosotros, por lo que
tenemos que ser muy claros sobre lo que queremos que sepan sobre nosotros".
Resaltó a Nike como "el mejor ejemplo de marketing que ha visto el universo", recordando que a pesar
de que venden un commodity, como son los tenis, las personas piensan en la marca como algo mucho
más grande e importante que una compañía de zapatos. "En sus comerciales, Nike nunca habla de su
producto o de por qué sus zapatos son mejores que los de Reebok ¿Que hace Nike en su publicidad?
Honran a grandes atletas y el gran atletismo. Es quienes son, y esa es su esencia".
Marca no es:
Una marca no es un logo, no es un packaging, no es una campaña de publicidad.
Ni siquiera una marca es lo que vos creés que tenés.
Una marca es lo que los demás piensan que eres. Una percepción fundamentada sobre cómo te ven, qué
sentimientos despertas en su interior y qué dicen de vos.
En un negocio, nada es más importante que la marca, porque precisamente es lo que define y encapsula
su esencia.
Es un error común de percepción de las empresas jóvenes y los nuevos emprendimientos pensar que el
branding es únicamente el logo que combina con la paleta de colores de tu empresa y con el diseño de tu
página web o app.
Como un jingle que no sale de tu cabeza, el verdadero branding genera mnemotecnia; el sentimiento, la
experiencia y la emoción a largo plazo que el consumidor asocia a tu marca. Es una cualidad intangible
de tu marca que los clientes conectarán y relacionarán en su vida diaria.

¿Por qué es importante el branding?

El mundo del marketing está saturado. Si tu marca solo tuviera alrededor de 7 segundos para causar una
impresión, todo recaería en la fuerza de tu estrategia de branding y en su buen diseño desde el principio.
El branding eficaz es un mecanismo capaz de hacer que tu empresa destaque y capte la atención de tus
posibles clientes. Cuando se hace bien, el branding adquiere el poder de influenciar, inspirar y provocar
cambios sustanciales.
Echa un vistazo a las marcas grandes y establecidas tales como Google, Apple, Nike o Coca-Cola. No es
una coincidencia que tengan éxito. Estas empresas entienden mejor que nadie la importancia del
branding, y la esgrimen y aprovechan en cada aspecto de su negocio y su marketing. Además, nunca se
detienen. Continúan optimizando sus estrategias, aprendiendo de sus errores y creciendo a través de sus
constantes esfuerzos de branding para mantener la lealtad de sus clientes.

Estrategia de branding:
Una buena marca no siempre es cuantificable, ni siquiera racional: es experiencial y se basa en
sentimientos. Puede ser difícil conceptualizar una cualidad intangible, más aún, intentar medirla.
Si necesitamos darle una definición básica, una estrategia de marca es un plan útil para identificar lo que
representa su marca de adentro hacia afuera.
A través de la investigación y el análisis, este proceso esencial le permite determinar el posicionamiento
competitivo y definir la forma más auténtica de llegar a su mercado objetivo a nivel emocional.
Una estrategia para branding debe tener en cuenta varios aspectos:
● Madurez de la empresa: Es decir, en qué etapa de desarrollo se encuentra la empresa. No es lo
mismo crear una marca para una empresa nueva que renovar una marca que ya lleva varios años
en el mercado y ya posee un cierto número de seguidores.
● Target: Esta métrica se basa en la edad, el género, los gustos y muchos otros aspectos del
potencial cliente.
● Estudio de mercado: Dicho estudio busca descifrar la manera en que su target visualiza la marca,
cuáles son sus puntos fuertes y en qué está fallando o, simplemente, no existe en la mente del
consumidor.
● Plataformas: Se plantean las principales plataformas que pueden ser utilizadas por la marca para
tener el mayor impacto posible en el mercado actual.
● Tipo de promoción: En este nivel la herramienta promocional que puede utilizar una marca puede
ser variada, pero siempre debe complementarse entre sí. Es decir, una marca no puede desvirtuar
su identidad, ya que esta es uno de los aspectos básicos a la hora de posicionarse en la mente de
la franja de público hacia la que va dirigida.
● Originalidad: Definir en tu marca algún objeto, color, o frase para que la reconozcan como suya y
poseas autonomía sobre ella.
¿Para qué sirve?
1. Potencia y trabaja las diferencias de nuestra marca con la del resto de competidores de nuestro sector.
2. Es fundamental para el posicionamiento de la marca. Sin branding el cliente o consumidor no ubicará
la marca.
3. Es la manera profesional de enfocar y trabajar la marca a largo plazo.
4. Es la vértebra de la estrategia de marketing digital, dándole sentido común y coherencia.
5. El branding define las líneas comunicacionales de la marca en todos los canales, soportes y
plataformas.

Elementos del Branding

El branding es un proceso estratégico y analítico, pero también exige creatividad y consistencia con cada
uno de los aspectos de la marca. Debido a la gran cantidad de elementos a considerar del branding, te
recomendamos crear una estrategia de branding sólida, consistente y apropiada. Así, podrás usarla como
una guía de estilo de tu compañía, donde se tomen muy en cuenta tanto los elementos visuales como los
no visuales del branding como un todo.
Veamos cuáles son los elementos más importantes del branding:

Elementos visuales:
● Nombre de la marca -Sí estamos hablando de branding, lo es todo. El nombre de tu negocio debe
manifestar quién eres, mientras informas qué haces y al mismo tiempo das una buena impresión.
Necesitas verificar que el nombre que escojas esté disponible, que no tenga connotaciones
lingüísticas inusuales o que sea difícil de pronunciar, y que represente los valores de tu marca.
● Logo - Es común pensar en el logo cuando se habla de branding. A menudo se cree que forman
una sola idea, pero son dos entidades muy diferentes. El logo es uno de los elementos más
importantes de la marca, pero es solo una pieza más del branding. Es la mínima expresión de tu
marca, tu símbolo.
● Colores de la marca - La paleta de colores dará forma a tu identidad de marca y será tu firma en
la estrategia de marketing. Es crucial entender el impacto psicológico de los colores en el
consumidor y la forma en que influencian en sus decisiones de compra. Los colores transmiten
mensajes y la personalidad de la marca.
● Tipografía - Afianzará la personalidad de tu marca y te ayudará a comunicar tu mensaje. La
recomendación es que nunca se usen más de tres fuentes diferentes. Y que sea coherente a los
demás elementos.
● Tarjetas de presentación - Aún mantienen su relevancia y son un elemento importante del
branding. Si tu empresa y tu red de contactos está en expansión, las tarjetas son una forma
profesional y amigable de invitar a recordar tu marca. Deben mantener la coherencia con el resto
de los elementos del branding.
● Página Web - Ahora más que nunca es crucial tener una presencia profesional en línea, dado que
es una parte esencial de una apropiada estrategia de branding y de marketing. A través de ella
podrás atraer nuevos usuarios, alcanzar nuevos consumidores potenciales, promocionar y vender
productos, enseñar e informar a los clientes y, sobre todo, comunicarte de manera profesional.
● Eslogan - Técnicamente no es un elemento visual, pero cumple funciones sumamente similares,
no siempre es una parte esencial del branding, pero, cuando se hace bien, puede convertirse en
una poderosa herramienta de marketing.“Duracell, dura más”, o “Destapa la felicidad con Coca-
Cola”, son los ejemplos perfectos de eslóganes que representan a su marca. Hacen que te
imagines usando el producto al oírlos. Como puedes ver, cuando su diseño es apropiado, el
eslogan puede formar parte integral de la marca.
Elementos no visuales:
● Misión - La misión de una empresa es una parte vital del branding. Su función es expresar los
propósitos de la marca y sus valores. En solo unas pocas oraciones, debe permitir a cualquiera
que conozca tu marca comprender claramente de qué se trata, como una explicación del “¿por
qué?”, que te permita delimitar no sólo qué ofrece tu negocio, sino también el propósito de por
qué lo hace.
● Visión - La visión es una redacción clara y concisa que sirve como un mapa de ruta para delimitar
la visión a futuro de la marca. La visión puede evolucionar con el tiempo, pero siempre debe
mantener afinidad con los valores de tu marca.
● Valores - En un mundo en donde la transparencia y la autenticidad son más relevantes que nunca,
los consumidores buscan honestidad y conectar con marcas que defiendan valores similares a los
suyos. Los valores de tu marca son la base de tu negocio. Imagina estos valores como la brújula
que dirige y respalda tu empresa, así como las decisiones y acciones que se tomen.
● Identidad de marca - Te ayudará tanto a visualizar la personalidad de tu empresa como a entender
tu compromiso con la audiencia. Teniendo muy en cuenta la misión, la visión y los valores que
han dado forma a la persona de tu marca, la mezcla de todos estos elementos resultará en una
identidad definitiva y comprensible.

● Historia - Nuestra historia y de dónde venimos es una parte crucial de la vida, y así también lo es
para el branding. Las historias son cautivadoras, atractivas, intrigantes y nos ayudan a construir
vínculos. Es tu oportunidad para desarrollar una narrativa que fomente un vínculo significativo
con tu audiencia y que los ayude a entender mejor de qué se trata tu negocio. Deberá establecer el
tono de todas las formas de contenido y elementos de branding de tu empresa, ya sean
publicaciones en redes sociales, campañas de marketing u otros contenidos similares. Esto
significa mantener la consistencia y la autenticidad todo el tiempo. La historia de la marca puede
 encargarse de introducir a los fundadores de la compañía y los orígenes de la empresa, o bien
narrar una apasionante historia del propósito que impulsa el negocio.
● Voz de marca - La forma de comunicarse de la marca es tan única como la de una persona. Hay
que definir con qué tono va a comunicarse siempre la marca. La voz de tu marca dará identidad a
la forma de comunicarse, desarrollará mejor la consistencia de tu branding y ayudará a generar
confianza. Una vez hayas definido la voz de tu marca, podrás usarla en tus estrategias de
marketing y canales de comunicación. Esto tendrá solidez tanto internamente con los empleados,
como externamente con los clientes.

Consejos para gestionar tu marca:

La consistencia es la clave: En la búsqueda del reconocimiento, la confianza y la lealtad de los clientes
hacia tu marca, la consistencia es un aspecto vital del branding. Las empresas confiables, que saben
cómo mantener su marca unificada y consistente en todas sus plataformas.
La reputación lo es todo: Todos conocemos ese sitio del que nos alejamos a toda costa, sólo por su mala
reputación. Incluso aunque no lo hayamos experimentado de primera mano. Lo mejor será cuidar la
imagen de tu marca a toda costa y desde el principio.
Cumplir tus promesas: Un aspecto fundamental consiste en siempre mantener tu palabra y cumplir tus
promesas. Esto incluye las promesas que tu marca ha hecho a tus clientes, empleados e inversionistas, así
como las acciones que tomas para mantenerlas.
Haz de la conversación un objetivo constante: Es crucial abrir y mantener un diálogo constante entre tu
marca y tus consumidores, tanto online como offline. Hacer preguntas y escuchar con atención las
críticas. Esto te ayudará a implementar cambios basados en los usuarios.
Construye vínculos duraderos: Todo se reduce a diferenciación, compromiso y lealtad. Asegúrate de
cuidar bien esos vínculos tan importantes. Después de todo, los clientes leales, que regresan por más, son
los más importantes.

Ejercicio Clase 23
Ver ejemplos de manuales de marca.

Proyecto Final
TAREA PARA EL PROYECTO FINAL
Para continuar con el Proyecto Final que estamos desarrollando:
Como vimos hoy en clase: el branding hace que todo lo referido a una marca se sienta auténtico, honesto,
coherente, y que cada elemento que la conforma nos transmita el mismo mensaje. Es un todo que hace
referencia a la marca, a su visión, misión y valores, la suma de sus elementos representa su personalidad,
su voz y define su actuar.
Esta tarea consiste en chequear que cada parte de su proyecto sea coherente, tanto en contenido como en
estética, es decir que cada una de las tareas realizadas se vea, se sienta, y exprese el alma de su proyecto.
Que todo se sienta parte del mismo “mundo”.
Poco a poco ir incorporando todos los conceptos y elementos aprendidos dentro de la presentación de
slides, ya sea en la forma de expresarse, en sus colores, en su tipografía.
Para la entrega final debe sentirse como un todo coherente diseñado a conciencia.
DISEÑO UX/UI
Clase 27
Elevator Pitch
Les damos la bienvenida
Vamos a comenzar a grabar la clase
 Clase 26 Clase 27 Clase 28

Entrega final Elevator Pitch Motion

● Exposición de proyectos ● ¿Qué es y para qué sirve? ● ¿Qué es el Motion?

● Ejemplos en clase ● 12 principios de UX en
Motion
● Estructura del elevator
● Anatomía de las
pitch transiciones
● Storytelling ● Microinteracciones
● Tarea para el Proyecto ● Tarea para el Proyecto
Final Final
 Diseño Centrado en el Usuario (DCU)

Analizar Diseñar Validar

Mi-Fi Visual y Contenido

Hi-Fi Visual y Contenido

Design Thinking

Empatizar Definir Idear Prototipar Evaluar

Wireframe Digital

Atomic + Guidelines + Grillas

Color + Tipografía
¿Qué es Elevator Pitch?
Es un discurso muy breve, claro y conciso sobre nuestro proyecto.
En un ascensor tenemos aprox. 2m para comentarle a alguien sobre
nuestro proyecto.
Buscaremos mediante este relato, impresionar, explicarle, incluso venderle
nuestra idea a otra persona.
Es una práctica muy común cuando se busca inversionistas para que se
interesen en desarrollar el diseño que hemos realizado.
El objetivo final sería concretar nuestra idea, y desarrollar nuestra app.
Cada palabra cuenta
Para elaborar un “Elevator Pitch” tenemos que pensar cuáles son los datos
más importantes relacionados a nuestro proyecto:

● Problema - Qué problemática estaríamos resolviendo

● Solución - Cuál es la solución que diseñamos
● Usuario - Contar quiénes serían nuestros usuarios
Presentación
Lo más importante es el proyecto pero sin dejar de mencionar:

● ¿Quién sos?
● ¿Qué haces?

Recordá que estás hablando con un total desconocido y no podemos irnos sin
dejar en claro quién fué la persona que le estuvo hablando del proyecto.
Para presentarte
Algunos complementos que puedes incluir son:

● Una historia de éxito que te haga sentir orgulloso

● Un consejo con el que hayas logrado ayudar a un cliente
● Una frase o lema que te inspire
● La historia de cómo llegaste a apasionarte por lo que haces
● Opiniones o testimonios que te hayan dado tus clientes, colegas o líderes
de trabajo.
Dejar bien en claro y resaltar
● ¿Qué nos diferencia de lo que ya existe?

Evitando que sea demasiado técnico, con lenguaje específico que solo
usen nuestros usuarios (abreviaturas o nombres de moda), o con un
lenguaje demasiado formal y acartonado, que dificulte su comprensión y
generar empatía.
El comienzo
● La primera frase que digas es la más importante.

Es el puntapié inicial que determinará si a tu receptor le va a interesar el

resto de la información que le des o simplemente va a estar esperando
que se abran las puertas del ascensor lo más rápido posible.
Podrías comenzar con
● Una afirmación llamativa

● Una cifra sorprendente

● Una historia o anécdota personal

● Una cita de un famoso que se relacione con el tema

● Una metáfora o analogía para explicar un proyecto complejo

No estamos hablando de datos inventados, sino de datos basados en la

realidad que resulten de una investigación.
Consejos
No se trata de mentir, ni de decir cualquier cosa con tal de impresionar, sino de
investigar sobre nuestra temática y encontrar datos lo suficientemente
llamativos como para que nos escuchen y que se relacionan perfectamente
con nuestro proyecto y todo lo que fuimos desarrollando hasta el momento.

Debemos practicarlo hasta que no queden dudas que cualquier persona

puede comprenderlo, que quede clara la ventaja que estás proponiendo, que
quede claro qué problema resuelves y a quien. En 2 min. como máximo.
¿Por qué es importante?
Es un recurso muy efectivo porque apela a la forma en la que funciona la
mente humana.
Los datos que nos impresionan van a ser más fáciles de recordar, vamos a
poder procesarlo de una forma mucho más profunda de lo que procesamos
otro tipo de información más larga y tediosa.
Toda la información que demos en el pitch debe ser importante o será
recortada del mismo.
Recordemos que las emociones juegan un papel muy importante también.
Una historia que cala hondo o toca un punto sensible puede desencadenar
reacciones muy fuertes o memorias profundas.
Ventajas de crear y diseñar nuestro elevator pitch

Al vivir en un mundo cada vez más competitivo, resulta vital tener en mente
un mensaje de pocos minutos con el que transmitas tu forma de trabajar e
inspires confianza.

También puede ser una buena estrategia en actividades de networking,

conferencias, llamadas de seguimiento e incluso en entrevistas de trabajo o
ferias de empleo.

Te ayuda a presentarte ante posibles clientes y empleadores como un

profesional confiable y capaz.
 Ejercicio
Clase 27
[Link]
Práctica de tu elevator pitch
(máx. 2 min.)
Ejemplo
La fórmula que puedes aplicar es:

Quién soy + verbo + destinatario + problema + resultado + objetivo

De forma aplicada:

«Soy Graciela, ayudo a mujeres emprendedoras que no saben cómo abrir su

propio ecommerce para expandir en un 20 % sus oportunidades de venta».

Cierre: Incentiva a la inversión o acción de forma atractiva y convincente.

Consejos indispensables
Lee tu discurso en voz alta y asegúrate de que suene natural. Si el tono es demasiado formal,
podrías causar una impresión de tirantez. En cambio, haz que sea conversacional. Esto
mantendrá a tu audiencia cautivada y más propensa a continuar la conversación.

Sé honesto con los datos que brindes. Es importante que no prometas cosas que no podrás
cumplir; sé realista y objetivo. De lo contrario, lo único que lograrás es manchar tu imagen o
reputación.

Conoce las dudas más frecuentes. Tómalas en cuenta y prepara respuestas convincentes.

Prepárate para preguntas sorpresivas. Si la persona que está escuchándote muestra un interés
genuino y te hace preguntas de las cuales no tengas respuestas preparadas o desconozcas los
datos, descuida, no tienes porqué saberlo todo. Sé honesto y admite que en ese momento no
tienes la información solicitada, pero que realizarás una investigación posterior y te
comprometes a compartir el dato más adelante. Solo recuerda dar seguimiento.
Consejos indispensables
Adapta tu discurso para todo tipo de público. Debes tener un mensaje más sencillo en
caso de hablar con un posible cliente o usuario que no conozca ese vocabulario. No
descartes a nadie. El objetivo de tu mensaje es que cualquiera que lo escuche pueda
comprenderlo.

Mantén tu discurso orientado a objetivos, es decir, «Ayudo a compañías como la suya a

aumentar la producción hasta en un 30%».

Siempre ofrece una tarjeta de presentación o envía una solicitud para que te conectes
con tu prospecto en LinkedIn.

Sé amigable y engancha la atención de tu interlocutor; además, practica tu discurso

para que sea limpio, conciso y con buen ritmo.
Tarea para el Proyecto
Para ir finalizando con el Proyecto Final que estuvimos desarrollando durante todo este curso:

Vamos a redactar un Elevator Pitch aplicando las técnicas vistas en clase.

En resumen debería consistir en:

● Presentación.
● Dato llamativo.
● Usuario - Problema - Solución
● Elemento que te diferencia de tu competencia.
● Cierre

Condiciones:

● Que sea breve, claro y conciso.

● Que cuente con tres partes: Comienzo - Desarrollo de la idea/proyecto - Cierre.
● Que dure 2m en grabación.
Ejemplo de entrega
¿Sabías que 18 millones de personas en Argentina han tenido
sentimientos de depresión, soledad o miedo durante la última semana?
Es difícil tomar decisiones cuando estamos a punto de llegar a un estado de angustia. Pero la mayoría de
nosotros tenemos un sentido que nos avisa cuando las cosas están comenzando a girar fuera de control.
En ese momento buscar ayuda se complica aún más cuando no sabemos dónde comenzar a buscar, lo
peor que podría suceder es tardar años en encontrar al profesional más adecuado para nosotros.
La percepción que tenemos del terapeuta, su edad, sexo, que hable mucho o poco, nos importa más de lo
que imaginamos, tanto como para determinar cuál elegiremos para tratarnos y también si continuaremos
con la terapia durante el tiempo que sea necesario para sentir una mejoría.
Lo más importante en una terapia es confiar y sentirse a gusto.

Por eso creamos “Buscador de Psicólogos” una app donde el usuario encontrará al psicólogo que tenga
las características que necesite y prefiera, en unos pocos clics llegará a reservar una primera sesión de la
manera y con el profesional que elija de la lista de perfiles que cumplen con los resultados de su búsqueda
personal. Simple, rápido y muy efectivo. Ya estará listo para hablar y comenzar a desenredar todas sus
problemáticas.

Me llamo Irina y soy diseñadora de experiencias e interfaces de usuario y me gustaría mostrarte cómo
funciona nuestra App.
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.

Todo en el Aula Virtual.

Muchas gracias por tu atención.
Nos vemos pronto
DISEÑO UX/UI
Clase 28
Motion
Les damos la bienvenida
Vamos a comenzar a grabar la clase
 Clase 27 Clase 28 Clase 29

Elevator Pitch Motion Accesibilidad

● ¿Qué es y para qué sirve? ● ¿Qué es el Motion? ● ¿Qué significa

● Ejemplos en clase accesibilidad?
● 12 principios de UX en
● Estructura del elevator ● Principios de accesibilidad
Motion
pitch web
Storytelling
● Anatomía de las
● ● Niveles de conformidad
● Tarea para el Proyecto transiciones ● Plugins útiles
Final ● Microinteracciones ● Tarea para el Proyecto
● Tarea para el Proyecto Final
Final
 Diseño Centrado en el Usuario (DCU)

Analizar Diseñar Validar

Hi-Fi Visual y Contenido

Design Thinking

Empatizar Definir Idear Prototipar Evaluar

Wireframe Digital

Prototipo en alta y Motion

¿Qué es Motion?
Es la animación de la interfaz de usuario (del inglés Motion - Movimiento) es el arte de
usar el movimiento de las animaciones dentro de una interfaz para ayudar a guiar la
experiencia del usuario y comunicar: una secuencia, el siguiente paso, una transición o
una acción para un producto digital.

En el diseño UX/UI, la animación no es solo una forma de deleitar a las personas que
utilizan nuestros productos, sino una herramienta funcional que hace que las
experiencias sean fáciles, dinámicas y divertidas. Es una mejora de la usabilidad.

Existe una rama de diseño UX que se especializa en optimizar esta relación entre el
usuario y el producto: el Diseño de Interacción (Interaction Design o IxD)
Beneficios de su aplicación
Cuando diseñamos una interfaz estática, no se termina de comunicar la
interacción que tendrá la misma. Para ello, necesitamos crearla a partir de un
prototipo dinámico que nos ayudará a:

1. Orientar a los usuarios

2. Dar feedback sobre el estado de una acción
3. Educar y hacer foco en lo específico

Al volverla dinámica con animaciones, ya no dependemos de la imaginación

de quien navegue nuestro prototipo para presentar cómo se verá finalmente
nuestro diseño.
Los 12 principios de UX en Motion
Los Doce principios básicos de la animación fueron presentados en 1981 por
los animadores Ollie Johnston y Frank Thomas de Walt Disney Animation
Studio en su libro The Illusion of Life: Disney Animation. Muchos animadores
llaman a este libro la “biblia de la animación” y en 1999 fue votado como el
mejor de los libros de animación de todos los tiempos.

El objetivo de documentar estos principios fue crear guías para producir

animaciones más realistas que se apegan un poco más a las leyes básicas
de la física, aunque también se tratan temas más abstractos, como la
sincronización emocional y el atractivo de un personaje.
Los 12 principios de UX en Motion
Aunque los 12 principios originalmente fueron desarrollados para usarse en animación
tradicional, estos también pueden utilizarse como guías en diseño interactivo para la
creación de transiciones y microinteracciones en productos digitales.

El 2016 Issara Willenskomer, fundador y director creativo de UX in Motion, analizó estos

principios desde la perspectiva de la experiencia de usuario y generó un Manifiesto de UX
in Motion. Es nuestra base a la hora de diseñar las animaciones dentro del producto y cómo
combinarlas sinérgicamente según sus objetivos.
La mayoría de estos principios recaen en cómo el movimiento proporciona contexto,
continuidad, referencia visual o naturalidad a nuestro diseño para darle mayor control y
usabilidad al usuario.
Los 12 principios de UX en Motion
1. Facilitación (Easing)

Este principio se cumple cuando el comportamiento de los componentes se alinean con

las expectativas del usuario para dotarlos de una sensación de continuidad a la interfaz.
La animación debería ser un “aporte invisible”: que el usuario vea con naturalidad el
movimiento y no le suponga una distracción que lo aleje de sus objetivos.

2. Compensación y retraso (Offset & Delay)

Este principio relaciona y jerarquiza la introducción de nuevos elementos a una escena

dentro de la interfaz. No es lo mismo cuando cambiamos de pantalla que nos aparezcan
todos los elementos de golpe a que nos aparezcan siguiendo una jerarquía que ayude al
usuario a entender lo que tiene en pantalla.
Los 12 principios de UX en Motion
3. Parentesco (Parenting):

En este caso, nos centramos en la relación de los objetos cuando el usuario interactúa
con ellos directamente sobre la interfaz. Se denomina “crianza” o “parentesco” por la
vinculación que se da entre los objetos, equiparándola a la relación de un padre con su hijo.

4. Transformación (Transformation)

Aunque principalmente la transformación de un objeto en otro nos sirve para llamar la

atención de nuestro usuario, también podemos contarle una historia a través de ella
que le haga comprender un determinado proceso.
Los 12 principios de UX en Motion
5. Cambio de valor (Value change)

Este principio trata de darnos una base a partir de la cual mostrar de una forma
eficiente un cambio de valor. Según este principio lo ideal es contarle al usuario “la
realidad” que ocurre detrás de los datos, para conectar con él. Evitar mostrar datos
como campos estáticos.

6. Máscara (Masking)

Este recurso proporciona transiciones que dotan de mayor continuidad a nuestro

diseño sin que el usuario vea interrumpido su proceso manteniendo un flujo
narrativo. Se trata de ocultar o mostrar objetos en función de un contenedor que los
delimita.
Los 12 principios de UX en Motion
7. Superposición (Overlay)

Cuando superponemos un objeto dependiente de otro situado en un plano inferior a

través del movimiento de interacción, permitimos al usuario acceder a información que no
está en un primer plano. Habría que contemplar hasta qué punto mejora la usabilidad
componentes que están ocultos. El usuario tendría que poder reconocer previamente qué
acciones puede realizar en la pantalla, por lo que no siempre es recomendable.

8. Clonación (Cloning)

Este recurso, muy utilizado en los floating action buttons (FAB). Es muy útil para informar
al usuario que acciones nacen de otras. Se generan “x” objetos a partir de una interacción
creando una jerarquía dentro de la pantalla.
Los 12 principios de UX en Motion
9. Oscurecer (Obscuration)

Oscurecemos o desenfocamos el fondo para darle mayor protagonismo a una

nueva capa accionada por el usuario, sin que este pierda la referencia. Con esto
logramos comunicar al usuario que dispone de un mundo detrás de la acción que
tiene delante.

10. Parallax

A través del Parallax hacemos que el usuario se centre en las acciones y el

contenido primario sin perder la integridad del diseño en un proceso gradual.
Acercamos al usuario determinados objetos, arrastrando al resto que tiene en la
pantalla hacia atrás.
Los 12 principios de UX en Motion
11. Dimensionalidad (Dimensionality)

Las personas tienden a usar marcos espaciales para desenvolverse en el mundo real
y, por tanto, las trasladan a la hora de navegar por el mundo digital. Con la
dimensionalidad, proporcionamos referencias de origen y partida dentro de la
interfaz, ayudando a reforzar los modelos mentales dentro de la experiencia de
usuario.

12. Dolly & Zoom

Ambos recursos son movimientos de cámara que acercan o alejan objetos al

usuario. Esto le da profundidad al diseño, permitiendo al usuario indagar en áreas o
contenidos adicionales profundizando en su experiencia.
Los 12 principios de UX en Motion
Los 12 principios de UX en Motion
1. Facilitación (Easing)
Este principio se cumple cuando el
comportamiento de los componentes se
alinean con las expectativas del usuario
para dotarlos de una sensación de
continuidad a la interfaz. La animación
debería ser un “aporte invisible”: que el
usuario vea con naturalidad el movimiento
y no le suponga una distracción que lo
aleje de sus objetivos.
Los 12 principios de UX en Motion

2. Compensación y retraso
(Offset & Delay)
Este principio relaciona y jerarquiza la
introducción de nuevos elementos a
una escena dentro de la interfaz. No es
lo mismo cuando cambiamos de pantalla
que nos aparezcan todos los elementos
de golpe a que nos aparezcan siguiendo
una jerarquía que ayude al usuario a
entender lo que tiene en pantalla.
Los 12 principios de UX en Motion

3. Parentesco (Parenting)
En este caso, nos centramos en la
relación de los objetos cuando el
usuario interactúa con ellos
directamente sobre la interfaz. Se
denomina “crianza” o “parentesco” por la
vinculación que se da entre los objetos,
equiparándola a la relación de un padre
con su hijo.
Los 12 principios de UX en Motion
4. Transformación
(transformation)

Aunque principalmente la transformación

de un objeto en otro nos sirve para llamar
la atención de nuestro usuario, también
podemos contarle una historia a través
de ella que le haga comprender un
determinado proceso.
Los 12 principios de UX en Motion
5. Cambio de Valor
(Value Change)
Este principio trata de darnos una base a
partir de la cual mostrar de una forma
eficiente un cambio de valor.
Según este principio lo ideal es contarle al
usuario “la realidad” que ocurre detrás de
los datos, para conectar con él. Evitar
mostrar datos como campos estáticos.
Los 12 principios de UX en Motion
6. Máscara (Masking)

Este recurso proporciona transiciones que

dotan de mayor continuidad a nuestro
diseño sin que el usuario vea
interrumpido su proceso manteniendo
un flujo narrativo. Se trata de ocultar o
mostrar objetos en función de un
contenedor que los delimita.
Los 12 principios de UX en Motion
7. Superposición (Overlay)
Cuando superponemos un objeto
dependiente de otro situado en un
plano inferior a través del movimiento de
interacción, permitimos al usuario acceder
a información que no está en un primer
plano.

🤔 Habría que contemplar hasta qué punto mejora la

usabilidad componentes que están ocultos. El usuario tendría
que poder reconocer previamente qué acciones puede realizar
en la pantalla, por lo que no siempre es recomendable.
Los 12 principios de UX en Motion

8. Clonación (Cloning)
Este recurso, muy utilizado en los floating
action buttons (FAB). Es muy útil para
informar al usuario que acciones nacen
de otras. Se generan “x” objetos a partir de
una interacción creando una jerarquía
dentro de la pantalla.
Los 12 principios de UX en Motion
9. Oscurecer (Obscuration)
Oscurecemos o desenfocamos el fondo
para darle mayor protagonismo a una
nueva capa accionada por el usuario, sin
que este pierda la referencia. Con esto
logramos comunicar al usuario que
dispone de un mundo detrás de la acción
que tiene delante.
Los 12 principios de UX en Motion
10. Parallax
A través del Parallax hacemos que el
usuario se centre en las acciones y el
contenido primario sin perder la
integridad del diseño en un proceso
gradual. Acercamos al usuario
determinados objetos, arrastrando al resto
que tiene en la pantalla hacia atrás.
Los 12 principios de UX en Motion
11. Dimensionalidad
(Dimensionality)
Las personas tienden a usar marcos
espaciales para desenvolverse en el
mundo real y, por tanto, las trasladan a la
hora de navegar por el mundo digital. Con
la dimensionalidad, proporcionamos
referencias de origen y partida dentro
de la interfaz, ayudando a reforzar los
modelos mentales dentro de la
experiencia de usuario.
Los 12 principios de UX en Motion
12. Dolly y Zoom
Ambos recursos son movimientos de
cámara que acercan o alejan objetos al
usuario. Esto le da profundidad al diseño,
permitiendo al usuario indagar en áreas o
contenidos adicionales profundizando en
su experiencia.
Anatomía de las transiciones
Las animaciones y transiciones de los elementos de la UI se clasifican como:

1. Persistentes: el elemento permanece visible todo el tiempo pero cambia

de forma

2. Salientes: se difumina hasta que desaparecen.

3. Entrantes: aparecen en la pantalla desde una difuminación.

4. Estáticas: la transición no afecta al elemento

Anatomía de las transiciones

Persistentes Salientes Entrantes Estáticas

Microinteracciones
Las microinteracciones son elementos sutiles de diseño que transmiten el estado de un
producto digital. Su propósito principal es proporcionar una respuesta visual e instantánea
creando un momento agradable y sorprendente para el usuario. Se encuentran presentes
en toda la aplicación.

Es habitual que las microinteracciones funcionen siguiendo los siguientes pasos:

1. Se inician mediante un disparador o trigger.

2. Se ponen en marcha una vez que se cumplen ciertos requisitos predeterminados.

3. Proporcionan un feedback al usuario sobre qué está sucediendo

Principales Ventajas
En términos de UX, el uso de microinteracciones proporcionan una experiencia más
comprensible y visual, contribuyendo positivamente a la apariencia del producto o
servicio. Las principales ventajas de las microinteracciones son:

1. Aumentan el engagement con la marca.

2. Muestran el estado del sistema.
3. Previenen posibles errores entre el usuario y el proceso.
4. Conseguir que el usuario interactúe con el contenido.
Además, el reducido tamaño de los elementos hace que los tiempos de carga no sufran y
permiten que el usuario se sienta emocionalmente conectado con la interfaz.
Consejos para diseñarlas
El diseño de microinteracciones es el trabajo que se centra en los detalles de una aplicación
y como todo proceso de diseño se deben tener en cuenta unas reglas:

● Identifica el problema y establece un objetivo: piensa en el objetivo de las

mismas, en el tipo de animación y no hagas uso de ellas si no es necesario.

● No te excedas en su uso: si utilizamos demasiadas interacciones el usuario puede

verse abrumado o distraerse del proceso que está realizando, por eso deben ser
siempre controladas y pensadas para su finalidad.

● Usa interacciones naturales: si usamos una transición no adecuada, podemos

hacer que el usuario no se sitúe o no entienda lo que está pasando, y por lo tanto no
pueda llegar a su objetivo de uso.
Consejos para diseñarlas
● Simplicidad y sutileza: debemos evitar que el usuario se pregunte qué ha pasado o en
qué pantalla está. Esta desorientación hará que el usuario no termine el proceso y se
quede frustrado.

● El tiempo adecuado: existen muchísimos tipos de interacción y debemos establecer el

tiempo que deben durar para que el usuario no se distraiga ni pierda el foco. No es lo
mismo una transición entre pantallas, que una carga de datos, que un efecto al hacer
scroll.
Varias empresas han creado sus propios principios de animación y forma de abordar
este contenido y, para establecer estos límites, el motion se suele incluir dentro de los
parámetros de un sistema de diseño. De esta forma nace el término UI Motion
Design. Tomemos de ejemplo Material Design en su apartado “Understanding Motion”.
Ejemplos de Microinteracciones
Ejemplos de Microinteracciones
Interacciones en Figma
Debemos evitar que el usuario se pregunte qué ha pasado o en qué pantalla está.
Esta desorientación hará que el usuario no termine el proceso y se quede frustrado.
Los softwares de diseño de interfaces tienen la ventaja de permitir animaciones dentro
del prototipado. Dedicar tiempo al diseño de interacciones nos ayudará a que la
presentación visual de nuestra aplicación se entienda de manera correcta.

Veamos cómo realizar algunas de ellas:

After Delay (Transiciones automáticas)
Permite activar una acción después de que el usuario haya pasado una cierta cantidad de
tiempo en un fotograma determinado. Deberá establecer la duración del retraso en
milisegundos (ms).
Interacción desencadenante:
After Delay

Milisegundos

Tipo de interacción:
Change to (pueden ser
otras)

Qué abre: Status “On”

Scrolls (Desplazamiento)
Controla cómo los usuarios pueden interactuar con el contenido que se extiende más allá
de las dimensiones de un dispositivo:

Asegurarse de que el contenido a Asegurarse de seleccionar

scrollear se encuentre dentro de correctamente el tipo de
un frame con Clip content activo desplazamiento (Pestaña
(Pestaña Design) Prototype)
Overlay (Superposiciones)
Los prototipos a menudo requieren transiciones entre pantallas. Para algunas
interacciones, es posible que desee mantener al usuario en la misma pantalla, pero
mostrar más información. Las superposiciones le permiten mostrar nuevo contenido o
información sobre la pantalla actual en un prototipo.

Algunos ejemplos de su uso:

1. Alertas o confirmaciones
2. Menús interactivos (drawers)
3. Información adicional
4. Teclados en pantalla
Overlay (Superposiciones)

Interacción
desencadenante: On tap /
On click (también pueden Qué abre: Pantalla “Modal”
ser otras)

Posición Rápida
Tipo de interacción: Open
Overlay

Añadir Fondo detrás del

Posición: Centered overlay: Activo/Inactivo

Cerrar al clickear fuera: Color y opacidad del fondo

Activo/Desactivo
Smart Animation (Animación inteligente)
Busca capas coincidentes, reconoce diferencias y anima capas entre cuadros en un
prototipo. Es muy importante que las capas tengan el mismo nombre para que la
animación pueda realizarse, de otra forma la idea de smart animation se rompe.

Tipo de
Estilo de animación: animación:
Ease in and out Smart animate
back (se puede
elegir la que se
prefiera)
Milisegundos
Smart Animation (Animación inteligente)

El diseño contiene tarjetas grandes y tarjetas chicas, sin embargo, la nomenclatura debe ser
exactamente la misma para las variantes de ambas si queremos que funcione
correctamente el smart animation.
 Ejercicio
Práctico N°28
→ Link al archivo Figma

Veamos las interacciones en acción

Tarea para el Proyecto
Para ir finalizando con el Proyecto Final que desarrollamos durante todo este curso:

Vamos a incorporar animaciones (y/o microinteracciones) siguiendo los 12 principios de

motion.

Las animaciones deben cumplir con alguno de los siguientes puntos:

● Orientar a los usuarios

● Dar feedback sobre las interacciones
● Hacer foco en algo específico
● Ocultar el tiempo de carga o espera

Mostrar con imágenes los desgloses de las animaciones y microinteracciones incorporadas

al prototipo e indicar con qué puntos cumple.
Ejemplo de entrega
Animaciones en el prototipo
● Onboarding - Ease in y Smart animate

● Home - Gif animado y Microinteracciones en los botones

● Buscador - Los filtros son clickeables y Scroll

● Reseña de Psicóloga - Corazón y Estrellas interactivas

● Agenda - Selección de fecha y Botón AM/PM interactivos

Open overlay confirmando la sesión

● Chat - Simulación de conversación con la terapeuta

No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.

Todo en el Aula Virtual.

Muchas gracias por tu atención.
Nos vemos pronto
 Elevator Pitch
¿Qué es Elevator Pitch?
Es un discurso muy breve, claro y conciso sobre nuestro proyecto.
En un ascensor tenemos aprox. 2m para comentarle a alguien sobre nuestro proyecto.
Buscaremos mediante este relato, impresionar, explicarle, incluso venderle nuestra idea a
otra persona.
Es una práctica muy común cuando se busca inversionistas para que se interesen en
desarrollar el diseño que hemos realizado.
El objetivo final sería concretar nuestra idea, y desarrollar nuestra app.

Cada palabra cuenta:

Para elaborar un “Elevator Pitch” tenemos que pensar cuáles son los datos más importantes
relacionados a nuestro proyecto:
● Problema - Qué problemática estaríamos resolviendo
● Solución - Cuál es la solución que diseñamos
● Usuario - Contar quiénes serían nuestros usuarios

Presentación:
Lo más importante es el proyecto pero sin dejar de mencionar:
● ¿Quién sos?
● ¿Qué haces?
Recordá que estás hablando con un total desconocido y no podemos irnos sin dejar en claro
quién fué la persona que le estuvo hablando del proyecto.

Para presentarte:
Algunos complementos que puedes incluir son:
1) Una historia de éxito que te haga sentir orgulloso
 2) Un consejo con el que hayas logrado ayudar a un cliente
3) Una frase o lema que te inspire
4) La historia de cómo llegaste a apasionarte por lo que haces
5) Opiniones o testimonios que te hayan dado tus clientes, colegas o líderes de trabajo.

Dejar bien en claro y resaltar:

● ¿Qué nos diferencia de lo que ya existe?
Evitando que sea demasiado técnico, con lenguaje específico que solo usen nuestros
usuarios (abreviaturas o nombres de moda), o con un lenguaje demasiado formal y
acartonado, que dificulte su comprensión y generar empatía.

El comienzo:
La primera frase que digas es la más importante.
Es el puntapié inicial que determinará si a tu receptor le va a interesar el resto de la
información que le des o simplemente va a estar esperando que se abran las puertas del
ascensor lo más rápido posible.

Podrías comenzar con:

● Una afirmación llamativa
● Una cifra sorprendente
● Una historia o anécdota personal
● Una cita de un famoso que se relacione con el tema
● Una metáfora o analogía para explicar un proyecto complejo.
No estamos hablando de datos inventados, sino basados en la realidad que resulten de una
investigación.

Consejos:
No se trata de mentir, ni de decir cualquier cosa con tal de impresionar, sino de investigar
sobre nuestra temática y encontrar datos lo suficientemente llamativos como para que nos
escuchen y que se relacionan perfectamente con nuestro proyecto y todo lo que fuimos
desarrollando hasta el momento.
Debemos practicarlo hasta que no queden dudas que cualquier persona puede
comprenderlo, que quede clara la ventaja que estás proponiendo, que quede claro qué
problema resuelves y a quien. En 2 min. como máximo.

¿Por qué es importante?

Es un recurso muy efectivo porque apela a la forma en la que funciona la mente humana.
Los datos que nos impresionan van a ser más fáciles de recordar, vamos a poder
procesarlo de una forma mucho más profunda de lo que procesamos otro tipo de
información más larga y tediosa.
Toda la información que demos en el pitch debe ser importante o será recortada del mismo.
Recordemos que las emociones juegan un papel muy importante también. Una historia que
cala hondo o toca un punto sensible puede desencadenar reacciones muy fuertes o
memorias profundas.

Ventajas de crear y diseñar nuestro elevator pitch:

1) Al vivir en un mundo cada vez más competitivo, resulta vital tener en mente un
mensaje de pocos minutos con el que transmitas tu forma de trabajar e inspires
confianza.
2) También puede ser una buena estrategia en actividades de networking,
conferencias, llamadas de seguimiento e incluso en entrevistas de trabajo o ferias de
empleo.
3) Te ayuda a presentarte ante posibles clientes y empleadores como un profesional
confiable y capaz.

Ejercicio Clase 27
Ejemplo: [Link]
Práctica tu elevator pitch (máx 2 min.)

Ejemplo:
La fórmula que puedes aplicar es:
Quién soy + verbo + destinatario + problema + resultado + objetivo

De forma aplicada:
«Soy Graciela, ayudo a mujeres emprendedoras que no saben cómo abrir su propio
ecommerce para expandir en un 20 % sus oportunidades de venta».

Cierre. Incentiva a la inversión o acción de forma atractiva y convincente.

Consejos indispensables:
● Lee tu discurso en voz alta y asegúrate de que suene natural. Si el tono es
demasiado formal, podrías causar una impresión de tirantez. En cambio, haz que
sea conversacional. Esto mantendrá a tu audiencia cautivada y más propensa a
continuar la conversación.
● Sé honesto con los datos que brindes. Es importante que no prometas cosas que no
podrás cumplir; sé realista y objetivo. De lo contrario, lo único que lograrás es
manchar tu imagen o reputación.
● Conoce las dudas más frecuentes. Tómalas en cuenta y prepara respuestas
convincentes.
● Prepárate para preguntas sorpresivas. Si la persona que está escuchándote muestra
un interés genuino y te hace preguntas de las cuales no tengas respuestas
preparadas o desconozcas los datos, descuida, no tienes porqué saberlo todo. Sé
honesto y admite que en ese momento no tienes la información solicitada, pero que
realizarás una investigación posterior y te comprometes a compartir el dato más
adelante. Solo recuerda dar seguimiento.
● Adapta tu discurso para todo tipo de público. Debes tener un mensaje más sencillo
en caso de hablar con un posible cliente o usuario que no conozca ese vocabulario.
No descartes a nadie. El objetivo de tu mensaje es que cualquiera que lo escuche
pueda comprenderlo.
● Mantén tu discurso orientado a objetivos, es decir, «Ayudo a compañías como la
suya a aumentar la producción hasta en un 30%».
● Siempre ofrece una tarjeta de presentación o envía una solicitud para que te
conectes con tu prospecto en LinkedIn.
● Sé amigable y engancha la atención de tu interlocutor; además, practica tu discurso
para que sea limpio, conciso y con buen ritmo.
 Proyecto Final
TAREA PARA EL PROYECTO FINAL
Para ir finalizando con el Proyecto Final que estuvimos desarrollando durante todo este
curso:
Vamos a redactar un Elevator Pitch aplicando las técnicas vistas en clase.
En resumen debería consistir en:
Presentación.
Dato llamativo.
Usuario - Problema - Solución
Elemento que te diferencia de tu competencia.
Cierre.
Condiciones:
Que sea breve, claro y conciso.
Que cuente con tres partes: Comienzo - Desarrollo de la idea/proyecto - Cierre.
Que dure 2 min. en grabación.
 Motion
¿Qué es Motion?
Es la animación de la interfaz de usuario (del inglés Motion - Movimiento) es el arte de usar
el movimiento de las animaciones dentro de una interfaz para ayudar a guiar la experiencia
del usuario y comunicar: una secuencia, el siguiente paso, una transición o una acción para
un producto digital.
En el diseño UX/UI, la animación no es solo una forma de deleitar a las personas que
utilizan nuestros productos, sino una herramienta funcional que hace que las experiencias
sean fáciles, dinámicas y divertidas. Es una mejora de la usabilidad.
Existe una rama de diseño UX que se especializa en optimizar esta relación entre
el usuario y el producto: el Diseño de Interacción (Interaction Design o IxD)
Beneficios de su aplicación
Cuando diseñamos una interfaz estática, no se termina de comunicar la interacción que
tendrá la misma. Para ello, necesitamos crearla a partir de un prototipo dinámico que nos
ayudará a:
● Orientar a los usuarios
● Dar feedback sobre el estado de una acción
● Educar y hacer foco en lo específico

Al volverla dinámica con animaciones, ya no dependemos de la imaginación de quien

navegue nuestro prototipo para presentar cómo se verá finalmente nuestro diseño.
 Los 12 principios de UX en Motion
Los Doce principios básicos de la animación fueron presentados en 1981 por los
animadores Ollie Johnston y Frank Thomas de Walt Disney Animation Studio en su libro
The Illusion of Life: Disney Animation. Muchos animadores llaman a este libro la “biblia de la
animación” y en 1999 fue votado como el mejor de los libros de animación de todos
los tiempos.
El objetivo de documentar estos principios fue crear guías para producir animaciones más
realistas que se apegarán un poco más a las leyes básicas de la física, aunque también se
tratan temas más abstractos, como la sincronización emocional y el atractivo
de un personaje.
Aunque los 12 principios originalmente fueron desarrollados para usarse en animación
tradicional, estos también pueden utilizarse como guías en diseño interactivo para la
creación de transiciones y microinteracciones en productos digitales.
El 2016 Issara Willenskomer, fundador y director creativo de UX in Motion, analizó estos
principios desde la perspectiva de la experiencia de usuario y generó un Manifiesto de UX in
Motion. Es nuestra base a la hora de diseñar las animaciones dentro del producto y cómo
combinarlas sinérgicamente según sus objetivos.
La mayoría de estos principios recaen en cómo el movimiento proporciona contexto,
continuidad, referencia visual o naturalidad a nuestro diseño para darle mayor control y
usabilidad al usuario.
1. Facilitación (Easing):
Este principio se cumple cuando el comportamiento de los componentes se alinean con las
expectativas del usuario para dotarlos de una sensación de continuidad a la interfaz. La
animación debería ser un “aporte invisible”: que el usuario vea con naturalidad el
movimiento y no le suponga una distracción que lo aleje de sus objetivos.

2. Compensación y retraso (Offset & Delay):

Este principio relaciona y jerarquiza la introducción de nuevos elementos a una escena
dentro de la interfaz. No es lo mismo cuando cambiamos de pantalla que nos aparezcan
todos los elementos de golpe a que nos aparezcan siguiendo una jerarquía que ayude al
usuario a entender lo que tiene en pantalla.

3. Parentesco (Parenting):
En este caso, nos centramos en la relación de los objetos cuando el usuario interactúa con
ellos directamente sobre la interfaz. Se denomina “crianza” o “parentesco” por la vinculación
que se da entre los objetos, equiparándola a la relación de un padre con su hijo.

4. Transformación (Transformation):
Aunque principalmente la transformación de un objeto en otro nos sirve para llamar la
atención de nuestro usuario, también podemos contarle una historia a través de ella que le
haga comprender un determinado proceso.

5. Cambio de valor (Value change):

Este principio trata de darnos una base a partir de la cual mostrar de una forma eficiente un
cambio de valor. Según este principio lo ideal es contarle al usuario “la realidad” que ocurre
detrás de los datos, para conectar con él. Evitar mostrar datos como campos estáticos.

6. Máscara (Masking):
Este recurso proporciona transiciones que dotan de mayor continuidad a nuestro diseño sin
que el usuario vea interrumpido su proceso manteniendo un flujo narrativo. Se trata de
ocultar o mostrar objetos en función de un contenedor que los delimita.

7. Superposición (Overlay):
Cuando superponemos un objeto dependiente de otro situado en un plano inferior a través
del movimiento de interacción, permitimos al usuario acceder a información que no está en
un primer plano. Habría que contemplar hasta qué punto mejora la usabilidad componentes
que están ocultos. El usuario tendría que poder reconocer previamente qué acciones puede
realizar en la pantalla, por lo que no siempre es recomendable.

8. Clonación (Cloning):
Este recurso, muy utilizado en los floating action buttons (FAB). Es muy útil para informar al
usuario que acciones nacen de otras. Se generan “x” objetos a partir de una interacción
creando una jerarquía dentro de la pantalla.

9. Oscurecer (Obscuration):
Oscurecemos o desenfocamos el fondo para darle mayor protagonismo a una nueva capa
accionada por el usuario, sin que este pierda la referencia. Con esto logramos comunicar al
usuario que dispone de un mundo detrás de la acción que tiene delante.

10. Parallax:
A través del Parallax hacemos que el usuario se centre en las acciones y el contenido
primario sin perder la integridad del diseño en un proceso gradual. Acercamos al usuario
determinados objetos, arrastrando al resto que tiene en la pantalla hacia atrás.

11. Dimensionalidad (Dimensionality):

Las personas tienden a usar marcos espaciales para desenvolverse en el mundo real y, por
tanto, las trasladan a la hora de navegar por el mundo digital. Con la dimensionalidad,
proporcionamos referencias de origen y partida dentro de la interfaz, ayudando a reforzar
los modelos mentales dentro de la experiencia de usuario.

12. Dolly & Zoom:

Ambos recursos son movimientos de cámara que acercan o alejan objetos al usuario. Esto
le da profundidad al diseño, permitiendo al usuario indagar en áreas o contenidos
adicionales profundizando en su experiencia.

Anatomía de las transiciones

Las animaciones y transiciones de los elementos de la UI se clasifican como:
1) Persistentes: el elemento permanece visible todo el tiempo pero cambia de forma
2) Salientes: se difumina hasta que desaparecen.
3) Entrantes: aparecen en la pantalla desde una difuminación.
4) Estáticas: la transición no afecta al elemento
 Microinteracciones
Las microinteracciones son elementos sutiles de diseño que transmiten el estado de un
producto digital. Su propósito principal es proporcionar una respuesta visual e instantánea
creando un momento agradable y sorprendente para el usuario. Se encuentran presentes
en toda la aplicación.

Es habitual que las microinteracciones funcionen siguiendo los siguientes pasos:

1) Se inician mediante un disparador o trigger.
2) Se ponen en marcha una vez que se cumplen ciertos requisitos predeterminados.
3) Proporcionan un feedback al usuario sobre qué está sucediendo

Principales ventajas
En términos de UX, el uso de microinteracciones proporcionan una experiencia más
comprensible y visual, contribuyendo positivamente a la apariencia del producto o servicio.
Las principales ventajas de las microinteracciones son:
1) Aumentan el engagement con la marca.
2) Muestran el estado del sistema.
3) Previenen posibles errores entre el usuario y el proceso.
4) Conseguir que el usuario interactúe con el contenido.

Además, el reducido tamaño de los elementos hace que los tiempos de carga no sufran y
permiten que el usuario se sienta emocionalmente conectado con la interfaz.

Consejos para diseñarlas

El diseño de microinteracciones es el trabajo que se centra en los detalles de una aplicación
y como todo proceso de diseño se deben tener en cuenta unas reglas:
● Identifica el problema y establece un objetivo: piensa en el objetivo de las mismas,
en el tipo de animación y no hagas uso de ellas si no es necesario.
● No te excedas en su uso: si utilizamos demasiadas interacciones el usuario puede
verse abrumado o distraerse del proceso que está realizando, por eso deben ser
siempre controladas y pensadas para su finalidad.
● Usa interacciones naturales: si usamos una transición no adecuada, podemos hacer
que el usuario no se sitúe o no entienda lo que está pasando, y por lo tanto no
pueda llegar a su objetivo de uso.
● Simplicidad y sutileza: debemos evitar que el usuario se pregunte qué ha pasado o
en qué pantalla está. Esta desorientación hará que el usuario no termine el proceso
y se quede frustrado.
● El tiempo adecuado: existen muchísimos tipos de interacción y debemos establecer
el tiempo que deben durar para que el usuario no se distraiga ni pierda el foco. No
es lo mismo una transición entre pantallas, que una carga de datos, que un efecto al
hacer scroll.
● Varias empresas han creado sus propios principios de animación y forma de abordar
este contenido y, para establecer estos límites, el motion se suele incluir dentro de
los parámetros de un sistema de diseño. De esta forma nace el término UI Motion
Design. Tomemos de ejemplo Material Design en su apartado “Understanding
Motion” ([Link]
 Interacciones en Figma
Debemos evitar que el usuario se pregunte qué ha pasado o en qué pantalla está.
Esta desorientación hará que el usuario no termine el proceso y se quede frustrado.
Los softwares de diseño de interfaces tienen la ventaja de permitir animaciones dentro del
prototipado. Dedicar tiempo al diseño de interacciones nos ayudará a que la presentación
visual de nuestra aplicación se entienda de manera correcta.
Veamos cómo realizar algunas de ellas:

After delay (transiciones automáticas)

Permite activar una acción después de que el usuario haya pasado una cierta cantidad de
tiempo en un fotograma determinado. Deberá establecer la duración del retraso en
milisegundos (ms).

Scrolls (desplazamiento)
Controla cómo los usuarios pueden interactuar con el contenido que se extiende más allá de
las dimensiones de un dispositivo:

Overlay (superposiciones)
Los prototipos a menudo requieren transiciones entre pantallas. Para algunas interacciones,
es posible que desee mantener al usuario en la misma pantalla, pero mostrar más
información. Las superposiciones le permiten mostrar nuevo contenido o información sobre
la pantalla actual en un prototipo.

Algunos ejemplos de su uso:

● Alertas o confirmaciones
● Menús interactivos (drawers)
● Información adicional
● Teclados en pantalla

Smart animation (animación inteligente)

Busca capas coincidentes, reconoce diferencias y anima capas entre cuadros en un
prototipo. Es muy importante que las capas tengan el mismo nombre para que la animación
pueda realizarse, de otra forma la idea de smart animation se rompe.
El diseño contiene tarjetas grandes y tarjetas chicas, sin embargo, la nomenclatura debe ser
exactamente la misma para las variantes de ambas si queremos que funcione
correctamente el smart animation.

Ejercicio Clase 28
Link al archivo Figma: [Link]
Codo-a-Codo?node-id=16%3A6
Veamos las interacciones en acción
 Proyecto Final
TAREA PARA EL PROYECTO FINAL
Para ir finalizando con el Proyecto Final que desarrollamos durante todo este curso:
Vamos a incorporar animaciones (y/o microinteracciones) siguiendo los 10 principios de
motion.
Las animaciones deben cumplir con alguno de los siguientes puntos:
Orientar a los usuarios
Dar feedback sobre las interacciones
Hacer foco en algo específico
Ocultar el tiempo de carga o espera

Mostrar con imágenes los desgloses de las animaciones y microinteracciones incorporadas

al prototipo e indicar con qué puntos cumple.
DISEÑO UX/UI
Clase 29
Accesibilidad
Les damos la bienvenida
Vamos a comenzar a grabar la clase
 Clase 28 Clase 29 Clase 30

Motion Accesibilidad Digital Heurísticas

● ¿Qué es el Motion? ● ¿Qué significa ● Evaluación heurística

● 12 principios de UX en ● Los 10 principios de Jakob
accesibilidad? Nielsen
Motion
● Principios de ● Tarea para el Proyecto
● Anatomía de las
accesibilidad web Final
transiciones
● Microinteracciones ● Niveles de conformidad
● Tarea para el Proyecto ● Plugins útiles
Final ● Tarea para el Proyecto
Final
 Diseño Centrado en el Usuario (DCU)

Analizar Diseñar Validar

Hi-Fi Visual y Contenido

Design Thinking

Empatizar Definir Idear Prototipar Evaluar

Wireframe Digital Accesibilidad

Prototipo Funcional
ITERAR
¿Qué significa accesibilidad?
La accesibilidad según la Real Academia Española se define como:

● Cualidad de ser accesible.

Y accesible, de la siguiente manera:

● Que tiene acceso.

● De fácil acceso o trato.
● De fácil comprensión, inteligible.
Dentro del Diseño UX/UI la accesibilidad aborda cómo cualquier usuario puede llegar
a navegar y acceder al producto exitosamente.
Accesibilidad

La accesibilidad es la posibilidad para que las personas con discapacidad

permanente o transitoria puedan desarrollar actividades en edificios y
ámbitos urbanos, medios de transporte y medios de comunicación. Al
mismo tiempo, hacer uso de productos y servicios en igualdad de
condiciones.

Es la característica que permite a los entornos, productos, servicios y

medios de comunicación adaptarse a las necesidades de cada uno y ser
empleados por todos los individuos para cumplir con el objetivo que se
diseñan.
Si bien hay planos inclinados que En este caso, el mismo
funcionan como rampa, es cuestionable producto se adapta a diferentes
el hecho de que una persona con un alturas sin ningún esfuerzo
cochecito de bebé o silla de ruedas extra por parte de ningún
tardaría muchísimo más tiempo. usuario.
¿Qué es el Diseño Universal?
El diseño universal es un concepto que
Diseño
consiste en crear productos, entornos Universal,
Logo ONU.
y servicios que sean utilizables por
todas las personas en la mayor medida
posible, sin necesidad de que se
adapten o especialicen.
Su objetivo es simplificar la vida de
todas las personas, haciendo que los
productos, las comunicaciones y el
entorno construido por el hombre sean
más utilizables por la mayor cantidad
posible de personas con un costo nulo o
mínimo.
¿Qué es la accesibilidad digital?
La accesibilidad digital consiste en desarrollar productos que puedan ser
utilizados por el mayor número de usuarios con necesidades específicas;
debidas a limitaciones del entorno, o del modo que sean capaces de percibir,
entender, navegar e interactuar con dicho sitio.
Ley de accesibilidad web: 26.653 A nivel nacional
Según esta ley, el Estado Nacional, los
entes públicos no estatales, las
empresas del Estado y las empresas
privadas concesionarias de servicios
públicos, deben respetar en los
diseños de sus páginas web, las
normas y requisitos sobre
accesibilidad de la información que
faciliten el acceso a sus contenidos a
todas las personas con discapacidad.
World Wide Web Consortium (W3C) A nivel internacional

Es el organismo encargado a nivel

mundial de establecer los lineamientos
y estándares de diseño accesible web.

Reciben el nombre de Pautas de

accesibilidad de contenido web
(WCAG).

Cada país decide si adherirse o no a las

mismas.
Pautas de diseño web accesible

El diseño debe ser:

1. Perceptible
2. Operable
3. Comprensible
4. Robusto
1 . Diseño perceptible

La información y los componentes ● Texto alternativo

de la interfaz se deben presentar ● Medios tempodependientes
en formas que todas las personas ● Adaptabilidad
puedan percibir.
● Contenido distinguible
1 . Diseño perceptible - Texto alternativo

Es necesario ofrecer un texto

alternativo o alt text para el
contenido que no esté escrito.

El lector de audio reproduce la

descripción para las personas que
necesitan asistencia con respecto
a la imagen.
1 . Diseño perceptible - Medios tempodependientes

Siempre que aparezca contenido

multimedia como animaciones o
videos, es necesario que exista
una alternativa para que todos
puedan seguir el ritmo, como
subtítulos y transcripciones.
1 . Diseño perceptible - Contenido distinguible

Debemos facilitar a los usuarios

ver y oír el contenido, incluyendo
la separación entre fondo y plano
principal.

Tenemos que establecer los

nombres de las secciones y
señales que describen
correctamente su contenido.
2. Diseño operable

El usuario debe poder manejar ● Accesibilidad por teclado

los componentes de la interfaz ● Tiempo suficiente
y la navegación. ● Evitar destellos
● Navegabilidad
2 . Diseño operable - Accesibilidad por teclado

Es necesario ofrecer una forma de

controlar las funciones desde el
teclado, sin requerir tiempos
específicos para llevar a cabo
acciones.
2 . Diseño operable - Tiempo suficiente

Hay que darle a los usuarios el

tiempo necesario para usar e
interactuar con el contenido.

Cada persona tiene un ritmo

distinto, por lo que no es
recomendable el uso de
secuencias automáticas de
pantallas o vídeos.
2 . Diseño operable - Evitar destellos

Evitar destellos y animaciones

rápidas que puedan afectar a
personas con desórdenes
neurológicos.

Algunas personas pueden

padecer la existencia de destellos
en pantalla.
2 . Diseño operable - Navegabilidad

Guiar la navegación de los

usuarios por nuestra app,
facilitando el cumplimiento de
tareas y destacando los elementos
necesarios.
3. Diseño comprensible

Garantizar información y ● Legible

acciones fáciles de entender por ● Predecible
parte de nuestros usuarios.
● Entrada de datos asistida
3 . Diseño comprensible - Legible

Las palabras y textos que se

utilizan en la interfaz deben
reflejar las acciones, poder
identificarse y leerse fácilmente,
para garantizar una buena
experiencia de usuario.
3 . Diseño comprensible - Predecible

La apariencia y la forma de utilizar

las interfaces digitales debe ser
previsible.

Debemos mantener la
consistencia entre los
componentes que comparten
funciones similares y las acciones
relacionadas.

También es necesario advertir

acciones decisivas.
3 . Diseño comprensible - Entrada de datos asistida

Es muy importante guiar la

entrada de datos por parte de los
usuarios y señalar errores.

no puede estar en blanco

debe ser un número de 16 dígitos

4. Diseño robusto

Tanto el diseño como el contenido

debe ser robusto. Lo suficientemente
firme y consistente para ser bien ● Compatibilidad
interpretado.
4 . Diseño robusto - Compatibilidad

Es fundamental que haya una

correlación en el orden entre la
web visible y el código
desarrollado, para facilitar la
interpretación de textos
alternativos a través del lector de
pantalla.

Cuanto más compatibles sean,

mayor será la fidelidad de la
lectura.
Niveles de conformidad y prioridades
Si nos abocamos a hacer accesibles algunas pantallas, componentes o trabajar sobre
algunos rasgos en particular de nuestro prototipo, dándole mayor prioridad a la cuestión,
podemos pasar rápidamente a niveles altos de accesibilidad. Por ejemplo, empezando por
evaluar los contrastes, la legibilidad de los textos y la consistencia del diseño.

PRIORIDAD PRIORIDAD PRIORIDAD

1 2 3
No podrían acceder a la Encontrarán muy difícil Podrían tener algunas
información. acceder a la información. dificultades para acceder a la
(Tiene que mejorar) (Debería mejorar) información.
(Puede mejorar)
Pautas WCAG
En este sentido, si evaluamos las prioridades en torno a la accesibilidad del prototipo,
podemos entender si cumplimos o no con las Pautas WCAG. Lo ideal es manejarse
siempre con una accesibilidad media o alta (AA o AAA).

A AA AAA

Baja accesibilidad: Accesibilidad media: Accesibilidad alta:

Cumple con la prioridad 1. Cumple con 1 y 2. Cumple con 1, 2 y 3.
Es accesible en un nivel Es accesible para un grupo Nivel máximo: interfaz
mínimo y un grupo de más amplio, pero sigue que puede ser accedida
usuarios no va a poder quedando gente fuera del por todos.
acceder al contenido. producto.
Plugins útiles

Color
A11y Blind

Relación color/texto Alternativas de visualización

Indica niveles de Nos muestra cómo se ven las

conformidad dentro de las pantallas desde el punto de vista
pantallas y componentes. de diferentes tipos de
daltonismo.
A11y

Siguiendo los niveles de

conformidad y prioridades,
asociados con las pautas WCAG, este
plugin revisa y nivela el uso correcto
de colores y contrastes, y la
legibilidad del contenido de texto,
en base a las jerarquías y estilos de
texto propuestos.

Nos responde con sugerencias y

posibles mejoras para aumentar la
accesibilidad de nuestro prototipo.
Color Blind

Este plugin nos muestra nuestro

prototipo desde el punto de vista
de 8 falencias asociadas a la visión.

Nos responde con las diferentes

formas de ver el color según la
persona, los colores y matices que
puede percibir de nuestra app.
Funkify

Simulador de discapacidad
Funkify es una extensión para
Chrome que te ayuda a
experimentar la web y las
interfaces a través de los ojos de
usuarios extremos con diferentes
habilidades y discapacidades.
Creado por un equipo de expertos
en usabilidad y accesibilidad en
Suecia.
Tarea para el Proyecto
Para ir finalizando con el Proyecto Final que estamos desarrollando:

Revisar el proyecto para cumplir con los estándares de Accesibilidad vistos.

Tener en cuenta:

● Colores y contrastes que no dificulten la visualización

● Jerarquías de texto bien definidas
● Consistencia entre componentes y pantallas
● Orden de lectura que garantice la navegabilidad
● Carga de datos asistida con mensajes o alertas claras
● Evitar brillos y animaciones rápidas
En lo que respecta a los colores, les sugerimos revisar las pantallas con los plugins vistos en
clase.
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.

Todo en el Aula Virtual.

Muchas gracias por tu atención.
Nos vemos pronto
DISEÑO UX/UI
Clase 30
Heurística
Les damos la bienvenida
Vamos a comenzar a grabar la clase
 Clase 29 Clase 30 Clase 31

Accesibilidad Digital Heurísticas Autoevaluación

● ¿Qué significa ● Evaluación heurística ● Completar formulario de

accesibilidad? autoevaluación
● Los 10 principios de
● Principios de accesibilidad
Jakob Nielsen
web
● Niveles de conformidad ● Tarea para el Proyecto
● Plugins útiles Final
● Tarea para el Proyecto
Final
 Diseño Centrado en el Usuario (DCU)

Analizar Diseñar Validar

Hi-Fi Visual y Contenido

Design Thinking

Empatizar Definir Idear Prototipar Evaluar

Wireframe Digital Evaluación Heurística

Prototipo Funcional
ITERAR
¿Qué significa Heurística?
La heurística es vista como el arte de inventar con la intención de procurar
estrategias, métodos, criterios, que permitan resolver problemas a través de la
creatividad, pensamiento divergente o lateral.

También, se afirma que la heurística se basa en la experiencia propia del individuo,

y en la de otros para encontrar la solución más viable al problema.

Un análisis heurístico o evaluación heurística se utiliza para identificar problemas

comunes de usabilidad de un producto para resolver problemas y así mejorar la
satisfacción del usuario y su experiencia, aumentando las posibilidades de éxito
de un producto digital.
Evaluación heurística
La evaluación heurística es el estudio y evaluación de la interfaz realizado por uno o
varios expertos en usabilidad, de acuerdo con un conjunto de reglas y principios de
diseño establecidos previamente; Estos principios que sirven de base para la evaluación
se denominan principios heurísticos. El número aceptado como óptimo es entre tres y
cinco evaluadores, que pueden encontrar hasta un 75% de los errores de usabilidad.

● Es un método razonablemente rápido de realizar.

● Cada experto proporciona diferentes opiniones a partir del mismo conjunto de
reglas.
● Es económico (si se compara con otros métodos)
● Se puede utilizar junto a otras técnicas de evaluación.
● También podría ser realizada varias veces y por los miembros del equipo.
● No es un método infalible.
¿Cuándo se realiza?
La mejor forma de encontrar errores graves de usabilidad en un sistema es mediante
pruebas de usuarios, pero dada la efectividad de una evaluación heurística, hacer
pruebas sin haber realizado antes esta técnica, podría ser un desperdicio de tiempo y
dinero; Aunque puede ser realizada en varios momentos del proceso.

En el contexto del curso la vamos a realizar nosotros mismos, porque aunque Nielsen
demostró que es más efectiva al realizarla con expertos en usabilidad, es posible
extraer beneficios aunque no sean expertos (siempre que se comprendan las
heurísticas y su alcance). Las realizaremos antes de las pruebas de usabilidad en alta,
es decir con el prototipo con colores, contenido real e imágenes. (Las pruebas en alta no
formarán parte del curso, pero podrán ser realizadas por los estudiantes una vez
finalizado el mismo.)
¿Cuándo se realiza?
La evaluación heurística se puede hacer en diferentes momentos del proceso.

● Se puede llevar a cabo una vez que se han elaborado las primeras
propuestas y construido los primeros prototipos, puesto que esto permitirá
corregir aspectos de usabilidad antes de desarrollarlo por completo.
● También se puede hacer en la etapa de lanzamiento, una vez desarrollado,
para diagnosticar elementos de usabilidad que no eran visibles en etapas
previas.
● En el caso de proyectos de rediseño (en los que se parte de un proyecto
preexistente), es recomendable realizarla al inicio del proyecto sobre el diseño
del que se parte, puesto que los resultados ayudarán a definir algunas pautas
de la nueva propuesta.
¿Cómo realizar una evaluación heurística?
Es recomendable proporcionar a los evaluadores un escenario de uso típico, enumerando
los diversos pasos que un usuario tomaría para realizar un conjunto de muestra de
tareas realistas. Tal escenario debe construirse sobre la base de un análisis de la tarea de
los usuarios reales y su trabajo para ser lo más representativo posible del uso eventual del
sistema. (Nosotros vamos a usar el listado de tareas que ya redactamos para las
métricas de las pruebas de usabilidad)

Los evaluadores usarán el producto (prototipo) para obtener una primera idea de
interacción y el alcance del mismo. Identificarán elementos que quieran evaluar más a
fondo.

Luego, los evaluadores llevarán a cabo otro análisis, mientras aplican las heurísticas a los
elementos identificados en la primera evaluación. Se enfocarán en elementos individuales
y verán qué tan bien encajan en el diseño general.
Listado de tareas y listado de principios heurísticos

Colocar si se cumple o no.

Explicar cuál es el
problema y cómo se va
a solucionar (iterar)
Los 10 principios Heurísticos
Creados por Jakob Nielsen, el padre de la usabilidad, en 1990, nos acercan a
cumplir con el concepto de la usabilidad (facilidad de uso) para el beneficio de
los usuarios.
Los 10 principios heurísticos
1. Visibilidad del estado del
sistema:

El diseño siempre debería

mantener informados a los
usuarios de lo que está
ocurriendo.

En el momento correcto y con los

elementos adecuados.
Los 10 principios heurísticos
2. Adecuación entre el sistema y
el mundo real:

El diseño debería hablar el

lenguaje de los usuarios,
mediante palabras, frases y
conceptos que le sean familiares.

Seguir las convenciones del

mundo real, haciendo que la
información aparezca en un
orden natural y lógico.
Los 10 principios heurísticos
3. Libertad y control del usuario:

Para las ocasiones en que los

usuarios comentan errores se
necesitarán de “salidas de
emergencia” marcadas de forma
muy clara para dejar el estado no
deseado al que accedieron.
Salidas simples y rápidas.
Los 10 principios heurísticos
4. Estándares y consistencia:

Los usuarios no deberían

cuestionarse si acciones,
situaciones o palabras significan
en realidad la misma cosa;
siempre debemos seguir las
convenciones establecidas.

Esta heurística aplica tanto a

palabras como al diseño visual
“coherencia en el todo”.
Los 10 principios heurísticos
5. Reconocimiento antes que
memoria:

Las personas no tendrían que

recurrir a su memoria para saber
cómo continuar.

Las instrucciones deben ser

fáciles de reconocer, deben estar
en el diseño.
Los 10 principios heurísticos
6. Prevención de errores:

Como la frase “mejor prevenir que

lamentar”, es preferible dar
instrucciones extra claras a que el
usuario reciba un cartel que diga
“error”.

Debemos localizar las acciones

que conducen a un posible error y
dar la ayuda correspondiente o al
menos preguntar al usuario si
está seguro de querer realizar esa
acción.
Los 10 principios heurísticos
7. Flexibilidad y eficiencia:

Los accesos rápidos o atajos para

los usuarios expertos, agilizan la
interacción con el diseño,
conservando los caminos
habituales para el resto de las
personas.
Los 10 principios heurísticos
8. Diseño estético y minimalista:

El diseño no debería contener

información redundante.

Lo menos importante le quita

atención a lo fundamental.

Si la información se encuentra
compitiendo por la atención del
usuario, molesta a la vista.

Menos es más.
Los 10 principios heurísticos
9. Ayuda al usuario para
recuperación de errores:

Las notificaciones de error se

deben expresar en un lenguaje
claro y reconocible.

Hay que indicar al usuario cual es

el error y cómo se soluciona.

No utilizar códigos de error, ni

culpar al usuario.
Los 10 principios heurísticos
10. Ayuda y documentación:

En algunos casos es necesario

brindar información adicional
sobre el uso del sistema, es
preferible si el diseño funciona sin
documentación adicional, pero si
es necesario hay que brindar
ayuda de la mejor manera.

La documentación debe ser fácil

de encontrar, breve y centrada en
las tareas del usuario.
 Ejercicio
Clase 30
Realizar una evaluación
heurística sobre el prototipo de
otro estudiante
Tarea para el Proyecto
Para ir finalizando con el Proyecto Final que desarrollamos durante todo este curso:

Vamos a realizar una Evaluación Heurística de nuestro prototipo siguiendo los 10

principios heurísticos de Jakob Nielsen.

Completar un cuadro donde se indique qué principios se cumplen, cuáles principios no se

cumplen, y cómo solucionar cada problema encontrado.

Para realizar esta tarea utilizaremos:

● El listado de tareas redactado para la tarea de Pruebas de usabilidad y métricas.

● El listado de los 10 principios heurísticos vistos en clase.

Realizar un breve informe sobre los resultados de la evaluación.

Ejemplo de entrega
Evaluación Heurística
Informe de la Evaluación Heurística
Nuestro prototipo cumple con las siguientes reglas:
● La app contiene una buena libertad de usabilidad para el usuario.
● Los íconos son visualmente distinguibles, de acuerdo a su significado conceptual.
● Todo en la app tiene su nombre, para no depender de la memoria del usuario.
● En la app hay filtros que ayudan a la eficiencia de las búsquedas y atajos.
● No existen elementos de más. Todos tienen una función en especial ya sea, guiar,
informar o accionar.

Iteramos y mejoramos:

● Utilizamos aún más la jerga del usuario.

● Creamos el Onboarding
● Colocamos textos que orientan en los filtros de búsqueda como por ejemplo:
“Tipo de terapia”
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.

Todo en el Aula Virtual.

Muchas gracias por tu atención.
Nos vemos pronto
 ¿Qué significa Accesibilidad?

La accesibilidad según la Real Academia Española se define como:

 Cualidad de accesible.

Y accesible, de la siguiente manera:

 Que tiene acceso.

 De fácil acceso o trato.
 De fácil comprensión, inteligible.

Dentro del Diseño UX/UI la accesibilidad aborda cómo cualquier usuario puede llegar a
navegar y acceder al producto exitosamente.

Accesibilidad
La accesibilidad es la posibilidad para que las personas con discapacidad permanente

o transitoria puedan desarrollar actividades en edificios y ámbitos urbanos, medios de

transporte y medios de comunicación. Al mismo tiempo, hacer uso de productos y
servicios en igualdad de condiciones.

Es la característica que permite a los entornos, productos, servicios y medios de

comunicación adaptarse a las necesidades de cada uno y ser empleados por todos los
individuos para cumplir con el objetivo que se diseñan.
¿Qué es el diseño universal?
El diseño universal es un concepto que consiste en crear productos, entornos y
servicios que sean utilizables por todas las personas en la mayor medida posible, sin
necesidad de que se adapten o especialicen.

Su objetivo es simplificar la vida de todas las personas, haciendo que los productos,
las comunicaciones y el entorno construido por el hombre sean más utilizables por la
mayor cantidad posible de personas con un costo nulo o mínimo.

¿Qué es la accesibilidad digital?

La accesibilidad digital consiste en desarrollar productos que puedan ser utilizados por
el mayor número de usuarios con necesidades específicas; debidas a limitaciones del
entorno, o del modo que sean capaces de percibir, entender, navegar e interactuar
con dicho sitio.

Ley de accesibilidad web: 26.653 - A nivel nacional

Según esta ley, el Estado Nacional, los entes públicos no estatales, las empresas del
Estado y las empresas privadas concesionarias de servicios públicos, deben respetar
en los diseños de sus páginas web, las normas y requisitos sobre accesibilidad de la
información que faciliten el acceso a sus contenidos a todas las personas con
discapacidad.
World Wide Web Consortium (W3C) - A nivel internacional

Es el organismo encargado a nivel mundial de establecer los lineamientos y

estándares de diseño accesible web.

Reciben el nombre de Pautas de accesibilidad de contenido web (WCAG).

Cada país decide si adherirse o no a las mismas.

Pautas de diseño web accesible
El diseño debe ser:
 Perceptible
 Operable
 Comprensible
 Robusto

Pautas de diseño accesible - Diseño perceptible

La información y los componentes de la interfaz se deben presentar en formas que
todas las personas puedan percibir.

 Texto alternativo
 Medios tempodependientes
 Adaptabilidad
 Contenido distinguible

Texto alternativo:

Es necesario ofrecer un texto alternativo o alt text para el contenido que no esté
escrito.

El lector de audio reproduce la descripción para las personas que necesitan asistencia
con respecto a la imagen.

Medios tempodependientes:

Siempre que aparezca contenido multimedia como animaciones o videos, es necesario

que exista una alternativa para que todos puedan seguir el ritmo, como subtítulos y
transcripciones.

Adaptabilidad:

Los componentes deben ser adaptables, sin perder información o alterar su estructura.

Es necesario establecer distintos niveles de lectura y jerarquías para guiar la lectura.

Contenido distinguible:

Debemos facilitar a los usuarios ver y oír el contenido, incluyendo la separación entre
fondo y plano principal.

Tenemos que establecer los nombres de las secciones y señales que describen
correctamente su contenido.
Pautas de diseño accesible - Diseño operable

El usuario debe poder manejar los componentes de la interfaz y la navegación.

 Accesibilidad por teclado

 Tiempo suficiente
 Evitar destellos
 Navegabilidad

Accesibilidad por teclado:

Es necesario ofrecer una forma de controlar las funciones desde el teclado, sin
requerir tiempos específicos para llevar a cabo acciones.

Tiempo suficiente:

Hay que darles a los usuarios el tiempo necesario para usar e interactuar con el
contenido.

Cada persona tiene un ritmo distinto, por lo que no es recomendable el uso de

secuencias automáticas de pantallas o vídeos.

Evitar destellos:

Evitar destellos y animaciones rápidas que puedan afectar a personas con desórdenes
neurológicos.

Algunas personas pueden padecer la existencia de destellos en pantalla.

Navegabilidad:

Guiar la navegación de los usuarios por nuestra app, facilitando el cumplimiento

de tareas y destacando los elementos necesarios.

Pautas de diseño accesible - Diseño comprensible

Garantizar información y acciones fáciles de entender por parte de nuestros usuarios.

 Legible
 Predecible
 Entrada de datos asistida

Legible:
Las palabras y textos que se utilizan en la interfaz deben reflejar las acciones, poder
identificarse y leerse fácilmente, para garantizar una buena experiencia de usuario.

Predecible:

La apariencia y la forma de utilizar las interfaces digitales debe ser previsible.

Debemos mantener la consistencia entre los componentes que comparten funciones

similares y las acciones relacionadas.

También es necesario advertir acciones decisivas.

Entrada de datos asistida:

Es muy importante guiar la entrada de datos por parte de los usuarios y señalar
errores.

Pautas de diseño accesible - Diseño robusto

Tanto el diseño como el contenido deben ser robustos. Lo suficientemente firmes y
consistentes para ser bien interpretados.

 Compatibilidad

Es fundamental que haya una correlación en el orden entre la web visible y el código
desarrollado, para facilitar la interpretación de textos alternativos a través del lector de
pantalla.

Compatibilidad:

Cuanto más compatible sean, mayor será la fidelidad de la lectura.

Pautas WCAG / Niveles de conformidad y prioridades
Tarea para el proyecto final:
Para ir finalizando con el Proyecto Final que estamos desarrollando:

Revisar el proyecto para cumplir con los estándares de Accesibilidad vistos.

Tener en cuenta:

 Colores y contrastes que no dificulten la visualización

 Jerarquías de texto bien definidas
 Consistencia entre componentes y pantallas
 Orden de lectura que garantice la navegabilidad
 Carga de datos asistida con mensajes o alertas claras
 Evitar brillos y animaciones rápidas

En lo que respecta a los colores, les sugerimos revisar las pantallas con los plugins
vistos en clase.
¿Qué significa Heurística?
La heurística es vista como el arte de inventar con la intención de procurar estrategias,
métodos, criterios, que permitan resolver problemas a través de la creatividad,
pensamiento divergente o lateral.

También, se afirma que la heurística se basa en la experiencia propia del individuo, y

en la de otros para encontrar la solución más viable al problema.

Un análisis heurístico o evaluación heurística se utiliza para identificar problemas

comunes de usabilidad de un producto para resolver problemas y así mejorar la
satisfacción del usuario y su experiencia, aumentando las posibilidades de éxito de un
producto digital.

Evaluación heurística
La evaluación heurística es el estudio y evaluación de la interfaz realizado por uno o
varios expertos en usabilidad, de acuerdo con un conjunto de reglas y principios de
diseño establecidos previamente; Estos principios que sirven de base para la
evaluación se denominan principios heurísticos. El número aceptado como óptimo es
entre tres y cinco evaluadores, que pueden encontrar hasta un 75% de los errores de
usabilidad.

 Es un método razonablemente rápido de realizar.

 Cada experto proporciona diferentes opiniones a partir del mismo conjunto de
reglas.
 Es económico (si se compara con otros métodos)
 Se puede utilizar junto a otras técnicas de evaluación.
 También podría ser realizada varias veces y por los miembros del equipo.
 No es un método infalible.
¿Cuándo se realiza?
La mejor forma de encontrar errores graves de usabilidad en un sistema es mediante
pruebas de usuarios, pero dada la efectividad de una evaluación heurística, hacer
pruebas sin haber realizado antes esta técnica, podría ser un desperdicio de tiempo y
dinero; Aunque puede ser realizada en varios momentos del proceso.

En el contexto del curso la vamos a realizar nosotros mismos, porque aunque Nielsen
demostró que es más efectiva al realizarla con expertos en usabilidad, es posible
extraer beneficios aunque no sean expertos (siempre que se comprendan las
heurísticas y su alcance). Las realizaremos antes de las pruebas de usabilidad en alta,
es decir con el prototipo con colores, contenido real e imágenes. (Las pruebas en alta
no formarán parte del curso, pero podrán ser realizadas por los estudiantes una vez
finalizado el mismo.)

La evaluación heurística se puede hacer en diferentes momentos del proceso.

Se puede llevar a cabo una vez que se han elaborado las primeras propuestas y
construido los primeros prototipos, puesto que esto permitirá corregir aspectos de
usabilidad antes de desarrollarlo por completo.

También se puede hacer en la etapa de lanzamiento, una vez desarrollado, para

diagnosticar elementos de usabilidad que no eran visibles en etapas previas.

En el caso de proyectos de rediseño (en los que se parte de un proyecto preexistente),

es recomendable realizarla al inicio del proyecto sobre el diseño del que se parte,
puesto que los resultados ayudarán a definir algunas pautas de la nueva propuesta.

¿Cómo realizar una evaluación heurística?

Es recomendable proporcionar a los evaluadores un escenario de uso típico,
enumerando los diversos pasos que un usuario tomaría para realizar un conjunto de
muestra de tareas realistas. Tal escenario debe construirse sobre la base de un
análisis de la tarea de los usuarios reales y su trabajo para ser lo más representativo
posible del uso eventual del sistema. (Nosotros vamos a usar el listado de tareas que
ya redactamos para las métricas de las pruebas de usabilidad)

Los evaluadores usarán el producto (prototipo) para obtener una primera idea de
interacción y el alcance del mismo. Identificarán elementos que quieran evaluar más a
fondo.

Luego, los evaluadores llevarán a cabo otro análisis, mientras aplican las heurísticas a
los elementos identificados en la primera evaluación. Se enfocarán en elementos
individuales y verán qué tan bien encajan en el diseño general.
Los 10 principios Heurísticos
Creados por Jakob Nielsen, el padre de la usabilidad, en 1990, nos acercan a cumplir
con el concepto de la usabilidad (facilidad de uso) para el beneficio de los usuarios.

1. Visibilidad del estado del sistema:

El diseño siempre debería mantener informados a los usuarios de lo que está
ocurriendo.

En el momento correcto y con los elementos adecuados.

2. Adecuación entre el sistema y el mundo real:
El diseño debería hablar el lenguaje de los usuarios, mediante palabras, frases y
conceptos que le sean familiares.

Seguir las convenciones del mundo real, haciendo que la información aparezca en un
orden natural y lógico.

3. Libertad y control del usuario:

Para las ocasiones en que los usuarios comentan errores se necesitarán de “salidas
de emergencia” marcadas de forma muy clara para dejar el estado no deseado al que
accedieron. Salidas simples y rápidas.
4. Estándares y consistencia:
Los usuarios no deberían cuestionarse si acciones, situaciones o palabras significan
en realidad la misma cosa; siempre debemos seguir las convenciones establecidas.

Esta heurística aplica tanto a palabras como al diseño visual “coherencia en el todo”.

5. Reconocimiento antes que memoria:

Las personas no tendrían que recurrir a su memoria para saber cómo continuar.

Las instrucciones deben ser fáciles de reconocer, deben estar en el diseño.

6. Prevención de errores:
Como la frase “mejor prevenir que lamentar”, es preferible dar instrucciones extra
claras a que el usuario reciba un cartel que diga “error”.

Debemos localizar las acciones que conducen a un posible error y dar la ayuda
correspondiente o al menos preguntar al usuario si está seguro de querer realizar esa
acción.

7. Flexibilidad y eficiencia:
Los accesos rápidos o atajos para los usuarios expertos, agilizan la interacción con el
diseño, conservando los caminos habituales para el resto de las personas.
8. Diseño estético y minimalista:
El diseño no debería contener información redundante.

Lo menos importante le quita atención a lo fundamental.

Si la información se encuentra compitiendo por la atención del usuario, molesta a la

vista.

Menos es más.

9. Ayuda al usuario para recuperación de errores:

Las notificaciones de error se deben expresar en un lenguaje claro y reconocible.

Hay que indicar al usuario cual es el error y cómo se soluciona.

No utilizar códigos de error, ni culpar al usuario.

10. Ayuda y documentación:
En algunos casos es necesario brindar información adicional sobre el uso del sistema,
es preferible si el diseño funciona sin documentación adicional, pero si es necesario
hay que brindar ayuda de la mejor manera.

La documentación debe ser fácil de encontrar, breve y centrada en las tareas del
usuario.
Tarea para el proyecto final:
Para ir finalizando con el Proyecto Final que desarrollamos durante todo este curso:

Vamos a realizar una Evaluación Heurística de nuestro prototipo siguiendo los 10

principios heurísticos de Jakob Nielsen.

Completar un cuadro donde se indique qué principios se cumplen, cuáles principios no

se cumplen, y cómo solucionar cada problema encontrado.

Para realizar esta tarea utilizaremos:

 El listado de tareas redactado para la tarea de Pruebas de usabilidad y

métricas.
 El listado de los 10 principios heurísticos vistos en clase.

Realizar un breve informe sobre los resultados de la evaluación.

DISEÑO UX/UI
Clase 31
Autoevaluación
Les damos la bienvenida
Vamos a comenzar a grabar la clase
 Clase 30 Clase 31 Clase 32

Heurística Autoevaluación Reporte UX y Portfolio

● Evaluación heurística ¿Qué es un Reporte UX?

● Formulario de ●
● Los 10 principios de Jakob Armado de casos de
Nielsen Autoevaluación ●
estudio
● Tarea para el Proyecto ● Mockups
Final ● ¿Qué es un Portfolio UX?
● Recursos útiles para
continuar aprendiendo:
libros, blogs, podcasts, etc.
● Tarea para el Proyecto
Final
Formulario de Autoevaluación
● El link al formulario de autoevaluación será entregado por su
instructor/a.
● Se completa de manera individual.
● La autoevaluación es un análisis personal, no lleva calificación.
● Es obligatorio para la cursada completar este formulario.
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.

Todo en el Aula Virtual.

Muchas gracias por tu atención.
Nos vemos pronto
DISEÑO UX/UI
Clase 32
Portfolio y Reporte UX
Les damos la bienvenida
Vamos a comenzar a grabar la clase
 Clase 31 Clase 32 Clase 33

Autoevaluación Reporte UX y Portfolio Recuperatorio y Presentación

● Formulario de ● ¿Qué es un Reporte UX? ● Entrega del Recuperatorio del

Autoevaluación ● Armado de casos de estudio Proyecto final
● Mockups
● ¿Qué es un Portfolio UX?
● Presentación de los
● Recursos útiles para continuar estudiantes de sus Proyectos
aprendiendo: libros, blogs, finales
podcasts, etc. ● Presentación de slides y
● Tarea para el Proyecto Final Prototipo en alta fidelidad
Reporte de Investigación UX
Los reportes de investigación son los datos registrados por los
investigadores de UX transformados en información útil mediante el
análisis de la información.
El objetivo es transmitir los detalles sobre el estudio, para que se
puedan incorporar en el diseño UX y de la estrategia del producto
digital.
Presentar los resultados de una investigación es crucial en el proceso
de diseño, sobre todo cuando hay que presentarlos a audiencias fuera
del equipo de UX pero con poder de decisión.
Estructura de un reporte

Podemos organizar la presentación de un reporte UX de modo que se

logre explicar estos tres objetivos:

1. Por qué: Cuál es el objetivo que buscamos cumplir

2. Cómo: Establecer qué metodologías se utilizaron y cómo se
validaron
3. Qué: Presentar datos obtenidos, logros y hallazgos
Consejos para su redacción

Nuestro reporte tiene que recoger toda la información necesaria

para que la organización pueda tomar decisiones de forma
informada y basándose en datos.

La clave del éxito es comunicar desde la generalización hacia el

detalle específico de cómo se lograron nuestros objetivos para que las
personas que no formen parte del equipo de trabajo puedan entender
con claridad todo su desarrollo.

Veamos algunos consejos útiles a la hora de presentar visualmente

nuestra investigación:
Consejos para redactar un Reporte UX
● No enviar solo un formulario largo:
Es un error enviar por correo un informe largo que nadie va a leer por completo. Es
mucho mejor añadir un mini-informe o unas diapositivas con los hallazgos más
importantes de la investigación para dar una idea rápida de los hallazgos de la
investigación. Quien quiera profundizar, podrá leer el informe completo y detallado
de la investigación.

● No olvidar los gráficos:

La información visual ayuda a la comprensión de los datos cualitativos de la
investigación de manera rápida y clara, aunque siempre deben ir acompañados de
una explicación escrita para quien desee ahondar en los detalles.
Consejos para redactar un Reporte UX
● No enviar solo los hallazgos:
Mostrar los datos y los hallazgos mediante unas diapositivas impactantes está bien,
pero hay que dar lugar a quien quiera ahondar en la información para corroborar
que fue correctamente realizada. Es muy importante que se tenga acceso a la
calidad del trabajo.
● Que contenga la información importante/imprescindible:
Recordar primero que ningún interesado en nuestro reporte va a leer más de 40
slides, debemos intentar hacer un relato claro, conciso e interesante de cada punto
abordado en nuestro proyecto. Segundo que No estamos dando un curso de UX/UI
en nuestro reporte, debe sentirse profesional y real, por lo tanto No hagan
referencias a “tareas del curso” sino a estudios o análisis sobre la temática que
desarrollaron.
Ejemplo:

Analicemos rápidamente el siguiente caso de estudio:

→ Despegar UX - Viajar en la nueva normalidad

Casos de estudio
¿Cómo podemos trasladar estas presentaciones tan técnicas a nuestros
proyectos individuales?
Igualmente, debemos poner el foco en el por qué, cómo y qué de los
reportes UX, pero convirtiendo nuestra presentación en una historia para
volverla amena e interesante.
No queremos que quien esté mirando nuestro proyecto (ya sea leyéndolo
por su cuenta o si nosotros lo presentamos), pierda el interés. Para esto,
nada mejor que utilizar como recurso un storytelling que le aporte al
interlocutor el contexto necesario para que, de manera independiente a sus
conocimientos de metodología de diseño de producto, tenga una visión
global de la misma.
Cómo presentar mi caso de estudio
Luego de explicar cuál es nuestro objetivo (por qué), es necesario demostrar que nuestra
investigación (qué) se encuentra validada correctamente (cómo).

Contenido: Validado por:

MVP (nombre del producto y features) Investigación

User persona Entrevistas y Mapas de empatía

Competencia Benchmarking

Arquitectura de Información Card Sorting

User Flow Pruebas de usabilidad

Wireframes (evolución) Pruebas de usabilidad y Heurísticas

Diseño UI Prototipo Funcional

Imprescindibles en un caso de estudio

1. Titular

Comienza con un título grande

(puede ser el nombre de tu
proyecto o su mayor diferencial) y
una bajada que cuente de tu
proyecto. Podrías apoyarte en tu
Elevator Pitch
Imprescindibles en un caso de estudio

2. MVP

Enumera y detalla cada una de las

funcionalidades de tu aplicación y
qué es lo que ofreces
(imprescindibles).

Si lo deseas, puedes añadir también

tus expectativas a futuro
(deseables).
Imprescindibles en un caso de estudio

3. User Persona

Detallar la user persona de tu

proyecto (puedes enfocarte solo en
lo más relevante) y mencionar
cómo fueron validadas.
Imprescindibles en un caso de estudio

4. User Flow

Mostrar el user flow de la

funcionalidad principal.

En caso de que sea necesario

mostrar únicamente el recorrido de
un usuario o una sección del flow
completo.

En otra slide podemos mostrar el

mapa de sitio.
Imprescindibles en un caso de estudio

5. Evolución de pantallas

El objetivo es mostrar las

iteraciones del prototipo, por lo
tanto, se recomienda mostrar la
evolución de los wireframes para
ver cómo fue modificándose y
ganando calidad.
Imprescindibles en un
caso de estudio
6. Identidad

Se deben mostrar las diferentes decisiones

de diseño aplicadas a la interfaz.

Esta sección puede incluir:

● UI kit
● Moodboard
● Atomic design
● Paleta de colores
● Logo
● Etc.
Imprescindibles en un
caso de estudio
7. Pantallas

Detallar la/s pantalla/s más destacadas de la

app.

Colocar el link al prototipo funcional, con

cuidado que no sea dirigido a la edición del
prototipo sino a la página de prueba del
prototipo, (siempre chequear el link desde
una ventana de incógnito).
Ejemplos de presentaciones

Ver en Behance
Ejemplos de presentaciones

Ver en Behance
Ejemplos de presentaciones

Ver en Behance
Mockups
Los Mockups, son “fotomontajes” que permiten a los diseñadores gráficos o
UI, mostrar al cliente cómo quedarían sus diseños aplicados. Un mockup,
hace que el diseño “se vea real” y nos brinda una imagen profesional.
Suelen estar diseñados en Photoshop y es tan simple como incorporar una
imagen de tu pantalla en el sector correcto del mockup.
Es lo más próximo a visualizar cómo puede estar diseñado un producto
digital en la realidad.
Se suele utilizar para:
Packaging, Papelería, Diseño de indumentaria, Publicidad, y por supuesto
Diseño UI: webs, desktop, tablet, mobile, etc
Tipos de mockups en el diseño UI
Contexto de uso:

Este tipo de mockups sirve para que los

usuarios entiendan cómo y dónde podrían
necesitar y usar tu producto digital.

Parecen fotos tomadas directamente de la

realidad, tanto el dispositivo como el
ambiente deben parecer reales.
Ejemplo de Buscador de psicólogo
Irina Kerekes
Tipos de mockups en el diseño UI
Persuasivos:

Este tipo de mockups tiene por objetivo

llamar la atención.

Se suele usar perspectivas, el dispositivo

parece real pero el ambiente puede
parecer de “fantasía”.
Ejemplo de Buscador de psicólogo
Irina Kerekes
Tipos de mockups en el diseño UI
Informativos:

Este tipo de mockups tiene por objetivo

desarrollar una información particular.

Suele mostrarse uno al lado del otro para

mostrar un recorrido, o para desarrollar
distintas funcionalidades a la vez.
Ejemplo de Buscador de psicólogo
Irina Kerekes
Tipos de mockups en el diseño UI
Identificatorios:

Este tipo de mockups tiene por objetivo

mostrar el estilo visual general del
proyecto.

Se enfoca en la estética y personalidad del

proyecto o temática del mismo.
Ejemplo de Buscador de psicólogo
Irina Kerekes
Portfolio
Tener un portfolio como diseñador UX/UI es imprescindible para cualquier
profesional de la industria. Es la mejor oportunidad de presentar tu trabajo
de la mejor manera y dar ejemplos de proyectos a detalle que expongan tu
proceso creativo y reflejan quién sos como diseñador.
Ya sea como diseñador independiente o de tiempo completo, los clientes o
empleadores potenciales casi siempre solicitarán tu portfolio para poder
conocer tu forma de trabajo.
Traducir tu flujo de trabajo completo y complejo a un formato visual es un
desafío, especialmente si querés enfocarte únicamente a UX. Sin embargo,
hay muchas formas de contar tu historia e incorporar recursos visuales.
Plataformas
Nuestro portfolio puede armarse en cientos de plataformas, cada una con sus
ventajas particulares. Pueden elegir la que más les convenga para armar su
portfolio (incluso crear su propio sitio web personalizado para presentarlo)

Recomendamos crear un perfil en:

Behance Dribbble

Y siempre mantener un perfil actualizado en:

LinkedIn
Consejos para realizar tu portfolio
● Que se comprenda claramente el área del Diseño UX/UI a la cual querés dedicarte,
un reporte puede ser extenso y abarcar todo el proceso completo, pero en el Portfolio
es conveniente intentar ir al grano y lucirte. Lo más probable es que un reclutador te
llame para desarrollar una tarea similar a la que estás mostrando que sabes hacer.

● Utiliza storytelling para describir todos los proyectos. Una de las características
principales de un UX Designer es contar historias a través de sus productos, por lo que
tu portafolio tiene que reflejar tus capacidades para conseguirlo.

● Es muy importante explicar el proceso que se ha seguido en los diseños, detallando

cómo y por qué tomaste esas decisiones en tu proyecto.
Portfolio Web

Ir al portfolio
Portfolio Dribbble

Ir al portfolio
Portfolio Behance

Ir al portfolio
¿Cómo continuamos?

Para poder seguir avanzando en tu carrera, también hay otras acciones

que puedes hacer en el día a día para no dejar de aprender.
Como toda área relacionada a la tecnología, el ámbito de la
experiencia de usuario es una disciplina que avanza continuamente,
por lo que mantenerse actualizado es casi una obligación. Para ello lo
recomendable es unirse a grupos de diseñadores UX/UI, asistir a
webinars o conferencias cada cierto tiempo, y realizar cursos de
especialización.
También es muy recomendable leer libros que traten temas técnicos u
otros que te puedan servir de inspiración.
Recomendaciones de libros
relacionados al diseño UX/UI

No me hagas pensar Las leyes de la La psicología de los

Steve Krug simplicidad objetos cotidianos
John Maeda Don Norman
Recomendaciones de libros
relacionados al diseño UX/UI

Lean UX 100 Cosas sobre la gente Resolver problemas y

Jeff Gothelf y Josh Seiden que cada diseñador probar nuevas cosas en
debe saber solo 5 días
Susan M. Weinschenk Jake Knapp
Comunidades UX
Revistas

Blogs
Comunidades UX

Podcasts

Empresas e instituciones
Comunidades UX

Organizaciones y más

UX Latam UX en español UX Friends UX Collective Memorisely

Proyecto Final
Tarea para el Proyecto:
Para finalizar con el proyecto final…

¡Te felicitamos por haber llegado a la última tarea del proyecto final!

Te recomendamos:

● Completar tu reporte (presentación de slides) para el Recuperatorio en la clase 33.

● Crear tu portfolio, recorda que lo importante es lucirse y mostrar de forma clara lo
imprescindible de todo lo que hicimos durante el curso.
● Unirte a las redes sociales de Diseñadores UX/UI, y compartir tu portfolio.
● Actualizar tu LinkedIn, y generar tu red de contactos relacionada al diseño UX/UI.
● No perder el contacto con tu docente y tus compañeros/as.
● Definir cuál de las áreas que comprende el diseño UX/UI te interesa más y apuntar a
conseguir trabajo específico de lo que más disfrutaste del curso.
● Continuar estudiando y actualizándote.
Ejemplo de entrega:
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.

Todo en el Aula Virtual.

Muchas gracias por tu atención.
Nos vemos pronto
Reporte y Portfolio
Reporte de Investigación UX
Los reportes de investigación son los datos registrados por los investigadores de UX
transformados en información útil mediante el análisis de la información.

El objetivo es transmitir los detalles sobre el estudio, para que se puedan incorporar en
el diseño UX y de la estrategia del producto digital.

Presentar los resultados de una investigación es crucial en el proceso de diseño, sobre

todo cuando hay que presentarlos a audiencias fuera del equipo de UX pero con poder
de decisión.

Estructura de un reporte
Podemos organizar la presentación de un reporte UX de modo que se logre explicar
estos tres objetivos:

Por qué: Cuál es el objetivo que buscamos cumplir

Cómo: Establecer qué metodologías se utilizaron y cómo se validaron

Qué: Presentar datos obtenidos, logros y hallazgos

Consejos para su redacción

Nuestro reporte tiene que recoger toda la información necesaria para que la
organización pueda tomar decisiones de forma informada y basándose en datos.

La clave del éxito es comunicar desde la generalización hacia el detalle específico de

cómo se lograron nuestros objetivos para que las personas que no formen parte del
equipo de trabajo puedan entender con claridad todo su desarrollo.

Veamos algunos consejos útiles a la hora de presentar visualmente nuestra

investigación:

Consejos para redactar un Reporte UX

No enviar solo un formulario largo:

Es un error enviar por correo un informe largo que nadie va a leer por completo. Es
mucho mejor añadir un mini-informe o unas diapositivas con los hallazgos más
importantes de la investigación para dar una idea rápida de los hallazgos de la
investigación. Quien quiera profundizar, podrá leer el informe completo y detallado de
la investigación.

No olvidar los gráficos:

La información visual ayuda a la comprensión de los datos cualitativos de la

investigación de manera rápida y clara, aunque siempre deben ir acompañados de una
explicación escrita para quien desee ahondar en los detalles.
No enviar solo los hallazgos:

Mostrar los datos y los hallazgos mediante unas diapositivas impactantes está bien,
pero hay que dar lugar a quien quiera ahondar en la información para corroborar que
fue correctamente realizada. Es muy importante que se tenga acceso a la calidad del
trabajo.

Que contenga la información importante/imprescindible:

Recordar primero que ningún interesado en nuestro reporte va a leer más de 40 slides,
debemos intentar hacer un relato claro, conciso e interesante de cada punto abordado
en nuestro proyecto. Segundo que No estamos dando un curso de UX/UI en nuestro
reporte, debe sentirse profesional y real, por lo tanto No hagan referencias a “tareas
del curso” sino a estudios o análisis sobre la temática que desarrollaron.

Analicemos rápidamente el siguiente caso de estudio:

Despegar UX - Viajar en la nueva normalidad

Link: [Link]

Casos de estudio
¿Cómo podemos trasladar estas presentaciones tan técnicas a nuestros proyectos
individuales?

Igualmente, debemos poner el foco en el por qué, cómo y qué de los reportes UX, pero
convirtiendo nuestra presentación en una historia para volverla amena e interesante.

No queremos que quien esté mirando nuestro proyecto (ya sea leyéndolo por su
cuenta o si nosotros lo presentamos), pierda el interés. Para esto, nada mejor que
utilizar como recurso un storytelling que le aporte al interlocutor el contexto necesario
para que, de manera independiente a sus conocimientos de metodología de diseño de
producto, tenga una visión global de la misma.

Cómo presentar mi caso de estudio

Luego de explicar cuál es nuestro objetivo (por qué), es necesario demostrar que
nuestra investigación (qué) se encuentra validada correctamente (cómo).
Imprescindibles en un caso de estudio
1. Titular
Comienza con un título grande (puede ser el nombre de tu proyecto o su mayor
diferencial) y una bajada que cuente de tu proyecto. Podrías apoyarte en tu Elevator
Pitch.

2. MVP
Enumera y detalla cada una de las funcionalidades de tu aplicación y qué es lo que
ofreces (imprescindibles).

Si lo deseas, puedes añadir también tus expectativas a futuro (deseables).

3. User Persona
Detallar la user persona de tu proyecto (puedes enfocarte solo en lo más relevante) y
mencionar cómo fueron validadas.

4. User Flow
Mostrar el user flow de la funcionalidad principal.

En caso de que sea necesario mostrar únicamente el recorrido de un usuario o una

sección del flow completo.

En otra slide podemos mostrar el mapa de sitio.

5. Evolución de pantallas
El objetivo es mostrar las iteraciones del prototipo, por lo tanto, se recomienda mostrar
la evolución de los wireframes para ver cómo fue modificándose y ganando calidad.

6. Identidad
Se deben mostrar las diferentes decisiones de diseño aplicadas a la interfaz.

Esta sección puede incluir:

UI kit – Moodboard - Atomic design - Paleta de colores – Logo - Etc.

7. Pantallas
Detallar la/s pantalla/s más destacadas de la app.

Colocar el link al prototipo funcional, con cuidado que no sea dirigido a la edición del
prototipo sino a la página de prueba del prototipo, (siempre chequear el link desde una
ventana de incógnito).
Ejemplos de presentaciones:
[Link]

[Link]
[Link]
Coderhouse
Mockups
Los Mockups, son “fotomontajes” que permiten a los diseñadores gráficos o UI,
mostrar al cliente cómo quedarían sus diseños aplicados. Un mockup, hace que el
diseño “se vea real” y nos brinda una imagen profesional. Suelen estar diseñados en
Photoshop y es tan simple como incorporar una imagen de tu pantalla en el sector
correcto del mockup.

Es lo más próximo a visualizar cómo puede estar diseñado un producto digital en la

realidad.

Se suele utilizar para:

Packaging, Papelería, Diseño de indumentaria, Publicidad, y por supuesto Diseño UI:

webs, desktop, tablet, mobile, etc

Tipos de mockups en el diseño UI

Contexto de uso:
Este tipo de mockups sirve para que los usuarios entiendan cómo y dónde podrían
necesitar y usar tu producto digital.

Parecen fotos tomadas directamente de la realidad, tanto el dispositivo como el

ambiente deben parecer reales.
Persuasivos:
Este tipo de mockups tiene por objetivo llamar la atención.

Se suele usar perspectivas, el dispositivo parece real pero el ambiente puede parecer
de “fantasía”.

Informativos:
Este tipo de mockups tiene por objetivo desarrollar una información particular.

Suele mostrarse uno al lado del otro para mostrar un recorrido, o para desarrollar
distintas funcionalidades a la vez.
Identificatorios:
Este tipo de mockups tiene por objetivo mostrar el estilo visual general del proyecto.

Se enfoca en la estética y personalidad del proyecto o temática del mismo.

Portfolio
Tener un portfolio como diseñador UX/UI es imprescindible para cualquier profesional
de la industria. Es la mejor oportunidad de presentar tu trabajo de la mejor manera y
dar ejemplos de proyectos a detalle que expongan tu proceso creativo y reflejan quién
sos como diseñador.

Ya sea como diseñador independiente o de tiempo completo, los clientes o

empleadores potenciales casi siempre solicitarán tu portfolio para poder conocer tu
forma de trabajo.

Traducir tu flujo de trabajo completo y complejo a un formato visual es un desafío,

especialmente si querés enfocarte únicamente a UX. Sin embargo, hay muchas
formas de contar tu historia e incorporar recursos visuales.

Plataformas
Nuestro portfolio puede armarse en cientos de plataformas, cada una con sus ventajas
particulares. Pueden elegir la que más les convenga para armar su portfolio (incluso
crear su propio sitio web personalizado para presentarlo)

Recordar agregar a profesores y estudiantes a LinkedIn para mantenerse en contacto

para ver y compartir ofertas laborales.

Consejos para realizar tu portfolio

Que se comprenda claramente el área del Diseño UX/UI a la cual querés dedicarte, un
reporte puede ser extenso y abarcar todo el proceso completo, pero en el Portfolio es
conveniente intentar ir al grano y lucirte.

Lo más probable es que un reclutador te llame para desarrollar una tarea similar a la
que estás mostrando que sabes hacer.

Utiliza storytelling para describir todos los proyectos.

Una de las características principales de un UX Designer es contar historias a través

de sus productos, por lo que tu portafolio tiene que reflejar tus capacidades para
conseguirlo.
Es muy importante explicar el proceso que se ha seguido en los diseños, detallando
cómo y por qué tomaste esas decisiones en tu proyecto.

Links a portfolios:
Behance: [Link]

Dribble: [Link]

Web: [Link]

¿Cómo continuamos?
Para poder seguir avanzando en tu carrera, también hay otras acciones que puedes
hacer en el día a día para no dejar de aprender.

Como toda área relacionada a la tecnología, el ámbito de la experiencia de usuario es

una disciplina que avanza continuamente, por lo que mantenerse actualizado es casi
una obligación. Para ello lo recomendable es unirse a grupos de diseñadores UX/UI,
asistir a webinars o conferencias cada cierto tiempo, y realizar cursos de
especialización.

También es muy recomendable leer libros que traten temas técnicos u otros que te
puedan servir de inspiración.

Recomendaciones de libros relacionados al diseño UX/UI

Recomendaciones de libros relacionados al diseño UX/UI

Comunidades UX
Tarea para el proyecto final
Para finalizar con el proyecto final…

¡Te felicitamos por haber llegado a la última tarea del proyecto final!

Te recomendamos:

 Completar tu reporte (presentación de slides) para la Entrega Final en la clase

33.
 Crear tu portfolio, recorda que lo importante es lucirse y mostrar de forma clara
lo imprescindible de todo lo que hicimos durante el curso.
 Unirte a las redes sociales de Diseñadores UX/UI, y compartir tu portfolio.
 Actualizar tu LinkedIn, y generar tu red de contactos relacionada al diseño
UX/UI.
 No perder el contacto con tu docente y tus compañeros/as.
 Definir cuál de las áreas que comprende el diseño UX/UI te interesa más y
apuntar a conseguir trabajo específico de lo que más disfrutaste del curso.
 Continuar estudiando y actualizándote.