Diseño Ux/Ui Clase 0: Presentación Del Curso

DISEÑO UX/UI
Clase 0
Presentación del curso
Les damos la bienvenida
Vamos a comenzar a grabar la clase
Clase Clase 01
00
Bienvenida Introducción al diseño
● ¿Qué es Codo a Codo? ● ¿Qué es el diseño?

● Carreras IT ● Retórica de la imágen
● Aula Virtual ● Diseño gráfico y Diseño UX
● Información del curso ● Diseño UI
● Usabilidad
● Metodología: Diseño
centrado en el usuario
● Metodología: Design
Thinking
Sobre Codo a Codo 4.0
Preparamos a los/as estudiantes para la demanda de las empresas más
innovadoras del área de IT.
Nuestros cursos están destinados a personas jóvenes y adultas, que

busquen desarrollarse profesional y personalmente, ampliando sus
oportunidades laborales de acuerdo a los desafíos que plantea el Siglo
XXI.
Objetivo
● Brindar herramientas que faciliten la inserción laboral en el sector

Informática (IT), y en particular, fomentar la participación de las
mujeres, con el fin de mejorar su empleabilidad.
● Para eso, desde la Agencia de Aprendizaje a lo largo de la vida
establecemos un cupo del 50% de vacantes destinadas a ellas, lo
que permite que todos los años se incremente el número de
inscriptas y egresadas en habilidades tecnológicas, para insertarse
y desarrollarse en el área de la programación.
Ofrecemos 7 opciones de aprendizaje
● Full Stack Python

● Full Stack Java
● Full Stack Node.js
● Full Stack PHP
● Diseño UX/UI
● Testing & QA
● Big Data/Ciencia de Datos
Los cursos son gratuitos y tienen una duración de 20 semanas.

Novedades
Programación Inicial:
● Codo a Codo Inicial
Cursos avanzados para egresados Full Stack:
● Spring
● Django
● React
● Unity
Animate a hacer carrera en Codo

Más información
● Sitio oficial: https://agenciadeaprendizaje.bue.edu.ar/codo-a-

codo/
● Preguntas frecuentes:
https://www.buenosaires.gob.ar/educacion/codoacodo/preguntas-frecuentes
Requisitos y Modalidad
Requisitos Modalidad Virtual
● Nivel inicial en programación Se dictarán 2 clases por semana con un/a

● Nivel básico de inglés docente en línea de una duración de 90
● Mayor de 18 años minutos cada una.
● Título secundario
Las ejercitaciones, actividades y/o
consultas se desarrollarán dentro de la
plataforma donde encontrarás todo lo
necesario para tu formación: foros,
material teórico y acompañamiento
docente y pedagógico.
Tu Docente
Natalia Miglino
● Mail de contacto: natalia.miglino@bue.edu.ar
● Perfil profesional: www.linkedin.com/in/nmiglino

Nuestro Compromiso
● Brindar una oferta académica amplia, actualizada y de calidad.
Más de 2.000 estudiantes de
Diseño UX/UI en Codo a Codo
en Agosto 2022.
Tu Compromiso
● Valorar la vacante
● Contenidos de calidad
● Gratuidad del curso: un curso equivalente de Diseño UX/UI está
costando actualmente entre $100.000 y $200.000 (valores a
febrero de 2022).
● Valoren el lugar que están ocupando. Hay mucha gente que
quiere participar y quedó fuera (más de 110 mil inscriptos en 2022).
Si no van a poder cursar avisen lo antes posible para darle
posibilidad a otros.
○ Si les surgen imponderables y se les complica cursar, también comuníquenlo
para ayudarlos a buscar una solución.
Cronograma:
Portfolio de Egresados
Los invitamos a conocer algunos de los
proyectos que han realizado nuestros/as
egresados/as poniendo en práctica lo
aprendido durante el curso.
Galería de proyectos de egresados/as

del Programa Codo a Codo:
https://agenciadeaprendizaje.bue.edu.ar/p
ortfolio-egresados-codo-a-codo
Diploma
Se otorga una constancia de participación en el programa.
Requisitos para obtener el diploma:
● Asistir al 75% de las clases en vivo (sincrónicas)

● Acceder semanalmente al Aula Virtual
● Realizar los ejercicios obligatorios semanales
● Aprobar el Proyecto Final Obligatorio
● Aprobar el EFI (Examen Final Integrador)
● Realizar el curso de Habilidades Blandas (Accenture)
Formulario de Presentismo
Link: https://forms.gle/F3op9xMXHsCBznQm8
● El link es el mismo para todas las clases.
La asistencia a las clases en vivo es obligatoria.
La asistencia deberá ser de un 75%.
● No deben olvidarse de dar el presente al finalizar todas clases, porque
la carga del presente se realiza de forma automática y no podremos
corregirlo.
Si tienen 6 inasistencias consecutivas, se les dará de baja del curso
automáticamente.
Motivos para Estudiar Diseño UX
● ¿Por qué este es un momento único para estudiar UX?

https://blog.educacionit.com/2021/02/07/por-que-este-es-un-
momento-unico-para-estudiar-ux/
● 6 motivos por los que estudiar UX:
https://medium.com/@ironhackmad/6-motivos-por-los-que-
estudiar-ux-b680b7a1440e
Empleo IT: las 10 carreras con salida laboral de 2021
● Data Science y Business Intelligence

● Especialista en Marketing Digital
● Diseñador Web y Mobile
● Diseñador UX/UI
● Desarrollador Full Stack
● Especialista en Redes
● Experto en Seguridad de la Información
● Responsable de Infraestructura
● Analista de Soporte
● Especialista en eCommerce
Roles
UX Researcher: Se centran en todo lo relacionado con la UX Designer: Se encarga del diseño de la
investigación. Realizan investigaciones con usuarios reales, experiencia del usuario. Considera cómo funciona
recopilando datos tanto cualitativos como cuantitativos el producto y cómo se siente el usuario para
sobre cómo piensan, sienten y se comportan las personas.
facilitar al máximo el uso del producto digital y
mejorar su experiencia.
UX Writer: Los escritores UX crean todo el texto
correspondiente, desde un mensaje de error que aparece
cuando se ingresa la contraseña incorrecta hasta el
UI Designer: Diseño de la interfaz de usuario. Se
mensaje de celebración que se recibe cuando alcanza un encarga tanto del diseño visual de los elementos,
hito en una aplicación de aprendizaje de idiomas o fitness. como de las interacciones de la interfaz del
producto digital. Se centran en la intuición y la
Information Architect: Consideran el recorrido del usuario estética.
por el sitio para determinar cómo organizar la información
en cada página y cómo se conectan las páginas UX/UI Designer: Suele utilizarse este nombre
individuales para crear una navegación lógica. para los profesionales que comprenden y pueden
trabajar en todas y cada una de las diversas áreas
UX/UI Strategist: Estos profesionales tienen como objetivo del diseño centrado en el usuario. Conocen todo
encontrar un punto óptimo entre las necesidades de los el proceso.
usuarios y los objetivos comerciales.
Empleo IT:
Opciones cortas de carreras con salida laboral
● “Las carreras cortas permiten una breve especialización en un campo

profesional que, aunque más reducido de lo que brindan las carreras
tradicionales, ofrece una rápida salida laboral dentro del área elegida.”
Estudiar carreras con salida laboral
● “Según datos de la Cámara de la Industria Argentina del Software (CESSI), todos

los años quedan cerca de 5.000 puestos de trabajo en tecnología sin ocupar en
el país por falta de perfiles calificados. Es necesario incrementar la cantidad de
alumnos en carreras con salida laboral de manera de contar con los talentos
necesarios para el futuro.”
Datos importantes
Nro. de comisión: 22639 Facilitadora: Paula Riscino
Días y horarios de la cursada on-line: Función de la facilitadora: cambios de
Lunes y Jueves de 1030 a 1200 hs comisión, pedidos de baja, problemas de la
plataforma, dudas y consultas.
Modalidad: Virtual
Canal de consultas: paula.riscino@bue.edu.ar
Docente: Natalia Miglino
(Si tienen inconvenientes para cursar en el
horario que les asignaron lo deberán
comunicar a su facilitadora a partir del 8 de
Coordinadora pedagógica del curso: agosto, ya que no es posible hacer el curso si
no pueden asistir a las clases virtuales, por
Irina Kerekes
medio del canal de consultas.)
Aula Virtual
Los estudiantes tendrán a su disposición el contenido teórico del curso en el aula. De presentar problemas,
deberán informar a la brevedad a fin de solucionar el inconveniente lo antes posible.
Su uso es obligatorio. Se les dará el alta dentro de la próxima semana.
● Enlace: https://aulasvirtuales.bue.edu.ar/
En ella podrán encontrar:
● Material teórico y Actividades prácticas

● Ejercicios obligatorios de autocorrección (con fecha de vencimiento cada 2 semanas)
Se accede con los siguientes datos:
● Usuario: DNI del alumno

● Contraseña: Prueba!123
Nota: la contraseña la deben cambiar al ingresar por primera vez y completar su foto de perfil.
Comunicación
Como se mencionó antes, el Aula Virtual es de uso obligatorio por lo que
será nuestro principal medio de contacto. La información importante
siempre irá por ahí, deberán revisar diariamente la Cartelera de
Novedades.
Para crear comunidad entre los estudiantes utilizarán también Discord:
Herramienta para intercambio de mensajes y materiales entre todos los
integrantes del curso.
Recibirán más adelante los datos para sumarse.
Se habilitará en las próximas semanas.
Clases en vivo
● Se realizarán dictados on-line en vivo 2 veces por semana.

● Las clases se realizarán por Google Meet.
● La asistencia a las clases en vivo es obligatoria.
Validación de tu vacante
Enviar al formulario de validación enviado por tu facilitador/a:
● Documento de identidad.
● Título secundario completo o superior.
○ Los estudiantes provenientes del extranjero no tienen que legalizar el título.
○ Si tienen materias previas, lamentablemente no podrán cursar.
● Deben ser mayores de 18 años.
● Plazo para validar la documentación: tienen 30 días para validar la
documentación desde el comienzo de la cursada, de lo contrario
se los dará de baja automáticamente.
Encuesta diagnóstica Estudiantes de Diseño UX/UI
Es obligatorio para los estudiantes de este curso realizar la siguiente

encuesta, Link: https://forms.gle/sokGiz8Uxdwhx1kJA
Ejercicio
Clase 0
¿Qué creen que es
Diseño UX/UI?
Nube de palabras.
Tema: Diseño
El diseño es el alma de todo lo creado por el hombre.
Autor/as/es: Steve Jobs

No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.
Todo en el Aula Virtual.

DISEÑO UX/UI
Clase 3
Gráfico Vectorial vs. Mapa de Bits
Clase 02 Clase 03 Clase 04
Imágenes en el diseño Gráfico vectorial vs. Research y Benchmarking

Mapa de bits
Detalle: Detalle: Detalle:
● ¿Qué significa iterar?

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

Píxeles Vectores
No son iguales.
Cuando ampliamos la imagen podemos notar la diferencia.

Mapa de bits vs. Gráfico vectorial
● Mapa de bits o Bitmap: es un grupo

de bits. Cada bit, la unidad mínima de
información, es cada píxel que
compone la imagen. Cada píxel es un
cuadro con información sobre su
color y la unión de muchos de estos
cuadros crea la imagen completa.
● No es escalable: alterar el tamaño de
un bitmap provoca que ésta se
“píxele”.
● Fotorrealista: pueden mostrar gran
cantidad de detalles y variaciones
sutiles en el color.
Las fotografías son Mapas de Bits
● Gráfico vectorial o curvas: está formada

por la unión o superposición de
unidades básicas de información pero
en lugar de píxeles, estas unidades
básicas son vectores matemáticos, las
formas definidas por los vectores se
basan en las curvas Bézier.
● Es escalable: se puede escalar
libremente sin sacrificar la calidad.
(permanecen nítidas)
● Totalmente editables: Los objetos de
una imagen vectorial pueden constar de
líneas, curvas y formas con atributos Los “Logos” son Gráficos vectoriales
editables como color, relleno y contorno.
Resumen:
La mayoría de las imágenes digitales se pueden clasificar en: vectoriales y mapa de bits.
Las imágenes vectoriales tienen muchas ventajas como: que son escalables, es decir que
podemos aumentar o reducir su tamaño sin perder calidad/nitidez y que los archivos son
mucho más pequeños ya que requieren bastante menos información para definir la
imagen.
Las vectoriales se originan en un software. No puede escanear una imagen y guardarla
como un archivo vectorial sin utilizar un software de conversión especial.
No son adecuadas para producir imágenes fotorrealistas. Generalmente consisten en
áreas sólidas de color (o degradados), pero no pueden representar los tonos sutiles
continuos de una fotografía. Para este fin utilizaremos los mapas de bits con cuidado de
que cuenten con la resolución correcta para el uso que queremos darle.
Resolución:
PPP (DPI): La resolución de una imagen es el
número de píxeles por pulgada que contiene
(1 pulgada = 2,54 centímetros).
La resolución se expresa en PPP (puntos por
pulgada en español) o DPI (dots per inch en
inglés).
Cuantos más píxeles haya por pulgada mejor
será la calidad de la imagen.
Una resolución de 300 dpi significa que la imagen
contiene 300 píxeles de ancho y 300 píxeles de
alto, por tanto, se compone de 90.000 píxeles
(300x300 ppp).
Por lo general, se considera que una resolución de La resolución de 72 PPP se utiliza en web
300ppp para una imagen es más que suficiente
antes de la impresión.
¿Qué es Photoshop?
Adobe Photoshop es el software líder en edición de imágenes de mapa
de bits, desarrollado por Adobe Systems Incorporated.
Usado principalmente para el retoque de fotografías, su nombre en
español significa "taller de fotos". Es conocido mundialmente.
Nos referiremos a este software como: Photoshop o Ps.
Photoshop:
Ps es una más que conocida herramienta de edición de imágenes y

fotografía, un programa que se utiliza en PC para retocar fotos y hacer
montajes de carácter profesional, aunque también accesible para
usuarios que llevan poco tiempo experimentando en ese terreno.
Ps al ser un programa de edición fotográfica, trabaja con mapas de bits

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

de la imagen que queremos editar.
2. Crop. Con esta herramienta vamos a poder recortar la imagen al
tamaño que deseemos.
3. Retoque. Con estas herramientas podemos corregir defectos,
borrar elementos no deseados o suavizar la apariencia de la
imagen, etc.
Utilizaremos:
Panel Capa
El software funciona por medio de capas que se superponen unas

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

que casi no presenta pérdidas. La principal característica de este formato es que
.PNG permite el uso de transparencias (canal alpha o alfa) con bastante
profundidad, ya sea completa o en ciertos píxeles utilizando diferentes canales.
No son óptimas para diseño de impresión de alto nivel. Se utilizan para diseño
web, o en condiciones no profesionales, debido a su peso moderado y buena
administración del color.
JPEG PNG
Formatos
PSD - Es el formato por defecto del editor de imágenes Adobe Photoshop y por tanto es un formato adecuado para editar
imágenes con este programa y otros compatibles.
GIF - El famoso .GIF (Graphics Interchange Format), si bien es de baja calidad y ofrece una escasa profundidad de colores,
permite unir varios cuadros para formar una animación. Pesa poco porque sacrifica la calidad de imagen.
SVG - Un formato menos conocido es .SVG (Scalable Vector Graphics), un formato estándar en el diseño web, que trabaja en XML
describiendo imágenes tanto estáticas como animadas. 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 cómo y

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

Tema: Imágenes
Si quieres vivir una vida creativa y artística, no debes mirar

demasiado hacia atrás. Debes estar dispuesto a arrojar a la
basura cualquier cosa que hiciste.
Autor/as/es: Steve Jobs

Ejercicio
Clase 3
Práctica en Ps:
Editar una imagen, quitarle el
fondo, cambiar sus colores,
cambiar ajustes, cortarla, etc.
Recordá:

Muchas gracias por tu atención.
Nos vemos pronto
DISEÑO UX/UI
Clase 4
Research y Benchmarking
Gráfico vectorial vs. Research y Benchmarking Arquetipos de Persona

Mapa de bits
Detalle: Detalle:
Detalle:
● ¿Qué significa iterar? ● ¿Qué es una Persona?
● Diferenciación ● UX Research ● Proto Persona
● Resoluciones ● Insights ● Mapa de empatía
● Adobe Photoshop ● Benchmarking ● Tarea para el Proyecto Final
● Formatos de imágenes ● Tarea para el Proyecto Final
● Ejercicio de práctica
Repaso - Diseño Centrado en el Usuario:
El DCU comprende una serie de métodos y técnicas para analizar, diseñar y
evaluar hardware y software (interface)
Tiene un enfoque de diseño cuyo proceso está orientado por la
información acerca de quienes van a hacer uso del producto (usuarios)
Tener en cuenta: ¿Quién usará el sistema? y ¿qué tareas llevará a cabo con
el mismo?
Un proceso iterativo (cíclico) en el cual diseño y evaluación se incorporan
desde la fase inicial del proyecto y en todas las fases que veremos a
continuación:
Iterar
El desarrollo ágil propone un abordaje iterativo en sus 3 instancias:
● Análisis
● Diseño
● Validación
¿Qué significa iterar?
Iteraciones en el contexto de un proyecto se refieren a la técnica de
desarrollar y entregar componentes incrementales de funcionalidades
de un negocio.
Está comúnmente asociado al desarrollo ágil de software, pero podría
referirse a cualquier material.
Múltiples iteraciones contribuyen a crear un producto completamente
integrado.
Iterar es un proceso de mejora continua.
¿Qué es UX research?
La investigación de usuarios se enfoca en comprender los
comportamientos, necesidades y motivaciones de los usuarios a
través de técnicas de observación, análisis de tareas y otras
metodologías de retroalimentación.
Es el puente entre el Usuario y los Diseñadores.

UX research
● Observar:
○ Captar las necesidades de los usuarios, hablar con ellos, saber escuchar.
○ Identificar el público objetivo.
● Definir el problema, antes de ofrecer una solución debemos comprender el
problema.
● Respetar el objetivo del negocio, es tan importante como el diseño de la
interfaz.
● Diseñamos para el usuario, basados en su experiencia, no en la nuestra,
debemos ser empáticos, es decir, poder ver desde su perspectiva, (no alcanza
ponerse en el lugar de otra persona, necesitamos saber que vive esa persona en
esa situación en particular.)
Investigación de Usuarios:
Se trata de responder una pregunta o hipótesis que usted o su equipo de diseño tengan.
No existe un enfoque único para construir una práctica de investigación porque cada
organización tiene sus propios objetivos. Aprender qué tipo de investigación hacer, por qué y
cómo debe hacerlo son pasos importantes para establecer una práctica de investigación.
Algunos datos siempre son mejores que ninguno, pero saber cuándo recopilarlos y qué tipo de
datos necesita comienza por comprender el objetivo.
Behzod Sirjani, fundador de Yet Another Studio y exjefe de operaciones de investigación y

análisis de Slack, dice que debe intentar investigar cada vez que desee aumentar su
confianza en una decisión:
La investigación siempre debe orientarse en torno a una decisión porque saber lo que está
tratando de decidir lo ayudará a comprender lo que está tratando de ver y cómo realmente va a
hacer esa investigación.
Tema: UX research
Con las grandes decisiones, querés tener más confianza en

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

¿Qué es un insight?
Es un término utilizado en psicología proveniente del inglés que se
puede traducir al español como "visión interna" o más genéricamente
"percepción" o "entendimiento".
Mediante un insight el sujeto "capta", "internaliza" o comprende, una
"verdad" revelada.
Insight - visión interna o verdad revelada:
A veces podemos confundir los datos o el
feedback que recibimos de nuestros
No es un entendimiento común, sino un consumidores como insights, pero lo cierto
descubrimiento de una verdad profunda es que debes ir más allá, pues la clave
y muchas veces oculta, que solo para tener insights está en el análisis y la
encontraremos charlando con los usuarios interpretación que hagas.
e indagando sobre sus pensamientos más Los datos hacen parte del proceso para
internos. obtener insights pero se convierten en
conocimientos o verdades claves cuando
¿Por qué hizo eso? ¿Qué pensó en ese
les añades interpretación. Datos sin
momento? ¿Qué motivó su decisión?. interpretación no son insights.
Entender el por qué de lo que hacen o la
motivación detrás de tus consumidores
hará que sean verdaderos insights.
Insight
En el ejemplo la marca Falabella quiso que su público de mujeres jóvenes-adultas se sintieran
identificadas con sus ideales apelando a los sentimientos en este comercial, utilizando el insight que
se basa en la “inseguridad”.
La marca descubre y analiza que para la mayoría de las mujeres, el miedo propio a enfrentar los
retos en sus carreras es su mayor enemigo, ellas mismas son su peor enemigo, ese miedo las obliga
a retroceder o abandonar antes de siquiera haberlo intentado, al igual que cuando de pequeños
una ola nos intimida y nos hace retroceder, estas mujeres están a punto de retroceder y ceder ante el
miedo y no enfrentar las situaciones más desafiantes de sus vidas.
Enviando un mensaje positivo, de empoderamiento femenino y coraje, nos muestra las imágenes
de estas mujeres enfrentando cada una de sus situaciones clave y sobretodo en la última una mujer
que enfrenta al miedo mismo, representado como un lobo, que se esfuma en cuanto lo enfrenta.
Todas terminan teniendo éxito, era cuestión de atreverse.
Finaliza con el lema de Atrévete. Cambia. Que las invita a desarrollarse plenamente.
Insight
Cuando encontramos un insight y lo utilizamos Por ejemplo:

a nuestro favor vamos a conseguir que el
usuario piense: “tal cual”, “a mi me pasa lo
mismo”, “me siento identificado”, “yo se
como se siente”, “me causa gracia o tristeza
porque me pasó”, “cómo lo supieron?”, etc.
Y cuando el usuario piensa de esta manera y se

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

emociones; ser parte de sus historias
Autor/as/es: Andy Stalman

Ejercicio
Clase 4
Pensar sobre las necesidades de
las personas a nuestro alrededor.
Determinar un problema que
tengan y su posible solución.
¿Qué es benchmarking?
El benchmarking competitivo consiste en identificar información específica acerca
de sus competidores directos, y compararlos.
Consiste en tomar "comparadores" o benchmarks, que podría traducirse como

medida de calidad.
Es un proceso de investigación que proporciona información valiosa para la toma

de decisiones.
Es una actividad continua porque el mercado está constantemente cambiando. Al

realizarlo nos da una “foto” del momento que estamos analizando.
No es un proceso para copiar o imitar a la competencia.

Benchmarking competitivo
“La toma de referencia de los mejores y lograr adoptar sus métodos y estrategias, dentro
de la legalidad establecida.” David Kearns
Hay tres tipos de Benchmarking:
● Funcional: ayuda a identificar las mejores prácticas en procesos, funciones,

operaciones o servicios de una empresa excelente en el área que se pretende mejorar.
● Interno: realizado en las empresas grandes con el fin de identificar buenas prácticas
relevantes en un área para replicarlas en diferentes países o unidades de negocio.
● Competitivo: pretende identificar las mejores prácticas con respecto a los líderes
del sector.
○ Según Boxwel: significa mediar sus funciones, procesos, actividades, productos y
servicios en comparación con los de sus competidores y mejorar los propios de
forma que sean, en el caso superar los mejores en su clase, pero, por lo
menos, iguales a los que de sus competidores.
Benchmarking competitivo
El Benchmarking no es un proceso de copia, consiste en sacar lo mejor de esa empresa modelo,
y adaptar las características que pensamos que son interesantes.
Coca Cola siempre ha sabido venderse bien, pero Pepsi oferta más productos a precios más
económicos. Los intentos de copia de los anuncios de Pepsi hacia Coca Cola no han terminado
saliendo bien.
Pero no hay que tomar al benchmarking como algo negativo, recordemos que es una estrategia
beneficiosa, que no es más que una forma de crecer, de ser más eficaz y productivo.
Hemos visto el ejemplo de empresas que utilizan benchmarking y cómo les sirve para mantener
una mejora constante. Como hemos comentado aquí, el Benchmarking es una estrategia a
largo plazo de mejora constante observando alrededor tuyo.
El benchmarking puede hacernos dar el salto y aportar un punto de vista diferente, partiendo de
la observación y el análisis.
Estudio de caso: Desafío Pepsi
En octubre de 1993 Pepsi Cola lanzó una
campaña publicitaria, denominada "Desafío
Pepsi", consistente en invitar al público a
realizar una prueba de sabor a ciegas.
Grupos de promotores ubicados en distintos

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

necesidades y motivaciones, realizando preguntas que nos permitan descubrir: ¿qué
hace?, ¿qué piensa?, ¿qué dice?, ¿en qué cree?, ¿que lo frustra?, ¿qué lo motiva?, ¿qué le
preocupa?...
y tenemos que determinar en primera instancia:
● ¿Quién es nuestro usuario? (en quién basamos nuestra investigación)

● ¿Cuál es el problema? (necesidad detectada)
● ¿Cuál es la solución que vamos a ofrecer? (En forma de una App).
Informe: Nota periodística que valide la problemática, captura de redes sociales donde los
usuarios exponen que esa situación es un problema para ellos, etc.
Siguiendo con el Proyecto Final que vamos a desarrollar durante todo este curso:
Vamos a realizar un Benchmarking, comparando 3 competidores directos de nuestra
App y tenemos que realizar un cuadro comparativo:
● Nombre y “logo” de las 3 App (Para poder ver el diseño de mi competencia)
● Reseña de las 3 App (Para poder ver el enfoque de mi competencia)
● Captura de las 3 App (Para poder ver el diseño de mi competencia)
● Cantidad de Pasos por Acción (De 3 acciones por cada una de las 3 App)
● Vocabulario o Errores (Óptimo, Error menor, Error mayor - que no me permite
operar)
● Diseño (Óptimo, Básico, Malo)
● Fortalezas y Debilidades (De cada una de las 3 App)
Finalmente realizar un breve informe con las conclusiones que obtenemos del cuadro.
(¿Quién es mi competencia?, ¿quiénes son sus usuarios?, ¿Cómo les hablan?, ¿En qué se
diferencian?, ¿Qué puedo ofrecer en mi App que ellos no tengan?, ¿Cómo puedo superar su
propuesta?).
Recordá:

Nos vemos pronto
DISEÑO UX/UI
Clase 5
User Persona
Research y Benchmarking Arquetipos de Persona Entrevistas Cualitativas
● ¿Qué significa iterar? ● ¿Qué es una Persona? ● ¿Qué es una entrevista?

● UX Research ● Proto Persona y User ● Tipos de entrevista
● Insights Persona ● Etapas de una entrevista
● Benchmarking ● Mapa de empatía ● Tarea para el Proyecto Final
● Tarea para el Proyecto Final ● Tarea para el Proyecto Final
Diseño Centrado en el Usuario (DCU)
Analizar Diseñar Validar
Design Thinking
Empatizar Definir Idear Prototipar Evaluar
Proto Personas Entrevistas Cualitativas
Mapa de empatía
¿Qué es una persona?
Según la Real Academia Española los dos primeros resultados que
aparecen son:
1. f. Individuo de la especie humana.
2. f. Hombre o mujer cuyo nombre se ignora o se omite.
Persona
Según la Sociología: puede definirse persona como un ser sociable que vive y se
desarrolla en sociedad, pero al mismo tiempo nunca deja de actuar con un carácter
individual. Es decir somos “yo” y “nosotros” al mismo tiempo.
Según la Psicología: persona designa a un ser concreto, abarcando tanto sus

aspectos físicos como psíquicos para definir su carácter singular y único. Percibe e
interpreta el estado de ánimo, el carácter y la forma de actuar de las personas,
además estudia las cualidades y facultades que tiene la persona, como la razón, los
sentimientos y los valores que lo distingue de los demás seres
Persona en el diseño UX/UI
● Es un individuo ficticio que se crea para identificar un público específico.
● Son modelos de personas que representan a los usuarios durante el

proceso de diseño.
● Son imaginarios pero están creados con mucho detallismo y precisión.
● No están diseñadas únicamente según su información demográfica.

Tema: Personas en Diseño UX/UI
Las personas son arquetipos basados en patrones de

comportamiento revelados durante el proceso de investigación
de usuarios.
Autor/as/es: Alan Cooper

¿Por qué necesitamos crear personas?
● Comprender lo que quieren los usuarios no es suficiente. Tienes que

entender el contexto.
● Para diseñar una experiencia que deleite a los usuarios, debemos

documentar sus pensamientos, sentimientos, expectativas y motivaciones.
● Las personas combinan estos conocimientos en una narrativa que ayuda

a tomar mejores decisiones y diseñar mejores productos.
Proto persona
● Utilizaremos los datos recolectados de la investigación de usuarios,

nuestras observaciones y suposiciones para crear una hipótesis.
● La Proto persona es una primera versión (sin validar) de lo que

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

puede ser fácil olvidar que al final hay un ser humano. Las personas son más
que estadísticas. Son narrativas que van a inspirar y respaldar las decisiones que
tomemos.
● Siempre que la comprensión de todos los que formen parte del proceso de
diseño sea clara, algo tan simple como el nombre de la persona disparará una
amplia gama de datos: datos demográficos, atributos, deseos,
comportamientos, preocupaciones, miedos y citas.
La proto persona debe tener
1. Datos: nombre y apellido, profesión.
2. Datos demográficos: lugar de residencia, edad, sexo, nivel de educación, estado civil, ingresos
3. Biografía: breve reseña de cómo es, cómo vive, qué la define
4. Intereses: hobbies, modo de vida
5. Hábitos de consumo: ¿Qué consume?, cómo lo hace?, ¿por qué lo hace?
6. Objetivos, sueños, metas: ¿Qué quieren hacer y por qué?
7. Su relación con la tecnología: ¿Qué usa?, ¿con qué frecuencia?, para qué?
8. Frustraciones y motivaciones: ¿Qué se interpone en su camino? ¿Qué los hace avanzar?
9. Una frase que identifique lo mejor posible cómo piensa: Se expresa entre comillas “quote”
Una imagen que nos de conexión emocional
Es muy importante
darle una cara a la
proto persona que
estamos creando, no
olvidemos que
representan a personas
reales.
Utilicen todo lo aprendido en las clases anteriores sobre imagen al momento de

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

blanca) o subexpuesta (demasiado
oscura).
Que esté centrada en el punto de interés.
Que no tenga manchas, reflejos o marcas

de agua.
Que el tratamiento del color sea el

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

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

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

¿Qué dice y qué hace?
¿Qué le hemos oído decir?
¿Qué podemos imaginarle diciendo?
¿Cómo es su rutina?
¿Qué comportamiento hemos observado?
¿Qué podemos imaginarle haciendo?
¿Qué necesita hacer de manera diferente?
¿Qué trabajo(s) quiere o necesita conseguir?
¿Qué decisiones debe tomar?
¿Cómo sabremos que tuvo éxito?
¿Qué 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?
Para continuar con el Proyecto Final que vamos a desarrollar durante todo este curso:
Vamos a realizar un Mapa de Empatía, que nos ayudará a responder preguntas específicas
sobre nuestros usuarios siempre teniendo en mente nuestra idea de App.
Tenemos que determinar en primera instancia:
● ¿Quién es la persona que estamos intentando comprender? (proto persona)

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

En la nota se menciona cuál es el modelo de monetización de la app. Se basa en comisiones. “Somos un
marketplace y cobramos una comisión por sesión de aproximadamente el 20%. La otra parte se la queda el
psicólogo por lo que trabaja”, explica. El año pasado, la facturación de TuTerapia fue de 60 mil dólares.
También tienen un plan para empresas que se llama: TuTerapia Business. Fuente:
https://www.iproup.com/leaders/22546-tinder-psicologia-como-es-la-app-para-buscar-terapeuta
(02/05/2021)
Cómo buscar un psicólogo - Nota periodística:

En la nota se mencionan las pautas necesarias para encontrar y elegir a los profesionales de la salud mental
que mejor se adapten al paciente. Cómo buscar un psicólogo en 8 pasos.
https://psicologiaymente.com/clinica/como-buscar-un-psicologo
BENCHMARKING
Conozcamos a nuestra competencia.
psiconnection.com.ar Psicoterapia Online TuTerapia.com.ar

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

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

amigable, eficaz, eficiente y con buen diseño
aplicado.
DEBILIDADES: Cometió un error en el resultado,
recomendó mujeres cuando se había
seleccionado la opción de terapeuta hombre.
Conclusiones
Tu Terapia
#1 Clara, muy intuitiva, rápido de completar y avanzar.
Los resultados de la búsqueda deberían coincidir con lo seleccionado de las
opciones dadas.
Psicoterapia Online
#2 Claro, conciso, y explicativa. Intuitiva, didáctica, con categorías bien diferenciadas.
Formulario de registración debería ser más breve.
Psiconnection
#3 Claro, conciso, y explicativa. Intuitiva, didáctica, con categorías bien
diferenciadas.
Sobre Marta
Marta Bio: María Marta nunca hizo terapia. Tiene tres hijos adultos independizados. El
menor se fue a vivir sólo recientemente, el mayor vive en Europa y el otro vive
Ama de casa con sus hijos y su esposa en Tigre. El marido aún trabaja por lo que ella pasa
mucho tiempo sola. Los fines de semana la visitan los nietos y pasan el día en la
Tipo de Usuario:
pileta. El domingo a la noche siente un bajón sabiendo que se viene una
Quiere ir a terapia
semana sola. Su hobbie es mirar Netflix y fotos de su familia en Facebook,
presencial.
ambas aplicaciones descargadas por su hijo cuando la visitó por última vez.
“Al final… lo primero es la familia.” Objetivos y Metas

Los Benvenuto ● Conectarse con sus nietos.
● Encontrar una actividad que la satisfaga.
● Generar recuerdos lindos para su familia.
Género: Estado Civil:

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

un terapeuta no se centre en mala
acorde a sus los conflictos experiencia al
posibilidades que le parecen contratar un
económicas más importantes servicio
Utiliza con
frecuencia
Sentirse
Apps para
escuchado
contratar
servicios
Tener un Procesar
Consulta
Le importa su Ya tiene terapeuta que mejor sus
terapeutas de la Resolver sus
bienestar experiencia le haga una emociones
obra social porque problemas
personal en terapia buena para sentirse
no conoce otros
devolución mejor
Proyecto Final
Fecha de la 1ra Pre entrega:

Clase 11
Semana del 12 de Septiembre
Recordá:

Nos vemos pronto
DISEÑO UX/UI
Clase 6
Entrevistas Cualitativas
Arquetipos de Persona Entrevistas Cualitativas POV y MVP
● ¿Qué es una Persona? ● ¿Qué es una entrevista? ● ¿Qué es un POV?

● Proto Persona ● Tipos de entrevista ● Recursos: storytelling y
● Mapa de empatía ● Etapas de una entrevista storyboard
● Tarea para el Proyecto Final ● Tarea para el Proyecto Final ● ¿Qué es un MVP?
● Listado de funcionalidades
● Tarea para el Proyecto Final
¿Qué es una entrevista?
Es una técnica de gran utilidad en la investigación cualitativa para
recabar datos; se define como una conversación que se propone un fin
determinado distinto al simple hecho de conversar. Es un instrumento
técnico que adopta la forma de un diálogo coloquial.
Una persona pregunta y la otra responde, no hay ida y vuelta.

Entrevista:
Tiene como propósito obtener información en relación con un tema
determinado.
Se busca que la información recabada sea lo más precisa posible.
Se pretende conseguir los significados que los informantes atribuyen a los
temas en cuestión.
El entrevistador debe mantener una actitud activa durante el desarrollo de
la entrevista, en la que la interpretación sea continua con la finalidad de
obtener una comprensión profunda del discurso del entrevistado.
Tipos de entrevistas:
Estructuradas - Semiestructuradas - Flexibles
Se considera que las entrevistas semiestructuradas son las que

ofrecen un grado de flexibilidad aceptable, a la vez que mantienen la
suficiente uniformidad para alcanzar interpretaciones acordes con los
propósitos del estudio.
Se asocia con la expectativa de que es más probable que los sujetos

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

Conocer los gustos y costumbres de mis usuarios. Entender sus motivaciones y
frustraciones al momento de contratar servicios (relacionado a mi proyecto).
Entrevista semiestructurada:
Otra manera de denominar a la entrevista semiestructurada es:

entrevista etnográfica (identidad, cultura y estilos de vida de grupos
de personas).
Se puede definir como una “conversación amistosa” entre informante
y entrevistador, convirtiéndose este último en un oidor, alguien que
escucha con atención, no impone ni interpretaciones ni respuestas,
guiando el curso de la entrevista hacia los temas que a él le
interesan.
Su propósito es realizar un trabajo de campo para comprender la vida
social y cultural de diversos grupos, y así lograr explicar sus conductas.
Fases de la entrevista
1. Preparación. Es el momento previo a la entrevista, en el cual se planifican los aspectos
organizativos de la misma como son los objetivos, redacción de preguntas guía y
convocatoria.
2. Apertura. Es la fase cuando se está con el entrevistado en el lugar de la cita, en el que
se plantean los objetivos que se pretenden con la entrevista, el tiempo de duración.
También, es el momento oportuno para solicitar el consentimiento de grabar o
filmar la conversación.
3. Desarrollo. Constituye el núcleo de la entrevista, en el que se realiza el intercambio de
información siguiendo la guía de preguntas con flexibilidad. Es cuando el
entrevistador hace uso de sus recursos para obtener la información que se requiere.
4. Cierre. Es el momento en el que conviene anticipar el final de la entrevista para que el
entrevistado recapitule mentalmente lo que ha dicho y provocar en él la oportunidad
de que profundice o exprese ideas que no ha mencionado. Se hace una síntesis de
la conversación para puntualizar la información obtenida y finalmente se agradece al
entrevistado su participación en el estudio.
Preguntas Abiertas: Preguntas Cerradas:
La respuesta es libre La respuesta es

específica
¿Por qué te gusta el Preguntas de Clarificación:
teatro? ¿En qué sentido?
¿Qué te motiva a viajar? ¿Escuchas la radio? ¿Qué quiere decir con eso?
¿Podrías contarnos una Sí - No Preguntas de Profundización:

experiencia real que hayas
¿Qué más?
tenido?
¿Ves televisión? ¿POR QUÉ?
Preguntar sobre
experiencias reales es muy Sí - No Esta pregunta hace que el entrevistado
importante porque la analice su propia respuesta y explique qué
persona sale de solo dar su lo llevó a dar esa respuesta, sus
opinión (pensamientos) motivaciones, tal vez descubramos un
sino a hablar desde una insight.
realidad (acciones).
Que NO hacer cuando realizamos la entrevista
1. No debemos preguntar presuponiendo la respuesta.
2. No debemos guiar una respuesta determinada.
3. No debemos interrumpir o apresurar al entrevistado.
4. No debemos hacer preguntas confusas o que puedan interpretarse de
otra forma.
5. No debemos hacer preguntas largas o varias preguntas dentro de
una misma.
6. No debemos pedir directamente que confirmen nuestra hipótesis,
problemática o solución.
7. No debemos olvidar realizar preguntas para validar la proto persona.
Son para saber si esa persona es un posible usuario, si su perfil está
representado en la proto persona que creamos, para saber si su
entrevista nos sirve realmente.
Ejercicio
Clase 6
Vamos a practicar en clase
algunas preguntas de
validación de nuestras proto
personas.
Entrevista
Este es un ejemplo de cómo puedes preparar un script para una entrevista. Lo más importante es
que generes empatía con el usuario, que no lo interrumpas y que grabes todo. Si un usuario te da
una respuesta muy corta o cerrada, siempre es bueno preguntar ¿por qué?
1. ¿Cuál es tu nombre?
2. ¿Qué edad tienes?
3. ¿A qué te dedicas?
4. ¿Con quién vives?
5. ¿Es la primera vez que buscas departamento? ¿Por qué lo buscas?
6. ¿Cómo han sido tus experiencias anteriores a la hora de buscar un departamento? ¿Por qué?
7. Cuéntame cual es tu proceso para buscar un departamento…
8. ¿Qué es lo más importante para ti a la hora de buscar un departamento?
9. ¿Has usado sitios para encontrar departamento? ¿Cuáles? ¿Cuál es tu favorito?
10. ¿Qué es lo que más te preocupa al buscar un departamento en internet?
Interpretación:
Una vez que las entrevistas han sido efectuadas y grabadas, se

transcriben para realizar su correspondiente análisis e interpretación;
por último, se redacta el informe de investigación.
Lo importante de realizar un análisis de los datos obtenidos es generar

una comprensión que emerge de las preguntas y los testimonios de
la investigación.
Luego de realizar las entrevistas podremos validar la proto persona

que será a partir de ese momento una User persona.
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.
Recordá:

Nos vemos pronto
DISEÑO UX/UI
Clase 7
POV y MVP
Entrevistas Cualitativas POV y MVP Arquitectura de la Información
● ¿Qué es una entrevista? ● ¿Qué es un POV? ● ¿Qué es la Arquitectura de

● Tipos de entrevista ● Recursos: la Información?
● Etapas de una entrevista Storytelling y Storyboard ● Card Sorting en Optimal
● Tarea para el Proyecto Final ● ¿Qué es un MVP? Workshop
● Listado de funcionalidades ● Matriz de Similitud y
● Tarea para el Proyecto Final Dendrograma
● Mapa del sitio en
Whimsical
Design Thinking
POV
MVP
¿Qué es POV?
POV o Point of view, en español significa Punto de vista.
En UX sirve para obtener de forma concisa el qué, para quién y por qué
estamos creando nuestro producto o servicio.
Si podemos entender realmente la problemática de nuestros usuarios

podremos generar una solución adecuada, focalizada y con valor
agregado.
Punto de vista
Para elaborar un “Punto de Vista” tenemos que pensar en una historia

(breve y significativa) sobre el problema que vamos a abordar y cómo
vamos a usar esa visión única que nos da el diseño para elaborar una
solución para ese usuario.
● Usuario (descripción del usuario, por qué es nuestro usuario y no otro)

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

una atmósfera que envuelva y cautive.
Se trata de una manera de contar un mensaje para transmitir cosas e

intentar influir en nuestro comportamiento.
Estructura y requisitos
User persona - Necesita (relacionado a nuestra app) - Porque: insight
Arco argumental + Emoción
Introducción - Nudo - Desenlace

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

nunca olvidarán lo que les hiciste sentir".
Autor/as/es: Maya Angelou.

Consejos para contar una buena historia
No se trata simplemente de tener una historia y contarla. La magia está en el
arte de contarla, quiénes y cómo lo hagan. Solo así se conseguirá atraer a la
audiencia, conectar con ella y diferenciarnos del conjunto.
Para que la historia pase al siguiente nivel, es importante que gire en torno a
personas reales antes que «usuarios sin nombre». Cuando se da un poco de
información acerca del trasfondo de la historia y el usuario, ayuda a vincular la
historia con las necesidades de los usuarios.
Contar historias que les resulte familiar a los receptores ayuda a crear una buena
conexión entre dicho receptor y la propia historia.
En relación a la trama, se describe cómo y porqué un usuario podría interactuar
con un producto. Esto puede basarse de nuevo en una interacción real que se
haya observado o puede ser un ejemplo hipotético pero realista.
Compartir datos del usuario es efectivo, pero hacerlo describiendo
esos datos a través de una historia rápida es incluso mucho más
persuasivo.
Datos: Durante el testeo, el 64% de los usuarios abandonaron la web

tras haber realizado una búsqueda sin obtener resultados.
Efectivo: Julia estaba tan frustrada mientras intentaba buscar un

producto en la web de diferentes formas sin obtener resultados, que
finalmente se sintió tonta por no saber hacerlo y salió de la web
resoplando. 64% de los usuarios, durante el test, se sintieron de
forma similar y abandonaron la web tras una búsqueda sin
resultados.
Súper efectivo: Julia, mamá de tres, cuando terminó las tareas del
hogar, fue a su pc a intentar realizar una búsqueda.. Se frustró
mucho luego de buscar de mil formas en la web y no obtener
resultados. Aquella situación hizo que se sintiera tonta por no
considerarse buena con la pc, así que se rindió y salió de la web
angustiada. Realizamos un test y sus resultados indican que 6 de
cada 10 usuarios se sintieron igual que Julia y abandonaron la web
tras una búsqueda sin resultados.
¿Qué es un Storyboard?
Es el guión gráfico. Es un conjunto de ilustraciones que aparecen en
secuencia y que se utilizan como guía para entender una historia.
La característica principal del storyboard es su representatividad: es

visual, la historia aparece frente a nuestros ojos como algo menos
abstracto que en el guión.
Un storyboard se parece mucho a una historieta de la narración.

¿Cómo crear un storyboard?
1. Elabora una línea temporal. Piensa cuál va a ser el inicio de tu spot, el
desarrollo y el desenlace. Te ayudará comenzar creando un listado de todo lo
que va a pasar, para después ordenarlo.
2. Identifica cuáles son los momentos clave de tu historia. Aquellos en los que se
representa el mensaje que quieres transmitir o los que destaquen las
cualidades de tu producto.
3. Ten en cuenta que el storyboard sirve para mostrar visualmente una idea. No
es el anuncio ni el vídeo final, debe dibujarse rápidamente sin mucho
detalle, bastan unos bocetos para plasmar las ideas.
¿Cómo crear un storyboard?
4. Elabora los bocetos y los complementas con información. Utilizar
globos de diálogo, una descripción aclaratoria debajo del cuadro,
etc.
5. Si no se te ocurre qué representar en cada viñeta, piensa en dónde

puedes "cortar" la historia. Un ejemplo sencillo: En la primera
viñeta podría aparecer un personaje triste porque tiene una
necesidad que no logra cubrir. En la siguiente, el anuncio de
nuestro producto. Y, en la última, el mismo personaje feliz, sin el
problema que le atormentaba.
Ejercicio
Clase 7
Agarren hoja y lápiz, vamos a
practicar rápidamente cómo
hacer un storyboard.
Relato breve para el Ejercicio en clase de Storyboard
Un hombre se le acercó a un sabio anciano y le dijo:
– Me han contado que eres muy sabio. Por favor dime, ¿qué cosas haces como sabio que no
podamos hacer los demás?
El anciano le contestó:
– Bueno, cuando como, simplemente como; duermo cuando estoy durmiendo, y cuando hablo
contigo, sólo hablo contigo.
El hombre lo miró con asombro y le dijo:

– Pero yo también puedo hacer esas cosas y no por eso soy un sabio.
– Yo no lo creo así -replicó el anciano…

– Cuando duermes, recuerdas los problemas que tuviste durante el día, o te preocupas por los
que podrás tener al levantarte. Cuando comes, estás pensando en qué harás después. Mientras
hablas conmigo, estás pensando en qué vas a preguntarme o cómo vas a responderme antes de
que termine de hablar.
¿Qué es un MVP?
Minimum Viable Product - Producto Mínimo Viable.
En desarrollo de producto, el producto viable mínimo es un producto con

suficientes características para satisfacer a los clientes iniciales, y
proporcionar retroalimentación para el desarrollo futuro.
En desarrollo de startups (empresas emergentes altamente innovadoras),

para garantizar que una startup tenga éxito, se necesita desarrollar
productos escalables, que deben introducirse gradualmente. Esta práctica es
muy funcional para reducir riesgos y evitar gastos excesivos. Se basa en una
validación real, basada en pruebas y feedbacks de los clientes.
MVP:
MVP
Es la versión de un nuevo producto que permite a un equipo
recolectar, con el menor esfuerzo posible, la máxima cantidad de
conocimiento validado sobre sus potenciales clientes.
Se utiliza para obtener un conocimiento rápido y cuantitativo del

mercado de un producto, o de algunas funcionalidades en particular.
Tiene solamente aquellas funcionalidades que permiten que el

producto sea lanzado.
MVP
Al pensar en un nuevo servicio, producto o canal, se suelen establecer
hipótesis o pequeños supuestos acerca de lo que se necesita para
solucionar una necesidad.
Un ejercicio para determinar el producto mínimo viable, permite
establecer qué ideas son válidas y cuáles deben descartarse antes
de iniciar la producción.
Para lograrlo necesitamos:
● Listado de tareas
● Determinar cuales son prioridad, imprescindible.
● Determinar futuras versiones, deseable.
Tarea para el Proyecto
Vamos a realizar un POV aplicando las técnicas de Storytelling y Storyboard, esto nos
permitirá a nosotros y a otros/as comprender y empatizar con nuestros usuarios.
Para ello realizaremos las siguientes tareas:
● POV - Completar la frase: Usuario - Necesita - Porque.

● Storytelling - Crear una narración sobre nuestro proyecto que cuente con un:
Inicio - Nudo - Desenlace, que cree una conexión emocional con nuestra User
Persona. Que sea persuasiva y tenga relación con nuestros usuarios.
● Storyboard - Representar visualmente la narración. Ilustrando los momentos clave de
la historia (6 dibujos máximo).
Recuerden que no es necesario saber dibujar “bien” sino que se entienda la idea.
Puede ser a mano o digital, si es a mano deberán pasarlo a tinta y escanearlo con
buena calidad y buena luz para que se pueda visualizar correctamente.
Vamos a definir un MVP, esto nos permitirá tener en claro cuales son las funcionalidades básicas que
debe tener mi app.
Para hacerlo debemos:
● Redactar una lista de tareas (todas las que se me ocurran relacionadas a mi proyecto).
● Definir prioridades, cuáles tareas son imprescindibles para el funcionamiento de la app.
● Definir cuáles tareas son deseables para versiones más avanzadas de mi app en un futuro
(versión 2.0).
● Identificar cuál es la función básica y primordial que mi usuario realizará en mi app, y por qué
es deseable para mi usuario.
Realizar un informe sobre las conclusiones del ejercicio, cuáles tareas se desarrollaran primero y por
qué (explicar brevemente cada tarea).
Ejemplo de entrega
En pleno auge de la virtualidad y el trabajo
a distancia, cada vez son más las personas
que optan por un estilo de vida que les
permita vivir viajando.
Sin embargo, las ofertas para alquilar

sostienen precios elevados y por periodos
cortos.
POV Punto de vista
¿Quién es, qué necesita y por qué?
Paula es freelancer y tiene ganas de vivir en diferentes lugares durante

el año. Necesita encontrar alojamientos por periodos de tiempo largos y
a costos razonables, porque quiere hospedarse por algunos meses y
sentirse como en casa.
MVP Mínimo producto viable
VERSIÓN LANZAMIENTO
Prioridades Home Buscador Perfil
- Novedades - Encontrar alojamientos - Gestionar mis reservas

- Sugerencias - Filtrar por ubicación - Administrar publicaciones
IMPRESCINDIBLE - Chat entre usuarios y plazos de alquiler propias
- Recordatorio de próximas - Llevar un historial de los - Llevar un registro de mis

reservas alojamientos vistos valoraciones y opiniones
DESEABLE - Ver valoraciones y opiniones
Recordá:

Nos vemos pronto
DISEÑO UX/UI
Clase 8
Arquitectura de la información
POV y MVP Arquitectura de la Información User Flow
● ¿Qué es un POV? ● ¿Qué es un mapa de sitio? ● ¿Qué es un User Flow?

● Recursos: storytelling y ● Cardsorting ● Tipos de flujo de usuario
storyboard ● Optimal Workshop ● Task Flow y Flow Chart
● ¿Qué es un MVP? ● Whimsical ● ¿Qué es el Happy Path?
● Listado de funcionalidades ● Tarea para el Proyecto Final ● Tarea para el Proyecto Final
Design Thinking
POV Arquitectura de Información
MVP Cardsorting
¿Qué es Arquitectura de la
Información?
En pocas palabras, la arquitectura de la información es el arte de
organizar la información de la forma más clara y lógica posible.
Para que el usuario pueda encontrar fácilmente lo que está buscando.
Además, también nos permitirá poder añadir fácilmente nuevas
funcionalidades y escalar el producto.
Se trata de organizar, estructurar y etiquetar correctamente todos sus
elementos.
Tema: Arquitectura de la información
La arquitectura de la información es la práctica de decidir cómo

organizar las partes de algo para que sea comprensible
Autor/as/es: Information Architecture Institute.

Arquitectura de la información:
Es crucial para el desarrollo de cualquier sitio, aplicación o software.
Esto implica una relación estrecha entre todas las partes del proceso,
los involucrados (desde la empresa, los diseñadores, programadores e
inclusive usuarios testers) deben funcionar en sintonía.
La arquitectura de la información funciona como base para el trabajo

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

2. Redactamos una introducción para los usuarios.
3. Configuramos los datos que se dan antes de comenzar el cardsorting, consigna
detallada: leer, asociar, agrupar, jerarquizar estas tarjetas, también nombrar las
categorías a donde pertenecen. Preguntas para poder organizar y segmentar a los
usuarios que participen.
4. Redactamos las preguntas finales que se les hará a los usuarios una vez finalizado el
cardsorting: ¿Qué tan difícil te resultó agrupar las tarjetas? Fácil 1-10 Difícil ¿Cuál
tarjeta te generó dudas al momento de ordenarla? ¿No sabías el significado de alguna
tarjeta?.
5. Incluimos a los participantes enviándoles el enlace aclarando que es muy
importante realizarlo desde una PC o no será posible finalizar el cardsorting.
6. Lanzamos el Cardsorting con el botón “Launch”, y recordar que una vez realizado
esto no se podrán realizar más cambios. Chequear en “Study settings” que no esté en
“Draft”.
Conclusiones
La herramienta nos brindará dos gráficos (en “Analysis”):
● Dendrograma (Dendrogram)- Este diagrama nos permite ver los
grupos y etiquetas principales elegidas por los usuarios.
● Matriz de similitud (Similarity matrix)- Este diagrama detecta
grupos o tarjetas que fueron más frecuentemente emparejadas
entre los usuarios, donde el número sea mayor es donde más
similitud hay.
A partir de estos resultados debemos analizar e interpretar la
información, que luego nos servirá para realizar nuestra arquitectura
de la información para nuestro proyecto con información validada por
los usuarios.
Dendrograma
Mapa de sitio
A partir de los resultados obtenidos del cardsorting y del análisis

posterior de sus diagramas, vamos a poder realizar el mapa del sitio,
este permitirá ver las relaciones y agrupaciones establecidas entre los
contenidos.
En algunas ocasiones será necesario renombrar algunas categorías o

incluso permitir el acceso a algún apartado desde distintas categorías.
Allí indicaremos las secciones principales de nuestra app, cómo se

conectan a las subsecciones y qué relación hay entre ellas, partiendo
de la “Home”.
Mapa de sitio
abreviado de Discord.
Es una herramienta online gratuita súper intuitiva y simple de usar,
utilizaremos el “Flowchart” para diagramar:
Ejercicio
Práctico Nº8
Consigna:
Optimal Workshop y
Whimsical
Optimal Workshop
paso a paso
Comenzamos el estudio haciendo click en “Create study”
y elegimos Card Sorting.
Agregamos Cards
(Tarjetas) que
correspondan a las
funciones de nuestra
app con el botón “Add
card”.
Elegimos el tipo de
Card Sorting a
realizar según los
criterios vistos en
clase.
Definimos los mensajes
que van a guiar a la
persona durante el
ejercicio. Son:
Welcome screen
Pantalla de bienvenida
Instructions
Instrucciones
Thank you screen

Pantalla de
agradecimiento
Closed
Cierre
En este paso podemos
agregar preguntas
para conocer y
entender mejor a las y
los participantes:
Pre-study questions
Preguntas antes del
estudio
Post-study questions
Preguntas al final del
estudio
Por último,
configuramos
el idioma, la duración
del estudio y
accedemos al link
para compartirlo.
Haciendo click en “Preview” tenemos una vista previa del estudio.
Lo compartimos haciendo click en “Launch”.
Una vez que
recopilamos
todas las respuestas
necesarias, en la
pestaña
de “Analysis”
(Análisis) encontramos
los resultados del
estudio.
Como vimos en clase,
nos vamos a focalizar
en los siguientes para
realizar el informe:
Similarity matrix
Matriz de similitud
Dendrograms
Dendrogramas
Tarea para el Proyecto:
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 (tareas que surgen del MVP y Benchmarking)

● Crear una introducción detallada para los participantes, explicando la consigna que deben
cumplir con respecto a las tarjetas, realizarles preguntas de segmentación básicas (por
ejemplo: nombre, ciudad, edad) y redactar las preguntas finales para los usuarios, para
clarificar sus decisiones y ver si comprendieron el lenguaje de las tarjetas.
● Invitar a 10 participantes mínimo (que pertenezcan al grupo de la user persona) y enviarles el
link para el cardsorting, debemos recordarles que se realiza desde una PC si o si.
● Analizar e interpretar los resultados (gráficos y respuestas), y realizar un informe con las
conclusiones del estudio (aciertos, errores, correcciones realizadas, conclusiones, etc.).
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.
● 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.)
Recordá:

Nos vemos pronto
DISEÑO UX/UI
Clase 9
User Flow
Arquitectura de la Información User Flow Repaso e Integración

● ¿Qué es un User Flow?
● ¿Qué es un mapa de sitio? ● Tipos de flujo de usuario ● Repaso de todos los ejercicios
● Cardsorting ● Task Flow y Flow Chart que forman parte de la Entrega
● Optimal Workshop ● ¿Qué es el Happy Path? Final.
● Whimsical ● Tarea para el Proyecto Final ● Ejemplo de entregas
● Tarea para el Proyecto Final ● Espacio de consulta
Design Thinking
POV Arquitectura de Información
MVP User Flow

¿Qué significa User Flow?
Podemos definir User Flow como la ruta que sigue un usuario en un
sitio web o aplicación para completar una tarea. El flujo de usuario
comprende desde el punto de su entrada sumando el conjunto de
pasos que ejecuta hasta que completa la tarea con un resultado
exitoso.
Definir los flujos de usuario conduce a una mejor experiencia de
usuario, ya que lo coloca en el centro del proceso de diseño.
Ejemplo de User Flow
User Flow:
Es importante diseñar teniendo en cuenta los flujos de usuario y por lo
tanto centrarnos en lo que el usuario necesita hacer y cómo integrarlo de la
manera más eficiente y efectiva posible.
Existen una serie de preguntas que nos ayudarán a definir el flujo de usuario:
● ¿Qué está tratando de lograr el usuario?
● ¿Qué es importante para el usuario y qué le dará confianza para
continuar?
● ¿Qué información adicional necesitará el usuario para realizar la tarea?
● ¿Cuáles son sus dudas, frustraciones o barreras para realizar la tarea?
User Flow y Diagrama de Flujo:
Los user flows son un elemento más del diseño y preparación del proyecto
de un entorno digital, ya que nos permite identificar situaciones futuras y
necesidades del usuario dentro de nuestra web o aplicación.
La manera más común para representar los flujos de usuario es
mediante diagramas de flujo (Flow charts), en los cuales representamos,
de manera separada, cada paso que lleva a cabo el usuario.
El diagrama de flujo o flow chart es una manera de representar
gráficamente un proceso a través de una serie de pasos bien estructurados
y relacionados que permiten comprender un todo.
Diagrama de Flujo
Diagrama de Flujo
Los diagramas de flujo se realizan de izquierda a derecha y de arriba

a abajo. Es importante en su realización evitar el cruce de líneas para
facilitar la comprensión global del proceso.
Para el user flow suelen utilizarse una serie de figuras geométricas

que representan cada paso del proceso. Estás formas ya están
definidas y se conectan entre sí a través de flechas y líneas que
marcan la dirección del flujo y determinan el recorrido.
Figuras Geométricas:
Flechas - Dirección de flujo:
¿Cuándo creamos los user flow?
Lo ideal es crear los flujos de usuarios lo más pronto posible, justo

después de definir la arquitectura de la información y
preferiblemente antes de comenzar con el diseño y desarrollo de la
interfaz. Si diseñamos la interfaz visual sin determinar los elementos
con los que interactúa un usuario al navegar podría generarnos
muchos problemas y futuras revisiones.
¿Cómo creamos un user flow?
● Definir la tarea que llevará a cabo el usuario.

● Listar los pasos a hacer por el usuario para completar un objetivo
o tarea determinada (Task flow).
● Agregar los posibles errores y cómo recuperarse de ellos.
Siempre simplifica la cantidad de pasos para completar una tarea.

Task Flow
El flujo de tareas, más conocido como task flow, es un diagrama que

representa el trayecto que debe realizar un usuario para llevar a
cabo una tarea concreta.
Entrada donde comienza la tarea - Acción (Seleccionar Elegir Tocar) - Acción (Seleccionar Elegir Tocar) - Acción donde finaliza la tarea
. con éxito.
User flow
El User Flow, es un diagrama que representa el trayecto que realiza

un usuario para realizar todas las tareas posibles en mi app o web.
Inicio
Fin
Whimsical
Es una herramienta online gratuita súper intuitiva y simple de usar, utilizaremos
el “Flowchart” para diagramar:
Usar lo aprendido hasta el momento
Con las conclusiones obtenidas del MVP, POV, Storyboard y la

arquitectura de la información, podremos realizar un Task flow
rápidamente basado en la problemática y necesidad de mi user
persona, permitiéndole realizar la tarea, con éxito, para la cual
descargo la app de la forma más simple posible.
¿Qué es el Happy Path?
En el contexto del modelado de software o información, un camino
feliz es un escenario predeterminado que no presenta condiciones
excepcionales o de error.
En Design Thinking empleamos el término Happy path para describir el
escenario de uso, en el cual un usuario toma el camino más corto para
la consecución de un objetivo concreto, y en el que además todos los
puntos de contacto e interrelación entre él y el producto le satisfacen.
Happy Path:
Cuando empezamos a imaginar un producto, lo hacemos pensando en el camino óptimo para el usuario. Y en cuán
satisfactoria será su experiencia al finalizar su recorrido por este Happy Path. El siguiente Task Flow muestra el proceso de
compra de una barra de pan a través de un Happy Path.
Sin embargo, todos sabemos que los errores ocurren constantemente. Y que, para llegar a Roma el usuario puede usar más de
un camino. Si quieres evitar que tus clientes se vayan a casa sumergidos en un mar de lágrimas, o a otra panadería, debes tener
en cuenta la mayoría de caminos probables y prevenir cuantos más errores o distracciones mejor.
Para empezar, y antes de ponerte a diseñar pantallas, piensa. De lo que se trata es de no dejar al usuario en un callejón sin
salida cuando esté utilizando tu aplicación. Dibuja el diagrama de flujo de cada Happy path de tu aplicación, que resuelva un
objetivo concreto (pedir cita médica, cancelar una cita, cambiar la contraseña…).
Ejercicio
Clase 9
Realizar el Task Flow con
Whimsical
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.
Ejemplo de entrega:
POV
Pilar es una estudiante avanzada
que vive en Buenos Aires. Ya ha
hecho terapia antes.
Ella necesita encontrar a un
psicólogo que se adecue mejor a
sus necesidades y la ayude a
superar esta etapa de su vida,
porque quiere sentirse mejor y más
realizada.
STORYBOARD
Nos ayuda a predecir y
explorar visualmente la
experiencia de un usuario
con un producto.
Facilita la tarea de
comprender cómo las
personas podrían
interactuar con la app.
MVP
IMPRESCINDIBLES DESEABLES
(versión lanzamiento) (más adelante)
Mi cuenta Mi cuenta
● Datos personales: nombre y apellido, dni, ● Gestionar mis turnos.
email, ciudad, género, fecha de ● Configurar preferencias que permitan búsquedas y
nacimiento, motivo de consulta. sugerencias más efectivas.
● Sugerencias. ● Mis valoraciones y reseñas realizadas sobre el profesional.
Buscar psicólogo ● Dar de baja (cuenta).
● Medios de pago.
● Filtrar por problemática del paciente
(ejemplo: adicción, trastorno alimenticio, Conectar usuarios
fobias, duelo, depresión, ansiedad, etc.), ● Chat entre paciente y profesional.
tipo de terapia (psicoanálisis, TCC, Buscar psicólogo
sistémica, etc.), costo, disponibilidad
● Mejorar el filtro (valoraciones).
horaria del profesional, zona geográfica.
● Gestionar todos los turnos con el profesional.
● Agendar un primer turno con el
● Testimonios sobre la app.
profesional.
Historia clínica
● Gestionar la historia clínica del paciente para que el
psicólogo que derive pueda registrar información del
paciente.
ARQUITECTURA
DE LA INFORMACIÓN
04 Se organiza la información de la forma más clara
posible para que la app tenga una buena usabilidad.
Realizamos un Card Sorting, técnica que se basa en
observar cómo los usuarios agrupan y asocian entre sí
una serie de tarjetas.
Cards utilizadas 1.
2.
Agenda
Blog
3. Chat con el terapeauta
4. Cómo funciona?
5. Datos personales
6. Disponibilidad horaria
7. Edad del terapeuta
8. Género del terapeuta
9. Historia clínica
10. Medios de pago
11. Mis turnos
12. Preferencias
13. Problemática
14. Reseña del terapeuta
15. Sobre nosotros
16. Testimonios
17. Tipo de terapia
18. Valor de la sesión
19. Valoraciones
20. Zona de atención
MATRIZ DE SIMILITUD
Utilizando la Matriz de Similitud basada
en los resultados del Card Sorting Abierto
podemos ver que las personas que
completaron el estudio agrupan las
siguientes palabras/conceptos:
● Datos personales - Historia Clínica
● Género del terapeuta - Tipo de
terapia - Disponibilidad Horaria -
Zona de atención - Valor de la
sesión - Reseña del terapeuta
● Valoraciones - Testimonios
● Sobre nosotros - Cómo funciona?
● Mis turnos - Historia Clínica
DENDROGRAMA
A partir del estudio de Card Sorting Abierto, 10 de 17 personas completaron el estudio, el
80% de Argentina, con un tiempo promedio de 7 minutos, y la mayoría generando 4
categorías.
Conclusión
Visualizando el Dendrograma (Best Merge Method) y analizando su
información se concluye lo siguiente:
1 Comprensión
No se comprendió correctamente la
etiqueta “Medios de pago” ya que
2
apuntaba a ser la sección donde la
persona realice el pago de sus sesiones. Categorización
El “Chat” fue separado y convertido en
3 Agrupación una categoría aparte por la mayoría de
las personas que completó el estudio.
La mayoría de las personas agrupó los
distintos filtros de búsqueda en una
categoría llamada “Buscador” o similar.
Se colocaron los datos personales dentro
de “Mi perfil” o similar.
Estructura de la App
Con toda la información obtenida realicé el
siguiente diagrama para la App utilizando
las 4 secciones principales:
● BUSCADOR
● SOBRE NOSOTROS
● MI PERFIL
● CHAT
DIAGRAMAS DE FLUJO
05 Mediante los diagramas, comenzamos a pensar el trayecto
que recorren los usuarios para realizar todas las tareas
posibles que permitirá el sistema.
TASK FLOW
Pilar entra a la app para buscar un terapeuta.
USER FLOW
Link: Ejemplo de User Flow

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

Nos vemos pronto
DISEÑO UX/UI
Clase 10
Repaso
Codo a Codo - Diseño UX/UI
Cronograma:
Diploma
Se otorga una constancia de participación en el programa.

Requisitos para obtener el diploma:
● Asistir al 75% de las clases en vivo (sincrónicas)
● Acceder semanalmente al Aula Virtual
● Realizar los ejercicios obligatorios semanales
● Aprobar el Proyecto Final Obligatorio
● Aprobar el EFI (Examen Final Integrador)
● Realizar el curso de Habilidades Blandas (Accenture)
¿Qué es el diseño?
El diseño es el proceso previo de configuración mental,
«pre-figuración», en la búsqueda de una solución en cualquier campo.
Se aplica habitualmente en disciplinas que requieren creatividad.
El diseño involucra variadas dimensiones que van más allá del aspecto,
la forma y el color, abarcando también la función de un objeto y su
interacción con el usuario.
Durante el proceso se debe tener en cuenta además la funcionalidad, la
operatividad, la eficiencia y la vida útil del objeto del diseño.
El diseño como forma de comunicar:
1. Es una disciplina dedicada a la producción de comunicaciones visuales
orientadas a un público específico.
2. Se encarga de comunicar a través de medios visuales y como finalidad

transmitir un mensaje específico despojado de rasgos personales.
3. El hecho de crear y cumplir con un propósito se centra en: la transformación de

una realidad existente por una deseada.
El diseño como forma de comunicar:
4. Los diseños se basan en un mensaje concreto que se quiere transmitir y a partir
de ello obtener una respuesta del público al que está dirigido. Estos afectan el
conocimiento, las actitudes y el comportamiento de la gente.
5. Para poder crear estas piezas de comunicación, el mensaje se tiene que adecuar
al grupo al que se está introduciendo. De esta forma se analiza ampliamente a
quién irá encaminado el mensaje. ¿Qué piensa? ¿Qué hace? ¿Qué ve? ¿Qué
siente? ¿En qué cree?
6. En todo diseño debe haber correlación entre lo que se quiere transmitir y los
elementos utilizados sin resignar su objetivo final sea cual sea.
Tema: Diseño
El diseñador de comunicación visual trabaja en la

interpretación, el ordenamiento y la presentación visual de
mensajes. Su sensibilidad para la forma debe ser paralela a
su sensibilidad para el contenido.
Autor/as/es: Frascara
Comunicación visual:
El emisor se desdobla en dos protagonistas:
○ Aquel que crea el mensaje y necesita transmitirlo (cliente o marca)
○ El diseñador que interviene para hacer que dicho mensaje sea efectivo.
El receptor es el sujeto para quien está destinada la comunicación, un

sector de la sociedad o el público ideal.
EI significado es lo que se desea expresar, es el mensaje. ¿Qué se
comunica?
El significante está siempre unido al significado pues la comunicación se
produce en el cruce de ambos. ¿Cómo se comunica?
Reglas del diseñador profesional:
● El diseñador es un intérprete que ● El diseñador maneja conceptos, códigos
conforma mensajes producidos por y estética para poder enviar mensajes
otras personas. fácilmente comprendidos y absorbidos
por las audiencias a quienes se dirigen.
● El diseñador no adorna, es un
● El diseño, por ética, debe tener como fin
proceso de creación visual con el último mejorar y transformar el mundo
propósito de comunicar un mensaje donde vivimos.
específico.
● El diseño forma parte de nuestra vida

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

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

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

mate van a depender de quién sea el
observador. De su cultura, entorno, edad,
lugar, educación y muchos factores más.
Diseño UX facetas
El diseño de experiencia de usuario (UX) es un conjunto de

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

Peter Morville:
Valioso - Útil - Deseable - Accesible - Creíble - Ubicable - Usable
¿Qué es la Usabilidad?
“El atributo de calidad de un producto, que se
refiere sencillamente a su facilidad de uso.
Implica el grado en que el usuario puede explotar
o aprovechar la utilidad de un producto.”
Jakob Nielsen - Padre de la usabilidad.

Características
● Facilidad de aprendizaje ● Eficacia
¿Cuán fácil es llevar a cabo las tareas la
primera vez? ¿Cuántos errores comete el
usuario? La gravedad del error,
● Eficiencia
puede recuperarse fácilmente de
Una vez que aprendieron el
funcionamiento, ¿cuán rápido las
esos errores?
realizan?
● Satisfacción
● Cualidad de ser recordado
¿Cuán agradable es usar el
Si pasan un tiempo sin usarlo,
¿Cuán fácil es que vuelvan a usarlo producto?
eficientemente?
¿Qué es Design Thinking?
Design Thinking es una metodología orientada al usuario, que se
enfoca en detectar y entender las necesidades de los mismos, con el
objetivo de generar soluciones innovadoras en un determinado marco
de trabajo.
Aquellos productos y servicios diseñados de manera adecuada a través
de este método aportan valor a las personas.
El proceso de Design Thinking se compone de 5 etapas o fases.

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

diseñar y evaluar hardware y software (interface)
● Tiene un enfoque de diseño cuyo proceso está orientado por la
información acerca de quienes van a hacer uso del producto
(usuarios)
● Tener en cuenta: ¿Quién usará el sistema?, ¿qué tareas llevará a
cabo con el mismo?
● Un proceso iterativo (cíclico) en el cual diseño y evaluación se
incorporan desde la fase inicial del proyecto y en todas las fases
que veremos a continuación:
Fases:
1. Análisis. Entendiendo a los usuarios y sus necesidades
2. Diseño. Proyecto una solución que satisfaga las necesidades
3. Validación. Compruebo el valor que estoy agregando a los

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

usuario hace juicios
rápidos basándose
solamente en el diseño.
Un poco sobre fotografía
Para aprender a distinguir entre buenas y
malas fotografías necesitamos entrenar
nuestra mente y también nuestros ojos.
Prestemos atención de ahora en más en:
si la imagen está nítida, si el foco está en

el lugar adecuado, si está sobreexpuesta
(demasiado blanca) o subexpuesta
(demasiado oscura), si está centrada, si
tiene manchas o reflejos molestos, si los
colores son los adecuados etc.
Importante: que no se deformen ni

tengan marcas de agua.
Diseño Web
La información está por todas partes, y por eso es extremadamente importante que
los diseñadores piensen en hacer diseños claros. Las piezas del diseño tienen que
atraer la atención de los usuarios, ya sea mientras compran en una tienda online,
leen un blog o, simplemente, navegan por internet.
El diseño web debe ser fácil de leer y de entender.
Debemos recordar que optar por un diseño sencillo en lugar de uno recargado es
clave para mantener interesados a los lectores. Una gran cantidad de elementos,
imágenes, colores, y formas diferentes en una página pueden hacer que una web se
vea más "barroca", lo cual distraerá la atención del usuario.
Una buena forma de crear una experiencia agradable en la web es recordar que
menos es más.
Las leyes de la Gestalt
“La mente configura, por medio de ciertas leyes, los elementos que
llegan a través de los canales sensoriales o de la memoria
(pensamiento, inteligencia y resolución de problemas), es decir la
percepción.
La palabra Gestalt hace referencia a figura, forma u organización.
La Gestalt analizó diversas áreas de la psicología (actitudes, el
aprendizaje, la motivación, etc.) pero se centró en la percepción.
No percibimos como elementos aislados, sino que por el contrario
percibimos como globalidad o conjunto organizado.”
“El todo es más que la suma de las partes”

“píxele”.

¿Qué es Photoshop?
Adobe Photoshop es el software líder en edición de imágenes de mapa
de bits, desarrollado por Adobe Systems Incorporated.
Usado principalmente para el retoque de fotografías, su nombre en
español significa "taller de fotos". Es conocido mundialmente.
Nos referiremos a este software como: Photoshop o Ps.
Formatos
JPEG - Es el formato más popular. El formato .JPEG (Joint Photographic Experts
Group) destaca por el alto nivel de compresión que ofrece y, que se basa en la
pérdida de calidad. Es por eso que este formato sacrifica valores imperceptibles por
el ojo humano para bajar el peso final, así como lo hace un archivo .MP3 con el
sonido. No son muy utilizadas entre quienes requieren fotos en alta calidad.
PNG - El formato .PNG (Portable Network Graphics) tiene un nivel de compresión

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

Investigación de Usuarios:
Se trata de responder una pregunta o hipótesis que usted o su equipo de diseño tengan.
No existe un enfoque único para construir una práctica de investigación porque cada
organización tiene sus propios objetivos. Aprender qué tipo de investigación hacer, por qué y
cómo debe hacerlo son pasos importantes para establecer una práctica de investigación.
Algunos datos siempre son mejores que ninguno, pero saber cuándo recopilarlos y qué tipo de
datos necesita comienza por comprender el objetivo.
Behzod Sirjani, fundador de Yet Another Studio y exjefe de operaciones de investigación y

análisis de Slack, dice que debe intentar investigar cada vez que desee aumentar su
confianza en una decisión:
La investigación siempre debe orientarse en torno a una decisión porque saber lo que está
tratando de decidir lo ayudará a comprender lo que está tratando de ver y cómo realmente va a
hacer esa investigación.
Insight - visión interna o verdad revelada:
A veces podemos confundir los datos o el
feedback que recibimos de nuestros
No es un entendimiento común, sino un consumidores como insights, pero lo cierto
descubrimiento de una verdad profunda es que debes ir más allá, pues la clave
y muchas veces oculta, que solo para tener insights está en el análisis y la
encontraremos charlando con los usuarios interpretación que hagas.
e indagando sobre sus pensamientos más Los datos hacen parte del proceso para
internos. obtener insights pero se convierten en
conocimientos o verdades claves cuando
¿Por qué hizo eso? ¿Qué pensó en ese
les añades interpretación. Datos sin
momento? ¿Qué motivó su decisión?. interpretación no son insights.
Entender el por qué de lo que hacen o la
motivación detrás de tus consumidores
hará que sean verdaderos insights.
¿Qué es benchmarking?
El benchmarking competitivo consiste en identificar información específica acerca
de sus competidores directos, y compararlos.
Consiste en tomar "comparadores" o benchmarks, que podría traducirse como

medida de calidad.
Es un proceso de investigación que proporciona información valiosa para la toma

de decisiones.
Es una actividad continua porque el mercado está constantemente cambiando. Al

realizarlo nos da una “foto” del momento que estamos analizando.
No es un proceso para copiar o imitar a la competencia.

Persona en el diseño UX/UI
● Es un individuo ficticio que se crea para identificar un público específico.
● Son modelos de personas que representan a los usuarios durante el

proceso de diseño.
● Son imaginarios pero están creados con mucho detallismo y precisión.
● No están diseñadas únicamente según su información demográfica.

La proto persona debe tener
1. Datos personales y foto: nombre y apellido, profesión.
2. Datos demográficos: lugar de residencia, edad, sexo, nivel de educación, estado civil, ingresos
3. Biografía: breve reseña de cómo es, cómo vive, qué la define
4. Intereses: hobbies, modo de vida
5. Hábitos de consumo: ¿Qué consume?, cómo lo hace?, ¿por qué lo hace?
6. Objetivos, sueños, metas: ¿Qué quieren hacer y por qué?
7. Su relación con la tecnología: ¿Qué usa?, ¿con qué frecuencia?, para qué?
8. Frustraciones y motivaciones: ¿Qué se interpone en su camino? ¿Qué los hace avanzar?
9. Una frase que identifique lo mejor posible cómo piensa: Se expresa entre comillas “quote”
¿Qué es un mapa de empatía?
Es un esquema visual con preguntas sobre el cliente objetivo ideal de un
producto o servicio determinado.
Sirve para entender mejor a este prototipo de persona y por tanto poder
satisfacer mejor sus necesidades y comunicarnos empatizando al máximo
con ella.
Este lienzo ayuda a reflexionar sobre cómo la afectan el entorno y las
emociones internas que vive.
Es importante tomarla como uno de los puntos de partida para identificar
cómo es este user persona.
¿Qué es una entrevista?
Es una técnica de gran utilidad en la investigación cualitativa para
recabar datos; se define como una conversación que se propone un fin
determinado distinto al simple hecho de conversar. Es un instrumento
técnico que adopta la forma de un diálogo coloquial.
Una persona pregunta y la otra responde, no hay ida y vuelta.

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

podremos generar una solución adecuada, focalizada y con valor
agregado.
Estructura y requisitos
POV:
Usuario (user persona)- Necesita (relacionado a nuestra app) - porque (insight)
Técnica de Storytelling:
Arco argumental + Emoción (atmósfera que envuelva, cautive, les resulte familiar)
Estructura de la narración:
Introducción - Nudo - Desenlace

Tema: Storytelling
"La gente olvidará lo que dijiste, olvidará lo que hiciste, pero

nunca olvidarán lo que les hiciste sentir".
Autor/as/es: Maya Angelou.

¿Qué es un Storyboard?
Es el guión gráfico. Es un conjunto de ilustraciones que aparecen en
secuencia y que se utilizan como guía para entender una historia.
La característica principal del storyboard es su representatividad: es

visual, la historia aparece frente a nuestros ojos como algo menos
abstracto que en el guión.
Un storyboard se parece mucho a una historieta de la narración.

¿Qué es un MVP?
Minimum Viable Product - Producto Mínimo Viable.
En desarrollo de producto, el producto viable mínimo es un producto con

suficientes características para satisfacer a los clientes iniciales, y
proporcionar retroalimentación para el desarrollo futuro.
En desarrollo de startups (empresas emergentes altamente innovadoras),

para garantizar que una startup tenga éxito, se necesita desarrollar
productos escalables, que deben introducirse gradualmente. Esta práctica es
muy funcional para reducir riesgos y evitar gastos excesivos. Se basa en una
validación real, basada en pruebas y feedbacks de los clientes.
MVP
Al pensar en un nuevo servicio, producto o canal, se suelen establecer
hipótesis o pequeños supuestos acerca de lo que se necesita para
solucionar una necesidad.
Un ejercicio para determinar el producto mínimo viable:
Para lograrlo necesitamos:
● Listado de tareas
● Determinar cuales son prioridad, imprescindible.
● Determinar futuras versiones, deseable.
¿Qué es Arquitectura de la
Información?
En pocas palabras, la arquitectura de la información es el arte de
organizar la información de la forma más clara y lógica posible.
Para que el usuario pueda encontrar fácilmente lo que está buscando.
Además, también nos permitirá poder añadir fácilmente nuevas
funcionalidades y escalar el producto.
Se trata de organizar, estructurar y etiquetar correctamente todos sus
elementos.
Es un documento vital en el que se definen la organización y relaciones entre

todos los elementos de nuestra app.
De ella depende el resto del proceso, los wireframes, prototipos y diseño final.
En este punto del proyecto idearemos una arquitectura de la información para

representar y comprender el modelo mental de nuestra user persona, saber como
prefieren y reconocen la información cuando ingresan a una app.
Para lograr esto necesitamos que el usuario forme parte del proceso de diseño.
Utilizaremos la técnica de Card Sorting en Optimal Workshop.

Optimal Workshop:
Card Sorting Abierto - Optimalsort
1. Introducimos los nombres en cada tarjeta.

2. Redactamos una introducción para los usuarios.
3. Configuramos los datos que se dan antes de comenzar el cardsorting, consigna
detallada: leer, asociar, agrupar, jerarquizar estas tarjetas, también nombrar las
categorías a donde pertenecen. Preguntas para poder organizar y segmentar a los
usuarios que participen.
4. Redactamos las preguntas finales que se les hará a los usuarios una vez finalizado el
cardsorting: ¿Qué tan difícil te resultó agrupar las tarjetas? Fácil 1-10 Difícil ¿Cuál
tarjeta te generó dudas al momento de ordenarla? ¿No sabías el significado de alguna
tarjeta?.
5. Incluimos a los participantes enviándoles el enlace aclarando que es muy
importante realizarlo desde una PC o no será posible finalizar el cardsorting.
6. Lanzamos el Cardsorting con el botón “Launch”, y recordar que una vez realizado
esto no se podrán realizar más cambios. Chequear en “Study settings” que no esté en
“Draft”.
Conclusiones
La herramienta nos brindará dos gráficos (en “Analysis”):
● Dendrograma (Dendrogram)- Este diagrama nos permite ver los
grupos y etiquetas principales elegidas por los usuarios.
● Matriz de similitud (Similarity matrix)- Este diagrama detecta
grupos o tarjetas que fueron más frecuentemente emparejadas
entre los usuarios, donde el número sea mayor es donde más
similitud hay.
A partir de estos resultados debemos analizar e interpretar la
información, que luego nos servirá para realizar nuestra arquitectura
de la información para nuestro proyecto con información validada por
los usuarios.
Mapa de sitio
A partir de los resultados obtenidos del cardsorting y del análisis

posterior de sus diagramas, vamos a poder realizar el mapa del sitio,
este permitirá ver las relaciones y agrupaciones establecidas entre los
contenidos.
En algunas ocasiones será necesario renombrar algunas categorías o

incluso permitir el acceso a algún apartado desde distintas categorías.
Allí indicaremos las secciones principales de nuestra app, cómo se

conectan a las subsecciones y qué relación hay entre ellas, partiendo
de la “Home”.
¿Qué significa User Flow?
Podemos definir User Flow como la ruta que sigue un usuario en un
sitio web o aplicación para completar una tarea. El flujo de usuario
comprende desde el punto de su entrada sumando el conjunto de
pasos que ejecuta hasta que completa la tarea con un resultado
exitoso.
Definir los flujos de usuario conduce a una mejor experiencia de
usuario, ya que lo coloca en el centro del proceso de diseño.
User Flow y Diagrama de Flujo:
Los user flows son un elemento más del diseño y preparación del proyecto
de un entorno digital, ya que nos permite identificar situaciones futuras y
necesidades del usuario dentro de nuestra web o aplicación.
La manera más común para representar los flujos de usuario es
mediante diagramas de flujo (Flow charts), en los cuales representamos,
de manera separada, cada paso que lleva a cabo el usuario.
El diagrama de flujo o flow chart es una manera de representar
gráficamente un proceso a través de una serie de pasos bien estructurados
y relacionados que permiten comprender un todo.
Task Flow
El flujo de tareas, más conocido como task flow, es un diagrama que

representa el trayecto que debe realizar un usuario para llevar a
cabo una tarea concreta.
¿Qué es el Happy Path?
En el contexto del modelado de software o información, un camino
feliz es un escenario predeterminado que no presenta condiciones
excepcionales o de error.
En Design Thinking empleamos el término Happy path para describir el
escenario de uso, en el cual un usuario toma el camino más corto para
la consecución de un objetivo concreto, y en el que además todos los
puntos de contacto e interrelación entre él y el producto le satisfacen.
Figuras Geométricas:
User flow
El User Flow, es un diagrama que representa el trayecto que realiza

un usuario para realizar todas las tareas posibles en mi app o web.
Inicio
Fin
Proyecto Final
Fecha de la 1ra Pre entrega:

Clase 11
Semana del 12 de Septiembre

preocupa?...

● Vocabulario o Errores (Óptimo, Error menor, Error mayor - que no me permite operar)
propuesta?).

● Biografía.
● Intereses
● Una frase.


debe tener mi app.
(versión 2.0).



● User persona
● MVP
Aclaraciones: Para el User flow deben utilizar las figuras geométricas sugeridas en esta clase como código para
los diagramas, el diagrama se realiza de izquierda a derecha, arriba a abajo, tiene un comienzo y un fin, en lo
posible acomodarlo de forma que no se crucen las flechas.
Recordá:

Nos vemos pronto
DISEÑO UX/UI
Clase 11
Primera Preentrega del Proyecto
Primera Preentrega del Proyecto Final Obligatorio
La primera pre entrega de este curso se realiza mediante el link al

“Formulario de Primera Preentrega”.
1 solo representante del equipo debe completar en el formulario:
● Nombre del equipo

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

Nos vemos pronto
DISEÑO UX/UI
Clase 12
Prototipo y Wireframes
Primera Pre-entrega del Prototipos y Wireframes Patrones de Diseño

Proyecto Final
● ¿Qué es un prototipo? ● ¿Qué son los patrones de
● Wireframes en diseño?
baja/media/alta ● UX Writing
● Bocetos a mano ● Material Design / Human
● Wireframe digital Interface
● Figma ● Patrones de navegación
● Tarea para el Proyecto Final ● Patrones de interacción
Lo-Fi Visual
Design Thinking
Wireframe a mano
Wireframe Digital
Luego de realizar la investigación previa,
de haber interpretado cada uno de los
datos que fuimos consiguiendo,
vamos a comenzar a prototipar,
plasmando todo ese recorrido en las
estructuras y cada elemento de la interfaz
de nuestro producto digital.
¿Qué significa Prototipo?
● Un prototipo es una representación de un producto o servicio
basada en una virtud o cualidad de este.
● Un prototipo es una representación material de ideas y
soluciones, y tiene relación con la experiencia.
● Un prototipo también es un objeto diseñado para una
demostración de cualquier tipo de producto, servicio, software,
app, etc.
Ayudan a plasmar visualmente los objetivos de negocio y cómo se
alinean con las expectativas y necesidades de los usuarios y si son
satisfechas a través del producto digital diseñado.
Prototipado:
El prototipado por definición es una técnica que permite realizar y

materializar diversas ideas de soluciones propuestas en un
proyecto de diseño o rediseño de productos y servicios.
En procesos colaborativos de diseño de nuevos productos y servicios, y

de mejora continua, un prototipo es esencial para validar ideas. En
procesos de mejora continua, hacer un prototipo permite testear
oportunamente ideas antes de desplegarlas a gran escala y descubrir
oportunidades de mejora en etapas previas al diseño definitivo de un
producto o servicio.
¿Para qué hacemos prototipos?
● Dar forma y materializar una idea de solución.

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

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

Normalmente se hacen en escala de grises o en blanco y negro.
Wireframe (Baja):
Es la representación de baja fidelidad (lo-fi) de un diseño.
Su objetivo es comunicar la estructura de la solución de diseño que estamos pensando:

¿Dónde estarán los menús? ¿El logo? ¿Qué jerarquía tendrán los distintos grupos de
contenido? ¿Los Call To Action principales? (elemento que invita al usuario a realizar una
determinada acción por ej: Botón)
Van a ser en escala de grises porque su análisis se centra en lo estructural y no en el

contenido, es decir que el contenido de texto e imágenes aún no estará definido. Lo
elemental es que se tenga una idea del espacio y jerarquía que ocuparían.
No se recomienda invertir demasiado tiempo en ellos: cuanto más rápido lo hacemos,

más rápido nos ponemos de acuerdo sobre qué construir realmente. No deben ponerle
detalles, ya que estaremos gastando tiempo de más en una instancia que aún tiene
muchos cambios por experimentar.
Tema: Diseño
El diseño digital es como una pintura al óleo, excepto que la

pintura nunca se seca
Autor/as/es: Neville Brody.

Wireframes a mano o en papel:
Boceto sencillo y esquemático
de la estructura y elementos de
la interfaz de la app
Ejercicio
Clase 12
Realizar el wireframe de la
Home en papel y a mano.
Dibujar 3 opciones de Home.
Ejemplos de Home:
Wireframe Digital
Al ser digital nos permite agregar un poco más de detalles y prolijidad
que en el wireframe a mano, pero sigue siendo un boceto de los
elementos que forman la interfaz.
“Es un espacio en donde se articula la interacción entre cuerpo
humano, herramienta, y el objeto de acción” Gui Bonsiepe - Del objeto
a la interface.
Utilizaremos la herramienta “Figma” que sirve, entre muchas otras
funciones, para crear prototipos y wireframes digitales.
Wireframes a digitales:
Vamos a pasar a digital los bocetos
que hicimos en papel, usando los
elementos dados por el/la docente
en Figma.
Tipos de app:
● App Nativa: que se descargan e instalan desde el “store”, se

diseñan para Android o IOS basándonos en las guías o guidelines
de cada una, no requieren internet para funcionar, permiten
utilizar el 100% de rendimiento del dispositivo.
● Web App: no necesitan instalarse, pueden verse desde el
navegador, ni se actualizan, requieren conexión a internet para
funcionar, no permiten usar el hardware del teléfono.
● App Híbrida: es una combinación entre las anteriores. Se
desarrolla primero la web y luego se crea una app nativa. mismo
código multiplataforma.
Comenzaremos realizando el boceto del Wireframe a mano de nuestro “Happy Path”, es decir el
camino feliz que recorre el usuario para solucionar su problema en nuestra app.
Empieza por Registrarse en la app, llega a la Home, y luego las siguientes pantallas para completar
el happy path. Luego de tener todos los bocetos de las pantallas a mano y usándolos de referencia
haremos los Wireframes Digitales en Figma utilizando los elementos provistos para facilitar la tarea.
Para tener claro que pantallas voy a diseñar necesitaremos previamente tener hechos:
● Task Flow
● User Flow
● Mapa de Sitio
● MVP + POV + Storyboard
Aclaración: Los wireframes digitales van a estar en Fidelidad Baja, es decir, en escala de grises, con
los elementos dados, sin el contenido de texto específico, ni imágenes aplicadas.
Ejemplos de entrega
Home - Buscador de Psicólogo
WIREFRAME A MANO WIREFRAME DIGITAL
Happy Path - Wireframes en baja
Recordá:

Nos vemos pronto
DISEÑO UX/UI
Clase 13
Patrones de Diseño
Cronograma
Prototipo y Wireframes Patrones de Diseño Prototipo Funcional
● ¿Qué es un prototipo? ● ¿Qué son los patrones de ● Métricas UX

● Wireframes en diseño? ● Prototipo funcional
baja/media/alta ● UX Writing ● Demostración en Figma
● Bocetos a mano ● Material Design y ● Tarea para el Proyecto
● Wireframe digital Human Interface Final
● Figma ● Patrones de navegación
● Tarea para el Proyecto ● Patrones de interacción
Final ● Tarea para el Proyecto
Final
Mapa de Conceptos
Mi-Fi Visual y Contenido
Design Thinking
Empatizar Definir Idear Prototipar Evaluar
Wireframe Digital
Patrones de diseño
Son técnicas para resolver problemas comunes en el desarrollo de
software y otros ámbitos referentes al diseño de interacción o interfaces.
Un patrón de diseño resulta ser una solución a un problema de diseño, es
decir son soluciones a problemas comunes que podemos encontrar en
webs y apps, que ya han sido testeadas y estudiadas para dar una
respuesta. Además son reutilizables, lo que significa que pueden resolver
un mismo problema en distintas circunstancias.
Patrones de diseño, origen
Se empezó a hablar de los patrones de diseño en los años 70 con la publicación del libro
“El lenguaje de patrones” de Christopher Alexander. En él se hacía referencia a
problemas arquitectónicos que podían encontrarse y a cómo estructurar o disponer los
elementos para solucionar estos problemas. Más tarde, en 1995, se recogería esta idea
para llevarla al mundo de la programación, surgiendo el famoso libro “Patrones de
diseño”.
Como podemos ver es un concepto que puede aplicarse a muchos sectores y también
actualmente en el mundo del diseño de interfaces, la experiencia de usuario y la
usabilidad.
“Los usuarios pasan más tiempo en otros sitios que en el tuyo”
Esta frase nos quiere decir que los usuarios ya tienen un

comportamiento marcado y unos modelos mentales porque han
visitado muchas webs o aplicaciones antes que la nuestra, y que por
lo tanto esperan que nuestro producto funcione del mismo modo que
todos los otros que ya conoce.
Los patrones nos permiten ahorrar tiempo y ya sabemos que

funcionan.
Patrones de lectura
Los usuarios repasan la información con la mirada, no leen.
● Escanean la información, de arriba a abajo y ven lo que les llama la atención.

● Navegan chocando con los elementos hasta que encuentran lo que quieren.
● Si encuentran lo que buscan, dejan partes de la página sin siquiera mirarla.
● Encuentran palabras clave relacionadas a lo que están buscando.
● Luego de encontrar lo que buscan, es posible que ocurra una lectura detallada, es
decir que profundicen en lo que más les importa.
Patrón de lectura “F”
Jakob Nielsen realizó un estudio de “eye tracking” a casi 250 personas y descubrió que
al visitar una web la forma de lectura era similar a la letra F.
1. Escaneaban la información localizada arriba a la izquierda, y el primer párrafo.
2. Luego la vista se mueve hacia abajo al comienzo del párrafo siguiente.
3. Y por último escanean la información bajando por el lado izquierdo de la página de

manera vertical.
Patrón de lectura “F”
¿Cómo debemos presentar los textos?
● Textos concisos, nadie quiere leer un ● No usar lenguaje promocional o
bloque de texto largo. Ir directo al marketinero que genere desconfianza.
grano, a la información principal, 75 ● No utilizar TEXTOS EN MAYÚSCULAS,
palabras máximo. dificulta la lectura y puede
● Alinear los textos a la izquierda, malinterpretarse.
porque facilita la lectura. ● En el caso de cometer un error, el
● Usar jerarquías visuales, que exista usuario debe comprender qué error
una mayor y menor importancia. Usar cometió y cómo puede recuperarse y
la negrita para palabras clave así se continuar navegando.
destacan. ● Incluir subtítulos cada 3 párrafos y
● Formatos escaneables, en bloques dividir por temas. Usar números y
breves de información. viñetas para agilizar la lectura.
● Lenguaje claro para los usuarios, con
el que buscan la información.
Test de los 5 segundos
Mostramos un diseño a una persona 5 segundos, lo retiramos, luego le preguntamos
qué recuerda de lo que vió.
Esto nos permite saber si el diseño fue comprendido y si los focos de atención más
importantes estaban bien ubicados.
Les preguntamos:
● ¿Qué recordás de la información?
● ¿Qué llamó más tu atención?

Ejercicio
Clase 13
Test de los 5 segundos
¿Cuál es el tono o lenguaje apropiado?
● Tener en cuenta el ambiente al que pertenece nuestro proyecto, para poder
establecer el tono del mensaje: serio, elegante, social, informal, humorístico,
informativo, corporativo, familiar etc. Piensa en cómo hablaría tu empresa si fuera
una persona.
● Dado el caso debemos hablar como hablan nuestros usuarios, por más que algo se
llama técnicamente de una manera, para que el usuario comprenda debemos utilizar
la jerga que utiliza.
● No debemos hablar como robots, no es lo mismo cometer un error y que te digan
“error #589”, a que digan “ups!, tu nombre de usuario no coincide con la
contraseña, por favor intenta nuevamente”.
● Podemos involucrar más al usuario si en vez de poner “continuar” “ok”, ponemos:
“Si, realizar la compra”, “No, prefiero seguir mirando”.
Manual de estilo, marca o identidad (enfocado al lenguaje)
Un manual de estilo, guía de estilo o libro de estilo, es una guía

compuesta por un conjunto de criterios preceptuados, por normas
para el diseño y la redacción de documentos, ya sea para el uso
general, o para ser utilizados por los redactores de periódicos u otras
organizaciones que también publican textos.
Manual de estilo, marca o identidad (enfocado al lenguaje)
Su objetivo general es dar coherencia y unificar
criterios. Periodistas, editores y correctores
recurren al manual de estilo para resolver dudas y
crear una identidad única.
● Definir mensajes clave y público objetivo.

● Mantener la coherencia entre todos los
contenidos, aunque hayan sido creados por
diferentes personas.
● Resolver dudas comunes entre el equipo de
creación de contenidos, con el ahorro de
tiempo y esfuerzos que esto supone.
● Ofrece pautas de trabajo para los nuevos
redactores, freelancers o los bloggers
invitados.
● Marca el estándar de calidad para todos los
contenidos que se producen.
La importancia de tener buena ortografía
● Una mala escritura puede crear confusión, poca claridad y falta de coherencia.
● Si una empresa importante comete un error en un diseño para la vía pública o en
una publicidad audiovisual por ejemplo, podría provocar la pérdida de millones de
dólares en ventas.
● Podría provocarnos la pérdida de una oportunidad de trabajo si presentamos un
CV o portafolio que contenga errores ortográficos.
● Estas fallas tienen el potencial de destruir las relaciones con los clientes, no
volveremos a ser contratados, y podríamos ser despedidos.
● Otras investigaciones muestran que tan pronto como las personas identifican errores
ortográficos en el texto de una página web, inmediatamente la abandonan porque
temen que se trate de un sitio fraudulento.
Patrones de navegación
Formas de navegar los contenidos para evitar que los usuarios se pierdan:
● Drawer: El menú (Hamburguesa) nos permite cambiar rápidamente de
pantalla, para aplicaciones con más de 5 destinos no relacionados y poco
frecuentes.
● Barra inferior: Nos permite ver la navegación principal de la app, 3 a 5
secciones máximo. (IOS Tab bar/Android Bottom Navigation.)
● Pestañas: Organizan y permiten la navegación entre grupos de contenido
que están relacionados. (IOS Segmented control 2 a 5 como botone
/Android Tabs 4 fijas o 7 con scroll.)
● Retornos: Se posiciona arriba a la izquierda (IOS Chevron/Android Back.)
Patrones de interacción
Formas en que el usuario sujeta el
teléfono y el modo que utilizan sus dedos
condiciona la posición de los elementos.
Patrones de interacción
● Listas
● Desborde
● Buscar
● Cuadro de diálogo
● Notificaciones
● Introducción de datos
Listas
● Contenido dispuesto verticalmente.
● Muestra ítems y permite al usuario

seleccionar alguno de ellos para más
información.
● Contienen elementos con acciones

primarias y complementarias, que se
representan mediante iconos y
textos.
Desborde
● Funciones extra y de uso poco

frecuente
● Ocultas la mayor parte del tiempo,

hasta que el usuario las reclame.
● Contienen acciones que no entran en

la barra de acción por lo que pasan al
desborde.
Buscar
● Opción para buscar accesible desde

la barra de acciones o desde un
campo de búsqueda.
Cuadro de diálogo
● Se utilizan para interrumpir al

usuario de forma temporal para que
tome una decisión, o para explicar
algo que ha sucedido antes de
continuar.
● Mientras están visibles, no es posible
hacer otra cosa en el resto de la
aplicación.
● Limitar su uso.
● Por lo general, se centran en la
pantalla, y por encima de cualquier
otro elemento de la interfaz.
Notificaciones
● Se utiliza para mostrar que acaba de

ocurrir, o bien que sucederá en
breve.
● Se utilizan mensajes simples de

confirmación que desaparecen
luego de unos segundos.
● Las notificaciones no siempre

requieren la intervención del usuario
y no interrumpen su flujo.
Introducción de datos
● No siempre se debe obligar al

usuario a utilizar el teclado.
● Existen otras alternativas: menús

deslizantes, desplegables, checkbox,
o una lista, donde el usuario pueda
elegir entre varias opciones.
● Además, existe en el teléfono los

sensores de ubicación, cámaras y
micrófonos que también podrán ser
un input de datos para una
aplicación.
https://material.io
https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/
Android - Google: Material Design
IOS - Apple: Human Interface
Para continuar diseñando la interfaz del prototipo del Proyecto Final que vamos a desarrollar:
A partir de los Wireframes digitales (pantallas sencillas), vamos a incorporar los Patrones de Diseño
(los de navegación y luego los de interacción) vistos en clase. En este punto debemos decidir si
diseñamos para IOS o para Android según la preferencia de nuestra User persona.
Para realizar esta tarea necesitaremos previamente tener hechos los:
● Mapa de sitio
● User Flow
● Wireframes a mano
● Wireframes digitales
Aclaraciones: Guarden todo el proceso, es decir guarden los wireframes digitales y luego sobre una
copia incorporen los patrones de diseño. Para esta tarea utilizaremos el Anexo de la clase 13.
Ejemplo de entrega
EVOLUCIÓN DEL PROTOTIPO
1- Login
WIREFRAME A MANO WIREFRAME DIGITAL PATRONES DE DISEÑO
Botón
Botón
Botón de
registrar
2- Sign in
Botón
Campo de
texto
Campo de texto
(password)
Control de
selección
3- Home Drawer
Botón de
notificaciones
Barra de
App (arriba)
Imagen
Botón en
acción
flotante
Card
4- Buscador
Navegación
Título
Subtítulo
Botones de
selección
Interacción
5- Resultados
Título
Card
Navegación
Interacción
6- Reseña
Card
Navegación
Interacción
7- Agenda
Título
Calendar
Botón de
selección
Botón
Recordá:

Nos vemos pronto
DISEÑO UX/UI
Clase 14
Prototipo Funcional y Métricas
Patrones de Diseño Prototipo Funcional Pruebas de Usabilidad
● ¿Qué son los patrones de ● Métricas UX ● Testeo con usuarios

diseño? ● Prototipo funcional ● Guía del Moderador
● UX Writing ● Demostración en Figma ● Consejos para realizarla
● Material Design y ● Tarea para el Proyecto Final ● Guía del Observador
Human Interface ● Planillas de Registro
● Patrones de navegación ● Tarea para el Proyecto Final
● Patrones de interacción
Lo-Fi Funcionalidad
Design Thinking
Wireframe Digital
Prototipo Funcional
¿Qué es un Prototipo Funcional?
● Una vez diseñadas las pantallas de nuestro prototipo debemos
conectarlas para indicar la dirección y secuencia de las mismas,
para que el usuario pueda recorrerlas, ir y venir por donde desee.
● A través de un prototipo funcional se comprende y representa la
interacción entre humano y máquina y cómo debería de
responder el sistema y cada uno de los elementos que lo
componen.
● Esta parte es indispensable para realizar las pruebas de usabilidad
con usuarios reales.
Gestos:
Son los medios para realizar acciones o navegar por los contenidos.
Seguramente recuerdan haber usado muchas aplicaciones donde

tocaron para presionar un botón, o mantuvieron presionado para
seleccionar algo de una lista, arrastraron hacia abajo o arriba para ver
información no visible en ese momento, giraron para ver mejor una
imagen, deslizaron una tarjeta para ver otra información oculta, etc.
Gestos:
Tap o tocar - Para acciones directas.
Doble toque - Para acciones rápidas. Acerca o aleja, selecciona texto, likea.
Mantener pulsado - Editar listas, mover, mostrar un menú.
Arrastrar - Mover, borrar o archivar.
Deslizar - Scroll, pasar de una foto a otra, abrir una solapa.
Juntar y separar - Zoom, rotar.

Mapa de clics y Mapa de Scroll:
El Mapa de clics analiza donde los usuarios hicieron Clic o Tap.

● Nos indica dónde los usuarios han tocado más en nuestra
aplicación.
● Saber cuáles secciones no se utilizan o no son recorridas.
El Mapa de scroll analiza dónde lo hacen y dónde dejan de hacerlo.
● La atención de los usuarios suele ser mayor con la primera
información que aparece y va disminuyendo a medida que va
scrolleando.
● Puede medirse también que les llama la atención durante el scroll
ya que se detienen más tiempo sobre determinada información.
Fidelidad media:
● Aún no tengo imagenes en mi prototipo

● Tengo algunos títulos pero algunos espacios tienen textos de
relleno
● Antes teníamos una funcionalidad nula, pero ahora vamos a
comenzar a conectar pantallas y realizar microinteracciones, etc.
● Con el prototipo en media vamos a realizar las primeras pruebas
de usabilidad con usuarios reales, para que los testers no se
dejen llevar o conquistar por imágenes o colores, sino por la
estructura y funcionamiento de la app.
En los testeos debemos saber ver y escuchar
oportunidades de mejora:
● Los usuarios nos pueden dar a entender que algo no se
comprende.
● Pueden dar a entender que algo no es sencillo de usar.
● Pueden tardar demasiado en realizar una tarea simple.
● Dar opiniones sobre cómo se podría mejorar la experiencia.
● Pueden perderse y no encontrar la funcionalidad principal para lo
cual fue creada la app.
● Pueden ir a secciones no esperadas que les llaman más la
atención y que eran secciones secundarias.
● Quedar atascados sin retornos.
● Y una gran lista de etcéteras.
Prototipo Funcional
Debemos simular un flujo real de recorrido del usuario, por ejemplo:
simular que aparezca un formulario de registro, que aparezca un
teclado, que el usuario registre sus datos, que toque un botón que lo
lleve a la home, pero todo esto sin imágenes, colores, y con algunos
textos de ejemplo.
El prototipo nos permite conectar pantallas mediante:

● Disparador - Donde comienza la interacción del usuario
● Acción - Conecta el disparador de la acción con el destino
● Destino - A dónde nos conduce la acción
¿Cómo hago que mi prototipo sea funcional?
Imagina que ya tenés las pantallas diseñadas del chat. Ya definiste que diseñas para
IOS y usas el modelo “iPhone 11 Pro”.
Ojo que para este

momento todas las
pantallas deben
“entrar” en el modelo
de dispositivo elegido.
Chequeen porque sino
van a continuar
diseñando en el espacio
incorrecto.
Ojo que para enlazar pantallas necesitás estar en la pestaña Prototype
Cuando muevas el
cursor encima de los
diferentes Frames verás
que aparecen
marcados con un
borde azul que tiene
una pequeña bola
blanca a la derecha:
esto es un nodo y es lo
que te permitirá
enlazar un elemento
con otro.
Como resultado
quedan unidas por
una flecha azul.
Con este enlazado básico, si

haces clic en el icono de Play
que está situado al lado del
botón de Share podrás visualizar
el prototipo.
Podrás observar que si haces clic
en un sitio en el que no hay
ningún enlace definido se verán
brevemente unos rectángulos
azules:
estos te indican siempre donde
existe una interacción para
guiarte.
Voy seleccionando los elementos que necesite enlazar (con cuidado de
seleccionar el elemento y no el texto o el ícono que contengan) y me aparecerá
una pequeña bolita que es de donde nace la flecha azul.
Nos aparecen las siguientes opciones:
Disparador: Acción:
On tap significa al hacer clic. Open overlay sirve para un
aviso que bloquea la pantalla.
Teclado
Error
Pop up
Métricas
Las métricas son una técnica de medir o evaluar un aspecto concreto
de manera cuantitativa, es decir son los resultados de una estrategia
de investigación que se centra en cuantificar la recopilación y el
análisis de datos.
Vamos a obtener datos numéricos.
Tomaremos decisiones en base a datos reales de usuarios reales.
● Vamos a evaluar qué hace y qué dice el usuario.
● Queremos saber en qué estadío estamos y si la app es exitosa.
● Ver donde están los errores y mejorarlos.
Tipos de métricas:
Eficacia - Facilidad de uso. Si los usuarios pueden realizar una tarea.
Eficiencia - Rendimiento de uso. Cuantos pasos y tiempo tardó.
Satisfacción - Emociones vinculadas al uso. Qué tanta satisfacción o

frustración sintió el usuario.
Métricas de los testeos:
Vamos a realizar 3 cuadros comparativos:

● Primero coloco los usuarios que realizarán la prueba de usabilidad:
Usuario 1, 2, 3, 4, 5 y Promedio.
● Coloco la lista de tareas a medir: Tarea A, B, C, D, E.
● Y luego voy a completar con: 1-Realizada con éxito / 0-No realizada con
éxito. (Eficacia)
● También voy a contar cuántos pasos tardaron en realizar la tarea con
éxito y en cuanto tiempo. (Eficiencia)
● Y por último, cuando finalizó el testeo, con un formulario de google les
voy a realizar una encuesta de satisfacción: del 1(muy sencillo) al
10(muy difícil) ¿Qué tan sencillo fue realizar la tarea principal de mi
proyecto? ¿Qué tan sencillo fue ubicar los elementos que buscabas?
Métrica NPS:
Net Promoter Score es una métrica elaborada por primera vez en 1993
por Fred Reichheld y posteriormente adoptada por Bain & Company y
Satmetrix en 2003 como una manera de pronosticar el
comportamiento de los clientes cuando realizan compras y
recomendaciones.
● NPS - ¿Recomendarías nuestra app a otras personas?
0 Muy poco probable - 10 Muy probable
Divide a los usuarios en Promotores, Pasivos y Retractores.
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 digitales (En fidelidad baja, clase 12)
● Wireframes con patrones de diseño (En fidelidad baja, clase 13)
Aclaraciones: Ahora que haremos el prototipo funcional pasaremos a una Fidelidad media, es decir,
continuamos en escala de grises, con pantallas diseñadas con los elementos dados en la clase 13, ya
tenemos las pantallas diseñadas para Android o IOS, con las medidas de uno de los modelos de
celular que ofrece Figma, con partes del texto específico de mi proyecto (lo que permita
comprender y ubicar al usuario en una prueba de usabilidad) y sin imágenes.
Ejemplos de entregas
COMPLETÓ LA TAREA CON ÉXITO
TAREA U1 U2 U3 U4 U5 PROMEDIO
Métricas de Registrarse
Acceder al buscador en la home
1
1
1
1
1
1
1
1
1
1
1
1
Eficiencia y Buscar psicólogo con filtros

Seleccionar uno de los resultados
1
1
1
1
1
1
1
1
1
1
1
1
Eficacia Reservar su primera sesión 1

TIEMPO
1 1 1 1 1
U1 Florencia Registrarse 01:23 00:35 01:10 00:25 00:50 00:53
U2 Félix Acceder al buscador en la home 01:00 00:20 01:00 00:15 00:45 00:40
U3 Graciela Buscar psicólogo con filtros 01:25 00:25 01:20 00:20 01:00 00:54
U4 Ezequiel Seleccionar uno de los resultados 00:50 00:15 00:40 00:10 00:35 00:30
U5 Adrián Reservar su primera sesión 01:00 00:20 00:55 00:10 00:55 00:40
PASOS
Registrarse 4 2 4 2 2 2,8
Acceder al buscador en la home 3 1 3 1 2 2
Buscar psicólogo con filtros 5 1 5 1 3 3
Seleccionar uno de los resultados 3 1 3 1 2 2
Reservar su primera sesión 3 2 3 2 3 2,6
Métricas de Satisfacción
La mayoría de los usuarios opinaron que:
● Fue muy sencillo acceder al buscador.
● Fue sencillo realizar la búsqueda de psicólogo.
● Fue muy sencillo elegir un psicólogo de los resultados
obtenidos de la búsqueda.
● Fue muy sencillo reservar la primera sesión con el
terapeuta.
● El 80% usuarios recomendarían esta app para la
búsqueda de psicólogo.
El 20% respondieron que tal vez la recomendarían.
Ningún usuario no la recomendaría.
Recordá:

Nos vemos pronto
DISEÑO UX/UI
Clase 15
Pruebas de Usabilidad
Prototipo Funcional Pruebas de Usabilidad Atomic Design
● Métricas UX ● Testeo con usuarios ● ¿Qué es el Atomic Design?

● Prototipo funcional ● Guía del Moderador ● Componentes y variantes
● Demostración en Figma ● Consejos para realizarla ● Composición
● Tarea para el Proyecto Final ● Guía del Observador ● Tarea para el Proyecto Final
● Planillas de Registro
Design Thinking
Wireframe Digital Pruebas de usabilidad
Prototipo Funcional
ITERAR
Pruebas de usabilidad
La prueba de usabilidad por parte del usuario es una técnica usada en
el diseño de interacciones centrado en el usuario para evaluar un
producto mediante pruebas con usuarios reales.
Esto puede ser visto como una práctica de usabilidad irreemplazable,

dado que entrega información directa de cómo los usuarios reales
utilizan el sistema.
Definición
La Norma ISO 9241-11 define usabilidad como “el grado en que un

producto puede ser utilizado por usuarios específicos para lograr los
objetivos específicos con efectividad, eficiencia y satisfacción en un
contexto de uso”.
¿En qué consisten estas pruebas?
Las pruebas de usabilidad consisten en seleccionar a un grupo de

usuarios y solicitarles que lleven a cabo las tareas para las cuales fue
diseñado el sistema, en tanto el equipo de diseño, desarrollo y otros
involucrados toman nota de la interacción, particularmente de los
errores y dificultades con las que se encuentran los usuarios.
No es necesario que se trate de una aplicación completamente

terminada, pudiendo tratarse de un prototipo.
¿Para qué sirven?
● Validar si los usuarios logran realizar tareas sobre un prototipo o

sistema.
● Detectar problemas de usabilidad (qué tan fácil es el uso de una
determinada interfaz).
¿Para qué no sirven?
● Definir cuál es la mejor versión de nuestro sistema (Test A/B).

● Definir con certeza los motivos de mal funcionamiento del
desarrollo.
● 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.
Evaluación heurística:
● La evaluación heurística es una variante de la inspección de usabilidad
donde los especialistas en usabilidad juzgan si cada elemento de la
interfaz de usuario sigue los principios de usabilidad establecidos.
● Un análisis heurístico se puede realizar en cualquier etapa avanzada del

proceso de diseño (Obviamente, no sería productivo hacerlo demasiado
pronto). Con los nuevos productos, un análisis heurístico suele realizarse más
tarde en la fase de diseño, después de hacer wireframes y prototipos, y antes
de que comience el diseño visual y el desarrollo de la interfaz de usuario.
Tipos de prueba:
● Pruebas de usabilidad remotas

● Pruebas de usabilidad presenciales
● Pruebas de usabilidad presenciales en contexto de uso
¿Cuántos usuarios necesitamos?
Una investigación (Virzi, 1992 y Nielsen Landauer, 1993) muestra que:

5 usuarios es suficiente para exponer el 80% de los problemas de
usabilidad.
La verdad es que el número real de usuarios necesarios depende de la
complejidad de la aplicación dada y de sus objetivos de usabilidad.
El aumento de los participantes en un prueba de usabilidad, da lugar a
un aumento de los costos, la planificación, la gestión de los
participantes y el análisis de datos.
Pero como pauta general, con un presupuesto chico, 5 es un buen
número para empezar.
¿Qué es lo mínimo que debemos tener presente al realizar las pruebas?
● Antes
○ Definir el objetivo de la prueba
○ Escribir el guión de la prueba: cuántas tareas y cómo se abordarán.
○ Usuarios: cantidad, quiénes, cómo los obtengo, cómo los contacto.
○ Prototipo: sitio web, app.
○ Roles: moderador, observador, usuario.
○ Tabla de evaluación: qué y cómo evaluaré cada tarea.
● Durante
○ Locación: remoto, presencial (en contexto de uso o no).
○ Registro: audio, video, fotografías, apuntes.
○ Evaluación: qué y cómo evaluaré cada tarea.
● Después
○ Cómo ordenar y priorizar los hallazgos.
○ Presentación de resultados.
○ Aplicación de mejoras
Pasos para realizar las pruebas de usabilidad:
1) Formular los objetivos

○ Los objetivos nos permiten evidenciar cuáles son los propósitos que esperamos
cumplir con una determinada prueba.
○ Es la primera actividad que debemos realizar. Con esto buscamos saber cuáles
son los flujos y tareas que deben ser puestas a prueba.
○ Con los objetivos definidos podemos definir escenarios, tareas y criterios de
evaluación.
2) Elegir a los usuarios

○ La muestra mínima es una definición que está vinculada a muchos factores
(presupuesto, tiempo, espacio, capacidad de análisis).
○ Podemos seguir la recomendación de realizar un test con solo 5 personas, lo que
nos entregaría el 80% de los errores de nuestro prototipo.
3) Escribir el Guión de la Prueba:
Todo proceso de evaluación debe contemplar un guión o pauta que ordene qué se
evalúa y en qué orden.
Esto nos permite estandarizar nuestra prueba de usabilidad y asegurar que el
orden y las instrucciones que son entregadas a los participantes sean las mismas,
evitando posibles sesgos.
Elementos a considerar:
● Introducción y firma de consentimiento informado, esto último, recomendado
en un contexto de investigación de mercado/científica).
● Preguntas previas.
● Tareas y el escenario hipotético.
● Preguntas posteriores.
● Cierre y agradecimiento.
3.A Escribir el guión de la prueba
● Introducción
○ Comenzar con un agradecimiento.
○ Introducir a lo que serán las pruebas de usabilidad.
○ Es el momento para hacer las aclaraciones necesarias (grabación de la conversación,
dudas, etc.).
○ Ejemplo para la app Buscador de Psicólogo: “Mi nombre es Irina y estamos haciendo el
diseño para una aplicación. Te agradecemos por participar. Te solicito permiso para
grabar tu interacción con el sistema.”
○ Importante que diga en voz alta lo que vaya haciendo/pensando.
○ Ejemplo: “A medida que vayas avanzando, te pedimos que vayas relatando lo que
vayas haciendo y pensando.”
○ Indicarle que no hay respuestas buenas o malas, correctas o incorrectas.
● Preguntas previas de validación
○ El objetivo es validar que son los usuarios que necesitamos (user personas).
Ejemplo: “Decime por favor tu nombre y edad. Comentame si podrías actualmente
afrontar una terapia y si alguna vez fuiste a terapia.”
3.B Escribir el guión de la prueba
● Tareas y escenario hipotético
○ Listado de tareas a realizar con un criterio claro para determinar el éxito/fracaso. Es importante
tener presente este criterio (cuál es el camino ideal o simple para completar la tarea).
○ Para pensar el listado de tareas podés utilizar como guía el MVP o lo que tengas diseñado
hasta el momento en tu sistema.
○ Ejemplo escenario hipotético: “Imaginate que te llamas Pilar, que terminás con tu pareja, te
sentís triste y pensás que tendrías que hablar de tus problemas con un profesional por lo que
necesitas encontrar un terapeuta, y encontrás en la Play Store una app que te puede ayudar.”
● Preguntas posteriores
○ Despejamos dudas nuestras o dudas del usuario que participó en la prueba.
○ Hacemos preguntas en cuanto a la satisfacción del usuario.
○ Para esto podemos enviarle un formulario de Google para que responda a nuestras preguntas
ahí. Ejemplo: métricas de satisfacción.
● Cierre y agradecimiento
○ Agradecemos y se le pregunta si lo podemos volver a contactar en caso de necesitarlo.
4) Evaluar las tareas realizadas
La evaluación de las tareas asignadas a los
usuarios deben considerar una tabla con
criterios específicos de evaluación con
una rúbrica clara y establecida según los
criterios de usabilidad definidos al
momento de diseñar la app.
La tabla de evaluación contempla los

criterios necesarios para dar por lograda o
no lograda una tarea y sus subtareas.
5) Análisis de resultados
Generar un informe con los resultados de las pruebas.
Con toda la información recolectada lo que debemos hacer es analizar y sintetizar para así
obtener cuales son los problemas de diseño y qué se puede hacer para mejorarlos y
obtener un mejor resultado.
Roles
● Moderador: un miembro activo de nuestro equipo. Debe hacer

sentir cómodos a los participantes. Poner a grabar luego de que el
usuario acepte. Asegurar la validez del estudio.
● Usuario: alguien que nunca haya escuchado hablar de nuestro
proyecto (neutral).
● Observador: un miembro pasivo de nuestro equipo. Asistente del
moderador. Debe registrar problemas que enfrentan los
participantes en el test, éxito/fracaso de cada tarea, cantidad de
pasos que demora en realizar cada tarea y tiempo de demora en
cada una. Puede registrar reacciones u otros comentarios
realizados durante la prueba. Al finalizar, comparte sus notas con el
equipo.
Durante la ejecución
● Antes de comenzar, permita despejar las dudas sobre la prueba.
● Entregarle el dispositivo mediante el cual ejecutará la prueba o bien el
link.
● Indicarle a la persona que deberá expresar verbalmente cada una de
sus acciones y pensamientos, mientras utiliza la interfaz.
● No decirle al usuario como continuar o que tocar cuando cometa
errores.
● Dejar fluir la interacción con el sistema.
● No agregar información o indicios, más allá de lo propuesto en el
guión.
● Prestar atención al detalle: reacciones verbales o no, comentarios,
preguntas realizadas, etc.
Ejercicio
Clase 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.”
Para continuar con el Proyecto Final que estamos desarrollando:
Realizar 5 Pruebas de Usabilidad con usuarios que se ajusten al perfil de tu proyecto (User
personas). Crear tres cuadros con los datos cuantitativos de las métricas de eficiencia,
eficacia y satisfacción (para la métrica de satisfacción usaremos Google form para crear un
formulario con las preguntas, y finalizadas las pruebas se las enviaremos a los usuarios.)
● Escenario Hipotético.
● Listado de tareas, Preguntas (para antes y después de las pruebas) Intro. y Cierre.
● Planillas de registro (usar una por usuario para tomar notas):
○ Nombre del usuario.
○ Criterio de éxito de la tarea que se puede verificar/observar. Ej: Reservar una sesión.
○ ¿Pudo realizar la tarea con éxito? Responder: 1: Sí / 0: No
○ ¿Cuántos pasos le tomó realizar la tarea? ¿Cuánto tiempo tardó?
○ Registro de problemas detectados. Observaciones.
● Informe de conclusiones (uno sobre todas las pruebas):
○ Qué funcionó, Qué no funcionó y Recomendaciones generales.
Proyecto Final
Fecha de la 2da Pre entrega:

Clase 26
Semana del 31 de Octubre
Ejemplo de entrega
TESTEOS
Testeo
Escenario hipotético
#1 Imaginate que te llamas Pilar, que terminas con tu pareja, te sentís triste y
necesitas hablar de tus problemas con un profesional. Así que necesitas
encontrar a un terapeuta y encontras en la Play store una app que te puede
ayudar.
Tareas
#2 1.
2.
Loguearse en la app
Registrarse
3. Acceder al buscador en la home
4. Buscar psicólogo con filtros
5. Seleccionar uno de los resultados
6. Reservar su primera sesión
#3
Objetivo
Indagar sobre el uso de la app para llevar adelante la búsqueda y reserva de
la 1ra sesión con un terapeuta.
COMPLETÓ LA TAREA CON ÉXITO
Métricas de Registrarse
Acceder al buscador en la home
1
1
1
1
1
1
1
1
1
1
1
1
Eficiencia y Buscar psicólogo con filtros

Seleccionar uno de los resultados
1
1
1
1
1
1
1
1
1
1
1
1
Eficacia Reservar su primera sesión 1

TIEMPO
1 1 1 1 1
U1 Florencia Registrarse 01:23 00:35 01:10 00:25 00:50 00:53
U2 Félix Acceder al buscador en la home 01:00 00:20 01:00 00:15 00:45 00:40
U3 Graciela Buscar psicólogo con filtros 01:25 00:25 01:20 00:20 01:00 00:54
U4 Ezequiel Seleccionar uno de los resultados 00:50 00:15 00:40 00:10 00:35 00:30
U5 Adrián Reservar su primera sesión 01:00 00:20 00:55 00:10 00:55 00:40
PASOS
Registrarse 4 2 4 2 2 2,8
Acceder al buscador en la home 3 1 3 1 2 2
Buscar psicólogo con filtros 5 1 5 1 3 3
Seleccionar uno de los resultados 3 1 3 1 2 2
Reservar su primera sesión 3 2 3 2 3 2,6
MÉTRICAS
de Satisfacción
Métricas de Satisfacción
La mayoría de los usuarios opinaron que:
● Fue muy sencillo acceder al buscador.
● Fue sencillo realizar la búsqueda de psicólogo.
● Fue muy sencillo elegir un psicólogo de los resultados
obtenidos de la búsqueda.
● Fue muy sencillo reservar la primera sesión con el
terapeuta.
● El 80% usuarios recomendarían esta app para la
búsqueda de psicólogo.
El 20% respondieron que tal vez la recomendarían.
Ningún usuario no la recomendaría.
CONCLUSIONES PRUEBA
DE USABILIDAD
Pendientes ordenados por prioridad
Si bien todos los usuarios pudieron completar las tareas, se deben revisar algunas
funcionalidades ya que resultan poco claras. A continuación, se listan los pendientes
ordenados de mayor a menor prioridad:
1. Resulta confuso el uso de los filtros. Se deberán revisar las opciones y considerar
incorporar algún texto que aclare las mismas. Prioridad: Alta
2. Corregir el error en el que desaparece el terapeuta seleccionado. Prioridad: Alta.
3. Resulta confuso el registro/ingreso. Agregar la opción de ingresar con Google y
darle funcionalidad. Prioridad: Media
4. Sería conveniente agregar una pantalla de confirmación del turno. Ejemplo: una
pantalla que diga “Ya reservaste tu turno”. Prioridad: Media
5. Utilizar notificaciones de algún tipo para recordar el turno. Prioridad: Baja
6. Incorporar un texto más ameno para el usuario. Prioridad: Baja
Recordá:

Nos vemos pronto
DISEÑO UX/UI
Clase 16
Atomic Design
Pruebas de Usabilidad Atomic Design Grillas
● ¿En qué consisten? ● ¿Qué es un sistema de ● ¿Qué es Diseño Modular?

● ¿Para qué sirven y cuándo diseño? ● ¿Qué es una grilla?
llevarlas a cabo? ● Atomic Design ● Grillas en UX/UI
● Tipos de prueba y pasos ● Resumen de los elementos ● Columnas, calles y
para realizarlas de Atomic Design márgenes
● Roles ● Componentes ● Grilla de cuadrícula
● Tarea para el Proyecto ● UI Kit ● Tarea para el Proyecto
Final ● Tarea para el Proyecto Final
Final
Design Thinking
Wireframe Digital
Atomic Design
¿Qué es un sistema de diseño?
El diseño web actualmente está siendo reemplazado por los:
sistemas de diseño, compuestos de una serie de elementos que no
importa si son utilizados en una app, web o la interfaz que se requiera,
ya que son adaptables.
Para optimizar tiempos los desarrolladores y diseñadores van a crear
interfaces con las mismas reglas, sistemas y elementos para que
funcionen en cualquier entorno.
Ya no se van a diseñar páginas específicas sino los elementos de la UI
o Interfaz de usuario.
Atomic Design
Brad Frost en su libro “Atomic Design” introduce una metodología

para crear y mantener sistemas de diseño efectivos.
Toma de la naturaleza la estructura de:
Átomos - Moléculas - Organismos
Link: https://bradfrost.com/blog/post/atomic-web-design/
Josh Duck es un desarrollador Web que se dedica a construir redes sociales y
sitios web de alto tráfico. Él es el creador de la tabla periódica de elementos
mínimos de html que luego actualizó a mobile.
Títulos
Texto lineal Tablas

Salto de línea
Contenedor
Etiqueta
Entrada de datos
Link Botón
Imagen
Todos ellos son:
Átomos
La unidad mínima, no se desglosan y por si solas no funcionan.
Son componentes simples y reutilizables, por Ej: barra de búsqueda.
Son complejos y reutilizables, por Ej: un encabezado.
Aclaración:
Los botones En Alta se llaman sistemas.
son átomos.
Los átomos, moléculas y organismos
juntos forman plantillas.
Resumen de los elementos de Atomic Design
● Átomos - Son elementos únicos que no se pueden desglosar o

separar.
● Moléculas - Grupos de átomos que forman componentes simples.
● Organismos - Grupos de moléculas que forman secciones
complejas.
● Plantillas/Templates - Grupos de organismos organizados en un
espacio.
● Páginas/Sistema - Es el diseño final con el contenido real.
Lo que estaría antes que el átomo, son los elementos de los estilos, como la paleta
de color, la grilla, las tipografías, los tamaños del texto, es decir “el estilo”.
Aclaración: un texto es un átomo, el estilo de ese texto es lo que forma a ese

átomo, sus características son los protones, electrones y neutrones.
Protones electrones y neutrones
ÁTOMOS
MOLÉCULAS
ORGANISMOS
PLANTILLA
PÁGINA
Componentes
Elementos de diseño flexibles, que ayudan a crear y mantener

elementos repetidos, mientras varias las instancias para diferentes
diseños y contextos.
Nos ayuda a diseñar más rápido, a ser consistentes entre pantallas,
crear instancias de los elementos, ser más eficientes en diseños
complejos.
● Componente maestro - Componente hijo o Instancia - Variante.
El componente maestro puede tener componentes hijos, entonces
cuando modifiquemos a los componentes maestros, van a cambiar
automáticamente los hijos donde sea que se encuentren aplicados.
Componentes anidados
Crear componentes en los tres niveles atómicos.
El icono solo
es un átomo.
Esto es un componente anidado

con su/s variante/s.
Toda la Barra de navegación (bar-nav) es un organismo.
El icono + el contenedor + el texto es una molécula.

Wireframe con Patrones
Wireframe Funcional
Wireframe Digital
Atomic Design
Sistemas en
Wireframe a Mano Fidelidad Alta
User Flow
Tema: Imágenes
Cuando estoy trabajando en un problema, nunca pienso en

su belleza. Solo pienso en cómo resolver el problema. Pero
cuando lo termino, si la solución no es bella, sé que está
equivocada.
Autor/as/es: Richard Buckminster Fuller

UI Kit
Con Atomic Design crearemos los elementos de UI o interfaz de

usuario.
En esta etapa quedarán definidos los elementos de nuestro UI kit.
Serán los elementos “finales” de mi prototipo.
A continuación veremos un ejemplo de cómo se presenta el UI Kit en

el caso del proyecto “autocosmos”:
Ejercicio
Clase 16
Ver los paso a paso en el
Anexo de la clase 16
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.
Ejemplo de entrega
Recordá:

Nos vemos pronto
DISEÑO UX/UI
Clase 17
Grillas y Estándares
Atomic Design Sistema de grillas Estándares y Guidelines
● ¿Qué es el Atomic Design? ● Resolución ● Leyes UX ( guías de estilo)

● Componentes y variantes ● Diseño modular ● Guidelines de Android y IOS
● Composición ● Aplicación de grillas ● Tarea para el Proyecto Final
Design Thinking
Wireframe Digital
Sistema de Grillas
¿Qué es Diseño modular?
El diseño modular es un enfoque donde se subdivide un sistema en
partes más pequeñas llamadas módulos, que pueden ser creadas
independientemente y luego utilizadas en diferentes sistemas.
Esta filosofía puede aplicarse en prácticamente todas las ramas del
diseño, aunque es adoptada especialmente en arquitectura y diseño
industrial.
En diseño web, la modularidad consiste en el uso de bloques
cuadrados o rectangulares, alineados a una grilla, para presentar
distintos tipos de contenido.
Diseño Web modular:
En los diseños modulares, la pantalla se divide horizontalmente en columnas de igual ancho y verticalmente
en filas de igual alto, opcionalmente con una separación (también de medida fija) entre ellas. Cada módulo,
bloque o widget de contenido tendrá un ancho equivalente a una o más columnas.
Esto tiene su origen en la aparición de los dispositivos móviles, dado que era mucho más complicado adaptar
una página web como unidad que ajustar los diferentes módulos a las dimensiones de cada dispositivo.
Y es que con el diseño web modular los elementos del diseño cambian su ubicación, se vuelven más pequeños
o incluso desaparecen, en función del tipo de dispositivo desde el cual esté accediendo el usuario.
Por otra parte, otra de las ventajas del diseño web modular es que posibilita un mayor dinamismo en el diseño
web, dado que los diseñadores web pueden modificar con mayor facilidad la posición de los elementos.
Asimismo, el diseño modular, conlleva a la reutilización, lo que significa que se pueden usar de manera
consecutiva un mayor número de elementos de diseño, como pueden ser las imágenes de las páginas,
optimizando el trabajo de los diseñadores.
Tan simple como jugar con legos:
¿Qué es una grilla?
Es un elemento sistémico, organizador y estructurante del espacio
gráfico.
Esto significa que la grilla, también llamada cuadrícula o retícula, es
básicamente una serie de líneas verticales y horizontales que dividen
una página en columnas, secciones y módulos, lo que permite a los
diseñadores administrar el espacio para poblarlo con diferentes
contenidos.
Origen de las grillas:
Históricamente las grillas están estrechamente relacionadas con el

nacimiento de la tipografía y por supuesto de la imprenta, pero
desde mucho antes se utilizaban en manuscritos para ordenar los
textos y que finalmente el “usuario” pudiera leer fácilmente.
Con la revolución industrial esto fue mucho más desarrollado, ya que el

proceso llevó a que fuera necesario comunicar muchos mensajes al
mismo tiempo sin hacer que estos compitan. Actualmente su uso
sigue vigente en muchas áreas del diseño, como: Diseño gráfico
editorial y en Diseño UX/UI.
¿Qué es el diseño editorial? Se ha definido como una rama del diseño que
busca la calidad en la narrativa visual en los textos y se presenta en medios
tales como periódicos, revistas, folletos, etc.
Siempre se debe tener en cuenta que la lectura sea fluida. La jerarquía es de lo más
importante, saber cómo guiar al lector dentro de la publicación hay que cuestionar
¿Qué quiero que lea primero?

Tema: Imágenes
El diseño editorial es el marco a través del que una historia

se lee e interpreta. Consiste tanto en la arquitectura global
de la publicación como en el tratamiento específico de la
historia…
Autor/as/es: Martin Venezky

Grillas en UX/UI:
Puede llegar a ser difícil imaginar una grilla en la diagramación de

productos digitales, ya que operan en múltiples dispositivos y
tamaños de pantalla, pero lo cierto es que las grillas llegan para
salvar nuestros diseños del desorden y el caos, ayudando al ojo
humano a seguir un ritmo, sostener la jerarquía del contenido y le
dicen a nuestro cerebro donde esperar que se encuentren los
elementos.
Crean consistencia incluso en el diseño responsivo entre
dispositivos de diferentes tamaños, contribuyendo a la proporción de
los elementos en una página y que finalmente todo siga una
estructura de lectura que agrade al ojo.
Grillas:
Mientras se desarrolla el proceso de prototipado debemos considerar la grilla.
La más popular actualmente está compuesta de 12 columnas (web) ya que
muchos frameworks de desarrollo web utilizan esta estructura, y porque el número
12 es fácil de dividir en espacios más pequeños como 9, 8, 6, 4, 3, 2, 1 (Mobile)
Es importante construir una grilla bien trabajada y que pueda desenvolverse bien
en múltiples dispositivos, con el fin de facilitar que todos los sistemas y flujos
conversen entre sí, no solo en tipografía, color y forma, sino también en el invisible
camino que sigue el ojo humano en la lectura.
Si miramos un diseño y sentimos que algo está raro, es posible que sea una grilla
mal trabajada o contenidos que se ubicaron mal en la estructura definida.
La importancia de lo invisible:
Es muy importante trabajar con atención el aire que se le da a los

contenidos ya que este no solo permite descansar la vista, sino que
da ritmo al contenido y sostiene la jerarquía que hayamos definido.
Prestar atención a los márgenes horizontales y a que todo en el

sistema de grilla debería tener el mismo aire y espaciado, por lo que
hay que prestar atención a la estructura que estamos construyendo.
No hay nada más incómodo y poco agradable a la vista que una

acumulación de elementos, donde no hay orden, sentido, ni
espacio para respirar.
Como se puede apreciar en las imágenes, los módulos se ordenan utilizando
la Grilla: las cajas de texto y fotografías empiezan y terminan dentro de las estructuras
formadas por las columnas y calles de la misma.
Siempre dejando
libres los márgenes.
Comprender el diseño
En el diseño se utilizan elementos y espacios uniformes para fomentar

la coherencia entre plataformas, entornos y tamaños de pantalla.
Las áreas de diseño son la base de las

experiencias interactivas. Son los
bloques de construcción de un diseño y
están compuestos por elementos y
componentes que comparten una
función similar.
Las áreas de diseño también pueden
agrupar contenedores más pequeños.
1 Encabezado 2 Navegación 3 Cuerpo
Body y Menú
La región del BODY se utiliza para mostrar la
mayor parte del contenido de una aplicación.
Por lo general, contiene componentes como

listas, tarjetas, botones e imágenes.
La región del BODY utiliza valores de escala para

tres parámetros:
1. Dimensiones verticales y horizontales

2. Número de columnas
3. Márgenes.
El menú de navegación contiene componentes y

elementos de navegación, como el cajón de navegación
o el riel de navegación.
Ayuda a los usuarios a navegar entre destinos en una

Ejemplo de Body y Menú aplicación o acceder a acciones importantes.
Columnas, calles y márgenes
Las columnas nos sirven para colocar áreas
que luego pueden ser imágenes, videos o
textos según la necesidad de nuestros
elementos con los que se deba trabajar.
Esto puede ir dependiendo según nuestra

piezas a diseñar.
Vamos a ver distintas aplicaciones con

algunos ejemplos.
1 Columna 2 Calles 3 Márgenes
Columnas
En el diseño se utilizan elementos y espacios uniformes para fomentar la coherencia entre

plataformas, entornos y tamaños de pantalla.
Columnas
Las calles es el espacio entre columnas que ayuda a separar el contenido. Los anchos de las calles
son valores fijos en cada rango de punto de corte. Para adaptarse mejor a un tamaño de pantalla
dado, los anchos pueden cambiar según nuestra propuesta de diseño.
Márgenes
Los márgenes son el espacio entre el
contenido y los bordes izquierdo y derecho
de la pantalla. Los anchos de margen se
definen según el patrón de diseño.
Los márgenes nos ayudan a dar la

sensación de equilibrio visual ya que si
pegamos los elementos al borde es lo que
se suele decir que el diseño se cae, como si
estuviera saliendo de la pantalla y dificulta
la lectura a los usuarios.
Sobre las calles
En este ejemplo podemos ver como las calles son

el soporte de las columnas y las distintas áreas
donde luego podemos ubicar los elementos con Veamos una distancia adecuada de las calles para
los que vamos a trabajar. que las áreas tomen posición en el marco general.
Sobre las calles
Vemos un mal uso de las calles donde es casi de la Márgenes y calles vemos que no tienen la
misma medida la calle que las columnas misma medida y mantiene el criterio de
separando los elementos y quitándole
protagonismo a los elementos.
diseño.
Grilla, Calles y Márgenes Horizontales
El planteo de la grilla en horizontal sigue Las cuadrículas horizontales se pueden colocar para
adaptarse a diferentes alturas, dejando espacio para las
los mismos parámetros que de manera barras de aplicaciones u otras regiones de la interfaz de
vertical 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 distintos tipos de maquetación y grilla
Ejemplos de maquetación y grilla en APP
Ejemplos de maquetación y grilla en APP
Prototipos
Prototipos
Prototipos
Creando grillas
paso a paso
Luego de crear un nuevo frame
con el tamaño del dispositivo
correcto, agregamos una Layout
grid
Cambiamos su tamaño y color si
lo deseamos
Cambiamos a Columns y
colocamos de 1 - 4 columnas
Cambiamos los valores de los
márgenes y las calles
En este paso podemos crear un
sistema de grillas, para poder usar
nuevamente la grilla creada en
próximas pantallas.
Cuando aparece en las opciones
significa que todo fue creado
correctamente.
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.
Recordá:

Nos vemos pronto
DISEÑO UX/UI
Clase 18
Estándares y Guidelines
Sistema de grillas Estándares y Guidelines Figma
● Resolución ● Leyes UX ( guías de estilo) ● La plataforma

● Diseño modular ● Guidelines de Android y ● Principios básicos
● Aplicación de grillas IOS ● Comunidad en Figma
● Tarea para el Proyecto ● Tarea para el Proyecto ● Exportar e importar
Final Final archivos
● Componentes y variables
● Auto-Layout
● Prototipado funcional
Leyes UX Mi-Fi Visual y Contenido
Guidelines de diseño
Design Thinking
Wireframe Digital
¿Qué son las leyes UX?
Las Leyes UX son una recopilación de leyes o normas que los
diseñadores deben tener en cuenta a la hora de pensar y mejorar la
experiencia de usuario.
Están basadas en principios psicológicos y neurocientíficos;
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 Parkinson

● Ley de Hick ● Efecto de Von Restorff
● Ley de Tesler ● Principio de Pareto
● Ley de Proximidad ● Efecto de Usabilidad Estética
● Efecto de Posición Serial ● Efecto Zeigarnik
● Ley de Fitt ● Ley de Miller
● Ley de Jakob Nielsen
Ley de
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é.
Guidelines:
Las Guidelines se dividen en varios grupos, incluidos estos:
Estilo: por ejemplo, logotipos de marca, colores.
Diseño: por ejemplo, cuadrícula o estructura de lista
Componentes de la interfaz de usuario (UI): por ejemplo, menús, botones
Texto: por ejemplo, fuente, tono, etiquetas/campos
Accesibilidad: que sea accesible para usuarios con alguna discapacidad
Patrones de diseño: por ejemplo, formularios

¿Para qué se utilizan?
Las marcas tienen Guidelines para que los diseñadores adapten los 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-u
sability/
Tema: Gidelines
Aprende las reglas como un profesional, para que puedas

romperlas como un artista
Autor/as/es: Pablo Picasso

https://material.io
https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/
Android - Google - Material Design
IOS - Apple - The Human Interface
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.
Ejemplo
UI Style Guide (Android)
Guía de estilos
Ejemplos de estudiantes
Recordá:

Nos vemos pronto
DISEÑO UX/UI
Clase 19
Práctica Figma
Estándares y Guidelines Figma Illustrator y Moodboard
● Leyes UX ( guías de estilo) ● La plataforma ● Repaso de mapa de bits

● Guidelines ● Principios básicos ● Illustrator
● Android y IOS ● Comunidad en Figma ● Trabajo con vectores
● Tarea para el Proyecto Final ● Exportar e importar ● Moodboard
archivos ● Armado de moodboard
● Componentes y variables
● Auto-Layout
La plataforma
Figma es una herramienta para crear Prototipos, que también nos
permite editar gráficos vectoriales.
La misma cuenta con su versión desktop app, web app y mobile app,
aunque esta última únicamente permite visualizar y probar Prototipos
pero no trabajar en ella.
Crear archivos
1) Seleccionamos “Drafts” → “Design 2) Se nos abrirá una mesa de

file” o directamente “New design file” trabajo llamada “Drafts / Untitled”
Crear archivos - ¿Cómo volvemos al inicio?
● Desde la desktop app: ● Desde la web app:
clickeamos el ícono de “Figma” y clickeamos el ícono “Home” y se nos
seleccionamos “Back to files” cambia de pestaña.
Crear archivos - ¿Cómo volvemos al archivo?
● En “Recents” se encuentran todos los ● En “Drafts” se encuentran todos los
archivos que alguna vez abrimos, archivos que nosotros creamos o que
sean nuestros o no. duplicamos.
Mesa de trabajo
Barra de herramientas y navegación
Panel de Opciones de
capas herramientas
Mesa de trabajo
Personalizar archivos - Renombrar
Para nombrar un archivo debemos seguir
los siguientes pasos:
1. Clickeamos “Untitled”
2. Escribimos el nombre que deseamos

para nuestro archivo
3. Damos “Enter” o clickeamos sobre la

mesa de trabajo y listo.
Personalizar archivos - Páginas
Un archivo de Figma puede contener muchas páginas con diferente contenido dentro de
cada una de ellas. Por defecto, siempre que creemos un archivo, nos ubicaremos en una
página llamada “Page 1”. Podemos renombrar la página donde estamos clickeando “Page 1”
Si trabajamos de forma privada (dentro de Drafts), podemos crear infinita cantidad de

páginas. Si trabajamos de forma colaborativa (dentro de Teams), podemos crear hasta 3
páginas dentro de un archivo de forma gratuita.
Personalizar archivos - Páginas
● Para poder crear páginas nuevas, clickeamos el ícono “+” y repetimos el proceso de
renombrar. Las páginas nuevas se ubicarán debajo de nuestra página original, pero
podemos arrastrarlas para subirlas o bajarlas en el orden que deseemos.
● En el modo privado de Figma (Drafts) podemos tener infinita cantidad de páginas
dentro de nuestro archivo. Si creamos el archivo en grupo de trabajo (Teams)
podremos tener solo 3 páginas y solo 3 archivos máximo de forma gratuita.
● Dando click derecho a cada página, podemos duplicarlas, eliminarlas, copiar un
vínculo directo a dicha página y también renombrarlas.
Personalizar archivos
Principios básicos
Entre las distintas herramientas que encontramos en este editor están
aquellas para modificar textos y elementos con los que estaremos
trabajando.
Pero primero, para comenzar a prototipar necesitamos:

crear nuestros frames.
Frames
Podemos crear “frames” o “pantallas/marcos” imitando el tamaño de

un celular de dos maneras:
● Forma manual
● Forma automática
Forma manual
Clickeamos el dropdown de la Presionamos el mouse y

sección “Frame” (el numeral) y creamos nuestro frame a Cambiamos el
seleccionamos “Frame” o gusto. tamaño.
presionamos la tecla F.
Forma automática
Clickeamos el ícono de
la sección “Frame”. En
las opciones de
herramientas, elegimos
el diseño y el tamaño.
El frame se crea
automáticamente.
Frames
Duplicar
Todo lo que creemos, desde frames hasta
incluso elementos, puede duplicarse de 3
formas distintas:
● Ctrl C + Ctrl V (copiar y pegar manual)
● Seleccionar elemento, mantener ALT

presionado y arrastrar la copia
● Presionando Ctrl + D siempre que

hayamos duplicado con ALT
previamente.
Ordenar
Desde las opciones de herramienta, siempre que tengamos seleccionado un grupo de
elementos podremos ordenarlos a nuestro gusto.
Textos
Textos
Fuente (Tipografía)
Decoración
Peso
Tamaño
Sangrías
Espacio entre líneas
Listados Interletrado
Espacio entre párrafos

Grafía (mayúsculas
Posición
y minúsculas)
Contenedor
Y más opciones Alineación del texto
Más opciones
Elementos
Tamaño (píxeles)
● Clickeamos el dropdown de la
sección “Elementos”
● Elegimos el diseño (incluso Posición y
podemos importar imágenes y Redondeado
vectores)
● El frame se crea automáticamente Fusión y
Transparencia
Color y
transparencia del
color
Borde
(grosor, estilo,
transparencia y
demás)
Comunidad
En Figma hay una sección llamada Community donde podemos
encontrar muchos archivos y Plugins útiles compartidos para que
podamos usarlos en nuestros diseños.
Veamos cómo acceder a esta sección:
Archivos
Desde la Home, clickeamos la sección “Community”. Allí podemos escribir en el
buscador para encontrar desde diseños hasta componentes, plugins y mucho más.
Archivos
Seleccionamos cualquier archivo y,
luego de la carga, podemos incluso
ver lo que contiene.
Si decidimos tenerlo en nuestro

dashboard, podemos duplicar el
archivo.
Esto genera una copia de la cual

nosotros seremos los dueños.
Podremos editar todo a nuestro
gusto.
Plugins
Los plugins nos ayudan a agilizar
nuestro diseño. Podemos buscarlos
en la comunidad, seleccionar la
pestaña “Plugins” e instalarlos.
Plugins
Otra manera de trabajar con Plugins si ya nos encontramos en la Mesa de Trabajo de un
archivo de Figma, es seleccionar “Resources” en la barra de herramientas (o presionando
Shift+I) y buscarlos e instalarlos desde la pestaña “Plugins”
Plugins
Una vez instalados, damos click derecho a
nuestra mesa de trabajo, seleccionamos
“Plugins → Nombre de nuestro plugin” y
podemos comenzar a utilizarlo.
Plugins más usados
● Iconify: Librería de íconos

● Unsplash: Librería de imágenes
● Autoflow: Flechas que interconectan elementos automáticamente
● Figit: Librería de elementos UI
● Colorblind: Chequeo de usabilidad del color para daltónicos
● Blush: Librería de ilustraciones
● Beautiful Shadows: Creador de sombras ajustando la fuente de luz
Plugins más usados
● Mapsicle: Librería de mapas

● Blobs: Creador de figuras estilo globo
● Dot Grid: Creador de grillas punteadas
● Confetti: Multiplicador de elementos para imitar confetti
● Icon Resizer: Permite unificar criterios de tamaños de íconos y
frames contenedores
● Better logos: Librería de logos vectorizados de múltiples marcas
Archivos
Así como podemos crear un archivo nuevo, en Figma también
podemos importar un archivo que tengamos descargado.
También podemos exportar archivos en los que estuvimos trabajando
y exportar nuestros Assets.
Exportar
Para guardar un archivo Figma en nuestra
computadora personal, debemos realizar
el recorrido:
“Figma → File → Save local copy…”.
Al completar la acción, se nos pregunta

dónde queremos guardar el archivo.
Exportar Assets
Si queremos exportar algún componente o capa específica, debemos seleccionarlo e ir a
“Export” que se encuentra en las opciones de herramientas (abajo a la derecha).
Ahí podremos seleccionar el tamaño y el formato en el que deseamos exportar.
Importar
Para abrir un
archivo Figma que
tenemos en
nuestra pc, vamos
a seleccionar
“Import File”,
elegimos el
archivo y
esperamos la
carga. Al terminar,
tendremos el
archivo en “Drafts”
Atajos
En Figma, al igual que en muchos otros Softwares, tenemos la
posibilidad de realizar diferentes acciones a través varios atajos desde el
teclado para agilizar el proceso de diseño.
Veamos los atajos que más se utilizan:
Atajos más comunes
F: Crear frame H: Mover mesa de trabajo
R: Crear Rectángulo V: Mover/Modificar elementos
O: Crear Círculo K: Mover/Modificar elementos

escalados
L: Crear Líneas
Crtl + C: Copiar
Shift + L: Crear Flechas
Ctrl + V: Pegar
T: Crear Texto
Ctrl + D: Duplicar (previamente
P: Crear Vectores
duplicado con Alt)
C: Agregar Comentarios
Ctrl + R: Renombrar
Atajos más comunes
Ctrl + A: Aplicar auto-layout Shift + 1: Encajar todo en la pantalla
Ctrl + G: Agrupar Shift + 2: Zoom al elemento

seleccionado
Ctrl + Alt + G: Aplicar frame
Shift + 3: Cambiar de páginas
Shift + Ctrl + R: Desagrupar
Shift + R: Aplicar regla a la mesa de
+ : Acercar
trabajo
- : Alejar
Alt + Ctrl + C: Copiar propiedades
Alt + Ctrl + V: Pegar propiedades

Componentes
Una vez que comenzamos a trabajar con Atomic Design, se vuelve
necesario empezar a crear nuestros componentes padres para poder
luego trabajar en nuestras pantallas con los componentes hijos.
Componentes
Cuando tenemos nuestro elemento terminado,
podemos transformarlo en componente con:
Click derecho → Crear Componente / Ctrl + Alt + K /
Clickeando el ícono Componente (arriba en el rombo)
Un componente se verá en el panel de capas con un

rombo compuesto en violeta. Todas las copias que
hagamos de él serán sus “hijos” (imitarán todas sus
propiedades) y se representan con un rombo lineal en
violeta en el panel de capas
Componentes
Cualquier cambio que hagamos al Componente Padre lo imitarán los componentes hijos.
IMPORTANTE:
Nunca utilizar el
componente
padre en nuestro
diseño
Información útil
Si por algún motivo decidimos modificar manualmente a un componente hijo en alguna
de sus propiedades, este dejará de ligarse a su padre.
Podemos restablecer la conexión dando “Click derecho → Reset all Changes”.
Información útil
Si por algún motivo no
encontramos al
componente padre,
podemos ubicarlo a
través de cualquiera de
sus hijos haciendo:
“Click derecho →
Go to main component”.
Información útil
Otra manera de encontrar
al componente padre si lo
perdemos es ir a:
“Assets → Local
Components” y allí nos
aparecerán todos los
componentes padres que
tenemos creados
Variantes
Nuestros componentes
pueden ser parte de una
familia con variantes.
Para crearlos, tenemos
diversas formas:
Variantes
Podemos aplicar propiedades a nuestras variantes para poder ubicarlas fácilmente.
Variantes
Creamos hijos y aplicamos las propiedades que deseemos para nuestro diseño.
Assets
Podemos utilizar:
librería de
componentes
para ubicarlos
rápidamente.
Si tenemos
componentes
relacionados
(no variantes)
dentro de un
frame, nos
permitirá
seleccionarlos y
cambiarlos entre
ellos.
Auto-Layout
Es una herramienta muy útil que nos permite dar estructura a los
distintos componentes de manera que automáticamente el contenido
se adapte al tamaño de un contenedor o al revés. También nos permite
automatizar el espaciado entre varios elementos dentro de un
contenedor.
Cómo crear un Auto-Layout
Podemos crear Auto-layouts de 2 maneras diferentes:
1. Shift + A en la selección
2. Click derecho → Add Auto-Layout
Al aplicarlo, aparece en
nuestras opciones de
herramienta todo lo que
podemos editar con
nuestro Auto-Layout
Opciones de Herramientas
Orientación del auto-layout
Distancia / Espaciado
entre los elementos
dentro de un Posición del contenido
auto-layout
Márgenes o “padding”
(Ahora podemos tener
márgenes negativos -
Tipo de espaciado sobreponer elementos)
(Fijo y Ocupar contenido)
Incluir el marco en el
auto-layout
Cuando sobreponemos
elementos, cuál es el que
queda por encima.
Auto Layout - Paso a Paso
Seleccionamos todos los elementos que

queremos que formen parte del Auto-Layout y
lo aplicamos (Shift + A)
Decidimos la
alineación y el
posicionamiento de
nuestros elementos
Auto Layout - Paso a Paso
Definimos el diseño de nuestro
elemento paso a paso:
● Añadir Auto-Layout
● Distancia entre elementos
● Márgenes
● Relleno / Color
● Líneas / Grosor / Color
● Redondeo de puntas
* No es necesario que se realicen todos

los pasos y en este orden, solo los que
se necesiten para el diseño
Edición de Auto-Layouts
Con la nueva
actualización de
Figma, podemos
editar nuestro
auto-layout
directamente desde la
mesa de trabajo
Nuevas funcionalidades
Con la nueva actualización de Figma, podemos También podemos crear márgenes negativos y
editar nuestro auto-layout directamente desde la apilarlos a nuestro gusto
mesa de trabajo
Auto-Layout responsivo
Si queremos que nuestro diseño sea responsive, debemos lograr que crezca según el contenido.
Para ello utilizamos la opción “Fill Container” en lugar de “Fix” o “Hug Content” en el elemento
que debería aumentar de tamaño según el contenedor en que se encuentre.
Prototipado funcional
Una vez que tengamos listo el diseño de nuestro Prototipo con
Patrones, empezaremos a incluir las interacciones para que el
mismo sea funcional.
Prototype
Seleccionamos la pantalla en la que

queremos empezar a trabajar y vamos a
las opciones de herramientas y
seleccionamos la pestaña “Prototype”.
Enlazando elementos y/o pantallas
Hacemos click sobre el elemento
o pantalla que queremos enlazar
y se mostrará un nodo como
círculo blanco.
Al seleccionarlo aparecerá una

flecha mientras arrastramos
hacia el elemento o la pantalla
que queremos que se conecte.
Se nos abrirán los detalles de

interacción.
Detalles de interacción
Entre los detalles de interacción
podremos elegir el disparador, la
acción y la animación.
Probando el Prototipo Funcional
Para probar el
Prototipo
Funcional,
hacemos click
en “Present”
que tiene el
ícono Play.
En “Options”
podemos
adaptarlo al
tamaño de la
pantalla.
Recordá:

Nos vemos pronto
DISEÑO UX/UI
Clase 20
Illustrator y Moodboard
Figma Illustrator y Moodboard Color en el diseño
● La plataforma ● Repaso de mapa de bits ● Principios básicos

● Principios básicos ● Illustrator ● Psicología del color
● Comunidad en Figma ● Trabajo con vectores ● Esquemas y paletas de colores
● Exportar e importar archivos ● Moodboard ● Herramientas
● Componentes y variables ● Armado de moodboard ● Tarea para el Proyecto Final
● Auto-Layout ● Tarea para el Proyecto Final
Repaso:
¿Qué es un mapa de bits? y ¿Cómo se diferencia de un gráfico
vectorial?
Veremos el siguiente ejemplo:

¿Parecen iguales cierto?

Píxeles Vectores
No son iguales.
Cuando ampliamos la imagen podemos notar la diferencia.


“píxele”.

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

lenguaje gráfico contemporáneo mediante el dibujo vectorial.
Es conocido mundialmente.
Nos referiremos a este software como: Illustrator o Ai.

Illustrator:
● Adobe Illustrator es la aplicación de diseño estándar del sector que

te permite plasmar tu visión creativa con formas, colores, y
tipografías.
● Permite crear logotipos, iconos, dibujos, tipografías e
ilustraciones complejas para cualquier medio: impresos, en webs
y apps, para vídeos y animaciones, etc.
● Su función primordial es la creación de material
gráfico-ilustrativo altamente profesional basándose para ello en
la producción de objetos matemáticos denominados vectores.
● La extensión de sus archivos es .AI
Interfaz de Ai:
Al ejecutar el programa podemos observar la interfaz de Illustrator:
Cuando arranca la aplicación, lo primero que encontramos es la pantalla de bienvenida, que nos permite elegir
entre Abrir un archivo existente o Crear un nuevo documento.
Si lo que queremos es crear un nuevo documento, podremos elegir uno de los perfiles predefinidos según lo
que queramos obtener. Estos perfiles se diferencian en valores preestablecidos para el tamaño, el modo de color,
las unidades, la orientación, la transparencia y la resolución.
En este punto, es importante definir si trabajaremos en un archivo cuya publicación será para web, video,
móvil, presentación o si será un archivo imprimible.
En cada caso, podremos definir las medidas del escritorio (píxeles, centímetros, milímetros, etc)
como también corresponde establecer un modo de color:
● CMYK (cian, magenta, amarillo y negro) son los 4 colores con cuyas mezclas aditivas se obtienen los colores
en impresión off-set o láser.
● RGB (red, green, blue) son los colores del espectro de pantalla.
Captura de pantalla del software Adobe Illustrator 2020.
Tutoriales
Perfiles
predefinidos
Archivos abiertos recientemente
Captura de pantalla del software Adobe Illustrator CS5 2010
Captura de pantalla del software Adobe Illustrator 2020.
Barra de Menú:
● Menú Archivo: aquí encontramos los típicos comandos, como abrir, cerrar, guardar, importar, exportar, nuevo,
etcétera. Este menú es muy similar al de cualquier otro programa, sea o no de diseño. Desde aquí podemos crear un
nuevo documento.
● Menú Edición: se encuentran los comandos que permiten copiar, cortar, pegar, deshacer y rehacer. También se
encuentran los comandos de transformación y opciones, personalización y preferencias del programa.
● Menú Objeto: todos los elementos son llamados objetos y se crean a partir de trazados elementales. Estos pueden
editarse, cambiar sus propiedades, por ejemplo expandirse.
● Menú Texto: Para crear una línea de texto, columnas, filas, que adopte una forma o que siga un trazado. Edición de
textos, párrafos, tipografías. Utilizar letras como objetos y editar su forma.
● Menú seleccionar: Permite seleccionar y deseleccionar objetos. Todos los elementos juntos, o algunos que comparten
algún atributo.
● Menú Efecto: Encontramos posibilidades de efectos que se le pueden aplicar a los trazados. Los efectos se muestran en
el panel apariencia.
● Menú Ver: desde él podemos controlar los elementos que se muestran en pantalla. Previsualización, reglas y
cuadrículas.
● Menú Ventana: aquí podemos hacer visible u ocultar cualquier panel de herramientas, personalizar el espacio de
trabajo y organizar los documentos abiertos.
● Menú Ayuda: para acceder a la ayuda del programa y también los datos relacionados con la cuenta de usuario y toda la
documentación pertinente al programa y la versión utilizada.
Barra de herramientas:
● En el costado izquierdo de la
pantalla estándar de Illustrator,
ubicamos la barra de
herramientas.
Dichas herramientas están

organizadas por categorías.
También podemos acceder a las

diferentes herramientas mediante
atajos de teclado.
● Veremos todas las herramientas

en la siguiente imágen:
Distribución de Herramientas:
Un elemento fundamental para empezar a utilizar Illustrator es conocer las herramientas que tu
mesa de trabajo tiene.
Las herramientas de la mesa de trabajo son: la barra de herramientas, el menú, la paleta de

control, la barra de estado y la paleta de colores.
Tenemos la barra o panel que se dividen en:
● Las herramientas de selección: como selección directa, varita mágica, lazo, borrador y mesa de
trabajo;
● Las de dibujo como: pluma, segmento de línea, rectángulo y lápiz;
● Las de texto: para agregar palabras;
● Las de pintura: como pincel, pincel de manchas, malla, cuentagotas y degradado;
● Las de reformar: como escala, rotar, anchura, reformar, transformación libre, perspectiva y
mezcla;
● Y por último herramientas como: rociar símbolo, para ingresar símbolos predeterminados,
gráfica de columnas, sector y corte, y de movimiento y zoom como mano y zoom.
Pueden expandir algunas herramientas
con el fin de ver las que contiene ocultas.
Un triángulo pequeño en el lateral inferior
derecho del icono de herramienta indica la
presencia de herramientas ocultas.
Para ver información sobre una

herramienta basta con colocar el
puntero sobre ella. En la información de
herramientas que se muestra debajo del
puntero aparece el nombre de la
herramienta.
Atajos:
El programa tiene una serie de atajos en el teclado
que ayudan a trabajar con más rapidez:
● L= Lazo
● A= Selección directa ● Z= Zoom
● Q= Lazo ● V= Selección
● R= Rotación ● P= Pluma
● T= Herramienta de texto ● B= Pincel
● H= Mano
● Y= Varita mágica
● U= Malla
● I= Cuentagotas ● CTRL+R= mostrar/ocultar reglas
● O= Reflejar ● Ctrl + Z= Deshacer
● S= Escalar ● Ctrl + X= Cortar
● G= Degradado ● Ctrl + C= Copiar
● H= Mover ● Ctrl + V= Pegar
● J= Gráficos ● ALT + desplazar= duplicar objetos
● K= Pintura interactiva ● CTRL + G= agrupar, entre otros
● G= Degradado ● SHIFT + clic= seleccionar varios
Atajos
Pluma:
● La herramienta Pluma de Illustrator, en simples palabras, es una
función del programa que te permitirá trazar líneas en la mesa de
trabajo, con mucha facilidad y precisión, fundamentales para iniciar
cualquier tarea de edición.
● El tipo de trazado más sencillo que se puede dibujar con la herramienta
Pluma es una línea recta, que se crea haciendo clic con la pluma para
crear dos puntos de ancla. Si se sigue haciendo clic, se crea un trazado
compuesto de segmentos rectilíneos conectados por puntos de vértice.
● Puede crear una curva añadiendo un punto de ancla donde la curva
cambie de dirección y arrastrando las líneas de dirección que formen la
curva. La longitud y la pendiente de las líneas de dirección determinan
la forma de la curva.
Pluma
Pluma:
Las curvas son fáciles de modificar y se pueden visualizar e imprimir más rápido si se las
dibuja utilizando los menos puntos de ancla posibles. Usar demasiados puntos puede
también introducir protuberancias no deseadas en una curva. En su lugar, dibuje puntos
de ancla bien espaciados y practique la formación de curvas ajustando la longitud y los
ángulos de las líneas de dirección.
A continuación vamos a seguir los pasos para lograr una curva:

Pluma:
1. Seleccione la herramienta Pluma.
2. Sitúe la herramienta Pluma donde desee que empiece la curva y mantenga pulsado el botón del ratón.
3. Aparece el primer punto de ancla y el puntero de la herramienta Pluma se convierte en una punta de flecha.
4. Arrastre para definir la inclinación del segmento curvo que está creando y suelte el botón del ratón.
5. En general, extienda la línea de dirección alrededor de un tercio de la distancia al siguiente punto de ancla que planea
dibujar. (Más adelante, puede ajustar uno o ambos lados de la línea de dirección.)
6. Mantenga pulsada la tecla Mayús para limitar la herramienta a múltiplos de 45°.
7. 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.
Moodboard:
El moodboard es una herramienta visual que puede ser física o digital.
No es un sencillo collage bonito, es un collage hecho con intención, con estrategia y

como síntesis de tus ideas.
No hay una sóla manera de hacer un moodboard ni existe un sólo tipo de moodboard. A lo
largo de un proyecto, puedes necesitar varios de estos visuales a medida que vayas
concretizando lo que quieres.
No son algunas imágenes bonitas, es mucho más que eso, es la expresión en una sola
imagen (collage de muchas imágenes en una sola composición) de una idea, de un
concepto, de una tendencia, de un proyecto…
Puede llegar a ser una asociación de varias ideas para llevarnos a una nueva idea o a un
nuevo concepto. Jugar con tus ideas, con estilos, con colores, con temas varios puede
llevarte a una conclusión diferente y a un nuevo concepto.
El moodboard nos permite:
● Aclarar nuestras ideas

● Bajar al papel (o a la pantalla) nuestra inspiración
● Expresar nuestra creatividad
● Descubrir nuestro estilo y definir una mezcla de estilos
● Comunicar nuestras ideas
A veces, queremos explicar a alguien el proyecto que tenemos en
mente pero a veces también, necesitamos para nosotras mismas tener
una hoja de ruta, tener una "foto" del proyecto.
Crear un moodboard como herramienta nos ayudará a no perdernos
ni a perder el norte mientras avanza el proyecto.
¿Cómo hacer un Moodboard?
1. PALABRAS CLAVES Y TÍTULO - Elegí 3 palabras claves que transmitan lo que quieres sentir,
palabras que definen tu proyecto. Escribe también un título para tu moodboard: nombre del
proyecto (no utilices tus palabras clave en el título).
2. RECOPILAR IMÁGENES - Ve recopilando muchas imágenes de texturas, objetos, materiales,

personas, emociones, acciones, etc. Todos estos elementos te ayudarán a transmitir aquello que
deseas plasmar. Recopilar imágenes debe resultar muy agradable, casi mágico, intentar sentir la
inspiración. Las palabras claves te ayudarán a no perderte y centrarte en lo importante.
3. FILTRANDO, ELIGIENDO Y COMPONIENDO - En Ai irás moviendo los elementos para quedarse

con los que más te gustan, lo que más te inspira y lo que más expresa tu concepto. Cuando lo
tengas claro, podrás ir fijando las imágenes correctamente en tu moodboard. No intentes rellenar
todo el espacio, deja respirar los elementos, juega con la simetría o la asimetría, con la armonía o el
caos. No dudes en mirar muchos ejemplos pero también ten en cuenta que las características de tu
proyecto se pueden ver reflejadas en el "layout" (digamos en la estructura) de tu moodboard. Ya
tenés listo el moodboard de tu proyecto para exportar como imagen.
Crear un Moodboard en Ai con imágenes que hablan solas (sin textos o narraciones) sobre el
proyecto y temática que abarca. Tener en cuenta para armarlo y seleccionar las imágenes, las tres
palabras clave que representen y guíen la estética del proyecto, (los valores y el alma del proyecto.)
Puede incluir imágenes de:
● Emociones que provoca en las personas.

● Acciones relacionadas.
● Colores que generan la sensación que ustedes quieran generar con su app.
● Texturas relacionadas a la temática.
● Elementos relacionados a la temática.
● App que utilizan como modelo o inspiración, o alguna que es como esperan que luzcan al
finalizar el curso en fidelidad alta.
Aclarar cuáles fueron las tres palabras clave fuera del moodboard.
Ejemplo de entrega:
APP DE ENCUESTAS, SEGUIMIENTO
Y GESTIÓN DE RESULTADOS
Objetivo: Ofrecer a empresas, bancos y proveedores de servicios

básicos, un medio para entrevistar a sus clientes y empleados. Además,
realizar un seguimiento de las encuestas y llevar un registro de sus
resultados. A través de esta app, buscan adquirir feedback
y mejorar sus servicios.
MOODBOARD
Disparadores
TECNOLOGÍA
FEEDBACK
EXPERIENCIA
Recordá:

Nos vemos pronto
DISEÑO UX/UI
Clase 21
Color en el diseño
Illustrator y Moodboard Color en el diseño Tipografía
● Repaso de mapa de bits ● Principios básicos ● Tipos de tipografía

● Illustrator ● Psicología del color ● Familias tipográficas
● Trabajo con vectores ● Esquemas y paletas de ● Jerarquías tipográficas
● Moodboard colores ● Legibilidad
● Armado de moodboard ● Herramientas ● Tarea para el Proyecto
● Tarea para el Proyecto ● Tarea para el Proyecto Final
Final Final
Hi-Fi Visual y Contenido
Design Thinking
Wireframe Digital
Atomic + Guidelines + Grillas
Color
¿Qué es el color?
El color es la impresión producida por un tono de luz en los órganos visuales, o más
exactamente, es una percepción visual que se genera en el cerebro de los humanos y
otros animales al interpretar las señales nerviosas que le envían los fotorreceptores
en la retina del ojo, que a su vez interpretan y distinguen las distintas longitudes de
onda que captan de la parte visible del espectro electromagnético.
Todo cuerpo iluminado absorbe una parte de las ondas electromagnéticas y refleja las
restantes. Las ondas reflejadas son captadas por el ojo e interpretadas en el cerebro
como distintos colores según las longitudes de onda correspondientes.
La luz blanca puede ser descompuesta en todos los colores del espectro visible.
En la naturaleza esta descomposición da lugar al arcoíris.
Tema: Color
Cada color tiene numerosos significados asociativos y

simbólicos. Por ello, el color nos ofrece un enorme vocabulario
de gran utilidad en la alfabetidad visual.
Autor/as/es: Donis A. Dondis

Definiciones de color
● Color: Sensación originada en la acción de las radiaciones cromáticas de los
cuerpos o sustancias reflejantes sobre los receptores fisiológicos y los centros
cerebrales de la visión. Según la teoría ondulatoria de la luz, percibimos las
distintas longitudes de onda como diferencias de colores.
● Color Cálido: Se refiere a las radiaciones del espectro luminoso que presentan
las máximas longitudes de onda (rojo, naranja, amarillo) que producen una
reacción subjetiva percibida como temperatura.
● Color Frío: A diferencia de los llamados cálidos, los colores fríos se sitúan en el
sector del espectro correspondiente a las longitudes de onda mínimas,
identificándose en la percepción visual con sensaciones de temperatura,
opuestas a la de los colores cálidos.
Ondas electromagnéticas visibles
Las ondas electromagnéticas existen en un gran rango de frecuencias que se conoce como
espectro electromagnético.
El espectro visible es una pequeña banda a la derecha de la región infrarroja y a la

izquierda de la ultravioleta. Esta pequeña región es la porción del espectro
electromagnético que a los humanos nos permite ver. Cuando hablamos de luz, nos
referimos al tipo de onda electromagnética que estimula a la retina de nuestros ojos. La
longitud del color rojo es la más larga del espectro visible, mientras que la violeta es la
más corta; entre el rojo y el violeta se encuentran los demás colores
Cuando todas las longitudes de onda del espectro visible llegan a nuestro ojo al mismo
tiempo, percibimos el blanco. En realidad, el blanco no es un color, sino más bien la suma
de todos los colores y el negro tampoco es un color, sino la ausencia de longitudes de
onda del espectro visible.
En 1666, al pulir unas lentes para su
telescopio, Isaac Newton empezó a
preguntarse por qué se producían
franjas de colores en los bordes de las
lentes y a pensar sobre ello.
Esta inquietud, que ya se planteaba desde
la época de Aristóteles, pero recién con
Newton hizo que fuera explicado:
¡La luz puede ser separada!
Cada color es característico de una

longitud de onda y si hacemos pasar luz
blanca por un prisma, la dispersión
La separación de la luz visible se
produce colores: rojo, naranja, amarillo,
conoce como dispersión.
verde, azul, índigo y violeta.
¿Cuál es la verdad sobre el color?
Cuando vamos a la primaria nos enseñan que hay colores primarios y secundarios:
● Colores Primarios: Cualquiera de las sensaciones de color de los matices
fundamentales, rojo, amarillo, azul, perceptualmente irreductibles, de los que
derivan los demás colores.
● Colores Secundarios: Aquellos colores formados a partir de la mezcla de dos
primarios.
Pero cuando estudiamos diseño nos dicen que los colores primarios son:
(RGB) Rojo · , Verde · y Azul · , y que si los sumamos nos dan Blanco.
Y que si juntamos Rojo y Verde = Amarillo ·
Rojo y Azul = Magenta ·
Azul y Verde = Cyan ·
Y que Cyan + Magenta + Amarillo = Negro (CMYK)
Síntesis de color
En la superposición de colores luz, denominada síntesis aditiva de color, el color
blanco resulta de la suma de todos los colores luz, mientras que el negro es la
ausencia de luz.
En la mezcla de los colores primarios en la síntesis sustractiva de color, con tintas

pigmentos o pinturas, amarillo, cian y magenta; el blanco solo se consigue si el
pigmento o el soporte son de ese color, mientras que el negro es resultado de
la superposición completa de los colores cyan, magenta y amarillo, una mezcla
que en cierta medida logra absorber todas las longitudes de onda de la luz.
Aunque también se utiliza la tinta Negra, K, o Key para que el negro sea
intenso.
El color es esencial
El color es, indiscutiblemente, uno de los recursos esenciales en la
construcción de la comunicación visual.
Esencial, como fenómeno físico que afectará inevitablemente a toda
creación perceptible por el ojo humano, que comunica y provoca una
respuesta emocional de carácter inconsciente en el observador.
Como toda manifestación comunicacional, está vinculada a un contexto
social, cultural, etc. Entender el color como fruto de la cultura y sometido
a sus variaciones nos sitúa como agentes activos en los procesos de
interpretación en el marco de una sociedad.
Color y cultura
Los humanos damos significado a lo que vemos, interpretamos los estímulos
visuales y los transformamos en cosas a las que damos sentido, a la vez
condicionados por un determinado contexto cultural. También hacemos esto con
los colores, damos significado al color según cómo y dónde se presenta. Es un
proceso complejo de identificación de indicios y señales, de interpretación y
decodificación. Del mismo modo que damos significado a lo que vemos, somos
capaces de utilizar el color para comunicar, señalar o informar.
Las diferentes trayectorias culturales humanas han ido construyendo complejas

estructuras de convenciones, códigos e interpretaciones simbólicas sobre los
colores. La progresiva globalización cultural de los últimos tiempos ha borrado
algunas diferencias y ha hecho converger algunas convenciones.
La oposición verde-rojo como sistema de codificación tiene un
significado claramente implantado en nuestra sociedad y en
todo el mundo:
paso permitido o prohibido, aparato encendido o apagado,

polo positivo o negativo, aceptar o cancelar.
Si como diseñadores hacemos uso de este código socialmente

establecido, nos aseguramos una fácil interpretación a la vez
que contribuimos a consolidar y perpetuar su significación.
Al entrar en un supermercado las combinaciones de color en los
productos toman significado para nosotros, nos ayudan a localizarlos y a
navegar por el supermercado.
En conjunto, se agrupan formando zonas y en detalle nos lanzan señales

sobre las calidades, sobre todo simbólicas, de cada producto.
El color y el apetito
El color es a menudo el primer elemento que las personas observan en
cualquier producto alimenticio. Por lo tanto, el color predetermina el
sabor y la calidad de los alimentos que comemos independientemente de
la realidad ya que antes siquiera de que las papilas adquieran el sentido del
gusto a través del alimento, ya se han enviado señales al cerebro para
interpretar el sabor a través de los ojos.
Por esa razón las empresas de marketing utilizan la psicología del color y
dedican mucho tiempo a elegir los colores correctos al diseñar sus
productos.
Los colores que reducen el apetito, son los que tienen una relativa ausencia
en la naturaleza o que se pueden asociar a alimentos en mal estado o quemados.
Azul. Aparte de los arándanos, no es fácil encontrar el azul como color natural. Muchas
dietas milagro que tienen como objetivo la pérdida de peso sugiere el uso de platos
azules para comer porque se come menos comida debido a la naturaleza del color. El
uso de luces azules en los comedores es utilizado para un menor consumo de
alimentos.
Gris. Generalmente aleja a las personas de la comida debido a que lo asocian con el
moho o alimentos en mal estado en general. En realidad, muchos alimentos
procesados son grises, pero se les suele agregar color para compensar la pérdida de
color que resulta de la exposición de los alimentos a la luz, el aire y otras condiciones.
Negro. Se utiliza para hacer que el apetito de una persona disminuya. Aunque puede
ser un color elegante para vestir, a la hora de comer puede transmitir que el alimento
está en mal estado o quemado.
Colores que dan hambre: Son los que más se encuentran en la naturaleza
y que usan las industrias alimenticias y de marketing para vender alimentos
Verde. Es un color que se asocia con lo saludable. Las ensaladas están llenas de alimentos
verdes y las verduras que son tan importantes para la salud.
Naranja. Estimula el cerebro, lo que aumenta la actividad mental y a menudo provoca una
sensación de hambre. Muchos alimentos saludables son de color naranja; calabaza,
zanahorias, naranjas y calabazas, etc.
Rojo y amarillo. Al ser colores considerados cálidos, aumentan la presión arterial, la

frecuencia cardíaca y hacen que el hambre sea más frecuente. Es por eso que la mayoría
de las cadenas de comidas rápidas tienen un logo de color rojo o amarillo que usan en sus
productos. La combinación de ambos colores nos da la sensación de más hambre.
Blanco. La mayoría de los restaurantes usan platos blancos ya que hacen que la comida se
vea más fresca y apetitosa en el contraste de colores. Por otro lado, este color se asocia con
la limpieza y la pureza.
Color en los ambientes
¿Sabías además que los colores a tu alrededor pueden estar influenciando
tus emociones y tu estado de ánimo? Ciertas tonalidades pueden
facilitar que nos irritemos, mientras que otras pueden favorecer nuestra
relajación. Incluso ciertos colores pueden ayudarnos también a descansar
la vista.
Hay una gama de tonalidades que están asociados a la tranquilidad y

que nos transmiten calma. Estos colores suelen ser los más
recomendados para pintar las paredes de una casa o para generar un
ambiente más tranquilo.
El color azul es el color de la tranquilidad, la calma y la armonía por
excelencia. Relaja la mente y reduce los síntomas de estrés y ansiedad.
El azul claro suele estar relacionado con la sabiduría y se estudia su efecto sobre la
reducción del ritmo cardíaco. Este color nos puede producir tales sensaciones al estar
relacionado con la calma del mar o del cielo tranquilo.
Los verdes transportan a nuestra mente hacia la naturaleza, se dice que es el color más
relajante para el sistema nervioso de los seres humanos. El verde es un tranquilizante
natural e incluso se habla de un poder curativo ayudando a estabilizar las emociones.
En cambio un verde más amarillento se asocia con la enfermedad, con la envidia y con
sensaciones desagradables.
El color blanco es el color de la luz y el bienestar emocional. En la antigüedad, se

utilizaba este color para la gran mayoría de edificios puesto que les daba un efecto de
soberbia y pureza.
No se recomiendan paredes rojas, marrones o grises, ya que irritan o desmotivan.

Psicología del color
Los colores despiertan respuestas emocionales específicas en las
personas.
El factor psicológico está formado por las diferentes impresiones que

emanan del ambiente creado por el color, que pueden ser:
de calma, de recogimiento, de plenitud, de alegría, opresión, violencia...
La psicología de los colores fue ampliamente estudiada por Goethe, que

examinó el efecto del color sobre los individuos:
• Blanco: puede expresar paz, soleado, feliz, activo, puro e inocente;
crea una impresión luminosa de vacío positivo y de infinito.
El blanco es el fondo universal de la comunicación gráfica.
• Negro: es el símbolo del silencio, de lo desconocido y, a veces, impuro y maligno. Confiere nobleza y
elegancia, sobre todo cuando es brillante.
• Gris: simboliza la indecisión y la ausencia de energía, expresa duda.
• Amarillo: es el color más luminoso, más cálido, y expansivo. Es el color del sol, de la luz y del oro, y como
tal es intenso y agudo. Suelen interpretarse como animados, joviales, excitantes, afectivos e impulsivos.
• Rojo: significa vitalidad, es el color de la sangre, de la pasión, de la fuerza bruta y del fuego. Color
fundamental, ligado al principio de la vida, expresa la sensualidad, la virilidad, la energía; es exultante y
agresivo.
• Azul: es el símbolo de la profundidad. Inmaterial y frío, de tranquilidad y melancolía. Oscuro: infinito.
• Violeta: es el color de la templanza, de la lucidez y de la reflexión. Es místico, melancólico y podría
representar también la introversión.
• Verde: es el color más tranquilo y sedante. Evoca la vegetación, el frescor y la naturaleza. Es el color de la
calma indiferente: no transmite alegría, tristeza o pasión.
• Marrón: es evocador del ambiente otoñal y da la impresión de gravedad y equilibrio. Es el color realista,
tal vez porque es el color de la tierra que pisamos.
Psicología del color
En esta ocasión compararemos dos de las teorías del color más
reconocidas: la teoría de Goethe, quien se dedicó a estudiar los colores
desde el punto de vista de la percepción para, así, establecer una relación
entre los colores y algunos estados de ánimo.
En contraste, Lüscher dividió los colores primarios en 2 categorías: los

colores heterónomos (el amarillo y el azul que representan la luz y la
oscuridad respectivamente) y los colores autónomos (el rojo y el verde que
representan el ataque-defensa del organismo).
El círculo cromático o rueda
de colores es una
representación ordenada y
circular de los colores de
acuerdo con su matiz o tono, en
donde se representa a los
colores primarios y sus
derivados.
Su uso es compatible tanto con

los modelos Síntesis sustractiva
de color, como con los modelos
Síntesis aditiva de color.
Esquema de colores y sus combinaciones
● Esquema acromático: No existe color, solo negro, blanco y grises.
● Esquema análogo: Se toma un color y se acompañan con los contiguos.
● Esquema de choque: Combinamos un color con el tono que está a la derecha o a la
izquierda de su complemento en el círculo cromático.
● Esquema complementario: Utilizamos dos colores opuestos en el círculo cromático.
● Esquema monocromático: Un color combinado con sus tintes y matices.
● Esquema neutral: Se utiliza un color con el agregado del negro o de su
complementario.
● Esquema complementario dividido: Consta de un color y los dos análogos de su
complementario.
● Esquema primario: Colores primarios saturados.
● Esquema secundario: Colores secundarios.
● Esquema triada terciario: Se utilizan colores equidistantes uno del otro en el círculo
cromático.
Paleta de colores
La paleta de colores o paleta cromática son una selección de colores que
aplicados en una misma imagen, gustan a la vista. Normalmente la define
el diseñador o director de arte de un proyecto. Se utiliza para el diseño de
una pieza gráfica, la decoración de un ambiente o la creación de una obra
artística.
Una paleta de colores contiene un conjunto de tonalidades que se hablan
entre sí. Cada una de estas tiene uno o varios significados y tienen la
capacidad de evocar emociones en las personas.
Es una de las herramientas de diseño gráfico más elementales, ya que se
utiliza para crear combinaciones de colores que trabajen bien juntos.
Ejercicio
Clase 21
1. Elegir un personaje muy famoso
2. Obtener la paleta
3. Que tus compañeros/as adivinen a
qué personaje pertenecen.
4. Luego deberán debatir:
¿Por qué creen que sus diseñadores
eligieron esa paleta para ese
personaje?
(Tener en cuenta la personalidad del
personaje, sus intenciones,
ambiciones, poderes etc.)
Tarea para el Proyecto final
Vamos a utilizar todo lo visto en clase para definir una Paleta de 3 colores, 1 principal, 1
secundario y 1 acento (3 como lo indica Android pero si diseñas para IOS únicamente vas a
utilizar 1 color principal).
Asegurate que los colores o el color que elijas exprese el alma del proyecto que estás
diseñando.
● Investigar sobre qué colores simbolizan las 3 palabras clave de mi proyecto.
● Crear la paleta con Adobe color CC.
● Realizar un breve informe sobre el analisis de color y allí justificar porque fueron elegidos.
● Luego los incorporaremos a los elementos de las pantallas.
● En la mayoría de los casos mantendremos el blanco como fondo principal de pantallas
(aunque no forma parte de la paleta de 3 colores).
Ejemplos de entrega
Moodboard
Tiempo
Calma
Profesional
PALETA DE COLORES Palabras guía:
Primario - Secundario - Acento Tiempo - Calma - Profesional
Elegí el color principal teniendo en mente a la user persona “Pilar” y la temática “Psicología”.
El morado es un color que transmite sensibilidad, delicadeza, elegancia, lujo o espiritualidad.
El color morado se asocia a la elegancia y la sensibilidad.
Es muy utilizado en publicidad para remarcar la distinción o el lujo.
El color secundario lila acompaña al principal.
El color de Acento en su mayoría compuesto del color rojo

pero con mezcla de blanco y un poco de amarillo,
que lo convierten en más femenino y delicado.
Se eligió por su intensidad, su capacidad de llamar la
atención y destacar, para que sirva de guía para el usuario.
5) FIDELIDAD ALTA
Recordá:

Nos vemos pronto
DISEÑO UX/UI
Clase 22
Tipografía
Color en el diseño Tipografía Branding y Logo
● Principios básicos ● Tipos de tipografía ● ¿Qué es una marca?

● Psicología del color ● Familias tipográficas ● Branding y estrategia
● Esquemas y paletas de ● Jerarquías tipográficas ● Ejemplos de manuales de
colores ● Legibilidad marca
● Herramientas ● Tarea para el Proyecto Final ● El logo y sus características
● Tarea para el Proyecto Final ● Tipos de logo
● ¿Cómo crear nuestro logo?
¿Qué es tipografía?
Podemos definir la tipografía como “el arte de diseñar las letras”. Se
denomina así a la disciplina que estudia la representación gráfica de las letras
para que el lenguaje escrito sea efectivo.
Es el estilo o la apariencia del texto. Se refiere al arte de trabajar con él.
La tipografía está donde quiera que se mire; en libros, sitios web, letreros y
avisos, en señales de tráfico y empaques de productos.
La palabra tipografía proviene de dos términos griegos: “typos” que significa

golpe, marca o forma, y “graphia” que significa cualidad de escribir.
Imprenta: tipos móviles
Morfología de las tipografías
Serif Sans-Serif
Interletraje
Interlineado Caja
Morfología de las tipografías
La anatomía tipográfica se refiere a las características determinadas de una

fuente.
Estudiando sus características nos permite dividirlas en 4 grupos:
Romanas:
Con serifa (romanas) cuentan con remates o terminales, que son esos
pequeños adornos ubicados en los extremos de los trazos de los caracteres.
Las tipografías Serif suelen ser concebidas como serias y tradicionales.
Cuentan con un aire académico o institucional. Son tipografías idóneas para
párrafos o textos largos, ya que los pequeños terminales o serifas
contribuyen a que se cree una línea imaginaria bajo el texto que facilita
mucho la lectura a nuestro ojo.
Algunos ejemplos de fuentes tipográficas Serif son: Times New Roman,
Garamond o Book Antigua.
Y recuerda, dentro de las tipografías con serifa, podemos incluir también las
tipografías egipcias o Slab Serif.
Palo seco:
Sin serifa (palo seco) se caracterizan por la ausencia de remates y terminales. Se
diseñan sin serifas. Sus trazos apenas presentan contrastes.
Las tipografías Sans Serif suelen asociarse con la tipografía comercial, ya que
ofrecen un resultado muy bueno para la impresión de titulares o poco texto, en
carteles y publicidad. Este estilo de fuente evoca modernidad, seguridad,
neutralidad y minimalismo.
Es muy recurrida también para textos en pantalla y textos en tamaños pequeños.
Gracias precisamente a la ausencia de terminales y remates, esta tipografía puede
resultar más legible en textos de pequeño tamaño que su hermana mayor.
Algunos ejemplos de tipografías San Serif son: Futura, Helvética, Arial, Gotham o
Avenir.
Manuscritas:
Cursivas (manuscritas) también se denominan como cursivas o script.

Son tipografías que representan o imitan la caligrafía a mano, por lo
que en ocasiones también se les puede denominar como tipografías
caligráficas.
Generalmente este tipo de tipografías cuentan con una tendencia
itálica o cursiva claro. Las letras se ligan entre sí y encontramos curvas
más pronunciadas que en las tipografías con serifa o de palo seco.
Cómo se relacionan con la caligrafía, cuentan con una personalidad
algo más humana y cercana. Algunas tipografías cursivas podrían ser
Beckham Script o Parisienne.
Exposición:
Decorativas (exposición) también se les denomina como tipografías display. Están
consideradas como tipografías divertidas, que pueden transmitir una gran variedad
de sensaciones. Cuentan con un carácter y personalidad muy fuerte.
Desde el punto de vista de la psicología tipográfica son transgresoras y contribuyen
a llamar más la atención.
Dentro de este conjunto de decorativas entrarían las tipografías cuyas
características no se ajustan a los tres conjuntos anteriores. Suelen crearse para
fines específicos donde la legibilidad no se tiene demasiado en cuenta. Como por
ejemplo un logo o un título. Son muy expresivas y suelen contar con atributos más
temáticos.
Eso sí, definitivamente no son tipografías idóneas para párrafos de texto.
Pueden llegar a transmitir falta de cuidado o desinterés en el diseño.
Tipografía:
Resulta imposible no tener un contacto directo constante con las

tipografías. Nos acompañan en todo momento, ya que forman parte
de nuestra rutina diaria. Hablamos por tanto de un elemento visual
casi omnipresente del que podemos hacer uso desde el diseño gráfico.
Además, las tipografías son una herramienta clave a la hora de

diseñar la identidad de marca o branding de un proyecto.
Junto con el logo, la paleta de colores y otros recursos, forman parte
del branding visual que diseñamos estratégicamente para reforzar el
mensaje que queremos enviar desde la empresa.
Familias tipográficas:
Una familia tipográfica es un conjunto de caracteres, alfabéticos o no, que
cuentan con unas características comunes en su estructura y en su estilo.
Esto nos permite identificarlas como una misma familia.
Los miembros que integran una misma familia tipográfica se parecen entre
sí, pero cuentan con algunos rasgos propios como variaciones de peso,
inclinación y proporción. Esto lo voy a aclarar con más detalle en el siguiente
punto.
Existen multitud de familias tipográficas. Originalmente surgieron con la
creación de la imprenta pero otras han ido apareciendo como resultado de
la digitalización de todo el proceso de diseño de tipografías.
Por ejemplo, las familias Gotham, Futura o Swift.
Variables tipográficas:
Las variables tipográficas son las opciones que podemos encontrar dentro de una misma familia
tipográfica. Son modificaciones de la morfología de la tipografía, es decir de su forma. Actúan sobre el
grosor (tono) del trazo, el ancho o proporción del carácter y la inclinación del eje vertical de los
caracteres de una misma familia tipográfica.
Gracias a estas variables tipográficas vamos a poder establecer una jerarquía visual en nuestras
composiciones. También nos ayudan a satisfacer las necesidades que nos pueden surgir a la hora de
comunicar visualmente con tipografías.
Variable de peso: Denominada también como variable de grosor o tono, afecta directamente al
trazo de los caracteres. Se modifica la relación entre el ancho del trazo y los espacios vacíos dentro de
cada signo tipográfico. La tipografía bold o negrita presenta un grosor de trazo mayor, mientras que
la tipografía light presenta un grosor del trazo menor.
Variable de inclinación: modifica el eje de los caracteres. Hace referencia al ángulo de inclinación
de la tipografía. Dentro de la variable tipográfica de inclinación vamos a poder reconocer dos tipos.
Las oblicuas y las itálicas.
Legibilidad:
La legibilidad es la facilidad con que se puede leer y comprender un
texto.
En un sentido más amplio es la aptitud de un texto de ser leído fácil y
cómodamente, y esta aptitud hace referencia a elementos tipográficos, de
presentación del escrito en la página, y también al estilo, a la claridad de la
exposición, a la manera de escribir, al lenguaje.
La legibilidad debe ser uno de los temas más importantes cuando se
trata de un proyecto de diseño. Si un texto no se puede leer, entonces su
mensaje no va a llegar a nadie. Un buen diseño se muestra en una forma
que es comprensible; la legibilidad conforma una gran parte de la
comprensión.
Tema: Tipografía
No puedes ser un buen tipógrafo sino eres un buen lector. La

tipografía es leer.
Autor/as/es: Anónimo
Importancia de las jerarquías:
La jerarquía tipográfica presenta las letras de manera que las palabras

más importantes se muestran causando un mayor impacto, por lo
que los usuarios pueden escanear el texto para obtener información
clave. Sin jerarquía tipográfica, cada letra, cada palabra y cada frase en
un diseño se vería igual.
Jerarquías:
Nivel Primario- El nivel primario de la tipografía comprende letras de gran tamaño. Estas abarcan titulares y
cubiertas, lo cual también es conocido como «muebles» que atraen a los lectores en el diseño. Esta tipografía es
la más grande (a menos que se utilice arte tipográfico).
Nivel Secundario- El nivel secundario de la tipografía comprende la información que tiende a ser analizada y que
ayuda a los lectores a permanecer con el diseño. Esto incluye elementos tales como subtítulos, citas, infografías
y otros pequeños bloques de texto que añaden información al nivel primario. El diseño de estos bloques
textuales está en el lado grande, pero por lo general, son mucho más pequeños que las letras en el nivel primario
de la tipografía.
Nivel Terciario- El nivel terciario de la tipografía comprende el texto principal del diseño. A menudo es una de
las tipografías más pequeñas, pero debe ser lo suficientemente grande como para ser completamente legible
por todos los usuarios potenciales. El tipo de letra debe ser simple y consistente en el diseño, espaciamiento y el
uso general.
Otros niveles- Los otros niveles de la tipografía incluyen efectos que se aplican a escribir en el nivel terciario para
pequeñas áreas de impacto. Efectos tales como negrita, cursiva, subrayado y color pueden llamar la
atención sobre las áreas específicas del texto principal.
Jerarquías visuales y niveles de Lectura
Jerarquías visuales y niveles de Lectura
En el terreno de la Comunicación visual el principal
componente es la imagen, la cual tiene dos niveles
de aprehensión: el figurativo y el significativo.
El primero se relaciona con lo que la imagen

denota, aquello que se puede ver a simple vista,
que está explícito en el discurso visual.
El segundo se vincula con lo que la imagen
connota, está en el área de los significados.
Dichos niveles, figurativo-significativo se perciben
como una unidad comunicacional.
Toda imagen será interpretada y se revelará por

conocimiento del sistema de signos empleado, como
tal es un lenguaje que deberá ser aprendido para
promover una fluida manipulación y transmisión de
acciones y pensamientos proyectuales.
En el proceso de diseño, es imprescindible considerar

las características del receptor del mensaje, tanto en
lo que a las imágenes refiere como al texto.
Connotación tipográfica
Contrato serio
Relájate y disfruta
Músculo, autos y cerveza
Frivolidad Ligera
Siglo 21
La elección tipográfica está en contradicción con su significado.

Tipografía como imagen:
La tipografía puede comportarse como una imagen gracias a los

atributos formales que definen su personalidad gráfica.
Separados del componente informativo del lenguaje, los tipos quedan

liberados de su función lingüística, convirtiéndose en una
representación visual de sí mismos con un significado connotativo
asociado.
Tipografía como imagen
Valor estético de la tipografía.

Tipografía Helvetica
creada en 1957, sus
aspectos morfológicos y
su gran variedad nos
permiten hacer trabajos
tan “modernos”como
hace 60 años de su
creación.
¿Qué nos quiere decir este diseño?
“La buena tipografía es invisible”.
“La mala tipografía está en todos lados”.

Misma foto, distinta tipografía, distinto concepto, distinta clave tonal (alta-clara/baja-oscura)
Semantización
Acento semántico
El acento semántico se emplea para poner de relieve determinadas ideas

mediante la aplicación de un signo visual sobre una o varias palabras así, dichas
ideas se enfatizan.
Se emplea frecuentemente en titulares y en la generación de logotipos. Posee gran

poder de semantización y produce fuerte anclaje entre idea y palabra por lo que
posibilita la retención del concepto en la mente del receptor:
Semantización
Semantización
Semantización
Semantización
Semantización
Ejercicio
Clase 22
Semantización tipográfica:
Usando como referencia los ejemplos vistos:
van a crear una puesta tipográfica.
Podría ser sobre un adjetivo, un personaje
famoso o una película.
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.
Ejemplo de entrega:
Moodboard
Tiempo
Calma
Profesional
PALETA DE COLORES Palabras guía:
Primario - Secundario - Acento Tiempo - Calma - Profesional
Elegí el color principal teniendo en mente a la user persona “Pilar” y la temática “Psicología”.
El morado es un color que transmite sensibilidad, delicadeza, elegancia, lujo o espiritualidad.
El color morado se asocia a la elegancia y la sensibilidad.
Es muy utilizado en publicidad para remarcar la distinción o el lujo.
El color secundario lila acompaña al principal.
El color de Acento en su mayoría compuesto del color rojo

pero con mezcla de blanco y un poco de amarillo,
que lo convierten en más femenino y delicado.
Se eligió por su intensidad, su capacidad de llamar la
atención y destacar, para que sirva de guía para el usuario.
TIPOGRAFÍA:
Para los títulos dentro de la presentación de slides
elegimos la tipografía Playfair Display, porque nuestra
user persona “Pilar” es una persona joven, moderna y
sofisticada.
Dentro del prototipo utilizamos la tipografía Roboto
indicada por las Guidelines de Android.
Para facilitar la lectura y comprensión para los usuarios.
Títulos H1 48pt
Títulos H2 24pt
Títulos H3 18pt
Párrafo p 12pt
5) FIDELIDAD ALTA
Recordá:

Nos vemos pronto
DISEÑO UX/UI
Clase 23
Branding
Tipografía Branding Logo
● Tipos de tipografía ● ¿Qué es una marca?

● Familias tipográficas ● Branding y estrategia
● Jerarquías tipográficas ● Ejemplos de manuales de marca
● El logo y sus características
● Legibilidad
● Tipos de logo
● Tarea para el Proyecto Final ● ¿Cómo crear nuestro logo?
Design Thinking
Wireframe Digital
Color + Tipografía + Logo

¿Qué significa Branding?
Branding es un término en inglés, empleado en marketing, que hace referencia al proceso
de hacer y construir una marca mediante la administración estratégica del conjunto total
de activos vinculados en forma directa o indirecta al nombre y/o símbolo (logotipo) que
identifican a la marca influyendo en el valor de la marca, tanto para el cliente como para la
empresa propietaria de la marca.
El branding se refiere a todas esas acciones premeditadas que se llevan a cabo para
influenciar en la percepción que la gente tiene de un producto o servicio, y que así lo
elijan una y otra vez. Fundamentalmente, es la forma en que tu producto o servicio vive en el
corazón y la mente de tu cliente.
Aunque pueda parecer una idea sencilla de comprender, el branding es un concepto difícil
de definir y muy debatido porque las marcas representan algo emotivo y subjetivo. Para
poder llegar a comprender el concepto, es necesario retroceder y entender
qué es la marca.
¿Qué es marca?
Philip Kotler se refiere a las marcas desde el concepto brindado por la American Marketing
Association, que las define como “nombre, término, signo, símbolo diseño o combinación
de ellos, cuyo objeto es identificar los bienes o servicios de un vendedor o grupo de
vendedores con objeto de diferenciarlo de sus competidores” (Kotler, 2000).
Sin embargo, esta definición, a pesar de ser acertada, posee ciertas limitaciones al plasmar
los verdaderos alcances de lo que es una marca, ya que “no da cuenta de las diversas
transformaciones que ha enfrentado la economía capitalista en las últimas décadas”
(Estrella, 1997, p. 27), y por tanto no permite develar los alcances, funciones y realidades de lo
que es una marca en el contexto contemporáneo.
Para comprender apropiadamente lo que estos “logos” son al día de hoy es necesario
entender su evolución, es decir, los distintos caminos que les han permitido llegar hasta el
punto crucial en el que se encuentran en el mundo contemporáneo.
Como vemos a la marca actualmente:
Seth Godin: “La marca es el conjunto de expectativas, recuerdos, historias y
asociaciones que provocan que el consumidor se decida por un producto o
servicio en vez de otro”. Lo que significa que el branding es todo lo que haces
para influir activamente en esas decisiones. También dice que: "La marca es el
conjunto de promesas que le haces a tu cliente, lo que espera de ti cuando te
comprometes a prestar tu servicio"
Cuando los consumidores hacen una elección, ¿cómo toman sus decisiones? Sea
cual sea su motivación, la marca es lo que da forma a la percepción de tu
empresa en sus mentes y, en última instancia, lo que convierte a los nuevos
clientes en compradores fieles.
Andy Stalman: define el concepto de marca directamente como “un sentimiento”.

Tema: Branding
Apple en su esencia, su valor central, es que creemos que la gente con

pasión puede cambiar el mundo para bien. Eso es lo que creemos.
Creemos que las personas pueden cambiar el mundo para que sea
mejor y las personas que están suficientemente locas para pensar que
pueden cambiar el mundo son las que en realidad lo hacen.
Autor/as/es: Steve Jobs - Think Different.

Steve Jobs:
El nombre Steve Jobs despierta como pocos una admiración única en el mundo.
Simboliza el culto por la simpleza, la perfección y la belleza, tres conceptos que
unidos llevaron a convertir a Apple en la marca más valiosa del mundo. Según la
consultora Interbrand, valía en 2014 U$S120.000 millones, más que Google y
Coca-Cola.
Sus lecciones sobre innovación, marketing y diseño son las más recordadas.
Sobre el diseño, explicaba que “no es solo la apariencia, el diseño es cómo
funciona” y se negaba a pensar que “quien golpea primero, golpea mejor”, ya que
lo importante, resaltaba, era “ser el mejor”. La calidad y la estética siempre
primaban, como explicaba: “La mayoría de la gente piensa que el diseño es una
chapa, es una simple decoración. Para mí, nada es más importante en el futuro
que el diseño. El diseño es el alma de todo lo creado por el hombre.”
Steve Jobs:
Tras un trabajo intensivo de ocho semanas para encontrar y definir el valor central de la
empresa, el CEO expuso los resultados en una charla interna con los trabajadores de la
compañía y presentó el origen de lo que se convertiría más adelante en la campaña:
'Think Different'.
En la conversación, Jobs dijo: "el marketing se trata de los valores. Este es un mundo
muy complicado, muy ruidoso, y no tendremos oportunidad de que la gente recuerde
mucho sobre nosotros, por lo que tenemos que ser muy claros sobre lo que queremos
que sepan sobre nosotros".
Resaltó a Nike como "el mejor ejemplo de marketing que ha visto el universo",
recordando que a pesar de que venden un commodity, como son los tenis, las personas
piensan en la marca como algo mucho más grande e importante que una compañía de
zapatos. "En sus comerciales, Nike nunca habla de su producto o de por qué sus
zapatos son mejores que los de Reebok ¿Que hace Nike en su publicidad? Honran a
grandes atletas y el gran atletismo. Son quienes son, y esa es su esencia".
Marca no es:
Una marca no es un logo, no es un packaging, no es una campaña de publicidad.
Ni siquiera una marca es lo que vos creés que tenés.
Una marca es lo que los demás piensan que eres. Una percepción fundamentada sobre cómo te
ven, qué sentimientos despertas en su interior y qué dicen de vos.
En un negocio, nada es más importante que la marca, porque precisamente es lo que define y
encapsula su esencia.
Es un error común de percepción de las empresas jóvenes y los nuevos emprendimientos pensar
que el branding es únicamente el logo que combina con la paleta de colores de tu empresa y con el
diseño de tu página web o app.
Como un jingle que no sale de tu cabeza, el verdadero branding genera mnemotecnia; el

sentimiento, la experiencia y la emoción a largo plazo que el consumidor asocia a tu marca. Es
una cualidad intangible de tu marca que los clientes conectarán y relacionarán en su vida diaria.
¿Por qué es importante el branding?:
El mundo del marketing está saturado. Si tu marca solo tuviera alrededor de 7
segundos para causar una impresión, todo recaería en la fuerza de tu estrategia de
branding y en su buen diseño desde el principio. El branding eficaz es un
mecanismo capaz de hacer que tu empresa destaque y capte la atención de
tus posibles clientes. Cuando se hace bien, el branding adquiere el poder de
influenciar, inspirar y provocar cambios sustanciales.
Echa un vistazo a las marcas grandes y establecidas tales como Google, Apple,
Nike o Coca-Cola. No es una coincidencia que tengan éxito. Estas empresas
entienden mejor que nadie la importancia del branding, y la esgrimen y
aprovechan en cada aspecto de su negocio y su marketing. Además, nunca se
detienen. Continúan optimizando sus estrategias, aprendiendo de sus errores y
creciendo a través de sus constantes esfuerzos de branding para mantener la
lealtad de sus clientes.
Estrategia de branding:
Una buena marca no siempre es cuantificable, ni siquiera racional: es

experiencial y se basa en sentimientos. Puede ser difícil conceptualizar
una cualidad intangible, más aún, intentar medirla.
Si necesitamos darle una definición básica, una estrategia de marca es

un plan útil para identificar lo que representa su marca de adentro
hacia afuera.
A través de la investigación y el análisis, este proceso esencial le

permite determinar el posicionamiento competitivo y definir la forma
más auténtica de llegar a su mercado objetivo a nivel emocional.
Una estrategia para branding debe tener en cuenta
varios aspectos:
● Madurez de la empresa: Es decir, en qué etapa de desarrollo se encuentra la empresa. No es lo
mismo crear una marca para una empresa nueva que renovar una marca que ya lleva varios
años en el mercado y ya posee un cierto número de seguidores.
● Target: Esta métrica se basa en la edad, el género, los gustos y muchos otros aspectos del
potencial cliente.
● Estudio de mercado: Dicho estudio busca descifrar la manera en que su target visualiza la
marca, cuáles son sus puntos fuertes y en qué está fallando o, simplemente, no existe en la
mente del consumidor.
● Plataformas: Se plantean las principales plataformas que pueden ser utilizadas por la marca
para tener el mayor impacto posible en el mercado actual.
● Tipo de promoción: En este nivel la herramienta promocional que puede utilizar una marca
puede ser variada, pero siempre debe complementarse entre sí. Es decir, una marca no puede
desvirtuar su identidad, ya que esta es uno de los aspectos básicos a la hora de posicionarse en
la mente de la franja de público hacia la que va dirigida.
● Originalidad: Definir en tu marca algún objeto, color, o frase para que la reconozcan como suya
y poseas autonomía sobre ella.
¿Para qué sirve?:
1. Potencia y trabaja las diferencias de nuestra marca con la del resto de
competidores de nuestro sector.
2. Es fundamental para el posicionamiento de la marca. Sin branding el
cliente o consumidor no ubicará la marca.
3. Es la manera profesional de enfocar y trabajar la marca a largo plazo.
4. Es la vértebra de la estrategia de marketing digital, dándole sentido
común y coherencia.
5. El branding define las líneas comunicacionales de la marca en todos los
canales, soportes y plataformas.
Branding:
El branding es un proceso estratégico y analítico, pero también exige

creatividad y consistencia con cada uno de los aspectos de la marca.
Debido a la gran cantidad de elementos a considerar del branding, te
recomendamos crear una estrategia de branding sólida, consistente
y apropiada. Así, podrás usarla como una guía de estilo de tu
compañía, donde se tomen muy en cuenta tanto los elementos
visuales como los no visuales del branding como un todo.
Veamos cuáles son los elementos más importantes del branding:

Elementos visuales:
● Nombre de la marca -Sí estamos hablando de branding, lo es todo. El nombre de tu negocio
debe manifestar quién eres, mientras informas qué haces y al mismo tiempo das una buena
impresión. Necesitas verificar que el nombre que escojas esté disponible, que no tenga
connotaciones lingüísticas inusuales o que sea difícil de pronunciar, y que represente los
valores de tu marca.
● Logo - Es común pensar en el logo cuando se habla de branding. A menudo se cree que
forman una sola idea, pero son dos entidades muy diferentes. El logo es uno de los elementos
más importantes de la marca, pero es solo una pieza más del branding. Es la mínima expresión
de tu marca, tu símbolo.
● Colores de la marca - La paleta de colores dará forma a tu identidad de marca y será tu firma
en la estrategia de marketing. Es crucial entender el impacto psicológico de los colores en el
consumidor y la forma en que influencian en sus decisiones de compra. Los colores transmiten
mensajes y la personalidad de la marca.
● Tipografía - Afianzará la personalidad de tu marca y te ayudará a comunicar tu mensaje. La
recomendación es que nunca se usen más de tres fuentes diferentes. Y que sea coherente a los
demás elementos.
Elementos visuales:
● Tarjetas de presentación - Aún mantienen su relevancia y son un elemento importante del
branding. Si tu empresa y tu red de contactos está en expansión, las tarjetas son una forma
profesional y amigable de invitar a recordar tu marca. Deben mantener la coherencia con el
resto de los elementos del branding.
● Página Web - Ahora más que nunca es crucial tener una presencia profesional en línea, dado
que es una parte esencial de una apropiada estrategia de branding y de marketing. A través de
ella podrás atraer nuevos usuarios, alcanzar nuevos consumidores potenciales, promocionar y
vender productos, enseñar e informar a los clientes y, sobre todo, comunicarte de manera
profesional.
● Eslogan - Técnicamente no es un elemento visual, pero cumple funciones sumamente
similares, no siempre es una parte esencial del branding, pero, cuando se hace bien, puede
convertirse en una poderosa herramienta de marketing.“Duracell, dura más”, o “Destapa la
felicidad con Coca-Cola”, son los ejemplos perfectos de eslóganes que representan a su marca.
Hacen que te imagines usando el producto al oírlos. Como puedes ver, cuando su diseño es
apropiado, el eslogan puede formar parte integral de la marca.
Elementos no visuales:
● Misión - La misión de una empresa es una parte vital del branding. Su función es expresar los
propósitos de la marca y sus valores. En solo unas pocas oraciones, debe permitir a cualquiera
que conozca tu marca comprender claramente de qué se trata, como una explicación del “¿por
qué?”, que te permita delimitar no sólo qué ofrece tu negocio, sino también el propósito de por
qué lo hace.
● Visión - La visión es una redacción clara y concisa que sirve como un mapa de ruta para
delimitar la visión a futuro de la marca. La visión puede evolucionar con el tiempo, pero siempre
debe mantener afinidad con los valores de tu marca.
● Valores - En un mundo en donde la transparencia y la autenticidad son más relevantes que
nunca, los consumidores buscan honestidad y conectar con marcas que defiendan valores
similares a los suyos. Los valores de tu marca son la base de tu negocio. Imagina estos valores
como la brújula que dirige y respalda tu empresa, así como las decisiones y acciones que se
tomen.
● Identidad de marca - Te ayudará tanto a visualizar la personalidad de tu empresa como a
entender tu compromiso con la audiencia. Teniendo muy en cuenta la misión, la visión y los
valores que han dado forma a la persona de tu marca, la mezcla de todos estos elementos
resultará en una identidad definitiva y comprensible.
Elementos no visuales:
● Historia - Nuestra historia y de dónde venimos es una parte crucial de la vida, y así también lo
es para el branding. Las historias son cautivadoras, atractivas, intrigantes y nos ayudan a
construir vínculos. Es tu oportunidad para desarrollar una narrativa que fomente un vínculo
significativo con tu audiencia y que los ayude a entender mejor de qué se trata tu negocio.
Deberá establecer el tono de todas las formas de contenido y elementos de branding de tu
empresa, ya sean publicaciones en redes sociales, campañas de marketing u otros contenidos
similares. Esto significa mantener la consistencia y la autenticidad todo el tiempo. La historia de
la marca puede encargarse de introducir a los fundadores de la compañía y los orígenes de la
empresa, o bien narrar una apasionante historia del propósito que impulsa el negocio.
● Voz de marca - La forma de comunicarse de la marca es tan única como la de una persona.
Hay que definir con qué tono va a comunicarse siempre la marca. La voz de tu marca dará
identidad a la forma de comunicarse, desarrollará mejor la consistencia de tu branding y
ayudará a generar confianza. Una vez hayas definido la voz de tu marca, podrás usarla en tus
estrategias de marketing y canales de comunicación. Esto tendrá solidez tanto internamente
con los empleados, como externamente con los clientes.
Consejos para gestionar tu marca:
La consistencia es la clave: En la búsqueda del reconocimiento, la confianza y la lealtad de los clientes hacia tu
marca, la consistencia es un aspecto vital del branding. Las empresas confiables, que saben cómo mantener su
marca unificada y consistente en todas sus plataformas.
La reputación lo es todo: Todos conocemos ese sitio del que nos alejamos a toda costa, sólo por su mala
reputación. Incluso aunque no lo hayamos experimentado de primera mano. Lo mejor será cuidar la imagen de
tu marca a toda costa y desde el principio.
Cumplir tus promesas: Un aspecto fundamental consiste en siempre mantener tu palabra y cumplir tus
promesas. Esto incluye las promesas que tu marca ha hecho a tus clientes, empleados e inversionistas, así como
las acciones que tomas para mantenerlas.
Haz de la conversación un objetivo constante: Es crucial abrir y mantener un diálogo constante entre tu marca
y tus consumidores, tanto online como offline. Hacer preguntas y escuchar con atención las críticas. Esto te
ayudará a implementar cambios basados en los usuarios.
Construye vínculos duraderos: Todo se reduce a diferenciación, compromiso y lealtad. Asegúrate de cuidar bien
esos vínculos tan importantes. Después de todo, los clientes leales, que regresan por más, son los más
importantes.
Ejercicio
Práctico Nº23
Ver ejemplo de
manual de marca
https://creative.starbucks.com/
Como vimos hoy en clase: el branding hace que todo lo referido a una marca se sienta
auténtico, honesto, coherente, y que cada elemento que la conforma nos transmita el
mismo mensaje. Es un todo que hace referencia a la marca, a su visión, misión y valores, la
suma de sus elementos representa su personalidad, su voz y define su actuar.
Esta tarea consiste en chequear que cada parte de su proyecto sea coherente, tanto en
contenido como en estética, es decir que cada una de las tareas realizadas se vea, se
sienta, y exprese el alma de su proyecto. Que todo se sienta parte del mismo “mundo”.
Poco a poco ir incorporando todos los conceptos y elementos aprendidos dentro de la

presentación de slides, ya sea en la forma de expresarse, en sus colores, en su tipografía.
Para la entrega final debe sentirse como un todo coherente diseñado a conciencia.
Ejemplo de entrega:
La app que le hace frente a la decadencia de los oficios manuales.
A través de tutoriales breves, nos permite desarrollar nuevas
habilidades para contribuir al consumo responsable y sostenible.
Objetivo y cliente
El objetivo de bili es fomentar el aprendizaje de oficios y el desarrollo de habilidades

manuales en las nuevas generaciones, para poder resolver de manera autónoma
cuestiones de la vida cotidiana y, a su vez, contribuir al consumo responsable.
El user al que se orienta esta app es de jóvenes autodidactas, que tienen la intención
de llevar un estilo de vida más sostenible. Al mismo tiempo, no poseen los recursos
para contratar a alguien o reponer las cosas cada vez que se rompe algo.
Mensaje
“Vas a poder:
Aprender cada día una

nueva habilidad,
contribuir a la sustentabilidad
y darle a tus cosas una

nueva posibilidad”
Nombre + Logo
Colores
#009688 #DDEFF1 #FF7043

Familia tipográfica
Aa Aa
AaBbCc01234 AaBbCc01234
ABCDEFGHIJKLMN OPQRSTUVWXYZ ABCDEFGHIJKLMN

abcdefghijklmnopqrstuvwxyz OPQRSTUVWXYZ
0123456789 abcdefghijklmnopqrstuvwxyz
¡!¿?$%#& 0123456789
¡!¿?$%#&
Montserrat Regular Montserrat Bold

Moodboard
Recordá:

Nos vemos pronto
DISEÑO UX/UI
Clase 24
Logo
Branding Logo UI KIT y Alta fidelidad
● ¿Qué es branding? ● ¿Qué es logo? ● ¿Qué es un UI Kit?

● Logotipo, Isotipo, Imagotipo e Elementos que lo componen
● ¿Qué es marca ? ●
Isologo. ● Librerías en Figma
● Steve Jobs ● Características y función de ● ¿Qué es un Sistema de
● Estrategia de Branding los logos. Diseño?
● Tarea para el Proyecto Final ● Diseñador UX/UI y Diseñador ● Alta Fidelidad
gráfico. ● Tarea para el Proyecto Final
Design Thinking
Wireframe Digital
Color + Tipografía + Logo

¿Qué es un “logo”?
De manera habitual se le llama logo al elemento gráfico que identifica a una
empresa, un proyecto, una institución, un producto, etc.
Logo viene de logotipo, que es un símbolo que se caracteriza por estar compuesto
de imágenes, símbolos y/o letras para representar a una institución, marca, persona
o sociedad.
Alrededor del año 1800 empezaron a surgir los primeros logotipos. Se trataban de
símbolos y colores muy rudimentarios, pero que pretendían servir de identificador
entre los propietarios de productos y captar mayor atención por parte de los
incipientes compradores. Posteriormente, los logotipos han ido adaptándose a las
diferentes épocas, convirtiéndose en una referencia de identificación por parte de
las marcas a las que representan.
Logotipo:
Logotipo: Traducido al inglés como “word mark”, se refiere

exclusivamente al diseño tipográfico del nombre o palabra que
define a la marca que se quiere representar.
Isotipo:
Isotipo: se traduce al inglés como brand mark y representa la imagen
simbólica de la marca por ejemplo, la manzana de Apple, y la curva de Nike.
Siglas, anagramas, monogramas, pictogramas o firmas: clasificados dentro

de los isotipos, enfatizan la palabra pero no necesariamente en el nombre
completo. Se conoce en inglés como letter mark. Ej: CNN, LG, eBay.
Imagotipo:
Imagotipo: traducido al inglés como “combo mark”, combina en la

iconografía tanto palabra como imagen. Se caracteriza porque tanto la
imagen como la palabra pueden funcionar por separado. Por ejemplo:
Unilever y Adidas.
Isologo:
Isologo: se traduce al inglés como “emblem”. Es una especie de

emblema, ya que combina, como en el imagotipo, tanto imagen como
palabra, pero están fusionadas, representando una especie de
“escudo” de la marca. Algunos ejemplos como: Nikon, Ikea, Samsung y
Amazon.
Tema: Logo
Los logos más sólidos son los que cuentan historias sencillas
Autor/as/es: Sol Sender

Carácteristicas:
Sencillo: Un logotipo debe ser fácil de recordar. Es recomendable evitar degradados y
utilizar una tipología fácilmente reconocible y un máximo de dos o tres colores.
Adaptable: con la llegada de las nuevas tecnologías es importante que un logotipo se

adapte a cualquier soporte. Debe ser escalable a cualquier tamaño para utilizarlo en el
soporte que se precise.
Legible: Una de las características a tener en cuenta es que pueda leerse sin problemas. La
legibilidad es un aspecto fundamental.
Atemporal: Esta característica es de suma importancia porque las modas cambian de

forma continua. Por lo tanto, tener un logotipo que permanezca en el tiempo y en el
recuerdo del público es muy relevante.
Original: El logotipo debe ser único y original como la empresa a la que representa. Hay
que investigar los logotipos del mercado al que pertenece la firma para marcar diferencia.
Función:
El logotipo tiene como objetivo ser la representación gráfica de una

compañía. Se utiliza para dar a conocer e identificar a la empresa o
institución por un amplio periodo de tiempo, de tal forma que los
receptores asocien a esa empresa los productos o servicios ofrecidos
por ella.
Para tener una identidad de marca exitosa o branding tienes que
contar una historia que influya en las emociones de los clientes.
Tu logo estará presente en todos los materiales de tu marca
(membretes, tarjetas, páginas web, redes sociales etc.) y crearán una
identidad de marca concreta y comercializable.
Sobre los logos:
Los logos son un punto de identificación; son el símbolo que usan los clientes para reconocer tu marca.
Idealmente, querrás que las personas en cuanto vean tu logo lo relacionen con la memoria de lo que hace tu
empresa y, lo que es más importante, cómo los hace sentir.
Como un buen logo es un elemento visual, estéticamente agradable, transmite un recuerdo positivo de tu
marca que el nombre de tu empresa por sí solo podría no transmitir.
Y siendo honestos, es probable que parte de tu público olvide el nombre de tu negocio pero asociará
inmediatamente tu logo con sus recuerdos sobre tu marca.
Los consumidores anhelan la consistencia. A medida que tu marca crezca, tu logo se volverá más reconocible
para una amplia gama de consumidores, y esta familiaridad crea la percepción de que es fiable y accesible.
Cuando sales a comprar ropa de deporte y de repente ves unas zapatillas Nike, estás dispuesto a comprarlas.
¿Por qué? Porque con Nike sabes que estás en buenas manos; es una marca en la que confías. Una vez que les
gustes, tus clientes te buscarán una y otra vez, y tu logo es lo primero que buscarán.
Crear logos no te convierte en diseñador gráfico:
Los diseñadores de logos son diseñadores gráficos profesionales que crean imágenes personalizadas únicas
para la marca del cliente o empresa que los contrata.
Los diseñadores de logos pueden ser independientes (freelancers) o empleados de una agencia de diseño o
publicidad. La mayoría de los diseñadores profesionales tienen un título en diseño gráfico.
Si buscas contratar a un diseñador de logos, hay que tener en cuenta que el proceso de diseño tomará más
tiempo que si lo crearas usando un “creador de logos” en línea, pero al elegir usar los servicios de un diseñador de
logos profesional, estás garantizando que el logo sea totalmente único, que cumpla con su función y que
tenga la calidad necesaria para que una marca se vea profesional y confiable.
Para ser diseñador ux/ui no es necesario ser diseñador gráfico, es por eso que para salir del apuro hasta que
puedas acudir con un profesional (de tu equipo o externo) que diseñe el logo de tu cliente, o como en este caso, si
necesitas un logo rápido de ejemplo para ver como quedaría aplicado en el prototipo te dejo algunas
herramientas online con las que puedes crear logos de forma rápida y gratuita:
Creador de logos de Zyro. Visme. Oberlo. Canva. FreeLogoDesign. LogoMakr. DesignEvo. Namecheap.
Ejercicio
Práctico Nº24
Crear logo en Ai con las
herramientas:
Pluma y Buscatrazos
Crear un Logo con Illustrator, utilizando la herramienta pluma y el buscatrazos.

(Si no pueden utilizar el software pueden crear uno con una herramienta online)
Requisitos del logo:
● Qué se relacione con la temática.

● Que tenga fondo transparente (PNG).
● Que tenga buena calidad (Que no se vea pixelado o borroso).
● Que respete la paleta de colores (que no tenga colores que no pertenecen a la paleta).
● Si es con texto que sea legible en tamaño muy pequeño.
● Si es con texto que se comprenda la tipografía y que se relacione con la temática.
● Que se relacione con las tres palabras elegidas para el moodboard.
Realizar un breve informe sobre el logo, que tipo de logo es, como se relaciona a su proyecto, qué
elementos tiene y por qué, ¿qué mensaje envía a los usuarios de esa marca?
Ejemplo de entrega:
Recordá:

Nos vemos pronto
DISEÑO UX/UI
Clase 25
UI kit y Alta Fidelidad
Logo UI KIT y Alta fidelidad Segunda Preentrega
● El logo y sus características ● ¿Qué es un UI Kit? ● Exposición de proyectos

Tipos de logo ● Elementos que lo componen
● ● Consultorio de dudas
● Librerías en Figma
● ¿Cómo crear nuestro logo?
● ¿Qué es un Sistema de
Diseño?
● Alta Fidelidad
Design Thinking
Wireframe Digital
UI Kit
¿Qué es un UI Kit?
Un kit de interfaz de usuario (del inglés User Interface Kit) es un archivo
cerrado que incluye varios elementos ya prediseñados y reutilizables
imprescindibles para el diseño de la interfaz de usuario, como por
ejemplo: botones, iconos, tablas, formularios, sliders, etc.
La mayoría de estos kits cuentan con estilos -los atributos visuales del
diseño- como: fuentes, colores y formas.
Los UI Kits pueden ser bastante simples con unos pocos botones y
componentes de diseño o extremadamente robustos con
conmutadores que cambian las fuentes, los colores y las formas sobre
la marcha.
UI Kit
UI Kit
UI Kit
UI Kit
VER MÁS
UI Kit
VER MÁS
UI Kit
Beneficios del uso de UI Kit
1. Ahorrar tiempo y dinero: No tienes que dedicar tiempo a crear los componentes
desde cero ni preocuparte por los detalles estándar de cada uno. No hay
necesidad de comenzar el patrón de un sitio web o móvil desde cero, lo que
permite utilizar nuestro tiempo de forma más eficiente, acelerar el proceso de
diseño y prestar atención a otras partes importantes del trabajo.
2. Comprensión: Puedes aprender buenas prácticas de los UI Kits existentes: cómo

están diseñados los componentes (dimensiones, márgenes y paddings), qué
elementos los componen (formas, textos, iconos), y qué tamaños son apropiados.
Beneficios del uso de UI Kit
3. Versatilidad: Aunque para algunas personas puede resultar limitante
trabajar con componentes prediseñados, el comenzar a trabajar de una base
bien estructurada hace más simple comenzar a realizar cambios y
adaptaciones para obtener el resultado buscado, ya que el cambio de
estilos es mucho más rápido.
4. Coherencia y consistencia: Cada elemento colocado en el UI Kit tiene un
propósito que mantiene la relación lógica entre sus partes y componentes. Y
no solo se refiere a los elementos per se, sino que permite unificar atributos
de estilo visual únicos como fuentes, colores, y tamaños permitidos en el
diseño.
La creación de estos kits forma un lazo con los desarrolladores de nuestro proyecto, ya que
ayudan en la creación del código y a mantener el respeto visual planteado por nosotros.
Pestaña “Inspect” (Figma)
Los desarrolladores pueden chequear

fácilmente el código que crea nuestro
elemento (en este caso, un componente
“button”) para imitarlo a la perfección sin
necesidad de explicaciones.
Formatos
Si bien hay gran cantidad de UI Kits en formatos .psd (Photoshop), no

se recomienda utilizarlos para diseñar UI, aunque sí para el uso y
armado de mockups. Para todo lo demás, necesitamos utilizar
elementos .svg (vectorizados), archivos .ai (Illustrator), o archivos .pdf
editables para que puedan ser escalables, livianos y reutilizables.
Sin embargo, la mejor manera de presentar nuestro UI Kit es

hacerlo mediante archivos de softwares de diseños de interfaces,
tales como Sketch, Figma o Adobe XD.
¿Qué debe incluir un UI Kit?
Para que un UI kit pueda ser útil, usable y escalable, un factor primordial
es ser muy ordenado: cualquiera debe poder encontrar fácilmente un
componente o cierta información o un color.
Cada elemento debe estar nombrado bajo una norma establecida. La

mayoría de los softwares para diseñar interfaces, como Sketch, Figma o
Adobe XD, cuentan con la convención de poder ordenar elementos bajo
categorías en los Styles de la barra de opciones de herramienta.
Lo importante es dejar en claro las directrices para que quien vaya a usar
un Kit digital pueda hacerlo con total seguridad y no comprometer los
tiempos ni la calidad del producto final.
Sistema de color / Paleta de color
Definir al menos 3 colores:
● Color primario
● Color secundario
● Color acento
Se puede incluso añadir colores para la

comunicación:
El color de fondo predeterminado y el

color de la tipografía.
La regla 60 - 30 - 10
La regla 60 - 30 - 10 es conocida como la proporción ideal del color y es aplicada en
diferentes aspectos del diseño: gráfico, moda e interior.
Esta regla explica que podemos usar tres colores completamente distintos, pero
que lo verdaderamente importante es tener un control en la cantidad de color que
usamos de cada uno.
● El color dominante de la marca, que normalmente será asociado como
nuestro color corporativo, inundará el 60% de nuestra web.
● El 30% irá destinado a un color que acompañará al color dominante, pudiendo
hacer juegos y composiciones de entre ambos.
● Y el último color, el menos presente en la web, tendrá solamente un 10% de
protagonismo. Normalmente se usaría para Call to Actions que nos faciliten la
navegación en la web.
La regla 60 - 30 - 10
Se debe escoger un color dominante y usarlo en el 60% del espacio, otro secundario
para que esté en un 30% y un último color para el 10% restante. Sí, solo 3 colores.
La regla 60 - 30 - 10
El color primario debería ser nuestro color pleno. El color secundario puede ser un
color diferente, pero se lo suele crear utilizando el color primario bajando su
saturación a 5 y aumentando el brillo a 100. El acento puede ser un color
complementario del primario.
Sistema de íconos
Definir cuáles serán los íconos a utilizar y
sus estados:
● Activo
● Inactivo
Se puede incluir estados de alerta y

aprobación también para determinados
íconos:
como x-marks, trash-cans y check icons
Tipografías
Definir la familia y variable tipográfica
que se utilizará para, al menos, las
siguientes jerarquías:
1. Títulos
2. Subtítulos
3. Citas
4. Párrafos y Textos
5. Botones
Color en tipografías
Hoy en día, las interfaces cada vez están más limpias y más blancas (fondos), por
eso es importante tenerlo en cuenta al elegir el color de nuestras tipografías.
El de la izquierda usa negro #000000 y el otro usa un azul muy oscuro #15163D.
Parecen negros los dos, pero no lo son. ¿Por qué esto es tan importante?
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.
Componentes
Tab Bar
Pagination
Componentes
Breadcrumbs
Slider
Componentes
Tags
Notification
Componentes
Progress bar
Loader
Componentes
Toast
Tabs
Componentes
Radio button
Checkbox
Componentes
Tooltips
Search field
Grillas y columnas
Comunicar cuál será el sistema de
grillas y columnas a utilizar
● Estilo (columna o grilla)

● Cantidad de columnas
● Márgenes
● Calles
● 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.
El estilo creado aparecerá en el panel de
4. Escribir nombre opciones de herramienta listo para su uso.
5. Presionar “Create Style”
Una vez cargados todos nuestros estilos, podemos editar nuestras pantallas desde el
ícono “Styles” de una forma mucho más rápida y consistente.
Ver en el ejemplo siguiente:

Sistemas de diseño
Los sistemas de diseño (Design System) son reglas y guías que

establecen el punto de partida y la organización de un diseño. De
esta forma, se facilita el trabajo en equipo haciendo que todos los
miembros estén alineados. Recoge tanto la filosofía de una marca,
como el tono y la forma de comunicación.
En este documento se detallan muchas guías de trabajo, lo que

consigue que los diseñadores se puedan centrar en problemas más
complejos, evitando los relacionados únicamente con el estilo.
UI Kit vs. Sistemas de diseño
¿En qué se diferencian con los UI Kit?
La principal ventaja de los sistemas de diseño es que son documentos vivos: es un
modo de trabajo en equipo, una manera de establecer valores y principios que
identifican el proceder para crear el producto final. Están específicamente
adaptados al proyecto y se crea una guía de estilo que puede utilizar todo el
equipo, no solo los diseñadores. Es decir, los sistemas de diseño son transversales
y afectan a todos los aspectos del producto, desde el contenido hasta lo
puramente visual.
Los UI Kits, en cambio, son documentos cerrados que nos sirven de referencia en
el desarrollo de una interfaz. Son plantillas para facilitar el trabajo, lo que se
puede volver en nuestra contra si no las personalizamos adecuadamente al
proyecto en el que estás trabajando.
Ejemplos de Sistemas de diseño
🔗 Sistema de diseño - Material Design 🔗 Sistema de diseño - Human Interface

(Utilizado en diseños de Google) (Utilizado en diseños de Apple)
🔗 Sistema de diseño - Andes UI

(Utilizado en Mercado Libre/Pago)
🔗 Sistema de diseño - Freddicons

(Utilizado en Mailchimp)
🔗 Sistema de diseño - Polaris

(Utilizado en Shopify)
Alta fidelidad (Hi-Fi)
Los wireframes de alta fidelidad permiten un mayor acercamiento al

resultado final. En ellos se utiliza contenido real y pueden contener
imágenes o color para especificar llamados a la acción y puntos de
decisión, íconos, y otros elementos que aporten detalles. Es lo más
cercano al producto final que podemos crear.
En este tipo de wireframes, la interacción y el contenido reinan por
sobre la simpleza, lo que permite entregar un trabajo más acabado
que permitirá realizar correcciones conscientes y aterrizadas sobre el
proyecto. Su gran ventaja es que requiere menos imaginación del
cliente para comprender un prototipo.
Para que un proyecto sea considerado en alta fidelidad, debemos volcar todo lo
realizado con anterioridad en nuestro UI Kit a nuestro prototipo funcional y ser lo
más realistas posibles en cuanto a contenido:
● Todas las pantallas que componen el proyecto deben estar creadas.
(En nuestro caso mínimo las pantallas del Happy Path)
● El prototipo funcional debe encontrarse perfectamente creado.
● El contenido (los titulares, cuerpos de texto, descripciones y demás) deben ser
las que planeamos mantener al momento de llevar a cabo el diseño
(programadores).
● Debe tener imágenes reales del proyecto
Para continuar con el Proyecto Final que estamos desarrollando vamos a crear el UI Kit
correspondiente a nuestro proyecto, el cual deberá incluir:
● Paleta de color: primario, secundario y acento y a parte el color de fondo y el de tipografía, todos
con sus respectivos códigos hexadecimales por ej: #58C3BB
● Jerarquías tipográficas: Tipografía correspondiente a las guidelines y sus variables tipográficas
con sus muestras ( light - medium - bold - italic) para títulos, subtítulos, párrafos, citas, botones y
lo que se necesite.
● Sistema de íconos: estado activo y estado desactivado.
● Componentes: tales como barras de navegación superiores e inferiores, tarjetas, botones (con
sus variables), formularios, modales, etc.
● Ilustraciones y figuras: sólo si el proyecto lo requiere.
Cómo mostrar el UI kit: diferenciar por medio de títulos qué elementos estamos mostrando y todo
se presenta en un archivo unificado visualmente atractivo.
En otra slide no olvidar mostrar la evolución de pantallas desde wireframes a mano a alta fidelidad.
Proyecto Final
Fecha de la 2da Pre entrega:

Clase 26
Semana del 31 de Octubre
Ejemplo de entrega
Recordá:

Nos vemos pronto
DISEÑO UX/UI
Clase 26
Segunda Preentrega del Proyecto
Segunda Preentrega del Proyecto Final Obligatorio
La segunda pre entrega de este curso se realiza mediante el link al

“Formulario de Segunda Preentrega”.
1 solo representante del equipo debe completar en el formulario:
● Nombre del equipo

● Nombre completo de los integrantes del equipo
● Link al Proyecto en formato Google Slides
● Responder si o no en el listado de tareas
¡Felicitaciones!
Ya completaron la segunda
parte del curso: Diseño UX/UI
Primera Preentrega:

preocupa?...

● Vocabulario o Errores (Óptimo, Error menor, Error mayor - que no me permite operar)
propuesta?).

● Biografía.
● Intereses
● Una frase.


debe tener mi app.
(versión 2.0).



● User persona
● MVP
Aclaraciones: Para el User flow deben utilizar las figuras geométricas sugeridas en esta clase como código para
los diagramas, el diagrama se realiza de izquierda a derecha, arriba a abajo, tiene un comienzo y un fin, en lo
posible acomodarlo de forma que no se crucen las flechas.
Segunda Preentrega:
Comenzaremos realizando el boceto del Wireframe a mano de nuestro “Happy Path”, es decir el
camino feliz que recorre el usuario para solucionar su problema en nuestra app.
Empieza por Registrarse en la app, llega a la Home, y luego las siguientes pantallas para completar
el happy path. Luego de tener todos los bocetos de las pantallas a mano y usándolos de referencia
haremos los Wireframes Digitales en Figma utilizando los elementos provistos para facilitar la tarea.
Para tener claro que pantallas voy a diseñar necesitaremos previamente tener hechos:
● Task Flow
● User Flow
● Mapa de Sitio
● MVP + POV + Storyboard
Aclaración: Los wireframes digitales van a estar en Fidelidad Baja, es decir, en escala de grises, con
los elementos dados, sin el contenido de texto específico, ni imágenes aplicadas.
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 digitales
Aclaraciones: Guarden todo el proceso, es decir guarden los wireframes digitales y luego sobre una
copia incorporen los patrones de diseño. Para esta tarea utilizaremos el Anexo de la clase 13.
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 digitales (En fidelidad baja, clase 12)
● Wireframes con patrones de diseño (En fidelidad baja, clase 13)
Aclaraciones: Ahora que haremos el prototipo funcional pasaremos a una Fidelidad media, es decir,
continuamos en escala de grises, con pantallas diseñadas con los elementos dados en la clase 13, ya
tenemos las pantallas diseñadas para Android o IOS, con las medidas de uno de los modelos de
celular que ofrece Figma, con partes del texto específico de mi proyecto (lo que permita
comprender y ubicar al usuario en una prueba de usabilidad) y sin imágenes.
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.
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.
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 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.
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.
Crear un Moodboard en Ai con imágenes que hablan solas (sin textos o narraciones) sobre el
proyecto y temática que abarca. Tener en cuenta para armarlo y seleccionar las imágenes, las tres
palabras clave que representen y guíen la estética del proyecto, (los valores y el alma del proyecto.)
Puede incluir imágenes de:
● Emociones que provoca en las personas.

● Acciones relacionadas.
● Colores que generan la sensación que ustedes quieran generar con su app.
● Texturas relacionadas a la temática.
● Elementos relacionados a la temática.
● App que utilizan como modelo o inspiración, o alguna que es como esperan que luzcan al
finalizar el curso en fidelidad alta.
Aclarar cuáles fueron las tres palabras clave fuera del moodboard.
Tarea para el Proyecto final
Vamos a utilizar todo lo visto en clase para definir una Paleta de 3 colores:
1 principal, 1 secundario y 1 acento (3 como lo indica Android pero si diseñas para IOS únicamente
vas a utilizar 1 color principal).
Asegurate que los colores o el color que elijas exprese el alma del proyecto que estás diseñando.

● 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).
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.
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.
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?
Para continuar con el Proyecto Final que estamos desarrollando vamos a crear el UI Kit
correspondiente a nuestro proyecto, el cual deberá incluir:
● Paleta de color: primario, secundario y acento y a parte el color de fondo y el de tipografía, todos
con sus respectivos códigos hexadecimales por ej: #58C3BB
● Jerarquías tipográficas: Tipografía correspondiente a las guidelines y sus variables tipográficas
con sus muestras ( light - medium - bold - italic) para títulos, subtítulos, párrafos, citas, botones y lo que se necesite.
● Sistema de íconos: estado activo y estado desactivado.
● Componentes: tales como barras de navegación superiores e inferiores, tarjetas, botones (con
sus variables), formularios, modales, etc.
● Ilustraciones y figuras: sólo si el proyecto lo requiere.
Cómo mostrar el UI kit: diferenciar por medio de títulos qué elementos estamos mostrando y todo
se presenta en un archivo unificado visualmente atractivo.
En otra slide no olvidar mostrar la evolución de pantallas desde wireframes a mano a alta fidelidad.
Ejercicio Práctico
Clase 26
Exposición de los proyectos
Proyecto Final
Fecha de la Entrega Final:

Clase 33
Semana del 28 de Noviembre
Recordá:

Nos vemos pronto
DISEÑO UX/UI
Clase 27
Elevator Pitch
Segunda Preentrega Elevator Pitch Motion
● Exposición de proyectos ● ¿Qué es y para qué sirve? ● ¿Qué es el Motion?

● Ejemplos en clase ● 12 principios de UX en
● Estructura del elevator Motion
pitch ● Anatomía de las
● Storytelling transiciones
● Tarea para el Proyecto Final ● Microinteracciones
Design Thinking
Wireframe Digital
Color + Tipografía
¿Qué es Elevator Pitch?
Es un discurso muy breve, claro y conciso sobre nuestro proyecto.
En un ascensor tenemos aprox. 2m para comentarle a alguien sobre
nuestro proyecto.
Buscaremos mediante este relato, impresionar, explicarle, incluso
venderle nuestra idea a otra persona.
Es una práctica muy común cuando se busca inversionistas para que
se interesen en desarrollar el diseño que hemos realizado.
El objetivo final sería concretar nuestra idea, y desarrollar nuestra app.
Cada palabra cuenta:
Para elaborar un “Elevator Pitch” tenemos que pensar cuáles son los
datos más importantes relacionados a nuestro proyecto:
● Problema - Qué problemática estaríamos resolviendo

● Solución - Cuál es la solución que diseñamos
● Usuario - Contar quiénes serían nuestros usuarios
Presentación:
Lo más importante es el proyecto pero sin dejar de mencionar:
● ¿Quién sos?
● ¿Qué haces?
Recordá que estás hablando con un total desconocido y no podemos

irnos sin dejar en claro quién fué la persona que le estuvo hablando del
proyecto.
Para presentarte:
Algunos complementos que puedes incluir son:
● Una historia de éxito que te haga sentir orgulloso
● Un consejo con el que hayas logrado ayudar a un cliente
● Una frase o lema que te inspire
● La historia de cómo llegaste a apasionarte por lo que haces
● Opiniones o testimonios que te hayan dado tus clientes, colegas o

líderes de trabajo.
Dejar bien en claro y resaltar:
● ¿Qué nos diferencia de lo que ya existe?
Evitando que sea demasiado técnico, con lenguaje

específico que solo usen nuestros usuarios
(abreviaturas o nombres de moda), o con un lenguaje
demasiado formal y acartonado, que dificulte su
comprensión y generar empatía.
El comienzo:
● La primera frase que digas es la más importante.
Es el puntapié inicial que determinará si a tu receptor

le va a interesar el resto de la información que le des
o simplemente va a estar esperando que se abran las
puertas del ascensor lo más rápido posible.
Podrías comenzar con:
● Una afirmación llamativa
● Una cifra sorprendente
● Una historia o anécdota personal
● Una cita de un famoso que se relacione con el tema
● Una metáfora o analogía para explicar un proyecto complejo.
No estamos hablando de datos inventados, sino de datos basados en la

realidad que resulten de una investigación.
Consejos:
No se trata de mentir, ni de decir cualquier cosa con tal de

impresionar, sino de investigar sobre nuestra temática y
encontrar datos lo suficientemente llamativos como
para que nos escuchen y que se relacionan
perfectamente con nuestro proyecto y todo lo que
fuimos desarrollando hasta el momento.
Debemos practicarlo hasta que no queden dudas que
cualquier persona puede comprenderlo, que quede clara
la ventaja que estás proponiendo, que quede claro qué
problema resuelves y a quien. En 2 min. como máximo.
¿Por qué es importante?
Es un recurso muy efectivo porque apela a la forma en la que
funciona la mente humana.
Los datos que nos impresionan van a ser más fáciles de recordar,
vamos a poder procesarlo de una forma mucho más profunda de lo
que procesamos otro tipo de información más larga y tediosa.
Toda la información que demos en el pitch debe ser importante o
será recortada del mismo.
Recordemos que las emociones juegan un papel muy importante
también. Una historia que cala hondo o toca un punto sensible
puede desencadenar reacciones muy fuertes o memorias
profundas.
Ventajas de crear y diseñar nuestro elevator pitch:
Al vivir en un mundo cada vez más competitivo, resulta

vital tener en mente un mensaje de pocos minutos con
el que transmitas tu forma de trabajar e inspires confianza.
También puede ser una buena estrategia en actividades
de networking, conferencias, llamadas de seguimiento e
incluso en entrevistas de trabajo o ferias de empleo.
Te ayuda a presentarte ante posibles clientes y
empleadores como un profesional confiable y capaz.
Ejercicio
Clase 27
https://youtu.be/2b3xG_YjgvI
Práctica de tu elevator pitch
(máx. 2 min.)
Ejemplo:
La fórmula que puedes aplicar es:
Quién soy + verbo + destinatario + problema + resultado + objetivo
De forma aplicada:
«Soy Graciela, ayudo a mujeres emprendedoras que no saben cómo
abrir su propio ecommerce para expandir en un 20 % sus oportunidades
de venta».
Cierre: Incentiva a la inversión o acción de forma atractiva y convincente.

Consejos indispensables:
Lee tu discurso en voz alta y asegúrate de que suene natural. Si el tono es demasiado
formal, podrías causar una impresión de tirantez. En cambio, haz que sea conversacional. Esto
mantendrá a tu audiencia cautivada y más propensa a continuar la conversación.
Sé honesto con los datos que brindes. Es importante que no prometas cosas que no podrás
cumplir; sé realista y objetivo. De lo contrario, lo único que lograrás es manchar tu imagen o
reputación.
Conoce las dudas más frecuentes. Tómalas en cuenta y prepara respuestas convincentes.
Prepárate para preguntas sorpresivas. Si la persona que está escuchándote muestra un

interés genuino y te hace preguntas de las cuales no tengas respuestas preparadas o
desconozcas los datos, descuida, no tienes porqué saberlo todo. Sé honesto y admite que en
ese momento no tienes la información solicitada, pero que realizarás una investigación
posterior y te comprometes a compartir el dato más adelante. Solo recuerda dar seguimiento.
Consejos indispensables:
Adapta tu discurso para todo tipo de público. Debes tener un
mensaje más sencillo en caso de hablar con un posible cliente o
usuario que no conozca ese vocabulario. No descartes a nadie. El
objetivo de tu mensaje es que cualquiera que lo escuche pueda
comprenderlo.
Mantén tu discurso orientado a objetivos, es decir, «Ayudo a
compañías como la suya a aumentar la producción hasta en un 30%».
Siempre ofrece una tarjeta de presentación o envía una solicitud
para que te conectes con tu prospecto en LinkedIn.
Sé amigable y engancha la atención de tu interlocutor; además,
practica tu discurso para que sea limpio, conciso y con buen ritmo.
Para ir finalizando con el Proyecto Final que estuvimos desarrollando durante todo este curso:
Vamos a redactar un Elevator Pitch aplicando las técnicas vistas en clase.
En resumen debería consistir en:
● Presentación.
● Dato llamativo.
● Usuario - Problema - Solución
● Elemento que te diferencia de tu competencia.
● Cierre.
Condiciones:
● Que sea breve, claro y conciso.

● Que cuente con tres partes: Comienzo - Desarrollo de la idea/proyecto - Cierre.
● Que dure 2m en grabación.
Ejemplo de entrega
¿Sabías que 18 millones de personas en Argentina han tenido
sentimientos de depresión, soledad o miedo durante la última semana?
Es difícil tomar decisiones cuando estamos a punto de llegar a un estado de angustia. Pero la mayoría de
nosotros tenemos un sentido que nos avisa cuando las cosas están comenzando a girar fuera de control.
En ese momento buscar ayuda se complica aún más cuando no sabemos dónde comenzar a buscar, lo
peor que podría suceder es tardar años en encontrar al profesional más adecuado para nosotros.
La percepción que tenemos del terapeuta, su edad, sexo, que hable mucho o poco, nos importa más de lo
que imaginamos, tanto como para determinar cuál elegiremos para tratarnos y también si continuaremos
con la terapia durante el tiempo que sea necesario para sentir una mejoría.
Lo más importante en una terapia es confiar y sentirse a gusto.
Por eso creamos “Buscador de Psicólogos” una app donde el usuario encontrará al psicólogo que tenga
las características que necesite y prefiera, en unos pocos clics llegará a reservar una primera sesión de la
manera y con el profesional que elija de la lista de perfiles que cumplen con los resultados de su búsqueda
personal. Simple, rápido y muy efectivo. Ya estará listo para hablar y comenzar a desenredar todas sus
problemáticas.
Me llamo Irina y soy diseñadora de experiencias e interfaces de usuario y me gustaría mostrarte cómo
funciona nuestra App.
Recordá:

Nos vemos pronto
DISEÑO UX/UI
Clase 28
Motion
Elevator Pitch Motion Accesibilidad
● ¿Qué es y para qué sirve? ● ¿Qué es el Motion? ● ¿Qué significa

● Ejemplos en clase ● 12 principios de UX en accesibilidad?
● Estructura del elevator Motion ● Principios de accesibilidad
pitch ● Anatomía de las web
● Storytelling transiciones ● Niveles de conformidad
● Tarea para el Proyecto Final ● Microinteracciones ● Plugins útiles
Design Thinking
Wireframe Digital
Prototipo en alta y Motion

¿Qué es Motion?
Es la animación de la interfaz de usuario (del inglés Motion - Movimiento) es el arte de
usar el movimiento de las animaciones dentro de una interfaz para ayudar a guiar la
experiencia del usuario y comunicar: una secuencia, el siguiente paso, una transición o
una acción para un producto digital.
En el diseño UX/UI, la animación no es solo una forma de deleitar a las personas que
utilizan nuestros productos, sino una herramienta funcional que hace que las
experiencias sean fáciles, dinámicas y divertidas. Es una mejora de la usabilidad.
Existe una rama de diseño UX que se especializa en optimizar esta relación entre el
usuario y el producto: el Diseño de Interacción (Interaction Design o IxD)
Beneficios de su aplicación
Cuando diseñamos una interfaz estática, no se termina de comunicar

la interacción que tendrá la misma. Para ello, necesitamos crearla a
partir de un prototipo dinámico que nos ayudará a:
1. Orientar a los usuarios

2. Dar feedback sobre el estado de una acción
3. Educar y hacer foco en lo específico
Al volverla dinámica con animaciones, ya no dependemos de la

imaginación de quien navegue nuestro prototipo para presentar
cómo se verá finalmente nuestro diseño.
Los 12 principios de UX en Motion
Los Doce principios básicos de la animación fueron presentados en 1981 por
los animadores Ollie Johnston y Frank Thomas de Walt Disney Animation
Studio en su libro The Illusion of Life: Disney Animation. Muchos animadores
llaman a este libro la “biblia de la animación” y en 1999 fue votado como el
mejor de los libros de animación de todos los tiempos.
El objetivo de documentar estos principios fue crear guías para producir

animaciones más realistas que se apegan un poco más a las leyes básicas
de la física, aunque también se tratan temas más abstractos, como la
sincronización emocional y el atractivo de un personaje.
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.
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
12. Dolly y Zoom
Ambos recursos son movimientos de
cámara que acercan o alejan objetos al
usuario. Esto le da profundidad al diseño,
permitiendo al usuario indagar en áreas o
contenidos adicionales profundizando en
su experiencia.
Anatomía de las transiciones
Las animaciones y transiciones de los elementos de la UI se clasifican como:
1. Persistentes: el elemento permanece visible todo el tiempo pero cambia

de forma
2. Salientes: se difumina hasta que desaparecen.
3. Entrantes: aparecen en la pantalla desde una difuminación.
4. Estáticas: la transición no afecta al elemento
Anatomía de las transiciones
Persistentes Salientes Entrantes Estáticas

Microinteracciones
Las microinteracciones son elementos sutiles de diseño que transmiten el estado de
un producto digital. Su propósito principal es proporcionar una respuesta visual e
instantánea creando un momento agradable y sorprendente para el usuario. Se
encuentran presentes en toda la aplicación.
Es habitual que las microinteracciones funcionen siguiendo los siguientes pasos:
1. Se inician mediante un disparador o trigger.

2. Se ponen en marcha una vez que se cumplen ciertos requisitos
predeterminados.
3. Proporcionan un feedback al usuario sobre qué está sucediendo
Principales Ventajas
En términos de UX, el uso de microinteracciones proporcionan una experiencia más
comprensible y visual, contribuyendo positivamente a la apariencia del producto o
servicio. Las principales ventajas de las microinteracciones son:
1. Aumentan el engagement con la marca.

2. Muestran el estado del sistema.
3. Previenen posibles errores entre el usuario y el proceso.
4. Conseguir que el usuario interactúe con el contenido.
Además, el reducido tamaño de los elementos hace que los tiempos de carga no
sufran y permiten que el usuario se sienta emocionalmente conectado con la
interfaz.
Consejos para diseñarlas
El diseño de microinteracciones es el trabajo que se centra en los detalles de una aplicación
y como todo proceso de diseño se deben tener en cuenta unas reglas:
● Identifica el problema y establece un objetivo: piensa en el objetivo de las

mismas, en el tipo de animación y no hagas uso de ellas si no es necesario.
● No te excedas en su uso: si utilizamos demasiadas interacciones el usuario puede

verse abrumado o distraerse del proceso que está realizando, por eso deben ser
siempre controladas y pensadas para su finalidad.
● Usa interacciones naturales: si usamos una transición no adecuada, podemos

hacer que el usuario no se sitúe o no entienda lo que está pasando, y por lo tanto no
pueda llegar a su objetivo de uso.
Consejos para diseñarlas
● Simplicidad y sutileza: debemos evitar que el usuario se pregunte qué ha pasado
o en qué pantalla está. Esta desorientación hará que el usuario no termine el
proceso y se quede frustrado.
● El tiempo adecuado: existen muchísimos tipos de interacción y debemos
establecer el tiempo que deben durar para que el usuario no se distraiga ni pierda
el foco. No es lo mismo una transición entre pantallas, que una carga de datos,
que un efecto al hacer scroll.
Varias empresas han creado sus propios principios de animación y forma de
abordar este contenido y, para establecer estos límites, el motion se suele incluir
dentro de los parámetros de un sistema de diseño. De esta forma nace el
término UI Motion Design. Tomemos de ejemplo Material Design en su apartado
“Understanding Motion”.
Ejemplos de Microinteracciones
Ejemplos de Microinteracciones
Interacciones en Figma
Debemos evitar que el usuario se pregunte qué ha pasado o en qué pantalla
está. Esta desorientación hará que el usuario no termine el proceso y se quede
frustrado.
Los softwares de diseño de interfaces tienen la ventaja de permitir animaciones
dentro del prototipado. Dedicar tiempo al diseño de interacciones nos ayudará a
que la presentación visual de nuestra aplicación se entienda de manera correcta.
Veamos cómo realizar algunas de ellas:

After Delay (Transiciones automáticas)
Permite activar una acción después de que el usuario haya pasado una cierta
cantidad de tiempo en un fotograma determinado. Deberá establecer la duración del
retraso en milisegundos (ms).
Interacción desencadenante:
After Delay
Milisegundos
Tipo de interacción:
Change to (pueden ser
otras)
Qué abre: Status “On”

Scrolls (Desplazamiento)
Controla cómo los usuarios pueden interactuar con el contenido que se extiende más allá
de las dimensiones de un dispositivo:
Asegurarse de que el contenido a Asegurarse de seleccionar

scrollear se encuentre dentro de correctamente el tipo de
un frame con Clip content activo desplazamiento (Pestaña
(Pestaña Design) Prototype)
Overlay (Superposiciones)
Los prototipos a menudo requieren transiciones entre pantallas. Para algunas
interacciones, es posible que desee mantener al usuario en la misma pantalla, pero
mostrar más información. Las superposiciones le permiten mostrar nuevo
contenido o información sobre la pantalla actual en un prototipo.
Algunos ejemplos de su uso:
1. Alertas o confirmaciones
2. Menús interactivos (drawers)
3. Información adicional
4. Teclados en pantalla
Overlay (Superposiciones)
Interacción
desencadenante: On tap /
On click (también pueden Qué abre: Pantalla “Modal”
ser otras)
Posición Rápida
Tipo de interacción: Open
Overlay
Añadir Fondo detrás del

Posición: Centered overlay: Activo/Inactivo
Cerrar al clickear fuera: Color y opacidad del fondo

Activo/Desactivo
Smart Animation (Animación inteligente)
Busca capas coincidentes, reconoce diferencias y anima capas entre cuadros en un
prototipo. Es muy importante que las capas tengan el mismo nombre para que la
animación pueda realizarse, de otra forma la idea de smart animation se rompe.
Tipo de
Estilo de animación: animación:
Ease in and out Smart animate
back (se puede
elegir la que se
prefiera)
Milisegundos
Smart Animation (Animación inteligente)
El diseño contiene tarjetas grandes y tarjetas chicas, sin embargo, la nomenclatura debe ser
exactamente la misma para las variantes de ambas si queremos que funcione
correctamente el smart animation.
Ejercicio
Práctico N°28
→ Link al archivo Figma
Veamos las interacciones en acción

Para ir finalizando con el Proyecto Final que desarrollamos durante todo este curso:
Vamos a incorporar animaciones (y/o microinteracciones) siguiendo los 12
principios de motion.
Las animaciones deben cumplir con alguno de los siguientes puntos:
● Orientar a los usuarios
● Dar feedback sobre las interacciones
● Hacer foco en algo específico
● Ocultar el tiempo de carga o espera
Mostrar con imágenes los desgloses de las animaciones y microinteracciones
incorporadas al prototipo e indicar con qué puntos cumple.
Ejemplo de entrega
Animaciones en el prototipo
● Onboarding - Ease in y Smart animate
● Home - Gif animado y Microinteracciones en los botones
● Buscador - Los filtros son clickeables y Scroll
● Reseña de Psicóloga - Corazón y Estrellas interactivas
● Agenda - Selección de fecha y Botón AM/PM interactivos

Open overlay confirmando la sesión
● Chat - Simulación de conversación con la terapeuta

Recordá:

Nos vemos pronto
DISEÑO UX/UI
Clase 29
Accesibilidad
Motion Accesibilidad Digital Heurísticas
● ¿Qué es el Motion? ● ¿Qué significa ● Evaluación heurística

● 12 principios de UX en accesibilidad? ● Los 10 principios de Jakob
Motion ● Principios de accesibilidad Nielsen
web ● Tarea para el Proyecto
● Anatomía de las
Niveles de conformidad Final
transiciones ●
● Microinteracciones ● Plugins útiles
● Tarea para el Proyecto Final ● Tarea para el Proyecto
Final
Design Thinking
Wireframe Digital Accesibilidad
Prototipo Funcional
ITERAR
¿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.
Si bien hay planos inclinados que En este caso, el mismo
funcionan como rampa, es cuestionable producto se adapta a diferentes
el hecho de que una persona con un alturas sin ningún esfuerzo
cochecito de bebé o silla de ruedas extra por parte de ningún
tardaría muchísimo más tiempo. usuario.
¿Qué es el Diseño Universal?
El diseño universal es un concepto que
Diseño
consiste en crear productos, entornos Universal,
Logo ONU.
y servicios que sean utilizables por
todas las personas en la mayor medida
posible, sin necesidad de que se
adapten o especialicen.
Su objetivo es simplificar la vida de
todas las personas, haciendo que los
productos, las comunicaciones y el
entorno construido por el hombre sean
más utilizables por la mayor cantidad
posible de personas con un costo nulo o
mínimo.
¿Qué es la accesibilidad digital?
La accesibilidad digital consiste en desarrollar productos que puedan ser
utilizados por el mayor número de usuarios con necesidades específicas;
debidas a limitaciones del entorno, o del modo que sean capaces de percibir,
entender, navegar e interactuar con dicho sitio.
Ley de accesibilidad web: 26.653 A nivel nacional
Según esta ley, el Estado Nacional, los
entes públicos no estatales, las
empresas del Estado y las empresas
privadas concesionarias de servicios
públicos, deben respetar en los
diseños de sus páginas web, las
normas y requisitos sobre
accesibilidad de la información que
faciliten el acceso a sus contenidos a
todas las personas con discapacidad.
World Wide Web Consortium (W3C) A nivel internacional
Es el organismo encargado a nivel

mundial de establecer los lineamientos
y estándares de diseño accesible web.
Reciben el nombre de Pautas de

accesibilidad de contenido web
(WCAG).
Cada país decide si adherirse o no a las

mismas.
Pautas de diseño web accesible
El diseño debe ser:

1. Perceptible
2. Operable
3. Comprensible
4. Robusto
1 . Diseño perceptible
La información y los componentes ● Texto alternativo

de la interfaz se deben presentar ● Medios tempodependientes
en formas que todas las personas ● Adaptabilidad
puedan percibir.
● Contenido distinguible
1 . Diseño perceptible - Texto alternativo
Es necesario ofrecer un texto

alternativo o alt text para el
contenido que no esté escrito.
El lector de audio reproduce la

descripción para las personas que
necesitan asistencia con respecto
a la imagen.
1 . Diseño perceptible - Medios tempodependientes
Siempre que aparezca contenido

multimedia como animaciones o
videos, es necesario que exista
una alternativa para que todos
puedan seguir el ritmo, como
subtítulos y transcripciones.
1 . Diseño perceptible - Contenido distinguible
Debemos facilitar a los usuarios

ver y oír el contenido, incluyendo
la separación entre fondo y plano
principal.
Tenemos que establecer los

nombres de las secciones y
señales que describen
correctamente su contenido.
2. Diseño operable
El usuario debe poder manejar ● Accesibilidad por teclado

los componentes de la interfaz ● Tiempo suficiente
y la navegación. ● Evitar destellos
● Navegabilidad
2 . Diseño operable - Accesibilidad por teclado
Es necesario ofrecer una forma de

controlar las funciones desde el
teclado, sin requerir tiempos
específicos para llevar a cabo
acciones.
2 . Diseño operable - Tiempo suficiente
Hay que darle a los usuarios el

tiempo necesario para usar e
interactuar con el contenido.
Cada persona tiene un ritmo

distinto, por lo que no es
recomendable el uso de
secuencias automáticas de
pantallas o vídeos.
2 . Diseño operable - Evitar destellos
Evitar destellos y animaciones

rápidas que puedan afectar a
personas con desórdenes
neurológicos.
Algunas personas pueden

padecer la existencia de destellos
en pantalla.
2 . Diseño operable - Navegabilidad
Guiar la navegación de los

usuarios por nuestra app,
facilitando el cumplimiento de
tareas y destacando los elementos
necesarios.
3. Diseño comprensible
Garantizar información y ● Legible

acciones fáciles de entender por ● Predecible
parte de nuestros usuarios.
● Entrada de datos asistida
3 . Diseño comprensible - Legible
Las palabras y textos que se

utilizan en la interfaz deben
reflejar las acciones, poder
identificarse y leerse fácilmente,
para garantizar una buena
3 . Diseño comprensible - Predecible
La apariencia y la forma de utilizar

las interfaces digitales debe ser
previsible.
Debemos mantener la
consistencia entre los
componentes que comparten
funciones similares y las acciones
relacionadas.
También es necesario advertir

acciones decisivas.
3 . Diseño comprensible - Entrada de datos asistida
Es muy importante guiar la

entrada de datos por parte de los
usuarios y señalar errores.
4. Diseño robusto
Tanto el diseño como el contenido

debe ser robusto. Lo suficientemente
firme y consistente para ser bien ● Compatibilidad
interpretado.
4 . Diseño robusto - Compatibilidad
Es fundamental que haya una

correlación en el orden entre la
web visible y el código
desarrollado, para facilitar la
interpretación de textos
alternativos a través del lector de
pantalla.
Cuanto más compatibles sean,

mayor será la fidelidad de la
lectura.
Niveles de conformidad y prioridades
Si nos abocamos a hacer accesibles algunas pantallas, componentes o trabajar sobre
algunos rasgos en particular de nuestro prototipo, dándole mayor prioridad a la cuestión,
podemos pasar rápidamente a niveles altos de accesibilidad. Por ejemplo, empezando por
evaluar los contrastes, la legibilidad de los textos y la consistencia del diseño.
PRIORIDAD PRIORIDAD PRIORIDAD
1 2 3
No podrían acceder Encontrarán muy difícil Podrían tener algunas
a la información. acceder a la información. dificultades para acceder a la
información.
(Tiene que mejorar) (Debería mejorar)
(Puede mejorar)
Pautas WCAG
En este sentido, si evaluamos las prioridades en torno a la accesibilidad del prototipo,
podemos entender si cumplimos o no con las Pautas WCAG. Lo ideal es manejarse
siempre con una accesibilidad media o alta (AA o AAA).
A AA AAA
Baja accesibilidad: Accesibilidad media: Accesibilidad alta:

Cumple con la prioridad 1. Cumple con 1 y 2. Cumple con 1, 2 y 3.
Es accesible en un nivel Es accesible por un grupo Nivel máximo: interfaz
mínimo y un grupo de más amplio, pero sigue que puede ser accedida
usuarios no va a poder quedando gente fuera del por todos.
acceder al contenido. producto.
Plugins útiles
Color
A11y Blind
Relación color/texto Alternativas de visualización
Indica niveles de Nos muestra cómo se ven las

conformidad dentro de las pantallas desde el punto de vista
pantallas y componentes. de diferentes tipos de
daltonismo.
A11y
Siguiendo los niveles de

conformidad y prioridades,
asociados con las pautas WCAG, este
plugin revisa y nivela el uso correcto
de colores y contrastes, y la
legibilidad del contenido de texto,
en base a las jerarquías y estilos de
texto propuestos.
Nos responde con sugerencias y

posibles mejoras a realizar para
aumentar la accesibilidad de
nuestro prototipo.
Color Blind
Este plugin nos muestra nuestro

prototipo desde el punto de vista
de 8 falencias asociadas a la visión.
Nos responde con las diferentes

formas de ver el color según la
persona, los colores y matices que
puede percibir de nuestra app.
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.
Recordá:

Nos vemos pronto
DISEÑO UX/UI
Clase 30
Heurística
Accesibilidad Digital Heurísticas Autoevaluación
● ¿Qué significa ● Evaluación heurística ● Completar formulario de

accesibilidad? ● Los 10 principios de Jakob autoevaluación
● Principios de accesibilidad Nielsen
web ● Tarea para el Proyecto Final
● Niveles de conformidad
● Plugins útiles
Design Thinking
Wireframe Digital Evaluación Heurística
Prototipo Funcional
ITERAR
¿Qué significa Heurística?
La heurística es vista como el arte de inventar con la intención de procurar
estrategias, métodos, criterios, que permitan resolver problemas a través de la
creatividad, pensamiento divergente o lateral.
También, se afirma que la heurística se basa en la experiencia propia del individuo,

y en la de otros para encontrar la solución más viable al problema.
Un análisis heurístico o evaluación heurística se utiliza para identificar problemas

comunes de usabilidad de un producto para resolver problemas y así mejorar la
satisfacción del usuario y su experiencia, aumentando las posibilidades de éxito
de un producto digital.
Evaluación heurística
La evaluación heurística es el estudio y evaluación de la interfaz realizado por uno
o varios expertos en usabilidad, de acuerdo con un conjunto de reglas y
principios de diseño establecidos previamente; Estos principios que sirven de
base para la evaluación se denominan principios heurísticos. El número aceptado
como óptimo es entre tres y cinco evaluadores, que pueden encontrar hasta un
75% de los errores de usabilidad.
● Es un método razonablemente rápido de realizar.
● Cada experto proporciona diferentes opiniones a partir del mismo conjunto de
reglas.
● Es económico (si se compara con otros métodos)
● Se puede utilizar junto a otras técnicas de evaluación.
● También podría ser realizada varias veces y por los miembros del equipo.
● No es un método infalible.
¿Cuándo se realiza?
La mejor forma de encontrar errores graves de usabilidad en un sistema es
mediante pruebas de usuarios, pero dada la efectividad de una evaluación
heurística, hacer pruebas sin haber realizado antes esta técnica, podría ser un
desperdicio de tiempo y dinero; Aunque puede ser realizada en varios momentos
del proceso.
En el contexto del curso la vamos a realizar nosotros mismos, porque aunque

Nielsen demostró que es más efectiva al realizarla con expertos en usabilidad, es
posible extraer beneficios aunque no sean expertos (siempre que se
comprendan las heurísticas y su alcance). Las realizaremos antes de las pruebas
de usabilidad en alta, es decir con el prototipo con colores, contenido real e
imágenes. (Las pruebas en alta no formarán parte del curso, pero podrán ser
realizadas por los estudiantes una vez finalizado el mismo.)
¿Cuándo se realiza?
La evaluación heurística se puede hacer en diferentes momentos del proceso.
● Se puede llevar a cabo una vez que se han elaborado las primeras
propuestas y construido los primeros prototipos, puesto que esto permitirá
corregir aspectos de usabilidad antes de desarrollarlo por completo.
● También se puede hacer en la etapa de lanzamiento, una vez desarrollado,
para diagnosticar elementos de usabilidad que no eran visibles en etapas
previas.
● En el caso de proyectos de rediseño (en los que se parte de un proyecto
preexistente), es recomendable realizarla al inicio del proyecto sobre el diseño
del que se parte, puesto que los resultados ayudarán a definir algunas pautas
de la nueva propuesta.
¿Cómo realizar una evaluación heurística?
Es recomendable proporcionar a los evaluadores un escenario de uso típico, enumerando
los diversos pasos que un usuario tomaría para realizar un conjunto de muestra de
tareas realistas. Tal escenario debe construirse sobre la base de un análisis de la tarea de
los usuarios reales y su trabajo para ser lo más representativo posible del uso eventual del
sistema. (Nosotros vamos a usar el listado de tareas que ya redactamos para las métricas
de las pruebas de usabilidad)
Los evaluadores usarán el producto (prototipo) para obtener una primera idea de
interacción y el alcance del mismo. Identificarán elementos que quieran evaluar más a
fondo.
Luego, los evaluadores llevarán a cabo otro análisis, mientras aplican las heurísticas a los
elementos identificados en la primera evaluación. Se enfocarán en elementos individuales y
verán qué tan bien encajan en el diseño general.
Listado de tareas y listado de principios heurísticos
Colocar si se cumple o no.
Explicar cuál es el
problema y cómo se va
a solucionar (iterar)
Los 10 principios Heurísticos
Creados por Jakob Nielsen, el padre de la usabilidad, en 1990, nos

acercan a cumplir con el concepto de la usabilidad (facilidad de uso)
para el beneficio de los usuarios.
Los 10 principios heurísticos:
1. Visibilidad del estado del
sistema:
El diseño siempre debería

mantener informados a los
usuarios de lo que está
ocurriendo.
En el momento correcto y con los

elementos adecuados.
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.
Ejercicio
Clase 30
Realizar una evaluación
heurística sobre el prototipo
de otro estudiante
Para ir finalizando con el Proyecto Final que desarrollamos durante todo este curso:
Vamos a realizar una Evaluación Heurística de nuestro prototipo siguiendo los 10

principios heurísticos de Jakob Nielsen.
Completar un cuadro donde se indique qué principios se cumplen, cuáles principios no se

cumplen, y cómo solucionar cada problema encontrado.
Para realizar esta tarea utilizaremos:
● El listado de tareas redactado para la tarea de Pruebas de usabilidad y métricas.

● El listado de los 10 principios heurísticos vistos en clase.
Realizar un breve informe sobre los resultados de la evaluación.

Ejemplo de entrega
Evaluación Heurística
Nuestro prototipo cumple con las siguientes reglas:
● La app contiene una buena libertad de usabilidad para el usuario.
● Los íconos son visualmente distinguibles, de acuerdo a su significado conceptual.
● Todo en la app tiene su nombre, para no depender de la memoria del usuario.
● En la app hay filtros que ayudan a la eficiencia de las búsquedas y atajos.
● No existen elementos de más. Todos tienen una función en especial ya sea, guiar,
informar o accionar.
Iteramos y mejoramos:
● Utilizamos aún más la jerga del usuario.

● Creamos el Onboarding y textos que orientan en los filtros de búsqueda como por
ejemplo “Tipo de terapia”.
Recordá:

Nos vemos pronto
DISEÑO UX/UI
Clase 31
Autoevaluación
Heurísticas Autoevaluación Reporte UX y Portfolio
● Evaluación heurística
● Formulario de Autoevaluación ● ¿Qué es un Reporte UX?
● Los 10 principios de Jakob ● Armado de casos de estudio
Nielsen ● Mockups
● Tarea para el Proyecto Final ● ¿Qué es un Portfolio UX?
● Recursos útiles para continuar
aprendiendo: libros, blogs,
podcasts, etc.
Formulario de Autoevaluación
Completar el Formulario de Autoevaluación que se encuentra en la
Cartelera de Novedades del Aula Virtual de manera individual.
Cronograma
Recordá:

Nos vemos pronto
DISEÑO UX/UI
Clase 32
Portfolio y Reporte UX
Autoevaluación Reporte UX y Portfolio Entrega Final y Presentación
● Formulario de Autoevaluación ● ¿Qué es un Reporte UX?

● Armado de casos de estudio
● Entrega del Proyecto final
● Mockups ● Presentación de los
● ¿Qué es un Portfolio UX? estudiantes de sus Proyectos
● Recursos útiles para continuar
finales
aprendiendo: libros, blogs,
podcasts, etc. ● Presentación de slides y
● Tarea para el Proyecto Final Prototipo en alta fidelidad
Reporte de Investigación UX
Los reportes de investigación son los datos registrados por los
investigadores de UX transformados en información útil mediante el
análisis de la información.
El objetivo es transmitir los detalles sobre el estudio, para que se
puedan incorporar en el diseño UX y de la estrategia del producto
digital.
Presentar los resultados de una investigación es crucial en el proceso
de diseño, sobre todo cuando hay que presentarlos a audiencias fuera
del equipo de UX pero con poder de decisión.
Estructura de un reporte
Podemos organizar la presentación de un reporte UX de modo que se

logre explicar estos tres objetivos:
1. Por qué: Cuál es el objetivo que buscamos cumplir

2. Cómo: Establecer qué metodologías se utilizaron y cómo se
validaron
3. Qué: Presentar datos obtenidos, logros y hallazgos
Consejos para su redacción
Nuestro reporte tiene que recoger toda la información necesaria

para que la organización pueda tomar decisiones de forma
informada y basándose en datos.
La clave del éxito es comunicar desde la generalización hacia el

detalle específico de cómo se lograron nuestros objetivos para que las
personas que no formen parte del equipo de trabajo puedan entender
con claridad todo su desarrollo.
Veamos algunos consejos útiles a la hora de presentar visualmente

nuestra investigación:
Consejos para redactar un Reporte UX
● No enviar solo un formulario largo:
Es un error enviar por correo un informe largo que nadie va a leer por completo. Es
mucho mejor añadir un mini-informe o unas diapositivas con los hallazgos más
importantes de la investigación para dar una idea rápida de los hallazgos de la
investigación. Quien quiera profundizar, podrá leer el informe completo y detallado
de la investigación.
● No olvidar los gráficos:

La información visual ayuda a la comprensión de los datos cualitativos de la
investigación de manera rápida y clara, aunque siempre deben ir acompañados de
una explicación escrita para quien desee ahondar en los detalles.
Consejos para redactar un Reporte UX
● No enviar solo los hallazgos:
Mostrar los datos y los hallazgos mediante unas diapositivas impactantes está bien,
pero hay que dar lugar a quien quiera ahondar en la información para corroborar
que fue correctamente realizada. Es muy importante que se tenga acceso a la
calidad del trabajo.
● Que contenga la información importante/imprescindible:
Recordar primero que ningún interesado en nuestro reporte va a leer más de 40
slides, debemos intentar hacer un relato claro, conciso e interesante de cada punto
abordado en nuestro proyecto. Segundo que No estamos dando un curso de UX/UI
en nuestro reporte, debe sentirse profesional y real, por lo tanto No hagan
referencias a “tareas del curso” sino a estudios o análisis sobre la temática que
desarrollaron.
Ejemplo:
Analicemos rápidamente el siguiente caso de estudio:
→ Despegar UX - Viajar en la nueva normalidad

Casos de estudio
¿Cómo podemos trasladar estas presentaciones tan técnicas a nuestros
proyectos individuales?
Igualmente, debemos poner el foco en el por qué, cómo y qué de los
reportes UX, pero convirtiendo nuestra presentación en una historia para
volverla amena e interesante.
No queremos que quien esté mirando nuestro proyecto (ya sea leyéndolo
por su cuenta o si nosotros lo presentamos), pierda el interés. Para esto,
nada mejor que utilizar como recurso un storytelling que le aporte al
interlocutor el contexto necesario para que, de manera independiente a sus
conocimientos de metodología de diseño de producto, tenga una visión
global de la misma.
Cómo presentar mi caso de estudio
Luego de explicar cuál es nuestro objetivo (por qué), es necesario demostrar que nuestra
investigación (qué) se encuentra validada correctamente (cómo).
Contenido: Validado por:
MVP (nombre del producto y features) Investigación
User persona Entrevistas y Mapas de empatía
Competencia Benchmarking
Arquitectura de Información Card Sorting
User Flow Pruebas de usabilidad
Wireframes (evolución) Pruebas de usabilidad y Heurísticas
Diseño UI Prototipo Funcional

Imprescindibles en un caso de estudio
1. Titular
Comienza con un título grande

(puede ser el nombre de tu
proyecto o su mayor diferencial) y
una bajada que cuente de tu
proyecto. Podrías apoyarte en tu
Elevator Pitch
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.
Imprescindibles en un
caso de estudio
6. Identidad
Se deben mostrar las diferentes decisiones

de diseño aplicadas a la interfaz.
Esta sección puede incluir:
● UI kit
● Moodboard
● Atomic design
● Paleta de colores
● Logo
● Etc.
Imprescindibles en un
caso de estudio
7. Pantallas
Detallar la/s pantalla/s más destacadas de la

app.
Colocar el link al prototipo funcional, con

cuidado que no sea dirigido a la edición del
prototipo sino a la página de prueba del
prototipo, (siempre chequear el link desde
una ventana de incógnito).
Ejemplos de presentaciones
Ver en Behance
Ver en Behance
Ver en Behance
Mockups
Los Mockups, son “fotomontajes” que permiten a los diseñadores gráficos o
UI, mostrar al cliente cómo quedarían sus diseños aplicados. Un mockup,
hace que el diseño “se vea real” y nos brinda una imagen profesional.
Suelen estar diseñados en Photoshop y es tan simple como incorporar una
imagen de tu pantalla en el sector correcto del mockup.
Es lo más próximo a visualizar cómo puede estar diseñado un producto
digital en la realidad.
Se suele utilizar para:
Packaging, Papelería, Diseño de indumentaria, Publicidad, y por supuesto
Diseño UI: webs, desktop, tablet, mobile, etc
Tipos de mockups en el diseño UI
Contexto de uso:
Este tipo de mockups sirve para que los

usuarios entiendan cómo y dónde podrían
necesitar y usar tu producto digital.
Parecen fotos tomadas directamente de la

realidad, tanto el dispositivo como el
ambiente deben parecer reales.
Ejemplo de Buscador de psicólogo
Irina Kerekes
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”.
Irina Kerekes
Informativos:

desarrollar una información particular.
Suele mostrarse uno al lado del otro para

mostrar un recorrido, o para desarrollar
distintas funcionalidades a la vez.
Irina Kerekes
Identificatorios:

mostrar el estilo visual general del
proyecto.
Se enfoca en la estética y personalidad del

proyecto o temática del mismo.
Irina Kerekes
Portfolio
Tener un portfolio como diseñador UX/UI es imprescindible para cualquier
profesional de la industria. Es la mejor oportunidad de presentar tu trabajo
de la mejor manera y dar ejemplos de proyectos a detalle que expongan tu
proceso creativo y reflejan quién sos como diseñador.
Ya sea como diseñador independiente o de tiempo completo, los clientes o
empleadores potenciales casi siempre solicitarán tu portfolio para poder
conocer tu forma de trabajo.
Traducir tu flujo de trabajo completo y complejo a un formato visual es un
desafío, especialmente si querés enfocarte únicamente a UX. Sin embargo,
hay muchas formas de contar tu historia e incorporar recursos visuales.
Plataformas
Nuestro portfolio puede armarse en cientos de plataformas, cada una con sus
ventajas particulares. Pueden elegir la que más les convenga para armar su
portfolio (incluso crear su propio sitio web personalizado para presentarlo)
Recomendamos crear un perfil en:
Behance Dribbble
Y siempre mantener un perfil actualizado en:
LinkedIn
Consejos para realizar tu portfolio
● Que se comprenda claramente el área del Diseño UX/UI a la cual querés dedicarte,
un reporte puede ser extenso y abarcar todo el proceso completo, pero en el Portfolio
es conveniente intentar ir al grano y lucirte. Lo más probable es que un reclutador te
llame para desarrollar una tarea similar a la que estás mostrando que sabes hacer.
● Utiliza storytelling para describir todos los proyectos. Una de las características
principales de un UX Designer es contar historias a través de sus productos, por lo que
tu portafolio tiene que reflejar tus capacidades para conseguirlo.
● Es muy importante explicar el proceso que se ha seguido en los diseños, detallando

cómo y por qué tomaste esas decisiones en tu proyecto.
Portfolio Web
Ir al portfolio
Portfolio Dribbble
Ir al portfolio
Portfolio Behance
Ir al portfolio
¿Cómo continuamos?
Para poder seguir avanzando en tu carrera, también hay otras acciones

que puedes hacer en el día a día para no dejar de aprender.
Como toda área relacionada a la tecnología, el ámbito de la
experiencia de usuario es una disciplina que avanza continuamente,
por lo que mantenerse actualizado es casi una obligación. Para ello lo
recomendable es unirse a grupos de diseñadores UX/UI, asistir a
webinars o conferencias cada cierto tiempo, y realizar cursos de
especialización.
También es muy recomendable leer libros que traten temas técnicos u
otros que te puedan servir de inspiración.
Recomendaciones de libros
relacionados al diseño UX/UI
No me hagas pensar Las leyes de la La psicología de los

Steve Krug simplicidad objetos cotidianos
John Maeda Don Norman
Recomendaciones de libros
relacionados al diseño UX/UI
Lean UX 100 Cosas sobre la gente Resolver problemas y

Jeff Gothelf y Josh Seiden que cada diseñador probar nuevas cosas en
debe saber solo 5 días
Susan M. Weinschenk Jake Knapp
Comunidades UX
Revistas
Blogs
Comunidades UX
Podcasts
Empresas e instituciones
Comunidades UX
Organizaciones y más
UX Latam UX en español UX Friends UX Collective Memorisely

Proyecto Final
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.
Ejemplo de entrega:
Cronograma
Recordá:

Nos vemos pronto

Diseño Ux/Ui Clase 0: Presentación Del Curso

Cargado por

Copyright:

Formatos disponibles

Diseño Ux/Ui Clase 0: Presentación Del Curso

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

Diseño Ux/Ui Clase 0: Presentación Del Curso

Cargado por

Copyright:

Formatos disponibles

DISEÑO UX/UI

Bienvenida Introducción al diseño

● ¿Qué es Codo a Codo? ● ¿Qué es el diseño?

Nuestros cursos están destinados a personas jóvenes y adultas, que

● Brindar herramientas que faciliten la inserción laboral en el sector

● Full Stack Python

Los cursos son gratuitos y tienen una duración de 20 semanas.

● Codo a Codo Inicial

Cursos avanzados para egresados Full Stack:

Animate a hacer carrera en Codo

● Sitio oficial: https://agenciadeaprendizaje.bue.edu.ar/codo-a-

● Nivel inicial en programación Se dictarán 2 clases por semana con un/a

● Mail de contacto: natalia.miglino@bue.edu.ar

● Perfil profesional: www.linkedin.com/in/nmiglino

Galería de proyectos de egresados/as

Se otorga una constancia de participación en el programa.

Requisitos para obtener el diploma:

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

● ¿Por qué este es un momento único para estudiar UX?

● Data Science y Business Intelligence

● “Las carreras cortas permiten una breve especialización en un campo

Estudiar carreras con salida laboral

● “Según datos de la Cámara de la Industria Argentina del Software (CESSI), todos

Su uso es obligatorio. Se les dará el alta dentro de la próxima semana.

En ella podrán encontrar:

● Material teórico y Actividades prácticas

Se accede con los siguientes datos:

● Usuario: DNI del alumno

● Se realizarán dictados on-line en vivo 2 veces por semana.

Enviar al formulario de validación enviado por tu facilitador/a:

Es obligatorio para los estudiantes de este curso realizar la siguiente

El diseño es el alma de todo lo creado por el hombre.

Autor/as/es: Steve Jobs

Todo en el Aula Virtual.

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

● ¿Qué significa iterar?

¿Parecen iguales cierto?

Cuando ampliamos la imagen podemos notar la diferencia.

● Mapa de bits o Bitmap: es un grupo

● Gráﬁco vectorial o curvas: está formada

Ps es una más que conocida herramienta de edición de imágenes y

Ps al ser un programa de edición fotográﬁca, trabaja con mapas de bits

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

El software funciona por medio de capas que se superponen unas

Menú Imagen - Ajustes

PNG - El formato .PNG (Portable Network Graphics) tiene un nivel de compresión

Para exportar puede utilizar las opciones Exportación rápida cómo y

(Archivo > Modo de color > RGB)

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

Autor/as/es: Steve Jobs

Todo en el Aula Virtual.

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

El desarrollo ágil propone un abordaje iterativo en sus 3 instancias:

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

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

Con las grandes decisiones, querés tener más conﬁanza en

Autor/as/es: Behzod Sirjani

Cuando encontramos un insight y lo utilizamos Por ejemplo: