Explicación de los wireframes de sitios web: planificar antes de diseñar

Imagine que contrata a un constructor para que edifique su casa, y lo primero que hace es empezar a colocar ladrillos. Sin planos, sin distribución del piso, sin acuerdo sobre dónde va la cocina. Usted lo detendría al instante. Sin embargo, así es exactamente como se construye un número sorprendente de sitios web: alguien abre una herramienta de diseño, elige un color bonito, inserta una foto de archivo y empieza a mover píxeles sin ningún plan. El resultado suele ser un sitio que se ve bien en algunos lugares, pero que nunca llega a estar del todo cohesionado.

El wireframing es la etapa de planos de un sitio web. Es el paso discreto y poco glamuroso que ocurre antes de que aparezcan colores, fuentes o fotografías, y es uno de los mayores predictores de si el sitio terminado realmente funcionará. En esta guía aprenderá qué es un wireframe en un lenguaje sencillo, por qué omitirlo cuesta más que hacerlo, los diferentes niveles de detalle en los que puede trabajar, y un proceso simple que puede seguir usted mismo, incluso si nunca ha dibujado una sola caja en su vida.

Qué es realmente un wireframe

Un wireframe es un boceto deliberadamente simple de una página web que muestra dónde va cada cosa, sin ningún tipo de estilo visual. Piense en cajas grises, líneas de marcador de posición en lugar de texto real, y etiquetas sencillas como "logotipo aquí" o "formulario de registro". El objetivo principal es eliminar la decoración para que pueda centrarse únicamente en una pregunta: ¿este diseño tiene sentido?

Al mantener las cosas feas a propósito, un wireframe fomenta conversaciones útiles en las primeras etapas. Nadie discute si un botón debe ser azul verdoso o azul marino cuando el botón es solo un rectángulo gris. En cambio, todos hablan sobre si el botón debe existir, qué debe decir y si está en el lugar correcto. Esa es exactamente la conversación que se desea tener antes de que alguien dedique horas al diseño visual.

Los wireframes se sitúan al principio de cualquier proceso de diseño web saludable, normalmente justo después de haber recopilado el contenido y los objetivos, pero antes de que un diseñador toque el color o la tipografía. Son el puente entre "esto es más o menos lo que queremos decir" y "así es como se verá".

¿Por qué molestarse? El argumento a favor de planificar primero

Es tentador tratar el wireframing como un extra opcional, un retraso entre usted y la parte emocionante. En la práctica, suele pagarse por sí mismo varias veces. He aquí por qué.

Detecta problemas cuando son baratos de solucionar

Mover un cuadro en un wireframe lleva segundos. Reconstruir una página terminada porque el diseño no funcionó lleva horas, y volver a tomar fotografías o reescribir textos para que se ajusten a una estructura rota lleva aún más tiempo. Cuanto antes se detecte que una llamada a la acción clave está enterrada, o que los visitantes no tienen un siguiente paso obvio, más barato será solucionarlo. Detectarlo en un boceto gris es el momento más barato de todos.

Mantiene el enfoque en el visitante, no en la decoración

Un diseño hermoso puede ocultar discretamente una experiencia confusa. Al eliminar los elementos visuales, los wireframes mantienen a todos honestos sobre si una página realmente ayuda a alguien a hacer lo que vino a hacer. Esta es la misma disciplina detrás de todo lo que hace que un sitio web convierta: la claridad del propósito precede al pulido.

Logra que todos estén de acuerdo antes de gastar dinero

Un wireframe es un punto de referencia compartido. El propietario del negocio, el redactor y el diseñador pueden mirar el mismo boceto simple y asentir, o expresar una preocupación, antes de que comience el trabajo costoso. Ese acuerdo compartido evita la dolorosa sorpresa de última etapa donde alguien dice "oh, asumí que el precio estaría en la página de inicio" después de que la página de inicio ya esté construida.

Los tres niveles de detalle de un wireframe

No todos los wireframes tienen el mismo nivel de detalle. La gente suele hablar de tres niveles, y elegir el correcto le ahorra tiempo. No siempre necesita la versión más pulida.

Una regla general útil: comience con poca fidelidad y solo agregue detalles cuando una decisión lo requiera. Un garabato en el reverso de un sobre es un wireframe perfectamente legítimo si ayuda a tres personas a ponerse de acuerdo sobre dónde va el formulario de contacto. Siempre puede arreglarlo más tarde. El peligro de pasar directamente a la alta fidelidad es que la gente lo percibe como tan acabado que deja de cuestionarlo, cuando el cuestionamiento es exactamente para lo que sirve la etapa inicial.

Qué incluye un wireframe

Cada página es diferente, pero la mayoría de los wireframes tienen en cuenta los mismos bloques de construcción. Revisarlos como una lista de verificación evita que olvide algo importante.

Los anclajes estructurales

Empiece por las partes que enmarcan cada página: el encabezado con su logotipo y menú principal, y el pie de página en la parte inferior. Su menú es una de las decisiones más importantes de todo el sitio, por lo que vale la pena esbozarlo con cuidado; los principios de las mejores prácticas de navegación se aplican directamente aquí. Decida qué va en el menú antes de decidir cómo se ve.

La parte superior de la página

El área que un visitante ve antes de desplazarse hace un gran trabajo. En su wireframe, bloquee el título, cualquier línea de apoyo y la acción principal que desea que la gente realice. Acertar con esta región es una disciplina en sí misma, cubierta en nuestras guías de diseño "above-the-fold" y de creación de una sección hero sólida. En el wireframe, todo lo que necesita es una caja clara que diga lo que promete el título y dónde se encuentra el botón.

Los bloques de contenido y el camino a seguir

Debajo de la parte superior, esboce la secuencia de secciones que cuentan su historia: lo que ofrece, por qué es importante, pruebas de su fiabilidad, etc. Fundamentalmente, marque dónde lleva cada sección a continuación. Cada página debe tener un siguiente paso obvio. Si un visitante llega al final de una sección y no hay nada que lo invite a seguir, esa es una brecha que su wireframe le acaba de ayudar a detectar.

Un proceso de wireframing sencillo que cualquiera puede seguir

No necesita ser diseñador para hacer wireframes. Aquí le presentamos una secuencia amigable y repetible.

Paso 1: Conozca el propósito de la página

Antes de dibujar cualquier cosa, escriba una frase que describa para qué sirve esta página y qué quiere que haga un visitante después de leerla. "Convencer a un propietario de pequeña empresa para que reserve una llamada gratuita" es un propósito claro. Todo lo que dibuje debe servir a esa frase.

Paso 2: Reúna su contenido primero

El wireframing es mucho más fácil cuando se sabe aproximadamente lo que se va a decir. No necesita la copia final, pero sí la esencia. Esta es exactamente la razón por la que planificar su contenido antes de construir paga tan generosamente: el diseño sigue al mensaje, y no al revés.

Paso 3: Esboce la vista estrecha

Dibuje un rectángulo alto y estrecho para representar la pantalla de un teléfono y apile sus secciones dentro de él en orden de prioridad. Debido a que un sitio responsivo se reorganiza para cada tamaño de pantalla, hacer bien la pila móvil primero significa que la versión de escritorio se ajusta en su mayoría.

Paso 4: Expanda a pantallas más anchas

Ahora dibuje la versión ancha. Decida qué puede ir uno al lado del otro, dónde se expande el menú y cómo el espacio en blanco le da a la página espacio para respirar. La forma en que usa ese espacio vacío importa enormemente, como explica nuestro artículo sobre el espacio en blanco.

Paso 5: Revise con ojos nuevos

Muestre su wireframe a alguien que no lo haya visto. Pregúnteles para qué creen que es la página y en qué harían clic. Si sus respuestas coinciden con su intención, el diseño está funcionando. Si no, acaba de ahorrarse un costoso malentendido.

Cómo se conecta el wireframing con el resto de su proyecto

Un wireframe no es una isla. Su verdadero poder reside en lo bien que se integra con cada etapa posterior. Una vez que se acuerda un wireframe, el redactor sabe exactamente cuánto texto necesita cada sección y qué función debe cumplir ese texto, por lo que las palabras se escriben para un propósito en lugar de ser vertidas y recortadas más tarde. El diseñador hereda una estructura establecida y puede dedicar su energía a hacerla hermosa, en lugar de luchar con dónde deben ir las cosas. Y quien construya el sitio tiene un mapa claro que seguir, lo que hace que sus estimaciones sean más precisas y su trabajo más rápido.

Esta es la razón por la que el wireframing tiende a acortar un proyecto en general, aunque añada un paso al principio. Las horas que invierte en cajas grises se recuperan muchas veces en la reducción de idas y venidas posteriores. Un equipo que omite el wireframing a menudo termina haciéndolo de todos modos, solo que lenta y costosa, en forma de revisiones de un diseño a medio terminar. Un equipo que hace wireframes de forma deliberada toma esas decisiones al principio, cuando son baratas de cambiar.

Los wireframes también hacen que las conversaciones con cualquier persona que contrate sean mucho más productivas. En lugar de intentar describir con palabras lo que imagina, puede señalar un boceto simple y decir "así, pero con los testimonios más arriba". Esa imagen compartida elimina una gran cantidad de malentendidos y es una de las cosas más útiles que puede aportar a una reunión inicial. Si alguna vez le cuesta explicar lo que quiere de un sitio web, un wireframe rudimentario suele ser la forma más rápida de salvar la brecha.

Errores comunes de wireframing a evitar

Algunas trampas atrapan a la gente una y otra vez. La primera es añadir pulido visual demasiado pronto: en el momento en que empiezas a elegir colores, dejas de pensar en la estructura. Mantenlo gris. La segunda es meter todos los elementos posibles en una sola página por miedo a dejar algo fuera; un wireframe es el lugar perfecto para practicar el arte de dejar cosas fuera. La tercera es hacer wireframes de forma aislada y luego presentar el diseño terminado a las partes interesadas. Comparta pronto y a menudo. Todo el valor de un wireframe reside en la conversación que inicia.

Por último, no trate el wireframe como un contrato grabado en piedra. Es una herramienta de pensamiento. Si las pruebas revelan una mejor disposición, cámbiela con gusto. El objetivo nunca fue un documento perfecto; era tener la cabeza más clara antes de que comenzara la construcción real. Cuando esté listo para convertir un wireframe sólido en algo pulido, el mismo cuidado que se puso en el diseño debe trasladarse a los elementos visuales, y si necesita ayuda con algo de esto, siempre puede ponerse en contacto.

Preguntas frecuentes

Referencias

1. Nielsen Norman Group. "Wireframing and Prototyping in UX Design." nngroup.com.
2. Interaction Design Foundation. "What Is Wireframing?" interaction-design.org.
3. Smashing Magazine. "A Hands-On Guide To Mobile-First Responsive Design." smashingmagazine.com.