Las mejores herramientas de wireframing para su aplicación
Publicado: 2018-03-23Hicimos una lista de herramientas de wireframing que pueden ayudar a que la creación de su aplicación o sitio web sea menos intimidante. Si está buscando una excelente herramienta de prototipo , también hemos incluido algunas sugerencias.
Crear una nueva aplicación o un sitio web es una hazaña respetable que no muchos lograrán en su vida. Esto no significa que deba renunciar a hacerlo, sino que debe investigar y comprenderlo todo antes de sumergirse de cabeza. Muchos principiantes tienen dificultades para descubrir la diferencia entre una estructura alámbrica, un prototipo y una maqueta, por lo que esta publicación está aquí para ayudarlo a comprender cada uno.
ÍNDICE
¿QUÉ ES UN WIREFRAME?
LAS MEJORES HERRAMIENTAS DE WIREFRAMING DE 2018
¿QUÉ ES UN PROTOTIPO?
LAS MEJORES HERRAMIENTAS DE PROTOTIPO DE 2018
CREA MOCKUPS DE TU PRODUCTO
¿QUÉ ES UN WIREFRAME?
Tiene una idea genial para una nueva aplicación o sitio web, pero ¿cómo comienza a convertir esto en un producto real? ¡Con una estructura alámbrica! Este es el primer paso en el proceso de planificación, por lo que es importante que no se lo salte.
Conceptos básicos de estructura alámbrica
Antes de tomar decisiones de diseño importantes, su aplicación o sitio web primero necesitará un diseño funcional que tenga sentido. Aquí es donde entra en juego la estructura alámbrica. La mayoría de las personas comienzan haciendo un boceto dibujado a mano de cómo quieren que se vea su aplicación o sitio web. El siguiente paso es convertir este boceto en un diseño o esquema digital que se vea más organizado y profesional.
Su estructura alámbrica deberá comunicar la estructura básica de la página sin incluir ningún elemento de diseño o contenido real.
Trabajar a través de la estructura metálica antes de comenzar a embellecer cualquier cosa le permitirá detectar cualquier error en la usabilidad que sería una molestia para tratar más adelante. En esta etapa, es más importante asegurarse de que los elementos incluidos tengan sentido y sean funcionales, especialmente para su público objetivo. Si está tratando de atraer la atención de los inversores, una estructura alámbrica también les ayudará a comprender su producto mucho más fácilmente. De hecho, no tener al menos un wireframe listo puede hacer que los inversores pierdan interés muy rápidamente. Los elementos que se incluyen en una estructura alámbrica suelen ser cuadros para títulos, botones, cuadros de texto y cuadros de imagen.
Estructura alámbrica vs maqueta
Es fácil confundir una estructura alámbrica con una maqueta porque contienen elementos muy similares. Sin embargo, cuando trabaje con un equipo de desarrolladores, diseñadores e inversores, deberá comprender qué los distingue.
Para empezar, se usa una estructura alámbrica para organizar el contenido y las características de su aplicación , pero de una manera muy básica. Piense en ello como un esquema que muestra la estructura básica de lo que se incluirá en su aplicación. Una vez que comience a agregar otros elementos, como color, íconos, imágenes, fuentes y fotos, comenzará a convertirse en una maqueta.
Una maqueta proporciona una representación de fidelidad media de su aplicación o sitio web en desarrollo. Es una representación mucho más realista de lo que se está convirtiendo en su aplicación. Piense en este paso en el proceso como si agregara un poco de sustancia a su estructura metálica básica o le diera un poco más de vida.
LAS MEJORES HERRAMIENTAS DE REDACCIÓN
BALSAMIQ
MOCKPLUS
MOQUPS
WIREFRAME.CC
MOCKFLOW
BALSAMIQ
Disponible para todos los sistemas operativos porque está basado en la web.
Características principales: Balsamiq es una herramienta de creación de esquemas altamente recomendada que permite a los usuarios crear esquemas para aplicaciones de escritorio, aplicaciones móviles, sitios web, ventanas de diálogo, aplicaciones web, aplicaciones para tabletas y más . Crear su estructura alámbrica a través de Balsamiq es similar a dibujar en una pizarra, y el programa también le permite arrastrar y soltar elementos de la interfaz de usuario, obtener comentarios sobre bocetos de su equipo, revisar diseños y refinar su trabajo en tiempo real.
Precios: El precio de esta herramienta variará dependiendo de un número de situaciones. Puede comenzar con una prueba gratuita de 30 días, pero luego tendrá que pagar tarifas mensuales o anuales según la plataforma que elija. Por ejemplo, la versión en la nube le costará $9 al mes o $90 al año para hasta dos proyectos. La versión de escritorio le costará $ 89 por una licencia de usuario único.
Bonificación: Balsamiq ofrece cursos gratuitos disponibles a través de Udemy y Skillshare para ayudarlo a aprender a usar su producto y obtener los mejores resultados.
MOCKPLUS
Disponible para Mac OS, Windows, Android e iOS.
Características clave: dado que los proyectos se pueden vincular al almacenamiento en la nube, MockPlus permite que todo un equipo colabore fácilmente en un solo proyecto. Los usuarios pueden comentar directamente sobre el proyecto y marcarlo para que otros lo vean. También puede enviar correos electrónicos de notificación a su equipo para mantenerse en contacto sobre los cambios. La mejor parte es que puede hacer todo esto sin codificar ni programar, por lo que es más fácil concentrarse en el trabajo que tiene por delante.
Precios : Hay una opción gratuita disponible para usuarios únicos que incluye productos ilimitados, aunque está limitada en otros aspectos. Después de eso, el precio oscilará entre $199 al año para un individuo y $2999 al año para una empresa. También puede comprar una licencia, que oscilará entre $ 399 para un solo usuario y $ 5999 para una empresa (30 usuarios).
Bonificación: el mayor atractivo de MockPlus es que permite a los desarrolladores crear wireframes a una velocidad más rápida gracias a las herramientas que diseñaron para acelerar el proceso.
MOQUPS
Disponible para todos los sistemas operativos ya que está basado en la web.
Características principales: Moqups es una plataforma basada en la web que se puede utilizar para crear esquemas para aplicaciones web y aplicaciones móviles para iOS, Android y Bootstrap. Dado que la plataforma está basada en la web, tiene la capacidad de conectarse y trabajar desde cualquier lugar. La plataforma no es solo para wireframes, también puedes hacer diagramas y prototipos. Puede arrastrar y soltar elementos fácilmente, usar sus kits de plantillas, elegir entre diferentes fuentes, seleccionar objetos y arrastrar y soltar sus propias imágenes en lo que sea que esté trabajando.
Precios : como la mayoría de las herramientas de wireframing, Moqups ofrece una prueba gratuita. Después de eso, el precio dependerá de una serie de factores. Por ejemplo, una suscripción anual que incluye proyectos, objetos, almacenamiento y comentarios ilimitados costará $13 al mes para un solo usuario y $19 al mes para un equipo creativo (3 personas). Deberá comunicarse directamente con Moqups para obtener una cotización para una cuenta Enterprise.
Bono: Si perteneces a una ONG, escuela u organización sin fines de lucro, Moqups te dará una Cuenta Premium sin costo alguno.
WIREFRAME.CC
Disponible en todos los sistemas operativos ya que está basado en la web.
Características principales: Wireframe.CC se considera una de las herramientas de estructura alámbrica más básicas disponibles. Eso no es necesariamente algo malo, especialmente si eres un principiante. De hecho, debido a su diseño simple, a los desarrolladores les puede resultar más fácil concentrarse en su trabajo. Este programa basado en la web se puede usar para crear ventanas de navegador, aplicaciones móviles o aplicaciones para tabletas.
Precios : Wireframe.CC ofrece una prueba gratuita de 7 días y una cuenta básica gratuita. Después de eso, costará $16 al mes o $144 al año para un solo uso, $439 al mes o $390 al año para tres usuarios, o $99 al mes o $990 al año para una empresa (usuarios ilimitados).
Bonificación: la simplicidad de este programa hace que sea difícil distraerse y posponer las cosas. De hecho, los elementos de la interfaz de usuario solo aparecerán como opciones cuando sea necesario.
MOCKFLOW
Disponible como aplicación de escritorio para Mac OS y Windows o como aplicación web.
Características principales: este programa se puede utilizar para diseñar aplicaciones web, aplicaciones móviles, interfaces y software, entre otras opciones. Ofrecen paquetes de componentes para la interfaz de su elección para facilitar su trabajo. MockFlow también ofrece funciones de colaboración que permiten a todos los miembros de su equipo ver los cambios en tiempo real y, al mismo tiempo, le permite hacer comentarios anotados para que todos los vean. Puede exportar sus archivos en una gran cantidad de formatos, incluidos DOC, PDF y HTML.
Precios : una cuenta básica, que incluye un usuario y un proyecto como máximo en cada herramienta, es gratuita. Una cuenta p remium para un usuario cuesta $14 al mes. Su único inconveniente son las restricciones para compartir. Un paquete de equipo para tres usuarios cuesta $29 al mes, pero puede agregar usuarios a esta cuenta por una tarifa adicional. Una cuenta empresarial no tiene límite de usuarios y le costará $160 al mes.
Bonificación: una de las ventajas de usar MockFlow es su MockStore, que vende plantillas de interfaz de usuario para todo tipo de interfaces. Si no se siente inspirado, puede buscar ideas en su tienda o incluso comprar una plantilla.
¿QUÉ ES UN PROTOTIPO?
Un prototipo aún no es el producto terminado, pero debería ser muy similar en términos de apariencia y funcionalidad general. Este prototipo de alta fidelidad de su aplicación o sitio web debe usarse para probar su producto y obtener comentarios de los usuarios para ayudarlo a mejorar cualquier problema que pueda surgir.
Conceptos básicos de prototipos
Un prototipo generalmente llega al final del proceso de diseño y actúa como un puente hacia el producto final. En esta etapa, los diseñadores podrán mostrar su trabajo y utilizarlo para obtener comentarios útiles. El prototipo no solo debe incluir elementos de diseño, sino que también debe demostrar cómo funcionará el proyecto cuando esté completo.
Es posible que un prototipo no incluya todas las animaciones e interacciones del proyecto final, pero debe poder demostrar cómo fluirá la aplicación. Lo que le permite probar su rendimiento.
Puede hacer que los usuarios lo prueben y le den su opinión para mejorar la experiencia del usuario. Puede sentir que está usando una aplicación real, pero un prototipo es solo una colección de imágenes que están conectadas entre sí. Estos tipos de prototipos, prototipos interactivos, son ideales porque puede ver el diseño terminado mientras interactúa con él. Crear un buen prototipo interactivo puede llevar tiempo y costar algo de dinero, pero definitivamente vale la pena la inversión.
LAS MEJORES HERRAMIENTAS DE PROTOTIPO
PROTO.IO
MARVELAPP
PROT
AXURE RP
INVISIÓN
PROTO.IO
Disponible para Mac OS y Windows.
Características principales: el eslogan de Proto.io es " Prototipos que se sienten reales", y por una buena razón. Su producto permite a los diseñadores crear prototipos de alta fidelidad que son lo más parecidos posible a la realidad. puede ser usado para crear prototipos para aplicaciones móviles y aplicaciones web. Su herramienta de grabación de pantalla le permite a su equipo ver exactamente cómo interactúa su audiencia con el prototipo, y el modo fuera de línea le permite interactuar con el prototipo sin conexión a Internet, todo esto sin tener que escribir una sola línea de código.
Precios : puede comenzar su experiencia Proto.io con una prueba gratuita de 15 días y luego tiene la opción de obtener una cuenta gratuita, aunque es bastante limitada. Las cuentas pagas van desde $ 24 por mes (suscripción anual para un usuario que incluye 5 proyectos) a $ 160 por mes (suscripción anual, 10 usuarios e incluye 30 proyectos activos).
Bonificación: algunas de sus herramientas más nuevas incluyen animaciones vectoriales que puede importar usted mismo o elegir de su biblioteca de animaciones vectoriales. También introdujeron recientemente una biblioteca de componentes VR que le permite integrar imágenes 360 fácilmente.
MARVELAPP
Disponible como aplicación web para Mac OS, iOS, Android y Windows.
Características principales: MarvelApp es una gran herramienta prototipo para diseñadores con experiencia mínima. Su interfaz simple puede parecer bastante básica, pero eso es parte de su atractivo. No solo es un buen punto de partida para los nuevos diseñadores, sino que también ofrece los resultados profesionales que buscan los diseñadores más experimentados. Marvel facilita estar al tanto de los cambios, los nuevos comentarios y el progreso gracias a la opción de importar su equipo desde Slack o Asana. Aunque es una aplicación, puedes usarla para crear prototipos para web o móvil.
Precios : MarvelApp está disponible de forma gratuita para un solo usuario e incluye dos proyectos. Sus suscripciones pagas comienzan en $ 12 por mes para un solo usuario, proyectos ilimitados, prototipos protegidos con contraseña y la opción de descargar sus prototipos.
Bonificación: MarvelApp funciona en todos los dispositivos iOS, lo que significa que puede ver su trabajo rápida y fácilmente en su iPhone, iPad, Apple Watch e incluso Apple TV.
PROT
Disponible como aplicación para iOS y Android.
Características clave: trabajar en una aplicación móvil para crear un prototipo puede parecer un poco limitante, pero Prott demuestra que no tiene por qué serlo. De hecho, esta plataforma está repleta de funciones y herramientas que se pueden usar para crear maquetas de interfaz de usuario, prototipos de software de escritorio, diseños de sitios web, esquemas interactivos y prototipos. Si está trabajando con un equipo extenso, Prott facilita compartir cambios con ellos y obtener comentarios en tiempo real.
Precios : Prott ofrece una prueba gratuita que se convierte en una suscripción gratuita después de que finaliza el período de 30 días. Esta opción es para un solo usuario y un solo proyecto. Sus planes pagos comienzan en $19 al mes para un solo usuario, tres proyectos, pantallas ilimitadas y revisores ilimitados.
Bonificación: la plataforma Prott le permite dejar comentarios en cualquier parte del proyecto, lo que lo ayuda a comunicarse con su equipo de manera mucho más fácil y clara. Los miembros de su equipo pueden responder directamente a sus comentarios, asegurándose de que nada se pierda en el camino.
AXURE RP
Disponible para Mac y Windows.
Características principales: Axure RP se considera una de las herramientas más completas para la creación de prototipos , por lo que no sorprende la cantidad de usuarios que tienen. Si bien es una interfaz muy completa, es una mejor opción para aquellos con una buena cantidad de experiencia. Otra razón por la que es tan conocida en la industria es porque existe desde hace mucho tiempo y es la herramienta con la que la mayoría de los diseñadores aprendieron sus habilidades a principios de la década de 2000. Vale la pena mencionar que necesitará algunos conocimientos de codificación para obtener lo que necesita de esta herramienta.
Precios : puede comenzar con una prueba gratuita de 30 días. Después de eso, las suscripciones comienzan en el nivel Pro por $29 al mes por usuario y llegan hasta $99 al mes por usuario en el nivel Enterprise. Las licencias perpetuas comienzan en $49 al mes por usuario, pero no están disponibles en el nivel Enterprise.
Bonificación: Axure RP ofrece a los diseñadores la mayor cantidad de opciones en comparación con otras herramientas de creación de prototipos. Si bien su interfaz proporciona la mayor funcionalidad, tiene el precio de un sistema más complicado. Una vez dominado, Axure RP le dará grandes resultados.
INVISIÓN
Disponible en todos los sistemas operativos ya que está basado en la web.
Características principales: InVision es una herramienta muy conocida y apreciada en la industria que permite a los diseñadores crear prototipos para la web, iOS y Android. Esta plataforma se diseñó pensando en equipos grandes, por lo que la colaboración es muy sencilla. Es bastante fácil de usar, simplemente tiene que cargar sus archivos de diseño y agregarles elementos como animaciones, gestos y transiciones. El resultado final es un prototipo confiable y de alta fidelidad.
Precios : InVision ofrece un plan gratuito que incluye un prototipo activo, después de eso, los planes pagos comienzan en $15 al mes por tres prototipos para un solo usuario. Una suscripción de equipo para cinco usuarios y que incluye prototipos ilimitados costará $ 100 por mes.
Bonificación: InVision lanzó recientemente su muy esperado Studio, que afirma ser "la herramienta de diseño de pantalla más poderosa del mundo". Esta nueva herramienta espera simplificar el proceso entre el diseño y la creación de prototipos funcionales. ¡La mejor parte es que es gratis!
CREA MOCKUPS DE TU PRODUCTO
Una vez que su prototipo esté listo y haya regresado para solucionar cualquier problema que haya encontrado durante el proceso de prueba, probablemente se esté acercando a la fecha de lanzamiento. Pero, antes de lanzarlo, asegúrese de tener las herramientas adecuadas para comercializar su aplicación o sitio web correctamente. El uso de maquetas que muestren cómo se ve su nueva aplicación o sitio web en dispositivos reales puede ayudar a atraer más atención.
¿Qué es una maqueta?
Anteriormente discutimos la diferencia entre una estructura alámbrica y una maqueta , pero el tipo de maqueta del que estamos hablando aquí es algo completamente diferente. Este tipo de maqueta aparece al final, una vez que su aplicación o sitio web está listo para funcionar. Estas son básicamente fotos que puedes personalizar con imágenes o capturas de pantalla de tu producto final. Por ejemplo, puede tomar una captura de pantalla de su aplicación y soltarla en la pantalla de un iPhone X.
Las maquetas son importantes porque se pueden usar para comercializar y promocionar su aplicación o sitio web. También se pueden usar al crear capturas de pantalla de su aplicación para App Store o Play Store. Las maquetas de Placeit son fáciles de usar y vienen en una gran variedad. Puede encontrar todo tipo de maquetas, incluidas maquetas de iPhone, maquetas de iPad, maquetas de MacBook, maquetas de navegador y maquetas de Android.
Muestre su trabajo en una maqueta
Probablemente esté emocionado de finalmente terminar el proyecto en el que ha trabajado tan duro durante tanto tiempo. Sabemos que probablemente no te quede mucho dinero para publicidad, que es donde entran en juego las maquetas de Placeit. ¡Son fáciles de usar, producen excelentes imágenes de su producto y son muy asequibles! No importa lo que esté promocionando, una aplicación para iPhone, una aplicación para iPad o un nuevo sitio web, Placeit tiene las últimas maquetas de dispositivos que lo tienen cubierto.
Si disfrutó de esta publicación, pruebe esta lista de 10 herramientas de optimización de la tienda de aplicaciones o eche un vistazo a los 7 consejos para promocionar su aplicación.