wikipediaillustrated

marketing

Guía para principiantes de Wireframe de sitio web: procesos, herramientas y ejemplos

website wireframes.jpgkeepProtocol

A los especialistas en marketing a menudo les gusta pensar en los sitios web estrictamente en términos de diseño o conversiones, pero la experiencia del usuario (UX) es la forma de cerrar la brecha y garantizar que su diseño se convierta.

Al tomarse el tiempo para crear una estructura alámbrica al crear o rediseñar un sitio web, puede concentrarse en la experiencia del usuario como una pieza separada (pero conectada) del rompecabezas. Una estructura alámbrica le permite probar el diseño de la página y evaluar los flujos de usuarios para ver exactamente cómo funcionará el nuevo sitio web y encontrar posibles errores que eventualmente podrían obstaculizar las conversiones.

En esta publicación, cubriremos exactamente cómo se ve el proceso de creación de esquemas para sitios web, los tipos de esquemas que puede usar y cómo crear un esquema para su propio proyecto.

¿Qué es el wireframe de un sitio web?

La estructura alámbrica de un sitio web se utiliza para trazar las características principales y la navegación de un nuevo diseño de sitio web. Da una idea de la funcionalidad del sitio antes de considerar los elementos de diseño visual, como el contenido y los esquemas de color.

Ejemplo de estructura alámbrica del sitio web

Fuente de imagen

Los diseños y funciones, como menús y botones, se trazan para evaluar la experiencia general del usuario final.

Una estructura alámbrica del sitio web también proporciona un mapa práctico del proyecto para que los miembros del equipo vean dónde irá todo a medida que completan las tareas relacionadas.

Algunos diseñadores o clientes pueden tentarlo a omitir esta parte del proceso, calificándola de innecesaria y lenta. Pero el wireframing se trata de prepararse y toda buena preparación requiere tiempo. Y trabajar sin un plan generalmente toma aún más tiempo y corre el riesgo de que un proyecto fracase por completo.

Siempre debe crear una estructura alámbrica en las primeras etapas de desarrollo porque lo ayudará a revelar errores de juicio o diseño, lo que le dará tiempo para corregirlos. En términos de colaboración, puede usar estructuras de alambre para trabajar de manera efectiva con su equipo y explicar conceptos a sus clientes.

Algunos wireframes son más detallados que otros. Es aconsejable comenzar con una estructura alámbrica de baja fidelidad. Los wireframes de baja fidelidad muestran la localización general de los elementos en la pantalla. Puede desarrollar estos diseños iniciales en estructuras alámbricas de más alta fidelidad, que brindan más detalles, como el aspecto que tendrán los elementos finales.

El uso de una estructura alámbrica de baja o alta fidelidad dependerá de lo que su proyecto necesite en ese momento.

Al proporcionar una idea de cómo los visitantes interactuarán con su sitio, un esquema de sitio web puede revelar cualquier aspecto de su diseño o funcionalidad que podría mejorarse para ayudar mejor a los usuarios a alcanzar sus objetivos. Estos objetivos pueden incluir: realizar una compra, suscribirse a un boletín informativo o leer una publicación de blog. Identificar los puntos de fricción en esta etapa del proceso de diseño es mucho más ideal que descubrirlos después de haber decidido los colores, las fuentes y las imágenes.

Cómo crear una estructura alámbrica simple

Cómo crear una estructura alámbrica simple

1. Identificar el objetivo del sitio web.

Antes de usar la pluma y el papel para simular una estructura alámbrica, le resultará útil comprender el objetivo de su sitio web. Si bien puede parecer obvio que desea atraer tanto tráfico como su servidor pueda manejar, piense en lo que quiere que todos esos visitantes vean y hagan mientras tiene su atención. ¿Deberían terminar su visita con una compra? ¿Deberían descargar una aplicación? Tal vez le gustaría que vean una página determinada antes de dejarlos en otro sitio web por completo. Cualquiera que sea su objetivo, asegúrese de que su equipo esté alineado en torno a él para que los pasos posteriores fluyan sin problemas hasta que lleve su sitio a producción.

2. Comprender el flujo de usuarios.

Los wireframes lo ayudan a identificar y evaluar los flujos de usuarios para que todos en su equipo entiendan cómo el visitante debe interactuar con cada página de su sitio. Durante este paso, debe delinear cada punto de entrada que un visitante podría usar para aterrizar en su página de inicio, luego elija algunos puntos de entrada principales para crear un flujo de viaje.

Tómese un tiempo para delinear su flujo de usuario en un formato de texto antes de dibujar una estructura alámbrica. ¿Por qué? Es mucho más fácil y rápido mover los pasos cuando simplemente se escriben en lugar de simularlos como una estructura alámbrica.

3. Determine el tamaño de la estructura metálica de su sitio web.

Tus wireframes deberán variar en tamaño dependiendo del tamaño de pantalla para el que los estés creando. Los dispositivos móviles, tabletas y pantallas de escritorio variarán en tamaño, sin mencionar que la ventana en un escritorio se puede ampliar o reducir. Para obtener las medidas más precisas para su estructura alámbrica, use medidas de píxeles en lugar de pulgadas o puntos. Estos son los tamaños estándar para cada tipo de pantalla:

Tamaño de estructura alámbrica para una pantalla móvil

1080px ancho x 1920px largo

Tamaño de estructura alámbrica para la pantalla de una tableta

Tableta de 8” – 800px de ancho x 1280px de largo

Tableta de 10” – 1200px de ancho x 19200px de largo

Tamaño de estructura alámbrica para una pantalla de escritorio

768px ancho x 1366px largo

4. Comience el diseño de la estructura alámbrica de su sitio web.

Ahora es el momento de visualizar su flujo de usuario en una estructura alámbrica. Si está usando lápiz y papel físicos, le recomendamos que use papel punteado o papel cuadriculado para mantener las cosas alineadas. Esto te ayudará a transformar la versión física de tu wireframe en una copia digital más fácilmente.

Si está comenzando en una plataforma digital, elija una herramienta que funcione mejor para sus necesidades de fidelidad de estructura alámbrica. Si no está seguro de si usar fidelidad baja, media o alta, consulte esta guía completa de fidelidad de estructura alámbrica sobre el tema.

5. Determinar los puntos de conversión.

Una vez que haya esbozado sus esquemas, es hora de decidir exactamente cómo debe moverse el usuario a través de cada paso. El hecho de que haya descrito los pasos que el usuario debe seguir no significa que sean intuitivos para que fluyan. En esta etapa, determinará qué botones, hipervínculos, imágenes u otros elementos en la página guiarán al lector al siguiente paso hasta que alcance el objetivo final que discutimos en el paso 1.

6. Eliminar pasos redundantes.

Wireframing es un proceso iterativo. Es raro hacer una sola ronda de bocetos de estructuras alámbricas que estén listas para la producción. Es posible que observe que algunas páginas web son redundantes y se pueden combinar para generar menos clics para el usuario. Dondequiera que exista una oportunidad para simplificar su wireframe, esbozarlo y solicitar comentarios, eso me lleva a nuestro último paso…

7. Obtén retroalimentación sobre el wireframe.

Su sitio web pasará por varias rondas de pruebas y revisiones antes de que se publique, pero sigue siendo una buena idea recibir comentarios sobre sus esquemas en las etapas iniciales. Colabore con sus equipos de diseño y desarrollo, así como con el personal interno y los clientes para obtener su opinión sobre el flujo en sí. Obtener información ahora evita que la esencia de la UX se pierda después de agregar botones, pantallas y diseños de página a la mezcla.

Ejemplos de estructura alámbrica

A continuación se muestran algunos de los mejores ejemplos de tipos de wireframes para iluminar sus zonas creativas y ayudarlo a solidificar el proceso de wireframe que funciona para usted.

1. Bosquejo

Algunos desarrolladores comienzan a dibujar con lápiz y papel o una pizarra. Este método simple, dibujado a mano, ilustra un concepto básico antes de dedicar tiempo a preocuparse por los elementos gráficos.

Ejemplo de estructura alámbrica dibujada a mano

Fuente de imagen

2. Estructura alámbrica dibujada a mano detallada

Los wireframes dibujados a mano no siempre tienen que ser simples. Puede usar una regla además de su lápiz y papel para crear un diseño más detallado. Sin embargo, podría ser más conveniente usar una herramienta de estructura alámbrica digital para un trabajo tan detallado, ya que sus esfuerzos dibujados a mano pueden ser difíciles de digitalizar.

Ejemplo detallado de estructura alámbrica dibujada a mano

Fuente de imagen

3. Estructura alámbrica de baja fidelidad

Los wireframes de baja fidelidad se crean digitalmente y muestran elementos en bloques de contenido simples, tomando su boceto conceptual básico y convirtiéndolo en algo más refinado. Los wireframes de baja fidelidad son importantes para determinar qué elementos gráficos se deben crear y qué copia se debe escribir.

Ejemplo de estructura alámbrica de baja fidelidad

Fuente de imagen

4. Estructura alámbrica móvil de baja fidelidad

No olvide que las versiones responsivas de su sitio web y aplicaciones móviles también obtienen esquemas. Muchos diseñadores incluso primero estructuran la versión móvil, ya que los visitantes del sitio web visitan sitios en dispositivos móviles con más frecuencia que nunca.

ejemplo de estructura alámbrica móvil de baja fidelidad

Fuente de imagen

5. Estructura alámbrica de alta fidelidad

Con herramientas digitales, puede crear una estructura alámbrica de alta fidelidad que ilustre con más detalle sin la creación de demasiados elementos gráficos. Esto da como resultado una apariencia más estética sin un trabajo de diseño que consume mucho tiempo y que de todos modos podría desecharse en el proceso de revisión.

La herramienta digital, Lasso, ayuda a crear ejemplos de estructuras alámbricas de alta fidelidad

Fuente de imagen

6. Wireframe interactivo de baja fidelidad

Los sitios web no son estáticos, entonces, ¿por qué debería serlo su estructura alámbrica? Hay muchas herramientas interactivas de estructura alámbrica que pueden ayudarlo a demostrar el flujo de su experiencia de usuario antes de comprometerse con sus gráficos.

ejemplo de estructura alámbrica interactiva de baja fidelidad

Fuente de imagen

7. Maqueta de estructura metálica

Una vez que se han aprobado los elementos básicos del diseño, puede crear elementos gráficos para desarrollar el diseño. Esto se llama maqueta.

ejemplo de maqueta de estructura alámbrica

Fuente de imagen

8. Maqueta interactiva de estructura alámbrica

También puede usar herramientas de estructura alámbrica para crear una maqueta interactiva sin crear el sitio real, completo con un kit de interfaz de usuario y elementos gráficos. Este paso puede ser útil si tiene un equipo de diseño que entrega la implementación del sitio a los desarrolladores porque pueden revisar tanto el aspecto como la funcionalidad del sitio, lo que da como resultado un flujo de trabajo más optimizado con menos revisiones necesarias.

maqueta interactiva de estructura alámbrica que muestra el comportamiento del menú desplegable en una interfaz gráfica

Fuente de imagen

Estos son solo algunos ejemplos, pero muestran cómo se puede lograr el wireframing de sitios web de diferentes maneras.

9. Wireframe de sitio web gratuito

Si tiene un presupuesto limitado, puede explorar herramientas gratuitas de creación de esquemas de sitios web como Miró. Este en particular le brindará las capacidades básicas de estructura alámbrica que funcionan muy bien para maquetas de fidelidad baja a media.

ejemplo de estructura alámbrica de sitio web gratuito

Fuente de imagen

10. Estructura alámbrica del sitio web móvil

La capacidad de respuesta móvil es una práctica recomendada de diseño web esencial. Crear un wireframe para la versión móvil de su sitio web específicamente es un paso clave para un sitio web exitoso en general. Le irá mejor con UX, SEO y conversiones como resultado de priorizar el diseño web móvil.

Hay algunos enfoques diferentes para construir una estructura alámbrica móvil. Puede condensar todas las funciones de su escritorio para que quepan en una pantalla móvil. O puede limitar algunas funciones por completo para lograr una experiencia optimizada para dispositivos móviles.

Ejemplo de estructura alámbrica de sitio web móvil

Fuente de imagen

Puede que también te guste...

Deja una respuesta

Tu dirección de correo electrónico no será publicada.