Hablemos de Prototipado: Programas para crear prototipos de sitios web (no código)

Hablemos de Prototipado: Programas para crear prototipos de sitios web (no código)

26-11-2020 | Por Susana

Estos programas tienen como finalidad crear diseños y simulaciones de sitios web y aplicaciones móviles que ayuden a detectar errores de estructura, lógica, así como una aproximación de su funcionamiento antes de ser aprobados y llevados a código.

El diseño sitios y aplicaciones móviles se ha convertido en una de las áreas con mayor demanda, que aúna el conocimiento de distintas disciplinas como el diseño gráfico, la animación, programación y muchas otras.

 Sin embargo, el crear una propuesta para el diseño de una interfaz, es una de las decisiones fundamentales, ya que una pantalla mal construida o planeada, hará que los usuarios encuentren imposible o incómodo, usarla. Aunque estas pueden ser construidas y mostradas de forma estática (antes de ser llevada a código para programar el funcionamiento de los elementos), es una mejor opción hacer uso de un software que permita simular el comportamiento del sitio o app sin la necesidad de pasar a programar, con la finalidad de registrar la interacción, que tan intuitivo es, y de ese modo, optimizar la experiencia del usuario

Estos son algunos programas que puedes utilizar para la creación de prototipos:

Figma

Se trata de una herramienta multiplataforma que permite crear prototipos ya sea, desde el navegador o descargando el programa, pero necesitas crear una cuenta para poder usar ambas opciones. Cuenta con opción gratuita y de paga, la diferencia en ellas, radica en el número de participantes y recursos que podrías compartir. 

A diferencia de otros, Figma permite la colaboración en tiempo real, lo que concede que varios usuarios trabajen en el mismo archivo realizando cambios y tengan acceso a las librerías creadas. Incluso, tiene la opción de importar un archivo de sketch.

Adobe XD

Producto creado por la compañía Adobe, es un editor de gráficos vectoriales para simular la interacción de páginas y apps móviles cuando son puestas en marcha.

Al ser un programa nativo de Adobe, este te permite importar archivos de programas de su suite como Photoshop, Ilustrator u otros. Puedes crear componentes reutilizables, lo cual, optimiza el trabajo.

Sketch

Al igual que las anteriores, se utiliza para diseñar la interfaz de usuario y la interacción con ella, pero a diferencia de las otras, para ejecutarla es necesario el sistema operativo Mac OS que está disponible solo en dispositivos Apple.

Invision Studio

Permite diseñar pantallas y crear interacción entre ellas y básicamente contiene las mismas funciones que los otros programas de prototipos, pero invision, te deja modificar la línea de tiempo de las transiciones de una pantalla a otra (tiempo), además podrás correr dos animaciones al mismo tiempo.

Framer X

Programa de diseño y prototipado UI/UX generado a través de código React.js. A diferencia de las anteriores, esta puede crear ilustraciones en formato svg y exportarlas, además de contar las funciones de componentes y librerías que tienen las otras aplicaciones que hemos mencionado previamente.

Si eres alguien que va iniciarse en estas herramientas, te recomendamos iniciar con Figma o Adobe XD; ya que la primera opción es multiplataforma y puede usarse desde cualquier ordenador con acceso a internet y te permite descargar la aplicación de escritorio si lo deseas, además de que puedes crear tu cuenta de forma gratuita, y en cuanto a la segunda, al ser parte de la suite adobe es compatible con varios archivos de la suite.