Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

?id=67a1c711-06d6-4da7-8d79-97a409232618

14 Herramientas de prototipado de aplicaciones Web

Draft-Notes-WebSite

Algo muy habitual en los equipos de desarrollo Web es dibujar maquetas de las pantallas de las aplicaciones y sus elementos, de forma que podamos transmitir mejor la idea de lo que queremos a los programadores que lo van a implementar. Esto es válido también para los clientes, que a veces no se hacen una idea de lo que les estamos contando si no lo ven dibujado.

Este tipo de croquis o prototipos pintados a mano de las Webs (llamados generalmente wireframes) son muy útiles, pero hacerlos realmente a mano es problemático porque no suelen quedar muy bien y luego muchas veces ni siquiera se hacen. Una herramienta especializada viene de maravilla para hacerlo mejor, más rápido y que quede de manera presentable.

A continuación proponemos una lista de productos, por orden alfabético, tanto gratuitos como comerciales, que sirven para hacer este tipo de prototipos y que te resultarán muy útiles:

  • Axure RP: es una herramienta de prototipado profesional que permite crear wireframes para hacer el pre-diseño de una página web. Disponible tanto para plataforma Windows como Mac. Puedes dibujar tanto wireframes estáticos como interactivos que simulan una experiencia de navegación del usuario real. Tiene una función de colaboración para compartir las maquetas Web con otras personas y poder recibir feedback en tiempo real. Es comercial, con precios a partir de $29 al mes. Es gratuito para estudiantes.
  • Balsamiq: con ella puedes hacer prototipos interactivos de webs. Puedes usar esta herramienta como un servicio en el navegador o bien descargarla en tu equipo (funciona con Windows, Mac y Linux). También posee la función de colaboración. Su cuenta gratuita te permite crear un número ilimitado de wireframes que duran 7 días. La versión de pago "Cloud" cuesta a partir de $9/mes para dos proyectos. La edición para usar desde Google Drive cuesta $5/mes. Puedes comprar la versión de escritorio sin límite de uso por un único pago de $89.
  • FlairBuilder: herramienta de escritorio para Mac y Windows que te permite hacer bocetos de tus webs y de tus Apps móviles. No tiene posibilidad de colaborar con otras personas. La versión de prueba dura 15 días, tras los cuales no te dejará grabar, aunque sí abrir lo que hayas grabado antes. No son muy transparentes con el precio (en la web no aparece) pero todos los indicios indican que cuesta $99 en una sola vez. Tienen descuentos del 50% para estudiantes.
  • gliffy: basada en un servicio web, permite dibujar bocetos de tu página web y crear wireframes tanto estáticos como dinámicos. También puedes colaborar con otras personas y recibir su opinión en tiempo real. Se integra con Jira y Confluence. El precio parte de $7.99/mes.
  • iPlotz: esta herramienta permite hacer maquetas navegables de sitios web y de aplicaciones. Lo puedes descargar en tu ordenador (Windows/ Mac) o bien puedes usar el servicio vía web. Tiene una cuenta gratuita con la que puedes hacer 1 prototipo con 5 páginas navegables. La versión de pago empieza en $15/mes.
  • Jumpchart: es una aplicación de planificación de webs basadas en el navegador la cual posibilita esbozar el contenido de la página web. Es posible crear wireframes tanto estático como interactivos que simulan la navegación entre las páginas web de la maqueta. La versión gratuita te permite tener un único proyecto de 10 páginas y colaborar con otro usuario. Las de pago comienzan en $5/mes.
  • Justinmind: herramienta profesional para prototipado de sitios web, aplicaciones de software y aplicaciones móviles. Puede trabajar con Windows o con Mac. Es una de las más especializadas y completas junto con Axure RP. Su precio parte de $19/mes o bien existe la posibilidad de pagar una única vez por el programa (a partir de $499).
  • Lucidchart: una de las herramientas más conocidas para diagramación y diseño, frecuentemente comparada por su potencia con Microsoft Visio. Aparte de todas las potentes características que posee para crear todo tipo de diagramas (flujos, para ingeniería,redes...) tiene una parte específica de wireframing y prototipado de apps. Se utiliza totalmente online, en tu navegador, y permite la colaboración con otros usuarios. Tiene una versión gratuita sin límite de tiempo (pero sí con límite de diseños). Su versión comercial parte de 4,95€/mes. Tienen una versión gratuita mejorada para estudiantes y profesores y precios especiales para éstos.
  • MockFlow: herramienta web muy sencilla de utilizar para diseñar sitios web y aplicaciones de software. Permite colaboración y navegar por la página web además de visualizar su estructura. La versión gratuita está limitada a 1 proyecto y 2 revisores, con algunas limitaciones de características. La de pago parte de $14/mes.
  • Mockingbird: se trata de una aplicación web con la que se pueden hacen prototipos de páginas web. Puedes diseñar tu sitio web en el propio navegador aprovechando que dispone de una gran biblioteca de objetos web para personalizar tus páginas. La versión gratuita se vuelve de solo lectura al cabo de 6 días. Parte de $12/mes para 3 proyectos simultáneos y $85/mes para proyectos ilimitados.
  • Pencil project: se trata de una aplicación open-source que nació como complemento para Firefox hace años pero que ahora es una app independiente y muy fácil de instalar y utilizar. Permite crear wireframes de webs y aplicaciones móviles y dispone de algunas bibliotecas de símbolos (difíciles de encontrar a veces) para simular interfaces con Bootstrap, Material Design y otros. No existe la posibilidad de colaboración. Es totalmente gratuita.
  • Visio: esta herramienta pertenece a la suite de Microsoft Office que se puede adquirir de forma independiente de otros componentes de esta suite ofimática. Sólo está disponible para equipos que trabajen con Windows. Puedes crear varios tipos de proyectos visuales como diagramas de flujo, diagramas de Venn, mapas y maquetas de sitios web (estándar y móvil), planos, así como prototipos de aplicaciones de software. Existen muchas bibliotecas de símbolos que puedes descargar. Los planes parten de $5/mes para Visio Online o $15/mes si compras la versión de escritorio, que incluye también Visio Online y almacenamiento en OneDrive.
  • WireframeSketcher: es una aplicación de wireframing que da un aspecto "manual" a los bocetos finales. Su principal ventaja es que se integra a la perfección con el entorno de desarrollo Eclipse. Su precio es de $99 (licencia perpetua).

A continuación encontrarás una tabla resumen de todos ellos, por orden alfabético:

 

Tipo de Software/ Sistema Operativo Biblioteca de Símbolos GUI Wireframes interactivos Colaboración Formatos de exportación
Axure RP Windows, Mac HTML, JPEG, PNG, BMP, GIF
Balsamiq Mockups Servicio web / Windows / Mac / Linux XML, PDF, PNG
FlairBuilder Servicio web NO N/A
Gliffy Servicio web SVG, Gliffy XML, JPG, PNG
iPlotz Servicio web / Windows / Mac PDF, PNG, JPG, HTML
Jumpchart Servicio web NO CSS / XHTML, WordPress
Justinmind Windows, Mac HTML, PNG, JS
Lucidchart Servicio Web SÍ  PDF, PNG, JPG, Visio (.vdx), SVG, CSV
Mockflow Servicio Web HTML5, PDF, PowerPoint,  PNG
Mockingbird Servicio Web PDF, PNG
Pencil Project Complemento de Firefox NO HTML, PDF, PNG, MS Word, OpenOffice.org
Visio Windows SVG, EMF, GIF, JPEG, PNG, TIF, BMP, WMF, XML, PDF, XPS, HTML
WireframeSketcher Windows / Mac / Linux NO NO PDF, PNG

 

Nota: Autor de la imagen de la cabecera Jayel Aheram. Uso de la imagen bajo licencia CC

Fecha de publicación:
campusMVP campusMVP es la mejor forma de aprender a programar online y en español. En nuestros cursos solamente encontrarás contenidos propios de alta calidad (teoría+vídeos+prácticas) creados y tutelados por los principales expertos del sector. Nosotros vamos mucho más allá de una simple colección de vídeos colgados en Internet porque nuestro principal objetivo es que tú aprendas. Ver todos los posts de campusMVP
Archivado en: General | Herramientas

¿Te vas a perder los mejores trucos de programación?

Únete a miles de desarrolladores que ya reciben cada mes nuestro boletí­n por email. No te pierdas los mejores trucos, noticias y frikadas.

Enviamos poco, pero bueno. Palabra de desarrollador.

Suscríbete aquí­

Sí­guenos también en:

Telegram LinkedIn YouTube
La mejor formación online para desarrolladores como tú

Comentarios (13) -

Hola!

Yo recomendaría también https://moqups.com

Es online, gratuita ( algunas limitaciones ) y bastante sencilla de usar.

Un saludo

Responder

José Manuel Alarcón
Spain José Manuel Alarcón

Gracias por la recomendación.

Saludos!

Responder

cassandraochoa
Mexico cassandraochoa

Gracias me hicieron mi tarea

Responder

De nada Cassandra. ¡Nos alegra que te haya servido de ayuda!
Un saludo,
campusMVP

Responder

Gracias (y) buenas recomendaciones.... ;)

Responder

Quien puede ayudarme, darme una idea de comom hacer o que puedo hacer un prototipo

Responder

Carmen Villamizar
Carmen Villamizar

Muy valioso tu artículo. Gracias.  ¿Sabes si alguno o cuáles de ellos tienen versión en español?

Responder

José Manuel Alarcón
José Manuel Alarcón

Hola Carmen:

Ni idea, la verdad. Yo todo el software, desde el sistema operativo a la utilidad más pequeña, lo uso siempre en inglés por diversos motivos, y es algo en lo que no suelo fijarme. Lo siento.

En sucesivas ocasiones, si hago otra lista de este estilo procuraré prestar atención a ese detalle para ponerlo.

En cualquier caso creo que es necesario asumir que, hoy en día por lo menos, si te dedicas profesionalmente a cualquier disciplina que tenga visos técnicos, el inglés es un idioma indispensable para leer documentación y usar software como mínimo y no debería suponer nunca una barrera. Puede gustarnos más o menos, pero en mi opinión, esa es la realidad.

Saludos!

Responder

Que bien lo necesito y conocer las herramientas disponibles gracias.

Responder

Hola Raul encontre este link donde puedes conocer mas las herramientas y en algunas hasta te pone en link para que puedas ponerlas a prueba, espero te sirva saludos. guia.hostul.com/.../las-mejores-herramientas-para-crear-prototipos-wireframes-y-bocetos-mock-ups

Responder

He usado Balsamiq y Justinmind, este último bastante superior. Me guardo el resto de recomendaciones. Gracias!

Responder

Giovani López
Giovani López

Excelente post y buen análisis de las páginas, gracias por tomarte el tiempo de crear el recurso y compartirlo.

Responder

Francisco Rosado
Francisco Rosado

Les recomiendo Pencil pencil.evolus.vn/ que es gratuito, en español y se instala en su equipo. Saludos.

Responder

Agregar comentario

Los datos anteriores se utilizarán exclusivamente para permitirte hacer el comentario y, si lo seleccionas, notificarte de nuevos comentarios en este artículo, pero no se procesarán ni se utilizarán para ningún otro propósito. Lee nuestra política de privacidad.