Introducción

Como sabemos que contratarás un Diseñador UI, desarrollamos una guía completa para facilitar tu labor. Esta es la primera publicación sobre el cargo:

1. ¿Qué es un Diseñador UI?
2. 6 habilidades fundamentales para el cargo.
3. 7 Herramientas necesarias para el cargo (Este post)
4. 5 KPI que miden el éxito del profesional.
5. 5 preguntas para entrevistar a tus candidatos.

A continuación te mostraremos las herramientas que un Diseñador UI usa para desenvolverse en su cargo.

‍

Software de prototipado

Son herramientas que permiten la creación de prototipos de manera detallada e interactiva. Estos ayudan en la toma de decisiones, mejoras de los proyectos y optimización del flujo de navegación. 

1. Figma

‍

‍

Figma es una herramienta de diseño y prototipado basado en la nube. Está disponible para Windows, MacOs y navegadores, gracias a este último se vuelve más fácil el trabajo colaborativo sin importar el sistema operativo que se utilice.

‍

Con Figma se diseñan interfaces gráficas de gran potencial que permite la creación de transiciones, superposiciones y GIF. Cuenta con una biblioteca de plantillas que ayuda a mejorar tiempos de entrega, además de brindar fragmentos de código CSS haciendo más fácil el traspaso del proyecto al desarrollador.

‍

La herramienta cuenta con funciones que ayudan al diseñador a mejorar el diseño, experiencia de usuario y trabajo colaborativo. Como es el caso de:

‍

• FigJam: una herramienta colaborativa, que es una pizarra en línea donde los integrantes del equipo pueden generar ideas para mejorar el proyecto.
• FigMotion: crea animaciones para prototipos y diseño final.
• AutoFlow: sirve para ver el flujo de navegación de los usuarios dentro del producto digital.

‍

Ventajas de usar Figma:

‍

• Es fácil de diseñar en Figma.
• Tiene una gran variedad de herramientas de diseño.
• Tiene integración con Slack.
• Creación de capas automáticas. 

‍

Desventajas de usar Figma:

‍

• No es fácil la transferencia de diseño a código.
• La opción de exportar a PDF no está optimizada.
• No es sencillo aprender a hacer prototipos en Figma.
• No se puede utilizar sin internet. 

2. Adobe XD 

‍

‍

Le ofrece a los diseñadores herramientas basadas en vectores para la creación de interfaces gráficas, prototipos y maquetas. Cuenta con una función de trabajo colaborativo, que le permite a varios miembros del equipo desarrollar el mismo proyecto en tiempo real.

‍

Esta herramienta le permite al diseñador UI crear interacciones, transiciones y agregar dinamismo. Lo anterior se integra a los prototipos, logrando así que sean interactivos y fieles a lo que será el proyecto final.

‍

Ventajas de usar Adobe XD:

‍

• Las herramientas de UI son fáciles de aprender.
• Se pueden manejar múltiples mesas de trabajo al tiempo.
• Compatibilidad con la Suite de Adobe.
• La interfaz es simple de usar.

‍

Desventajas de usar Adobe XD:

‍

• Los plugins son limitados.
• No se pueden crear animaciones.
• No es compatible con formato GIF.
• No se pueden realizar testeos de los proyectos que se crean en la herramienta.

‍

3. InVision

‍

‍

Es una herramienta de diseño y prototipado. El profesional tiene la posibilidad de crear un proyecto de principio a fin de manera colaborativa. En InVision se diseñan prototipos interactivos con la ventaja de adaptarse a los distintos dispositivos de manera automática.

‍

Esta herramienta le permite al diseñador hacer diseños interactivos, animaciones y dibujos vectoriales. Gracias a esto se producen prototipos y proyectos visualmente atractivos y dinámicos que favorecen la experiencia de usuario.

‍

El sistema colaborativo de InVision permite el trabajo de múltiples diseñadores en un solo proyecto. Permitiendo la documentación de cambios, realizar tickets para resolver problemas e interactuar en tiempo real para acordar mejoras y optimizaciones.

‍

Ventajas de usar InVision:

‍

• Con uso de un plugin se pueden integrar los diseños con Sketch.
• Las herramientas de wireframing agilizan el proceso de creación.
• Tiene la opción de compartir feedback internamente.
• Crea links del proyecto para que pueda ser visualizado externamente.

‍

Desventajas de usar InVision:

‍

• Las funciones que se les puede agregar a los prototipos es limitada.
• No se pueden rotar imágenes, ni diseños.
• Es una herramienta UI difícil de aprender.
• Las animaciones son básicas.

‍

Software de diseño

Estos son programas, aplicaciones o plataformas, donde se generan y editan imágenes, gráficos e ilustraciones para diversos proyectos digitales.

4. Sketch

‍

‍

Sketch es una herramienta de creación de interfaces de usuario. Con ella se diseñan desde wireframing, prototipos, ilustraciones, hasta la producción del proyecto final. También, incluye opciones de exportado a otras herramientas, logrando así integrar múltiples mejoras dentro del proyecto terminado.

‍

Esta herramienta tiene la ventaja de crear links o códigos QR para la visualización del proyecto desde cualquier dispositivo. Esto ayuda en el proceso de trabajo colaborativo y en la presentación para los clientes.

‍

Con Sketch se crean proyectos visualmente atractivos. Gracias a sus múltiples herramientas de diseño y plugins que pueden instalarse para mejorar su funcionalidad. A su vez, le ofrece al profesional un gran número de plantillas para la creación de los productos digitales.

‍

Ventajas de usar Sketch:

‍

• Integración con InVision.
• Existe una amplia librería de plugins.
• Interfaz intuitiva.
• Es una herramienta de trabajo colaborativo.

‍

Desventajas de usar Sketch:

‍

• La herramienta solo está disponible para MacOs.
• No es compatible con video.
• Puede correr lento si el proyecto alcanza un tamaño de 100 tableros de trabajo.
• Algunas actualizaciones pueden crear problemas en proyectos previos.

5. Photoshop

‍

‍

Esta herramienta es uno de los referentes mundiales en diseño. Con más de 25 años en el mercado es una de las favoritas para la creación de imágenes, edición de fotografía y diseño de productos digitales.

‍

Photoshop es un editor gráfico en el cual se crean y mejoran imágenes de alta calidad. Las interfaces gráficas diseñadas en esta herramienta tienen la ventaja de tener mejores atributos en las ilustraciones, imágenes 3D y animaciones.

‍

Para el diseño UI, esta herramienta cuenta con mesas de trabajo ajustables al tamaño específico para cada dispositivo. Creación de efectos visuales, la posibilidad de exportar en la calidad que se necesite, además de mezclar el diseño de vectores y pixel. Esto último brinda mayores posibilidades de diseño que herramientas de vectores comunes.

‍

Ventajas de usar Photoshop:

‍

• Gran número de herramientas para creación y edición de imágenes.
• Facilidad de creación para distintas plataformas.
• Se puede guardar la información en la nube.
• Integración con los programas de la Suite de Adobe.

‍

Desventajas de usar Photoshop:

‍

• Las herramientas de vectores son limitadas.
• No es un software intuitivo para diseñadores principiantes.
• El costo de la herramienta es elevado.
• Es difícil entender la sección de capas.

‍

6. Illustrator

‍

Es un programa de diseño y de edición de gráficos vectoriales. En esta herramienta se crean imágenes, interfaces, infografías y banners, entre otros. Una de sus ventajas es que los diseños generados en Illustrator tienen la posibilidad de escalarse a cualquier tamaño sin perder calidad.

‍

El diseñador UI utiliza esta herramienta por su versatilidad y facilidad en el diseño de interfaces. Los proyecto generados en Illustrator pueden ser copiados y pegados directamente en otras herramientas de edición o prototipado, esto mejora los tiempos de exportación, permitiendo hacer mejoras en los diseños más rápidamente.

‍

Ventajas de usar Illustrator:

‍

• Integración con La Suite de Adobe y Sketch.
• Se pueden tener múltiples mesas de trabajo simultáneamente.
• Múltiples formatos de exportación.
• Permite tener una cantidad ilimitada de capas.

‍

Desventajas de usar Illustrator:

‍

• Su precio es elevado.
• La interfaz gráfica no es intuitiva.
• Es difícil de aprender.
• El área de trabajo es limitada.

‍

7. VAS

‍

‍

Es una aplicación de inteligencia artificial, que predice las reacciones iniciales de los espectadores ante un diseño. Esta herramienta utiliza datos de seguimiento ocular para entender el orden en que las personas se fijarán en los elementos dentro de una imagen.

‍

Con VAS, se crean mapas de calor que muestran los puntos de fijación visuales del usuario. Esto revela un patrón de los estímulos que llaman la atención del cliente con un nivel de precisión hasta de 92%.

‍

El Diseñador UI, la información brindada por la herramienta para mejorar los diseños en las interfaces de usuario. Gracias a esto, se produce una mejor jerarquización de los elementos y puntos de atención más llamativos. 

‍

Ventajas de usar Vas:

‍

• Tiene plugins para Photoshop, Illustrator y Adobe XD.
• Tiene una precisión del 87% al 92%.
• Ahorro de tiempo en el proceso de rediseño y optimización de la interfaz.
• Los resultados se muestran rápido.

‍

Desventajas de usar Vas:

‍

• Algunas veces el mapa de calor suele ser abarcar toda una imagen, en vez de puntos específicos.
• No es compatible con Sketch.
• No tiene integración con API.
• No tiene capturas de URL.

‍

Conclusión

Conocer las herramientas que usan los Diseñadores UI es un paso más para reclutar a la persona indicada. 

‍

Aquí encontrarás algunos blogs que te ayudarán con la selección de este cargo:

1. ¿Qué es un Diseñador UI?
2. 6 habilidades fundamentales para el cargo.
3. 7 Herramientas necesarias para el cargo (Este post)
4. 5 KPI que miden el éxito del profesional.
5. 5 preguntas para entrevistar a tus candidatos.

‍

Si estás buscando que el reclutamiento de tu próximo Diseñador UI sea 100% online, es el mejor momento para iniciar gratuitamente un piloto con Aira y renovar tus herramientas de reclutamiento. ¡Agenda una llamada con nosotros!

‍