acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · creación fácil...

53

Upload: vuhuong

Post on 29-Sep-2018

213 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y
Page 2: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

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.

Page 3: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

•  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.

PagBoleto+

Page 4: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

PagBoleto+

Page 5: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

•  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.

Floopie App

Page 6: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

Floopie App

Page 7: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

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

Page 8: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y
Page 9: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

Bienvenidos al universo mobile.

Page 10: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

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.

Page 11: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

Apps móviles x softwares Apps (mobile)

(-) Procesamiento

Pantalla + pequeña

Touchscreen + avanzado

(+) Interacción

Softwares (desktops)

(+) Procesamiento

Pantalla + grande

Pantalla simples

(-) Interacción

Page 12: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

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.

Page 13: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

App móvil x Web móvil

App móvil

Se lo ejecuta localmente con cargamento rápido y mejor

interacción

Más inversión debido a la demanda de tiempo y recursos

Exige una versión diferente para cada sistema operacional

(nativo)

Web móvil

La dependencia de Internet resulta en cargamento y

respuesta más lentos

Menos inversión, ya que es más rápido y fácil de desarrollar

Creación fácil de versiones multiplataforma y para navegadores (HTML5)

COSTO

DESEMPEÑO

COMPATIBILIDAD

Page 14: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

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.

Page 15: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

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

Page 16: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

El diseñador está presente en todo el

proceso de desarrollo de una

app, desde la idea hasta la promoción.

Page 17: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

Tareas

Referencia y ilustración: Libro “Diseñando Apps para Móviles”

Page 18: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

¿Cómo empezar?

Lluvia de ideas

Flujograma

Wireframe

Diseño

Page 19: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

[1] Lluvia de ideas

Page 20: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

¿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.

Page 21: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

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

Page 22: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

[2] Flujograma

•  Con la idea definida, es extremadamente importante pensar en la navegación.

•  Organizar pantallas, objetos y funcionalidades.

Page 23: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

Ejemplo de flujograma

Page 24: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

Herramienta

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

www.xmind.net

Page 25: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

[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.

Page 26: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

[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.

Page 27: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

[3] Wireframe

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

Page 28: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

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.

www.mockflow.com

Page 29: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y
Page 30: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

[4] Diseño

•  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.

¿Layout estándar o personalizado?

Page 31: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

iOS 7 GUI iPhone 5 GUI = Graphical User Interface

Page 32: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y
Page 33: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

iOS Tipografía estándar

www.iosfonts.com iOS Fonts

Page 34: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

Android GUI GUI = Graphical User Interface

Page 35: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

Android GUI GUI = Graphical User Interface

Page 36: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

Android GUI Otros elementos estándares

Page 37: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

Android Tipografía estándar

Page 38: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

[4] Diseño

•  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)

¿Layout estándar o personalizado?

Page 39: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

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

Page 40: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

[4] Diseño

•  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.

Una app iOS con layout estándar

Page 41: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

[4] Diseño

•  Usted podrá crear toda la interfaz sin limitaciones, siguiendo las Buenas Prácticas suministradas por Apple

en su página de Developer (http://developer.apple.com).

•  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)

•  [email protected] (para pantalla de retina – iPhone 4/4S)

•  [email protected] (para pantalla de 5” – iPhone

5/5C/5S)

Una app iOS con layout personalizado

Page 42: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

“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.

Page 43: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

“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)

Page 44: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

“Tips”

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

Page 45: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

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

Page 46: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

El “post-diseño”

Desarrollo

Pruebas

Publicación

Promoción

Page 47: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

[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.

Page 48: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

[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.

Page 49: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

[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.

Page 50: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

[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.

Page 51: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y

¿Algo para compartir o preguntar?

Page 52: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y
Page 53: Acerca defido.palermo.edu/.../administracion-concursos/archivos_conf_2013/... · Creación fácil de versiones multiplataforma y para navegadores ... más parecida a Javascript, y