![Page 1: Boceto Wireframe Mockup Prototipocatedraocampo.com.ar/.../06/Flujo-de-trabajo-y-UX.pdf · de una página web bajo categorías que forman una clasificación. Permite identificar las](https://reader035.vdocuments.mx/reader035/viewer/2022071008/5fc5b2d85dafe0240a3e58fb/html5/thumbnails/1.jpg)
![Page 2: Boceto Wireframe Mockup Prototipocatedraocampo.com.ar/.../06/Flujo-de-trabajo-y-UX.pdf · de una página web bajo categorías que forman una clasificación. Permite identificar las](https://reader035.vdocuments.mx/reader035/viewer/2022071008/5fc5b2d85dafe0240a3e58fb/html5/thumbnails/2.jpg)
Boceto Wireframe Mockup Prototipo
![Page 3: Boceto Wireframe Mockup Prototipocatedraocampo.com.ar/.../06/Flujo-de-trabajo-y-UX.pdf · de una página web bajo categorías que forman una clasificación. Permite identificar las](https://reader035.vdocuments.mx/reader035/viewer/2022071008/5fc5b2d85dafe0240a3e58fb/html5/thumbnails/3.jpg)
Boceto Wireframe Mockup Prototipo
![Page 4: Boceto Wireframe Mockup Prototipocatedraocampo.com.ar/.../06/Flujo-de-trabajo-y-UX.pdf · de una página web bajo categorías que forman una clasificación. Permite identificar las](https://reader035.vdocuments.mx/reader035/viewer/2022071008/5fc5b2d85dafe0240a3e58fb/html5/thumbnails/4.jpg)
Boceto Wireframe Mockup Prototipo
![Page 5: Boceto Wireframe Mockup Prototipocatedraocampo.com.ar/.../06/Flujo-de-trabajo-y-UX.pdf · de una página web bajo categorías que forman una clasificación. Permite identificar las](https://reader035.vdocuments.mx/reader035/viewer/2022071008/5fc5b2d85dafe0240a3e58fb/html5/thumbnails/5.jpg)
Boceto Wireframe Mockup Prototipo
![Page 6: Boceto Wireframe Mockup Prototipocatedraocampo.com.ar/.../06/Flujo-de-trabajo-y-UX.pdf · de una página web bajo categorías que forman una clasificación. Permite identificar las](https://reader035.vdocuments.mx/reader035/viewer/2022071008/5fc5b2d85dafe0240a3e58fb/html5/thumbnails/6.jpg)
Boceto Wireframe Mockup Prototipo
![Page 7: Boceto Wireframe Mockup Prototipocatedraocampo.com.ar/.../06/Flujo-de-trabajo-y-UX.pdf · de una página web bajo categorías que forman una clasificación. Permite identificar las](https://reader035.vdocuments.mx/reader035/viewer/2022071008/5fc5b2d85dafe0240a3e58fb/html5/thumbnails/7.jpg)
Boceto Wireframe Mockup Prototipo
![Page 8: Boceto Wireframe Mockup Prototipocatedraocampo.com.ar/.../06/Flujo-de-trabajo-y-UX.pdf · de una página web bajo categorías que forman una clasificación. Permite identificar las](https://reader035.vdocuments.mx/reader035/viewer/2022071008/5fc5b2d85dafe0240a3e58fb/html5/thumbnails/8.jpg)
Boceto Wireframe Mockup Prototipo
![Page 9: Boceto Wireframe Mockup Prototipocatedraocampo.com.ar/.../06/Flujo-de-trabajo-y-UX.pdf · de una página web bajo categorías que forman una clasificación. Permite identificar las](https://reader035.vdocuments.mx/reader035/viewer/2022071008/5fc5b2d85dafe0240a3e58fb/html5/thumbnails/9.jpg)
Integrantes delproceso de trabajo
UX UI Front End
![Page 10: Boceto Wireframe Mockup Prototipocatedraocampo.com.ar/.../06/Flujo-de-trabajo-y-UX.pdf · de una página web bajo categorías que forman una clasificación. Permite identificar las](https://reader035.vdocuments.mx/reader035/viewer/2022071008/5fc5b2d85dafe0240a3e58fb/html5/thumbnails/10.jpg)
UX UI Front End
User ExperienceDesigner
✓ Arquitectura de la información
✓ Navegación
✓ Interacción
✓ Usabilidad
✓ Wireframe
✓ Test de usuario
![Page 11: Boceto Wireframe Mockup Prototipocatedraocampo.com.ar/.../06/Flujo-de-trabajo-y-UX.pdf · de una página web bajo categorías que forman una clasificación. Permite identificar las](https://reader035.vdocuments.mx/reader035/viewer/2022071008/5fc5b2d85dafe0240a3e58fb/html5/thumbnails/11.jpg)
UX UI Front End
User InterfaceDesigner
✓ Look & Feel
✓ Atomic Design
✓ Mockup
✓ Grillas
✓ Responsive Design
![Page 12: Boceto Wireframe Mockup Prototipocatedraocampo.com.ar/.../06/Flujo-de-trabajo-y-UX.pdf · de una página web bajo categorías que forman una clasificación. Permite identificar las](https://reader035.vdocuments.mx/reader035/viewer/2022071008/5fc5b2d85dafe0240a3e58fb/html5/thumbnails/12.jpg)
UX UI Front End
Front End
✓ Maquetado
✓ HTML5
✓ CSS3
✓ jQuery
![Page 13: Boceto Wireframe Mockup Prototipocatedraocampo.com.ar/.../06/Flujo-de-trabajo-y-UX.pdf · de una página web bajo categorías que forman una clasificación. Permite identificar las](https://reader035.vdocuments.mx/reader035/viewer/2022071008/5fc5b2d85dafe0240a3e58fb/html5/thumbnails/13.jpg)
![Page 14: Boceto Wireframe Mockup Prototipocatedraocampo.com.ar/.../06/Flujo-de-trabajo-y-UX.pdf · de una página web bajo categorías que forman una clasificación. Permite identificar las](https://reader035.vdocuments.mx/reader035/viewer/2022071008/5fc5b2d85dafe0240a3e58fb/html5/thumbnails/14.jpg)
UXEs el conjunto de factores directos o indirectos que
influyen en la interacción de una persona en una situación
específica en un contexto específico.
![Page 15: Boceto Wireframe Mockup Prototipocatedraocampo.com.ar/.../06/Flujo-de-trabajo-y-UX.pdf · de una página web bajo categorías que forman una clasificación. Permite identificar las](https://reader035.vdocuments.mx/reader035/viewer/2022071008/5fc5b2d85dafe0240a3e58fb/html5/thumbnails/15.jpg)
UX✓ Define la estrategia, el concepto y las
características de un producto o servicio
interactivo.
✓ Concreta y ordena las ideas, la estrategia y las
características en un diseño específico.
✓ Se encarga de crear experiencias satisfactorias.
![Page 16: Boceto Wireframe Mockup Prototipocatedraocampo.com.ar/.../06/Flujo-de-trabajo-y-UX.pdf · de una página web bajo categorías que forman una clasificación. Permite identificar las](https://reader035.vdocuments.mx/reader035/viewer/2022071008/5fc5b2d85dafe0240a3e58fb/html5/thumbnails/16.jpg)
Arquitecturade la Información
Disciplina encargada de estructurar, organizar y etiquetar
los elementos que conforman los entornos informacionales
para facilitar de esta manera la localización (o el acceso)
de la información contenida en ellos y mejorar así su
utilidad y su aprovechamiento por parte de los usuarios.
(Pérez-Montoro 2010)
![Page 17: Boceto Wireframe Mockup Prototipocatedraocampo.com.ar/.../06/Flujo-de-trabajo-y-UX.pdf · de una página web bajo categorías que forman una clasificación. Permite identificar las](https://reader035.vdocuments.mx/reader035/viewer/2022071008/5fc5b2d85dafe0240a3e58fb/html5/thumbnails/17.jpg)
Misión
![Page 18: Boceto Wireframe Mockup Prototipocatedraocampo.com.ar/.../06/Flujo-de-trabajo-y-UX.pdf · de una página web bajo categorías que forman una clasificación. Permite identificar las](https://reader035.vdocuments.mx/reader035/viewer/2022071008/5fc5b2d85dafe0240a3e58fb/html5/thumbnails/18.jpg)
Misión Visión
![Page 19: Boceto Wireframe Mockup Prototipocatedraocampo.com.ar/.../06/Flujo-de-trabajo-y-UX.pdf · de una página web bajo categorías que forman una clasificación. Permite identificar las](https://reader035.vdocuments.mx/reader035/viewer/2022071008/5fc5b2d85dafe0240a3e58fb/html5/thumbnails/19.jpg)
ESTRATEGIA Identifica los objetivos.
ALCANCE Identifica las necesidades de los usuarios.
ESTRUCTURA Especifica las funcionalidades y
requerimientos de la web.
ESQUELETO Especifica el diseño de los sistemas de
navegación, organización y etiquetado.
INTERFAZ Prototipa la página para pruebas de usuario.
(Garret, 2003)
Fases
![Page 20: Boceto Wireframe Mockup Prototipocatedraocampo.com.ar/.../06/Flujo-de-trabajo-y-UX.pdf · de una página web bajo categorías que forman una clasificación. Permite identificar las](https://reader035.vdocuments.mx/reader035/viewer/2022071008/5fc5b2d85dafe0240a3e58fb/html5/thumbnails/20.jpg)
Sistemas de Organización
Sistemas de Etiquetado
Sistemas de Navegación
Componentes del AI
![Page 21: Boceto Wireframe Mockup Prototipocatedraocampo.com.ar/.../06/Flujo-de-trabajo-y-UX.pdf · de una página web bajo categorías que forman una clasificación. Permite identificar las](https://reader035.vdocuments.mx/reader035/viewer/2022071008/5fc5b2d85dafe0240a3e58fb/html5/thumbnails/21.jpg)
1. Sistemas de Organización
Logran que los contenidos que alberga nuestro sitio sean
más fáciles de encontrar por los usuarios que lo navegan.
✓ Esquemas ✓ Estructuras
![Page 22: Boceto Wireframe Mockup Prototipocatedraocampo.com.ar/.../06/Flujo-de-trabajo-y-UX.pdf · de una página web bajo categorías que forman una clasificación. Permite identificar las](https://reader035.vdocuments.mx/reader035/viewer/2022071008/5fc5b2d85dafe0240a3e58fb/html5/thumbnails/22.jpg)
1. Sistemas de Organización
Esquemas
✓Exactos
✓ Alfabéticos
✓ Cronológicos
✓ Geográficos
✓Ambiguos
✓ Tema
✓ Tarea
✓ Audiencia
![Page 23: Boceto Wireframe Mockup Prototipocatedraocampo.com.ar/.../06/Flujo-de-trabajo-y-UX.pdf · de una página web bajo categorías que forman una clasificación. Permite identificar las](https://reader035.vdocuments.mx/reader035/viewer/2022071008/5fc5b2d85dafe0240a3e58fb/html5/thumbnails/23.jpg)
1. Sistemas de Organización
Estructuras
✓Jerárquica
![Page 24: Boceto Wireframe Mockup Prototipocatedraocampo.com.ar/.../06/Flujo-de-trabajo-y-UX.pdf · de una página web bajo categorías que forman una clasificación. Permite identificar las](https://reader035.vdocuments.mx/reader035/viewer/2022071008/5fc5b2d85dafe0240a3e58fb/html5/thumbnails/24.jpg)
1. Sistemas de Organización
Estructuras
✓Hipertextual
![Page 25: Boceto Wireframe Mockup Prototipocatedraocampo.com.ar/.../06/Flujo-de-trabajo-y-UX.pdf · de una página web bajo categorías que forman una clasificación. Permite identificar las](https://reader035.vdocuments.mx/reader035/viewer/2022071008/5fc5b2d85dafe0240a3e58fb/html5/thumbnails/25.jpg)
1. Sistemas de Organización
Estructuras
✓Secuencial
![Page 26: Boceto Wireframe Mockup Prototipocatedraocampo.com.ar/.../06/Flujo-de-trabajo-y-UX.pdf · de una página web bajo categorías que forman una clasificación. Permite identificar las](https://reader035.vdocuments.mx/reader035/viewer/2022071008/5fc5b2d85dafe0240a3e58fb/html5/thumbnails/26.jpg)
2. Sistemas de Etiquetado✓ Acotar el significado de las etiquetas teniendo en cuenta a los
usuarios.
✓ Diseñar el sistema de etiquetado de forma global y no etiquetas de
forma aislada.
✓ Mantener la consistencia tanto en el literal como en el formato.
✓ Usar el mismo registro: si usas “linfoma” no uses “dolor de cabeza”
sino “cefalea”.
✓ Reconocibles por ser conceptos familiares, el usuario no debe tener
que aprender su significado.
![Page 27: Boceto Wireframe Mockup Prototipocatedraocampo.com.ar/.../06/Flujo-de-trabajo-y-UX.pdf · de una página web bajo categorías que forman una clasificación. Permite identificar las](https://reader035.vdocuments.mx/reader035/viewer/2022071008/5fc5b2d85dafe0240a3e58fb/html5/thumbnails/27.jpg)
3. Sistemas de Navegación✓ Estructuras que ordenan y agrupan los contenidos
de una página web bajo categorías que forman una
clasificación.
✓ Permite identificar las relaciones entre los
contenidos de la web y entre esos contenidos y la
página que se está visitando en ese momento.
✓ Nos orienta, sabemos dónde estamos, qué hay aquí,
de dónde venimos y cómo podemos ir hacia donde
deseamos.
![Page 28: Boceto Wireframe Mockup Prototipocatedraocampo.com.ar/.../06/Flujo-de-trabajo-y-UX.pdf · de una página web bajo categorías que forman una clasificación. Permite identificar las](https://reader035.vdocuments.mx/reader035/viewer/2022071008/5fc5b2d85dafe0240a3e58fb/html5/thumbnails/28.jpg)
Test de usuario✓ Prueba de usabilidad.
✓ Demostración con hechos concretos.
✓ Observación y análisis de uso.
✓ Detección de problemas.
![Page 29: Boceto Wireframe Mockup Prototipocatedraocampo.com.ar/.../06/Flujo-de-trabajo-y-UX.pdf · de una página web bajo categorías que forman una clasificación. Permite identificar las](https://reader035.vdocuments.mx/reader035/viewer/2022071008/5fc5b2d85dafe0240a3e58fb/html5/thumbnails/29.jpg)
A testear se ha dicho....
![Page 30: Boceto Wireframe Mockup Prototipocatedraocampo.com.ar/.../06/Flujo-de-trabajo-y-UX.pdf · de una página web bajo categorías que forman una clasificación. Permite identificar las](https://reader035.vdocuments.mx/reader035/viewer/2022071008/5fc5b2d85dafe0240a3e58fb/html5/thumbnails/30.jpg)