Digital Studio

Caso de estudo · O nosso próprio site

Como construímos digitalstudio.world: oito idiomas, sem framework, sem rastreio

5 min de leituraWeb + Performance

8

idiomas, corretos desde o primeiro frame

O brief mais difícil que podíamos escrever

O site de um estúdio tem um único trabalho honesto: provar que o estúdio sabe fazer o trabalho. Qualquer um pode reivindicar ofício numa lista de serviços. Por isso tratámos o nosso próprio site como um projeto de cliente com o brief mais exigente que já escrevemos - uma viagem 3D guiada pelo scroll que pareça premium, pinte numa fração de segundo, fale oito idiomas desde o primeiro frame, mostre preços reais e respeite o visitante o suficiente para não o rastrear.

Este artigo explica a construção. Como tudo neste blog, é real e verificável - o site onde o está a ler é a prova.

Sem framework, de propósito

Cada página de digitalstudio.world é um ficheiro HTML autónomo. Não há framework, nem bundler, nem router no cliente. A viagem da página inicial - uma esfera de partículas que se transforma em onda e depois em galáxia ao fazer scroll - corre sobre three.js com uma biblioteca de scroll suave, e essa é toda a lista de dependências.

Não é nostalgia: é controlo. Quando nada é enviado sem ser usado, cada milissegundo de carregamento é nosso para gastar com intenção. O pipeline WebGL adapta-se ao dispositivo: os telemóveis recebem um campo de partículas mais leve, resolução reduzida e um brilho recalibrado, para que a mesma viagem continue fluida num aparelho intermédio. O loop de animação para assim que o separador fica oculto e devolve a memória GPU quando sai.

Oito idiomas sem flash em inglês

A maioria dos sites multilingues traduz no navegador: a página carrega em inglês, um script acorda e o texto pisca para português. Para um estúdio que vende localização, esse piscar é uma confissão de derrota.

Construímos ao contrário. O URL é o idioma: /de/, /fr/, /pl/. Um pequeno script de build lê uma fonte inglesa e um dicionário por idioma e emite 56 páginas estáticas totalmente localizadas - títulos, metadados, dados estruturados, até a moeda. Um visitante na Polónia vê preços em zlóti no primeiríssimo frame pintado, porque esse frame foi construído assim antes de sair do servidor.

  • Links antigos com ?lang= são redirecionados no edge, antes de qualquer código correr no navegador.
  • Uma preferência de idioma guardada encaminha-o para o seu idioma à chegada - não há frame inglês para piscar.
  • As páginas 404 e a página de agradecimento do brief existem em todos os idiomas.
  • Cada página tem um cluster hreflang completo e o seu próprio URL canónico, para que cada idioma posicione por si.

O build recusa-se a cooperar com erros: um script guardião analisa cada página antes da geração e falha o build se uma referência se partisse ao ser copiada para uma pasta de idioma - indicando ficheiro, linha e correção. Rigor mecânico e aborrecido - exatamente o que a localização precisa.

A velocidade como decisão de design

Para nós, rápido não é uma pontuação de Lighthouse; é um material de design. O primeiro paint do site cai entre cerca de 150 e 400 milissegundos nas nossas medições de laboratório, nas rotas que seguimos, em todos os idiomas - e o layout shift acumulado é exatamente zero, porque preços e etiquetas são renderizados no HTML em vez de injetados depois.

A lista sem glamour que o torna verdade: fontes auto-alojadas reduzidas ao necessário, assets estáticos com fingerprint no caminho e cache imutável de um ano, HTML que revalida em cada pedido para que um deploy fique logo visível, e uma única pequena função edge - o formulário do brief - como única peça móvel de todo o site.

Nota de honestidade: são medições de laboratório, com CPU limitada e caches frias. Não publicamos números de campo por uma razão simples - recolhê-los significaria rastreá-lo, e não o fazemos.

Nada o rastreia

Sem analytics. Sem cookies publicitários. Sem fingerprinting. A única coisa que este site guarda no seu dispositivo é a escolha de idioma, e o aviso que lho diz é o único banner que verá aqui. A content security policy está bloqueada à nossa própria origem - a página recusará carregar scripts de terceiros mesmo que algum dia um fosse injetado.

Testamos em laboratório em vez de medir visitantes. Custa-nos dados. Achamos que compra algo mais valioso.

O que ganha com isto

Tudo o que está acima é a mesma arquitetura que vendemos. A estrutura de pesquisa trilingue de Doggo Paradiso, o sprint de 21 dias da marca à produção de Maison Astral, a página de loja enviada para 175 países de Water Sommelier - tudo é feito das peças aqui descritas: páginas static-first, localização correta desde o primeiro frame e velocidade tratada como parte do design.

O nosso site é a primeira peça do nosso portfólio. A prova está nas suas mãos.

Quer um site construído assim - rápido, multilingue, respeitador? O brief pede apenas um campo.