Plantear un proyecto móvil desde cero enfocado a distintas plataformas

470
-1

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
470
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
24
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Plantear un proyecto móvil desde cero enfocado a distintas plataformas

  1. 1. Jorge Galindo Cruces Plantear un proyecto móvil desde cero enfocado a distintas plataformas http://uxspain.47deg.com/
  2. 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. 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. 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. 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. 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. 7. Navegación principal Cumplir los controladores nativos de cada plataforma
  8. 8. ¡Cuidado con la navegación principal! ¡Es el origen de muchas cagadas multiplataforma!
  9. 9. Me gustaría resaltar una cagada en concreto OUCH! ¿Instagram porque eres así?
  10. 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. 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. 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. 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. 14. Guia de estilos Antes que nada… ¡Dios bendiga a Sketch!
  15. 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. 16. Recursos En la misma web que hemos compartido están todos los recursos gráficos que hemos utilizado
  17. 17. Bonus Track Se ha filtrado la beta de Google+
  18. 18. Un placer haber estado compartiendo esta experiencia con vosotros ¡Gracias! http://uxspain.47deg.com/

×