Las 12 mejores herramientas de creación de prototipos

Página 1 de 2: Página 1

La creación de prototipos es una parte esencial de cualquier proceso de diseño digital. Nos ayuda a simular nuestros diseños, explorar diferentes experiencias de usuario y probar trayectos y flujos de usuarios dentro de nuestros proyectos. Atrás quedaron los días de imprimir y proporcionar archivos PDF de diseños.

Hay un montón de herramientas de diseño web alrededor, pero las herramientas de creación de prototipos se han hecho realidad en los últimos años. Con estas herramientas de creación de prototipos, estará listo para enfrentar cualquier desafío de diseño que pueda enfrentar, ya sea que desee crear algo hermoso o técnico a partir de una idea. Con cualquier prototipo, es importante probar y jugar con su interfaz para que pueda validar la experiencia.

La mayoría de estas herramientas vienen con una etiqueta de precio, pero algunas brindan acceso gratuito para un solo proyecto o páginas limitadas, lo que le permite encontrar la aplicación adecuada para su proyecto.



Si lo que busca son herramientas específicas de wireframing, consulte nuestra lista de mejores herramientas de estructura metálica disponible.

Ilustración principal: Newton Ribeiro

01. Proto.io

Precio: Desde $ 24 / mes (prueba gratis)

Pros:

  • Grabar pruebas de usuario
  • Prototipos compartibles
  • Aplicación móvil disponible
  • Admite la creación de prototipos de realidad virtual
  • Complementos disponibles

Contras:

  • No es ideal para uso sin conexión

Proto.io es un competidor increíble para crear prototipos realistas desde ideas aproximadas hasta diseños completos. La herramienta también ofrece muchas posibilidades para sus proyectos, incluida la creación de animaciones detalladas y animaciones vectoriales personalizadas.

Sin duda, es uno de los pioneros cuando evalúa herramientas para ayudarlo a crear sus prototipos. Con Proto.io, iniciar un proyecto es tan simple como lo desea. Con solo una idea aproximada esbozada, puede comenzar a trabajar de inmediato y comenzar a usar activos predefinidos para hacer evolucionar su concepto rápidamente.

Una vez que esté satisfecho con sus ideas, estas se pueden convertir en wireframes más pulidos y presentables para una mayor validación y reflexión. El siguiente paso significativo después de eso le permite modificar el diseño de sus prototipos para que sean lo más fieles posible al resultado final.

Proto.io es una herramienta basada en web y viene con una gran cantidad de complementos y funciones, que incluyen la importación de archivos de Sketch y Photoshop, creación de prototipos de realidad virtual, bibliotecas de interfaz de usuario e incluso grabación de pantalla para pruebas de usuario. Esto realmente puede ayudar si está haciendo la transición hacia y desde otras aplicaciones.

En última instancia, necesitará tomarse un tiempo para familiarizarse con esta herramienta. Se puede hacer mucho con él y hay una gran cantidad de opciones y elementos de menú para jugar. Sin embargo, una vez que haya aprendido a manejarlo, será difícil de guardar. La perspectiva de crear animaciones detalladas realmente hace que esta sea una excelente herramienta para usar y la manera perfecta de ejecutar sus ideas de la manera más realista posible.

02. Adobe XD CC 2018

Precio : $ 9.99 / mes | £ 9.98 / mes
Prueba una prueba gratis : nosotros | Reino Unido

Pros:

  • Agregue interacciones con solo unos pocos clics
  • UI limpia
  • Ejecute y exporte prototipos para realizar pruebas fácilmente
  • Crea prototipos con muy pocas restricciones

Contras:

  • Las opciones de animación son limitantes

Adobe XD ofrece el mejor entorno para proyectos digitales bajo Adobe Nube creativa colección de herramientas de diseño. Aunque si es un usuario entusiasta de Adobe y es nuevo en XD, es posible que la interfaz no le resulte muy familiar para empezar, pero se compara con las otras herramientas líderes que existen. Es un salto si lleva un tiempo diseñando en Photoshop. Sin embargo, vale la pena si eres un gran fan de Adobe.

Esta herramienta le permite crear diseños y prototipos de alta fidelidad con muy pocas restricciones. Sin duda, siempre estará entre el arsenal de los proyectos más visuales. Está muy orientado al diseño y es muy fácil de usar con algunas características realmente interesantes para hacer que el proceso de diseño sea más eficiente y satisfactorio.

Hay dos modos para su lienzo: Diseño y Prototipo. Una vez que haya creado un conjunto de interfaces y mesas de trabajo, puede comenzar a dibujar relaciones entre elementos y páginas en los que se puede hacer clic. Puede decidir entre estilos de transición como deslizar, empujar y disolver. Luego, XD le permite ejecutar y exportar prototipos para que pueda probarlos y mostrarlos a los clientes.

Las mejores ofertas de Adobe Creative Cloud de hoy AdobeMinorista recomendado Todas las aplicaciones de Creative Cloud £49.94 /mes Vista a Adobe Fotografía creativa en la nube £9.98 /mes Vista a Adobe Aplicación única de Creative Cloud £19.97 /mes Vista a Adobe

03. Axure

Precio: Desde $ 29 / mes

Pros:

  • Excelente para sitios e ideas complejos
  • Excelente en el manejo de datos dinámicos
  • Lógica condicional
  • Capaz de exportar como archivos HTML
  • Muy funcional

Contras:

  • No es ideal para crear prototipos de diseños de alta fidelidad

Axure ha logrado ganarse la reputación de ser una de las mejores herramientas de wireframing del mercado y la elección perfecta cuando se trata de trabajar con proyectos más complejos que requieren datos dinámicos. Con Axure, realmente puede enfocar su atención en simular proyectos que son más técnicos y requieren más atención cuando se trata de estructura y datos.

Aunque no es necesariamente la primera opción para la creación de prototipos de un diseño de alta fidelidad, no obstante es excelente para llevar rápidamente los proyectos / plataformas de software más grandes a través de los conceptos de wireframe de la primera etapa.

Un beneficio importante de Axure es que maneja muy bien el contenido dinámico, lo que le permite cambiarlo y alterarlo de acuerdo con ciertos viajes o interacciones de los usuarios. Esto se logra mediante una combinación de lógica condicional y la manipulación de páginas, bloques de contenido o texto mediante el establecimiento de variables y parámetros.

Pero el potencial de lo que puede hacer con Axure no se detiene ahí. Es una gran opción para visualizar diagramas de flujo y diagramas, que es lo que le ayudará a articular algunos de los viajes más técnicos con los que se puede encontrar.

Y hablando de los aspectos técnicos de un proyecto, Axure debería estar en la parte superior de su lista de compras para abordar los aspectos técnicos del diseño, así como las plataformas dinámicas o basadas en datos, por lo que el diseño es una mera revisión cosmética al final. Me viene a la mente la función sobre la forma.

04. Estudio Origami

Precio: Libre

Origami fue desarrollado originalmente por Facebook para ayudar al equipo a construir y diseñar productos. Ahora está disponible de forma gratuita: puedes registrarte como desarrollador de Apple, luego descargar e instalar Xcode con Quartz Composer para que Origami se ejecute en una Mac.

Esta herramienta requiere más trabajo para instalar que otras opciones de creación de prototipos. Sin embargo, una vez instalado, puede comenzar a crear conceptos de diseño que simulen el desplazamiento, los toques, el deslizamiento y los enlaces de página. La documentación, los tutoriales y los videos instructivos de Origami facilitan el inicio.

Los diseños de Sketch y Photoshop se pueden importar a Origami, y las capas de su proyecto se conservarán, estarán listas para vincularse, animarse y transformarse según sea necesario. Origami tampoco está centrado en el diseño móvil: puede diseñar sitios web receptivos y simular funciones como la entrada de texto, la cámara FaceTime y la función de arrastrar y soltar de OS X.

Puede exportar los componentes de su prototipo (incluidas las animaciones) con un solo clic, para que los ingenieros puedan copiar y pegar en el proyecto. Origami incluye una herramienta de presentación que le permite agregar un fondo personalizado a su diseño, verlo en pantalla completa y simular diferentes dispositivos.

Como solución de creación de prototipos gratuita, Origami tiene mucho que ofrecer. Sin embargo, un inconveniente es que aún no permite que sus clientes o el equipo de diseño comenten directamente sobre el proyecto o el historial de versiones.

05. Webflow

Diseñar prototipos es rápido y fluido con Webflow, pero donde esta herramienta realmente brilla es cuando su prototipo está terminado. Puede convertir su prototipo terminado en un sitio listo para producción con solo hacer clic en un botón.

Recientemente, Webflow ha introducido una nueva característica revolucionaria: un CMS para sus prototipos. El CMS de Webflow es completamente visual, lo que le permite crear sitios poderosos y dinámicos sin escribir una sola línea de código. Otra característica particularmente útil es su capacidad para crear un blog utilizando el concepto de prototipo de página de su blog.

Si es un diseñador independiente y ha tenido dificultades para encontrar un desarrollador que convierta sus diseños en sitios de producción, Webflow puede ser para usted. Incluso puede configurar cuentas de usuario o designar un administrador para administrar el contenido, y sus clientes podrán realizar cambios visualmente.

Alternativamente, es fácil exportar el prototipo a código. El código semántico limpio de Webflow puede ahorrarle a sus ingenieros horas de limpieza de código.

Webflow viene con plantillas de sitio y componentes web que se pueden arrastrar y soltar en su prototipo. Estos aceleran el proceso de creación de prototipos, ya que significan que no es necesario recrear los activos de diseño de uso común.

Si en algún momento se queda atascado y necesita ayuda, puede consultar la documentación detallada de Webflow o ver sus útiles cursos de video instructivos. Y, por supuesto, si está utilizando Webflow por primera vez, este soporte ayudará a minimizar la curva de aprendizaje.

Webflow responde por naturaleza, por lo que los diseños de su sitio web se optimizarán para todos los dispositivos: escritorio, móvil y tableta. Si eso no fuera suficiente, puede diseñar animaciones que funcionen en dispositivos móviles y en todos los navegadores modernos. Y todavía no termina ahí: Webflow tiene extensibilidad incorporada, lo que facilita la conexión de sus prototipos en vivo a Slack, MailChimp, Google Drive y más de 400 otros servicios.

06. Bosquejo

Precio: $ 99 / año (prueba gratis)

Pros:

  • IU ordenada
  • Muy flexible en términos de funcionalidad
  • Prototipos fáciles de construir
  • Cree símbolos y activos reutilizables
  • Complementos disponibles
  • Comparte fácilmente tu prototipo

Contras:

  • Las opciones de animación son limitantes

Sketch es una aplicación muy apreciada en la comunidad del diseño. Es fácil de usar y le brinda todo lo que necesita para crear hermosas interfaces. Hasta hace poco, Sketch se basaba en extensiones de terceros para crear prototipos con InVision, pero ahora proporciona un entorno propio.

Con las mesas de trabajo predefinidas, puede empezar a trabajar con Sketch rápidamente con muy poco esfuerzo; simplemente comience a cargar gráficos o escriba. Diseñar con esta herramienta es encantador y fácil.

Una de las características que funciona realmente bien dentro de Sketch es cómo maneja los símbolos. Se trata de una forma ordenada de empaquetar objetos de interfaz pequeños o incluso grandes y reutilizarlos una y otra vez. Con sus símbolos, también puede editarlos de forma no deconstructiva. Por ejemplo, puede tener un elemento de botón empaquetado en un símbolo que usa texto, un icono y un borde. Puede reutilizar el símbolo alrededor de su diseño y cambiar el elemento textual si es necesario. Si edita el símbolo en la fuente, puede cambiar cosas como el estilo y el color de la fuente y actualizará todos sus símbolos alrededor de su diseño. Muy ordenado y, a menudo, un gran ahorro de tiempo.

En cuanto a la creación de prototipos, puede dibujar relaciones entre objetos en su lienzo y páginas. Estas relaciones le proporcionarán vínculos entre sus páginas que puede comenzar a conectar y le permitirán simular los viajes de sus usuarios mientras navegan por su sitio. Dentro de Sketch también puede compartir sus prototipos con un enlace único y realizar actualizaciones al proyecto cuando sea necesario.

Sketch es el favorito de muchos y definitivamente vale la pena echarle un vistazo. Es una herramienta de diseño muy limpia y versátil. Hay una serie de extensiones disponibles que ayudan a que el proceso de diseño sea aún más rápido o más fácil.

07. Framer

Precio: $ 15 / mes (prueba gratuita)

Framer es una de las herramientas de creación de prototipos más populares. Se basa en la premisa de que con el código es posible crear un prototipo de cualquier cosa, lo que da como resultado diseños novedosos e innovadores.

Si bien esto puede ser cierto, el lenguaje de codificación patentado de la herramienta para diseñar y animar prototipos podría ser una barrera. Hay quienes pueden no ver la recompensa al final de la empinada curva de aprendizaje, especialmente para un idioma que no se puede usar fuera de Framer.

Sin embargo, para aquellos que quieran asumir el desafío, la documentación del lenguaje de codificación de Framer está muy bien estructurada, con muchos ejemplos para demostrar cómo funciona el lenguaje. Hay videos instructivos, así como cursos sobre Udemy y O'Reilly.

Este enfoque es particularmente útil para los diseñadores que son nuevos en la codificación. Ofrece una visión de primera mano de lo flexible y poderoso que puede ser el código. Además, la aplicación para Mac de Framer está bien diseñada y ofrece vistas previas en vivo a medida que escribe código, lo que es alentador para quienes escriben código por primera vez.

Eso no quiere decir que no sea bueno para los diseñadores con experiencia en codificación que prefieren escribir HTML / CSS para crear prototipos de sus diseños. Framer puede ser la herramienta que estaba buscando: no estará limitado por las herramientas de arrastrar y soltar de otras aplicaciones. Además, debido a que Framer usa código para construir prototipos, puede incorporar datos en tiempo real en su prototipo, de fuentes como Twitter y Parse.

Al igual que otras herramientas, Framer admite proyectos de Sketch y Photoshop, y también conservará las capas de su diseño. Otro beneficio es que, a diferencia de la mayoría de las otras herramientas, también puede importar archivos de After Effects. Cuando esté listo para compartir su prototipo, Framer puede generar una URL que se puede compartir con sus clientes. Estas URL que se pueden compartir se pueden abrir en dispositivos móviles para obtener vistas previas en vivo. Framer también te permite crear prototipos de realidad virtual.

08. Vectr

Puedes diseñar tus prototipos en Vectr

Puede diseñar sus prototipos en las aplicaciones web o de escritorio de Vectr

Precio: Libre

Puede diseñar sus prototipos en las aplicaciones web o de escritorio de Vectr para Mac y Windows, lo cual es impresionante considerando que la aplicación es gratuita. Los prototipos permanecen sincronizados ya sea que esté trabajando en el escritorio o en el navegador web, lo que le permite trabajar cuando esté listo y garantizar que siempre tenga acceso a los últimos cambios.

Los prototipos de Vectr pueden compartirse con una URL e integrarse en aplicaciones como Slack para una colaboración poderosa. Como beneficio adicional, aquellos con los que comparte sus maquetas pueden anotarlos y editarlos.

Por el momento, Vectr no es tan rico en funciones como muchas otras opciones, pero esto no debería disuadirlo de familiarizarse con él. Se ha publicado una hoja de ruta para la aplicación, que detalla una impresionante lista de funciones programadas. Estos incluyen: aplicaciones de escritorio completamente fuera de línea, más plataformas, control de versiones integrado, un mercado de activos de diseño integrado, edición colaborativa completa, efectos de imagen, complementos, maquetas en las que se puede hacer clic, herramientas integradas de comentarios y anotaciones y aplicaciones de escritorio sin conexión .

Siga leyendo para conocer otras 5 excelentes herramientas de creación de prototipos ...

  • 1
  • 2

Página actual: Página 1

Siguiente página Página 2