Como prototiparMAL una aplicación La importancia del wireframe  Jorge__Galindo de @47deg_es
¡Atención Pregunta!• ¿Que es un prototipo?• ¿Que es un wireframe?• ¿y un storyboard?• ¿y un mockup? ¿y un Sketching? Baja,...
Salto cualitativoYo empecé en el lado oscuro de la fuerza... Era Darth Vadery atraía movidas chungas a mi existencia hacie...
Te hará trabajar            MENOSPensar que tu “no tienes tiempo para eso”, es queridosamigos un...                     MO...
Te hará ponerte en         tu sitio...Como bien sabemos, vivimos en un país en el que muchasveces nos cuesta que valoren e...
Compartimentos          estancosNo se pasa al siguiente punto de actuación a nivel deprototipado hasta que no se aprueba e...
¿Como hacemos las     cosas en 47º?Vais a ver muchas formas de realizar el prototipado de unproyecto pero la mejor forma d...
1º BrainstormingBrainstorming del equipo y definición de funcionalidadesEs importante tener el foco y el target claro de l...
2º Diagrama de flujoNo tiene que ser de toda la aplicación, pero si del flujo deusuario más importante.Es imprescindible pa...
3º BocetoHay muchas herramientas a utilizar pero la más importante(y productiva) es el lápiz y el papel.Este proceso es in...
4º Wireframe        NO CONTIENE DISEÑO DE NINGÚN TIPONos basamos en prototipos de bajo nivel para no influir enel producto...
Diseño  NO FORMA PARTE DEL PROCESO DE PROTOTIPADOHe querido incluirlo porque es la ultima revisión antes deldesarrolloSe p...
¡Y ahora a                programar!Dejaos ya de tonterías y de tiki-tiki y poneos al lío delmontepío!Después de la revisi...
¿Que es Babylon?• Funcionalidades en tiempo de diseño• No revisar el prototipo con el equipo de desarrollo• No identificar...
¿Sabéis que es lo          mejor?Que esto no te asegura un éxito de la aplicación ya que.... El feedback con los usuarios ...
¡Herramientas!Hay miles, pero os vamos a recomendar algunas que hemosprobado... • Pencil Project. OpenSource a todo Confor...
Enlaces onFire• Estupendo enlace que habla de alterar el proceso deetapas para alternar el prototipado, el diseño y eldesa...
Enjoy!@Jorge__Galindo | @47deg_es
Upcoming SlideShare
Loading in …5
×

Como prototipar MAL una aplicación. La importancia del Wireframe

698 views

Published on

Charla de Jorge Galindo Cruces en VIII Betabeers Cádiz http://jorge.galindocruces.com/post/46696903774/charla-como-prototipar-mal-una-aplicacion-la

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
698
On SlideShare
0
From Embeds
0
Number of Embeds
150
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Como prototipar MAL una aplicación. La importancia del Wireframe

  1. 1. Como prototiparMAL una aplicación La importancia del wireframe Jorge__Galindo de @47deg_es
  2. 2. ¡Atención Pregunta!• ¿Que es un prototipo?• ¿Que es un wireframe?• ¿y un storyboard?• ¿y un mockup? ¿y un Sketching? Baja, alta fidelidad...• ¿De donde venimos? ¿Donde estoy? ¿¡Que es toda esta movida!?
  3. 3. Salto cualitativoYo empecé en el lado oscuro de la fuerza... Era Darth Vadery atraía movidas chungas a mi existencia haciendo las cosassin prototipar...Las metodologías de trabajo son parte de lo que Yodaenseña en lo alto de las piedras y te harán mejorar tuproyectoPlantear primero un wireframe donde visualmente seespecifican las funcionalidades es el camino del bien, amigoLuke.
  4. 4. Te hará trabajar MENOSPensar que tu “no tienes tiempo para eso”, es queridosamigos un... MOJÓN¿Cuantas veces has hecho modificaciones en tiempo dediseño de la interfaz?¿Cuantas veces el cliente “te la ha colado”, metiendo unanueva funcionalidad?Es el tiempo mejor invertido de todo el timing de tuproyecto
  5. 5. Te hará ponerte en tu sitio...Como bien sabemos, vivimos en un país en el que muchasveces nos cuesta que valoren el trabajo que realizamos.La única forma de hacerlo es hacer que partícipe el cliente yque sea consciente de cuanto tiempo se invierte en eldesarrollo de un proyecto. Hacer partícipe = Validación del proceso Pasemos a ver como hacemos esto en 47 Degrees...
  6. 6. Compartimentos estancosNo se pasa al siguiente punto de actuación a nivel deprototipado hasta que no se aprueba el anterior.¡La vinculación emocional del cliente con el proyecto es desuma importancia para que el resultado sea viable!Todo va validado por pasos con un tiempo definido derevisión Nos blindan del por todos conocido.... “Donde digo digorl ahora digo diegorl”
  7. 7. ¿Como hacemos las cosas en 47º?Vais a ver muchas formas de realizar el prototipado de unproyecto pero la mejor forma de verlo es por ejemplos...Nuestra metodología esta adaptada a proyectos móvilesEsto es un poco como el desarrollo ágil... Hay muchasformas de hacerlo y nosotros tenemos una metodologíapropia que es la que mejor nos funciona adaptada a nuestroequipo.
  8. 8. 1º BrainstormingBrainstorming del equipo y definición de funcionalidadesEs importante tener el foco y el target claro de la aplicaciónantes de empezarLos usuarios móviles (es nuestro caso) son muyimpacientes y necesitan tener la información muy clara yenfocada.
  9. 9. 2º Diagrama de flujoNo tiene que ser de toda la aplicación, pero si del flujo deusuario más importante.Es imprescindible para bocetar saber a donde y de dondeviene el usuario en esa pantalla
  10. 10. 3º BocetoHay muchas herramientas a utilizar pero la más importante(y productiva) es el lápiz y el papel.Este proceso es intentar plasmar todas las ideas recogidasen reuniones en algo concreto.El ensayo y el error es el proceso.Llévate una goma, porque vas a borrar.
  11. 11. 4º Wireframe NO CONTIENE DISEÑO DE NINGÚN TIPONos basamos en prototipos de bajo nivel para no influir enel producto finalMuchas veces utilizamos software para hacerlo navegable yver el flujo de navegación de la aplicaciónNi siquiera lo encapsulamos en maquetas móviles de iPhoneo Android para no influir en la percepción del cliente
  12. 12. Diseño NO FORMA PARTE DEL PROCESO DE PROTOTIPADOHe querido incluirlo porque es la ultima revisión antes deldesarrolloSe presenta una linea de diseño de las pantallas principalesUna vez aprobado (siempre con la aprobación) montamoslas demás pantallas y vamos recortando recursos.
  13. 13. ¡Y ahora a programar!Dejaos ya de tonterías y de tiki-tiki y poneos al lío delmontepío!Después de la revisión de diseño se realizan revisiones deversiones Alpha y Beta (depende de la magnitud delproyecto)Muchas veces una vez realizado el wireframe ya se puedenir montando las pantallas aunque se prefiere tener diseñopara no ir pisando desarrollo y recursos
  14. 14. ¿Que es Babylon?• Funcionalidades en tiempo de diseño• No revisar el prototipo con el equipo de desarrollo• No identificar bien el target de usuarios• No hacer un estudio de usabilidad de la aplicación• Implementar diseño en wireframes que coaccione lalinea de diseño final.• Desvincular al cliente del proyecto
  15. 15. ¿Sabéis que es lo mejor?Que esto no te asegura un éxito de la aplicación ya que.... El feedback con los usuarios es la ultima fronteraLas aplicaciones mutan según el uso de los usuarios, puedes“jartarte” de MVP, estrategias, estudios del target perocomo la salida a producción no hay nada!Cuanto más amplio sea tu mercado más impredecible es, enapps móviles muchas veces la salida es global. Es muy difícilprever el uso de tu app a nivel global.
  16. 16. ¡Herramientas!Hay miles, pero os vamos a recomendar algunas que hemosprobado... • Pencil Project. OpenSource a todo Confort • Gliffy. Herramienta gratuita para diagramas de flujo. • OmniGraffle. De pago pero para nuestro gusto de las más completas del mercado • Prototyper Pro: Muy buena para hacer prototipos de alta fidelidad navegables. Es #MadeinSpain • PopApp: App móvil para hacer tus prototipos navegables en el móvil. Muy útil para presentaciones en cliente
  17. 17. Enlaces onFire• Estupendo enlace que habla de alterar el proceso deetapas para alternar el prototipado, el diseño y eldesarrollo• Enlace de nuestro amigo Lousfera hablando dedistintas herramientas de prototipado• Seguir el Twitter y el blog de Olga Carrera. Hace pocoposteé un video suyo muy bueno sobre prototipado.• Consejos de como empezar a diseñar para Android• Grupo en LinkedIn sobre Diseño y prototipado deApps y Comunidad en Google Plus sobre Diseño deInterfaces
  18. 18. Enjoy!@Jorge__Galindo | @47deg_es

×