¿Sabes qué es un Wireframe? En diseño web es un esquema o borrador de la página que se ha de realizar esta sin incluir diseños, ni demás aplicaciones, en resumen, sin entrar en detalles. Como ya he dicho es un simple borrador hecho incluso a papel y lápiz en una hoja, en una servilleta en una Moleskine, etc… con la finalidad de hacer más intuitiva la web a desarrollar y facilitar el trabajo a la hora del diseño y programación ya que la página a realizar sería tomada del bosquejo, borrador, prototipos de baja fidelidad, StoryBoard, Schematics, Blueprints, PageArchitecture, o mejor llamado en la jerga de internet Wireframe para Diseño Web.
Los Wireframes sirven como herramienta de comunicación y discusión entre arquitectos de información, programadores, diseñadores y clientes.
Una de las ventajas de utilizar Wireframes es que estos se centran más en el diseño de contenido y no el diseño visual. Por otra parte, definiendo la organización y estructura en etapas previas al diseño y programación de la web, se evitan hacer muchos cambios al resultado final, reduciendo así costos y tiempos.
Según el blog Techtastico lo que debe contener un Wireframe es lo siguiente:
- Inventario de contenido.
- Elementos cómo: cabeceras, enlaces, listas, imágenes, formularios, etc.
- Vínculos, títulos, etc.
- Layout.
- Notas que nos indiquen el comportamiento de algunos elementos.
Les comparto la siguiente recopilación de Wireframes para Diseño Web vistos en Almacenplantillasweb.
NationWide / NASCAR

5 Years of Firefox

Links

GEOINT2009 (Microsite)

Coastal Capital Partners

New Local

Vimeo Profile Page Idea

Vimeo Clip Page Top Nav

Layout for BPgraphics

Cartoonity.com UI Sketch

CommLogix Wireframe

Early Ember Sketches

Wirethumbs

More Ember Sketches

iPad App Sketch

Web Layout Sketches

Librespeak interface sketch

Original Twitter Concept
