Marina Vale
Um estúdio de arquitetura que se apresenta como seus projetos: com calma, luz e estrutura
01. O DESAFIO E DIAGNÓSTICO ESTRUTURAL
Marina Vale é um estúdio fictício de arquitetura e interiores criado pela BAZE como projeto autoral. A premissa: um escritório boutique, fundado em 2012, com equipe enxuta e foco em poucos projetos residenciais por vez.
O ponto de partida foi um padrão recorrente no setor. A maioria dos sites de escritórios de arquitetura funciona como um álbum de fotos: um grid de imagens bonitas, pouca hierarquia e quase nenhuma orientação para quem chega querendo entender o que o estúdio faz, como trabalha e por onde começar. O resultado é uma vitrine que impressiona mas não conduz.
O desafio foi desenhar a presença digital de um estúdio que vende algo intangível (confiança para entregar uma casa inteira) e transformar isso em uma experiência que conta uma história, organiza a oferta e leva o visitante até o contato sem perder a sofisticação que o alto padrão exige.
02. INTELIGÊNCIA DE PRODUTO & DECISÕES DE UX/UI
Mapeamos como clientes de alto padrão escolhem um escritório de arquitetura: primeiro pela sensibilidade estética, depois pela confiança no processo e, por último, pela proximidade com quem assina o projeto. A arquitetura de informação foi construída para responder a essas três perguntas, nessa ordem.
O sistema visual se apoia em três princípios:
A home abre com um hero em capítulos, não com um grid. Cada slide é uma cena com começo, meio e fim, e o visitante entende o estúdio, vê um projeto e conhece o processo antes mesmo de rolar a página.
Uma sans-serif de grande escala com espaçamento apertado estrutura os títulos, enquanto uma serifa itálica aparece em uma única palavra por frase (durar, luz, atento). O contraste dá ritmo de revista e cria assinatura sem precisar de ornamento.
Serviços e forma de trabalho foram separados em camadas claras, para que o visitante saiba exatamente o que o estúdio entrega e como entrega, sem precisar caçar a informação.
03. O QUE FOI CONSTRUÍDO
Hero Narrativo em Três Capítulos
O hero funciona como um filme curto dividido em capítulos (01 Estúdio, 02 Casa Aroeira, 03 Processo), cada um com rótulo, título, CTA próprio e barra de progresso. O CTA muda conforme o contexto: “Ver projetos” e “Assistir ao filme” na apresentação, “Conhecer o projeto” no projeto em destaque. O controle de pausa sempre visível respeita quem quer ler com calma e atende a boas práticas de acessibilidade para conteúdo em movimento.
Mega Menu com Arquitetura em Duas Camadas
No desktop, o menu de Serviços se abre em um painel organizado em duas colunas: “O que faço” (Arquitetura residencial, Design de interiores, Retrofit & reforma, Consultoria de projeto) e “Como trabalho” (Processo, Estúdio, Depoimentos). Ao lado, um card editorial do Journal (“Interiores que respiram”) transforma a navegação em ponto de descoberta de conteúdo. O fundo escurece ao abrir o painel, mantendo o foco sem tirar o visitante da página.
Header Adaptativo
O header é transparente sobre o hero, com logo e texto em branco, e se torna sólido em off-white quando um menu é aberto. O botão “Contato” acompanha a mudança, invertendo de claro para escuro, e permanece como CTA fixo de conversão em qualquer ponto da navegação.
Seção Estúdio com Prova de Autoridade
A seção “Pequeno por escolha, atento por natureza.” apresenta o estúdio em primeira pessoa, reforçando a proximidade com quem assina o projeto. Logo abaixo, três indicadores (projetos entregues, anos de estúdio e prêmios nacionais) funcionam como prova de autoridade em leitura de um segundo.
04. PERFORMANCE MOBILE-FIRST
Clientes de arquitetura de alto padrão costumam conhecer escritórios pelo Instagram e chegar ao site pelo celular. Por isso a experiência mobile foi desenhada como produto principal, e não como adaptação do desktop.
- Menu em tela cheia: itens em tipografia de grande escala, fáceis de tocar e coerentes com a linguagem editorial do site.
- Acordeão de submenus: Serviços e Projetos se expandem no próprio menu com indicador +/−, mantendo a hierarquia do mega menu sem trocar de tela.
- Contato sempre à mão: e-mail e localização ficam no rodapé do menu, acessíveis sem precisar navegar até a página de contato.
- Hero imersivo: os capítulos mantêm título, CTA e barra de progresso legíveis sobre a imagem, com controle de pausa adaptado ao toque.
05. O QUE O CONCEITO DEMONSTRA
Marina Vale é um exercício de como um site de arquitetura pode deixar de ser um portfólio estático e passar a funcionar como uma apresentação guiada: primeiro emociona, depois organiza, por fim convida.
O projeto reúne as decisões que a BAZE aplica em marcas de alto padrão: narrativa visual no lugar de excesso de informação, arquitetura de navegação que fala a língua do cliente e uma interface que trata o celular como porta de entrada principal.