SlideShare una empresa de Scribd logo
Prototipado con Axure
Jon Parro
Prototipado
Jon Parro

Representación web

Definición y ubicación de los elemento
Características

Construcción  rápida y ágil.

Evolución  proceso iterativo.

Unión  sugiere, propone, cuestiona.

Reducción distancia  objetivo del negocio y necesidad del usuario.
¿Qué es?
Prototipado
Jon Parro
¿Por qué prototipar?

Reducción de incertidumbre

Generación de ideas

Abstracción del diseño

Comunicación más fluida equipo-cliente

Validación de requerimientos

Reducción de tiempo y costes
Prototipado
Jon Parro

Fases iniciales  Detección problemas  Mayor facilidad y menor coste

Proceso evolutivo  Feedback  Aumento de fidelidad
1. Papel
2. Wireframe de baja y alta fidelidad
3. Diseño gráfico
4. Maqueta navegable, enfocada a desarrollo
Ciclo de vida en un proyecto
Prototipado
Jon Parro

Definición estructura espacial

Poco parecido al resultado final

Validación conceptos generales
Apariencia
Información
Estructura espacial
Interacción
Wireframe de baja fidelidad
Prototipado
Jon Parro
Wireframe de alta fidelidad

Estructura espacial totalmente definida

Aumenta la fidelidad

Aumenta la interacción
Apariencia
Información
Estructura espacial
Interacción
Prototipado
Jon Parro
Diseño gráfico

Foco en el diseño gráfico

Fidelidad visual máxima

Carece de interacción
Apariencia
Información
Estructura espacial
Interacción
Prototipado
Jon Parro
Maqueta

Maqueta navegable enfocada a desarrollo

Incorpora el xhtml + css + accesibilidad

Maqueta y el producto final  idénticos
Apariencia
Información
Estructura espacial
Interacción
Prototipado
Jon Parro
Herramientas
Prototipado
Jon Parro
y ahora… Axure
Prototipado
Jon Parro
Muchas gracias ;-)
jonparro@gmail.com

Más contenido relacionado

Similar a Prototipado y Axure

Episodio 10 de 12 - Exploramos Wireframes & Prototipos @ iTexico
Episodio 10 de 12 - Exploramos Wireframes & Prototipos @ iTexicoEpisodio 10 de 12 - Exploramos Wireframes & Prototipos @ iTexico
Episodio 10 de 12 - Exploramos Wireframes & Prototipos @ iTexico
Product School
 
Unidad 3 elaboracion de un proyecto (2)
Unidad  3   elaboracion de un proyecto (2)Unidad  3   elaboracion de un proyecto (2)
Unidad 3 elaboracion de un proyecto (2)
Josefina Guerrero Garcia
 
creando la Metodología propia
creando la Metodología propiacreando la Metodología propia
creando la Metodología propia
tanyamurillo77
 
Metodología BRAIN
Metodología BRAINMetodología BRAIN
Metodología BRAIN
tanyamurillo77
 
Bedomax - Campus Party 2013
Bedomax - Campus Party 2013Bedomax - Campus Party 2013
Bedomax - Campus Party 2013
bedomax
 
Taller Escribir Para El Web Webprendedor
Taller Escribir Para El Web   WebprendedorTaller Escribir Para El Web   Webprendedor
Taller Escribir Para El Web Webprendedor
Juan C. Camus
 
Release de una nueva versión de un software comercial
Release de una nueva versión de un software comercialRelease de una nueva versión de un software comercial
Release de una nueva versión de un software comercial
Andoni Gonzalo
 
Buenas Prácticas ES - Capítulo #3 - Colaboración entre negocio y desarrollo c...
Buenas Prácticas ES - Capítulo #3 - Colaboración entre negocio y desarrollo c...Buenas Prácticas ES - Capítulo #3 - Colaboración entre negocio y desarrollo c...
Buenas Prácticas ES - Capítulo #3 - Colaboración entre negocio y desarrollo c...
Bonitasoft
 
Implementación de un proyecto EDI
Implementación de un proyecto EDIImplementación de un proyecto EDI
Implementación de un proyecto EDI
Sergio E. Sánchez
 
Presentacion AticSoft "comercio electrónico". Cámara de Comercio de Castellón
Presentacion AticSoft "comercio electrónico". Cámara de Comercio de CastellónPresentacion AticSoft "comercio electrónico". Cámara de Comercio de Castellón
Presentacion AticSoft "comercio electrónico". Cámara de Comercio de Castellón
Cámara Oficial de Comercio, Industria y Navegación de Castellón
 
Victor gomez
Victor gomezVictor gomez
Eficiencia en la gestión documental para despachos profesionales
Eficiencia en la gestión documental para despachos profesionales Eficiencia en la gestión documental para despachos profesionales
Eficiencia en la gestión documental para despachos profesionales
comissioosi
 
Ensayo de diseño de sistemas ii corte
Ensayo de diseño de sistemas ii corteEnsayo de diseño de sistemas ii corte
Ensayo de diseño de sistemas ii corte
Jean Cruz
 
Gep2009 Eq1 Cap8 ComunicacióN
Gep2009 Eq1 Cap8 ComunicacióNGep2009 Eq1 Cap8 ComunicacióN
Gep2009 Eq1 Cap8 ComunicacióN
equipo6sio
 
Medición de los servicios en web gestionados por las unidades de información
Medición de los servicios en web gestionados por las unidades de informaciónMedición de los servicios en web gestionados por las unidades de información
Medición de los servicios en web gestionados por las unidades de información
Jose Luis Menéndez
 
Historias de Usuario en acción: potenciando el valor de los productos
Historias de Usuario en acción: potenciando el valor de los productosHistorias de Usuario en acción: potenciando el valor de los productos
Historias de Usuario en acción: potenciando el valor de los productos
Marco Avendaño
 
Diseñando para las personas - #ForoArea
Diseñando para las personas - #ForoAreaDiseñando para las personas - #ForoArea
Diseñando para las personas - #ForoArea
The Social Experience
 
Usabilidad web
Usabilidad webUsabilidad web
Fase de análisis
Fase de análisisFase de análisis
Fase de análisis
RobertoGallo32
 
IxDA BA Mobile 20 julio 2010
IxDA BA Mobile 20 julio 2010IxDA BA Mobile 20 julio 2010
IxDA BA Mobile 20 julio 2010
Santiago Bustelo
 

Similar a Prototipado y Axure (20)

Episodio 10 de 12 - Exploramos Wireframes & Prototipos @ iTexico
Episodio 10 de 12 - Exploramos Wireframes & Prototipos @ iTexicoEpisodio 10 de 12 - Exploramos Wireframes & Prototipos @ iTexico
Episodio 10 de 12 - Exploramos Wireframes & Prototipos @ iTexico
 
Unidad 3 elaboracion de un proyecto (2)
Unidad  3   elaboracion de un proyecto (2)Unidad  3   elaboracion de un proyecto (2)
Unidad 3 elaboracion de un proyecto (2)
 
creando la Metodología propia
creando la Metodología propiacreando la Metodología propia
creando la Metodología propia
 
Metodología BRAIN
Metodología BRAINMetodología BRAIN
Metodología BRAIN
 
Bedomax - Campus Party 2013
Bedomax - Campus Party 2013Bedomax - Campus Party 2013
Bedomax - Campus Party 2013
 
Taller Escribir Para El Web Webprendedor
Taller Escribir Para El Web   WebprendedorTaller Escribir Para El Web   Webprendedor
Taller Escribir Para El Web Webprendedor
 
Release de una nueva versión de un software comercial
Release de una nueva versión de un software comercialRelease de una nueva versión de un software comercial
Release de una nueva versión de un software comercial
 
Buenas Prácticas ES - Capítulo #3 - Colaboración entre negocio y desarrollo c...
Buenas Prácticas ES - Capítulo #3 - Colaboración entre negocio y desarrollo c...Buenas Prácticas ES - Capítulo #3 - Colaboración entre negocio y desarrollo c...
Buenas Prácticas ES - Capítulo #3 - Colaboración entre negocio y desarrollo c...
 
Implementación de un proyecto EDI
Implementación de un proyecto EDIImplementación de un proyecto EDI
Implementación de un proyecto EDI
 
Presentacion AticSoft "comercio electrónico". Cámara de Comercio de Castellón
Presentacion AticSoft "comercio electrónico". Cámara de Comercio de CastellónPresentacion AticSoft "comercio electrónico". Cámara de Comercio de Castellón
Presentacion AticSoft "comercio electrónico". Cámara de Comercio de Castellón
 
Victor gomez
Victor gomezVictor gomez
Victor gomez
 
Eficiencia en la gestión documental para despachos profesionales
Eficiencia en la gestión documental para despachos profesionales Eficiencia en la gestión documental para despachos profesionales
Eficiencia en la gestión documental para despachos profesionales
 
Ensayo de diseño de sistemas ii corte
Ensayo de diseño de sistemas ii corteEnsayo de diseño de sistemas ii corte
Ensayo de diseño de sistemas ii corte
 
Gep2009 Eq1 Cap8 ComunicacióN
Gep2009 Eq1 Cap8 ComunicacióNGep2009 Eq1 Cap8 ComunicacióN
Gep2009 Eq1 Cap8 ComunicacióN
 
Medición de los servicios en web gestionados por las unidades de información
Medición de los servicios en web gestionados por las unidades de informaciónMedición de los servicios en web gestionados por las unidades de información
Medición de los servicios en web gestionados por las unidades de información
 
Historias de Usuario en acción: potenciando el valor de los productos
Historias de Usuario en acción: potenciando el valor de los productosHistorias de Usuario en acción: potenciando el valor de los productos
Historias de Usuario en acción: potenciando el valor de los productos
 
Diseñando para las personas - #ForoArea
Diseñando para las personas - #ForoAreaDiseñando para las personas - #ForoArea
Diseñando para las personas - #ForoArea
 
Usabilidad web
Usabilidad webUsabilidad web
Usabilidad web
 
Fase de análisis
Fase de análisisFase de análisis
Fase de análisis
 
IxDA BA Mobile 20 julio 2010
IxDA BA Mobile 20 julio 2010IxDA BA Mobile 20 julio 2010
IxDA BA Mobile 20 julio 2010
 

Último

Projecte Iniciativa TIC 2024 KAWARU CONSULTING. inCV.pdf
Projecte Iniciativa TIC 2024 KAWARU CONSULTING. inCV.pdfProjecte Iniciativa TIC 2024 KAWARU CONSULTING. inCV.pdf
Projecte Iniciativa TIC 2024 KAWARU CONSULTING. inCV.pdf
Festibity
 
Nuevos tiempos, nuevos espacios.docxdsdsad
Nuevos tiempos, nuevos espacios.docxdsdsadNuevos tiempos, nuevos espacios.docxdsdsad
Nuevos tiempos, nuevos espacios.docxdsdsad
larapalaciosmonzon28
 
Mantenimiento de sistemas eléctricos y electrónicosarticles-241712_recurso_6....
Mantenimiento de sistemas eléctricos y electrónicosarticles-241712_recurso_6....Mantenimiento de sistemas eléctricos y electrónicosarticles-241712_recurso_6....
Mantenimiento de sistemas eléctricos y electrónicosarticles-241712_recurso_6....
MiguelAtencio10
 
Presentación de Tic en educación y sobre blogger
Presentación de Tic en educación y sobre bloggerPresentación de Tic en educación y sobre blogger
Presentación de Tic en educación y sobre blogger
larapalaciosmonzon28
 
625204013-64-Camino-a-----La-Lectura.pdf
625204013-64-Camino-a-----La-Lectura.pdf625204013-64-Camino-a-----La-Lectura.pdf
625204013-64-Camino-a-----La-Lectura.pdf
yuberpalma
 
Modo test refrigeradores y codigos de errores 2018 V2.pdf
Modo test refrigeradores y codigos de errores 2018 V2.pdfModo test refrigeradores y codigos de errores 2018 V2.pdf
Modo test refrigeradores y codigos de errores 2018 V2.pdf
ranierglez
 
PLAN DE MANTENMIENTO preventivo de un equipo de computo.pdf
PLAN DE MANTENMIENTO preventivo de un equipo de computo.pdfPLAN DE MANTENMIENTO preventivo de un equipo de computo.pdf
PLAN DE MANTENMIENTO preventivo de un equipo de computo.pdf
70244530
 
MONOGRAFIA memoria RAM.docx trabajo DE TECNOLOGIA
MONOGRAFIA memoria RAM.docx trabajo DE TECNOLOGIAMONOGRAFIA memoria RAM.docx trabajo DE TECNOLOGIA
MONOGRAFIA memoria RAM.docx trabajo DE TECNOLOGIA
leia ereni
 
Refrigeradores Samsung Modo Test y Forzado
Refrigeradores Samsung Modo Test y ForzadoRefrigeradores Samsung Modo Test y Forzado
Refrigeradores Samsung Modo Test y Forzado
NicandroMartinez2
 
Flows: Mejores Prácticas y Nuevos Features
Flows: Mejores Prácticas y Nuevos FeaturesFlows: Mejores Prácticas y Nuevos Features
Flows: Mejores Prácticas y Nuevos Features
Paola De la Torre
 
Projecte Iniciativa TIC 2024 SOPRA STERIA. inCV.pdf
Projecte Iniciativa TIC 2024 SOPRA STERIA. inCV.pdfProjecte Iniciativa TIC 2024 SOPRA STERIA. inCV.pdf
Projecte Iniciativa TIC 2024 SOPRA STERIA. inCV.pdf
Festibity
 
Catalogo Refrigeracion Miele Distribuidor Oficial Amado Salvador Valencia
Catalogo Refrigeracion Miele Distribuidor Oficial Amado Salvador ValenciaCatalogo Refrigeracion Miele Distribuidor Oficial Amado Salvador Valencia
Catalogo Refrigeracion Miele Distribuidor Oficial Amado Salvador Valencia
AMADO SALVADOR
 
Todo sobre la tarjeta de video (Bienvenidos a mi blog personal)
Todo sobre la tarjeta de video (Bienvenidos a mi blog personal)Todo sobre la tarjeta de video (Bienvenidos a mi blog personal)
Todo sobre la tarjeta de video (Bienvenidos a mi blog personal)
AbrahamCastillo42
 
Informació Projecte Iniciativa TIC HPE.pdf
Informació Projecte Iniciativa TIC HPE.pdfInformació Projecte Iniciativa TIC HPE.pdf
Informació Projecte Iniciativa TIC HPE.pdf
Festibity
 
EXAMEN DE TOPOGRAFIA RESUELTO-2017 CURSO DE UNIVERSIDAD
EXAMEN DE TOPOGRAFIA RESUELTO-2017 CURSO DE UNIVERSIDADEXAMEN DE TOPOGRAFIA RESUELTO-2017 CURSO DE UNIVERSIDAD
EXAMEN DE TOPOGRAFIA RESUELTO-2017 CURSO DE UNIVERSIDAD
AngelCristhianMB
 
Presentación Seguridad Digital Profesional Azul Oscuro (1).pdf
Presentación Seguridad Digital Profesional Azul Oscuro (1).pdfPresentación Seguridad Digital Profesional Azul Oscuro (1).pdf
Presentación Seguridad Digital Profesional Azul Oscuro (1).pdf
giampierdiaz5
 
Programming & Artificial Intelligence ebook.pdf
Programming & Artificial Intelligence ebook.pdfProgramming & Artificial Intelligence ebook.pdf
Programming & Artificial Intelligence ebook.pdf
Manuel Diaz
 
Second Life, informe de actividad del maestro Tapia
Second Life, informe de actividad del maestro TapiaSecond Life, informe de actividad del maestro Tapia
Second Life, informe de actividad del maestro Tapia
al050121024
 
TIC en educacion.rtf.docxlolololololololo
TIC en educacion.rtf.docxlolololololololoTIC en educacion.rtf.docxlolololololololo
TIC en educacion.rtf.docxlolololololololo
KukiiSanchez
 
Manual de Soporte y mantenimiento de equipo de cómputos
Manual de Soporte y mantenimiento de equipo de cómputosManual de Soporte y mantenimiento de equipo de cómputos
Manual de Soporte y mantenimiento de equipo de cómputos
cbtechchihuahua
 

Último (20)

Projecte Iniciativa TIC 2024 KAWARU CONSULTING. inCV.pdf
Projecte Iniciativa TIC 2024 KAWARU CONSULTING. inCV.pdfProjecte Iniciativa TIC 2024 KAWARU CONSULTING. inCV.pdf
Projecte Iniciativa TIC 2024 KAWARU CONSULTING. inCV.pdf
 
Nuevos tiempos, nuevos espacios.docxdsdsad
Nuevos tiempos, nuevos espacios.docxdsdsadNuevos tiempos, nuevos espacios.docxdsdsad
Nuevos tiempos, nuevos espacios.docxdsdsad
 
Mantenimiento de sistemas eléctricos y electrónicosarticles-241712_recurso_6....
Mantenimiento de sistemas eléctricos y electrónicosarticles-241712_recurso_6....Mantenimiento de sistemas eléctricos y electrónicosarticles-241712_recurso_6....
Mantenimiento de sistemas eléctricos y electrónicosarticles-241712_recurso_6....
 
Presentación de Tic en educación y sobre blogger
Presentación de Tic en educación y sobre bloggerPresentación de Tic en educación y sobre blogger
Presentación de Tic en educación y sobre blogger
 
625204013-64-Camino-a-----La-Lectura.pdf
625204013-64-Camino-a-----La-Lectura.pdf625204013-64-Camino-a-----La-Lectura.pdf
625204013-64-Camino-a-----La-Lectura.pdf
 
Modo test refrigeradores y codigos de errores 2018 V2.pdf
Modo test refrigeradores y codigos de errores 2018 V2.pdfModo test refrigeradores y codigos de errores 2018 V2.pdf
Modo test refrigeradores y codigos de errores 2018 V2.pdf
 
PLAN DE MANTENMIENTO preventivo de un equipo de computo.pdf
PLAN DE MANTENMIENTO preventivo de un equipo de computo.pdfPLAN DE MANTENMIENTO preventivo de un equipo de computo.pdf
PLAN DE MANTENMIENTO preventivo de un equipo de computo.pdf
 
MONOGRAFIA memoria RAM.docx trabajo DE TECNOLOGIA
MONOGRAFIA memoria RAM.docx trabajo DE TECNOLOGIAMONOGRAFIA memoria RAM.docx trabajo DE TECNOLOGIA
MONOGRAFIA memoria RAM.docx trabajo DE TECNOLOGIA
 
Refrigeradores Samsung Modo Test y Forzado
Refrigeradores Samsung Modo Test y ForzadoRefrigeradores Samsung Modo Test y Forzado
Refrigeradores Samsung Modo Test y Forzado
 
Flows: Mejores Prácticas y Nuevos Features
Flows: Mejores Prácticas y Nuevos FeaturesFlows: Mejores Prácticas y Nuevos Features
Flows: Mejores Prácticas y Nuevos Features
 
Projecte Iniciativa TIC 2024 SOPRA STERIA. inCV.pdf
Projecte Iniciativa TIC 2024 SOPRA STERIA. inCV.pdfProjecte Iniciativa TIC 2024 SOPRA STERIA. inCV.pdf
Projecte Iniciativa TIC 2024 SOPRA STERIA. inCV.pdf
 
Catalogo Refrigeracion Miele Distribuidor Oficial Amado Salvador Valencia
Catalogo Refrigeracion Miele Distribuidor Oficial Amado Salvador ValenciaCatalogo Refrigeracion Miele Distribuidor Oficial Amado Salvador Valencia
Catalogo Refrigeracion Miele Distribuidor Oficial Amado Salvador Valencia
 
Todo sobre la tarjeta de video (Bienvenidos a mi blog personal)
Todo sobre la tarjeta de video (Bienvenidos a mi blog personal)Todo sobre la tarjeta de video (Bienvenidos a mi blog personal)
Todo sobre la tarjeta de video (Bienvenidos a mi blog personal)
 
Informació Projecte Iniciativa TIC HPE.pdf
Informació Projecte Iniciativa TIC HPE.pdfInformació Projecte Iniciativa TIC HPE.pdf
Informació Projecte Iniciativa TIC HPE.pdf
 
EXAMEN DE TOPOGRAFIA RESUELTO-2017 CURSO DE UNIVERSIDAD
EXAMEN DE TOPOGRAFIA RESUELTO-2017 CURSO DE UNIVERSIDADEXAMEN DE TOPOGRAFIA RESUELTO-2017 CURSO DE UNIVERSIDAD
EXAMEN DE TOPOGRAFIA RESUELTO-2017 CURSO DE UNIVERSIDAD
 
Presentación Seguridad Digital Profesional Azul Oscuro (1).pdf
Presentación Seguridad Digital Profesional Azul Oscuro (1).pdfPresentación Seguridad Digital Profesional Azul Oscuro (1).pdf
Presentación Seguridad Digital Profesional Azul Oscuro (1).pdf
 
Programming & Artificial Intelligence ebook.pdf
Programming & Artificial Intelligence ebook.pdfProgramming & Artificial Intelligence ebook.pdf
Programming & Artificial Intelligence ebook.pdf
 
Second Life, informe de actividad del maestro Tapia
Second Life, informe de actividad del maestro TapiaSecond Life, informe de actividad del maestro Tapia
Second Life, informe de actividad del maestro Tapia
 
TIC en educacion.rtf.docxlolololololololo
TIC en educacion.rtf.docxlolololololololoTIC en educacion.rtf.docxlolololololololo
TIC en educacion.rtf.docxlolololololololo
 
Manual de Soporte y mantenimiento de equipo de cómputos
Manual de Soporte y mantenimiento de equipo de cómputosManual de Soporte y mantenimiento de equipo de cómputos
Manual de Soporte y mantenimiento de equipo de cómputos
 

Prototipado y Axure

Notas del editor

  1. ¿Qué es?Consiste en crear prototipos realizando bocetos donde se representa cómo se verá una web o de cualquier producto interactivo (dispositivo móvil, cajero automático, aplicación). En estos bocetos se muestra de forma clara y sencilla donde estarán ubicados los elementos que componen una determinada página. Por ejemplo: cabecera, menú, imágenes, textos o formato de formularios.
  2. Reducción de incertidumbre. Generación de ideas. Abstracción del diseño para centrarnos en el contenido. Comunicación más fluida entre equipo y cliente. Validación de requerimientos. Reducción de tiempo y costes.
  3. En fases iniciales del proyecto. Cuanto antes mejor, más fácil y menos coste tendrá solucionar los problemas. Proceso evolutivo en el que se va recibiendo feedback y aumentando progresivamente la fidelidad: En papel. Wireframe de baja y alta fidelidad. Diseño gráfico/visual. Maqueta navegable y enfocada a desarrollo (xhtml + css + accesibilidad).
  4. Se define la estructura espacial. La fidelidad está muy lejos del producto final. Permite validar conceptos muy generales.
  5. La estructura espacial ya está totalmente definida. La fidelidad va en aumento. Aumenta la interacción. Pudiendo generar wireframes navegables no enfocados a desarrollo.
  6. El foco se sitúa en el diseño gráfico. La fidelidad visual es máxima. Carece de interacción.
  7. Se crea una maqueta navegable enfocada a desarrollo. Incorpora el xhtml + css + accesibilidad, válido según estándares. El aspecto de la maqueta y el producto final tiene que ser exactamente el mismo.
  8. Axure Justinmind Omnigraffle (Mac OS) Visio