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.

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

PagBoleto+

•  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

Floopie App

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

Bienvenidos al universo mobile.

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.

Apps móviles x softwares Apps (mobile)

(-) Procesamiento

Pantalla + pequeña

Touchscreen + avanzado

(+) Interacción

Softwares (desktops)

(+) Procesamiento

Pantalla + grande

Pantalla simples

(-) Interacción

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.

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

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.

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

El diseñador está presente en todo el

proceso de desarrollo de una

app, desde la idea hasta la promoción.

Tareas

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

¿Cómo empezar?

Lluvia de ideas

Flujograma

Wireframe

Diseño

[1] Lluvia de ideas

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

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

[2] Flujograma

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

•  Organizar pantallas, objetos y funcionalidades.

Ejemplo de flujograma

Herramienta

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

www.xmind.net

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

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

[3] Wireframe

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

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

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

iOS 7 GUI iPhone 5 GUI = Graphical User Interface

iOS Tipografía estándar

www.iosfonts.com iOS Fonts

Android GUI GUI = Graphical User Interface

Android GUI GUI = Graphical User Interface

Android GUI Otros elementos estándares

Android Tipografía estándar

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

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

[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

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

•  imagem@2x.png (para pantalla de retina – iPhone 4/4S)

•  imagem-568h@2x.png (para pantalla de 5” – iPhone

5/5C/5S)

Una app iOS con layout personalizado

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

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

“Tips”

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

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

El “post-diseño”

Desarrollo

Pruebas

Publicación

Promoción

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

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

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

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

¿Algo para compartir o preguntar?