Crear un sitio web requiere de un proceso de diseño donde cada fase debe realizarse con mucha atención y cuidado. Luego de la entrevista con el cliente y la fase de investigación puedes empezar con los bocetos del layout, los wireframes del sitio web que te permitirán tener una idea de la estructura y organización de cada página.
Ya que es una de las fases iniciales suele pasar desapercibida, pero esta etapa es esencial para que la siguiente se complete de manera exitosa. Al apresurar el proceso es más sencillo que cometas errores que tal vez sólo ser harán visibles en las siguientes etapas y finalmente, terminas invirtiendo más tiempo del estimado en el proyecto. Para evitar una situación como la descrita, te mencionamos los errores más comunes que se cometen al empezar con la fase de wireframing.
No realizar wireframes en papel antes de pasarlos a digital
Usualmente, los wireframes se realizan primero en papel para tener una idea más clara del diseño. Ya que se tratan de bocetos rápidos es mucho más sencillo corregirlos y realizar diferentes propuestas de layout en una menor franja de tiempo. Como cualquier otro boceto, pasará por diversas fases y correcciones hasta que se selecciona una versión. Una vez que se elige un layout, este boceto en papel se pasa a digital. Es decir, se emplean herramientas digitales para realizar una versión mejorada del boceto. En este boceto en digital se consideran los espacios en blanco con mayor precisión pues ya se tienen las medidas exactas.
No es recomendable saltarse uno de estos pasos. Tanto el wireframe en papel como el digital son necesarios en el proceso de diseño. Tal vez quieras pasar directamente a la versión digital tras un boceto improvisado para ahorrar tiempo, pero esto traerá como consecuencias mayores problemas al trabajar en la versión digital. Esto significa que deberás realizar nuevos bocetos en papel y finalmente implica mayor tiempo que inviertes en sólo los wireframes.
No considerar la estructura del sitio web
Como ya mencionamos, es importante tener los wireframes en papel para luego pasarlos a digital. Y no solo un boceto, sino varias propuestas y mejoras hasta llegar al layout ideal para el tipo de sitio. Sin embargo, si no se tiene primero la estructura del sitio definida, entonces no podrás realizar correctamente los wireframes. Antes de comenzar a ver referencias y hacer bocetos del layout, es esencial que la estructura del sitio esté definida. Este es un proceso que también puede realizarse en un papel, simplemente dibujando un mapa mental o conceptual para que sepas exactamente qué página dirige a otra. También puedes hacerla mediante una lista ordenada por números. De esta manera, 2.1 ó 2.2 pueden indicar páginas que se desprenden del número 2.
Una vez que tengas la estructura, deberás asegurarte de realizar wireframes en papel para todas las páginas que contenga el sitio. Una vez que tengas definido el layout de la página inicial, será más sencillo realizar bocetos de las demás páginas.
Olvidar el principal propósito de los wireframes
Recuerda que el wireframe es la primera representación visual de un sitio, como tal contiene los elementos esenciales que permiten a otras personas entender sobre la estructura del sitio y la distribución de los elementos. Para que los usuarios entiendan, debe simplificarse el boceto, por esta razón se emplean formas básica y símbolos sencillos para representar iconos, texto e imágenes.
Un wireframe no sólo va dirigido a otros compañeros que trabajan contigo en el proyecto, sino que también sirve para comunicar ideas a tu cliente. Tendrás que estar en contacto constante con tu cliente y deberá aprobar los primeros bocetos antes de que puedas continuar. Por lo tanto, el boceto debe ser sencillo y obviar detalles como elementos gráficos para evitar confusiones. Si cualquier persona puede entender tu wireframe, entonces es indudable que has realizado un buen trabajo.
Incluir detalles en las primeras versiones
Una vez que ya se ha aprobado el boceto de wireframe puedes pasarlo a digital. Es un proceso que debes realizar con mucho cuidado pues en este punto ya comenzarás a definir medidas y, como ya debes saber, tener las medidas exactas es esencial para poder crear un sitio que se vea bien en ordenadores y móviles.
Como ya hemos mencionado, en los wireframes se deben obviar algunos detalles. Es bastante obvio que pasar de la versión en papel a la digital implica ciertas mejoras a nivel gráfico, pero aún así se sigue tratando de un wireframe y por lo tanto deben eliminar los detalles como colores e imágenes. El wireframe digital será realizado en blanco y negro pues su función principal es servir como una plantilla o base en la cual se desarrollará el mockup. El objetivo es transmitir a otras personas cómo se está distribuyendo el contenido del sitio, cómo se están ubicando ciertos elementos. No tiene sentido incluir elementos gráficos en esta fase.
En conclusión…
Los wireframes, al ser la primera representación visual de un sitio, deben mantener su simpleza, por sobre todas las cosas. Como diseñador web, tal vez te cueste un poco olvidarte de los detalles gráficos, pero es necesario dejarlos de lado en esta fase del proceso. Asimismo, tal vez te encuentres ansioso de pasar a la fase de mockups, la selección de colores, tipografías e imágenes, pero es importante no saltarse pasos, de lo contrario encontrarás errores en fases posteriores y finalmente te tomará más tiempo finalizar el proyecto.
Si trabajas con paciencia, escuchas las sugerencias de tu cliente, tienes en cuenta la estructura del sitio, así como el tipo de web que estás diseñando y el volumen de contenido, no tendrás problemas al crear wireframes para tus proyectos.