Introducción Al Diseño UX/UI - DCU

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 diseñador que interviene para hacer que dicho mensaje sea efectivo.
El receptor es el sujeto para quien está destinada la comunicación, un sector
de la sociedad o el público ideal.
EI significado es lo que se desea expresar, es el mensaje. ¿Qué se comunica?
El significante está siempre unido al significado pues la comunicació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.)
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?.)
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:
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.
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

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
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.
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
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.
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.)
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
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
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.
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
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.
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.
● Listas
● Desborde
● Buscar
● Cuadro de diálogo
● Notificaciones
● Introducción de datos
Material Design y Human Interface
https://material.io
https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/
Android - Google - Material Design
IOS - Apple - The Human Interface

Wireframe Digital
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.
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.)
Formas en que el usuario sujeta el teléfono y el modo que utilizan sus dedos condiciona la
posición de los elementos.
● Listas
● Desborde
● Buscar
● Cuadro de diálogo
● Notificaciones
● Introducción de datos
https://material.io

Wireframe Digital
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
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.
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 ejecutará 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
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
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.
● 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.
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̃o que
busca la calidad en la narrativa visual en los textos y se presenta en medios
tales como periódicos, revistas, folletos, etc.
Siempre se debe tener en cuenta que la lectura sea fluida. La jerarquia ́ es de lo más
importante, saber cómo guiar al lector dentro de la publicación hay que cuestionar
¿Qué quiero que lea primero?
"El diseño editorial es el marco a través del que una historia se lee e interpreta. Consiste
tanto en la arquitectura global de la publicación como en el tratamiento especí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
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.
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.
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: https://welcometoux.com/categoria/leyes-ux/
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:
https://www.nngroup.com/articles/113-design-guidelines-homepage-usability/
"Aprende las reglas como un profesional, para que puedas romperlas como un artista."
Pablo Picasso.
https://material.io

Proyecto Final
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) A.Colocació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
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.
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.
https://color.adobe.com/es/explore
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
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.
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
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.
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
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.
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:
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:
Se traduce al inglés como brand mark y representa la imagen simbólica de la marca como
podemos ver en la imagen, por ejemplo, la manzana de Apple, la sirena de Starbucks 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:
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:
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. Se puede encontrar en la imagen algunos ejemplos como:
Nikon, Ikea, Samsung y Amazon.
"Los logos más sólidos son los que cuentan historias sencillas".
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 logo en Ai con las herramientas:
Pluma y Buscatrazos
Proyecto Final
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?
¿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: https://material.io/design
(Utilizado en diseños de Google)
Sistema de diseño - Human Interface: https://developer.apple.com/design/human-interface-
guidelines/
(Utilizado en diseños de Apple)
Sistema de diseño - Andes UI: https://ui.andes.gob.ar/

(Utilizado en Mercado Libre/Pago)
Sistema de diseño - Freddicons: https://ux.mailchimp.com/patterns/color
(Utilizado en Mailchimp)
Sistema de diseño - Polaris: https://polaris.shopify.com/

(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

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.
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.

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: https://youtu.be/2b3xG_YjgvI
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
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” (https://material.io/design/motion/understanding-motion.html#principles).
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: https://www.figma.com/file/ZXQ1Re16lAZwqec3NIbNx7/Motion---
Codo-a-Codo?node-id=16%3A6
Veamos las interacciones en acción
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.
¿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.

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: https://research.despegar.com/ux-studies/primer-viaje-covid-19
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:
https://www.behance.net/gallery/124678011/APP-GOODOG-UXUI
https://www.behance.net/gallery/136021567/techunt-UXUI-Case-Study
https://www.behance.net/gallery/127480977/LAVANDAPP-Proyecto-curso-UXUI-en-
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: https://www.behance.net/meluita
Dribble: https://dribbble.com/vlockn
Web: https://www.sophiebritt.com/
¿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.

Introducción Al Diseño UX/UI - DCU

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Introducción Al Diseño UX/UI - DCU

Cargado por

Copyright:

Formatos disponibles

Introducción al Diseño UX/UI - DCU

Dibujo - Diseño - Arte - Ilustración

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

El receptor es el sujeto para quien está destinada la comunicación, un sector

de la sociedad o el público ideal.

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

El significante está siempre unido al significado pues la comunicación se produce en el

ambos. ¿Cómo se comunica?

Comunicación casual y comunicación intencional

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

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

El diseño como forma de comunicar

Reglas del diseñador profesional

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

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

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

Diseño gráfico - Diseño Ux

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

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

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

Diseño Centrado en el Usuario

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

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

Experiencia casual y experiencia diseñada

Genera confusión y malestar en el usuario.

Genera satisfacción en el usuario.

¿Por qué es importante?

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

En resumen: La primera impresión cuenta.

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

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

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

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

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

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

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

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

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

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

sintaxis (orden de esos elementos).

Dondis - La sintaxis de la imagen

Las leyes de la Gestalt

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,

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

Ley de la buena forma o pregnancia

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

Lo que vemos y Lo que percibimos:

En estos casos agrupamos según color:

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

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

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

Ley de figura - fondo

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

Las fotografías son Mapas de Bits

Gráfico vectorial o curvas:

Los “Logos” son Gráficos vectoriales

La resolución de 72 PPP se utiliza en web

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

Persona en Diseño UX/UI