Fazer com que um fundo de capital de risco se pareça com os fundadores em que aposta
Design e front-end para a big_bets, uma VC brasileira que se junta aos empreendedores desde o Dia 1 — distinguida com uma Awwwards Honorable Mention.
Contexto
A big_bets é um fundo de capital de risco brasileiro que se junta aos empreendedores desde o Dia 1 — muitas vezes antes sequer de existir uma empresa. Nas palavras deles: "o nosso momento ideal para o primeiro contacto é quando a empresa, caso já exista, não passa de uma folha de papel em branco."
Precisavam de um site que dissesse isto em voz alta, num mercado em que o site de todos os outros fundos parece o de um banco.
Função
Neste projeto fui designer e developer ao mesmo tempo. Direção de arte, UI e depois cada linha de front-end por cima do WordPress.
Uma posição ligeiramente perigosa — ninguém te diz que a tua ideia é cara demais para construir — mas também não se perdeu nada na passagem de mãos.
O problema
Os sites de capital de risco no Brasil convergem todos para o mesmo visual: azul-marinho, um edifício de vidro, uma grelha de logótipos do portefólio e textos que podiam ser de qualquer um deles. Isso é um problema para um fundo cujo argumento principal é comportar-se como empreendedor e não como investidor.
Se dizes que apareces no primeiro dia, quando está tudo partido e nada funciona, e o teu site parece o de um banco privado — o fundador que o está a ler não acredita em ti.
O meu desafio era construir um site que parecesse feito por quem constrói, para quem constrói — e fazer do próprio trabalho a prova disso.
A minha abordagem
#1 Começar pela linguagem
Antes de qualquer pixel, trabalhei com eles os textos de posicionamento. Foi daí que saiu a escrita em minúsculas com underscore — big_bets, bruno_betenson — e foi isso que depois guiou todo o sistema visual.
#2 Encontrar uma ideia forte
Em vez de um universo de marca completo, apostei num único gesto: uma estética de terminal de programador em amarelo néon. Uma ideia levada até ao fim vale mais do que cinco ideias executadas com timidez.
#3 Desenhar no Adobe XD
Os ecrãs, os estados e o menu foram prototipados no XD, para o cliente poder navegar por tudo antes de eu escrever uma linha de JavaScript. O menu era a parte mais arriscada, por isso foi o primeiro a ser prototipado.
#4 Construir eu próprio
WordPress como CMS, GSAP e ScrollMagic para o movimento, JS escrito à mão para todo o resto. Desenhar e construir significava que podia continuar a afinar os tempos das animações a olho, no browser, pelo tempo que fosse preciso.
Um terminal, não uma sala de reuniões
Toda a identidade assenta numa cor: #CCFF28, um amarelo-verde néon que não tem nada que fazer num site de serviços financeiros. Combinado com fundos quase pretos e a Rubik bem apertada, lê-se como um editor de código. E era exatamente esse o objetivo — o público são fundadores técnicos, e esta é a paleta para a qual eles olham o dia inteiro.
Todo o resto decorre daí. Os nomes escrevem-se em minúsculas com underscore, como variáveis. As ilustrações são planas, retro, desenhadas a traço único, em vez das habituais bolhas 3D com gradientes — o conjunto parece desenhado à mão e não comprado.
A página inicial abre com um título que se escreve sozinho, com a última frase a cair em néon: "Apoiamos os empreendedores que estão a construir as maiores empresas de tecnologia da próxima geração." Escrevi esse efeito de máquina de escrever à mão em vez de usar uma biblioteca, sobretudo para poder tornar aleatório o intervalo entre as teclas. Uma escrita certinha lê-se como uma máquina; uma escrita com hesitações lê-se como uma pessoa. Quinze linhas de diferença — e é aí que está todo o efeito.
Screenshot needed
Full-width desktop screenshot of bigbets.tech home page hero, ideally mid-typing so the cursor and the neon-yellow clause are both visible.
O menu, a equipa e o 404
Três peças receberam uma atenção desproporcional, e são exatamente as três de que as pessoas falam.
O menu é um ecrã inteiro em néon sobre preto, com os itens de navegação dispostos de forma assimétrica numa grelha em vez de empilhados numa lista arrumada. É a primeira interação da maioria dos visitantes, por isso define as expectativas para tudo o que vem a seguir.
A página da equipa mostra o retrato de cada sócio como um meio-tom pontilhado no mesmo néon, ao lado de uma coluna de JavaScript em bruto usada apenas como textura. Os nomes ligam diretamente ao LinkedIn. Uma secção de equipa que parece o buffer de um terminal é uma coisa estranha para um fundo de capital de risco — e é precisamente por isso que resulta.
E o 404 é uma ilustração inteira em ASCII, embrulhada num aria-hidden para que os leitores de ecrã saltem a sopa de caracteres e recebam a mensagem verdadeira — a minha única concessão a ser um adulto responsável nisto.
A construção
O inventário honesto do que está por baixo.
WordPress, porque o fundo precisava de publicar notícias e atualizar a equipa sem me ter de telefonar. A instalação está protegida — os caminhos do tema e dos plugins foram reescritos com hashes opacos, para o site não se anunciar como WordPress a todos os scanners da internet.
GSAP (TweenMax) e ScrollMagic tratam do movimento. A peça central é a sequência de scroll da página inicial: um palco ilustrado fixo que avança por três estados à medida que fazes scroll, para que a história em três partes sobre como trabalham com fundadores aconteça ali mesmo, em vez de passar ao lado. Cada passo é uma cena fixa que troca uma classe, com a coreografia feita em CSS — barata de afinar e barata de correr.
Tudo o resto é propositadamente pequeno e escrito à mão: a máquina de escrever, o botão do menu, um observador de scroll que inverte o cabeçalho sobre as secções néon, blocos de divulgação progressiva para os textos mais longos da filosofia. Sem framework — teria dado mais código do que o próprio site.
Construí também um cursor em GSAP: dois pontos que se perseguem e crescem sobre tudo o que é interativo. Continua no código-fonte, comentado. Andava a lutar com a personalidade do site e acabei por matá-lo — mas prefiro deixar o cadáver no ficheiro a fingir que nunca tentei.
Uma ideia forte levada até ao fim, até ao 404, vale mais do que cinco ideias cautelosas.
Resultado e reconhecimento
O site arrecadou uma Awwwards Honorable Mention a 28 de fevereiro de 2022 — 8.0 em design, 7.9 em criatividade, 7.7 em usabilidade, 7.5 em conteúdo, 7.6 no geral. Os votos destacaram o menu, a secção da equipa e o 404.
A parte de que tenho mesmo orgulho é bem mais aborrecida: continua no ar e continua a servir. Anos depois, a big_bets continua a publicar lá, o design não foi discretamente substituído e o meu nome continua no rodapé.
- Awwwards Honorable Mention — 28 fev. 2022
- Design 8.0 · Criatividade 7.9 · Usabilidade 7.7 · Conteúdo 7.5
- Geral 7.6 / 10 (comunidade)