Aprendiendo programación Web: Módulo 2: Cómo se escribe una página web (II) - Prototipado: wireframes, mockups y prototipos

En el vídeo El desarrollo web se han mostrado las principales fases del desarrollo de un sitio web. En la segunda fase, "Planificación", aparecían los hitos "Wireframes" y "Revisión 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.

La diagramación en la arquitectura de información

Documenting the design of a web application -Part one: Using Garrett’s Visual Vocabulary to document the Information Architecture

Interaction design

Los Elementos de la Experiencia de Usuario

Yahoo! Mail: Simplicity Holds Up Over Time

Information Architecture for the World Wide Web

Designing and Coding a WordPress Theme From Scratch (Part 2)

A design process revealed

Wireframes for the Wicked

Hay muchas herramientas gratuitas para la creación de prototipos, como Pencil Project:

En el siguiente vídeo se explica la evolución de los prototipos de baja a alta fidelidad, se muestran los principales atributos estéticos de los elementos de una página web (colores, áreas, cajas de contenido, imágenes, tipografías, menús y enlaces, iconos y elementos decorativos), se comentan algunos aspectos sobre el software de diseño visual (trabajar en capas, medir, editar imágenes), se ofrecen cinco consejos antes de empezar a diseñar (busca inspiración, paleta básica de colores, busca recursos gráficos, define las tipografías, recopila el material necesario), y cinco consejos para empezar a diseñar (trabaja en capas, de general a particular, no abuses de ciertos elementos, optimiza el tiempo, organización).