Página inicial da Roarch: a sala de estar é desenhada a lápis, vira render, e a cozinha é traçada em seguida

Sobre

A Roarch é o grupo das projetistas Rosana Inacio Leite e Ana Maria Leite: interiores comerciais, residenciais e mobiliário sob medida em Porto Alegre e região.

O site precisava mostrar mais de vinte anos de balcões refrigerados, cozinhas planejadas e lojas inteiras sem parecer catálogo de móveis, e deixar claro que o trabalho delas é técnico: medida, planta e detalhamento para a fábrica.

Projeto Apartamento Jardim: planta humanizada vista de cima com pontos numerados
Apartamento Jardim: a planta revela o render a partir dos pontos

Conceito

Do traço ao espaço vivido. O site é uma prancha técnica: papel, régua milimetrada nas bordas, cotas e carimbo. Todo projeto começa como linha e termina como lugar, e a navegação conta essa história.

A tipografia segue a prancha: Instrument Serif nos títulos, Geist Mono nas anotações e a terracota como a tinta de marcação do desenho.

Planta baixa desenhada em traço preto sobre papel, com quartos, sala e banheiro
A planta se monta no scroll: paredes, mobiliário e cotas
Frase Para o projeto inteiro em serifada condensada com peças de madeira espalhadas
Manifesto: as peças soltas se encaixam até virar desenho

Interações

Cada interação mostra uma etapa do trabalho delas, não um efeito pelo efeito:

  • HeroClique e arraste para ver o desenho técnico sob o render
  • PlantaMedidas soltas viram paredes, mobiliário e cotas no scroll
  • ProjetosMáscara circular revela render e obra sobre a planta
  • CozinhaModelo 3D em Three.js, do esboço ao acabamento
  • TemaAlterna entre o papel e a cianotipia
Cozinha Freijó: o modelo 3D se constrói no scroll, do esboço aos materiais
Página inicial da Roarch no tema blueprint, com fundo azul e traço claro
O tema cianotipia, lembrado no navegador de quem escolheu
Projeto Açougue Boutique: foto do balcão refrigerado revelada sobre a planta
Açougue Boutique: a obra aparece por cima da planta

Marca

Criei também a marca da Roarch. Ela nasce do desenho que as projetistas fazem todo dia, a planta baixa: um cômodo visto de cima, com as paredes em traço grosso e uma porta aberta.

Da planta sobrou só o essencial: um quadrado, paredes de mesma espessura e a abertura da porta. A porta é a única linha que não é parede, por isso vai em terracota, a tinta de marcação da prancha. Ao lado, o nome em Instrument Serif itálico.

01 Planta baixa
02 O cômodo
03 Medidas
04 A marca
Construção da marca em quatro pranchas: a planta baixa de um apartamento com um quarto destacado, o quarto sozinho com a porta aberta, as medidas sobre uma grade e a marca final
  • Papel
  • Cianotipia
  • Nanquim
A marca da Roarch ao lado do nome em serifada itálica, e o ícone nas versões papel, cianotipia e nanquim
Página inicial da Roarch no celular
No celular, o mesmo papel e a mesma régua

Instrument Serif

Títulos

Geist

Texto

Geist Mono

Anotações técnicas

  • Papel

    #f5f1e9

  • Papel fundo

    #ece5db

  • Nanquim

    #1a1814

  • Grafite

    #5f5a54

  • Terracota

    #b4532f

  • Cianotipia

    #132741

Identidade visual: tipografia e paleta
Índice de projetos com fotos de apartamentos, açougues, cozinhas e adegas
Índice de projetos, de residenciais a refrigeração comercial

Pronto para trazer clientes

Bonito não basta: o site precisa ser encontrado e virar conversa. Por isso cada página foi preparada para o Google e para o compartilhamento, e o contato já chega com o que as projetistas precisam para orçar.

Feito em Next.js, com GSAP e Three.js no movimento e no 3D.

  • GooglePáginas e mapa do site preparados para a busca
  • CompartilhamentoCada página gera a própria prévia no WhatsApp e nas redes
  • BriefingTipo de espaço, prazo e orçamento antes da primeira conversa
  • IdiomasPortuguês e inglês, cada um no seu endereço
  • ImpressosCartões de visita gerados pelo próprio site, em PDF
  • AcessibilidadeMenos animação para quem prefere

Seu projeto

Precisa de algo assim para o seu negócio? Me conte como ele funciona hoje e eu volto com uma proposta.

gustavoleite.dev@gmail.com

Próximo projetoNicellGestão para assistências técnicas