Wireframe vs Mockup vs Prototype

Veo que todavía hay quienes confunden estos términos, incluso en el ámbito profesional. Aunque en un principio pueden parecer lo mismo, cada uno tiene unas características y una funcionalidad diferente.

Wireframes

Son ilustraciones o representaciones esquemáticas de la estructura de un objeto o de una web. Aquí no hay diseño, ni texturas ni contenido gráfico. Son el punto de partida en un proceso de diseño. En un objeto 3D, la malla o estructura alámbrica que lo representa, sería el wireframe.

Wireframe @ignition

Wireframe @Dsigna2

Mockups

Son bocetos que se ajustan al resultado final, centrando su interés en los detalles. Aquí si hay diseño y todos los elementos gráficos necesarios. Suelen ser ficheros de imagen (screenshoot).

mockup

Mockup @Dsigna2

Prototypes

Son composiciones con una funcionalidad, que pueden o no contener el resultado final. En el caso de la web, no se representa con una imagen como el mockup, sino un modelo de web operativa donde el cliente ya puede interactuar haciéndose una idea bastante aproximada del resultado final.

Los Wireframes y Mockups se pueden realizar a mano, con aplicaciones tipo Inkscape, GIMP, Mockingbird, Iplotz… o con cualquier herramienta gráfica (Fireworks, Photoshop, Indesign, etc).

Por cierto, ¿dónde metemos al Storyboard?