Si estás pensando en el maravilloso mundo del diseño UX/UI o eres uno de los afortunados que ya se dedica a esto, entonces debes saber que estamos en el mejor momento para poder transformar nuestras ideas en diseños reales gracias a estas herramientas de diseño.
Un buen diseño UX/UI es crucial cuando se trata de productos como aplicaciones o sitios web. A todo el mundo le encanta un diseño fácil de usar y una interfaz atractiva y que funcione sin problemas. En el espacio digital, la usabilidad de los medios online puede significar el éxito o el fracaso de un sitio web o un software. Una vez que se tiene una idea sobre una aplicación o sitio web, un diseñador UX debe asegurarse de que su uso sea intuitivo, se ejecute sin problemas y siga la guía de estilo adecuada en términos de marca, colores, logotipos, diseño y estilo general. La funcionalidad y la estética juegan un papel muy importante para los diseñadores UX/UI.
Construir un Prototipo
Con la ayuda de herramientas de diseño y desarrollo de software, los diseñadores UX/UI planifican y construyen el diseño y la estructura de un producto, y para ello, un paso fundamental es la creación de prototipos. Una vez que un desarrollador ha reunido todos los datos, información, necesidades y objetivos para un nuevo proyecto, necesita construir un prototipo y hay varias herramientas disponibles para hacerlo. Para realizar pruebas precisas y útiles, es importante que el prototipo esté lo más cerca posible del producto real y refleje sus características de cerca. Teniendo esto en cuenta, es fundamental seleccionar la mejor herramienta para esta tarea.
Las 5 mejores herramientas de creación de prototipos
Sketch
Sketch es una herramienta de diseño UX/UI muy conocida y querida. Es fácil trabajar con ella y te permite realizar cambios universales así como cambios en el tamaño o alinear, superponer y cambiar estilos de texto. La implementación de cambios como estos ahorra mucho tiempo a los diseñadores y garantiza la coherencia en todo el producto. También hay muchos complementos fáciles de integrar disponibles para Sketch que amplían lo que puede hacer la herramienta. Además, tiene una opción incorporada para importar, editar e inspeccionar su propio código. Sketch ofrece la opción de compartir prototipos a través de un enlace de navegador o un código QR que te permite probar el producto en tu teléfono o tablet. Esto es muy beneficioso si necesitas compartir el prototipo con otro miembro del equipo o compañero de trabajo. También es una gran característica para probar un prototipo en vivo durante el proceso de desarrollo.
Primeros pasos con Sketch:
Comenzando con el menú en el lado izquierdo, podemos ver su “Layer panel” (panel de capas) con la jerarquía de nuestras capas y grupos (la jerarquía se compone de Artboard/Group/ Element).
Diferentes páginas en el mismo archivo (incluida la “symbols page” (página de símbolos) creada automáticamente donde se organizan todos sus símbolos "maestros").
El menú del lado derecho está reservado para todas las propiedades tanto de los elementos como de todas las anulaciones de tus símbolos. Esto ayuda a actualizar tus diseños de una manera muy sencilla.
La barra superior tiene herramientas como “Data” (datos) para prototipar con datos aleatorios como fotos de perfil, nombres o ciudades (muy limitadas). Antes de esta nueva característica, necesitábamos usar complementos como Craft.
En la esquina superior derecha, podemos encontrar la opción “Preview” (vista previa) para obtener una vista previa de nuestros prototipos. Las opciones que tenemos para estos prototipos son demasiado simples (o no tan simples si usamos el complemento Anima) pero lo suficientemente buenas como para deshacernos de la antigua Invisionapp. Si deseas saber más sobre las herramientas de creación de prototipos más avanzadas, presta atención a la segunda parte de este artículo.
Junto a la opción de vista previa, encontramos nuestro Sketch Cloud, una de las funcionalidades más interesantes de esta herramienta, donde podemos compartir nuestros diseños con los clientes o crear bibliotecas colaborativas con todos nuestros símbolos. Esto significa que cuando actualizamos uno de ellos, podemos cambiar todos nuestros diseños de una manera muy rápida. Por otro lado, en caso de que te lo estés preguntando, no podemos usar esta nube para el control de versiones, para eso necesitaremos usar un software externo como Abstract.
Como puedes ver en los puntos anteriores, un muy buen uso de Sketch es la posibilidad de agregar complementos (plugins), que pueden darte “superpoderes”, pero lo malo de esto es que son independientes de Sketch, lo que significa que pueden ser eliminados, no actualizados o pueden costar dinero extra. Uno de los mejores complementos sería Zeplin (herramienta de transferencia).
CONCLUSIÓN: Sketch sigue siendo la herramienta de diseño más utilizada porque es una herramienta realmente poderosa + sus complementos (superpoderes). Nunca te decepcionará.
Figma
Figma es una popular herramienta de diseño basada en la nube. Es similar en diseño y funcionalidad a Sketch, pero es altamente colaborativa y es una de las mejores herramientas de creación de prototipos para la colaboración en equipo. Todos, desde diseñadores UX hasta desarrolladores, pueden acceder y trabajar en un proyecto en Figma. Con la integración de Slack y la opción de compartir proyectos, páginas, marcos y archivos con compañeros de trabajo seleccionados, Figma es una poderosa herramienta UX basada en equipos. Una característica particularmente divertida y fácil de usar es la opción de hacer clic en el avatar de cualquier persona para ver su vista.
Dejando a un lado la colaboración en equipo, Figma es una herramienta de UX/UI ideal para el diseño web y te permite adaptar fácilmente la estética de tablas, texto y cuadrículas en un producto. También hay algunos complementos excelentes disponibles que amplían las funciones disponibles y te permiten construir y probar prototipos muy específicos. Estos incluyen Figmotion para crear prototipos de animaciones y Autoflow para visualizar los flujos de usuarios.
Primeros pasos con Figma:
En el panel lateral izquierdo, encontramos algo similar a Sketch, donde tenemos nuestras capas con la jerarquía creada por nosotros (Frame/Group/Element).
Tenemos la opción de agregar diferentes páginas en un mismo archivo y en el caso de crear componentes, estos aparecerán como una lista en la pestaña inferior, algo muy útil para arrastrar y soltar.
En el lado derecho encontramos el panel de propiedades, pero con un valor añadido ya que tenemos diferentes pestañas donde también podemos encontrar nuestras opciones de prototipado y codificación (transferencia para desarrolladores).
La edición multijugador es una de las características más interesantes de Figma, donde algunos usuarios pueden trabajar en el mismo archivo al mismo tiempo. Para comunicarnos con nuestros clientes o compañeros de trabajo, tenemos la opción de compartir nuestro archivo de diseño o prototipo con un solo enlace o incluso dejar comentarios sobre ellos para tener conversaciones dentro de nuestros diseños.
En la pestaña de prototipos, encontramos interacciones de prototipos simples pero con un poco más de detalle que Sketch, por lo que podemos crear micro interacciones como modales, pop-ups o barras laterales, algo que junto con la aplicación de espejo Figma es muy útil para nuestras pruebas de usuario.
Siempre que sea una herramienta basada en la nube, todos nuestros diseños no solo se guardarán automáticamente, sino que también se cargarán en nuestro espacio ilimitado en la nube, para que nosotros (o cualquier miembro de nuestro equipo) podamos acceder a ellos desde cualquier ordenador solo con nuestro navegador de Internet.
Con Figma, también podemos utilizar sus integraciones: Zeplin, Dribbble y Avocode. No tenemos complementos, pero hay una nueva funcionalidad para crear matrices o reemplazar elementos (stack groups) muy rápido y estamos seguros de que te va a encantar.
CONCLUSIÓN: Figma es una gran herramienta para trabajar en equipo o compartir tus proyectos con tus clientes de una manera rápida y muy efectiva pero recuerda que para aprovechar todo su potencial es necesario estar conectado a Internet.
Framer X
Framer es una poderosa herramienta de creación de prototipos UX/UI; ten en cuenta que esta herramienta es más adecuada para desarrolladores más experimentados con sólidas habilidades de codificación. Los prototipos deben construirse con código real en esta herramienta y va más allá de los requisitos de muchas otras herramientas de diseño. Con Framer, puedes crear prototipos interactivos y totalmente funcionales muy rápidamente y probar factores como efectos 3D, páginas de enlace y diseño de botones. Cualquier producto que tenga un fuerte enfoque visual estaría bien atendido por esta herramienta. La función de Framer's Stacks en particular te permite mover y reemplazar elementos fácilmente y automáticamente asegura que estén colocados uniformemente en la página.
Hay una tienda Framer X (Framer X Store) disponible que también tiene una amplia gama de recursos adicionales, como reproductores multimedia y mapas en vivo, lo que amplía la gama de contenido y características que puedes probar en un prototipo.
Primeros pasos con Framer X:
Comenzando con nuestro panel de capas, podemos ver una jerarquía de capas creada automáticamente, algo a lo que tan pronto como nos acostumbremos, nos hará la vida más fácil. Aunque la estructura de diseño no tiene artboards (canvas) donde colocar nuestros diseños, tenemos frames (marcos) donde podemos anidar frames con más contenido y más marcos en su interior. (Inicio).
No tenemos la opción de añadir más páginas a nuestro archivo, algo que no es necesariamente malo pero es algo que echaremos de menos si estamos acostumbrados.
En el menú del lado derecho, encontramos el panel de propiedades con una nueva categoría interesante - código - donde podemos inspeccionar, editar o importar nuestro propio código para crear componentes de código para nuestro sistema de diseño.
En lo referente a características especiales únicas, podemos diseñar utilizando diferentes herramientas interactivas como "stacks", "scrolls" y "pages". Otra cosa que realmente nos gusta es lo fácil que es compartir los prototipos, ya sea con un enlace en tu navegador o un código QR para que puedas reflejar en tu dispositivo.
Acerca de la creación de prototipos, Framer es probablemente la herramienta más poderosa en el mercado actual, pero solo si tienes habilidades de codificación o trabajas con desarrolladores, por lo que podrás construir tus prototipos con código real, no solo con imágenes.
Aquí tenemos malas noticias, en Framer no tenemos ningún servicio en la nube (todavía).
Por último, pero no menos importante, Framer tiene una tienda en la aplicación donde muchos diseñadores o equipos de diseño cargan su trabajo para que puedas usarlos en tus diseños.
CONCLUSIÓN: Framer es una herramienta de diseño y codificación realmente prometedora para crear prototipos muy potentes y sistemas de diseño React. Gran herramienta para colaborar con desarrolladores. Tal vez no sea una herramienta para principiantes, especialmente si no sabes nada sobre codificación.
Adobe XD
Adobe ha sido durante mucho tiempo uno de los mejores jugadores cuando se trata de software de diseño, y los productos de Adobe son los favoritos de muchas personas en carreras creativas. Adobe XD es ideal para cualquier persona que esté familiarizada con otros productos de Adobe y los utilice con regularidad. Proporciona herramientas basadas en vectores que te permiten crear y probar transiciones, interacciones y otras características dinámicas, y produce prototipos de alta resolución. También puedes cambiar el tamaño y mover elementos fácilmente con esta herramienta. Es adecuado tanto para diseñadores de UI como para diseñadores gráficos, y combina varias disciplinas en una herramienta práctica.
Herramienta XD
Si trabajas regularmente con otro software en Adobe Suite, como PhotoShop, Lightroom o InDesign, entonces XD será una de las mejores herramientas de creación de prototipos para que trabajen los diseñadores de UX/UI. La herramienta XD también recibe actualizaciones periódicas que amplían su gama de funciones.
Marvel
Las principales ventajas de Marvel son un fuerte enfoque en la colaboración y la opción de realizar pruebas en tiempo real con usuarios externos. Es una excelente herramienta de creación de prototipos para diseñadores UX/UI que trabajan como parte de un equipo más amplio, ya que apoya la comunicación al permitir que cualquier compañero de trabajo o empleado de un equipo de diseño agregue comentarios y notas. Los compañeros de equipo también pueden realizar cambios y todo en tiempo real. Esta herramienta altamente colaborativa te permite construir un prototipo dinámico e interactivo que ofrece una impresión real de la experiencia de usuario. Marvel también ofrece la opción de que usuarios reales prueben tu prototipo. Te permite conectarte rápidamente con testers y registrar y analizar su interacción con el prototipo. Este tipo de investigación es inestimable para muchos productos y te permite ver cómo los usuarios realmente interactúan con tu prototipo.
Da los primeros pasos en UX/UI
En el Bootcamp de Diseño UX/UI de Ironhack, aprenderás a diseñar interfaces de usuario y comprender la experiencia de usuario, así como la implementación del diseño, la ejecución de una idea y la construcción de un prototipo. El diseño UX/UI requiere habilidades prácticas y creatividad. Es un área interesante para estudiar y trabajar con muchas posibilidades de desarrollo profesional.
