![Page 1: DIPLOMADO ANDROID USER INTERFACE DIA 2. Prototipos de media (wireframes) COMO SON: Grises Sin imágenes Sin diseño CUANDO DE USAN: después de definir la](https://reader036.vdocuments.co/reader036/viewer/2022062500/5665b43a1a28abb57c902eea/html5/thumbnails/1.jpg)
DIPLOMADO ANDROIDUSER INTERFACE DIA 2
![Page 2: DIPLOMADO ANDROID USER INTERFACE DIA 2. Prototipos de media (wireframes) COMO SON: Grises Sin imágenes Sin diseño CUANDO DE USAN: después de definir la](https://reader036.vdocuments.co/reader036/viewer/2022062500/5665b43a1a28abb57c902eea/html5/thumbnails/2.jpg)
Prototipos de media (wireframes)
COMO SON:
• Grises
• Sin imágenes
• Sin diseño
CUANDO DE USAN:
• después de definir la arquitectura y antes de iniciar la
fase creativa y de diseño emocional
PARA QUÉ:
• Para mostrar la arquitectura con claridad
• Para ver los componentes de la interfaz
• Para iterar con el equipo
![Page 3: DIPLOMADO ANDROID USER INTERFACE DIA 2. Prototipos de media (wireframes) COMO SON: Grises Sin imágenes Sin diseño CUANDO DE USAN: después de definir la](https://reader036.vdocuments.co/reader036/viewer/2022062500/5665b43a1a28abb57c902eea/html5/thumbnails/3.jpg)
Prototipos de media
Balsamic http://balsamiq.com/products/mockups/ (free)
Codiqa https://codiqa.com/ (licenciado)
Índigo http://www.infragistics.com (licenciado / 30 días free)
Pencil http://pencil.evolus.vn/ (free)
Axure Prototipos interactivos (licenciado / 30 días free)
Sencha http://www.sencha.com/products/architect/ (licenciado)
Prototyper http://www.justinmind.com/ (licenciado / free)
Protoshare http://www.protoshare.com/ (licenciado / 30 días free)
Fluid https://www.fluidui.com/ (licenciado / free 10 screens)
POP: appstore /google play (free)
Software disponible
![Page 4: DIPLOMADO ANDROID USER INTERFACE DIA 2. Prototipos de media (wireframes) COMO SON: Grises Sin imágenes Sin diseño CUANDO DE USAN: después de definir la](https://reader036.vdocuments.co/reader036/viewer/2022062500/5665b43a1a28abb57c902eea/html5/thumbnails/4.jpg)
Ejercicio por equipos:
Crear su propio prototipo con PROTOTYPER de Justmind instalado en los equipos
Mínimo 4 páginas
20 minutos
![Page 5: DIPLOMADO ANDROID USER INTERFACE DIA 2. Prototipos de media (wireframes) COMO SON: Grises Sin imágenes Sin diseño CUANDO DE USAN: después de definir la](https://reader036.vdocuments.co/reader036/viewer/2022062500/5665b43a1a28abb57c902eea/html5/thumbnails/5.jpg)
En el primer pantallazo ¿se puede saber que es esta app y para que sirve?
¿Los términos usados son claros y obvios ?
Al hacer clic en cada opción, ¿encontró lo que esperaba encontrar?
Déjele una lista de sugerencias a sus compañeros
Ejercicio 2 (20 Minutos)
Cambio de grupos y prototiposDeje que su prototipo lo analice otro grupo y ustedanalice otro prototipo
PREGÚNTESE
![Page 6: DIPLOMADO ANDROID USER INTERFACE DIA 2. Prototipos de media (wireframes) COMO SON: Grises Sin imágenes Sin diseño CUANDO DE USAN: después de definir la](https://reader036.vdocuments.co/reader036/viewer/2022062500/5665b43a1a28abb57c902eea/html5/thumbnails/6.jpg)
Revise el informe de sus compañeros…, ¿qué se puede mejorar?
Ejercicio 3 (10 Minutos)
![Page 7: DIPLOMADO ANDROID USER INTERFACE DIA 2. Prototipos de media (wireframes) COMO SON: Grises Sin imágenes Sin diseño CUANDO DE USAN: después de definir la](https://reader036.vdocuments.co/reader036/viewer/2022062500/5665b43a1a28abb57c902eea/html5/thumbnails/7.jpg)
![Page 8: DIPLOMADO ANDROID USER INTERFACE DIA 2. Prototipos de media (wireframes) COMO SON: Grises Sin imágenes Sin diseño CUANDO DE USAN: después de definir la](https://reader036.vdocuments.co/reader036/viewer/2022062500/5665b43a1a28abb57c902eea/html5/thumbnails/8.jpg)
Evaluación heurísticaRealizada por expertos
![Page 9: DIPLOMADO ANDROID USER INTERFACE DIA 2. Prototipos de media (wireframes) COMO SON: Grises Sin imágenes Sin diseño CUANDO DE USAN: después de definir la](https://reader036.vdocuments.co/reader036/viewer/2022062500/5665b43a1a28abb57c902eea/html5/thumbnails/9.jpg)
![Page 10: DIPLOMADO ANDROID USER INTERFACE DIA 2. Prototipos de media (wireframes) COMO SON: Grises Sin imágenes Sin diseño CUANDO DE USAN: después de definir la](https://reader036.vdocuments.co/reader036/viewer/2022062500/5665b43a1a28abb57c902eea/html5/thumbnails/10.jpg)
![Page 11: DIPLOMADO ANDROID USER INTERFACE DIA 2. Prototipos de media (wireframes) COMO SON: Grises Sin imágenes Sin diseño CUANDO DE USAN: después de definir la](https://reader036.vdocuments.co/reader036/viewer/2022062500/5665b43a1a28abb57c902eea/html5/thumbnails/11.jpg)
![Page 12: DIPLOMADO ANDROID USER INTERFACE DIA 2. Prototipos de media (wireframes) COMO SON: Grises Sin imágenes Sin diseño CUANDO DE USAN: después de definir la](https://reader036.vdocuments.co/reader036/viewer/2022062500/5665b43a1a28abb57c902eea/html5/thumbnails/12.jpg)
![Page 13: DIPLOMADO ANDROID USER INTERFACE DIA 2. Prototipos de media (wireframes) COMO SON: Grises Sin imágenes Sin diseño CUANDO DE USAN: después de definir la](https://reader036.vdocuments.co/reader036/viewer/2022062500/5665b43a1a28abb57c902eea/html5/thumbnails/13.jpg)
Ejercicio 4
Vamos a corregir el prototipo pero vamos a aplicar
principios básicos para crear buenos CTA (call to actions)
Qué son los call to actions (CTA) ?
![Page 14: DIPLOMADO ANDROID USER INTERFACE DIA 2. Prototipos de media (wireframes) COMO SON: Grises Sin imágenes Sin diseño CUANDO DE USAN: después de definir la](https://reader036.vdocuments.co/reader036/viewer/2022062500/5665b43a1a28abb57c902eea/html5/thumbnails/14.jpg)
Herramientas de verificación
User test: http://www.usertesting.com/
Verify: http://verifyapp.com
Solidify: http://solidifyapp.com/tour/examplesVerify
Five second test http://fivesecondtest.com/
Landing page: www.landerapp.com
![Page 15: DIPLOMADO ANDROID USER INTERFACE DIA 2. Prototipos de media (wireframes) COMO SON: Grises Sin imágenes Sin diseño CUANDO DE USAN: después de definir la](https://reader036.vdocuments.co/reader036/viewer/2022062500/5665b43a1a28abb57c902eea/html5/thumbnails/15.jpg)