¿Qué es una estructura alámbrica? Este tutorial de diseño de UX se lo mostrará.

El primer paso para diseñar un sitio web: estructurarlo.

Una buena estructura alámbrica puede brindarle la visión de todo el diseño y la funcionalidad de su sitio web. También puede servir como la primera etapa de un diseño.

Los wireframes le dan una idea de la estructura general que tomarán las páginas y cómo fluirá la navegación.

Si está pensando en crear un sitio web, puede hacer un wireframe de forma rápida y sencilla. Ni siquiera tienes que ser diseñador gráfico para hacerlo.

Para empezar, todo lo que necesita es un lápiz y papel. (O si quieres ponerte elegante, un iPad y un iPencil como los que uso en mi video tutorial anterior).

Vamos a crear una estructura alámbrica y mostraremos cómo permite un proceso de diseño rápido e iterativo. Esto creará una pieza de documentación viva que puede usar para usted y para un cliente. Y puede usar esto para razonar a través de su planificación, todo antes de invertir tiempo en codificarlo.

Aquí hay algunos pasos que cubriremos en este artículo (y en el video tutorial adjunto):

  1. Planificación del mapa del sitio
  2. Crear una estructura alámbrica de la página de inicio
  3. Usar marcado en wireframes
  4. Componentes de estructura alámbrica (encabezado, menú, pie de página)
  5. Estructuración de la página de funciones y la página de contacto
  6. Wireframes receptivos móviles

Paso 1: planificación del mapa del sitio

Comenzar con wireframing comienza con un buen mapa del sitio. Antes de crear una estructura de alambre de página, un mapa del sitio le dará cierta estructura. De esta manera, comprenderá qué páginas va a crear y cómo se conectarán entre sí.

Es posible que la mayoría de los sitios pequeños no necesiten un mapa del sitio. Por lo general, solo tienen una sola página de destino o algunas páginas comunes como Funciones, Acerca de y Contáctenos.

Dicho esto, tan pronto como su sitio web o aplicación se vuelva más grande y más complejo, querrá un mapa del sitio.

Los mapas del sitio le brindan una breve descripción general de dónde existen los elementos y cómo se interconectan.

En nuestro ejemplo, crearemos un mapa del sitio simple que contendrá solo la página de inicio, la página de características y la página de contacto.

No tienes que dedicar demasiado tiempo a esto. Simplemente agregue algunos cuadros para mostrar cada página, líneas debajo para mostrar subpáginas, y eso es todo.

Paso # 2: Creación de estructura metálica de la página de inicio

Vamos a crear nuestra primera página de estructura alámbrica. Si no lo ha hecho antes, el proceso es bastante simple. Cada aspecto de un sitio web se representa con una forma o gráfico simple, como:

  • cuadros con líneas diagonales que los atraviesan para representar imágenes
  • líneas horizontales para representar párrafos de texto
  • y un círculo con una L para representar su logotipo.

Para la página de inicio, crearemos una imagen deslizante, un menú y un logotipo. También le daremos algunas etiquetas para mostrar qué es cada artículo.

Esto también es útil para organizar cada sección en rectángulos que luego podemos copiar y pegar en otras páginas (especialmente para el encabezado y pie de página).

Creemos también otra sección para una introducción a la empresa (Quiénes somos) y una sección de patrocinadores (con logotipos e imágenes de nuestros patrocinadores).

A medida que avanzamos en el diseño, también podemos implementar otros elementos en la página de inicio, como botones de llamada a la acción en áreas que serían apropiadas.

Finalizamos el diseño con una sección de pie de página donde agregamos elementos comunes como un formulario de contacto, información de contacto y reutilizamos el logotipo una vez más.

Paso 3: uso de marcado en wireframes

La estructura alámbrica a menudo es vista no solo por los diseñadores, sino también por los desarrolladores, los clientes y la administración. Por lo que es útil agregar algo de marcado a cada parte del contenido. Esto puede ayudar a guiar a las personas que ven su estructura alámbrica por primera vez. Normalmente hago esto al final de completar una página.

En nuestro ejemplo, marquemos la página de inicio y etiquetemos cada parte del contenido con texto rojo.

Los aspectos que desea marcar incluyen elementos como secciones, títulos, formularios de contacto y qué imágenes podrían ser.

Tenga en cuenta que Markup no tiene que explicar literalmente cuál será el contenido eventualmente, solo lo que representa. Por lo tanto, en lugar de poner el "Ejemplo de título de introducción" real, puede etiquetar el título como "Título de introducción".

Paso # 4: agregue otros componentes de estructura metálica como encabezado, menú y pie de página

Ahora que ya hemos creado un encabezado y un pie de página, podemos reutilizarlos para páginas adicionales. Si está trabajando digitalmente, puede copiar y pegar encabezados, pies de página y otros elementos recurrentes en nuevos esquemas de página. (Y si solo usa papel y bolígrafo, siempre puede usar una navaja y una fotocopiadora para lograr el mismo efecto).

Esto permite que su diseño de estructura alámbrica permanezca consistente. Herramientas como Figma le permitirán crear componentes de activos que también puede copiar y pegar en todo su diseño. Incluso puede configurarlos para actualizar dinámicamente otras partes de su estructura alámbrica cuando cambie su componente raíz.

En nuestro ejemplo, vamos a reutilizar componentes para crear una página de características. Al crear nuestro primer componente de la sección de características, podemos copiarlo y pegarlo a continuación varias veces para construir nuestra página de características completa en solo unos minutos.

Paso # 5: Página de funciones y página de contacto

Se vuelve cada vez más fácil crear páginas adicionales una vez que comienza con el wireframing y crea algunos componentes. Con la página de características terminada, podemos crear una página de Contáctenos. Todo lo que realmente tenemos que hacer es agregar algunos elementos comunes, como un mapa de Google, un formulario de contacto y algunos detalles de contacto básicos como un número de teléfono y una dirección de correo electrónico.

En este ejemplo, tengo pequeños logotipos para un teléfono y un correo electrónico, y grandes bloques para representar dónde se ubicarán en la página.

El formulario de contacto se ubicará debajo (sin un contorno de cuadro), así como un mapa de Google en el lado derecho.

Paso # 6: Crea un Wireframe sensible al móvil

No puede existir un buen wireframe en estos días sin una versión móvil. Esto se debe a que hoy en día gran parte de la web se ve en dispositivos móviles.

Es bueno saber cómo un diseño puede colapsar en ventanas más pequeñas. Si tiene más tiempo en sus manos, también puede crear una versión para tableta del wireframe receptivo.

En nuestro ejemplo, construimos la estructura alámbrica del diseño de la página de inicio sección por sección. La mayoría de filas y columnas están contraídas. Y como estamos en una ventana gráfica móvil, muchas de las imágenes, textos y bloques se reducen de tamaño.

Debido a esto, es posible que algunas de las secciones aún tengan la misma altura que sus respectivas versiones de escritorio. Por otro lado, algunas secciones con muchas imágenes (como la sección de patrocinadores) pueden terminar teniendo mucha más altura de desplazamiento.

Debido a esto, a menudo también agrego marcas adicionales para mostrar qué secciones de la versión de escritorio corresponden a qué equivalentes receptivos para la versión móvil.

Conclusión

Wireframing es una forma rápida de tener una mejor idea visual de su sitio web o aplicación. Te recomiendo que lo pruebes en tu próximo proyecto para ayudarte a planificar cómo podría funcionar y verse.

Wireframing es el enfoque ideal para esto, ya que lleva mucho menos tiempo que tener un diseñador haciendo un prototipo de interfaz de usuario completo.

Como desarrollador, he creado wireframes para mis sitios web durante años. Casi nunca desarrollo un sitio web sin esbozar al menos algunas de mis ideas de cómo se verá visualmente.

Happy wireframing.

Espero que hayas disfrutado de este artículo. Si no sabes quién soy, ¿soy Adrian de Australia? Tengo un pequeño canal en Twitter y YouTube, así que si quieres saber más sobre mí o disfrutar de mi contenido, ¿me puedes visitar alguna vez?

  • Youtube: //youtube.com/adriantwarog
  • Gorjeo: //twitter.com/adrian_twarog