UI/UX DESIGN & ARQUITETURA DE INFORMAÇÃO

CR Fundações

Fundações para construção civil

UI Design

Arquitetura da Informação

Site Institucional

Direcionamento de Marca

Perfuratriz azul em um terreno preparado para construção, cercado por vegetação e colinas verdes sob um céu dramático com nuvens coloridas pelo entardecer.

Cliente

CR Fundações

Função

UI/UX Design · Arquitetura de Informação · Direcionamento Visual

Função

UI/UX Design · Arquitetura de Informação · Direcionamento Visual

Ferramentas

Figma · Framer

Ano

2025

O desafio

Uma construtora B2B sem nenhuma presença digital

A CR Fundações é especialista em fundações (hélice contínua monitorada, estaca escavada) para obras de construtoras e engenheiros no Sul de Minas. Antes deste projeto, o reconhecimento da empresa vinha só de indicação boca a boca: perfil vago no Google Meu Negócio, sem avaliações, sem site, sem rede social ativa. O diagnóstico revelou concorrentes com presença digital fraca ou inexistente: uma oportunidade real de ocupar esse espaço antes deles.

O desafio

Uma construtora B2B sem nenhuma presença digital

A CR Fundações é especialista em fundações (hélice contínua monitorada, estaca escavada) para obras de construtoras e engenheiros no Sul de Minas. Antes deste projeto, o reconhecimento da empresa vinha só de indicação boca a boca: perfil vago no Google Meu Negócio, sem avaliações, sem site, sem rede social ativa. O diagnóstico revelou concorrentes com presença digital fraca ou inexistente: uma oportunidade real de ocupar esse espaço antes deles.

O desafio

Uma construtora B2B sem nenhuma presença digital

A CR Fundações é especialista em fundações (hélice contínua monitorada, estaca escavada) para obras de construtoras e engenheiros no Sul de Minas. Antes deste projeto, o reconhecimento da empresa vinha só de indicação boca a boca: perfil vago no Google Meu Negócio, sem avaliações, sem site, sem rede social ativa. O diagnóstico revelou concorrentes com presença digital fraca ou inexistente: uma oportunidade real de ocupar esse espaço antes deles.

A abordagem

Ocupar espaço onde os concorrentes não estavam

Direcionei identidade visual, arquitetura de informação e UI Design completo, do wireframe ao protótipo final.

A abordagem

Ocupar espaço onde os concorrentes não estavam

Direcionei identidade visual, arquitetura de informação e UI Design completo, do wireframe ao protótipo final.

A abordagem

Ocupar espaço onde os concorrentes não estavam

Direcionei identidade visual, arquitetura de informação e UI Design completo, do wireframe ao protótipo final.

Insight central: nenhum concorrente ocupava ao mesmo tempo porte técnico e presença digital; a oportunidade era ser o primeiro a ocupar os dois ao mesmo tempo.

A partir das pesquisas, consegui definir um direcionamento visual e como posicionar a CR Fundações:

Arquitetura de informação e sitemap completo mapeados antes de qualquer tela

Header, footer e fluxo de cada página pensados pra conversão.

Paleta sóbria (azul, cinza, branco) com laranja de destaque pra CTAs

Remete a segurança e estabilidade estrutural.

Tipografia e ícones alinhados a linguagem técnica do serviço

Tipografia Nunito Sans e ícones do sistema Material Symbols.

Elementos gráficos

Textura de concreto, pattern de planta baixa, gradient map aplicado a fotos de obra.

Observação: a análise SWOT, a definição de persona e o benchmarking de mercado foram conduzidos por Douglas Siqueira, responsável pelo marketing digital neste projeto, assim como o logotipo final. A estratégia de branding, o direcionamento visual, a arquitetura de informação e todo o UI Design foram feitos por mim.

Painel de inspiração (moodboard) de identidade visual para CR Fundações, exibindo a paleta de cores (laranja Piper, cinza Cararra, azul-petróleo Teal e grafite Fuscous Gray), o logotipo da empresa com formato de esteira mecânica, referências arquitetônicas com formas geométricas, projetos de planta baixa, a tipografia Nunito Sans do Google Fonts e o conjunto Material Symbols and Icons.
Painel de inspiração (moodboard) de identidade visual para CR Fundações, exibindo a paleta de cores (laranja Piper, cinza Cararra, azul-petróleo Teal e grafite Fuscous Gray), o logotipo da empresa com formato de esteira mecânica, referências arquitetônicas com formas geométricas, projetos de planta baixa, a tipografia Nunito Sans do Google Fonts e o conjunto Material Symbols and Icons.

Moodboard de identidade visual da CR Fundações

Diagrama de mapa do site (sitemap) exibindo a arquitetura da informação para o site da CR Fundações. O fluxo mapeia a estrutura do cabeçalho (Header) e rodapé (Footer), detalhando as seções de navegação: Início, Sobre Nós, Por Que Contratar, Serviço e Contato, com caixas explicativas sobre pontos de conversão e botões de CTA.
Diagrama de mapa do site (sitemap) exibindo a arquitetura da informação para o site da CR Fundações. O fluxo mapeia a estrutura do cabeçalho (Header) e rodapé (Footer), detalhando as seções de navegação: Início, Sobre Nós, Por Que Contratar, Serviço e Contato, com caixas explicativas sobre pontos de conversão e botões de CTA.

Arquitetura da informação da CR Fundações

A solução

Técnico, moderno e confiável

Da estrutura mapeada, o site ganhou forma no Figma antes de qualquer linha de código: cada tela passou por mais de uma versão até fechar hierarquia, leitura em mobile e o equilíbrio entre sobriedade técnica e clareza comercial. Formas geométricas sem cantos arredondados reforçam a sensação de solidez do serviço. Depois, foi pro ar em Framer, responsivo em qualquer tela.

A solução

Técnico, moderno e confiável

Da estrutura mapeada, o site ganhou forma no Figma antes de qualquer linha de código: cada tela passou por mais de uma versão até fechar hierarquia, leitura em mobile e o equilíbrio entre sobriedade técnica e clareza comercial. Formas geométricas sem cantos arredondados reforçam a sensação de solidez do serviço. Depois, foi pro ar em Framer, responsivo em qualquer tela.

A solução

Técnico, moderno e confiável

Da estrutura mapeada, o site ganhou forma no Figma antes de qualquer linha de código: cada tela passou por mais de uma versão até fechar hierarquia, leitura em mobile e o equilíbrio entre sobriedade técnica e clareza comercial. Formas geométricas sem cantos arredondados reforçam a sensação de solidez do serviço. Depois, foi pro ar em Framer, responsivo em qualquer tela.

Mockup em perspectiva exibindo o site da CR Fundações em três dispositivos: notebook, tablet com teclado e smartphone. As telas mostram o design responsivo do site com banner principal de perfuratriz de hélice contínua e texto 'Empresa de fundação especializada em Hélice Contínua Monitorada'.
Mockup em perspectiva exibindo o site da CR Fundações em três dispositivos: notebook, tablet com teclado e smartphone. As telas mostram o design responsivo do site com banner principal de perfuratriz de hélice contínua e texto 'Empresa de fundação especializada em Hélice Contínua Monitorada'.

Moodboard de identidade visual da CR Fundações

O resultado

De perfil vago a presença ativa no Google

Antes do projeto, a CR Fundações não tinha site, rede social nem histórico relevante no Google. Depois da publicação, o perfil da empresa passou a ter estrutura, avaliação e presença de busca pela primeira vez: a mesma indicação boca a boca de antes agora tem onde aterrissar.

O resultado

De perfil vago a presença ativa no Google

Antes do projeto, a CR Fundações não tinha site, rede social nem histórico relevante no Google. Depois da publicação, o perfil da empresa passou a ter estrutura, avaliação e presença de busca pela primeira vez: a mesma indicação boca a boca de antes agora tem onde aterrissar.

O resultado

De perfil vago a presença ativa no Google

Antes do projeto, a CR Fundações não tinha site, rede social nem histórico relevante no Google. Depois da publicação, o perfil da empresa passou a ter estrutura, avaliação e presença de busca pela primeira vez: a mesma indicação boca a boca de antes agora tem onde aterrissar.

Sua empresa técnica também pode ocupar esse espaço.

Sua empresa técnica também pode ocupar esse espaço.

Sua empresa técnica também pode ocupar esse espaço.