La creación de prototipos web es una parte integral del proceso de diseño.
Estos 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 interactivos.
✅ Todo ello 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. Toma nota:
5 herramientas para crear prototipos web con los que diseñar online
- InVision -克雷亚prototipos sumamente interactivos。
- Framer — Diseño de flujos elaborados UX
- Marvel — Simplifica el proceso de creación de prototipos
- Origami — Da vida a tus ideas para proyectos de móviles y web
- Proto.io — Diseño de prototipos que parecen reales
Tú eliges el que mejor se adapta a tus proyectos digitales:
✅InVision
Es una herramienta para crearprototiposbasados 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 luegoagregar puntos de acceso para transformarlos en prototipostotalmente 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 unaamplia 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.
10 Consejos de diseño web para tiendas online: porque tu primera impresión importa
El ser humano tiene menos atención que el pez globo, en 12 segundos tienes que ser capaz de captar su atención en tu tienda online. Para ello nada mejor que preparar el mejor escaparate para hacer brillar tus productos.
Recibe la guía 10 Consejos de diseño web para tu tienda online en tu casilla de correo electrónico.
Ya casi estás ahí: por favor, completa este formulario y haz clic en el botón de abajo para obtener acceso inmediato.
Al introducir tu correo electrónico, nos das tu consentimiento para recibir comunicaciones comerciales y consejos gratuitos de Shopify vía email. Puedes cancelar la suscripción cuando desees.
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一crear recurso项目,ofrecensus usuarios una funcionalidad más amplia a la hora de abordar proyectos de diseño. Hace poco, InVision anunció la adquisición deWake, una herramienta de diseño enfocada en apoyar la visibilidad del diseño en una organización en particular.
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éstoo 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:洛杉矶precios oscilan之间las功能gratuitas deun 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✅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 eldiseño, la colaboración y la creación de prototipos, por lo que es ideal sobre todo para equipos con diversas competencias y requisitos
Framer proporciona unproceso de diseñointegral, 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 lenguajeCoffeeScript, 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 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:包括de tiendas墨西哥帕拉是一位el logo perfecto
3.Marvel
Marvel es una gran herramienta de creación de prototipos 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 ypodrá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.
Guía gratis: Cómo tomar fotografías de productos por ti mismo
Aprende gratis a tomar fotografías bonitas de productos y con un presupuesto ajustado con nuestra videoguía completa.
Recibe nuestra "Guía para tomar fotografías bonitas de productos por ti mismo" en tu casilla de correo electrónico.
Ya casi estás ahí: por favor, completa este formulario y haz clic en el botón de abajo para obtener acceso inmediato.
Al introducir tu correo electrónico, nos das tu consentimiento para recibir comunicaciones comerciales y consejos gratuitos de Shopify vía email. Puedes cancelar la suscripción cuando desees.
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 conun blog que se actualiza regularmente.
Marvel tambiénes el centro de una floreciente comunidad de diseñadores que comparten regularmente sus diseñosde prototipos 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 poderrealizar prototiposcon 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 ofrececuatro 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 Studioes 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.
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.ioes 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 laDivisión de Laboratorios de SNQ Digitalpara 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 alproducto de forma consistente.
Últimamente lanzaronOverflow,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.
Haz crecer tu negocio con el Programa de Shopify Partners
Si ofreces servicios de diseño y desarrollo web, el Programa de Shopify Partners te prepara para el éxito. Únete de forma gratuita y accede a oportunidades de participación en los ingresos, entornos de vista previa para desarrolladores y recursos educativos.
RegistrarmePrueba Shopify gratispara crear tu tienda online.
Sin tarjeta de crédito, fácil e intuitivo.
Todas tus dudas sobre cómo crear prototipos de diseño resueltas aquí:
¿En qué medida me pueden ayudan las herramientas de diseño de prototipos?
¿Debo saber programar para usar herramientas de diseño de prototipos?
¿Existen más de 5 programas para hacer prototipos de diseño?
¿Todas las herramientas de prototipado son de pago?
Acerca del autor
Simónes 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.