El documento presenta una introducción al desarrollo y gestión de aplicaciones móviles corporativas. Se discutirán conceptos como UX, UI y diseño de experiencia de usuario, así como tipos de aplicaciones, tamaños de pantalla, flujos de usuario y tendencias actuales en diseño visual para aplicaciones móviles. El objetivo es proporcionar recomendaciones para el desarrollo exitoso de aplicaciones móviles.

1. 22.02.2017
Desarrollo y
gestión de
aplicaciones
móviles
corporativas

2. Qué veremos 1. Los conceptos: UX-UI
2. Como trabajamos
3. Qué sabemos
4. Tipos de App
5. El tamaño sí importa
6. La resolución
7. Áreas sensibles
8. Uso de patrones
9. Flujo de la App
10. Trabajar la interfaz
11. Trabajar la usabilidad
12. Diseño visual
13. Tendencias actuales
14. Material entregado
15. Recomendaciones

3. Natural de Menorca, me licencié en diseño digital en Barcelona, después en
diseño gráfico en París y finalmente en dirección de arte aquí en Madrid.
Por el camino…Londres, Tesalónica, Santiago de Chile o Zúrich me han
permitido aprender diferentes idiomas y considerarme ciudadana del
mundo.
Apasionada del diseño, la arquitectura y el motor.
Actualmente soy diseñadora UI UX en Plainconcepts. Podéis contactarme en:
Paloma Celaá
@plainconcepts 3
@PalomaCelaa y pcelaa@plainconcepts.com
UX Design

4. UX : (User Experience Design) o “Diseño de Experiencia de Usuario”
Es una práctica de diseño que tiene por objetivo satisfacer al usuario final de un
producto. Definir que experiencia se quiere lograr. Definimos, qué interfaz, qué
contenidos, que interacciones lograrán el resultado buscado. (pruebas con
usuarios, entrevistas cualitativas, heat maps, AB testing…).
UI : (User interface) o “Diseño de interfaz”
Parte del proceso de diseño donde se seleccionan y se distribuyen los elementos
de la interfaz. Consistencia entre dispositivos o plataformas. Puede o no incluir
diseño gráfico. (Wireframes, Mockups).
Final Design : “Diseño final”
Daremos estilo gráfico, color, forma a la interfaz definida.
Los conceptos
@plainconcepts 4
INTRODUCCIÓN
IxD
UI
UX
Delante de la pantalla
En la pantalla

5. Considerar al otro como un complemento, comunicarse siempre que haya duda, tenemos un objetivo común, el mejor
producto final posible.
Como trabajamos
@plainconcepts 5
INTRODUCCIÓN
Conceptualización Definición Diseño Desarrollo Publicación App final
Diseñador Programador
Carga de trabajo

6. 6
Conceptualización y definición

7. • Sobre cliente
• Quién es la competencia, que han hecho?
• En que podemos diferenciarnos. Ser mejores.
• Sobre los usuarios, quién va usar mi producto?
• Edad? Sexo?
• Que OS usan?
• En qué dispositivos?
• Sobre el contexto. Un usuario podría estar casi en cualquier sitio utilizando el móvil. Y aunque es gracioso uno de los sitios
donde más se utiliza el móvil es…el baño ;)
• Caminando?
• Sentado?
• En el coche?
Todas estas preguntas nos ayudarán a definir qué App vamos a trabajar, una App sólo para niños en Android, un App sólo
para chicas en iOS, etc…no tendrá más éxito porque esté en mas formatos y plataformas. Hay que ajustarse al usuario final.
Qué sabemos
@Plainconcepts 7
CONCEPTUALIZACIÓN Y DEFINICIÓN

8. Nativa
Son aplicaciones desarrolladas con el lenguaje
de programación nativo del dispositivo,
Objetive C o Swift para iOS, Java para
Android y .Net para Windows Phone.
El diseño será acorde al OS elegido, los
controles y animaciones vienen dados en la
herramienta de desarrollo. Fácil aproximación.
El UX es acorde a patrones establecidos. Nos
ayudará la Guía de Estilo que nos da la
plataforma elegida, colores fuentes e iconos
están determinados. Tomarse el tiempo en
customizar estos patrones a mi marca y estilo
para que tenga personalidad la App final.
Tipos de App
@Plainconcepts 8
CONCEPTUALIZACIÓN Y DEFINICIÓN
No existe una posición única respecto a qué alternativa usar.
Dependerá del tipo de aplicación y sobre todo los recursos humanos y económicos con que cuente el proyecto.
Híbrida
Son aplicaciones desarrolladas usando HTML5,
CSS y JavaScript, desplegadas dentro de un
contenedor nativo como Phonegap/Cordova el
cual brinda acceso a las capacidades del
dispositivo.
Estética definida por el diseñador. A veces
también es hibrida ya que se intenta usar el
mismo diseño para varias plataformas. No es
recomendable. Lo ideal es trabajar cada
plataforma independientemente, mejorará el
UX ya que los usuarios utilizan de diferente
forma cada OS y tienen lenguajes adquiridos.
Web
Son aplicaciones desarrolladas usando
herramientas como Xamarin o Genexus (entre
muchas otras), donde el desarrollo se realiza
usando técnicas y lenguajes específicos de la
herramienta elegida y luego se genera la App
en el lenguaje de la plataforma destino.
Aquí también es libertad del diseñador, y
como en la anterior se puede usar el mismo
trabajo con pocas variaciones para cada
plataforma. Pero siempre deberemos trabajar
un mínimo individualmente.

9. La plataforma y dispositivos elegidos
nos darán el escenario de trabajo
sobre el que empezar a trabajar.
Partimos del tamamño minimo para ir
escalando hacia arriba los elementos o
mostrar mas.
Considerar que mínimos utilizan los
segmentos de usuarios elegidos.
La teoría del MOBILE FIRST, defiende
empezar a diseñar por el dispositivo
mas pequeño, que es también el que
mas usamos.
El tamaño sí importa
@Plainconcepts 9
CONCEPTUALIZACIÓN Y DEFINICIÓN
iOS: 640x960 px , 200% HDPI
Android: 720x1280 px, 200% HDPI
Windows : 480x800 px, 150% HDPI
iOS: 1024x768px (iPad), 100% MDPI
Android: 600x1024, 100% HDPI
Windows: Surface 1366x768/1080x1920 px 150%HDPI
iOS: 2560x1600 (13”)
Windows: 1366x768 (portátiles) 1920x1080px (sobre mesa)
xBox o Playstation comparten el mismo resultado final ya que dependerá de la
TV del usuario
1280x720 px (conocido como HD ready) muchos ya son Full HD, 1920x1080
móvil
tablet
dektop
tv

10. MDPI: 1 X (Medium Density per Inch o Densidad por Pulgada Media 160 DPI)
HDPI: 1,5X (High Density per Inch o Densidad por Pulgada Alta 240 DPI)
XHDPI: 2X ( Extra High Density per Inch Densidad por Pulgada Extra Alta 320 DPI)
XXHDPI: 3X (XX High Density per Inch 480 DPI)
XXXHDPI: 4X (XXX High Density per Inch 640 DPI)
Que aplicándolo, si estamos trabajando en una imagen de 48×48 pixeles sería:
MDPI: 48 X 48
HDPI: 72 X 72
XHDPI: 96 X 96
XXHDPI: 144 X 144
XXXHDPI: 192 X 192
La resolución
@Plainconcepts 10
CONCEPTUALIZACIÓN Y DEFINICIÓN
Tener en cuanta la resolución de los
dispositivos elegidos para preparar el
material de diseño que se entregará al
equipo de desarrollo.
Un material a baja resolución en un
dispositivo de alta hará que se vean los
elementos gráficos borrosos y con mala
calidad.

11. 11
Trabajamos el Diseño UX

12. Según el tamaño del dispositivo el usuario lo utilizará más frecuentemente en una posición u otra. Aprovechar esa
capacidad para ofrecer la mejor experiencia al usuario final. Artículo de referencia
Áreas sensibles
@Plainconcepts 12
DISEÑO UX

13. Aprovechar el leguaje de cada dispositivo. Ejemplos de patrones
Uso de patrones
@Plainconcepts 13
DISEÑO UX

14. Flujo de app: post it o card sorting.
Definiremos las secciones principales y escribiremos un post para
cada acción que puede hacer el usuario.
• Me registro
• Busco un artículo
• Mando un mail
• Voy a mi perfil…
Las iremos colocando en cada sección hasta finalizar todos los
flujos posibles del usuario usando nuestra la App
Flujo de la app
@Plainconcepts 14
DISEÑO UX

15. Son esquemas sencillos que usamos para plantear la distribución
de los elementos en la interfaz. Con ellos planteamos toda la UI y
podemos empezar a ver problemas y soluciones de UX.
Esto es muy importatnte antes de generar el estilo gráfico, ya que
habremos resuelto todos los problemas de navegación y de
aparición de contenidos antes de trabajar nada de forma final.
Una opción rápida para pasar esto a digital, si no conocéis
herramientas de diseño, es el uso de Apps como Marvel
https://marvelapp.com/pop/?popref=1
Trabajamos
la interfaz
@Plainconcepts 15
WIREFRAMES

16. Son prototipos a escala real que nos ayudarán a plantear el resultado final y a estudiar posibilidades o mejoras. La
versión manual, es más sencilla si no tienes conocimientos de las herramientas de diseño. Se ve el resultado
rápidamente y es facil hacerse una idea de tamaños y cantidad de pantallas.
Trabajamos la usabilidad
@Plainconcepts 16
MOCKUPS

17. Antes de ponernos a diseñar el estilo grafico final es importante hacer una revision global, incluyamos al
desarrollador siempre que sea possible, para ver el alcance y funcionalidades juntos que se hayan cambiado o que
hayamos pensado modificar.
Arquitectura de información:
• Responde a esos post del inicio? Tiene sentido?
Que voy a trabajar de forma distinta en cada plataforma? Lo tengo identificado ya?
• Recordemos los patrones de cada plataforma
• Definamos aquellas variaciones que sean importantes en wireframes y mockup para cada una. Hacerlo mas tarde
nos puede suponer problemas de usabilidad importantes.
Punto de inflexión
@Plainconcepts 17
VISTA DE PÁJARO

18. Una vez nos pongamos manos a la obra tendremos que tener en cuenta las Guías de estilo para cada OS
• iOS - https://developer.apple.com/design/
• Android - https://developer.android.com/design/index.html
• Windows - https://developer.microsoft.com/en-us/windows/apps/design
Es importante conocerlas para poder jugar con los límites y poder ofrecer cosas nuevas. Si no será una App más,
igual a todas las demás. Busca como lo que ofrece la plataforma puede beneficiarte.
Acuerda las animaciones y transiciones con el equipo de desarrollo, si alguna no es posible ve como afecta eso a tu
diseño y si hay que añadir elementos gráficos de apoyo en sustitución.
Diseño visual
@Plainconcepts 18
ESTÉTICA FUNCIONAL

19. Como en la moda existen tendencias anuales que varían en función del mercado, las últimas son:
• Flat design, nació con windows 8, se ha ido actualizando con colores pastel y el uso de linea.
• Material Design, elementos con profundiad, sombras y colores juegan el papel esencial
• Transitions and animations, vienen dadas por casa OS y los usarios suelen tener aprendido su significado
• Functional Animation, es aquella que ayuda al usuario a entender una acción.
https://www.smashingmagazine.com/2017/01/how-functional-animation-helps-improve-user-experience/
Tendencias actuales
@Plainconcepts 19
NUEVOS ESTILOS QUE TRIUNFAN

20. Flat design
@Plainconcepts 20
NUEVOS ESTILOS QUE TRIUNFAN

21. Material design
@Plainconcepts 21
NUEVOS ESTILOS QUE TRIUNFAN

22. Sin infinitas las posibilidades con un
poco de imaginación y con los recursos
que tenemos aprendidos, girar,
deslizar, mover…
Intentar aprovechar estos para dar un
uso distinto y mas visual. Eso dará un
efecto WOW a tu App. Pero cuidado,
puede parecer una feria y que sea
incomprensible al usuario, no hay que
abusar de estos efectos. Es sobre todo
para Apps dedicadas a público joven
que están acostumbrados a este
lenguaje.
Insertar
Animación
@Plainconcepts
22
SE IMAGINATIVO

23. Las micro animaciones en iconos, menús
y pequeños elementos que den
información al usuario, ya darán un
aporte distintivo a tu App a la vez
que ayudarán al usuario a entender
la interfaz. Son las mas
recomendadas aunque un abuso de
ellas también puede generar
confusión. Elegirlas con criterio,
quedándose sólo con aquellas que de
verdad aportan información, ninguna
que sea por estética ya que vuestro
gusto no tiene porque coincidir con el
resto.
Animación
funcional
@Plainconcepts
23
SE INTELIGENTE

24. Para una major comunicación con el equipo de desarrollo existen herramientas como Zeplin o Invision, donde se
pueden ver las Guias de estilo (colores y tipografias usadas), así como el tamaño y posición de los elementos de la
interfaz, estas herrameintas ayudarán a comunicar mejor entre equipos y obtener un mejor resultado final. Recordar
que el tamaño y resoluciones elegidas hará que el diseñador deba preparer unos u otros assets para desarrollo (
slide 10)
Material entregado
@Plainconcepts 24
COMUNICACIÓN CON DESARROLLO
https://zeplin.io/https://www.invisionapp.com/

25. • Búsca y compara con la imagen de competencia. Se diferencial.
• Usa los patrones communes para la resolución de problemas. No intententes reinventar los usos estandarizados.
• No te pierdas en decoraciones, que sea simple y usable
• Las luces y sombras ya dan jerarquía, aprovechalas.
• Da info con la interfaz sin que sea una feria, aprovecha las mini animaciones.
• General un canal para recibir comentarios de los usuarios finales y úsalos para mejorar.
• Una vez publicada tu App no la dejes ahí, actualiza y mejora lo que puedas.
Recomendaciones útiles
@Plainconcepts 25
QUE COSAS PUEDO HACER PARA MEJORAR

26. @plainconcepts
¡GRACIAS!
@palomacelaa

27. www.plainconcepts.com
MADRID
Paseo de la Castellana 163, 10º
28046 Madrid. España
T. (+34) 91 5346 836
BILBAO
Nervión 3 , 6º
48001 Bilbao. España
T. (+34) 94 6008 168
BARCELONA
Av. Josep Tarradellas 10, 6º 1ª
08029 Barcelona. España
T. (+34) 93 3607 114
SEVILLA
Avenida de la innovación s/n
Edificio Renta Sevilla, 3º A
41020 Sevilla. España
DUBAI
Dubai Internet City. Building 1
73030 Dubai. EAU
T. (+971) 4 551 6653
LONDON
Impact Hub Kings Cross
24B York Way, N1 9AB
London. UK
SEATTLE
1511, Third Ave
Seattle WA 98101. USA
T. (+1) 206 708 1285