Cómo dibujar una estructura alámbrica (incluso si no puedes dibujar) – Usabilidad web y seo

Cómo dibujar una estructura alámbrica (incluso si no puedes dibujar)

Vistas: 30
0 0
Tiempo de lectura:5 Minutos, 45 Segundos

Los wireframes visualizan la ruta o el flujo del usuario, así como los diseños de página, las jerarquías de información e incluso las interacciones. Dependiendo del propósito, pueden variar en precisión, desde bocetos rápidos hasta representaciones detalladas del diseño final.

Para las personas con o sin discapacidades para dibujar, los wireframes pueden ser un desafío. En otros lugares, hemos compartido ideas para ayudar a las partes interesadas a sentirse cómodas con los bocetos. Los principios generales son válidos para todos: Messy es normal y esperado (especialmente para marcos de baja calidad). Utilice restricciones físicas para evitar insistir en pequeños detalles estéticos:

  • Bolígrafos o marcadores gruesos
  • Caja de tiempo
  • Espacio de boceto limitado

Hay algunos componentes comunes que se utilizan una y otra vez en wireframes. Una vez que sepa cómo dibujar estas formas básicas, puede concentrarse en hacer que su idea funcione correctamente, en lugar de en cómo dibujar. Aquí hay una guía paso a paso para ayudarlo a dibujar rápidamente.

Paso 1. Determine la relación de aspecto de la ventana o el dispositivo del navegador.

Esta relación no tiene que ser exacta, especialmente si está dibujando a mano. Aquí hay algunas dimensiones iniciales para una estructura alámbrica más precisa:

  • Para los marcos web, algunos tamaños de puntos de interrupción comunes son 1024×768 píxeles y 1920×1080 píxeles.
  • Para los dispositivos móviles, las dimensiones variarán según el dispositivo específico (por ejemplo, tableta, teléfonos de diferentes tamaños). Empiece por averiguar para qué dispositivo debería optimizar.
Para proporcionar contexto para sus wireframes, encienda su navegador o dispositivo cromo (por ejemplo, barra de herramientas del navegador o casa botón).

Paso 2: Dibuja navegación y búsqueda.

La navegación y la búsqueda agregan contexto al wireframe. Si está siguiendo un diseño o patrón existente, dibuje la estructura existente; por ejemplo, coloque una barra de navegación en la parte superior de la página si sabe que la tiene en todas sus páginas.
Si está comenzando desde cero, considere qué tipo de navegación podría funcionar. (Recuerde, no necesita hacer esto bien la primera vez). Especifique la barra de navegación (horizontal o vertical) dibujando un rectángulo en la ubicación apropiada de la página. Si está utilizando la navegación oculta, muéstrela maximizada o no, según su enfoque. Si desea mostrar que se encuentra en un enlace de navegación específico, subraye el enlace o coloque un cuadro a su alrededor.

Algunos ejemplos de cómo representar diferentes tipos de navegación

La función de búsqueda se puede representar mediante el icono de búsqueda y su cuadro de búsqueda asociado, como en los ejemplos siguientes. Si es necesario, puede mostrar sugerencias de búsqueda en un rectángulo debajo del cuadro de búsqueda.

Simplemente puede dibujar un icono de búsqueda y un cuadro a su alrededor, o incluir detalles como sugerencias de búsqueda.

Paso 3. Identifique y dibuje los elementos más grandes en su diseño.

Luego, concéntrese en dibujar las partes principales de su idea, por ejemplo, titulares, pancartas e imágenes grandes, o incluso partes grandes del cuerpo. Aquí hay algunas reglas generales para construir wireframes:

  • Los títulos se ilustran con líneas más gruesas.
  • El texto principal se perfila con líneas más finas.
  • La imagen se presenta como un rectángulo con una cruz.
La mayoría de los wireframes tendrán un título, un cuerpo de texto y posiblemente una imagen.

Paso 4: Complete los detalles restantes.

Por lo general, esta información son pequeños componentes asociados con la selección, como botones, listas desplegables, casillas de verificación o botones de relación de aspecto, pero también pueden incluir cuadros de texto o cualquier línea individual restante del texto del cuerpo. Si está esqueletizando varias pantallas que forman parte de un flujo, también puede tener barras de progreso y cuadros de diálogo. Asegúrese de agregar llamadas a la acción o mostrar énfasis, ya que estos detalles ayudan a otros a comprender su idea de diseño.

  • Las listas desplegables constan de un rectángulo y un signo de intercalación.
  • La casilla de verificación y los botones de opción tienen un cuadrado o un círculo, respectivamente, y una línea para representar el texto. Para mostrar la selección, las casillas de verificación deben tener una marca de verificación y los botones de opción se llenarán.
  • Los botones se pueden representar de diferentes formas. Por lo general, es mejor usar un rectángulo simple con una línea o flecha para indicar que el usuario está llevando a otro lugar. Sin embargo, para las llamadas a la acción, también agregue una etiqueta de texto para brindar información básica a otras personas que vean sus wireframes.
Componentes relacionados con la selección de dibujos: las listas desplegables se pueden dibujar abiertas o cerradas …
  • Los banners contienen una o dos líneas de texto con un botón asociado opcionalmente, o Cancelación icono.
  • Los cuadros de diálogo contienen un título, 1-2 líneas de texto, 1-2 botones y Cancelación icono.
  • Las barras de progreso son rectángulos redondeados que están parcialmente llenos para mostrar el tiempo de espera restante.
  • Los iconos se pueden representar de la misma forma que las imágenes (con X) o como líneas aproximadas (como mostramos aquí para los iconos de búsqueda). Si bien recomendamos etiquetas de texto para iconos en la interfaz de usuario final, la etiqueta se puede omitir para un marcador de posición de icono en una estructura alámbrica.
Representación de componentes informativos como pancartas, cuadros de diálogo o barras de progreso

A continuación, ilustraremos cómo estos pasos pueden conducir a una estructura alámbrica simple para una página de producto.

Paso 1: Dado que nuestro diseño es para una página web de escritorio, comenzamos con un lienzo en blanco del tamaño de la ventana general del navegador.

Paso 1. Determine la relación de aspecto correcta para nuestra estructura alámbrica.

Paso 2: Agregamos la barra superior de navegación y búsqueda a nuestro wireframe.

Paso 2: agregue navegación y búsqueda a nuestro wireframe. (La navegación y la búsqueda no necesitan ser detalladas, porque generalmente son secundarias a la estructura alámbrica, a menos que esté dibujando la estructura alámbrica para los flujos de búsqueda o navegación).

Paso 3: Dibuja el elemento de diseño más grande. Dado que la estructura alámbrica es una página de producto, en este paso nos centramos en mostrar información del producto, como el título, la descripción y las imágenes.

Paso 3: agregue algunos componentes comunes como un encabezado, una imagen grande, algunas imágenes pequeñas y algo de texto del cuerpo.

Paso 4: Agregue información adicional, como un cuadro desplegable para seleccionar opciones y un botón para agregar un producto a su carrito.

Paso 4: agregue los detalles restantes, como menús desplegables y botones, a nuestra estructura alámbrica. En la medida en Agregar El botón es la principal llamada a la acción en la página, no nos olvidamos de etiquetarlo.

Cualquiera, independientemente de su capacidad de dibujo, puede esbozar una estructura alámbrica para explorar posibles soluciones a problemas de diseño. Tome las cosas paso a paso y use componentes comunes para crear wireframes rápidos, desordenados pero útiles.

Happy
Happy
0
Sad
Sad
0
Excited
Excited
0
Sleepy
Sleepy
0
Angry
Angry
0
Surprise
Surprise
0
Previous post Tome las mejores decisiones de diseño a través de una lente de valor | Akshay Devazya | Junio ​​2021
Next post 5 mejores formas de crear contenido interesante para tu audiencia

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Deja una respuesta