Pular para o conteúdo principal

Direção do Design

O passo Direção do Design permite que você revise, refine e finalize o design visual do seu tema antes que o Theme Builder gere o tema completo.

Visão Geral​

Após concluir a Entrevista de Descoberta, o Theme Builder apresenta sua direção de design com visualização de prévia para desktop e mobile. Isso permite que você veja exatamente como seu design ficará em diferentes dispositivos antes de finalizar o tema.

Componentes da Direção do Design​

1. Paleta de Cores​

O esquema de cores do seu tema, incluindo:

  • Cor primária — cor principal da marca usada para botões, links e destaques
  • Cor secundária — cor complementar para variedade
  • Cor de destaque — cor de destaque para elementos importantes
  • Cores neutras — cinzas e brancos para fundos e textos
  • Cor do texto — cor principal do texto para garantir a legibilidade

2. Tipografia​

Seleções de fontes para:

  • Fonte para títulos — usada para títulos de página e cabeçalhos de seção
  • Fonte para o corpo do texto — usada para parágrafos e conteúdo
  • Tamanhos de fonte — dimensionamento responsivo para diferentes tamanhos de tela
  • Entrelinha — espaçamento entre linhas para melhor leitura
  • Pesos da fonte — variações em negrito, regular e leve

3. Layout e Espaçamento​

  • Largura do container — largura máxima para o conteúdo
  • Preenchimento (padding) e margens — espaçamento ao redor dos elementos
  • Sistema de grade — layout em colunas para design responsivo
  • Espaçamento de componentes — distância entre os elementos da interface (UI)

4. Elementos Visuais​

  • Estilos de botão — designs para botões primários, secundários e terciários
  • Designs de card — layouts para blocos de conteúdo
  • Ícones — estilo e dimensionamento dos ícones
  • Bordas e sombras — profundidade visual sutil
  • Efeitos de hover — estilos para estados interativos

Visualização de Prévia​

Prévia Desktop​

A prévia desktop mostra seu design em largura total (geralmente 1200px ou mais):

  • Menu de navegação completo
  • Layout completo com todas as colunas
  • Tipografia e espaçamento grandes
  • Todos os elementos visuais em tamanho total

Prévia Mobile​

A prévia mobile mostra seu design em largura de celular (geralmente 375px):

  • Navegação responsiva (menu hambúrguer)
  • Layout de coluna única
  • Tipografia e espaçamento ajustados
  • Tamanhos de botão amigáveis ao toque

Pontos de Quebra Responsivos​

O Theme Builder renderiza prévias nestes pontos de quebra:

DispositivoLarguraPrévia
Mobile375pxTelefone retrato
Tablet768pxTablet paisagem
Desktop1200pxDesktop de largura total
Desktop Grande1920pxDisplay ultra-wide

Refinando Seu Design​

Fazendo Ajustes​

Você pode refinar sua direção de design fazendo o seguinte:

  1. Ajustando cores — mude qualquer cor na paleta
  2. Alterando fontes — selecione diferentes tipos de letra
  3. Modificando espaçamento — ajuste preenchimento e margens
  4. Atualizando layout — mude larguras de container e colunas de grade
  5. Personalizando elementos — modifique estilos de botão, designs de card, etc.

Atualizações da Prévia​

As mudanças são refletidas em tempo real:

  • A prévia desktop é atualizada imediatamente
  • A prévia mobile é atualizada imediatamente
  • Todos os pontos de quebra responsivos são atualizados
  • Você pode alternar entre as prévias para verificar as mudanças

Visualização Comparativa​

Compare sua direção de design com:

  • Design original — veja o que mudou
  • Designs de concorrentes — compare com sites de inspiração
  • Versões anteriores — retorne a direções de design mais antigas

Aprovação da Direção do Design​

Quando você estiver satisfeito com o seu design:

  1. Revise ambas as prévias — verifique se o desktop e o mobile estão bons
  2. Verifique todas as cores — garanta contraste e acessibilidade
  3. Teste a tipografia — verifique a legibilidade em todos os tamanhos
  4. Confirme o layout — verifique espaçamento e alinhamento
  5. Aprovar design — prossiga para a geração do tema

Próximos Passos​

Após aprovar sua direção de design:

  1. O Theme Builder gera seu tema completo
  2. O tema é instalado no seu site WordPress
  3. Você pode personalizar ainda mais usando o customizador do WordPress
  4. Prossiga para Hospitality Menus ou outros recursos

Melhores Práticas​

  • Teste em dispositivos reais — use celulares e tablets de verdade, se possível
  • Verifique a legibilidade — garanta que o texto seja legível em todos os tamanhos
  • Verifique o contraste — use Validate Palette Contrast para acessibilidade
  • Considere o desempenho — otimize imagens e fontes para velocidade
  • Planeje o conteúdo — garanta que o layout funcione com o seu conteúdo real

Solução de Problemas​

Prévia Não Atualiza​

  • Atualize a página
  • Limpe o cache do navegador
  • Tente um navegador diferente
  • Verifique a conexão com a internet

Cores Parecem Diferentes​

  • Verifique as configurações de cor do monitor
  • Tente em diferentes dispositivos
  • Verifique o contraste de cor com ferramentas de acessibilidade
  • Considere simuladores de daltonismo

Problemas de Tipografia​

  • Verifique se os arquivos de fonte estão carregando
  • Verifique o tamanho da fonte em diferentes pontos de quebra
  • Teste com conteúdo real
  • Considere o comprimento da linha para melhor leitura

Documentação Relacionada​