Docente UX/UI: Claudio Pérez

PROTOTIPAR - ESQUELETO “Design Thinking”

Etapa 4 - Metodología UX/ UI
 Design Thinking
METODOLOGÍA UX-UI

El proyecto desde la perspectiva metodológica será abordado por la

herramienta de diseño UX DESIGN THINKING la que consistirá en el
desarrollo de 5 etapas prácticas.

Fases de Desarrollo: 4

1. Estrategia: EMPATIZAR ESQUELETO

2. Enfoque: DEFINIR
3. Estructura: IDEAR
8. User Flow, Task Flow, Wireflow
4. Esqueleto: PROTOTIPAR 9. Wireframe: Media – Alta definición
5. Superficie: PROYECTAR - TESTEAR

CURSO: UX-UI / Módulo 1

 Design Thinking
ETAPA 4 – Prototipo & Esqueleto

3. PROTOTIPAR :
En este momento nos centramos en una de las mejores ideas que surgieron en
el paso anterior.

Lo importante, es prototipar una idea. Creamos una primer maqueta, modelo,

representación o simulación del producto final. Posteriormente, evaluaremos
cómo funciona, si cumple con lo necesario, si es viable o no.

CURSO: UX-UI / Módulo 1

 Inicio de prototipado
ETAPA 4 – Prototipo & Esqueleto

Aquí es donde se diseña la interfaz gráfica de la navegación y

como se colocarán los componentes (botones, pestañas, textos,
enlaces, formularios, etc).

• Se trata de generar un simple diseño de la interfaz, que sea

fácil de entender y comprender, pero libre de componentes
que no sean necesarios realizando Wireframe de baja
definición.

• Fundamentalmente, consiste en cómo se mostrará la

información y en qué posición se colocará cada componente
que da acceso a la funcionalidad.

CURSO: UX-UI / Módulo 1

 Consideraciones
ETAPA 4 – Prototipo & Esqueleto

Los alumnos deberán desarrollar de manera práctica y digital basado en

sus esquemas de arquitectura de la información (Flowchart/Task flow) 2
formatos/etapas de wireframe: Media y Alta calidad siento este último
el definitivo para la proceso de TESTING.

Este proceso debe considerar:

• Ideas basadas en bocetos y aproximaciones visuales a la solución.

• Metodología UX Writing (Jerga) para el proceso de Wireframe final.

CURSO: UX-UI / Módulo 1

 Wireframe
ETAPA 4 – Prototipo & Esqueleto

CURSO: UX-UI / Módulo 1

 Desarrollo de actividad
ETAPA 4 – Prototipo & Esqueleto

A nivel de síntesis observamos que los pasos para el desarrollo del

esqueleto de la solución son:

1. Definición de flujo de navegación y tareas basado en su

contenido informativo y visual (Flowchart, Taskflow y wireflow).

2. Poseer un registro de referentes visuales similares a su contexto

informativo y modelo de negocio.

3. Proyección de wireframe media calidad bajo pixeles por pulgadas

(1366 px o 1920 px en adelante).

4. Estructurar referencia estándar de diseño web bajo una cabecera,

cuerpo y pie de pagina según con tenido.

CURSO: UX-UI / Módulo 1

 1. Flujo de navegación y tareas
ETAPA 4 – Prototipo & Esqueleto

Bajo este punto se deben tener definidos a nivel general:

• Arquitectura de la información

• Flujo de navegación (Flowchart)

• Contenidos informativos ya procesados.

CURSO: UX-UI / Módulo 1

 2. Sketching web

A.I/ Flowchart

CURSO: UX-UI / Módulo 1

 2. Referentes visuales
ETAPA 4 – Prototipo & Esqueleto

En el marco del proceso de investigación y definición de

contexto y posterior contenido para el sitio web se es de suma
importancia observar referentes visuales donde predomine
la legibilidad y la jerarquía de contenidos multimediales.

CURSO: UX-UI / Módulo 1

 3. Proyección de bocetos
ETAPA 4 – Prototipo & Esqueleto

(Compartir documentos de composición visual con los alumnos)

CURSO: UX-UI / Módulo 1
 3. Proyección de Wireframe
media calidad
ETAPA 4 – Prototipo & Esqueleto

CURSO: UX-UI / Módulo 1

 3. Proyección & composición visual
ETAPA 4 – Prototipo & Esqueleto

1. DEFINICIÓN DE DIMENSIONES DE LIENZO 2. ELABORACIÓN DE GUÍAS RETÍCULA

1366 X 768 PX

(Compartir documentos de composición visual con el alumno)

CURSO: UX-UI / Módulo 1
 3. Proyección & composición visual
ETAPA 4 – Prototipo & Esqueleto

GUÍAS RETÍCULA

CURSO: UX-UI / Módulo 1

 4. Estructura estándar
ETAPA 4 – Prototipo & Esqueleto

C ISOLOGOTIPO MENÚ DE NAVEGACIÓN REDES SOCIALES

SLIDER PRESENTACIÓN EMPRESA

B
BIENVENIDA

IMAGEN
PÁRRAFO DE TEXTO

ISOLOGOTIPO
F DATOS DE EMPRESA
REDES SOCIALES

CURSO: UX-UI / Módulo 1

 4. Estructura estándar
ETAPA 4 – Prototipo & Esqueleto

CURSO: UX-UI / Módulo 1

 4. Estructura estándar
ETAPA 4 – Prototipo & Esqueleto

RESPONSIVE WEB

CURSO: UX-UI / Módulo 1

 Sobre lo expositivo y entregable.
ETAPA 4 – Idear & Estructurar

Para el cierre de la etapa de prototipado los alumnos deberán tener en

consideración la siguiente documentación a entregar:

WIREFRAME ALTA FIDELIDAD (Adobe XD):

En este punto se definirá el diseño visual corporativo bajo los estándares de
identidad, comunicación y funcionalidad, teniendo en consideración para el
diseño:

• Uso de; Colores corporativos, tipografia, imágenes, iconografía, estilo de

formas - botones y efectos o transiciones de contenido (XD).

• Elaboración de flujo de navegación bajo esquemas flowchart y tasflow (A.I)

(conectividad entre pantallas y elementos de comunicación)

• Elaboración de video explicativo del flujo de navegación (XD)

• Exportación de link de respaldo para realización Testing remoto (XD)

CURSO: UX-UI / Módulo 1

 Sobre lo expositivo y entregable.
ETAPA 4 – Idear & Estructurar

CURSO: UX-UI / Módulo 1

 Sobre la documentación expositiva
ETAPA 4 – Idear & Estructurar

CURSO: UX-UI / Módulo 1

 Documentación final
ETAPA 5 – Propuesta formal

ENTREGA DE PROYECTO:

En esta última parte se reune toda la documentación abordada en el

marco del desarrollo del proyecto, la cual será respaldada a través de
la plataforma MIRO, aquí se adjuntará las 5 etapas del producto final:

1. Síntesis del brief/ Lean UX Canvas/ Mapa de empatía.

2. Protopersona – Perfil de usuario/ Journey Map
3. Arquitectura de la informacion: Flowchart – Taskflow – Wireflow.
4. Wireframe de media y alta calidad
5. Propuesta formal Mock up.

CURSO: UX-UI / Módulo 1

 Docente UX/UI: Claudio Pérez

PROYECTO UX/UI