Resumen

Este generador de wireframes con IA te permite bloquear un diseño de página antes de abrir el editor de bloques de WordPress. Elige un tipo de página como página de destino, entrada de blog, panel de control, página de producto, portafolio o formulario de contacto; selecciona un estilo de diseño (bandas apiladas, cuadrícula de tarjetas o barra lateral más contenido principal); y establece un número de secciones de dos a ocho. La herramienta redibuja cuadros reales y proporcionados en tiempo real, siguiendo convenciones de UX establecidas como el patrón F y el patrón Z de lectura, para que el borrador que esbozas ya se lea como una página, no como una suposición.

Generador de Wireframes con IA: Diseña Maquetas de Página en Segundos

Elige un tipo de página, un estilo de diseño y un número de secciones. Una verdadera maqueta baja en fidelidad se redibuja en tiempo real, antes de colocar un solo bloque de Gutenberg.

Draft a pattern

Dibuja tu diseño de página

Elige el tipo de página que estás construyendo, un estilo de diseño para el área de contenido y cuántas secciones necesita. Los cuadros de abajo se actualizan con cada cambio.

Solo vista previa de maqueta. Los cuadros representan regiones de diseño, no texto o imágenes finales.

Cómo esta maqueta se mantiene honesta

Construida sobre convenciones de diseño, no sobre suposiciones

Orden de lectura con patrón F y patrón Z

Las bandas de contenido apilado siguen el patrón F que la investigación de seguimiento ocular sigue encontrando en páginas con mucho texto. Un héroe centrado con el titular, subtítulo y llamada a la acción en una fila sigue el patrón Z en su lugar, la forma en que el ojo del lector rastrea una pantalla dispersa y orientada a la decisión.

Ajustes preestablecidos de tipo de página construidos en convenciones reales

Un panel de control mantiene una columna de navegación izquierda persistente sin importar qué más cambie, de la manera en que se construyen realmente los paneles de administración. Una entrada de blog empareja una columna de artículo principal con una barra lateral. Una página de producto se divide en una galería y un cuadro de compra encima del pliegue, luego apila secciones de detalle debajo.

Matemática de cuadrícula que realmente responde

El diseño de cuadrícula utiliza CSS auto-fill para que las tarjetas se refluyan por sí solas a medida que cambia el número de secciones, y cada disposición, cuadrícula, apilada o barra lateral, se contrae a una columna bajo aproximadamente 480px de ancho. Sin ajuste manual de puntos de quiebre para verificar en un teléfono.

Tres configuraciones, un borrador

  1. 1

    1. Elige el tipo de página

    Página de destino, entrada de blog, panel de control, página de producto, portafolio o formulario de contacto. Esto establece el encabezado, la forma del héroe y el pie de página para que coincida con lo que ese tipo de página realmente necesita.

  2. 2

    2. Selecciona un estilo de diseño

    Bandas apiladas, una cuadrícula de tarjetas o una barra lateral junto a una columna principal. Cada tipo de página se abre con el estilo hacia el que la mayoría de los constructores se inclinan, y puedes anularlo.

  3. 3

    3. Establece el número de secciones

    Desplázate desde dos a ocho secciones de contenido. La maqueta a continuación añade o elimina cuadros en vivo, manteniendo el mismo encabezado, héroe y pie de página en su lugar.

Un borrador que puedes mostrar a un cliente antes de tocar el Site Editor

Una maqueta tan aproximada no está destinada a sobrevivir el contacto con la copia real. Está destinada a que el esqueleto de una página se acuerde rápidamente: cuántas secciones, qué se sienta arriba del pliegue, si el blog realmente necesita una barra lateral. Una vez que ese esqueleto se establece, construir los bloques Group, Cover y Query Loop coincidentes en el Site Editor es una conversación mucho más corta, porque nadie está discutiendo sobre la estructura, solo sobre las palabras y las imágenes que van dentro.

  • Acuerda el número de secciones antes de abrir el Site Editor
  • Muestra a un cliente dos estilos de diseño en la misma llamada
  • Verifica la versión móvil en la misma pantalla que el borrador de escritorio
Detalle de una mano dibujando cuadros de wireframe con una pluma estilográfica y una regla en papel

Preguntas frecuentes sobre el generador de wireframes

¿Es este generador de wireframes con IA gratuito?
Sí. Se ejecuta completamente en tu navegador sin registro y sin límite de uso. No hay llamada al servidor: la matemática del diseño sucede en tu dispositivo en el momento en que mueves un control.
¿Almacena o envía mis entradas a algún lugar?
No. El tipo de página, estilo de diseño y número de secciones se mantienen solo en la memoria de la página. Nada se escribe en una base de datos y nada se envía a un servidor, excepto una señal anónima de uso de herramienta utilizada para medir cuántos visitantes prueban la herramienta.
¿De dónde vienen estos patrones de diseño?
De investigación documentada y ampliamente citada sobre UX en lugar de especulación: los estudios de seguimiento ocular del patrón F y patrón Z (Nielsen Norman Group), la convención de barra lateral persistente utilizada en paneles de control (una conclusión de Nielsen Norman Group del 2006 y reafirmada en seguimiento de 2017), el patrón de galería dividida más cuadro de compra común en páginas de producto (un hallazgo del Instituto Baymard), y el diseño de columna única que la investigación de usabilidad encontró de manera consistente que se convierte mejor para formularios cortos.
¿Puedo exportar esta maqueta como un patrón real de Gutenberg?
No directamente. Este es un paso de planificación, no un generador de código: te ayuda a acordar una estructura con un cliente o un compañero de equipo antes de abrir el Site Editor y construir los bloques Group, Cover y Query Loop coincidentes a mano.
¿Por qué el tipo de página del panel de control siempre mantiene una barra lateral izquierda, sin importar qué diseño elija?
Porque una columna de navegación persistente es una convención estructural de los paneles de control, no una opción estilística. El selector de diseño aún cambia cómo se organizan los widgets dentro de él (una cuadrícula de tarjetas o una lista apilada), pero eliminar la columna de navegación tergiversaría cómo se construyen los paneles de control reales.
¿Qué estilo de diseño debo usar para una página de destino?
Grid de tarjetas es el predeterminado para páginas de destino y portafolios, ya que las secciones de características y proyectos generalmente se pueden explorar lado a lado. Las bandas apiladas son adecuadas para una página de producto o un formulario, donde deseas que los visitantes lean una cosa a la vez.
¿Funciona la maqueta en una pantalla de teléfono pequeño?
Sí. Cada diseño se contrae a una sola columna bajo aproximadamente 480px de ancho, incluida la cuadrícula y la disposición barra lateral más contenido principal, para que puedas verificar un borrador móvil en la misma pantalla que uno de escritorio.
¿Se añadirán más tipos de página más adelante?
Página de destino, entrada de blog, panel de control, página de producto, portafolio y formulario de contacto cubren los tipos de página que los constructores freelance de WordPress diseñan más frecuentemente. Si aparece una brecha clara en la práctica, se añade a la lista de ajustes preestablecidos.

Más herramientas de WordPress que vale la pena mantener abiertas en una pestaña

noonwp cubre Gutenberg, Full Site Editing y WordPress RTL para personas que lanzan sitios de clientes, no solo los leen.

Open the scriptorium
Noon