He visto a mucha gente subestimar el valor de los wireframes de sitios web sin saber qué efectos puede tener en el resultado. Le diré por qué la estructura y el pensamiento de la estructura es lo que hace que un sitio web cumpla con las expectativas y necesidades de su(s) objetivo(s).

¿Qué es el wireframing?

El wireframing consiste en definir un plano o dibujo para el contenido y la funcionalidad de un sitio web de forma abstracta. Para establecer una estructura básica con una comprensión de los objetivos que está tratando de lograr en su sitio web.

El primer paso es definir qué objetivos específicos desea alcanzar, por ejemplo, el reconocimiento de la marca, que más gente compre su producto, o tal vez guiar a los visitantes a su tienda local? Lo que sea, pero cualquiera que sea ese objetivo, el siguiente paso es simplemente dejar de pensar en los colores, o cualquier otro elemento relacionado con el diseño, para poder concentrarse completamente en la estructura del sitio web. Piensa en ello como un plano de una casa, que contiene los componentes necesarios para construir e iterar en las decisiones que tienes contigo mismo - el equipo y el propietario del producto.

El objetivo principal al crear un wireframe es centrarse en la estructura del sitio web solely - and para averiguar si la estructura cumplirá con las expectativas de usted, el propietario del producto y el usuario final. Al hacer eso, es más probable que encuentre el problema real y crítico que el negocio está tratando de resolver.

Un problema bien planteado es un problema medio resuelto. ~Charles Kettering

El wireframe es centrarse en el contenido, y eso da lugar a la creación de ideas. Ayuda al propietario del producto a comprender los desafíos y las características que deben implementarse, lo que le permite inclinarse hacia la construcción de una manera más fundamental.

¿Cuál es el siguiente paso después de la conexión?

Depende del tamaño del proyecto en el que estés trabajando.

Si se trata de un proyecto relativamente pequeño, entonces adelante y empiece a construir el sitio web mientras que al mismo tiempo elige el diseño. La desventaja de este enfoque es que como no has decidido la tipografía, los colores, el diseño de los elementos antes de la fase de desarrollo, podrías tener inconsistencias en el diseño.

Para un proyecto relativamente más grande con más tiempo para invertir. Le recomiendo que termine un diseño completo de cómo debe verse todo en el sitio web. Si quieres llevarlo al siguiente paso, haz un prototipo del mismo, donde puedas navegar entre las páginas para tener una idea de cómo están alineadas las cosas.

¿Y si no tengo tiempo?

La idea del wireframing es facilitarle la comprensión de lo que está construyendo, y si coincidirá con su(s) objetivo(s) final(es). Mediante el wireframing, notarás cambios visibles para repensar en la estructura de la página. Esa será la razón por la que se ahorrará una enorme cantidad de tiempo en una fase posterior de diseño y desarrollo.

Les animo a que dediquen al menos el 5 por ciento del tiempo del proyecto a hacer los fotogramas de todas las páginas, lo que equivale a 2 horas de fotogramas para una asignación de tiempo de proyecto de 40 horas. Cuanto menos tiempo tengas, menos deberías preocuparte por los detalles.

¿Debería ir en formato digital o en papel?

Hay algunas tremendas herramientas de cableado en el mundo digital. Recomiendo Adobe XD y Balsamiq. Ambas tienen una curva de aprendizaje, pero yo prefiero Balsamiq para hacer más rápido el wireframing, y Adobe XD para hacer maquetas y prototipos cliqueables.

La ventaja de usar sólo Adobe XD es que puedes crear fácilmente prototipos animados para tus telas metálicas en la carrera. También me gusta la función de cuadrícula de repetición, en la que puedes crear un elemento de una lista y repetir ese mismo elemento varias veces, y cuando hagas cambios, se aplicará a todos los elementos repetidos. Eso puede ser un ahorro de tiempo para las listas, colecciones y todo lo que se pueda repetir.

Otra opción es usar un papel, he notado que el uso de papel puede aumentar mi enfoque debido a que no tengo que ver todas las opciones disponibles en la pantalla. Tu atención se dirige al papel y sólo a tus pensamientos. Pero eso tiene el inconveniente de tener menos libertad para ajustar y mover los elementos rápidamente.

Conclusión

Estructuras bien pensadas con consistencia; es lo que hace que un sitio web sea genial.

En muchos casos, cuando se crea un sitio web, se dispone de tiempo y recursos limitados, lo más importante es contar con un camino claro hacia el logro de la(s) meta(s) que se pretende alcanzar o el(los) problema(s) que se pretende resolver.

Structural Wireframing puede ser su mejor amigo para reflexionar y centrarse en cómo el usuario experimentará su sitio web. Puedo asegurarle que poner el tiempo para hacer el cableado estructural le ahorrará tiempo en todo el proyecto. Empujará la usabilidad al frente y ayudará a que el proceso de diseño sea iterativo a escala.