Resumo

Este gerador de wireframe com IA permite esboçar um layout de página antes de abrir o editor de blocos do WordPress. Escolha um tipo de página como página de destino, postagem de blog, painel, página de produto, portfólio ou formulário de contato, escolha um estilo de layout (bandas empilhadas, grade de cartões ou barra lateral + coluna principal) e defina uma contagem de seções de dois a oito. A ferramenta redesenha caixas reais e proporcionais ao vivo, seguindo convenções UX estabelecidas como ordem de leitura em padrão F e padrão Z, portanto o esboço que você esboça já parece uma página, não um palpite.

Gerador de Wireframe com IA: Esboce Layout em Segundos

Este gerador de wireframe com IA gratis permite esboçar um layout de página antes de abrir o Gutenberg. Escolha um tipo de página, estilo de layout e número de seções. Um layout de caixa real de baixa fidelidade é redesenhado ao vivo.

Esboce um padrão

Esboce seu layout de página

Escolha o tipo de página que você está construindo, um estilo de layout para a área de conteúdo e quantas seções ele precisa. As caixas abaixo se atualizam a cada alteração.

Visualização de wireframe apenas. As caixas representam regiões de layout, não cópia ou imagem final.

Como este wireframe se mantém honesto

Construído em convenções de layout, não em palpites

Ordem de leitura em padrão F e padrão Z

As bandas de conteúdo empilhado seguem o padrão F que pesquisa de rastreamento ocular continua encontrando em páginas com mucho texto. Um herói centralizado com o título, subtítulo e chamada à ação em uma linha segue o padrão Z, a forma que o olho de um leitor traça em uma tela escassa e focada em decisão.

Predefinições de tipo de página construídas em convenções reais

Um painel mantém uma coluna de navegação esquerda persistente não importa o que mais mude, do jeito que os painéis administrativos são realmente construídos. Uma postagem de blog emparelha uma coluna de artigo principal com uma barra lateral. Uma página de produto se divide em galeria e uma caixa de compra acima da dobra, depois empilha seções de detalhe abaixo.

Matemática de grade que realmente responde

O layout da grade usa CSS auto-fill para que os cartões reflua por conta própria conforme a contagem de seções muda, e cada arranjo, grade, empilhado ou barra lateral, entra em colapso em uma coluna sob cerca de 480px de largura. Sem ajuste manual de ponto de interrupção para verificar em telefone.

Três configurações, um esboço

  1. 1

    1. Escolha o tipo de página

    Página de destino, postagem de blog, painel, página de produto, portfólio ou formulário de contato. Isso define o cabeçalho, a forma do herói e o rodapé para corresponder ao que esse tipo de página realmente precisa.

  2. 2

    2. Escolha um estilo de layout

    Bandas empilhadas, uma grade de cartões ou uma barra lateral ao lado de uma coluna principal. Cada tipo de página abre com o estilo que os construtores mais usam, e você pode sobrescrevê-lo.

  3. 3

    3. Defina a contagem de seções

    Deslize de duas a oito seções de conteúdo. O wireframe abaixo adiciona ou remove caixas ao vivo, mantendo o mesmo cabeçalho, herói e rodapé em vigor.

Um esboço que você pode colocar em frente a um cliente antes de tocar no Site Editor

Um wireframe tão áspero não se destina a sobreviver ao contato com cópia real. Ele se destina a fazer com que o esqueleto de uma página seja acordado rapidamente: quantas seções, o que fica acima da dobra, se o blog realmente precisa de uma barra lateral. Uma vez que esse esqueleto é definido, construir os blocos Group, Cover e Query Loop correspondentes no Site Editor é uma conversa muito mais curta, porque ninguém está discutindo sobre estrutura mais, apenas sobre as palavras e as imagens que ficam dentro dela.

  • Concorde sobre a contagem de seções antes de abrir o Site Editor
  • Mostre a um cliente dois estilos de layout na mesma chamada
  • Verifique a versão móvel na mesma tela que o esboço de desktop
Visualização aproximada de uma mão desenhando caixas de wireframe com uma caneta tinteiro e uma régua em papel

Perguntas comuns sobre o gerador de wireframe

Este gerador de wireframe com IA é gratuito?
Sim. Ele executa totalmente no seu navegador sem inscrição e sem limite de uso. Não há chamada de servidor: a matemática de layout ocorre no seu dispositivo no momento em que você move um controle.
Ele armazena ou envia minhas entradas para algum lugar?
Não. O tipo de página, o estilo de layout e a contagem de seções permanecem na memória da página apenas. Nada é escrito em um banco de dados e nada é enviado para um servidor, exceto um sinal de beacon de ferramenta anônimo usado para medir quantos visitantes experimentam a ferramenta.
De onde vêm esses padrões de layout?
A partir de pesquisas UX documentadas e amplamente citadas, em vez de adivinhação: os estudos de rastreamento ocular em padrão F e padrão Z (Nielsen Norman Group), a convenção de barra lateral de navegação persistente usada em painéis administrativos, o padrão de galeria dividida mais caixa de compra comum em páginas de produtos (uma descoberta do Baymard Institute) e o layout de coluna única que pesquisas de usabilidade consistentemente consideram se converter melhor para formulários curtos.
Posso exportar este wireframe como um padrão real do Gutenberg?
Não diretamente. Esta é uma etapa de planejamento, não um gerador de código: ajuda você a concordar sobre uma estrutura com um cliente ou um colega de equipe antes de abrir o Site Editor e construir os blocos Group, Cover e Query Loop correspondentes à mão.
Por que o tipo de página do painel sempre mantém uma barra lateral esquerda, não importa qual layout eu escolha?
Porque uma coluna de navegação persistente é uma convenção estrutural de painéis administrativos, não uma escolha estilística. O seletor de layout ainda muda a forma como os widgets dentro dele são organizados (uma grade de cartões ou uma lista empilhada), mas remover a coluna de navegação teria representado mal como os painéis reais são construídos.
Qual estilo de layout devo usar para uma página de destino?
Grade de cartões é o padrão para páginas de destino e portfólios, pois seções de recursos e projetos geralmente são digitalizáveis lado a lado. Bandas empilhadas convêm a uma página de produto ou formulário, onde você quer que os visitantes leiam uma coisa de cada vez.
O wireframe funciona em uma tela de telefone pequeno?
Sim. Cada layout entra em colapso em uma única coluna sob aproximadamente 480px de largura, incluindo a grade e o arranjo de barra lateral mais principal, para que você possa verificar um esboço móvel na mesma tela que o desktop.
Mais tipos de página serão adicionados mais tarde?
Página de destino, postagem de blog, painel, página de produto, portfólio e formulário de contato cobrem os tipos de página que os construtores de WordPress freelance esboçam com mais frequência. Se uma lacuna clara aparecer na prática, ela é adicionada à lista de predefinições.

Mais ferramentas do WordPress que valem a pena manter aberto em uma aba

O noonwp cobre Gutenberg, Full Site Editing e WordPress RTL para pessoas que entregam sites de clientes, não apenas leem sobre eles.

Abra o scriptorium
Noon