Los wireframe son una herramienta ampliamente utilizada en el diseño web pues permite representar de forma visual la organización de todas las páginas, así como cada una de estas se relaciona la una con la otra. Estos wireframe son sencillas y para su desarrollo se obvian todos los detalles como colores, fuentes e imágenes pues su principal función en comunicar y representar el layout en las primeras fases del proyecto. En este tipo de producto es más sencillo realizar cambios mayores y utilizarlo para intercambiar ideas con el equipo y con tus clientes.
Aunque sea una de las primeras fases de todo proceso de diseño web, debe ser realizada con mucho cuidado. Si esta etapa es realizada de forma efectiva, puedes ahorrar tiempo en las fases posteriores del proceso. De lo contrario, si no le tomas la atención adecuada, puede que llegar a la fecha de entrega sea difícil.
En este artículo te mencionamos algunos errores que debes evitar a toda costa en tus wireframes pues podrían comprometer el diseño en fases posteriores.
No diferenciar entre los diferentes tipos de wireframe
Entre los wireframes se pueden distinguir los de baja y alta calidad. Y aunque el término “baja calidad” no suene llamativo y puedas preferir empezar el proyecto con un wireframe de “alta calidad”, el primer tipo de wireframe también es de gran utilidad.
Los wireframe de baja calidad hacen referencia a los primeros bocetos que se desarrollan teniendo en cuenta la estructura del sitio. Como su nombre indica, son realizados con herramientas sencillas como lápiz y papel y sirven para definir de forma general el layout, la navegación y los elementos que se colocarán en la interfaz.
Por otro lado, los wireframe de alta calidad puede ser considerados como una versión superior de los primeros y de hecho es común que en fases posteriores del proceso se traslade la estructura establecida en los wireframe de baja calidad a estas nuevas versiones. Este tipo de wireframes son digitales y se toman en cuenta medidas exactas, jerarquía visual de los elementos y en cierta medida los elementos interactivos de la página también se ven representados en este wireframe. Es una aproximación más cercana a la organización final de la interfaz.
Complicar el diseño al añadir demasiados elementos
Recuerda que el wireframe es solo la primera representación de un sitio web y sirve para visualizar la organización de los elementos en la interfaz. No se tienen una idea exacta del aspecto de ciertos elementos como hero images, imágenes, botones, entre otros. No se emplean colores pues se trata de un representación sencilla.
Olvídate de los detalles de la interfaz, aún no se llega a la fase donde se toman decisiones al respecto. Debes asegurarte primero que la estructura de la interfaz sea la adecuada y aunque el wireframe puede ser una representación sencilla del sitio web, debe ser aprobada por el cliente antes de pasar a la siguiente fase o podrían haber malentendidos más adelante. Facilita a tus clientes la comprensión del wireframe utilizando desde el inicio un diseño sencillo. Si el cliente nunca ha visto un wireframe o sabe para que se utiliza debes explicarle brevemente lo que es y describir el boceto inicial que has desarrollado.
Dar preferencia al estilo y no a la funcionalidad de los wireframe
Añadir elementos como logos, imágenes, colores o una tipografía específica en los wireframes digitales pueden obstaculizar el proceso. Después de todo, los wireframes son solo una representación inicial del sitio y su organización. Aún no se deciden detalles como el color o la tipografía y de hecho, añadirlos puede ser confuso para tus clientes pues notarán más estos detalles que la propia organización de la interfaz. Cuando menos lo esperes, los clientes comenzarán a realizar acotaciones sobre la tipografía o el uso de colores. No importa que estos comentarios sean positivos o negativos, ya que el cliente se ha distraído no podrá dar una opinión sincera sobre la organización e incluso es posible que le reste importancia.
Evita situaciones como la descrita previamente al hacer que los wireframes sean solo una representación de la interfaz, sin tener en cuenta los elementos que se añaden en partes más avanzadas del proceso.
No realizar wireframes para todas las páginas del sitio
Cuando estés haciendo el boceto del primer wireframe tal vez pienses que el layout se mantiene en las otras páginas, así que para que agotarte con ello. O consideres que la página de contacto no es tan importante, así que la pasarás por alto y no harás el wireframe de esta página. Sin embargo, cada página que forma parte del sitio es imprescindible, en particular si ya has establecido mediante un diagrama la estructura del sitio. No pases por alto ninguna de las páginas y realiza bocetos para cada una de ellas. De esta manera, el cliente tiene la oportunidad de aprobar cada una de las páginas del sitio y se pueden evitar retrasos más adelante.
No obtener la aprobación del cliente
Como ya mencionamos previamente, en toda fase importante del proceso de diseño de un sitio web es importante contar con la aprobación del cliente. Los wireframes son sólo el inicio del proceso, pero son una pieza que determina la organización de futuros entregables, así que si no es aprobado por el cliente no se debería pasar a la siguiente fase. Es mucho más sencillo realizar cambios mayores en esta etapa del proceso, así que asegúrate de obtener la aprobación del cliente.
Es importante también que siempre sea una misma persona la que esté a cargo del proyecto. En algunos casos es el dueño de la empresa, pero en otros casos puede que sea un gerente. Siempre envía los wireframes y otros entregables a la persona que se ha establecido como la encargada por parte del mismo cliente.
En conclusión…
Los wireframes son una herramienta esencial en todo proyecto de diseño web y se debe dedicar el tiempo apropiado a su desarrollo pues otras etapas del proceso dependen de estos primeros wireframes. Utiliza como guía el diagrama en donde se especifica la estructura del sitio para asegurarte que estás haciendo bocetos para cada una de las páginas web que contendrá el sitio.
Esperamos que puedas evitar estos errores en tus próximos proyectos para crear wireframes que realmente cumplan su propósito, que tengan una función y que el cliente pueda aprobar rápidamente para que puedas avanzar sin problemas a las siguientes etapas del proceso.
