SlideShare una empresa de Scribd logo
1 de 90
Descargar para leer sin conexión
Criando o design de
apps para celulares
Javier «Simón» Cuello
@millonestarde
@millonestarde
Javier Cuello
@millonestarde
Diseñadores + desarrolladores
“Necesitamos un diseñador de iconos”.
Desarrollador
Diseñador
“No puedo continuar, porque Javier no me ha enviado los
iconos.”
Trabajo en cascada.
Comunicados de principio a fin.
Lean Startup
UX
Concepto
Prototipo
Test
La idea del millón de dólares
“Debería haber una app para esto”
¿Qué debería tener una app?
Hacer algo con una app, debería ser más fácil que
hacerlo sin ella
Diseños preliminares
Queremos apps intuitivas
familiares
Labels
Cómo diseñar wireframes
El prototipo
Desafíos
Tamaños de pantalla
iPhone 6
iPhone 6
iPhone 6 Plus
Gestos
Algunas recomendaciones
Posponer el login, para eliminar
barreras de entrada.
No usar tours ni pantallas de
bienvenida innecesarias.
Pensar en los primeros usos, y en
qué pasará después.
Herramientas
Animando la app
Más allá del móvil
San Francisco
• Un dispositivo mucho más personal.
• Interacciones mucho más cortas.
• Si en móvil no todo tiene sentido, aquí menos.
Una cosa más…
“Un prototipo vale más que mil reuniones.”
— Mike Davidson, Twitter
Obrigado,
campuseiros!
Javier «Simón» Cuello
@millonestarde

Más contenido relacionado

La actualidad más candente (17)

Usabilidad En Telefonos Moviles
Usabilidad En Telefonos MovilesUsabilidad En Telefonos Moviles
Usabilidad En Telefonos Moviles
 
Las apps
Las appsLas apps
Las apps
 
Las apps
Las appsLas apps
Las apps
 
Las apps
Las appsLas apps
Las apps
 
Las apps
Las appsLas apps
Las apps
 
Las apps.
Las apps.Las apps.
Las apps.
 
Las apps
Las appsLas apps
Las apps
 
Las apps en tipo presentacion
Las apps en tipo presentacionLas apps en tipo presentacion
Las apps en tipo presentacion
 
Windows 8
Windows 8 Windows 8
Windows 8
 
Windows 8
Windows 8 Windows 8
Windows 8
 
Windows 8
Windows 8 Windows 8
Windows 8
 
Patrones de diseño de interacción de interfaces móviles
Patrones de diseño de interacción de interfaces móvilesPatrones de diseño de interacción de interfaces móviles
Patrones de diseño de interacción de interfaces móviles
 
Las apps
Las appsLas apps
Las apps
 
110, Integrando diseño de UX y UI en desarrollos Móviles
110, Integrando diseño de UX y UI en desarrollos Móviles110, Integrando diseño de UX y UI en desarrollos Móviles
110, Integrando diseño de UX y UI en desarrollos Móviles
 
LAS APPS
LAS APPSLAS APPS
LAS APPS
 
Emprendiendo con proyectos Móviles
Emprendiendo con proyectos MóvilesEmprendiendo con proyectos Móviles
Emprendiendo con proyectos Móviles
 
14 lasapps
14 lasapps14 lasapps
14 lasapps
 

Similar a Criando o design de apps para celulares

Apps Design - iCon
Apps Design - iConApps Design - iCon
Apps Design - iConiCon
 
Curso de Design de Apps
Curso de Design de AppsCurso de Design de Apps
Curso de Design de AppsMergo
 
Échale diseño a tu APP - Bilbapp 2018
Échale diseño a tu APP - Bilbapp 2018Échale diseño a tu APP - Bilbapp 2018
Échale diseño a tu APP - Bilbapp 2018Crisiscreativa
 
¿Cómo trabajamos los diseñadores digitales?
¿Cómo trabajamos los diseñadores digitales?¿Cómo trabajamos los diseñadores digitales?
¿Cómo trabajamos los diseñadores digitales?Jimena Catalina Gayo
 
Taller lean ux apps.co
Taller lean ux apps.coTaller lean ux apps.co
Taller lean ux apps.coIlogica
 
Como prototipar MAL una aplicación. La importancia del Wireframe
Como prototipar MAL una aplicación. La importancia del WireframeComo prototipar MAL una aplicación. La importancia del Wireframe
Como prototipar MAL una aplicación. La importancia del WireframeJorge Galindo Cruces
 
Como prototipar MAL una aplicación. La importancia del Wireframe
Como prototipar MAL una aplicación. La importancia del WireframeComo prototipar MAL una aplicación. La importancia del Wireframe
Como prototipar MAL una aplicación. La importancia del Wireframebetabeers
 
Diseña tus aplicaciones multiplataforma
Diseña tus aplicaciones multiplataformaDiseña tus aplicaciones multiplataforma
Diseña tus aplicaciones multiplataformaPlain Concepts
 
Experiencia de Usuario en un contexto de desarrollo de software, lecciones ap...
Experiencia de Usuario en un contexto de desarrollo de software, lecciones ap...Experiencia de Usuario en un contexto de desarrollo de software, lecciones ap...
Experiencia de Usuario en un contexto de desarrollo de software, lecciones ap...Herlency Muñoz García
 
¿Cómo diseñar una buena Aplicación para dispositivos móviles?
¿Cómo diseñar una buena Aplicación para dispositivos móviles?¿Cómo diseñar una buena Aplicación para dispositivos móviles?
¿Cómo diseñar una buena Aplicación para dispositivos móviles?DNRstudios
 
"UX Design for Mobile Developers" - Andres Jordan Zeballos - GDG Cochabamba
"UX Design for Mobile Developers" - Andres Jordan Zeballos - GDG Cochabamba"UX Design for Mobile Developers" - Andres Jordan Zeballos - GDG Cochabamba
"UX Design for Mobile Developers" - Andres Jordan Zeballos - GDG Cochabambagdgsantacruz
 

Similar a Criando o design de apps para celulares (20)

Apps Design - iCon
Apps Design - iConApps Design - iCon
Apps Design - iCon
 
Curso de Design de Apps
Curso de Design de AppsCurso de Design de Apps
Curso de Design de Apps
 
Échale diseño a tu APP - Bilbapp 2018
Échale diseño a tu APP - Bilbapp 2018Échale diseño a tu APP - Bilbapp 2018
Échale diseño a tu APP - Bilbapp 2018
 
¿Cómo trabajamos los diseñadores digitales?
¿Cómo trabajamos los diseñadores digitales?¿Cómo trabajamos los diseñadores digitales?
¿Cómo trabajamos los diseñadores digitales?
 
Windows Phone 8 - be modern be cool
Windows Phone 8 - be modern be coolWindows Phone 8 - be modern be cool
Windows Phone 8 - be modern be cool
 
Las apps
Las appsLas apps
Las apps
 
Taller lean ux apps.co
Taller lean ux apps.coTaller lean ux apps.co
Taller lean ux apps.co
 
Las apps
Las apps Las apps
Las apps
 
Las apps
Las appsLas apps
Las apps
 
Apps
AppsApps
Apps
 
Como prototipar MAL una aplicación. La importancia del Wireframe
Como prototipar MAL una aplicación. La importancia del WireframeComo prototipar MAL una aplicación. La importancia del Wireframe
Como prototipar MAL una aplicación. La importancia del Wireframe
 
Como prototipar MAL una aplicación. La importancia del Wireframe
Como prototipar MAL una aplicación. La importancia del WireframeComo prototipar MAL una aplicación. La importancia del Wireframe
Como prototipar MAL una aplicación. La importancia del Wireframe
 
Diseña tus aplicaciones multiplataforma
Diseña tus aplicaciones multiplataformaDiseña tus aplicaciones multiplataforma
Diseña tus aplicaciones multiplataforma
 
Presentacion diseño apps
Presentacion diseño appsPresentacion diseño apps
Presentacion diseño apps
 
Las apps
Las appsLas apps
Las apps
 
Experiencia de Usuario en un contexto de desarrollo de software, lecciones ap...
Experiencia de Usuario en un contexto de desarrollo de software, lecciones ap...Experiencia de Usuario en un contexto de desarrollo de software, lecciones ap...
Experiencia de Usuario en un contexto de desarrollo de software, lecciones ap...
 
Las apps
Las appsLas apps
Las apps
 
¿Cómo diseñar una buena Aplicación para dispositivos móviles?
¿Cómo diseñar una buena Aplicación para dispositivos móviles?¿Cómo diseñar una buena Aplicación para dispositivos móviles?
¿Cómo diseñar una buena Aplicación para dispositivos móviles?
 
Unidad 3 elaboracion de un proyecto (3.1)
Unidad  3   elaboracion de un proyecto (3.1)Unidad  3   elaboracion de un proyecto (3.1)
Unidad 3 elaboracion de un proyecto (3.1)
 
"UX Design for Mobile Developers" - Andres Jordan Zeballos - GDG Cochabamba
"UX Design for Mobile Developers" - Andres Jordan Zeballos - GDG Cochabamba"UX Design for Mobile Developers" - Andres Jordan Zeballos - GDG Cochabamba
"UX Design for Mobile Developers" - Andres Jordan Zeballos - GDG Cochabamba
 

Último

PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYkarendaza9506
 
Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30SantiagoAgudelo47
 
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdfCLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdfDanielaPrezMartnez3
 
Anexo Nivel 3 Ficha Lectura pptjsbdkks
Anexo  Nivel 3 Ficha  Lectura pptjsbdkksAnexo  Nivel 3 Ficha  Lectura pptjsbdkks
Anexo Nivel 3 Ficha Lectura pptjsbdkkscristinacastro892534
 
Fundamentos de la Ergonomía y sus características principales
Fundamentos de la Ergonomía y sus características principalesFundamentos de la Ergonomía y sus características principales
Fundamentos de la Ergonomía y sus características principalesLuis Fernando Salgado
 
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxPLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxLeo Florez
 
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILEARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILEhayax3
 
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
 
Planificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.docPlanificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.docAhilynBasabe
 
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfSlaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfslaimenbarakat
 
Manual de Construcción TATAMI - 2024.pdf
Manual de Construcción TATAMI - 2024.pdfManual de Construcción TATAMI - 2024.pdf
Manual de Construcción TATAMI - 2024.pdfGermnBelzunce1
 
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
 
140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.docilvrosiebp
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesespejosflorida
 
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
 
Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezPaola575380
 
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGersonManuelRodrigue1
 
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptxDISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptxNorberto Chacon
 
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
 

Último (20)

PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
 
Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30
 
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdfCLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
 
Anexo Nivel 3 Ficha Lectura pptjsbdkks
Anexo  Nivel 3 Ficha  Lectura pptjsbdkksAnexo  Nivel 3 Ficha  Lectura pptjsbdkks
Anexo Nivel 3 Ficha Lectura pptjsbdkks
 
Fundamentos de la Ergonomía y sus características principales
Fundamentos de la Ergonomía y sus características principalesFundamentos de la Ergonomía y sus características principales
Fundamentos de la Ergonomía y sus características principales
 
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxPLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
 
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILEARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
 
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
 
Planificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.docPlanificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.doc
 
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfSlaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
 
Manual de Construcción TATAMI - 2024.pdf
Manual de Construcción TATAMI - 2024.pdfManual de Construcción TATAMI - 2024.pdf
Manual de Construcción TATAMI - 2024.pdf
 
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
 
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
 
140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientes
 
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
 
Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola Perez
 
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
 
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptxDISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
 
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
 

Criando o design de apps para celulares