Blogs de Shopify

¿Quieres abrir una tienda online?

5 herramientas de creación de prototipos para diseños de web y móviles

5 herramientas de creación de prototipos para diseños de web y móviles

La creación de prototipos es una parte integral del proceso de diseño, ya que permite que tu equipo y tú revisen los conceptos y compartan informaciones durante las primeras etapas de un proyecto. Al crear una muestra interactiva de un sitio web o una aplicación móvil, podrás identificar cualquier deficiencia en el funcionamiento y la funcionalidad de tu diseño antes de invertir demasiado tiempo o dinero en el desarrollo.

Aunque cada diseñador tenga un sistema de necesidades diferentes para realizar sus prototipos, cada una de las herramientas que aparecen a continuación ofrece la funcionalidad y flexibilidad necesarias para crear conceptos sumamente interactivos sin tener que recurrir a una sola línea de código.  Esperamos que después de haber leído esta lista, encuentres la herramienta perfecta para probar tus diseños de web y para móviles. No dejes de consultar nuestra guía de herramientas Lorem Ipsum como ayuda en tu proceso de diseño.

5 herramientas de creación de prototipos

  1. InVision — Crea prototipos sumamente interactivos.
  2. Framer — Diseño de flujos elaborados UX
  3. Marvel — Simplifica el proceso de creación de prototipos
  4. Origami — Da vida a tus ideas para proyectos de móviles y web
  5. Proto.io — Diseño de prototipos que parecen reales

Inspírate en nuestro análisis de grandes ejemplos que conforman un sólido portafolio de diseño web.

1. InVision

Invision

InVision (en inglés) es una herramienta para crear prototipos (en inglés) basados en la web para que los diseñadores construyan prototipos sumamente interactivos para proyectos web y para móviles. Si bien no es posible crear diseños propios dentro de la aplicación de InVision (en inglés), es posible subir los diseños de páginas estáticas a la herramienta, y luego agregar puntos de acceso para transformarlos en prototipos totalmente interactivos. InVision tiene la capacidad de sincronizarse con tus documentos de Sketch o Photoshop y te permite actualizar tu prototipo, en tiempo real, dentro del programa de diseño  que elijas.

En cuanto a las características, InVision dispone de una amplia gama de herramientas útiles que facilitan el proceso de trabajo, tales como el modo de vista previa, el modo de construcción para la creación de hotspots, el modo de inspección - para la entrega de activos a los miembros del equipo, los comentarios, el control de versiones y la sincronización de archivos. También ofrece una variedad de animaciones de transición y movimientos portátiles (deslizar, tocar, etc.) que dan vida a tu diseño. Una de mis características favoritas de InVision es su capacidad de generar estados de fluctuación para cualquier elemento del diseño. Esto permite que tu prototipo sea aún más representativo del producto final, ya que puedes añadir interactividad avanzada, como menús desplegables y estados de fluctuación para los diferentes botones.

InVision se dedica a crear recursos que ofrecen a sus usuarios una funcionalidad más amplia a la hora de abordar proyectos de diseño. Hace poco, InVision anunció la adquisición de Wake (en inglés), una herramienta de diseño enfocada en apoyar la visibilidad del diseño en una organización en particular. InVision actualiza y mejora constantemente su oferta de productos, para ver los últimos avances, consulta su sitio web (en inglés).

La principal ventaja que tiene InVision es su capacidad para fomentar la cooperación: los compañeros de equipo, los clientes o cualquier persona que comparta la plantilla tienen la posibilidad de dejar comentarios y threads en el punto específico. De este modo se elimina la confusión que se crea a través de los mensajes en cadenas de emails y se garantiza que los cambios se implementen exactamente en el lugar donde se necesitan. Por otra parte, con la herramienta Freehand de InVision, los equipos pueden dibujar de forma conjunta y compartir bocetos e ideas en tiempo real.

TL;DR (del inglés too long; didn't read, jerga de internet que significa que se ha obviado parte del texto debido a su extensión).

Formatos ideales para la creación de prototipos: web y móvil (Android e iOS)

Potencial para compartir: funciones extraordinarias tales como los comentarios específicos en el punto específico y colaboración en tiempo real

Recursos de apoyo: documentación detallada

Precio: los precios oscilan entre las pruebas gratuitas de un proyecto y los 25 dólares mensuales sin límite. En el caso de los planes de trabajo por equipo, los precios de InVision son a partir de 99 dólares al mes para 5 miembros de un equipo. Además, ofrecen un plan Enterprise para el caso de equipos numerosos.

¿Todavía no eres un Shopify Partner?

Con oportunidades de ingresos e infinidad de recursos de los que puedes aprender, convertirte en un Shopify Partner es tu oportunidad de trabajar con los clientes para crear soluciones comerciales y aumentar tu experiencia. Únete a una comunidad de emprendedores y comienza hoy a construir tu negocio.

Registrarme

2. Framer

Framer

Framer es una herramienta de diseño de pantalla que funciona en sistemas operativos MacOS, requiere codificación y se utiliza preferentemente para la creación de prototipos animados o interactivos. Con Framer, puedes diseñar flujos UX elaborados, insertar formas, añadir texto y reubicar imágenes. La herramienta tiene una amplia gama de funcionalidades que van desde el diseño, la colaboración y la creación de prototipos (en inglés), por lo que es ideal sobre todo para equipos con diversas competencias y requisitos

Framer proporciona un proceso de diseño integral, con un espacio de trabajo de diseño equipado con un conjunto de herramientas de edición vectorial que permite exportar fácilmente cada fotograma y forma como mapas de bits o vectores. También cuenta con un espacio de trabajo codificado que permite añadir animaciones, movimientos y otros componentes. Puedes exportar un código preparado para la producción al hacer clic con el botón derecho del mouse para copiar el CSS o el SVG.

Mientras estés en el área de diseño, puedes hacer que tu trabajo sea receptivo y así podrás diseñar para una gran variedad de dispositivos. Al programar dentro de Framer, puedes acceder fácilmente a la documentación dentro de la aplicación. Esta documentación comprende el código y los bloques de construcción de las capas, animaciones, estados, eventos y otros elementos. Esta programación se realiza en el lenguaje CoffeeScript (en inglés), que es una versión más accesible que Javascript y según sus creadores, es “un intento de exponer las partes buenas de Javascript de forma sencilla”.

Cuando estés listo para compartir tu trabajo con tu equipo o con las partes interesadas, podrás copiar y pegar recursos o bien exportar todo el material. Al ser una herramienta basada en el navegador, todo lo que se diseña está preparado para la web. En el caso de los proyectos que requieran colaboración, esto puede hacerse por medio del intercambio de comentarios y la carga de prototipos en Framer Cloud.

Si quieres probar Framer, hay una versión de prueba gratuita de 14 días que te permite acceder a todas las funciones de la herramienta sin necesidad de tarjetas de crédito. Además de la prueba gratuita, Framer ofrece planes individuales y múltiples planes para equipos que se adaptan a diversos números de usuarios.

Independientemente de que estés intentando diseñar íconos de aplicaciones, imágenes o modernizar todo el sistema de diseño de la compañía, Framer puede ser de gran utilidad.

TL;DR 

Opciones de prototipos ideales: sistemas operativos iOS, Android y web

Potencial para compartir: vista previa de proyectos, cargar trabajos en Framer Cloud y realizar prototipos de prueba en forma de aplicaciones nativas para los clientes

Soporte técnico: guías, tutoriales, recursos, ejemplos y comunidades online y offline

Precio: Framer tiene un plan individual con un costo de $12 mensuales facturados anualmente y planes para equipos que van desde $250 a $750 mensuales, así como planes personalizados para empresas.

También podría interesarte: Ejemplos de tiendas mexicanas para que tengas el logo perfecto

3. Marvel

Marvel

Marvel (en inglés) es una gran herramienta de creación de prototipos (en inglés) móvil y con base en la web que se destaca por su capacidad de simplificar el proceso de creación de prototipos. Una vez que te hayas registrado en la cuenta de Marvel, accederás de inmediato a la interfaz y podrás comenzar a crear tu primer prototipo. A partir de ahí, puedes cargar tus archivos de imagen en Marvel y agregar gestos y movimientos. La plataforma admite la carga de determinados tipos de archivos de imagen, entre los que se incluyen PSD, GIF y JPG, así como las cargas de terceros vía Google Drive, Sketch o Dropbox.

Si bien Marvel no ofrece el tipo de funcionalidades completas de edición de imágenes que ofrecen otros programas, cuenta con algunas funciones básicas como el cambio de color de fondo y el reajuste de tamaño de imágenes. Además, podrás acceder a 8 marcos de proyecto diferentes al crear tus prototipos. Esto te asegura  que tus maquetas estén completamente optimizadas para el dispositivo específico para el que estás diseñando.

La app de Marvel para móviles es quizás la funcionalidad más interesante de esta herramienta. Si eres un diseñador al que le encanta comenzar tus proyectos en papel, la aplicación puede transformar tus bocetos en prototipos con tan solo tomar una foto. Las fotos se sincronizan automáticamente con tu cuenta de Marvel, lo cual te permitirá crear prototipos de forma rápida y experimentar con ellos sin ni siquiera realizar un diseño en Photoshop or Sketch.

Marvel no solo esfácil de usar, sino que además es intuitivo. Su sitio web contiene preguntas frecuentes, videos y tutoriales escritos, así como también con un blog que se actualiza regularmente (en inglés). Marvel también es el centro de una floreciente comunidad de diseñadores que comparten regularmente sus diseños de prototipos (en inglés) para ayudar a inspirar los procesos de trabajo de los demás.

Si bien la simplicidad de Marvel podría limitar la funcionalidad deseada por algunos diseñadores, sus pocas restricciones de acceso y su app complementaria la convierten en la herramienta perfecta para poder realizar prototipos con rapidez.

TL;DR 

Opciones de prototipos ideales: web y móvil (Android e iOS).

Potencial para compartir: puedes compartir y colaborar en el plan para equipos y mucho más.

Soporte técnico: preguntas frecuentes, blog de liderazgo intelectual y acceso a contenido creado por la comunidad.

Precio: Marvel ofrece cuatro planes diferentes (en inglés), una versión gratuita para usuarios individuales que trabajen hasta en dos proyectos y una versión de $84 mensuales para los planes empresariales de hasta 6 usuarios. Si estás dispuesto a pagar más, también existen planes de precios mensuales en los que se incluyen otras funcionalidades y grupos de usuarios más amplios.

4. Origami Studio

Origami studio

Origami Studio es una herramienta de creación de prototipos que pertenece a Facebook y que ha sido utilizada para crear diseños para diversas apps, entre ellas Instagram, Messenger y Paper. A pesar de que Origami está reservado solo para los usuarios de Mac, ofrece la posibilidad de previsualizar los prototipos en directo tanto en dispositivos Android como en iOS. Esta herramienta también ofrece a los diseñadores un conjunto de gestos y animaciones de transición comunes a los patrones de la interfaz de usuario de los móviles, muchos de los cuales están disponibles a través de archivos de muestra que pueden descargarse (en inglés).

Origami presenta algunas funcionalidades útiles para el prototipo interactivo, como copiar todo lo que se encuentra en Sketch y pegarlo como una capa nativa, así como también una extensa galería de documentación completa con foros, tutoriales de video y guías. Origami Studio es útil cuando se presentan muchas micro interacciones, ya que pueden visualizarse con gran detalle para mostrar exactamente cómo va a funcionar algo.

Podrás probar tus prototipos interactivos para móviles inmediatamente en un dispositivo iOS y en Android con la app asociada, Origami Live. Todo lo que tienes que hacer es descargar la aplicación desde la Apple App Store y conectar tu dispositivo iOS a tu escritorio, ¡y listo! Las posibilidades de colaboración de Origami son mucho más limitadas que las de las otras herramientas que hemos mencionado, ya que sólo puedes compartir un prototipo con una persona que tenga Origami Live en su teléfono móvil. 

TL;DR 

Formatos de prototipos ideales: web y móvil (Android e iOS)

Potencial para compartir: ausencia de capacidades robustas para compartir con tus compañeros de equipo.

Soporte técnico: algunos documentos, tales como tutoriales y archivos de muestra, así como una comunidad social de usuarios muy activa.

Precio: sin cargo

5. Proto.io

Proto.io

Proto.io (en inglés) es una herramienta de diseño basada en la web que se utiliza para crear prototipos completamente interactivos para muchas interfaces, entre ellas las de los móviles, las plataformas web, el Apple Watch y los juegos. Fue desarrollado por la División de Laboratorios de SNQ Digital (en inglés) para profesionales especializados en la experiencia de usuario, diseñadores de interacción, diseñadores de móviles y aficionados a las apps.

Proto.io ofrece una interfaz de usuario familiar e intuitiva con la función de arrastrar y soltar, sin necesidad de codificar, por lo que resulta accesible para cualquiera. Tiene la capacidad de crear capas en diferentes pantallas, lo que facilita mucho el trabajo en un prototipo. El diseño en Proto.io puede hacerse rápidamente, ya que toda la biblioteca de interacciones está integrada y lista para aplicarse a cualquier capa de la pantalla. El equipo de desarrolladores incorpora nuevas funcionalidades (en inglés) al producto de forma consistente. Últimamente lanzaron Overflow, una herramienta de diagramación de flujo de usuario para diseñadores.

Puedes previsualizar las animaciones directamente en el editor mientras creas tu diseño de movimiento, sincronizas cualquier recurso con Dropbox, creas interacciones a través de JavaScript e importas desde Sketch/Photoshop. Proto.io permite compartir con un solo clic, así como compartir a través de un enlace público que puede abrirse tanto en la web como en el móvil. Estos enlaces compartidos contienen configuraciones de privacidad, por lo que únicamente pueden acceder aquellos usuarios a los que les hayas dado permiso.

TL;DR 

Formatos de prototipos ideales: numerosos dispositivos y pantallas que superan las aplicaciones web y móviles.

Potencial para compartir: puedes compartir una versión en vivo de su prototipo y una foto instantánea.

Soporte técnico: seminarios online gratis, un centro de ayuda equipado con guías de usuario, soporte por email, asistencia a través de foros.

Precio: $24 mensuales, pagados en forma anual por 5 proyectos activos. También existen planes con precios más altos para 10, 15 o 30 proyectos activos, y una prueba gratuita de 15 días.

Utiliza tus conocimientos para ayudar a emprendedores de todo el mundo.

El Programa de Shopify Partner conecta a gente talentosa como tú con más de 1 millón de emprendedores en todo el mundo. Genera ingresos ayudándolos a diseñar tiendas virtuales, tomando fotografías de productos o desarrollando una app.

Obtén más información sobre el Programa de Shopify Partner

Acerca del autor

Simon HeatonSimon es un amante del café, antiguo estratega digital de la agencia y gerente de marketing de crecimiento de Shopify Partners. Cuando no está trabajando en Shopify HQ, lo más probable es que lo encuentres cenando en restaurantes de toda la ciudad o repasando las últimas tendencias de diseño.

Mapa de categorias: