Sobre o site

Descrição do site

o site adota uma linguagem visual limpa e centrada em conteúdo, com forte uso de espaço em “branco” ou “cinza escuro”, tipografia legível e hierarquia bem definida. a paleta é reduzida e consistente, baseada principalmente em branco (#FFF), tons de cinza escuro (#212529) e verde institucional (#005757). ), que atua como cor de destaque para links, ícones e elementos de navegação. A estrutura das páginas segue um padrão claro e reutilizável, organizado em três grandes blocos:

Cabeçalho

Presente em todas as páginas, o cabeçalho concentra:

• logotipo textual “wb· wagner beethoven”;
• navegação principal com links para página inicial, conteúdo, sobre e contato;
• ícones de acesso rápido a plataformas externas (perfil do @focoacessivel no youtube, spotify);
• seletor de tema (claro/escuro) e botão para acessar todas as páginas do menu;
• indicadores de estado ativo na navegação, com destaque visual simples e direto.

Em páginas internas, o cabeçalho é complementado por breadcrumbs, reforçando orientação e contexto de navegação.

Conteúdo

A área central é o foco do site e se adapta conforme o tipo de página, mantendo sempre o mesmo grid e lógica estrutural:

• Página inicial: introdução pessoal com headline forte (“Olá, sou wagner”), texto curto de posicionamento e imagem em destaque. Abaixo, cards de atalho para projetos, trajetória e contato;
• Páginas de listagem (conteúdo, projetos, apresentações): organização em cards, com imagem de capa, título, data, breve descrição e chamada para leitura. O grid é responsivo e mantém espaçamento confortável entre os elementos;
• Páginas de conteúdo textual (posts e projetos): seguem um padrão editorial: banner ou mídia principal no topo, metadados (data, tempo de leitura, local), e corpo do texto em coluna única. Em projetos mais extensos, há um índice navegável que facilita o acesso às seções internas.
• Páginas de apresentações e palestras: O conteúdo é incorporado diretamente via plataformas externas, como Speaker Deck e Youtube, mantendo a identidade visual do site ao redor do embed.
• Rodapé: o rodapé encerra todas as páginas com:
  • Informações de autoria e período do site;
  • Links sociais;
  • Referência musical em execução;
  • Acesso a páginas institucionais, como declaração de acessibilidade e política de privacidade;
  • Em algumas seções, o rodapé também reforça conexões com o projeto foco acessível.

Padrões de interface e experiência

• Tipografia sem serifa, com hierarquia clara entre títulos, subtítulos e corpo de texto;
• Uso consistente de cards com bordas suaves e espaçamento interno generoso;
• Ícones lineares e discretos como apoio semântico, não decorativo;
• Foco em leitura confortável, com linhas curtas e bom contraste;
• Navegação previsível e estável entre diferentes tipos de conteúdo;
• Integração natural com plataformas externas sem quebrar a experiência.

Propósito

O site funciona como um repositório central da produção profissional, intelectual e autoral de Wagner Beethoven. Reúne projetos, textos, palestras e iniciativas ligadas a design, produto, acessibilidade e tecnologia, servindo tanto como portfólio quanto como espaço editorial e de reflexão.

Informações técnicas

As tecnologias e ferramentas utilizadas na construção deste site incluem:

• Tipografia: Source Sans 3 (Google Fonts)
• Ferramenta: Visual Studio Code
• Gerenciador de domínio: Hostinger
• Linguagem utilizada: HTML, CSS e JavaScript
• Gerador de site: WordPress
• Hospedagem: Hostinger (comprando pelo link, você ganha 20% off 😁)
• Framework utilizado: Bootstrap (desde a versão 1.0, facilitando meu front-end 💜)
• Ícone: Font Awesome 6

Meu set-up

Menções

• Está página existe graças à conversa que tive com Bruno Pulis no Foco Acessível — essa troca de ideias mudou completamente minha visão sobre a web.
• Meu sincero agradecimento a Mark Otto e Fat pelo desenvolvimento do Bootstrap.
• Derek Sivers por ter criado o /nownownow.
• O tema do meu site foi criado por mim e ao longo dos anos foi sendo modificado. Antes feito em Jekyll, mas a estrutura que estou usando agora é por conta do Blankslate do Bryan Hadaway.