¿Cuántos wireframes necesitas? (Guía para Wireframing efectivo)

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

Crear docenas de maquetas para mostrar a un cliente al comienzo de un proyecto no conduce necesariamente a una mejor comprensión; puede ser francamente abrumador.

Como 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 crear wireframes de manera más eficiente y una guía sobre cuántos wireframes realmente necesita (además de algunas ideas sobre cuáles son los más importantes y cuáles probablemente pueda omitir).

Contenido del Articulo

¿Cuántos wireframes necesitas?

La cantidad exacta de wireframes que 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 suelen tener menos wireframes que los sitios más grandes. Pero este no es siempre el caso.

En general, la verdadera medida de cuántos wireframes 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ágina se necesitan para transmitir un mensaje?

Y una cosa más: la mayoría de los clientes pueden “ver” el diseño en la etapa de estructura alámbrica. Mostrar docenas de miniaturas no significará nada para ellos hasta que el contenido esté lleno. Así que menos es más. Utilice varios diseños para establecer “reglas” organizativas básicas para el sitio, de modo que los clientes puedan comprender el concepto de diseño.

Comience con un mapa del sitio y la estructura del sitio web

La respuesta a nuestra pregunta del título comienza con la organización del contenido de un sitio web. Esto sucede incluso antes de que el diseño comience a unirse.

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

Naturalmente, comenzará a ver grupos de páginas con un tipo de contenido similar que casi describen muchos esquemas para usted.

En este punto, es posible que todavía estés pensando que necesitas crear una docena de wireframes (dependiendo del sitio web), pero no te preocupes, puedes reducirlos.

Piensa modular

Así es como se pasa de múltiples wireframes a múltiples wireframes: piense modularmente.

En lugar de describir todo el proyecto página por página, piense en partes modulares que puede usar y reutilizar en varias páginas. (Estos son wireframes de mezcla y combinación).

Este concepto no solo le ahorrará tiempo, sino que también le proporcionará una serie de partes repetitivas que puede usar en diferentes páginas. Esto ayudará a crear coherencia y patrones en el diseño, facilitando la interacción de los usuarios con el sitio una vez que esté completo.

¿Otro beneficio? Es menos probable que los clientes tengan que intentar visualizarse a sí mismos. Con una explicación detallada (y posiblemente algunos wireframes de alta fidelidad), los clientes podrán comprender mejor su concepto de diseño general.

5 wireframes para cada sitio

Si está optimizando la cantidad de wireframes que crea para un proyecto, ¿qué necesita tener exactamente?

Comienza con cinco esquemas básicos que te darán una buena representación visual de todo lo que necesitas para organizar tu sitio en general. Recuerde pensar en partes modulares para que tenga partes que se puedan mezclar y combinar en estructuras alámbricas (y páginas) para una construcción más rápida y sencilla.

Página principal

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

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

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

página de inicio móvil

En un momento en que es probable que más usuarios visiten un sitio web en un teléfono, es importante tener el mismo esquema de página de inicio móvil de alta fidelidad. Cada marco de alta fidelidad debe incluir un socio 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 marcar cualquier interacción que sea diferente (tocar o deslizar en lugar de hacer clic) y también asegurarse de que solo está obteniendo la funcionalidad correcta.

Página adicional (navegación de nivel superior)

¿Cuáles son los primeros clics desde la página principal? Necesitará una estructura alámbrica para este tipo de página.

Aquí es donde entra en juego el pensamiento modular. Diseñe un marco con todos los elementos que pueda necesitar aquí y considere guardar las partes que no necesita en esas páginas secundarias.

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

Contactos o página Acerca de

Casi todos los sitios web tienen una página de “Contáctenos” o “Acerca de nosotros”. (Muchos sitios web tienen ambos). Diseñe wireframes para uno de estos tipos de página con anticipación porque 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. La mayoría entran en la categoría de información o comercio electrónico. Cree una estructura alámbrica para este tipo de página.

A veces, estos diseños pueden incluir dos tipos de páginas: una página de índice completo (una muestra de elementos o publicaciones de blog) y una página de detalles (un solo elemento o publicación de blog).

Wireframes adicionales para sitios grandes

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

Esto es probablemente algo que realmente puedas imaginar más adelante en el proceso de diseño. Primero comience con los marcos básicos enumerados en la sección anterior para la aprobación del cliente y luego llévelos a través del 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 procesar varios wireframes puede ser una tarea abrumadora. No se recomienda intentar hacer clic en ellos a la vez en todo el sitio con contornos. (Esto puede conducir a una aprobación apresurada incluso si no es lo que quieren y puede descarrilar el proyecto a largo plazo).

Otros frameworks que puedes incluir:

  • Servicios o páginas de precios
  • Páginas dedicadas para artículos únicos como reservas, menús, galerías de fotos, etc.
  • Mapa o páginas de ubicación
  • Páginas de detalles de comercio electrónico, como pago o elementos adicionales
  • Boletín de correo electrónico o páginas de registro
  • Inicio de sesión o configuración de usuario
  • Contenido de usuario o fuentes
  • Visualización de grandes cantidades de datos o una tabla

Conclusión

Cuando se trata de la cantidad de wireframes necesarios, no existe un número mágico porque los proyectos pueden ser muy diferentes. Pero puede comenzar con algunos esquemas funcionales que le facilitarán a usted y a sus clientes visualizar proyectos y ayudarlos a avanzar en la dirección correcta.

El truco es no dejarse enredar en las malas hierbas de la estructura metálica. Es fácil seguir construyendo wireframes; es mucho más difícil convertir todas estas partes diferentes en páginas web funcionales.

El truco es pensar de forma modular y organizada, y esto te ayudará a crear exactamente los wireframes que necesitas. Y no te preocupes; si necesita otro marco más tarde, necesitará herramientas para eliminarlo rápidamente.

Previous post 7 estrategias de experiencia digital impulsadas por las vacaciones para empresas de comercio electrónico | de Priyanka J | Diciembre de 2021
Next post Diseñador de juegos: The Last Of Us II | Maria meireles

Deja una respuesta