Ventajas de los wireframes para diseño web
Esta es la primera de una serie de entradas que servirán como iniciación al diseño web. En ella hablaremos de las ventajas de los wireframes el primer paso a la hora de conceptualizar un diseño web.
Entre las muchas ventajas que nos proporciona, nos ayudará a organizar el contenido, a marcar una ruta de trabajo y a consensuar la estructura final de la web con nuestro equipo y con el cliente.
De lo analógico a lo digital
En los últimos años se ha vivido un cambio gradual pero drástico en los métodos de difusión de la publicidad y el marketing. Casi sin darnos cuenta hemos pasado de los tradicionales métodos analógicos a los medios digitales. Los porcentajes de material derivado a imprenta se han diezmado en proporciones inversas a la propagación de sitios web, apps y plataformas digitales.
Esta evolución hacia el mundo digital ha obligado a un buen número de profesionales del diseño a reciclarse laboralmente para no quedar atrás. Sin embargo, los diseñadores y directores de arte tenemos, en general, cierta tendencia al aprendizaje autodidacta. Si bien esto es en general positivo, un cambio de dirección profesional de esta envergadura puede conllevar que lastremos viejas costumbres que no funcionan tan bien en pantalla como funcionaban en el papel. Si bien hay otras que simplemente necesitan un pequeño reajuste de nuestro modus operandi. En esta entrada trataremos una de esas partes del proceso de metodología que vienen heredadas del diseño off: los wireframes y sus ventajas para el diseño web.
La importancia del UX
El primer obstáculo al que se enfrenta el diseñador web cuando inicia un proyecto consiste en estructurar la información. Es un proceso complejo, pues hay que asimilar todo el contenido de la web, jerarquizarlo y distribuirlo de tal manera que sea fácilmente asimilable por el público final. Aquí entra en juego un término crucial en el diseño digital: el UX (User Experience) o Experiencia de Usuario. En los últimos años el UX ha tomado un peso preponderante entre los diseñadores digitales, y abarca todas las partes del proceso. Y se inicia aquí, en la parte de bocetado. Pues una de las ventajas de los wireframes para el diseño web es que nos permiten testear, a grandes rasgos, la usabilidad de un sitio web.
Empezar a bocetar
Una vez que tenemos el contenido de la web estructurado, podemos empezar a dibujar. Aquí es donde empieza el proceso de wireframing. Un wireframe es básicamente el esqueleto del diseño de una web. Podemos hacerlos directamente a mano, o en el ordenador, mediante Photoshop, Illustrator o con herramientas online especialmente diseñadas para este fin. Se caracteriza por la ausencia de fotografías reales y de colores, la tipografía tampoco es relevante. Es indispensable que la estructura sea la finalidad de este proceso, y por ello es importante la total ausencia de elementos estéticos superfluos que puedan distraer la atención.
En este boceto inicial haremos varias pruebas de distribución del contenido simplemente dibujando cuadrados o círculos para representar imágenes y botones, y barras horizontales paralelas para representar cajas de texto.
La principal ventaja de los wireframes para el diseño web es que podemos visualizar diferentes caminos para estructurar la web de un modo rápido y sencillo, para empezar a trabajar el archivo definitivo a partir de una base sólida y funcional.
Recuerda que en un wireframe han de aparecer los mismos elementos que aparecerán en la web definitiva: desde el contenido, tanto imágenes como texto, elementos de navegación tales como botones, menús y submenús, links…, elementos interactivos y elementos puramente estéticos o promocionales, como los banners publicitarios.
Ventajas del wireframing
A veces el wireframing puede parecer innecesario, pues creemos que tenemos la “idea final” del proyecto en nuestra cabeza, y sólo necesitamos trasladarla al ordenador.
Sin embargo, si incorporas este proceso a tu método de trabajo, te darás cuenta de las múltiples ventajas de los wireframes para el diseño web: agilizarás los procesos y optimizarás tus tiempos, generarás un repertorio gráfico al que podrás recurrir ante nuevos encargos, tendrás una idea clara del rumbo que ha de seguir el proyecto, y unificarás los criterios sobre estructura y contenido con el resto de tu equipo y, más importante aún, con el cliente.
Así te asegurarás de que los posibles cambios queden limitados a cuestiones estéticas, lo cual agilizará enormemente el desarrollo del trabajo.
Para finalizar, si quieres empezar a practicar la ejecución del wireframes, existen en internet varias herramientas gratuitas para ayudarte a diseñarlos, a continuación te dejamos unos liks a algunas de las más importantes:
www.axure.com
www.mockflow.com
www.gliffy.com
Sin embargo nuestra recomendación, sobre todo si el mundo del diseño online es nuevo para ti, es que uses papel y lápiz: es rápido, sencillo, y te proporcionará una libertad y versatilidad que a veces se ven limitadas por el uso del ordenador.