Dalcalc Website
Marca, design system e site para um escritório de engenharia estrutural, tudo construído com as regras de um desenho técnico.
Uma engenharia que precisa parecer o que é.
A Dalcalc trabalha com cálculo, norma e responsabilidade. O site precisava transmitir essa seriedade já na primeira tela sem parecer antiquado: rigor e contemporaneidade ao mesmo tempo.
- Credibilidade
- Ser levada a sério por incorporadoras, construtoras e arquitetos desde a primeira tela.
- Diferenciação
- Sair do padrão dos sites de engenharia sem perder a sobriedade do setor.
- Clareza
- Deixar evidente o que a Dalcalc faz, para quem e com que experiência.
Engenharia estrutural além da forma.
Antes do site, a marca. O branding partiu do briefing e do público, engenheiros, arquitetos, construtoras e empreiteiras, e apoiou a marca em três arquétipos, o Sábio, o Governante e o Criador, com um DNA de inovação, solidez, segurança e autoridade. A tagline resume: ir além do projeto, com conhecimento, responsabilidade e atenção aos detalhes.
Um símbolo desenhado como um diagrama estrutural.
O símbolo une o D de Dalcalc e o E de Engenharia a uma forma geométrica de elementos estruturais, vigas, pilares, treliças e lajes, e à curva de um gráfico de momento fletor. A Barlow compõe os títulos e a Albert Sans os textos, sobre uma paleta de azul profundo, concreto, cinza, preto e branco.
Do cartão de visita à fachada.
Estrutura e movimento.
O layout é tratado como estrutura, e o movimento é o que torna essa estrutura atual, sem nunca quebrar a regra. Todas as páginas seguem módulos de 1/4, 1/2 e 3/4 da largura da tela, com as linhas de divisão visíveis.
Quatro decisões que definiram o site.
- 01
Uma malha como uma estrutura.
Quartos, metades e três quartos da tela, com as linhas de divisão visíveis, como numa prancha técnica.
- 02
Texto com cara de prancha.
Títulos firmes em Barlow, a fonte da marca, e rótulos curtos em caixa alta, numerados como legendas de um desenho técnico.
- 03
Material, não ornamento.
Uma paleta de concreto, aço e preto, com fotos em preto e branco. O laranja aparece só onde há ação.
- 04
O selo como contato.
Em vez de um formulário, o cliente preenche o selo do seu projeto e envia para o engenheiro pelo WhatsApp.
286 variáveis, da cor ao tempo de cada movimento.
Cor, espaçamento, raio, layout, tipografia e movimento são todos variáveis. Trinta conjuntos de componentes somam 1.630 variantes, a maioria etapas de uma animação, para o protótipo se mover exatamente como o site vai se mover.
- 286
- variáveis em seis coleções
- 30
- conjuntos de componentes
- 1,630
- variantes, a maioria etapas de animação
- 18
- tokens de motion
Contemporâneo, mas com regra.
Todo movimento usa a mesma curva: começa contido, acelera e assenta com firmeza. Os tempos são fixos por tipo de elemento, e um estado novo empurra o anterior para fora em vez de se sobrepor, como uma carga que passa de uma peça para a seguinte.
Um estado novo empurra o anterior.
Links em 300 ms, botões em 500 ms, títulos e menu em 600 ms, imagens em 800 ms. As revelações acontecem por cortes, linhas e eixos, a linguagem do desenho técnico.
- Solicite um orçamentoSolicite um orçamento
07 /Botão push
O hover entra por cima e empurra o estado padrão, sem sobreposição · 500 ms
- →→
07 /Ícone push
Botões só de ícone empurram para o lado e entram em laranja · 500 ms
- Saiba mais→
08 /Botão link
Sublinhado e laranja no hover, a seta avança 4 px em direção ao destino · 300 ms
A melhor soluçãoestrutural paraa sua obra.
10 /Revelação do título
Uma faixa cruza cada linha da esquerda para a direita e deixa o texto para trás, linhas a 300 ms uma da outra
- 01 /PROJETO ESTRUTURAL
11 /Eyebrow embaralhado
Os rótulos embaralham as letras até a palavra se formar, como um cálculo chegando ao resultado · 50 ms por passo
- +mil m² em projetos · número de protótipo
11 /Contador
Os números em destaque contam a partir do zero e desaceleram no fim
- Sobre+A Dalcalc nasceu da demanda por projetos estruturais integrados em BIM.Para quemServiços
13 /Item de índice
Os itens abrem sob demanda: o + gira 45° e vira ×, e os itens abaixo são empurrados
14 /Zoom da imagem
As fotos aproximam 8% a partir do centro dentro da própria moldura; o texto sobre elas fica parado · 800 ms
29°10′S 51°11′W16 /Revelação em cruz
A imagem abre de um canto, puxada por dois eixos, com as coordenadas contando até o escritório
- DALCALCMenu ≡×SobrePara quemServiçosProjetosContato
09 /Menu sobreposto
O menu desliza da direita e mantém a página visível atrás · 600 ms
- 01 /PROJETO ESTRUTURALProjeto Estrutural
em BIMEstudamos as alternativas e indicamos a estrutura de melhor custo-benefício.12 /Serviços em sequência
A linha da malha é desenhada primeiro, depois o número, o rótulo, o título e o conteúdo se acomodam
- LOCALIZAÇÃONAVEGAÇÃOCONTATODALCALC
19 /Assinatura do rodapé
As colunas aparecem em cascata e a marca DALCALC sobe letra a letra
Construídos em volta do movimento.
30 conjuntos de componentes: botões que empurram seus estados, links com passo de 4 px, títulos revelados por uma tarja, contadores, itens de índice, imagens de material e os campos do selo do projeto.
- Button
Button
Quatro estilos, do mais forte ao mais discreto, com hover em push.
- Saiba mais
ButtonLink
Ações de baixo compromisso; a seta avança 4 px no hover.
- LABEL
Eyebrow
Rótulos curtos em caixa alta que se embaralham até se formar.
- CONCRETO
Badge
Status e categoria, na paleta da marca.
- A melhor solução estrutural
TitleReveal
Cada linha do título revelada por uma faixa que cruza.
- 10Anos de atuação
StatCard
Números em destaque que contam a partir do zero.
- Sobre×01 /A Dalcalc nasceu da demanda por projetos estruturais integrados em BIM.02 /Estudamos as alternativas e indicamos a estrutura de melhor custo-benefício.
IndexItem
Conteúdo longo que abre sob demanda e empurra a lista.
Nome do ProjetoProjectCard
Vitrine de projetos com zoom no hover.
MaterialImage
Fotos em preto e branco de cada material.
- LOGO
PartnerLogo
Logos de parceiros que crescem 15% e ficam brancos.
- CLIENTESelecione
StampField
Um campo do carimbo do projeto, preenchido.
- SERVIÇOConcreto armado
StampSelect
Listas de serviço, tipologia e área que abrem no clique.
Home
A home abre com a promessa, apresenta os serviços em sequência, a equipe com a revelação pela mira, os projetos selecionados e um rodapé assinado pela marca em grande escala.
Serviços
Cada sistema estrutural tem sua página: concreto, aço, madeira, concreto protendido e estrutura mista, além de gestão de obra e acompanhamento técnico.
As outras páginas
Sobre apresenta o engenheiro responsável e o escritório, os projetos podem ser filtrados por sistema estrutural e o contato é o selo do projeto.
Mobile
Toda página tem seu layout mobile em 390 px, mantendo as linhas da malha, os rótulos numerados e as mesmas regras de movimento.
Do protótipo ao site.
Os textos, números e fotos deste protótipo são provisórios. O site é construído em Next.js sobre o mesmo design system e as mesmas regras de movimento, e o conteúdo definitivo vem do briefing do cliente antes de ir ao ar.
- 1 · Briefing
- 2 · Content
- 3 · Implementation
- 4 · Publication
Obrigado pela leitura.
- Conceito, UI e motion
- Guilherme Conte
- Cliente
- Dalcalc Engenharia
- Ano
- 2026