--- title: "Do manual de marca ao site: as decisões por trás do site da Helsten" url: "https://leal.st/pt/artigos/helsten-do-manual-de-marca-ao-site" answer: "A Leal desenhou e construiu o site da Helsten, a maior empresa de facas e soluções de corte da América Latina, sob a direção da Tela Marketing. O site transforma a nova identidade em interface, dá a cada indústria a sua página, leva a linha técnica da marca para os ícones e o movimento, e é leve e fácil de achar no celular." author: "Leonardo Leal" publisher: "Leal" published: "2026-10-16T00:00:00.000Z" modified: "2026-10-16T00:00:00.000Z" language: "pt-BR" topic: "Desenvolvimento" --- # Do manual de marca ao site: as decisões por trás do site da Helsten A Leal desenhou e construiu o site da Helsten, a maior empresa de facas e soluções de corte da América Latina, sob a direção da Tela Marketing. O site transforma a nova identidade em interface, dá a cada indústria a sua página, leva a linha técnica da marca para os ícones e o movimento, e é leve e fácil de achar no celular. ## Em resumo - Uma identidade vira site usando as próprias ferramentas: as cores, a linha e a tipografia, sem nada a mais. - Uma página por indústria dá a quem compra uma entrada direta e ao time comercial um link para cada tipo de cliente. - O movimento mora num lugar só, onde a empresa conta a própria história. - Um filme mais leve no topo da home fez a página aparecer mais de um segundo antes no celular. A Helsten fabrica facas e soluções de corte industrial em São Paulo há mais de quarenta anos, para fábricas de tissue, papel e celulose, madeira, aço e papelão em toda a América Latina. Em 2025, a Tela Marketing conduziu o novo posicionamento e a nova identidade da empresa, e chamou a gente para desenhar e construir o site que ia lançar tudo isso. ## Do manual de marca para a tela A identidade da Tela Marketing se apoia numa ideia, transformação com precisão, e em poucas ferramentas exatas: um azul-marinho profundo, um azul claro tirado do logotipo, linhas finas e rótulos pequenos em letra monoespaçada, como as anotações de um desenho técnico. O site usa essas ferramentas e mais nada, então cada página já é Helsten antes de alguém ler uma palavra. ![O topo da home da Helsten numa tela de computador: um operador de óculos e protetor auricular numa máquina, sob a frase Transformação com precisão] ## Uma lâmina que se desenha A página Quem somos abre com o propósito da empresa dentro de um círculo. Conforme a página rola, o contorno de uma lâmina circular vai sendo desenhado em volta dele, linha a linha, até tudo assentar no meio da tela. É a única animação longa do site, e fica justamente onde a empresa conta a própria história. [video] ## Uma página para cada indústria Cada indústria que a Helsten atende tem a sua página: tissue, papel e celulose, madeira, metalurgia, papelão e uma para todo o resto. Cada página abre com uma fotografia daquela indústria, explica o que as facas fazem ali e lista os produtos. Quem compra cai direto no que importa para a sua fábrica, e o time comercial tem um link para mandar a cada tipo de cliente. ![Três telas do site da Helsten no celular, sobre azul claro: a home, o topo da página Papel e celulose e as células com os ícones dos produtos] ## Ícones do desenho técnico O que cada linha de produto faz de melhor aparece em células, cada uma com um ícone de traço desenhado para o site: uma serra, um facão voador, um rebolo, uma porca. Eles são feitos da mesma linha fina do resto da identidade, então até o menor detalhe pertence à marca. [video] ## O mesmo site no celular No celular, cada seção vira uma coluna só, as fotografias mantêm o peso e o menu abre sobre a tela inteira. Nada fica de fora da versão menor: as indústrias, os produtos e o contato estão a um toque. [video] ## Leve e fácil de achar O filme do topo da home ficou bem mais leve sem diferença visível, e a página agora aparece mais de um segundo antes no celular. Cada página tem título e descrição próprios nos resultados de busca, e os dados da empresa estão publicados no formato que o Google e os assistentes de IA leem direto. ![A página Quem somos do site da Helsten num tablet com teclado, o propósito da empresa dentro de um círculo fino] O site não parou no lançamento. Todo mês a gente revisa, age no que os números mostram e manda para a Helsten um relatório do que mudou. Direção do projeto pela Tela Marketing. Design e desenvolvimento do site pela Leal. [O case da Helsten](https://leal.st/work/helsten) ## O que medimos - **Tempo para o maior elemento da home da Helsten aparecer no celular**: 4.0 seconds. Lighthouse 13.5, celular, mediana de três medições em 6 de outubro de 2026, depois que o filme do topo da home passou de 10,4 MB para 3,7 MB. Em 2 de outubro, com o mesmo método, eram 5,6 segundos. (2026-10-06) --- Publicado por Leal (LEAL DESIGN OFFICE LTDA.), Curitiba, Brasil. Versao canonica: https://leal.st/pt/artigos/helsten-do-manual-de-marca-ao-site