Top Banner
PARA PADAWANS Axure #axurepadawans
30

Axure para padawans - Curso introductorio Axure

Jan 22, 2018

Download

Design

Xavi Cardet
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Axure para padawans - Curso introductorio Axure

PARA PADAWANSAxure

#axurepadawans

Page 2: Axure para padawans - Curso introductorio Axure

Axure PARA PADAWANS

XAVI CARDET

UX Designer & Researcher

@uxavic

Page 3: Axure para padawans - Curso introductorio Axure

PARA PADAWANS

¿QUÉ HAREMOS?

Axure

El proceso del diseño y la toma de decisiones

Luchando con Axure

1

2

Page 4: Axure para padawans - Curso introductorio Axure

PARA PADAWANS

El proceso del diseño y la toma de decisiones

Axure

Page 5: Axure para padawans - Curso introductorio 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

Page 6: Axure para padawans - Curso introductorio Axure

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

Page 7: Axure para padawans - Curso introductorio Axure

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 TESTDESIGN

DEVELOP

COPY

ITERA wireframe

ITERA prototipo

Page 8: Axure para padawans - Curso introductorio Axure

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

Page 9: Axure para padawans - Curso introductorio Axure

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

Page 10: Axure para padawans - Curso introductorio Axure

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

Page 11: Axure para padawans - Curso introductorio Axure

Grandma's UX advice

Sketching = DrawingWireframing = Designing

Axure PARA PADAWANS | El proceso del diseño y la toma de decisiones

Prototyping = The Product

Page 12: Axure para padawans - Curso introductorio Axure

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

Page 13: Axure para padawans - Curso introductorio Axure

PARA PADAWANSAxure | El proceso del diseño y la toma de decisiones

Hay muchas aplicaciones…

http://www.cooper.com/prototyping-toolsPrototyping Tool Selector

Page 14: Axure para padawans - Curso introductorio Axure

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

Page 15: Axure para padawans - Curso introductorio Axure

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 PROTOTYPESIMULATE OR

USER TESTING

Page 16: Axure para padawans - Curso introductorio Axure

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

Page 17: Axure para padawans - Curso introductorio Axure

PARA PADAWANSAxure | El proceso del diseño y la toma de decisiones

Venga… muy interesante… ¿Qué tiene de bueno AXURE?

Page 18: Axure para padawans - Curso introductorio 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

Page 19: Axure para padawans - Curso introductorio Axure

PARA PADAWANSAxure

¿Qué tiene AXURE?

| El proceso del diseño y la toma de decisiones

Control de los gestos

Page 20: Axure para padawans - Curso introductorio Axure

PARA PADAWANSAxure

¿Qué tiene AXURE?

| El proceso del diseño y la toma de decisiones

Control de las acciones

Page 21: Axure para padawans - Curso introductorio Axure

PARA PADAWANS

Luchando con AXURE

Axure

Page 22: Axure para padawans - Curso introductorio 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

Page 23: Axure para padawans - Curso introductorio Axure

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 aprendizajeFunciona el botón volver atrás Control de los gestos

Animaciones y transiciones

PARA APPS O ESTADOSPÁGINAS WEB

Page 24: Axure para padawans - Curso introductorio Axure

PARA PADAWANSAxure

Cosas que debes saber antes…

| El proceso del diseño y la toma de decisiones

Usa Axure solo si es necesario

Page 25: Axure para padawans - Curso introductorio Axure

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

Page 26: Axure para padawans - Curso introductorio Axure

PARA PADAWANSAxure

Cosas que debes saber antes…

| El proceso del diseño y la toma de decisiones

Pon un nombre a casi todo

Page 27: Axure para padawans - Curso introductorio Axure

PARA PADAWANSAxure

Cosas que debes saber antes…

| El proceso del diseño y la toma de decisiones

Los “masters” pueden ser tus grandes aliados

Page 28: Axure para padawans - Curso introductorio Axure

PARA PADAWANSAxure | El proceso del diseño y la toma de decisiones

Page 29: Axure para padawans - Curso introductorio Axure

PARA PADAWANSAxure

Recomendaciones

| El proceso del diseño y la toma de decisiones

Visitar su FORUMhttp://www.axure.com/c/forum.php

Webs de librerías de elementos y widgetshttp://www.axure.com/support/download-widget-librarieshttp://www.humbleux.com/http://axureland.com/http://axutopia.com/

Page 30: Axure para padawans - Curso introductorio Axure

PARA PADAWANSAxure

May axure be with you