herramientas UX

El diseño UX está a la orden del día y cada vez es más popular debido a su profesionalidad, eficacia y funcionalidad. A través las herramientas UX, las empresas consiguen crear modelos y prototipos basados en la experiencia del usuario (UX) para crear un producto que atraiga al consumidor, sea fácil de usar, intuitivo y que tenga gran utilidad.

En definitiva, lograr que algo sea atractivo a la vista, pero también que el cliente lo pueda sentir y funcione a la perfección de la manera más sencilla posible. Mediante una serie de pasos, analizando objetivos comerciales y con la elaboración de mapas de experiencia, bocetos, maquetas y prototipos, el diseñador UX llega al destino final.

3 Herramientas UX para crear prototipos

Diseñar prototipos de nuestro producto es algo esencial para llegar a un resultado final con alta probabilidad de éxito entre los usuarios. Para elaborarlos existen diferentes herramientas de prototipos en el mercado que se ajustarán a nuestras necesidades.

InVision

Programa dedicado para la elaboración de prototipos de Apps. El usuario deberá diseñar sus plantillas previamente y luego cargarlas en Invision para elaborar el prototipo definitivo. Es una herramienta considerada para el trabajo en equipo y la gestión de proyectos, donde podremos controlar todas las versiones pasadas para agilizar el trabajo y ahorrar mucho tiempo. Compatible con Android y Mac.

Integraciones: Dropbox, Slack, Sketch, Confluence, Teamwork, Microsoft Teams, Trello, Basecamp, Jira Software, Photoshop, Live Embed. 

Compatibilidad: se trabaja online, por lo que es compatible con todos los sistemas operativos. Además, dispone de aplicaciones para iOS y Android. 

Recursos: documentación, seminarios web

Precio: tiene una versión gratuita que permite la creación de un prototipo, y versiones de pago, que van desde los 15$/mes hasta los 99$/mes adaptándose a las diferentes necesidades de los diseñadores.

Web de InVision

Sketch

Es otra herramienta para elaborar diseños vectoriales complejos a través de librerías de símbolos. Este programa te permite gran agilidad a la hora de realizar los cambios en el diseño, por ejemplo, a la hora de redimensionar símbolos a diferentes resoluciones para que se apliquen en todo el prototipo. Permite transformar los diseños en prototipos interactivos.

Con Sketch se puede ahorrar gran cantidad de tiempo en los cambios de estructura hasta alcanzar el diseño definitivo. El mayor inconveniente de Sketch es que solo es compatible con el sistema MacOS, por lo que necesitaremos algún soporte de la marca Apple para trabajar con esta herramienta.

Integraciones: Zeplin, PixelSnap, Lokalise, Avocode, Abstract, Flinto, Crystal, Drafta, Droplr, Flow, Framer, InVision, Kite Compositor, Lingo, Marvel, Origami, Overflow, Plant, Principle, Proto.io, ProtoPie, Prott, Scribble, Sketchode 2, Sympli.io, UXPin, Vempathy, Versions, Wake. 

Compatibilidad: sólo es compatible con el sistema MAcOS.

Recursos: documentación, seminarios web

Precio: ofrece una prueba gratis, y versiones de pago. Tiene dos versiones de pago, una versión de pago es única, es decir, se realiza un único pago y dispones de la app de por vida, el precio es 99$. Y la otra, diseñada para el trabajo en equipo, puede ser de 9$/mes por cada miembro del equipo, o 99$ anualmente. 

Web de Sketch

Adobe XD

Ideal para diseñar prototipos a través de experiencias e interfaces de usuarios. Permite diseñar con elementos reutilizables y fáciles de redimensionar. Con Adobe XD puedes importar archivos desde otras plataformas como Sketch, Photoshop e Illustrator.

Se puede conseguir un diseño muy preciso con la utilización de herramientas de forma y dibujo, operadores booleanos, modos de fusión y funciones vectoriales de edición para crear diagramas funcionales, iconos y otros elementos visuales. Apto para iOS y Android.

Integraciones: Jira Software, Slack, Microsoft Teams, Zeplin, Avocode, ProtoPie, Sympli, Kite App.

Compatibilidad: es compatible con los sistemas Windows y macOS. Dispone de aplicación para iOs y Android. 

Recursos: documentación

Precio:  tiene una versión gratuita que permite la creación de un prototipo, y versiones de pago, desde los 12,09€/mes.

Web de Adobe XD

3 Herramientas UX para trabajar en equipo

Las herramientas de colaboración son esenciales para el trabajo en línea entre varios miembros. Con los avances, este tipo de aplicaciones se han convertido en instrumentos de trabajo indispensables para cooperar en red, con los actores en cualquier parte del mundo.

Zeplin

Herramienta para diseñar aplicaciones en línea entre diversos colaboradores. Está disponible tanto para Windows como para Mac. Permite las conversaciones entre los diferentes trabajadores y reuniones con el usuario para compartir los diseños y plantear cambios de manera rápida y fácil. Permite importar prototipos elaborados con Sketch y permite exportar iconos de forma automatizada. Actúa de intermediario entre diseñadores y “developers”.

Integraciones: Jira Software, Figma, Sketch, Adobe XD, Photoshop, Slack, Trello

Compatibilidad: es compatible con los sistemas Windows y macOS. Dispone de aplicación para iOs y Android. 

Recursos: documentación

Precio:  tiene una versión gratuita que permite la creación de un proyecto, y versiones de pago, desde los 17$/mes hasta los 129$/mes. 

Web de Zeplin

Miro

Miro acumula herramientas útiles para diseñadores UX que permiten la elaboración de productos a gran escala con facilidad en el proceso de cambios de diseño. Permite la colaboración entre distintos equipos de diseño. A través de las herramientas que proporciona Miro se puede crear un centro de información para mantener todo el equipo conectado y compartir los avances y conocimientos. Se trata de una herramienta muy visual que te permitirá crear de forma sencilla.

Integraciones: Coda, Microsoft Teams, Jira Software, Asana, Slack, Airtable, Github, Notion, Dropbox, Targetprocess, Box, RemoteHQ, Salesforce, Trello, InVision, Zapier, Iconfinder, Confluence, Hubspot, Evernote, Marvel, Vimeo…

Compatibilidad: es compatible con los sistemas Windows y macOS. Dispone de aplicación para iOs y Android. 

Recursos: documentación, seminarios web

Precio:   tiene una versión gratuita que permite la creación de tres proyectos, y versiones de pago, desde los 8$/mes por miembro si se realiza el pago del año completo. 

Web de Miro

Notion

Notion es una aplicación que permite gestionar y elaborar tareas de forma colaborativa entre equipos. Está disponible para cualquier dispositivo, tanto para Android como para iOS. Da la posibilidad de crear notas o wikis para coordinar trabajos entre grupos.

Si el uso que le das a la App es de trabajo, Notion deja crear tanto grupos pequeños como grandes de unas 100 personas. Te mostrará las plantillas en función de tu campo de trabajo. Permite gestionar notificaciones, crear avisos e incluso activar el «modo offline” para trabajar sin conexión.entre sus mejores funciones está la creación de listas de tareas, generación de páginas de contenido, wikis…

Integraciones: Zapier, Slack, Hubspot, Salesforce, AWeber, Mailchimp, Drip, LivePerson, Pipedrive, Microsoft Teams, Marketo, Pardot, Drift, Trello, Dropbox, Asana, Eventbrite, Todoist, Airtable, Jira Software, Figma, Github, InVision, Evernote… 

Compatibilidad: es compatible con los sistemas Windows y macOS. Dispone de aplicación para iOs y Android. 

Recursos: documentación, seminarios web

Precio:  tiene una versión gratuita, y versiones de pago, desde los 4$/mes.

2 Herramientas UX para crear wireframes

Un wireframe (esquema de página o plano de pantalla) es una guía visual que muestra la estructura interna de una página web. Mockflow o Figma son herramientas que sirven para diseñar wireframes. Normalmente, los wireframes se enfocan en tipos de información, cantidad de funciones disponibles o efecto de los diferentes escenarios de la pantalla. A continuación, explicamos qué características tienen cada una de las herramientas:

Mockflow

Es una potente herramienta para diseñadores web. Permite la creación de wireframes en una nube e integra rápidamente otras herramientas. Con Mockflow se pueden crear wireframes sencillos al contar con una librería de elementos básicos que facilitan el trabajo. Da la posibilidad de exportarlos en diferentes formatos y compartir de forma online nuestros proyectos.

Mockflow ofrece diferentes equipos de diseño, mapas de sitios y sistemas con especificaciones UI. Eso sí, no cuenta con soporte en español. Está disponible tanto para Windows como para iOS. Incluye diferentes soluciones UX: Wireframe, ProSiteMap, StyleGuide, DesignCollab, AnnotatePro: WebsitePro, BannerPro.

Integraciones: Slack, Trello, Confluence, Jira Software, Dropbox, Azure, Okta, Google Drive

Compatibilidad:  es compatible con los sistemas Windows y macOS.

Recursos: documentación

Precio:  tiene una versión gratuita que permite la creación de un proyecto, y versiones de pago, desde los 14$/mes hasta los 160$/mes. 

Web de Mockflow

Figma

Puedes descargar esta herramienta como aplicación y además es compatible con Windows. Una de las mayores características de Figma es que todo nuestro trabajo estará en una nube y así evitaremos perder nuestros archivos o tener que utilizar otra herramienta de almacenamiento. La creación de componentes con Figma se hace de manera sencilla. Tiene un sistema de diseño similar a Sketch.

Puedes compartir tu proyecto de forma fácil utilizando el botón “Share” sin necesidad de acudir a otro programa. Entre sus ventajas está la de trabajar colaborativamente, que es apto tanto para Mac como para Windows y que podemos acceder a los archivos desde cualquier ordenador.

Integraciones: Zeplin, Maze, Trello, ProtoPie, Flinto, Principle, Framer Web, Zero Height, Avocode, Storybook, Slack, Notion, Dropbox, Coda, Jira Software, Dribbble.

Compatibilidad: es compatible con los sistemas Windows y macOS.

Recursos: documentación, seminarios web

Precio:   tiene una versión gratuita que permite la creación de tres proyectos, y versiones de pago, desde los 12$/mes por editor hasta los 45$/mes por editor. 

Web de Figma

Un buen diseño web es esencial para atraer clientes, concretamente, el diseño UX basado en la experiencia de usuario es una forma de aportar a los usuarios lo que buscan de forma fácil e intuitiva. En definitiva, el diseño UX está más profesionalizado, lo que provoca que los resultados y prestaciones de los productos sean mejores gracias a las herramientas para el diseño como Sketch, Zeplin y Mockflow.