TUX2013 - Diseño para plataformas móviles

Transcript

1. Guido Fortini Diseñador de interacción visual Diseño para plataformas móviles
2. • ¿Qué es una app? • Breve reseña histórica • Aspectos técnicos específicos de cada plataforma • Comenzando a trabajar con un proyecto • Definiendo el flujo de la app • Splash - Pantalla de inicio - Navegación • Caso de estudio • ¿Cómo se preparan los archivos para desarrollar? ¿Con qué nos encontraremos?
3. ¿Qué es una app? “En esencia, una aplicación no deja de ser un software. Para entender un poco mejor el concepto, podemos decir que las aplicaciones son para los móviles lo que los programas son para las computadoras de escritorio.” “Actualmente encontramos aplicaciones de todo tipo, forma y color, pero en los primeros teléfonos, estaban enfocadas en mejorar la productividad personal: se trataba de alarmas, calendarios, calculadoras y clientes de correo.” Diseñando apps para móviles - Javier Cuello y José Vittone
4. EL PRIMER DINOSAURIO Las Palms y las PDAs llegaron para extinguirse pronto pero dejaron el camino marcado a sus sucesores. LA LLEGADA DE WINDOWS Windows mobile revolucionó elmercado de las PDAs. Por fin el público entendió de qué se trata tener un dispositivo móbil en el que puede realizar varias tareas. EL MEJOR HÍBRIDO La Palm Treo 600 está catalogada como la mejor versión de la serie Palm por su robustez y versatilidad. Incoporó la grabación de video en un dispositivo telefónico smart. EL MEJOR HÍBRIDO La Palm Treo 600 está catalogada como la mejor versión de la serie Palm por su robustez y versatilidad. Incoporó la grabación de video en un dispositivo telefónico smart. EL SMART 100% Última versión de iPhone con procesador de doble núcleo y pantalla retina con cámara integrada de 8 megapixels La historia resumida
5. A tener en cuenta... Algunos datos relevantes sobre las apps • En 2007, la industria de aplicaciones móviles no existía. • En 2008, Apple lanzó el Appstore y en 9 meses se descargan 1 millón de apps. • Hoy en día se descargan 2 millones de apps semanales, solo entre Appstore y GooglePlay. • El usuario de smarthphones latinoamericano, invierte más de 127 minutos por día usando las apps de su smartphone. • El promedio tiene instalado más de 100 apps en sus teléfonos (Yo ya conté las apps que tengo instaladas y no llego a esa cifra pero si tengo bastantes). • La economía de las apps creó más de 500.000 puestos de trabajo en los últimos años.
7. Conceptualización Definición Diseño Desarrollo Publicación Diseñador Desarrollador Cantidad de trabajo El proceso El diseño y desarrollo de una app, abarca desde la concepción de la idea hasta el análisis posterior a su publicación.
8. ¿Con cuantas plataformas contamos hoy? Android iOS Blackberry Z10 Java Windows Phone
9. Nokia Nexus Galaxy iPhone 4 iPhone 5 iPad iPad Mini ... y con qué resoluciones? 768x1280 1920x1200 1080x1920 640x960 640x1136 2048 x 1536 1024x768
10. Definiendo el flujo Es primordial contar con un mapa del flujo de la app Respostas 1.2 Conversaçao Feed de Comentarios 1 Autores 2 Relatórios Overview 3 Publicaçoes 1.1 Configuraçoes Períodos e Termos 4 Autor Unificar Agrupar 2.1 Grupos 2.1 Sentimentos 3.1 Sentimentos no tempo 3.2 Canais 3.3 Fontes 4.1 Equipe 4.2 Minha Conta 4.3 Autores 3.4 Tag Cloud 3.5 Grupo 2.1.1 Customer Plusoft / iCustomer Project User Experience Design Document Application Map Versión 0.8 Author Mariano Andrés García Department The Log in 0 Esqueceu Senha 0.1 informação válida? SIM NÃO Adicionar Membro
11. Entonces arranquemos Bocetos previos para definir los objetivos Es importante contar con templates de dibujo sobre distintas plataformas, que podemos descargar de: uxdesign.smashingmagazine.com Del dibujo a mano pasamos a definir las pantallas con wireframes para que el cliente los apruebe previamente. Los realizamos con: balsamiq.com Se puede descargar una versión de Indigo gratuita desde: www.infragistics.com/ products/indigo-studio
13. Balsamiq Mockups
14. Primeras pantallas Definiremos un splash o pantalla de carga
15. Primeras pantallas Definiremos un home o pantalla principal
16. Primeras pantallas ¿Cómo y dónde estará nuestra navegación?
17. Un ejemplo concreto El nuevo diseño de la app de airbnb
18. Un ejemplo concreto El nuevo diseño de la app de airbnb
19. Nuestro proyecto Diseño de interfaz para TextPulse
20. Nuestro proyecto Diseño de interfaz para TextPulse
21. El trabajo de exportar uno a uno los archivos para desarrollar la app no es una tarea menor. Requiere de suma atención y cuidados previos teniendo en cuenta siempre la resolución y la plataforma sobre la que se desarrollará la app. iPhone 5: 640x1136 - 326ppi ¿Cómo exportar los assets? Siempre debemos tener en cuenta la resolución
22. Necesitamos ayuda Existen diversas alternativas de software para exportar componentes sobre cualquier plataforma: Slicy (Mac) macrabbit.com/slicy App Cut&Slice me (Mac y PC) www.cutandslice.me Extensión de PS
23. A exportar se ha dicho... Veremos ejemplos usando ambos softwares y sus propiedades iPhone 5: 640x1136 - 326ppi Nombre: boton-h568@2x~iphone.png Medidas: 250x60px Debemos tener siempre presente si vamos a exportar un componente para un dispositivo retina display
24. guido@theuxdepartment.com @guidofortini ¡Muchas gracias!