Hoy he aprendido algo nuevo, se trata de los Wireframes, que en diseño web también se les conoce cómo Prototipos de Baja fidelidad, StoryBoard, Schematics, Blueprints o Page Architecture y son un conjunto de dibujos que representan cómo estarán organizados los elementos en las páginas, sin elementos gráficos, de tal manera que implementan aspectos generales del sistema sin entrar en detalle, estos se deben realizar antes de empezar a programar y de crear el diseño visual de la página.
Los Wireframes sirven como herramienta de comunicación y discusión entre arquitectos de información, programadores, diseñadores y clientes. También se pueden utilizar para pruebas de usuarios. Un ejemplo de un Wireframe lo tenemos en el rediseño de terra.org (un portal de ecología):
Las ventajas de usar Wireframes son por un lado el equipo y el cliente se centra en el diseño de contenidos y no en el diseño visual, y por otro lado, definiendo la organización y estructura en etapas previas al diseño y programación se evitan cambios posteriores más costosos, reduciendo así costos y tiempos.
La información que deben contener los wireframes, como dicen en Strange Systems, es:
- 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.
Hablar de los Wireframes es algo muy extenso por lo que te recomiendo leer el post que escribió Nelson Rodríguez-Peña llamado Wireframes.
Realmente es muy útil hacer prototipado antes de nada. Tener una imagen delante de lo que vas a hacer puede ayudarte a redefinar o ajustar tu idea y plantearte cómo puede escalar.
Yo me estoy leyendo este libro sobre el tema que no esta nada mal http://tinyurl.com/59a45y
Un saludo!
@Asier Marqués: gracias por la recomendación del libro
Hola Carlos:
Hacia un tiempo que no pasaba por tu sitio, interesante articulo de los wireframes.
Nunca esta de mas volver a recordarlos… me gusto tambien la entrada del diseño de columnas en CSS que esta en: https://techtastico.com/post/layout-perfecto/
Existe software hecho para crear wireframes, como el MS Visio, DIA, y en la red tambien hay online. Aunque sinceramente prefiero usar un lapiz y papel para ello.
Mis saludos desde Vallenar Chile :)
Daniel C
@Daniel C: lapiz y papel se me hace muy artesanal, pero cuando uno tiene poco tiempo y necesita más precisión creo que es mejor hacer con algún software de dibujo, además de que no soy muy bueno dibujando a mano.
Creo que los wireframes son una herramienta fundamental al momento de diseñar un sitio.
Me ha permitido ahorrar tiempo y agilizar la forma de mostrar la estructura de contenidos ante el cliente.
Es importante entender que el wireframe no debería llevar colores ni tampoco algún elemento gráfico. Sino por el contrario debería estar planteado de la manera más simple posible (en escala de grises, formas esquemáticas, misma tipografía, etc)
Luego cada wireframe servirá como base para el diseño de los mockups.
Les dejo un poco más de información aquí: http://www.glidea.com/blog/que-es-un-wireframe
Muy interesante este post, ya que considero a los wireframes fundamentales en el proceso de desarrollo web.
Es importante que los diseñadores puedan conocer este concepto para poder implementarlo en sus proyectos.
Recuerdo que ni bien empecé a desarrollar sitios web, no sabía lo que era un wireframe y por ende comenzaba cada sitio por la etapa de mockups. A nivel intuitivo me daba cuenta que tal vez no era la mejor opción para arrancar, pero no sabía qué otra cosa se podía hacer…
Aprovecho para compartir un artículo que escribimos sobre este mismo tema y que podría ser complementario a este post…
http://www.glidea.com.ar/blog/que-es-un-wireframe