DISEÑO UX/UI
MANUAL DE DESAFÍOS
DEFINIENDO EL PROBLEMA, OBJETIVO Y SOLUCIÓN
Formato: Archivo en tipo .ppt o .doc con el desarrollo de la actividad. Generar un archivo con el nombre
“Idea+Apellido”. Se puede entregar un google slide también.
Sugerencia: activar comentarios en el archivo.
>> Consigna: En base a la pregunta de la clase pasada, generar una hipótesis de solución para generar un proyecto desde cero.
>>Aspectos a incluir en el entregable:
Problema: ¿Cuál es la hipótesis? Identificar un problema real que lo motive. Debe estar correctamente redactado. En su
desarrollo debe incluir: Contexto, Actores/as involucrados/as, Facilitadores y obstaculizadores.
Objetivo: ¿Qué buscamos? Definir un objetivo concreto que surge del problema.
Solución: ¿Qué proponemos? Describir la solución del Prototipo de aplicación. ¿Cómo soluciona el problema? ¿Qué
funcionalidades va tener el proyecto?
Opcional: Research Generativo (Investigación de escritorio): Se sugiere contestar las siguientes preguntas: ¿Qué problemas o
necesidades tienen nuestros usuarios? ¿Qué información real tengo para sustentar?. Se sugiere usar el documento
“Investigación de Escritorio” que se encuentra en la carpeta de la clase. Tener en cuenta que si bien este punto es opcional,
te la pediremos en la primera entrega de Proyecto Final.
>>Ejemplo: Ver ejemplo
DISEÑO UX/UI 2
USER PERSONA Y BENCHMARKING - Clase 3
Formato: Archivo en tipo .ppt o .doc con el desarrollo de la actividad. Generar un archivo con el nombre
“UserPersona&Benchmarking+Apellido”. Se puede entregar un google slide también.
Sugerencia: activar comentarios en el archivo.
>> Consigna: En una primera instancia crear el o las proto personas harán uso de tu proyecto final. Definir al menos dos
personas. En una segunda instancia realizar un benchmarking qué tenga como objetivo la búsqueda de competidores referentes
(te puedes ayudar buscando aplicaciones qué usarían los usuarios de tu proeycto).
>>Aspectos a incluir en el entregable: BENCHMARKING
1. Identificar cuáles serán las app con las que se hará la comparación. Comparar y evaluar de 3 a 5 posibles competidores
directos o indirectos.
2. Categorías, tema y niveles de cumplimiento de análisis:
a. Vocabulario: Las palabras utilizadas en los elementos de interacción (botones, títulos) permiten qué el usuario pueda
llevar adelante la tarea y no presta a confusión.
b. Navegabilidad: Cantidad de Pasos
c. Diseño: Ocupación del espacio en página, distribución de los elementos y tamaño en relación al espacio.
3. Incluir las fortalezas y debilidades de cada una de las competencias.
DISEÑO UX/UI 3
>>Aspectos a incluir en el entregable: PROTO PERSONA*1
1. Justificación de elección: Argumentar por qué son afines al proyecto.
2. Tipo de Usuario: ¿Es compradora? ¿Es vendedora? (esto tiene relación con el rubro y área a fin al proyecto).
3. Frase identificatoria: Seleccionar una frase qué capture su actitud general hacia su producto.
4. Foto: Foto de una persona en plano medio corto a corto, preferentemente mirando a cámara.
5. Perfil: Pequeña biografía qué defina el entorno (entre 50 y 60 palabras)
6. Metas: ¿qué busca lograr? ¿Qué objetivos tiene? Detallar por lo menos 3 metas relacionadas con el proyecto.
7. Motivaciones y Frustraciones: ¿Qué motivaciones relacionadas con el proyecto tiene el usuario? ¿Qué frustraciones actuales
tiene el usuario? Detallar por lo menos 3 motivaciones y 3 frustraciones.
8. Habilidades Técnicas: Nuevas tecnologías, Internet, software, dispositivos móviles. Se sugiere usar una escala del 1 al 5
donde 1 es nada y 5 es mucho.
9. Datos Personales: Ciudad, Edad, Sexo, Lugar geográfico, Costumbres/intereses
10. Complementario: Se puede complementar el user persona con los siguientes ítems: Habilidades, Patrones de
comportamiento, Actitudes, como piensa.
*1: Una vez que hayamos realizado las entrevistas con usuarios nuestra “proto persona” pasará a ser un “user persona” ya que la
información que lo completa fue parte de los resultados de las entrevistas.
>>Ejemplo: Ver ejemplo
DISEÑO UX/UI 4
POV & MVP - Clase 5
Formato: Archivo en tipo .ppt o .doc con el desarrollo de la actividad. Generar un archivo con el nombre
“MVP+Apellido”. Se puede entregar un google slide también.
Sugerencia: activar comentarios en el archivo.
>> Consigna: En una primera instancia definir el POV de tu proyecto En una segunda instancia, a partir del POV, detallar el
listado de funcionalidades básicas (MVP).
>>Aspectos a incluir en el entregable:
POV
1. Seguir la estructura (usuario -- necesita -- porque).
MVP
2. Desarrollaremos un listado de funcionalidades básicas al respecto (MVP): Hacer un listado de las funciones principales que
debería tener el proyecto personal para poder cumplir con el concepto del MVP.
3. Te podrás apoyar realizando un storyboard (no más de 6 cuadrantes) o storytelling (no más de 150 caracteres) .
>>Ejemplo: Ver ejemplo
DISEÑO UX/UI 5
ARQUITECTURA DE INFORMACIÓN - Clase 6
Formato: Whimsical (herramienta sugerida para armar la arquitectura de de información), generar un nuevo archivo con el
nombre “Arquitectura+Apellido”. Se puede copiar el link en un archivo .doc o .ppt para subir a la plataforma o adjuntar el
link directo en la entrega. Optimal Workshop (herramienta sugerida para realizar el Card Sorting). Seguir los pasos del
ejemplo en vivo.
Sugerencia: activar comentarios en el archivo.
>> Consigna: Realizar la arquitectura de información de tu proyecto partiendo del Card Sorting qué deberás realizar. Tendrás que hacer el
cardsorting con al menos 15 personas para obtener información relevante. Habrá un canal de Slack específico de Coder para que puedas subir tu
URL. Para las conclusiones trabajar con la matriz de similitud y/o el dendograma AAM para su armado.
>>Aspectos a incluir en el entregable:
1. Realizar la actividad de Card Sorting abierto para observar cómo los usuarios organizan los contenidos. Tendrás disponible un canal de slack
(#CardsortingCoder) donde podrás colocar tu url y otros compañeros puedan realizar la actividad. Recordá armar cada una de las instancias de
la actividad (saludo inicial, reglas, el paso a paso y el saludo final).
2. El uso correcto de por lo menos 3 jerarquías de información:
a. Categorías / Secciones
b. Subcategorías / Subsecciones
c. Detalle de subcategoría / subsecciones
3. Usar la Matriz de similitud o Dendrogramas AAM para extraer conclusiones.
4. Con la información y las conclusiones del Card Sorting construí tu arquitectura de información. Recordá primero definir las categorías, luego
las subcategorías y por último los contenidos relacionados a las subcategorías.
>>Ejemplo: Ver ejemplo
DISEÑO UX/UI 6
USERFLOW - Clase 7
Formato: Whimsical (herramienta sugerida para armar el userflow), generar un nuevo archivo con el nombre
“Userflow+Apellido”. Se puede copiar el link en un archivo .doc o .ppt para subir a la plataforma o adjuntar
el link directo en la entrega.
Sugerencia: activar comentarios en el archivo.
>> Consigna: Realizar el userflow (diagrama de usuario) basado en el flowchart (diagrama de flujo) de tu proyecto. Respetar el
uso de cada caja. Crear el userflow del producto que elegiste desde el inicio hasta la representación principal o main feature.
>>Aspectos a incluir en el entregable:
1. Crear el userflow del producto que elegiste desde el inicio hasta la representación principal o main feature.
2. Usar correctamente los modelos de cajas:
a. Decisión: dos caminos posibles
b. Interacción: simboliza la interacción del usuario con la app. Puede ser que el usuario deba introducir datos, seleccionar, filtrar elementos,
etc.
c. Proceso: instancias del trayecto del usuario. Desde la acción o paso inicial hasta la acción principal que el usuario puede recorrer para
obtener la solución que ofrece tu producto o servicio.
d. Error: Relacionado íntegramente con la caja “decisión” la misma muestra la posible falla o error.
e. Inicio / Cierre: el inicio o el final en un diagrama de flujo.
3. Te podrás ayudar generando, en primera instancia, el task flow (diagrama de tareas).
4. El gráfico debe ser claro y ordenado. Las flechas deben mantenerse recta.
5. Marcar, en los recorridos, qué user persona de usuario deberá llevar adelante esa tarea (esto se puede reforzar dejando todo el userflow en gris
y solo marcando el que corresponde a cada uno de los usuarios).
DISEÑO UX/UI 7
>>Ejemplo: Ver ejemplo
WIREFRAME DIGITAL - Clase 9
Formato: Herramienta Adobe XD o Figma. Generar un nuevo archivo con el nombre “Wireframe
Digital+Apellido”. Se puede copiar el link en un archivo .doc o .ppt para subir a la plataforma o adjuntar el
link directo en la entrega.
Sugerencia: activar comentarios en el archivo.
>> Consigna: Desarrollar los wireframes digitales de tu proyecto en formato digital.
>>Aspectos a incluir en el entregable:
Comunicar la estructura de la solución de diseño que estamos pensando: ¿Dónde estarán los menús? ¿El logo? ¿Los Call To
Action principales? ¿Qué jerarquía tendrán los distintos grupos de contenido?
DISEÑO UX/UI 8
Fidelidad del Prototipo:
Baja/Media de Contenido:
a. Escribir los títulos principales y el nombre en los botones.
Baje/Media Visual:
b. Evitar el uso de imágenes reales, pueden usar bloques que las simulan con el icono correspondiente.
c. Se recomienda que sean en blanco y negro para qué el análisis se centre en lo estructural y no en el contenido.
d. Usar una sola tipografía, no importa cual.
e. Tener en cuenta las Interacciones: desplegables, hovers, etc.
Baja de Funcionalidad:
f. Comenzaremos a ser funcional el prototipo en el próximo desafío.
>>Ejemplo: Ver ejemplo
DISEÑO UX/UI 9
PATRONES DE DISEÑO - Clase 10
Formato: Herramienta Adobe XD o Figma. Generar un nuevo archivo con el nombre “Patrones+Apellido”. Se
puede copiar el link en un archivo .doc o .ppt para subir a la plataforma o adjuntar el link directo en la
entrega.
Sugerencia: activar comentarios en el archivo.
>> Consigna: A partir del diseño previo de Wireframes digital, incorporar los patrones de interacción y navegación. Empezar
incorporando patrones de navegación y luego los patrones de interacción. Deberán estar, en el desafío, todos los wireframes
correspondiente a tu app. Te recomendamos que incluyas el Antes y Después para ver la evolución del mismo.
>>Aspectos a incluir en el entregable:
● Identificar aquellos patrones de navegación y nombrar cada uno de ellos.
● Identificar aquellos patrones de interacción y nombrar cada uno de ellos.
● Tener presente el sistema operativo con el cual vas a trabajar por qué algunos patrones son diferentes.
>>Importante: Identificar, dentro del wireframe, cuáles son patrones de navegación y cuáles de interacción. Colocar el nombre
correspondiente a cada uno.
>>Ejemplo: Ver ejemplo
DISEÑO UX/UI 10
PROTOTIPO FUNCIONAL - Clase 11
Formato: Herramienta Adobe XD o Figma. Generar un nuevo archivo con el nombre
“PrototipoFuncional+Apellido”. Se puede copiar el link en un archivo .doc o .ppt para subir a la plataforma o
adjuntar el link directo en la entrega.
Sugerencia: activar comentarios en el archivo.
>> Consigna: A partir de todos los wireframes diseñados, comenzar a construir un Prototipo funcional qué responda al caso de
uso y userflow planteado. Tener presente las tres instancias (Disparador - Acción - Destino).
>> Aspectos a incluir en el entregable:
● En esta primera instancia se desarrollarán las pantallas principales con sus lógicas en la navegación, para así lograr la
navegabilidad en las pantallas.
● Lograr cierta navegabilidad, un “camino feliz” que atienda a las necesidades que se plantearon durante la etapa de
confección de Userflow.
DISEÑO UX/UI 11
Fidelidad del Prototipo:
1. Media de Contenido:
a. Comenzar a incorporar textos reales a los párrafos de texto, cards, entre otros.
2. Media Visual:
a. Con la incorporación de los patrones de diseño el Prototipo aumenta su fidelidad visual.
3. Baja/Media de Funcionalidad:
a. Se incorpora el concepto de la estructura disparador-acción-destino dotando a Prototipo de mayor funcionalidad.
>>Ejemplo: Ver ejemplo
DISEÑO UX/UI 12
PRUEBAS DE USABILIDAD - Clase 13
Formato: Archivo en tipo .ppt o .doc con el desarrollo de la actividad. Generar un archivo con el nombre
“Pruebas+Apellido”.
Sugerencia: activar comentarios en el archivo.
>> Consigna: A partir de las pruebas de usabilidad, completar el resumen ejecutivo. Se deben presentar los datos cuantitativos
de las métricas de eficiencia, eficacia y satisfacción para validar lo que funcionó, lo que no funcionó y las recomendaciones. Tener
por lo menos 5 pruebas realizadas.
Aspectos a incluir en el entregable:
- Enviar a los usuarios, al menos uno de los formularios de métricas de satisfacción (CES o NPS). Podés usar typeform o google
form para el envío de los formularios.
- Las pruebas de usabilidad de observación son pruebas cualitativas. Se aconseja complementar con métricas resultantes de esas
pruebas de observación. El dato numérico no sirve por sí solo.
- Se puede incluir un anexo con las planillas de registro.
>>Ejemplo: Ver ejemplo
DISEÑO UX/UI 13
ATOMIC DESIGN - Clase 14
Formato: Herramienta Adobe XD o Figma. Generar un nuevo archivo con el nombre
“AtomicDesign+Apellido”. Se puede copiar el link en un archivo .doc o .ppt para subir a la plataforma o
adjuntar el link directo en la entrega.
Sugerencia: activar comentarios en el archivo.
>> Consigna: A partir de todos los wireframes y las pruebas de usabilidad modificar el prototipo incorporando el concepto de
Atomic Design. Presentar al menos 3 organismos realizados dentro de los frames.
Aspectos a incluir en el entregable:
- Tener presente mostrar cómo los átomos se convierten en moléculas y cómo las moléculas se convierten en organismos. Ej:tab-
bar: en primera instancia definir como átomos a la tipografía y al icono; luego generar moléculas con una unión de ambos y por
último generar el organismo a la unión de moléculas.
- Incorporar la sintaxis vista en la clase.
- Puedes hacer un Frame o Page para ir colocando los componentes maestros.
DISEÑO UX/UI 14
Fidelidad del Prototipo:
1. Media de Contenido:
- Seguir incorporando textos reales a los párrafos de texto, cards, entre otros.
2. Media Visual:
- Con la incorporación de atomic y las modificaciones de las pruebas, el prototipo sigue evolucionando.
3. Baja/Media de Funcionalidad:
- Se mantiene igual que la instancia anterior.
>>Ejemplo: Ver ejemplo
DISEÑO UX/UI 15
GRILLA Y ESTRUCTURA- Clase 15
Formato: Herramienta Adobe XD o Figma. Generar un nuevo archivo con el nombre “Grilla+Apellido”. Se
puede copiar el link en un archivo .doc o .ppt para subir a la plataforma o adjuntar el link directo en la
entrega.
Sugerencia: activar comentarios en el archivo.
>> Consigna: A partir de todos los wireframes, incorporar un sistema de grilla. Trabajar una grilla de columnas para organizar los
componentes de manera vertical y una grilla de cuadrícula para organizar los componentes de manera horizontal.
Aspectos a incluir en el entregable:
- Los componentes deberían ocupar el ancho correspondiente a las columnas y no usan los espacios de margen izquierdo y
derecho.
- Las calles del sistema de grilla no deben ser menores al ancho de margen izquierdo y derecho.
- Mantener un ritmo vertical, esto quiere decir que se debe tener presente la separación vertical mínima entre componentes de 11
para IOS y 8 para Android.
- Respetar los margen izquierdo y derecho mínimos: 16 para Android y 18 para IOS.
- La cantidad de módulos ocupados debiera definir la jerarquía de los componentes
DISEÑO UX/UI 16
Fidelidad del Prototipo:
1. Media de Contenido:
- Seguir incorporando textos reales a los párrafos de texto, cards, entre otros.
2. Media Visual:
- Con la incorporación de la grilla el Prototipo sigue mejorando su fidelidad visual.
3. Baja/Media de Funcionalidad:
- Se mantiene igual que la instancia anterior.
>>Ejemplo: Ver ejemplo
DISEÑO UX/UI 17
WIREFRAME Y GUIDELINES - Clase 17
Formato: Herramienta Adobe XD o Figma. Generar un nuevo archivo con el nombre
“SistemaOperativo+Apellido”. Se puede copiar el link en un archivo .doc o .ppt para subir a la plataforma o
adjuntar el link directo en la entrega.
Sugerencia: activar comentarios en el archivo.
>> Consigna: Iterar el prototipo ajustando el diseño del wireframe a las guías de estilo del sistema operativo.
Aspectos a incluir en el entregable: IOS
- Botones:
1. Botón principal (vértices con curvas pronunciadas)
2. Botón Iconográfico
3. Botón Tipográfico
- Tipografía: San Francisco
- Iconografía de sistema: LINK
- Navegación:
1. Navigation Bar: en aplicaciones particulares como calendario.
DISEÑO UX/UI 18
2. Tab Bar: navegación inferior.
3. Toolbar: en aplicaciones particulares como Safari, es parte de la app.
4. Action sheets: opciones de edición.
Aspectos a incluir en el entregable: ANDROID
- Botones:
1. Botón flotante (elevado por sobre todo, suele ser redondo)
2. Botón contenido (rectangular con vértices con curvas poco pronunciadas)
3. Botón Tipográfico
- Tipografía: Google Sans / Roboto
- Iconografía de sistema: LINK
- Navegación:
1. App bars - TOP: siempre estructura la parte superior, siempre son de pleno de color y pueden ser más complejas si se
incorpora el patrón pestañas.
2. Bottom Navigation: en aplicaciones particulares.
DISEÑO UX/UI 19
Fidelidad del Prototipo:
1. Media/Alta de Contenido:
- Seguir incorporando contenidos reales al prototipo.
2. Media/Alta Visual:
- Con la definición de Guidelines el prototipo comienza a tener más definición visual y por lo tanto aumenta la fidelidad.
3. Media de Funcionalidad:
- Se mantiene igual que la instancia anterior.
>>Ejemplo: Ver ejemplo
DISEÑO UX/UI 20
UI KIT Y MOODBOARD - Clase 18
Formato: Utilizar herramientas que permitan mostrar el UI kit y el Moodboard de forma apropiada.
Herramientas que se sugieren: Figma, Adobe XD. Subir el archivo como “UI
kits&Moodboard&IconDesign+Apellido” a la plataforma.
Sugerencia: activar comentarios en el archivo.
>> Consigna: Generar el moodboard y ui kits de tu proyecto. También presentar el icon design incorporando el concepto de
responsive design.
Aspectos a incluir en el entregable:
MOODBOARD
- Debe incluir referencias (de app u otras pieza de diseño) de los siguientes elementos: Colores, Imágenes, Texturas,
Estructuras, Palabras claves.
- Se puede generar un moodboard de referencia de app.
- Se puede llegar a generar un moodboard con movimiento y/o auditivo.
DISEÑO UX/UI 21
Aspectos a incluir en el entregable:
UI KIT
- Elementos tipográficos: variables tipográficas para títulos (definir por lo menos dos niveles de jerarquía), subtitulo, parrafo
(definir dos niveles de jerarquías), citas y botón.
- Elementos iconograficos: estado activo y estado desactivado.
- Código cromatico: primario, secundario y acento.
- Elementos Barras: superiores e inferiores (patrones navegación)
- Elementos Tarjetas: pensar en relación a los módulos y grilla (tarjeta principal que ocupa la totalidad de los módulos - tarjeta
secundaria que ocupa medio módulo). En cada uno de ellos se pueden tener diferentes tipos que dependen del proyecto.
- Elementos Botones y Controles: para los botones primario y secundario y dentro de cada uno de ellos activo e inactivo.
Botones flotantes también entra aca. Para los controles tener presente aquellos elementos que el usuario puede manipular y
modificar algún valor (rango de precio, entre otros).
- Elementos Forms e inputs:
- Campos (input fields). Esto incluye los campos de texto, contraseñas, checkboxes, radio buttons, sliders y todo otro tipo
de campos diseñados para input del usuario.
- Rótulo (Labels). Quienes indican al usuario qué dato corresponde en cada field.
- Ilustraciones: dependerá del proyecto propio.
DISEÑO UX/UI 22
Aspectos a incluir en el entregable:
ICON DESIGN
- Presentar el Icon Design mostrando las 4 medidas standard. Se puede presentar mostrando cada uno en el dispositivo
correspondiente como el slide 28.
- S= 44 x 44 M=240 x 84 L=280 x 120 XL=190 x 340
Fidelidad del Prototipo:
1. Media/Alta de Contenido:
- Con la confección del UI KITS y los elementos tipográficos habrá un aumento en la fidelidad de contenido.
2. Media/Alta Visual:
- Con la definición de los elementos del UI KITS el prototipo comienza a tener una fidelidad visual cada más parecida a la realidad.
3. Media de Funcionalidad:
- Se mantiene igual que la instancia anterior.
>>Ejemplo: Ver ejemplo
DISEÑO UX/UI 23
DISEÑO UX/UI 24
MICROINTERACCIONES Y ANIMACIÓN - Clase 20
Formato: Utilizar herramientas que permitan mostrar de forma apropiada en link a las animaciones (pueden
ser videos también). Herramientas que se sugieren: Figma, Adobe XD. Subir el archivo como
“Animación+Apellido” a la plataforma.
Sugerencia: activar comentarios en el archivo.
>> Consigna: Incorporar animaciones siguiendo los 10 principios de motion. Generar microinteracciones en el prototipo. 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.
Aspectos a incluir en el entregable:
- La animación debe estar presente en algunos de los elementos que generan interacción con el usuario. Para ser considerado
animación, debe producirse una transición o cambio en dicho elemento. Se sugiere comenzar con elementos pequeños
como íconos, e ir generando animaciones luego en elementos más grandes o en toda una pantalla.
- Podés grabar las animaciones del proyecto y mostrarlas brevemente en un video.
- Presentar por lo menos tres desgloses con detalle las microinteracciones incorporadas y con qué puntos cumple: orientar a
los usuarios, dar feedback sobre las interacciones, hacer foco en algo específico, ocultar el tiempo de carga o espera.
DISEÑO UX/UI 25
Fidelidad del Prototipo:
1. Media/Alta de Contenido:
- Seguir incorporando contenidos reales.
2. Media/Alta Visual:
- Seguir ajustando el prototipo desde lo visual.
3. Media/Alta de Funcionalidad:
- Con la incorporación de microinteracciones el prototipo aumenta tu fidelidad de funcionalidad.
>>Ejemplo: Ver ejemplo
DISEÑO UX/UI 26
ELEVATOR PITCH - Clase 21
Formato: Se puede entregar en .doc, .ppt. o .pdf. Entregar el elevator pitch en sólo formato texto, con el
nombre “Elevator+Apellido”.
Sugerencia: activar comentarios en el archivo.
>> Consigna: Redactar un pitch que responda a la presentación de tu proyecto. Debe seguir la estructura ¿Quién sos? ¿Qué
haces?¿Por qué sos único? ¿Cuál es tu objetivo?
Aspectos a incluir en el entregable:
- Responde a las preguntas más comunes. Explicar quién eres, a qué te dedicas, qué problemas resuelve tu herramienta y
cómo lo haces, son las primeras preguntas que cualquiera te haría.
- Define tu público objetivo.
- Resalta qué beneficios consigue tu cliente.
>>Ejemplo: Ver ejemplo
DISEÑO UX/UI 27
REPORTE UX - Clase 22
Formato: Se puede entregar en .doc, .ppt. o .pdf. Entregar el elevator pitch en sólo formato texto, con el
nombre “ReporteUX-UI+Apellido”.
Sugerencia: activar comentarios en el archivo.
>> Consigna: Construir un reporte personal que evidencie todo el proceso de trabajo realizado en el curso. Seguir la estructura
¿por que? ¿como y ¿que?
Aspectos a incluir en el entregable:
- Se debe poner en manifiesto todas las instancias de validación del prototipo y del proyecto.
- Se sugiere utilizar tipografía y colores similares a los que están siendo utilizados dentro de nuestra aplicación para generar
más identidad con el trabajo.
- Mostrar el proceso evolutivo del prototipo puede ayudar a dar cuenta de cada una de las instancias.
- Tener presente la tabla de validaciones.
>>Ejemplo: Ver ejemplo
DISEÑO UX/UI 28
MOCKUPS - Clase 23
Formato: Realizar los mockups en alguna herramienta sugerida. Subir las imágenes a un documento .ppt
ó .doc ó .zip con el nombre “Mockups+Apellido”.
Sugerencia: activar comentarios en el archivo.
>> Consigna: Generar los mockups de tu proyecto. Al menos debe haber dos mockups persuasivo, dos informativos y uno
identificatorio.
Aspectos a incluir en el entregable:
- Usar los mockups del celular correspondiente al sistema operativo elegido.
- Piensa que imágenes necesitas para tu presentación y genera los mockup necesarios.
- Tener presente tener mockup informativos, persuasivos, en contexto, identificadores.
>>Ejemplo: Ver ejemplo
DISEÑO UX/UI 29
