Elemento Design e Mobile PagBoleto Floopie App

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Elemento Design e Mobile PagBoleto Floopie App"

Aurora del Río Arroyo
hace 6 años
Vistas:

2 Acerca de mí Diseñadora y socia-directora de Elemento Design e Mobile desde 2006 Diseñadora de Interfaz por el Instituto de Artes Interactivas de São Paulo (Brasil) 2 aplicativos lanzados desde 2010! PagBoleto y! Floopie App.

3 PagBoleto+ PagBoleto, lector de código de barras para ios (iphone 3GS+, ipad 3+). Indicado por una de las principales publicaciones de tecnología de Brasil, la revista Dicas Info, como mejor app de la categoría Finanzas en la AppStore, más de 120 mil downloads en 1 año.

4 PagBoleto+

5 Floopie App Floopie, rede social para ios y Android, lanzada en marzo/13, y integrada al Facebook y Twitter, disponible en Brasil, EE.UU., Canadá, Australia, Nueva Zelanda, Argentina, Chile, Uruguay, Perú, México y países de Europa.

6 Floopie App

7 Cómo sería el mundo si no existieran los móviles?

9 Bienvenidos al universo mobile.

10 Apps móviles Las aplicaciones son para los dispositivos móviles lo mismo que los programas son para los ordenadores: son descargadas, instaladas y ejecutan alguna tarea.

11 Apps móviles x softwares Apps (mobile) Softwares (desktops) (-) Procesamiento (+) Procesamiento Pantalla + pequeña Pantalla + grande Touchscreen + avanzado Pantalla simples (+) Interacción (-) Interacción

12 Web móvil Las web móviles se pueden accederse fácilmente usando Internet y un navegador, tal como un sitio web. Hay también las responsivas, que se adaptan a las pantallas de los dispositivos.

demanda de tiempo y recursos Menos inversión, ya que es más rápido y fácil de desarrollar COMPATIBILIDAD Exige una

13 App móvil x Web móvil App móvil Web móvil DESEMPEÑO Se lo ejecuta localmente con cargamento rápido y mejor interacción La dependencia de Internet resulta en cargamento y respuesta más lentos COSTO Más inversión debido a la demanda de tiempo y recursos Menos inversión, ya que es más rápido y fácil de desarrollar COMPATIBILIDAD Exige una versión diferente para cada sistema operacional (nativo) Creación fácil de versiones multiplataforma y para navegadores (HTML5)

14 Sistemas operativos Android: se programan en Java haciendo uso de librerías propias de Android, en un Mac o un PC (Windows o Linux). ios: se usa una programación orientada a objetos - Objective-C (la nueva va a ser Swift, más parecida a Javascript, y va a ser lanzada con el ios 8). Solo se trabaja en Mac con el software Xcode. Windows Phone: se usa C# con las librerías de Windows Phone y se trabaja con un PC Windows.

15 Y ahora, que ya tenemos en cuenta las características de una app, manos a la obra.

16 El diseñador está presente en todo el proceso de desarrollo de una app, desde la idea hasta la promoción.

17 Tareas Referencia y ilustración: Libro Diseñando Apps para Móviles

18 Cómo empezar? Lluvia de ideas Flujograma Wireframe Diseño

19 [1] Lluvia de ideas

20 Cómo acertar? Qué hace que una app sea éxitosa? Ineditismo. A la gente le gustan cosas que nunca vieron antes. Interacción. El usuario no quiere leer, quiere hacer. Participar. Facilidad de uso. Ellos no quieren gastar el tiempo con instrucciones. Es necesario ser objetivo. Diseño innovador. A ellos les gusta una interfaz atractiva.

21 El usuario siempre tiene la última palabra. Entonces, tenemos que diseñar para ellos.

22 [2] Flujograma Con la idea definida, es extremadamente importante pensar en la navegación. Organizar pantallas, objetos y funcionalidades.

23 Ejemplo de flujograma

24 Herramienta Xmind: un software con versión libre para elaboración de diagramas de flujo y mapas conceptuales.

25 [3] Wireframe Antes de empezar con la arquitectura de la información, es demasiado importante dibujar y hacer bosquejos en un papel. Crear, romper, re-crear.

26 [3] Wireframe Con la idea y los dibujos más concretos, se estructura el wireframe, etapa donde definimos los rasgos generales de la aplicación: Secciones; Distribución de contenidos; Flujo del usuario; Interacción.

27 [3] Wireframe Podemos decir que un wireframe es un flujograma diseñado, usando la pantalla para la distribución de contenido.

28 Herramienta MockFlow: es una herramienta online con versión gratuita para creación de wireframes y interfaces de usuario con componentes pre-formateados. Se puede crear proyectos para web, web móvil, app móvil y themes, como Wordpress y Joomla.

30 [4] Diseño Layout estándar o personalizado? Layout estándar: se usa elementos estándares de cada sistema operacional para desarrollar el layout. ios: Con el Interface Builder, de Xcode, usted puede incluir elementos listos para que sean activados en la programación. Pros: Menos trabajo de diseño Usuario ya familiarizado con la interfaz Contras: Aplicación estándar, por lo tanto, poco atractiva.

31 ios 7 GUI iphone 5 GUI = Graphical User Interface

33 ios Tipografía estándar ios Fonts

34 Android GUI GUI = Graphical User Interface

35 Android GUI GUI = Graphical User Interface

36 Android GUI Otros elementos estándares

37 Android Tipografía estándar

38 [4] Diseño Layout estándar o personalizado? Layout personalizado: Usted también puede crear su propio diseño, partiendo desde el cero, y generar todos los elementos como imágenes separadas para que sean aplicadas en la programación. Pros: Una interfaz más atractiva y diferenciada Contras: Más trabajo de diseño, de desarrollo Más atención en cada detalle (navegación, usabilidad)

39 [4] Diseño Ejemplo de diseño personalizado

40 [4] Diseño Una app ios con layout estándar Los componentes tienen apariencias y comportamientos ya definidos por Apple, y si se los utilizan deben seguir al pie de la letra la aplicación de cada uno de ellos. Usted podrá personalizar los colores, sin que el componente pierda su característica visual estándar (degradés, formatos, etc.). No es necesario guardar una imagen PNG para cada uno de ellos. Interface Builder se encarga de incluir el componente listo.

41 [4] Diseño Una app ios con layout personalizado Usted podrá crear toda la interfaz sin limitaciones, siguiendo las Buenas Prácticas suministradas por Apple en su página de Developer ( Todos los elementos, botones y componentes deberán ser guardados en PNG, en dos o tres formatos para cada ítem: imagem.png (para pantalla de iphone 3GS o inferior) imagem@2x.png (para pantalla de retina iphone 4/4S) imagem-568h@2x.png (para pantalla de 5 iphone 5/5C/5S)

42 Tips Touchscreen: Recuerde proyectar para el toque del usuario (tamaño del dedo). Se recomienda botones con por lo menos 40 a 80px, dependiendo de la resolución de pantalla. No existe el evento "mouse over. Desplazamiento de contenido vertical y navegación horizontal, que sea fácil de aprender.

43 Tips Evite exceso de llenado de formularios y, cuando sea necesario, facilite la entrada de esos datos (componentes de cada sistema operacional). Evite el uso de muchas tipografías. Use una para título y otra para texto, como máximo, dando prioridad de elección a las fuentes que sean fáciles de leer. Procure diseñar interfaces limpias, en favor de una estética digital más simplificada y clásica. (Ie.: flat design > Windows Phone > ios 7)

44 Tips Ponga énfasis en lo simple y minimalista, dando prioridad a la función.

45 Pues bien, la primera etapa se cumplió. Y ahora, después del diseño?

46 El post-diseño Desarrollo Pruebas Publicación Promoción

47 [1] Desarrollo El programador se encarga de dar vida a los diseños y crear la estructura sobre la cual se apoyará el funcionamiento de la app. Programación del código; Corrección de bugs.

48 [2] Pruebas Es demasiado importante que se hagan pruebas con un grupo de usuarios que no estén en el proyecto, para que se encuentren bugs no antes visto por el equipo de desarrollo. Se recomienda también que se hagan pruebas en diversos dispositivos, con pantallas y procesamiento distintos.

49 [3] Publicación Es cuando la app finalmente es puesta a disposición de los usuarios en las tiendas. Es importante evaluar el comportamiento y desempeño de la app, corregir errores, realizar mejoras etc. Lanzamiento; Seguimiento.

50 [4] Promoción Para conseguir el mayor número de descargas en necesario promocionar la aplicación: En las propias tiendas; En sitios web especializados; En Facebook; En tu proprio sitio web.

51 Algo para compartir o preguntar?

Documentos relacionados

Ahora tú también puedes crear aplicaciones

Ahora tú también puedes crear aplicaciones Qué son las aplicaciones? Una aplicación es un software, podemos decir que las aplicaciones son para los móviles lo que los programas son para los ordenadores