Con la evolución del diseño web cada vez es más importante presentar un buen esquema antes de ponerse realmente a diseñar y desarrollar un sitio. Los wireframes funcionan como “boceto”, como “guía” y como herramienta de optimización y reutilización de elementos comunes, por lo que resulta muy útil acostumbrarse a usarlos incluso en proyectos de pequeño tamaño.
Los wireframes de diseño básicamente nos permite definir estructuras comunes para distintos tipos de página, módulos que podremos reutilizar y es algo prácticamente imprescindible si se trata de utilizar CMS y de presentar un sitio ordenado.
Ventajas de utilizar wireframes en diseño web
- Funcionan como base de los diseños y se acelerán. 5 o 6 estructuras básicas son más que suficientes generalmente para cualquier proyecto de gran tamaño: una portada, una salida ampliada, listados y salidas sin columnas. A partir de ellas se piensa “en módulos” que se van distribuyendo y que vamos “pintando” según el tipo de página web. Éstas estructuras pueden además reutilizarse para todos los sitios o portales que vayamos haciendo, ajustándolos en cada caso.
- Permite calcular y distribuir correctamente los distintos elementos de una página.
- Permite presupuestar proyectos más fácilmente al tener una visión más práctica de las horas aproximadas que supondrá.
- Evita que se “olviden” cosas que después habrá que añadir. Los cambios consumen mucho tiempo, una buena definición y planificación desde el principio hace que las cosas salgan mucho más rapidamente.
- El esquema, aunque no tenga diseño final, permite hacerse una idea bastante aproximada de lo que será la página y en el caso de clientes finales permite presentar un prototipo sobre el que realizar cualquier modificación antes de pasar al diseño y desarrollo en sí.
- Permite presentar presupuestos ahorrando en explicaciones. Somos animales visuales y muchas veces un simple recuadro con un par de enlaces ayuda a comprender hasta al más análogico qué se pretende desarrollar sin aburrirle con explicaciones que a menudo no son fáciles de comprender sin algún gráfico.
- Permiten desarrollar el flujo de funcionamiento y evitar el “ahora qué” una vez se ha empezado.
- Ahorran tiempo para la reutilización de estructuras, elementos que generalmente se insertan, etc
El proceso ideal a la hora de crear un proyecto web
Casi nunca sucede, pero el proceso más rápido y rentable a la hora de desarrollar un proyecto web se beneficia del uso de este tipo de esquemas. Sería básicamente:
- Una buena planificación de lo que se desea.
- Boceto y presentación de lo que podría ser la web.
- Modificaciones y añadidos sobre este boceto.
- Todo queda cerrado. No habrá cambios grandes. Muchos clientes esperan a que presentes “algo ya hecho” para marearte con decenas de cambios que a menudo no son tan triviales como cabría pensar y que además van llenando el código de parches. Cuanto más cerrado quede todo, mucho mejor.
- Diseño sobre las estructuras aprobadas hasta conseguir el look&feel adecuado. Se presentan una serie de imágenes imitando la web hasta conseguir más o menos lo que se busca. Yo prefiero hacer modificaciones sobre una “base” pintada que ya esté clara y después ir modificando estilos sobre ella para ver cómo quedan distintos tipos de fondo, tipografías, tamaños, colores, etc. Es más rápido y con extensiones como Firebug, developer o DragonFly acelera mucho el proceso de “ir eligiendo” lo más adecuado. (extensiones para webmasters)
- Una vez tenemos nuestro diseño claro empezamos la construcción de la web: el desarrollo del front (XHTML, CSS, Ajax) y de las partes dinámicas (php, MySQL, etc). En esta fase es cada vez más habitual construir todo partiendo de algún sistema tipo WordPress o cms como Joomla, Drupal o Expression Engine (el mejor de cara al diseño aunque no es gratis ni demasiado sencillo). Aún así, tener todo claro desde el principio (wireframe es clave como hemos visto) hará el viaje mucho más divertido.
- Tras unos cuantos quebraderos de cabeza, muchas pruebas, y generalmente de muchísimo más talento, conocimientos y tiempo del que los aficionados piensan, tendremos nuestra web lista para ser visitada por cualquiera y compartir conocimientos, ganar dinero o mejorar nuestra imagen de marca.
- Con el paso del tiempo verás que lo que parecía perfecto de repente parece anticuado, que hubieras cambiado ésto y aquello… Pero con un buen esquema desde el principio y como casi todo en la vida, cualquier modificación será más sencillo sobre una base y unos cimientos bien construidos.
Programas para crear Wireframes y prototipados
Es habitual usar Fireworks o algún otro programa de diseño para crear las estructuras iniciales, no hay problema aparentemente; pero si realmente quieres generarlas rápidamente (puesto que de un boceto se trata) o compartirlas con un equipo es preferible a menudo usar otras herramientas.
Un ejemplo de herramienta de prototipado basado en web que a mí me gusta sería Mockingbird
Otro, pensado para equipos, es Cacoo
Existen herramientas similares también web, algo más complejas (y de previo pago), como MockFlow o Mockups, también se puede usar alguna aplicación especialmente para mac OSX como OmniGraffle.
Si preferís algo gratis, la mejor en mi opinión es Pencil. Funciona como aplicación de escritorio o (mac) como una extensión de Firefox.
Abres o ejecutas la descarga con Firefox para instalarla y desde Herramientas del navegador la podrás activar. Permite crear esquemas muy variados y muy rápidamente, es sin duda un buen comienzo para empezar a hacer las cosas un poco más organizadas. Una vez tengas los esquemas, es hora de pulirlos con Photoshop, Fireworks, Pixelmator, Coda, Textwrangler y tu propio trabajo y creatividad.
Muy buen post, interesantes herramientas para hacer prototipos, muy buen aporte.
La probare para ver que tal resulta.
Muchas Gracias, espero el segundo capitulo.