Prototipos UX
33
-
Upload
gema-de-la-fuente -
Category
Design
-
view
186 -
download
2
description
Qué son y para que sirven los prototipos en UX. Tipos de prototipado, técnicas y herramientas.
Transcript of Prototipos UX
Prototipos
3
Representación esquemática que muestra
el contenido y comportamiento de un sitio web.
Herramienta de comunicación, discusión y test.
Focalizada en la AI
Permite testar e introducir mejoras en fases tempranas.
Comunicación
6
Entre todo el equipo
Con los clientes
Ideas abstractas sean concretas, visibles y testables.
Fomentan la iteratividad.
Mejoran la calidad, claridad y la completitud de las especificaciones funcionales del sistema.
Diseño y desarrollo
8
Definir funcionalidad, estructura y contenidos antes de empezar a programar y de crear el diseño visual.
Dan soporte a los diseñadores a la hora de escoger entre varias alternativas.
Permiten a los diseñadores explorar diversos conceptos del diseño antes de establecer los definitivos
Test
11
Integrar activamente a los usuarios en el desarrollo.
Evaluar el sistema desde las primeras fases del desarrollo (+ barato).
S K E T C H I N G
W I R E F R A M E S
M O K U P S
S T O R Y B O A R D
P R O T O T I P O F U N C I O N A L
[email protected] 2014
12
Métodos de trabajo
Sketching
15
Boceto rápido e informal
que se realiza en papel
para transmitir una idea o concepto
con rapidez y claridad.
Wireframe
18
Esquema visual de una página web,definiendo al detalle el contenido y estructura.
¿Qué información debe contener un Wireframe?
19
• Inventario de contenido.
• Elementos de la página.
• Etiquetado.
• Layout.
• Comportamiento.
Consejos
20
• No utilizar color (excepto links)
• Textos (especificar caracteres max/min, que sea legible)
• Poner el foco en la estabilidad y jerarquía
• RIA
• Explicarlos en persona
MockUp
25
Prototipo de Alta Fidelidad destinado a comunicar/testar un aspecto concreto de la
aplicación (diseño / funcionalidad)
Prototipo funcional
27
Puede ser de alta o baja fidelidad
pero su objetivo es mostrar /testar
la funcionalidad del sistema
Software
30
Los profesionales• www.axure.com • www.omnigroup.com/omniGraffle/
Los apañaos (con versión gratis)• balsamiq.com/• https://moqups.com/• http://www.gliffy.com/• http://www.mockflow.com/• https://app.uxpin.com/
Específicos• https://popapp.in/ (móvil)• http://stripgenerator.com/strip/create (storyboards)
Plantillas
31
• http://konigi.com/tools/graph-paper
• http://speckyboy.com/2013/04/29/30-wireframe-templates-and-toolkits/
• http://www.hachemuda.com/2012/01/5-cuadernos-de-papel-perfectos-para-prototipado-diseno-web-y-de-interfaces-de-usuario/
• http://developer.yahoo.com/ypatterns/about/stencils/
www
33
Artículos
• http://www.sidar.org/recur/desdi/traduc/es/visitable/maner/Prototipado.htm
• http://olgacarreras.blogspot.com.es/2007/02/wireframes.html
• http://designshack.net/articles/inspiration/close-photoshop-and-grab-a-pencil-the-lost-art-of-thumbnail-sketches/
• http://www.slideshare.net/rots/taller-de-wireframes-5540204
Recursos
• http://www.smashingmagazine.com/2009/09/01/35-excellent-wireframing-resources/
• http://wireframes.tumblr.com/
• http://wireframes.linowski.ca/
Ejemplos
• http://www.jeff.io/posts/sketches-wireframes-css
Un Juego
• http://dedesigntheweb.com/
