¿Cuántos wireframes necesitas? (Guía para un wireframing eficaz)

Con demasiada frecuencia, los nuevos proyectos de diseño de sitios web comienzan con una pequeña sobrecarga de estructura alámbrica.

La creación de docenas de wireframes para mostrar a un cliente al comienzo del proyecto no crea necesariamente una mejor comprensión; puede ser francamente abrumador.

Como ocurre con muchos otros aspectos del diseño, el wireframing es un arte en el que, en muchos casos, menos es más.

Aquí hay un vistazo a cómo hacer wireframes de manera más efectiva y una guía sobre cuántos wireframes realmente necesitas (además de algunas ideas sobre cuáles son los más importantes y cuáles te puedes estar perdiendo).

¿Cuántos wireframes necesitas?

Exactamente cuántos wireframes necesita al comienzo de un proyecto de diseño de sitio web depende del alcance y la escala de la construcción.

Los sitios más pequeños a menudo tendrán menos wireframes que los sitios más grandes. Pero ese no es siempre el caso.

En general, el verdadero indicador de la cantidad de estructura alámbrica que tiene un sitio web se basa en el mapa del sitio. ¿Cómo está organizado el sitio? ¿Cuántos niveles de página o tipos de páginas se necesitan para comunicar el mensaje?

Luego está esto: la mayoría de los clientes pueden «ver» el diseño en la fase de estructura alámbrica. Mostrar docenas de esquemas no significará nada para ellos hasta que se llene el contenido. Así que menos es definitivamente más. Use un puñado de wireframes para establecer «reglas» organizativas básicas para el sitio del cliente para ayudarlo a tener una idea del concepto de diseño.

Comience con un mapa del sitio y un esquema del sitio

El comienzo de la respuesta a nuestra pregunta del título está en la organización del contenido del sitio. Esto sucede incluso antes de que el diseño comience a unirse.

Dibuje un mapa del sitio de todas las páginas y subpáginas que incluirá el sitio. Clasifíquelos de una manera que tenga en cuenta cómo se organizarán visualmente, desde las páginas de nivel superior hasta las subpáginas, los artículos de la tienda o las publicaciones de blog.

Naturalmente, comenzará a ver agrupaciones de páginas con contenido similar que describen en gran medida muchos de los esquemas para usted.

En esta etapa, puede pensar que tiene una docena de wireframes para crear (según el sitio), pero no se preocupe, puede reducirlo.

Piensa modular

Así es como pasa de muchos wireframes a solo unos pocos: piense en modular.

En lugar de esbozar todo el proyecto página por página, piense en partes modulares que pueda usar y reutilizar en varias páginas. (Es una estructura de alambre de mezcla y combinación).

Este concepto no solo lo ayudará a ahorrar tiempo, sino que también tendrá una cantidad de partes replicables y repetibles que puede usar en sus páginas. Esto ayudará a crear coherencia y patrones en el diseño que facilitarán la interacción de los usuarios con el sitio cuando esté terminado.

¿Otro beneficio? Los clientes deben tratar de ver por su cuenta. Con una explicación sólida (y tal vez algunos esquemas de alta fidelidad), los clientes podrían comprender mejor su concepto para el diseño general.

5 wireframes para cada sitio web

Si está optimizando la cantidad de esquemas que crea para un proyecto, ¿cuáles son sus elementos imprescindibles?

Comience con cinco esquemas básicos que le darán una buena imagen de todo lo que pueda necesitar para la organización general de su sitio. Recuerde pensar en partes modulares para que tenga piezas que pueda mezclar y combinar en estructuras (y páginas) para una construcción más rápida y sencilla.

Hogar

El wireframe debe incluir un esquema completo del diseño de la página de inicio, incluida la navegación y un pie de página con todos los elementos necesarios en la página.

Para algunos clientes, tener una estructura alámbrica de alta fidelidad de la página de inicio es lo que ayuda a llevar una idea a las etapas finales del diseño. Considere la posibilidad de crear dos o tres opciones de alta fidelidad para que los clientes puedan visualizar completamente hacia dónde se dirige con el proyecto.

Estos esquemas deberían infundir suficiente confianza para impulsar los proyectos con un plan de diseño real, y algo visual.

Página de inicio móvil

En una era en la que es probable que más usuarios accedan a un sitio web desde un teléfono, es importante tener la misma estructura de alambre de página de inicio móvil de alta fidelidad. Cada estructura alámbrica de alta fidelidad debe incluir un compañero móvil que detalle cómo se reorganizarán y reorganizarán los elementos en pantallas más pequeñas.

Es posible que desee considerar observar cualquier interacción que sea diferente (tocar o deslizar versus hacer clic) también para asegurarse de que está obteniendo la funcionalidad correcta.

Página secundaria (navegación de nivel superior).

¿Cuáles son los primeros clics en la página de inicio? Necesitará una estructura alámbrica para ese tipo de página.

Aquí es donde realmente entra en juego el pensamiento modular. Diseñe un solo marco con todos los elementos que pueda necesitar aquí y considere poder eliminar las partes que no necesita en estas subpáginas.

Esto puede ahorrar el tiempo y el esfuerzo de repetir esquemas con cambios menores en el contenido.

Página de contacto o Acerca de

Casi todos los sitios web tienen una página de contacto o sobre nosotros. (Muchos sitios web tienen ambos). Diseñe wireframes para uno de estos dos tipos de páginas con anticipación, ya que este puede ser uno de los elementos más visitados e importantes de casi cualquier sitio web.

Tienda o página de blog

Finalmente, piense en el propósito del sitio web. La mayoría cae en la categoría de comercio informativo o electrónico. Diseñe un wireframe para ese tipo de página.

A veces, estos esquemas pueden incluir dos tipos de páginas: el índice completo (una exhibición de artículos o publicaciones de blog) y una página de detalles (un solo artículo o publicación de blog).

Wireframes adicionales para sitios más grandes

Algunos diseños de sitios web pueden tener necesidades más complejas, lo que requiere estructuras adicionales. (Y eso está bien.)

Probablemente sea algo que pueda introducir más adelante en el proceso de diseño. Comience primero con los wireframes básicos anotados en la sección anterior para la aprobación del cliente e inclúyalos en el proceso de diseño. Luego pase a cualquier estructura alámbrica adicional.

Puede crearlos todos a la vez, pero para la mayoría de los clientes ver y digerir un puñado de wireframes puede ser demasiado. Se recomienda que no intente empujar un sitio completo de contornos sobre ellos a la vez. (Puede conducir a una aprobación apresurada, incluso si no es lo que quieren, y puede descarrilar un proyecto a largo plazo).

Otros wireframes que puedes incluir:

• Servicios o páginas de precios
• Páginas especiales para elementos únicos como reservas, menús, galerías de fotos, etc.
• Mapa o páginas de ubicación
• Páginas con detalles de comercio electrónico, como pago o artículos adicionales
• Boletín por correo electrónico o páginas de registro
• Inicio de sesión o preferencias de usuario
• Contenido o feeds generados por el usuario
• Visualizaciones de datos o tablas pesadas

Conclusión

No existe un número mágico cuando se trata de la cantidad de wireframes que necesita, ya que los proyectos pueden ser muy diferentes. Pero puede comenzar con un puñado de wireframes funcionales que facilitan la visualización de sus proyectos y hacen que se muevan en la dirección correcta.

El truco es no dejarse atrapar por las malas hierbas del wireframing. Es fácil seguir creando wireframes; es mucho más difícil convertir todas esas partes diferentes en páginas web funcionales.

El truco es pensar modular y organizado, y eso te ayudará a crear solo los wireframes que necesitas. Y no te preocupes; si necesita otro marco de alambre más tarde, necesitará herramientas para quitarlo rápidamente.