Pular para o conteúdo principal

Direção de Design

O passo Direção de Design permite rever, refinar e finalizar o design visual do seu tema antes de o Theme Builder gerar o tema completo.

Visão geral​

Depois de concluir a Entrevista de Descoberta, o Theme Builder apresenta a sua direção de design com renderização de pré-visualização para desktop e mobile. Isto permite-lhe ver exatamente como o seu design ficará em diferentes dispositivos antes de avançar com o tema.

Componentes da Direção de 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 realce para elementos importantes
  • Cores neutras — cinzentos e brancos para fundos e texto
  • Cor do texto — cor principal do texto para legibilidade

2. Tipografia​

Seleções de fontes para:

  • Fonte de títulos — usada para títulos de páginas e cabeçalhos de secções
  • Fonte do corpo — usada para texto de parágrafos e conteúdo
  • Tamanhos de fonte — dimensionamento responsivo para diferentes tamanhos de ecrã
  • Altura da linha — espaçamento entre linhas para legibilidade
  • Pesos da fonte — variações em negrito, regular e leve

3. Layout e espaçamento​

  • Largura do contentor — largura máxima para o conteúdo
  • Padding e margens — espaçamento à volta dos elementos
  • Sistema de grelha — layout de colunas para design responsivo
  • Espaçamento de componentes — distância entre elementos da UI

4. Elementos visuais​

  • Estilos de botões — designs de botões primários, secundários e terciários
  • Designs de cartões — layouts para blocos de conteúdo
  • Ícones — estilo e dimensionamento de ícones
  • Bordas e sombras — profundidade visual subtil
  • Efeitos de hover — estilo de estado interativo

Renderização de pré-visualização​

Pré-visualização em desktop​

A pré-visualização em desktop mostra o seu design em largura total (normalmente 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é-visualização em mobile​

A pré-visualização em mobile mostra o seu design em largura mobile (normalmente 375px):

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

Breakpoints responsivos​

O Theme Builder renderiza pré-visualizações nestes breakpoints:

DispositivoLarguraPré-visualização
Mobile375pxTelemóvel em retrato
Tablet768pxTablet em paisagem
Desktop1200pxDesktop em largura total
Large Desktop1920pxEcrã ultra largo

Refinar o seu design​

Fazer ajustes​

Pode refinar a sua direção de design ao:

  1. Ajustar cores — alterar qualquer cor na paleta
  2. Alterar fontes — selecionar tipos de letra diferentes
  3. Modificar espaçamento — ajustar padding e margens
  4. Atualizar layout — alterar larguras de contentor e colunas da grelha
  5. Personalizar elementos — modificar estilos de botões, designs de cartões, etc.

Atualizações da pré-visualização​

As alterações são refletidas em tempo real:

  • A pré-visualização em desktop atualiza imediatamente
  • A pré-visualização em mobile atualiza imediatamente
  • Todos os breakpoints responsivos são atualizados
  • Pode alternar entre pré-visualizações para verificar as alterações

Vista de comparação​

Compare a sua direção de design com:

  • Design original — veja o que mudou
  • Designs de concorrentes — compare com sites de inspiração
  • Versões anteriores — reverta para direções de design anteriores

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

Quando estiver satisfeito com o seu design:

  1. Reveja ambas as pré-visualizações — verifique se desktop e mobile têm bom aspeto
  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. Aprove o design — prossiga para a geração do tema

Próximos passos​

Depois de aprovar a sua direção de design:

  1. O Theme Builder gera o seu tema completo
  2. O tema é instalado no seu site WordPress
  3. Pode personalizar mais usando o personalizador do WordPress
  4. Prossiga para Menus de Hotelaria ou outras funcionalidades

Boas práticas​

  • Teste em dispositivos reais — use telemóveis e tablets reais, se possível
  • Verifique a legibilidade — garanta que o texto é legível em todos os tamanhos
  • Verifique o contraste — use Validar Contraste da Paleta para acessibilidade
  • Considere o desempenho — otimize imagens e fontes para velocidade
  • Planeie para o conteúdo — garanta que o layout funciona com o seu conteúdo real

Resolução de problemas​

Pré-visualização não atualiza​

  • Atualize a página
  • Limpe a cache do navegador
  • Experimente um navegador diferente
  • Verifique a ligação à internet

As cores parecem diferentes​

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

Problemas de tipografia​

  • Verifique se os ficheiros de fonte estão a carregar
  • Verifique o tamanho da fonte em diferentes breakpoints
  • Teste com conteúdo real
  • Considere o comprimento da linha para legibilidade