Herramientas para wireframes o mockups de sitios web y apps

Herramientas para wireframe de sitios web y apps

18 septiembre, 2015

El proceso creativo de una página web o app, en ocasiones requiere una visualización previa vía wireframe, sobre todo cuando el cliente o el diseñador aún no tienen bien definido cómo estructurar el producto final. Es por esto que los wireframes o mockups ayudan a aterrizar el proyecto y llevarlo a buen término. En este artículo describiremos algunas de las herramientas gratuitas más empleadas.

Pencil

Este programa de código abierto, se encuentra disponible para plataformas Linux, Windows y Mac, además de contar con un plug-in para Mozilla Firefox, ofrece gran cantidad de plantillas para desarrollar mockups de sitios web, elementos de navegación, elementos de apps para teléfonos y tabletas. De manera muy fácil con drag and drop se puede generar una visualización del producto, facilitando el trabajo de diseño.

Descarga del sitio oficial: http://pencil.evolus.vn/

Iphone Mockup

Si lo tuyo sólo es el desarrollo de apps para el sistema iOS, esta herramienta web puede ser de gran utilidad, ya que permite crear mockups de apps para iphone de manera fácil, si deseas probar el mockup con algunas imágenes, la herramienta lo permite sólo en formato png y la url que compartes con tu mockup puede ser editado por cualquier usuario que la tenga, facilitando el trabajo colaborativo. Al inicio de la página puedes escoger el estilo de tu mockup, como ilustración o como boceto.

Visita el sitio web: http://iphonemockup.lkmc.ch/

Wireframe CC

Para poder bocetar la estructura de un sitio web, este sitio te permite hacerlo de manera rápida y fácil, con sólo algunas herramientas puedes tener el mock up que termine de aterrizar tu proyecto. Por defecto presenta una plantilla para bocetar un sitio web de escritorio, pero puede ajustarse a tableta, teléfono o teléfono en modo horizontal. Puedes insertar textos, cuadros de información o simulación de imágenes para delimitar espacios dentro de tu wireframe. Las anotaciones y el conservar el link de tu mockup por unos días son de los beneficios que ofrece este sitio. Si quieres exportarlo en formato pdf o png es necesario comprar la versión Premium, pero con la versión gratuita puedes disponer de tu mockup en línea.

Visita el sitio web: http://wireframe.cc/

Prototyper Free

Esta herramienta en su versión gratuita permite crear mockups y wireframes de sitios web, apps para Android y iOS. Cuenta con gran cantidad de funciones, botones y barras para realizar tu mockup de manera realista y simulando pasos de navegación. La versión gratuita se encuentra limitada en algunas funciones, pero lo que ofrece es suficiente para crear un buen prototipo y avanzar en tus proyectos.

Descarga del sitio oficial: http://www.justinmind.com/free

Estas herramientas facilitarán tu trabajo y te ayudarán a visualizar de manera clara tus proyectos de desarrollo de apps y sitios web y te ahorrarán tiempo al momento de realizar tus bocetos.



Contacto