SlideShare une entreprise Scribd logo
1  sur  30
Télécharger pour lire hors ligne
PARA PADAWANS
Axure
#axurepadawans
Axure PARA PADAWANS
XAVI CARDET
UX Designer & Researcher
@uxavic
PARA PADAWANS
¿QUÉ
HAREMOS?
Axure
El proceso del diseño y la toma
de decisiones
Luchando con Axure
1
2
PARA PADAWANS
El proceso del diseño y
la toma de decisiones
Axure
PARA PADAWANSAxure
“oh… no… otro UX
explicando como debe
ser el proceso de diseño”
| El proceso del diseño y la toma de decisiones
El amigo consultor
PARA PADAWANSAxure
Antes de hacer pinturitas y jugar con ellas…
| El proceso del diseño y la toma de decisiones
usuarios contexto goals necesidades AI
…define tu producto
PARA PADAWANSAxure
Ahora si, saca ese artista que llevas dentro
| El proceso del diseño y la toma de decisiones
SKETCH TEST
ITERA
sketch
WIREFRAME PROTOTYPETEST TEST
DESIGN
DEVELOP
COPY
ITERA
wireframe
ITERA
prototipo
PARA PADAWANSAxure
¿Dónde se encuentra AXURE?
| El proceso del diseño y la toma de decisiones
Fidelidad de tu diseño
Tiempo
Sketches
Wireframes
Prototype
Mockup
Nunca empieces usar AXURE sin antes
tener plasmada tu idea con un papel y
un lápiz
Grandma's UX advice
| El proceso del diseño y la toma de decisiones
Grandma's UX advice
Axure PARA PADAWANS
Encarna
PARA PADAWANSAxure
“¡Pero no puedo hacer user testing!”
| El proceso del diseño y la toma de decisiones
https://popapp.in/
Haz paperprototype y testéalo
Grandma's UX advice
Sketching = Drawing
Wireframing = Designing
Axure PARA PADAWANS | El proceso del diseño y la toma de decisiones
Prototyping = The Product
PARA PADAWANSAxure | El proceso del diseño y la toma de decisiones
Una aplicación de diseño
sirve para diseñar y una
aplicación de prototipado
sirve para prototipar
PARA PADAWANSAxure | El proceso del diseño y la toma de decisiones
Hay muchas aplicaciones…
http://www.cooper.com/prototyping-tools
Prototyping Tool Selector
PARA PADAWANSAxure | El proceso del diseño y la toma de decisiones
No todas sirven para lo mismo
SOLO WIREFRAME PROTOTIPADO TESTING / SIMULAR
Low Fidelity Hight Fidelity HTML Prototype Only Wireframe
PARA PADAWANSAxure | El proceso del diseño y la toma de decisiones
¿Cuál es la combinación perfecta?
“Adobelievers”
UX
“solo” diseñadores
WIREFRAME PROTOTYPE
SIMULATE OR
USER TESTING
PARA PADAWANSAxure
AVOCADO AXURE RP BALSAMIQ MOCKUPS CACOO CODEPEN CSS DECK
DABBLET DRAW.IO FLASH CC FLINTO FLUID UP FRAMER STUDIO
FRAMER.JS GLIFFY GOOGLE WEB DESIGNER INDESIGN CC INDIGO STUDIO
INVISION JS BIN JS FIDDLE JUSTINMIND KEYNOTE LIVEWEAVE LUCID
CHART MAGIC MOCKUPS MARVEL OMNIGRAFFLE ORIGAMI PIXATE PLACE
IT POLYMER DESIGNER POP POWERPOINT PROTO.IO SOLIDIFY TWITTER
BOOTSTRAP UX PIN VISIO VUE WIREFRAME.CC
AVOCADO AXURE RP BALSAMIQ MOCKUPS CACOO CODEPEN CSS DECK
DABBLET DRAW.IO FLASH CC FLINTO FLUID UP FRAMER STUDIO
FRAMER.JS GLIFFY GOOGLE WEB DESIGNER INDESIGN CC INDIGO STUDIO
INVISION JS BIN JS FIDDLE JUSTINMIND KEYNOTE LIVEWEAVE LUCID
CHART MAGIC MOCKUPS MARVEL OMNIGRAFFLE ORIGAMI PIXATE PLACE
IT POLYMER DESIGNER POP POWERPOINT PROTO.IO SOLIDIFY TWITTER
BOOTSTRAP UX PIN VISIO VUE WIREFRAME.CC
PARA PADAWANSAxure | El proceso del diseño y la toma de decisiones
Venga… muy interesante…
¿Qué tiene de bueno
AXURE?
PARA PADAWANSAxure
¿Qué tiene AXURE?
| El proceso del diseño y la toma de decisiones
Cosas buenas
Popularidad de la app en las empresas
Comunidad muy activa
Curva de aprendizaje baja
*No necesitas saber nada de programación
Prototipos en HTML
Publicación gratuita en la red
Gestión de librerías y infinidad de repositorio
Posibilidad de trabajar en equipo
Creación de User Flow
Linea fina entre prototipo y realidad
PARA PADAWANSAxure
¿Qué tiene AXURE?
| El proceso del diseño y la toma de decisiones
Control de los gestos
PARA PADAWANSAxure
¿Qué tiene AXURE?
| El proceso del diseño y la toma de decisiones
Control de las acciones
PARA PADAWANS
Luchando con AXURE
Axure
PARA PADAWANSAxure
Cosas que debes saber antes…
| El proceso del diseño y la toma de decisiones
TOOLBAR
PÁGINAS
WIDGETS
MASTERS
- ACCIONES
- NOTAS
- ESTILOS
ELEMENTOS
DE LA PÁGINA
ÁREA PRINCIPAL
PARA PADAWANSAxure
Cosas que debes saber antes…
| El proceso del diseño y la toma de decisiones
Páginas vs Paneles Dinámicos
PÁGINAS PANELES DINÁMICOS
No hay curva de aprendizaje
Funciona el botón volver atrás Control de los gestos
Animaciones y transiciones
PARA APPS O ESTADOSPÁGINAS WEB
PARA PADAWANSAxure
Cosas que debes saber antes…
| El proceso del diseño y la toma de decisiones
Usa Axure solo si es necesario
PARA PADAWANSAxure
Cosas que debes saber antes…
| El proceso del diseño y la toma de decisiones
No utilices imágenes, utiliza widgets y pon estilos
PARA PADAWANSAxure
Cosas que debes saber antes…
| El proceso del diseño y la toma de decisiones
Pon un nombre a casi todo
PARA PADAWANSAxure
Cosas que debes saber antes…
| El proceso del diseño y la toma de decisiones
Los “masters” pueden ser tus grandes aliados
PARA PADAWANSAxure | El proceso del diseño y la toma de decisiones
PARA PADAWANSAxure
Recomendaciones
| El proceso del diseño y la toma de decisiones
Visitar su FORUM
http://www.axure.com/c/forum.php
Webs de librerías de elementos y widgets
http://www.axure.com/support/download-widget-libraries
http://www.humbleux.com/
http://axureland.com/
http://axutopia.com/
PARA PADAWANSAxure
May axure be
with you

Contenu connexe

Similaire à Axure para padawans

UX no es lo mismo que UI
UX no es lo mismo que UIUX no es lo mismo que UI
UX no es lo mismo que UIAndrea Cantú
 
Herramientas para desarrollar rápidamente
Herramientas para desarrollar rápidamenteHerramientas para desarrollar rápidamente
Herramientas para desarrollar rápidamenteCarlos Toxtli
 
Diseño de la Experiencia de Usuario con Agile
Diseño de la Experiencia de Usuario con AgileDiseño de la Experiencia de Usuario con Agile
Diseño de la Experiencia de Usuario con AgileJohnny Ordóñez
 
Presentaciones Ramiro Alvarez - eCommerce IT Camp
Presentaciones Ramiro Alvarez - eCommerce IT Camp Presentaciones Ramiro Alvarez - eCommerce IT Camp
Presentaciones Ramiro Alvarez - eCommerce IT Camp eCommerce Institute
 
OK UX #1 - Entendiendo y creando una estrategia de user experience para su em...
OK UX #1 - Entendiendo y creando una estrategia de user experience para su em...OK UX #1 - Entendiendo y creando una estrategia de user experience para su em...
OK UX #1 - Entendiendo y creando una estrategia de user experience para su em...Alysson Franklin Martins Moreira, UXMC
 
Responsive Web Design: Reinventando el diseño web
Responsive Web Design: Reinventando el diseño webResponsive Web Design: Reinventando el diseño web
Responsive Web Design: Reinventando el diseño webJavier Usobiaga
 
Principios básicos de UX para móviles
Principios básicos de UX para móvilesPrincipios básicos de UX para móviles
Principios básicos de UX para móvilesJavier Cuello
 
Metodología de Diseño Centrada en el Usuario
Metodología de Diseño Centrada en el UsuarioMetodología de Diseño Centrada en el Usuario
Metodología de Diseño Centrada en el UsuarioMaximiliano Martin
 
Clase Práctica Wireframes
Clase Práctica WireframesClase Práctica Wireframes
Clase Práctica WireframesRodrigo Vera
 
Responsive Web Design: reinventando el diseño web
Responsive Web Design: reinventando el diseño webResponsive Web Design: reinventando el diseño web
Responsive Web Design: reinventando el diseño webJavier Usobiaga
 
Gestión de proyectos web y móviles
Gestión de proyectos web y móvilesGestión de proyectos web y móviles
Gestión de proyectos web y móvilesSergio Brito
 
Tecnologías para hacer Arquitectura de Información
Tecnologías para hacer Arquitectura de InformaciónTecnologías para hacer Arquitectura de Información
Tecnologías para hacer Arquitectura de InformaciónRodrigo Ronda
 
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvilEdición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvilMarta Armada
 
#Uxday. Construir sin desperdicio por Jorge Bastidas
#Uxday. Construir sin desperdicio por Jorge Bastidas#Uxday. Construir sin desperdicio por Jorge Bastidas
#Uxday. Construir sin desperdicio por Jorge BastidasMultiplica
 
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 @ iTexicoProduct School
 
Geeks Papervision3 D
Geeks Papervision3 DGeeks Papervision3 D
Geeks Papervision3 DGeeks Ecuador
 

Similaire à Axure para padawans (20)

UX no es lo mismo que UI
UX no es lo mismo que UIUX no es lo mismo que UI
UX no es lo mismo que UI
 
Responsive web design: reinventando el diseño web
Responsive web design: reinventando el diseño webResponsive web design: reinventando el diseño web
Responsive web design: reinventando el diseño web
 
Herramientas para desarrollar rápidamente
Herramientas para desarrollar rápidamenteHerramientas para desarrollar rápidamente
Herramientas para desarrollar rápidamente
 
Diseño de la Experiencia de Usuario con Agile
Diseño de la Experiencia de Usuario con AgileDiseño de la Experiencia de Usuario con Agile
Diseño de la Experiencia de Usuario con Agile
 
Etapas del desarrollo web
Etapas del desarrollo webEtapas del desarrollo web
Etapas del desarrollo web
 
Presentaciones Ramiro Alvarez - eCommerce IT Camp
Presentaciones Ramiro Alvarez - eCommerce IT Camp Presentaciones Ramiro Alvarez - eCommerce IT Camp
Presentaciones Ramiro Alvarez - eCommerce IT Camp
 
OK UX #1 - Entendiendo y creando una estrategia de user experience para su em...
OK UX #1 - Entendiendo y creando una estrategia de user experience para su em...OK UX #1 - Entendiendo y creando una estrategia de user experience para su em...
OK UX #1 - Entendiendo y creando una estrategia de user experience para su em...
 
Diseño de Experiencia de Usuario UxD
Diseño de Experiencia de Usuario UxDDiseño de Experiencia de Usuario UxD
Diseño de Experiencia de Usuario UxD
 
Taller de Design Thinking v2 20140308
Taller de Design Thinking v2 20140308Taller de Design Thinking v2 20140308
Taller de Design Thinking v2 20140308
 
Responsive Web Design: Reinventando el diseño web
Responsive Web Design: Reinventando el diseño webResponsive Web Design: Reinventando el diseño web
Responsive Web Design: Reinventando el diseño web
 
Principios básicos de UX para móviles
Principios básicos de UX para móvilesPrincipios básicos de UX para móviles
Principios básicos de UX para móviles
 
Metodología de Diseño Centrada en el Usuario
Metodología de Diseño Centrada en el UsuarioMetodología de Diseño Centrada en el Usuario
Metodología de Diseño Centrada en el Usuario
 
Clase Práctica Wireframes
Clase Práctica WireframesClase Práctica Wireframes
Clase Práctica Wireframes
 
Responsive Web Design: reinventando el diseño web
Responsive Web Design: reinventando el diseño webResponsive Web Design: reinventando el diseño web
Responsive Web Design: reinventando el diseño web
 
Gestión de proyectos web y móviles
Gestión de proyectos web y móvilesGestión de proyectos web y móviles
Gestión de proyectos web y móviles
 
Tecnologías para hacer Arquitectura de Información
Tecnologías para hacer Arquitectura de InformaciónTecnologías para hacer Arquitectura de Información
Tecnologías para hacer Arquitectura de Información
 
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvilEdición de bolsillo: CSS3, HTML5 y JS para la web móvil
Edición de bolsillo: CSS3, HTML5 y JS para la web móvil
 
#Uxday. Construir sin desperdicio por Jorge Bastidas
#Uxday. Construir sin desperdicio por Jorge Bastidas#Uxday. Construir sin desperdicio por Jorge Bastidas
#Uxday. Construir sin desperdicio por Jorge Bastidas
 
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
 
Geeks Papervision3 D
Geeks Papervision3 DGeeks Papervision3 D
Geeks Papervision3 D
 

Dernier

Diseño de sifones y alcantarillas para obras hidraulicas
Diseño de sifones y alcantarillas para obras hidraulicasDiseño de sifones y alcantarillas para obras hidraulicas
Diseño de sifones y alcantarillas para obras hidraulicasRiegosVeracruz
 
Topografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civilTopografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civilmeloamerica93
 
guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfcucciolosfabrica
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfLeonardoDantasRivas
 
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfBrbara57940
 
Proceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoProceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoJorge Fernandez
 
Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezPaola575380
 
Jesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitecturaJesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitecturajesusgrosales12
 
Slaimen Barakat - SLIDESHARE TAREA 2.pdf
Slaimen Barakat - SLIDESHARE TAREA 2.pdfSlaimen Barakat - SLIDESHARE TAREA 2.pdf
Slaimen Barakat - SLIDESHARE TAREA 2.pdfslaimenbarakat
 
PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYO
PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYOPDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYO
PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYOManuelBustamante49
 
Torre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificioTorre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificio2021ArqROLDANBERNALD
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesespejosflorida
 
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroGeometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroJuan Carlos Fonseca Mata
 
Presentación Proyecto Vintage Scrapbook Marrón (1).pdf
Presentación Proyecto Vintage Scrapbook Marrón (1).pdfPresentación Proyecto Vintage Scrapbook Marrón (1).pdf
Presentación Proyecto Vintage Scrapbook Marrón (1).pdfAdrianaCarolinaMoral2
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialAndreaMlaga1
 
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdfCERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdfasnsdt
 
Brochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdfBrochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdfhellotunahaus
 
Presentacion de 100 psicologos dijeron.pptx
Presentacion de 100 psicologos dijeron.pptxPresentacion de 100 psicologos dijeron.pptx
Presentacion de 100 psicologos dijeron.pptxbarbaracantuflr
 

Dernier (20)

Diseño de sifones y alcantarillas para obras hidraulicas
Diseño de sifones y alcantarillas para obras hidraulicasDiseño de sifones y alcantarillas para obras hidraulicas
Diseño de sifones y alcantarillas para obras hidraulicas
 
Topografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civilTopografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civil
 
guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdf
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdf
 
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
 
Proceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoProceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimiento
 
Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola Perez
 
Jesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitecturaJesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitectura
 
Slaimen Barakat - SLIDESHARE TAREA 2.pdf
Slaimen Barakat - SLIDESHARE TAREA 2.pdfSlaimen Barakat - SLIDESHARE TAREA 2.pdf
Slaimen Barakat - SLIDESHARE TAREA 2.pdf
 
PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYO
PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYOPDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYO
PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYO
 
1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño
 
Torre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificioTorre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificio
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientes
 
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroGeometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de Querétaro
 
Presentación Proyecto Vintage Scrapbook Marrón (1).pdf
Presentación Proyecto Vintage Scrapbook Marrón (1).pdfPresentación Proyecto Vintage Scrapbook Marrón (1).pdf
Presentación Proyecto Vintage Scrapbook Marrón (1).pdf
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especial
 
Arte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusaArte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusa
 
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdfCERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
 
Brochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdfBrochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdf
 
Presentacion de 100 psicologos dijeron.pptx
Presentacion de 100 psicologos dijeron.pptxPresentacion de 100 psicologos dijeron.pptx
Presentacion de 100 psicologos dijeron.pptx
 

Axure para padawans

  • 2. Axure PARA PADAWANS XAVI CARDET UX Designer & Researcher @uxavic
  • 3. PARA PADAWANS ¿QUÉ HAREMOS? Axure El proceso del diseño y la toma de decisiones Luchando con Axure 1 2
  • 4. PARA PADAWANS El proceso del diseño y la toma de decisiones Axure
  • 5. PARA PADAWANSAxure “oh… no… otro UX explicando como debe ser el proceso de diseño” | El proceso del diseño y la toma de decisiones El amigo consultor
  • 6. PARA PADAWANSAxure Antes de hacer pinturitas y jugar con ellas… | El proceso del diseño y la toma de decisiones usuarios contexto goals necesidades AI …define tu producto
  • 7. PARA PADAWANSAxure Ahora si, saca ese artista que llevas dentro | El proceso del diseño y la toma de decisiones SKETCH TEST ITERA sketch WIREFRAME PROTOTYPETEST TEST DESIGN DEVELOP COPY ITERA wireframe ITERA prototipo
  • 8. PARA PADAWANSAxure ¿Dónde se encuentra AXURE? | El proceso del diseño y la toma de decisiones Fidelidad de tu diseño Tiempo Sketches Wireframes Prototype Mockup
  • 9. Nunca empieces usar AXURE sin antes tener plasmada tu idea con un papel y un lápiz Grandma's UX advice | El proceso del diseño y la toma de decisiones Grandma's UX advice Axure PARA PADAWANS Encarna
  • 10. PARA PADAWANSAxure “¡Pero no puedo hacer user testing!” | El proceso del diseño y la toma de decisiones https://popapp.in/ Haz paperprototype y testéalo
  • 11. Grandma's UX advice Sketching = Drawing Wireframing = Designing Axure PARA PADAWANS | El proceso del diseño y la toma de decisiones Prototyping = The Product
  • 12. PARA PADAWANSAxure | El proceso del diseño y la toma de decisiones Una aplicación de diseño sirve para diseñar y una aplicación de prototipado sirve para prototipar
  • 13. PARA PADAWANSAxure | El proceso del diseño y la toma de decisiones Hay muchas aplicaciones… http://www.cooper.com/prototyping-tools Prototyping Tool Selector
  • 14. PARA PADAWANSAxure | El proceso del diseño y la toma de decisiones No todas sirven para lo mismo SOLO WIREFRAME PROTOTIPADO TESTING / SIMULAR Low Fidelity Hight Fidelity HTML Prototype Only Wireframe
  • 15. PARA PADAWANSAxure | El proceso del diseño y la toma de decisiones ¿Cuál es la combinación perfecta? “Adobelievers” UX “solo” diseñadores WIREFRAME PROTOTYPE SIMULATE OR USER TESTING
  • 16. PARA PADAWANSAxure AVOCADO AXURE RP BALSAMIQ MOCKUPS CACOO CODEPEN CSS DECK DABBLET DRAW.IO FLASH CC FLINTO FLUID UP FRAMER STUDIO FRAMER.JS GLIFFY GOOGLE WEB DESIGNER INDESIGN CC INDIGO STUDIO INVISION JS BIN JS FIDDLE JUSTINMIND KEYNOTE LIVEWEAVE LUCID CHART MAGIC MOCKUPS MARVEL OMNIGRAFFLE ORIGAMI PIXATE PLACE IT POLYMER DESIGNER POP POWERPOINT PROTO.IO SOLIDIFY TWITTER BOOTSTRAP UX PIN VISIO VUE WIREFRAME.CC AVOCADO AXURE RP BALSAMIQ MOCKUPS CACOO CODEPEN CSS DECK DABBLET DRAW.IO FLASH CC FLINTO FLUID UP FRAMER STUDIO FRAMER.JS GLIFFY GOOGLE WEB DESIGNER INDESIGN CC INDIGO STUDIO INVISION JS BIN JS FIDDLE JUSTINMIND KEYNOTE LIVEWEAVE LUCID CHART MAGIC MOCKUPS MARVEL OMNIGRAFFLE ORIGAMI PIXATE PLACE IT POLYMER DESIGNER POP POWERPOINT PROTO.IO SOLIDIFY TWITTER BOOTSTRAP UX PIN VISIO VUE WIREFRAME.CC
  • 17. PARA PADAWANSAxure | El proceso del diseño y la toma de decisiones Venga… muy interesante… ¿Qué tiene de bueno AXURE?
  • 18. PARA PADAWANSAxure ¿Qué tiene AXURE? | El proceso del diseño y la toma de decisiones Cosas buenas Popularidad de la app en las empresas Comunidad muy activa Curva de aprendizaje baja *No necesitas saber nada de programación Prototipos en HTML Publicación gratuita en la red Gestión de librerías y infinidad de repositorio Posibilidad de trabajar en equipo Creación de User Flow Linea fina entre prototipo y realidad
  • 19. PARA PADAWANSAxure ¿Qué tiene AXURE? | El proceso del diseño y la toma de decisiones Control de los gestos
  • 20. PARA PADAWANSAxure ¿Qué tiene AXURE? | El proceso del diseño y la toma de decisiones Control de las acciones
  • 22. PARA PADAWANSAxure Cosas que debes saber antes… | El proceso del diseño y la toma de decisiones TOOLBAR PÁGINAS WIDGETS MASTERS - ACCIONES - NOTAS - ESTILOS ELEMENTOS DE LA PÁGINA ÁREA PRINCIPAL
  • 23. PARA PADAWANSAxure Cosas que debes saber antes… | El proceso del diseño y la toma de decisiones Páginas vs Paneles Dinámicos PÁGINAS PANELES DINÁMICOS No hay curva de aprendizaje Funciona el botón volver atrás Control de los gestos Animaciones y transiciones PARA APPS O ESTADOSPÁGINAS WEB
  • 24. PARA PADAWANSAxure Cosas que debes saber antes… | El proceso del diseño y la toma de decisiones Usa Axure solo si es necesario
  • 25. PARA PADAWANSAxure Cosas que debes saber antes… | El proceso del diseño y la toma de decisiones No utilices imágenes, utiliza widgets y pon estilos
  • 26. PARA PADAWANSAxure Cosas que debes saber antes… | El proceso del diseño y la toma de decisiones Pon un nombre a casi todo
  • 27. PARA PADAWANSAxure Cosas que debes saber antes… | El proceso del diseño y la toma de decisiones Los “masters” pueden ser tus grandes aliados
  • 28. PARA PADAWANSAxure | El proceso del diseño y la toma de decisiones
  • 29. PARA PADAWANSAxure Recomendaciones | El proceso del diseño y la toma de decisiones Visitar su FORUM http://www.axure.com/c/forum.php Webs de librerías de elementos y widgets http://www.axure.com/support/download-widget-libraries http://www.humbleux.com/ http://axureland.com/ http://axutopia.com/