TechCo.lab
O site público da TechCo.lab, o hub de inovação interno da NETZSCH. Desenhei e entreguei de ponta a ponta, sem handoff pra engenharia: conceito no Figma, seções no Figma Make, produção em código limpo escrito à mão.
Nós construímos
- Design → deploy
- Conduzido
- 0
- Handoffs pra engenharia
- 98
- Lighthouse
Desafio
A TechCo.lab é o hub de inovação da NETZSCH, e precisava de um site público que fizesse dois trabalhos ao mesmo tempo: explicar o que o hub constrói (plataformas conectadas, IA industrial, interfaces digitais) pro resto da empresa, e atrair o tipo de gente que ia querer trabalhar ali.
A restrição era real: nenhuma capacidade de engenharia alocada e uma janela apertada, mas a régua era qualidade de produção, não template. Tinha que parecer o trabalho que o hub de fato entrega.
Abordagem
Conduzi o stack inteiro. Desenhei no Figma, prototipei as seções mais carregadas de motion no Figma Make e depois portei tudo pra HTML/CSS limpo escrito à mão pro deploy de produção na Vercel. Sem CMS, sem peso de framework.
O hero se apoia numa linha de máquina de escrever, "Nós construímos…" alternando entre o que o hub faz, o que dá o tom antes do primeiro scroll. O resto é um arco claro: capacidades, prova, o espaço físico e os números (500+ usuários, 35+ países, 80+ projetos).
Resultado
No ar em ntechcolab.com com acabamento de produção: 98 no Lighthouse, contraste AA, motion que se segura no celular. É a referência que eu aponto pra full-stack conduzido pelo designer, o tipo de projeto pequeno mas de aposta real onde um handoff teria custado mais do que valia.
Pra quem eu desenhei
Dois públicos numa página só. Dentro da NETZSCH, a liderança e outras unidades que precisam entender o que o hub faz e por que importa. Fora, os engenheiros, designers e pessoas de dados que o hub quer contratar.
Esses dois puxam pra direções diferentes: um quer credibilidade e prova, o outro quer cultura e ambição. O site resolve isso começando pelo trabalho e pelos números, e fechando com o lugar e as pessoas.
A decisão-chave: ser dono do stack inteiro
O caminho de sempre é desenhar no Figma, passar pra um engenheiro, revisar, repetir. Sem capacidade de engenharia e com uma janela apertada, comprimi isso num dono único: Figma pro design, Figma Make pra prototipar o motion, código escrito à mão pra produção.
O hero de máquina de escrever e o motion de scroll foram feitos direto no código, não fingidos num mockup. Ser dono do deploy significava que eu mesmo podia afinar performance e contraste em vez de escrever um spec e torcer.
O que não foi bem
O Figma Make é ótimo pra explorar uma seção rápido, mas o código que ele gera é descartável. Reescrevi a maior parte na mão pro build de produção, e tratar o Make como ferramenta de prototipação em vez de fonte de código foi uma lição que aprendi no meio do projeto.
Manter o motion suave no mobile levou mais passadas do que eu esperava. Os efeitos de máquina de escrever e de scroll que pareciam sem esforço no laptop precisaram de afinação de verdade pra não travar no celular.
Telas selecionadas
" Ferramentas assistidas por IA deixam um designer levar um projeto do rascunho ao ar sem o abismo do handoff. O trabalho muda de "documentar o que construir" pra "construir, e usar o documento pra revisar". "
Garmin Coach
→Planos de treino em JSON gerados por um LLM, enviados direto pro Garmin Connect.