Las mejores herramientas de prototipado web

Los prototipados son una parte fundamental en el diseño y marcarán la experiencia de usuario íntegra que se seguirá durante el uso de una aplicación o producto digital. Permiten simular el producto final y detectar problemas de navegación.

Para poder presentar los prototipados de tus aplicaciones o productos digitales tendrás que decidirte por alguna de las decenas de herramientas que existen en el mercado. ¿Qué aspectos te pueden ayudar a escogerla?

Será conveniente que tengas en cuenta si se trata de herramientas que solo están disponibles en Apple o en otros sistemas operativos. También tendrás que valorar si se trata de un prototipo sencillo o más complejo para presentar a tus clientes.

Estas herramientas te servirán para crear maquetas interactivas con el flujo de pasos que se seguirán durante el uso de una aplicación o página web y a través de un buen testeo te permitirán detectar deficiencias en el producto final.

¿Cuáles son las diez mejores herramientas para llevar a cabo tus prototipos?

• Sketch. Es una herramienta relativamente sencilla que te permite crear desde la idea hasta el diseño final. Se basa en plugins que podrás implementar para ir dando forma a tus prototipados. A partir de una «toolbar» puedes ir escogiendo, por ejemplo, cual será tu Home y los links a los que dirige cada Call to Action (CTA). Solo disponible para Mac.
• Figma. Su característica principal es que permite desarrollar una interfaz de usuario sin tener que acudir a un software nativo. Tus archivos siempre estarán en la nube. Permite el trabajo colaborativo desde cualquier sistema operativo.
• Framer Studio. Si no dominas el lenguaje Javascript o Coffescript puedes tener algún problema, pero si lo conoces te resultará útil y buena. Recomendada para un nivel más avanzado, lejos de otras como Sketch o la sencilla Marvell, que puedes manejar sin grandes conocimientos de diseño.
• Adobe XD. Competidora directa de Sketch, Adobe XD -con la potente marca que avala esta herramienta detrás de su diseño- ha ido mejorando considerablemente. Compatible con Windows y Mac. Permite importar archivos de Sketch y Photoshop.
• Axure. Esta herramienta sencilla genera prototipos HTML sin necesidad de codificación. Permite crear documentos maestros (masters) reutilizables muy útiles para cabeceras, footers o templates.
• Affinity Designer. Aunque se creó solo para Mac, finalmente dio el salto también a Windows. Es la alternativa económica a Illustrator creada para diseñadores. Precio atractivo en relación a sus herramientas y actualizaciones.
• UX Pin. Creada para colaboración entre diseñadores y la coedición en la web para que cada compañero pueda aportar sus comentarios. Permite importar HTML de una web ya existente. Integración con Sketch y Photoshop, previo pago de sus funcionalidades.
• Proto.io. Permite crear prototipados sin código a través de un sistema de coger y soltar y cuenta con una interfaz sencilla. Buena para hacer wareframes.
• Gravit Designer. Su ventaja es que es realmente multiplataforma al estar disponible para Mac, Windows en la nube y en Linux. Aplicación simple y elegante que permite duplicados de forma fácil.10.
• Mock Flow. Permite crear wireframes en la nube. Fácil integración de Salck y Trello. Permite crear sitemaps, guías de estilo y banners interactivos y anuncios sin usar código. Pensada para trabajo en equipo.

Si te interesa el mundo UX y el diseño de productos digitales y quieres desarrollar prototipados puedes echar un vistazo a nuestro Máster de UX y diseño de productos digitales donde aprenderás a hacerlo con los mejores profesionales del sector.