En una charla que tuve el placer de dar en el UX Spain 2014, desarrollé todo el proceso de prototipado y diseño de una aplicación móvil para iPhone y Android. En la presentación y en el html creado para la charla (http://uxspain.47deg.com) se pueden ver todos los recursos gráficos que desarrollamos y las herramientas que vamos utilizando en el proceso creativo de una aplicación de ejemplo UX Spain. Como "bonustrack" enseñé la interfaz de la beta que se ha filtrado de Google Plus. Señalando las modificaciones y las diferencias con los controladores nativos y las guías de interfaz que hay hasta el momento.

1. Jorge Galindo Cruces
Plantear un proyecto móvil desde cero
enfocado a distintas plataformas
http://uxspain.47deg.com/

2. Para entender nuestro proceso, hay que saber como somos y
como planteamos los productos.
Vamos a focalizar en iOS y Android porque cada una tiene
sus idiosincracias y sus distintos planteamientos gráficos y
de usabilidad.
La mayoría de proyectos que afrontamos
en 47 son multiplataforma

3. Un proyecto desde cero
La mejor forma de explicar como se hace un proyecto móvil
desde cero, es hacer un proyecto móvil desde cero
Hemos prototipado y
diseñado una app
multiplataforma para
UXSpain que podéis seguir
desde la web

4. Utiliza tus armas
Antes de liarme la manta a la cabeza con el proceso, me
gustaría incidir en algo a nivel de conceptualización de
funcionalidad. “No seamos papagayos digitales. No repitamos
sin pensar la información”

5. El proceso
Vamos a dividir la presentación en la división que hacemos
nosotros del flujo de trabajo y vamos a recalcar las
diferencias de planteamiento en cada parte para ver la
bifurcación de comportamientos
Prototipado Diseño Guia de estilos

6. Prototipado
Lo primero que hicimos fue ponernos manos a la obra con la
pizarra y planteamos el mapa de contenido marcando los
puntos de diferencia
UX Spain 2014
Agenda
Detalle
Calendario
Pregunta
Nota
UX Labs ON Fire Asistentes Localización
Detalle
Info
Detalle
Notas
CRear Nota
Tuitear hashtag
del evento
Detalle Detalle
Añadir info
Todos Conocidos
Organización #uxspain Info Tapaux
Navegación principal
Navegación secundaria
Acciones

7. Navegación principal
Cumplir los controladores nativos de cada plataforma

8. ¡Cuidado con la navegación principal!
¡Es el origen de muchas cagadas multiplataforma!

9. Me gustaría resaltar una cagada en concreto
OUCH! ¿Instagram porque eres así?

10. Navegación principal
En este caso hemos optado por un concepto que concuerda mucho con lo
multiplataforma. ¡Nuestro amigo, el slider Menu!
09:30 Registro y acreditaciones
10:30 Presentaciones
11:15 Café
10:30
Maritza Guaderrama
Antropología y Diseño: qué aporta una
ciencia decimonónica a la UX
12:00
Alfonso Moncuerde
Persuasión: Cambiando lo que pensamos
y hacemos a través del diseño
12:40
Gaby Prado
Del libro al hecho: la increíble experiencia de
construir un equipo de UX
13:15
Alberto Martinez
Reason loves Emotion
Viernes 23 de Mayo Sabado 24 de MayoAgenda
UX Labs
On Fire
Asistentes
Localización
Agenda
09:30 Registro y acreditaciones
10:30 Presentaciones
11:15 Café
10:30
Maritza Guaderrama
Antropología y Diseño: qué aporta una
ciencia decimonónica a la UX
12:00
Alfonso Moncuerde
Persuasión: Cambiando lo que pensamos
y hacemos a través del diseño
12:40
Gaby Prado
Del libro al hecho: la increíble experiencia de
construir un equipo de UX
13:15
Alberto Martinez
Reason loves Emotion
Viernes 23 de Mayo
Agenda
UX Labs
On Fire
Asistentes
Localización

11. Navegación secundaria
Los usuarios en general están más acostumbrados a la creatividad en
este sentido, pero los usuarios Android se esperan un contenido de
navegación horizontal

12. Acciones
Aquí podéis ver la distinta disposición de elementos en las dos
plataformas. El uso que hace Android del botón de Opciones, algo
no utilizado en iOS. Compartir es distinto en las dos plataformas

13. Diseño
Los elementos a destacar del paso a diseño son
Flat es nuestro amigo Tipografías
ROBOTO
abcdefghijklmnopqrstu
vwxyz - 1234567809
AVENIR
abcdefghijklmnopqrstuv
wxyz - 1234567809
Iconografías
UX
UX

14. Guia de estilos
Antes que nada…
¡Dios bendiga a Sketch!

15. Guia de estilos
Estos son las guías de estilo que solemos elaborar, incidiendo en el
nombre de recursos.
Diferenciamos las distintas unidades de medida.

16. Recursos
En la misma web que hemos compartido están todos los recursos
gráficos que hemos utilizado

17. Bonus Track
Se ha filtrado la beta de Google+

18. Un placer haber estado compartiendo esta
experiencia con vosotros
¡Gracias!
http://uxspain.47deg.com/