Projetando-nos: A Nova Identidade e Site da Obys | Codrops

Aprenda o Astro Web Framework

por Chris Pennington

Um curso de vídeo interativo premium para construir sites modernos usando o Astro web framework com a confiança de mais de 1.700 alunos.

20% de desconto Use “C0DROP3”

Do desalinhamento à clareza

A versão anterior do site Obys foi criada em 2019. Tínhamos planos de atualizá-lo antes, mas com o tempo ele se transformou em um processo mais silencioso e contínuo, entendendo quem somos hoje, como nos vemos e onde estamos indo.

Em algum momento, ficou claro que tanto a identidade visual quanto o site não pareciam mais precisos. Não refletiam o nível em que operamos, o tipo de projetos que assumimos ou os clientes com quem colaboramos hoje. O trabalho evoluiu, mas a forma como o apresentamos não.

Ao longo dos anos, ganhamos experiência, trabalhamos com clientes que antes só podíamos imaginar e recebemos reconhecimento do setor. Mais importante ainda, desenvolvemos uma compreensão muito mais clara da nossa própria abordagem. A versão anterior começou a parecer um pouco desconectada dessa clareza. O que precisávamos não era apenas de uma atualização, mas de uma articulação mais precisa – uma linguagem visual que refletisse o que Obys é agora.

Da identidade à interação

O novo Obys está enraizado em uma abordagem mais modernista e limpa – que reflete tanto nossa experiência em design gráfico quanto nossa compreensão atual do que parece certo. Curiosamente, não começamos com o site. Começamos com a fonte.

Desenvolvemos nossa própria fonte personalizada, OTF Obys NG – uma fonte neo-grotesca projetada para funcionar tanto como fonte de texto quanto de exibição. Vemos isso como um sistema vivo, algo que evoluirá ao longo do tempo e definirá o ritmo, o espaçamento e a hierarquia em toda a identidade.

A partir daí, refinamos o logotipo, mantendo a continuidade com o símbolo original enquanto o desenvolvemos ainda mais. Isto levou a uma ideia central: Obys como um “espaço” – uma estrutura que contém projetos, ideias e diferentes estados do mesmo sistema. No site, essa ideia é traduzida através do movimento. O logotipo se torna um elemento constante que interage com o conteúdo e permanece presente em diferentes layouts – vertical, horizontal e grade. Não representa apenas a marca; torna-se parte da interface.

Um dos momentos-chave acontece logo no início. Você entra pelo logotipo antigo em um fundo escuro, que aos poucos se transforma no novo e em um ambiente branco. Essa transformação continua em todo o site. O logotipo atua como um ponto estável dentro deste sistema. Ele permanece com você enquanto você alterna entre layouts, abre projetos ou navega até a página Sobre. Muda ligeiramente, adapta-se ao contexto, mas permanece presente, definindo silenciosamente a experiência.

A parte mais difícil não foi o design

Curiosamente, a identidade em si não foi a parte mais iterativa do processo. Nem o tipo de letra.

O verdadeiro desafio, porém, foi definir nossa própria visão. Ao longo de vários anos, continuamos a questionar as mesmas coisas: quão ousado ou contido deveria ser o resultado, quanto movimento é suficiente, que nível de expressão realmente parece adequado. Não foi uma decisão única, mas um alinhamento gradual – um processo de remoção de incertezas em vez de adição de ideias. Muitas das restrições neste projeto foram autodefinidas. Analisamos atentamente com quem queríamos trabalhar, que tipo de clientes queríamos atrair e em que tipo de projetos queríamos nos concentrar. Essas decisões moldaram naturalmente os limites do sistema.

Pela primeira vez, desenvolvemos um projeto autoiniciado em colaboração com um desenvolvedor externo. Foi um processo diferente e valioso. O resultado reflete isso. A maior parte do tempo foi dedicado ao refinamento de detalhes durante o desenvolvimento, especialmente movimentos e microinterações. Alcançar uma sensação que parece simples e sem esforço exigiu ajustes constantes. Pequenas mudanças no tempo, no espaçamento e no comportamento fizeram uma diferença significativa, e esses detalhes demoraram mais para serem resolvidos.

O que escolhemos deixar de fora

Esta versão do site é intencionalmente um microsite. Funciona como uma apresentação focada do nosso trabalho e como uma transição entre o anterior e o novo Obys. Por conta disso, muitas coisas foram deliberadamente deixadas de lado – prêmios, arquivos, conteúdo estendido, detalhes internos.

Não queríamos sobrecarregá-lo. Tudo isso pertence a uma versão maior do site que estamos planejando para o futuro. A estrutura é mantida simples. O foco está nos projetos – uma seleção com curadoria construída em torno de recursos visuais importantes. Há informações adicionais mínimas sobre o estúdio. Tudo o que é essencial já está visível.

Movimento como forma de entender

O movimento desempenha um papel central. Desde o primeiro momento, o usuário se depara com uma transformação – do logotipo antigo para o novo, do escuro para o claro. Ele dá o tom para tudo o que se segue.

A partir daí, o movimento passa a fazer parte do sistema. Ele conecta layouts, orienta transições entre páginas e oferece suporte à interação com o conteúdo.

Não é decorativo. Ajuda a explicar a ideia e mantém a experiência consistente em todo o site.

Construído como um sistema

O site foi construído do zero usando uma base de código personalizada, sem depender de frameworks do lado do cliente. É desenvolvido com Bun.js, usado tanto como servidor HTTP quanto como empacotador. React é usado puramente como uma camada de modelagem do lado do servidor, mantendo a saída limpa e controlada. Todas as interações – animações, rolagem virtual, roteamento SPA e transições de página – são tratadas em TypeScript.

O movimento é conduzido por um sistema de animação interno baseado em requestAnimationFrame e na API de animações da Web, permitindo controle preciso sobre o tempo e o comportamento. Alguns elementos visuais são renderizados usando WebGL nativo.

O conteúdo é gerenciado através do Strapi, enquanto o estilo é mínimo e direto com CSS simples.

Esta versão do site não é a forma final do Obys.

É um momento intermediário – uma apresentação focada de onde estamos agora e como nos vemos hoje. Um microsite que captura a mudança, em vez de tentar explicar tudo de uma vez.

Permitiu-nos articular a identidade atualizada, testar ideias e tornar o sistema visível na sua forma mais essencial. O resto virá.