Herramientas para diseñar un prototipo de APP, sin saber programar

Todo el mundo quiere hacer una App. O al menos, todo el mundo tiene una idea para hacer una App. Pero una idea es nada si no se hace tangible. Invertir en el desarrollo y diseño puede ser costo. Conseguir inversionistas dispuestos a soltar capital para el desarrollo requiere más que una linda PPT. Una manera de avanzar en el proyecto del desarrollo de una App es haciendo un prototipo, pero no todos tenemos la manera de resolver el tema de cómo se vería o cómo funcionaría…

Todos los días tratamos de resolver problemas nosotros mismos, y afortunadamente cada día hay más maneras de hacerlo. Sitios como Wordpress que nos permiten desarrollar y diseñar nuestros sitios o blogs sin necesidad de consultar a desarrolladores web y diseñadores web, son un ejemplo clarísimo de ello.

Esto no quiere decir que no debamos pedir apoyo de los profesionales, pero saber que existen soluciones que integran los procesos diseño, desarrollo, programación es una alternativa interesante.

La brecha entre desarrolladores y diseñadores es un artículo que se publicó originalmente en el blog de Toptal y que precisamente presenta las alternativas que existen en el mercado para resolver un tema común: diseñar prototipos de Apps que se vean y sientan reales de manera fácil y colaborativa.

Por Michael Abehsera – Diseñador líder del Blog Toptal (Traducido por Yesica Danderfer)

Durante la última década ha habido una guerra fría entre diseñadores y desarrolladores. Los diseñadores se quejaban de cuán dependientes eran los desarrolladores para crear mockups que fueran más allá de imágenes estáticas. Y por otro lado, los desarrolladores resentían su dependencia en los diseñadores con habilidades para convertir sus conceptos en interfaces amigables para los usuarios.

Pero conforme las herramientas de diseño se hacen más y más fáciles de usar, la guerra fría está llegando a su fin.

Ahora es posible crear un prototipo interactivo bastante impresionante, usando una app y sin necesidad de tener experiencia en código. Esto significa que los diseñadores pueden probar nuevas aplicaciones sin tener que escribir ni una sola línea de código, y también significa que los desarrolladores pueden usar simples herramientas para trabajar en sus diseños con un aire profesional sin necesitad de pedir ayuda profesional.

Aunque los diseñadores aún podrían beneficiarse si aprendieran a usar código, y los desarrolladores probablemente deberían estudiar algo de diseño, la brecha entre ambas habilidades se está haciendo más y más corta.

Hace No Mucho Tiempo, En Una Web Muy, Muy Lejana…

Hace cinco o siete años atrás, el rol principal de los diseñadores digitales era diseñar imágenes estáticas de páginas y pantallas en Photoshop, que luego eran enviadas a un desarrollador que los transformaría en un sitio web o app funcionales. El “mockup”, o maqueta, siempre era un resultado limitado. Era estático, los datos eran falsos, y no había interacciones. ¿Alguna vez has hecho un test de usuarios con una imagen estática? No llega muy lejos...

La comunicación de ida y vuelta entre diseñadores y desarrolladores intentando comprenderse, creaba cadenas de email lo suficientemente largas para envolver al mundo entero. Semanas de desarrollo pasarían sólo para descubrir, luego del lanzamiento, que lo que el desarrollador comprendió como “deslizar hacia arriba” era muy diferente de lo que el diseñador tenía en mente. Era un infierno.

No cabe duda que el desarrollador que recibía un PSD sin anotaciones con decenas de layers, sin nombre, querría tirarse por la ventana.

Los desarrolladores que estaban interesados en diseñar sus propias apps se frustraban por complejas herramientas como Photoshop o Illustrator. Necesitaban una educación completa en diseño gráfico además de sus aprendizajes en ciencias de computación para realizar sus ideas. Los desarrolladores que intentaban cortar bordes y diseñar para sí mismos, terminaban con apps con bajo nivel de diseño y en el testeo tropezaban o ni siquiera entraban al mercado.

El Diseño Digital Ya No Apesta

Ahora, la situación entre diseñadores y desarrolladores es significativamente mejor. Con la invención de herramientas inteligentes de diseños y plataformas como Craft por InVision, la app de InVision, Framer, Flow, Flinto/Principle, y Sketch, los diseñadores y desarrolladores pueden fácilmente diseñar un prototipo de app y testearla sin que el usuario sepa que están usando una app sin back-end.

La app parecerá funcionar por completo desde la perspectiva del usuario. Cada interacción y flujo estarán ahí. Los diseñadores obtienen información valiosa sin tocar una línea de código, y el desarrollador puede crear diseños propios con unos simples clicks.

Miremos de cerca a estas seis herramientas de diseño:

Craft by InVision Este conjunto de apps permite que los diseñadores obtengan datos reales más allá del texto griego “Lorem ipsum” y el icono de Michael Jackson de posición. Las Apps trabajan en conjunto para hacer el diseño en un proceso más fácil y automatizado. La app ofrece alternativas de colaboración, maqueta de prototipo, sincronización y sobretodo apoyo con tus propios datos

InVision Esta plataforma realmente cambió el nombre del juego. Permite a los diseñadores crear maquetas que no son estáticas. Con las herramientas de Invision puedes transformar las imágenes en prototipos interactivos que dan la sensación de ser apps reales y funcionales.

Con Invision puedes colaborar con un equipo de trabajo, lo que hace facilita la interacción entre los diseñadores y usuarios, para comentar en cada paso del proceso creativo.

Observa el prototipo que fue creado utilizando Marvel (un competidor de Invision):

Framer Framer es casi como InVision, pero tiene la habilidad de conseguir interacciones más complejas. Algunas compañías grandes utilizan Framer para poder diseñar apps que sean intuitivas y útiles, pero también simples. Uber es un buen ejemplo, han usado Framer para diseñar su app de Apple Watch y UberPOOL.

Flinto / Principle Ambas apps pueden ser usadas para crear animaciones complejas en minutos. Las dos requieren un poco de práctica, pero una vez que los diseñadores obtienen fluidez con estas apps, pueden fácilmente crear animaciones que se verán y sentirán extremadamente profesionales, y no innecesariamente recargadas.

Puedes ver aquí una gran cantidad de ejemplos increíbles de lo que los usuarios pueden hacer con Principle.

Sketch Sketch es como Photoshop, pero con más o menos cuatro veces más la cantidad de características para desarrolladores web y mobile. Esta poderosa herramienta resuelve el problema de los diseños estáticos que no hacen nada al dejar que diseñadores creen iconos, interfaces, y sitios web que son totalmente únicos y hechos a mano.

Webflow Este se siente como un gancho de Mike Tyson. Webflow básicamente elimina la necesidad de que los diseñadores escriban código de front-end. Ahora, los diseñadores usan este hermosos editor WYSIWYG (lo que ves es lo que obtienes) para lidiar con toda la carga pesada.

Apps sin nada de Código Heco: Esta agencia ha creado animaciones increíblemente complejas y han logrado un front-end bastante sofisticado sin desarrolladores front-end, usando sólamente Webflow.

Cómo su lista de pendientes (ó to-do list) funciona en este mockup en vivo. Al hacer tap en la app, puedes ver la funcionalidad entera de cómo Todoist funciona sin conjeturas.

Crear animaciones CSS solían necesitar hechiceros del CSS que supieran cómo trabajar con transformaciones, retrasos 3D, e interminables CSS y JS hacks para crear algo complejo. Con Webflow, puedes crear algo como esta animación en la mitad del tiempo y sin escribir una sola línea de código.

El Futuro Es Diseño, Y Hay Mucho Para Ver Con herramientas de diseño como éstas, los diseñadores no tienen que enfocarse en imágenes estáticas, y no tienen que depender de desarrolladores para crear prototipos profesionales, hermosos y funcionales.

Al mismo tiempo, los desarrolladores ya no tienen que depender de lo diseñadores para ofrecerles grandes ideas. Los desarrolladores pueden y deben comenzar a añadir habilidades de diseño a su currículum, comenzando con las herramientas mencionadas anteriormente. Ninguno de estos programas son particularmente complejos de aprender, y si los desarrolladores dejaran de depender de los diseñadores y comenzaran a crear hermosos prototipos por sí mismos, podrían hacerse profesionales más fáciles de contratar y experimentar la satisfacción (sin mencionar los ahorros) de llevar sus ideas del concepto al mercado.

Esto podría sonar como malas noticias para los diseñadores, pero no lo son. Con el añadido de una simple integración de API, flujos de trabajos automáticos, y la habilidad de traer datos reales, los diseñadores pueden crear prototipos sofisticados y testeables sin tener que constantemente tener el ida y vuelta con un desarrollador. El resultado es que el diseñador puede enfocarse en lo que hacen mejor: diseñar.

No hay más necesidad para que el trabajo de un diseñador sea interpretado e, inevitablemente, manchado por alguien que no comparte su visión. Así que aunque estas mismas herramientas le permiten a los desarrolladores diseñar, eso no debería amenazar a los diseñadores experimentados. En vez de preocuparse por los desarrolladores metiéndose en su área, los diseñadores deberían tener la ventaja con todas las herramientas descritas con anterioridad y seguir apuntando hacia adelante con sus creaciones.

Si conoces estas herramientas, compárte cuál es tu experiencia con ellas.

#desarrolladoresweb #desarrolloapps #diseñadoresweb #diseñarprototipoapp #ideaparaApp #herramientasdiseñoprototiposapp