Diseño Web: Wireframes

      En diseño web, un wireframe (en español se puede traducir por esquema de la página o plano de la pantalla, aunque no se suelen usar estos términos), es un dibujo o esquema que representa el esqueleto o estructura visual de un sitio web (un conjunto de páginas web) o de una página web concreta. El wireframe suele carecer de aspectos visuales como estilo tipográfico, colores e imágenes, ya que su propósito es servir de apoyo para discutir el contenido, funcionalidad y comportamiento de un sitio web o de una página web.

     En el siguiente vídeo se explican las diferencias que existen entre los wireframes, los mockups y los prototipos, se explica la importancia de prototipar una aplicación o sitio web antes de implementarla y se muestran los diferentes tipos de diagramas que se emplean para representar la navegación, la estructura y el funcionamiento de una aplicación o sitio web.

Introducción al Desarrollo Web: HTML y CSS Parte I Herramientas de prototipado

Antes de crear la primera página web de un sitio web deberías tener claro a dónde quieres llegar, lo que quieres construir. El primer paso es que desarrolles los prototipos de tu sitio web y de tus páginas web.

Los prototipos los puedes hacer a mano, con lápiz y papel. O también puedes usar un programa específico para crear prototipos.

Existen multitud de herramientas en la Web que puedes emplear para crear todo tipo de diagramas, incluidos los diferentes tipos de prototipos que se te han explicado (wireframes, mockups).

Algunas son gratuitas, como Pencil Project:

http://pencil.evolus.vn/

Otras son de pago, como Balsamiq:

http://balsamiq.com/

o Gliffy:

http://www.gliffy.com/

Pero los programas de pago suelen ofrecer una versión demostrativa o de prueba con algunas limitaciones como el número de proyectos que se pueden crear.

En esta actividad debes evaluar el funcionamiento de varias herramientas de dibujado de prototipos y debes seleccionar la que creas que ofrece las mejores características. Publica en el foro los resultados de tu investigación, indica cuál es la mejor herramienta de dibujado según tu opinión.