Diseño UX: Herramientas híbridas para desarrollo/diseño.



¿Diseñador o Desarrollador? No importa. Conoce estas 7 herramientas híbridas para el diseño de UX que cierran cada vez mas esa brecha.


Esta entrada es una colaboración de Toptal
-----------------------------------------------------------------------
-----------------------------------------------------------------------

El rol principal de los diseñadores ha sido crear imágenes estáticas en Photoshop y luego entregárselas a un desabollador quien las convertiría en una aplicación o sitio web funcional. Algo que acarrea un sin fin de problemas de interpretación de parte del desarrollador intentando entender la visión del diseñador, lo que se traduce en un sin fin de correos electrónicos y de horas invertidas.

Por su parte los desarolladores que estaban interesados en crear sus propias aplicaciones estaban frustrados por la complejidad de las herramientas de diseño como Photoshop e Illustrator. La única opcion era invertir tiempo educándose en el uso de dichas herramientas, y aquellos que se aventuraban a no hacerlo y diseñar algo para salir del paso terminaban con un producto de pésima calidad que fracasaba al llegar al mercado.



Por suerte para ambos la situación ha mejorado significativamente con la aparición de diversas herramientas de diseño que de una manera u otra te permiten crear un prototipo de aplicación sin escribir una sola linea de código,  el usuario final ni cuenta se dará de que dicha aplicación no tiene back-end, a sus ojos sera completamente funcional.

El éxito de la UX radica en cual fácil sea para el publica hacer uso de algo, siempre la usabilidad y simplicidad deben estar en tu mente, te recomiendo estos 10 libros esenciales para el diseño de UX para que logres un diseño amigable y moderno que atraiga y enganche a tus clientes.



A continuación una lista de las 7 herramientas mas populares de una manera u otra facilitan el diseño de interfaces de usuario, creación de aplicaciones prototipos, sin necesidad de escribir código.

Craft by InVision: Es un plug in para Scketh y Photoshop que permite trabajar en tiempo real y con data real.

InVision:  Soporta colaboración. Sincroniza con Sketch. Utilizado por compañías como Twitter, Nike, Uber, Adobe y otras.

Sketch: En cierta forma similar a Photoshop, pero especializado para el diseño web y de apps. Permite al diseñador crear iconos, interfaces y sitios web.



Framer: Muy similar a InVision pero con la habilidad de realizar interacciones bastante mas complejas. Utilizado por compañías como Uber, Facebook y Google.

Flinto/PrincipleAmbas aplicaciones se especializan en la creación de animaciones complejas en minutos. Requieren sin embargo cierto aprendizaje. En este enlace puedes ver un montón de ejemplos de lo que algunos usuarios han logrado con Principle.

WebflowElimina la necesidad de escribir código para el front-end. Utiliza un editor WYSIWYG para realizar el trabajo. Utilizado por compañías como NASA, Autodesk, DirecTV, Under Armour y otras.


Bondlayer: Editor visual capaz de crear sitios web y aplicaciones nativas para iOS y Android.

Marvel: Un competidor directo de InVision. Soporta colaboración y también  sincroniza con Sketch. Haciendo click aqui puedes explorar los diseños que los usuarios han publicado.

En este sentido tenemos que es posible crear animaciones como esta en la mitad del tiempo utilizando Webflow sin necesidad de tener conocimientos avanzados de CSS y JavaScript.

A complex CSS animation using Webflow

Aun con estas herramientas un desarrollador se beneficiaria de estudiar diseño gráfico así como un diseñador de aprender a programar.

Otro enfoque es que gracias a este tipo de herramientas el diseñador puede enfocarse en lo que mejor sabe hacer, diseñar. Pudiendo así lograr materializar su visión de una manera rápida y al mismo tiempo evitando errores en la interpretación de dicha vision por parte del desarrollador.


Link de interes
Fuente: Toptal
Front-end / back-end: Wikipedia
WYSIWYG: LMGTFY
Xamarin: La herramienta definitiva para crear Apps multiplataforma
Diseño UX: 10 libros esenciales

Related Posts Plugin for WordPress, Blogger...

Tecnoriales Newsletter

Recibe el boletin quincenal en tu correo con las ultimas novedades.

* indicates required

View previous campaigns.

Powered by MailChimp