Brainwave AI
Landing page · Inteligência artificial
Briefing
O Brainwave AI nasceu de um desafio de design: criar a landing page de uma empresa fictícia de inteligência artificial, que oferece soluções de machine learning para negócios de diferentes setores.
A página precisava apresentar a empresa, seus produtos e soluções, as tecnologias que usa e depoimentos de clientes, com chamadas claras para a ação e um formulário de contato. O desafio cobria toda a UX/UI, dos wireframes aos protótipos interativos.
Solução
Pensamos em uma página de rolagem contínua, em que o fundo passa do roxo ao índigo e conduz o visitante da apresentação ao contato. Logo na abertura, a chamada "Advance to the future of technology with Brainwave AI" e a ilustração de um cérebro sobre uma plataforma apresentam a proposta, com um único botão para explorar a página.
Os serviços aparecem em linhas com ilustração, título e descrição. As tecnologias se organizam em uma linha que se acende conforme a rolagem, e os depoimentos e o formulário fecham a página. O anel no lugar da letra "O" dos títulos virou o elemento de marca que costura as seções.
Resultados
A landing page atende a todos os pontos do desafio em uma experiência fluida: quem chega entende o que a empresa faz, conhece as soluções e as tecnologias por trás delas e encontra o contato sem esforço.
A versão mobile mantém a mesma narrativa em uma coluna, com o menu recolhido e o formulário em um único fluxo.
Especificações
Cores e tipografia
Cores
Violeta de saturação média, que remete a tecnologia sem cair no azul mais comum do setor. Recebe texto branco com conforto e fica na mesma família análoga das ilustrações em rosa e lilás, então imagem e fundo se integram. É o tom de referência do degradê, entre o topo mais claro e o fim escuro.
A mesma matiz fria levada a um valor muito baixo. A passagem do roxo para o índigo cria profundidade ao longo da rolagem e conduz o olhar até o contato. É escuro o bastante para servir de fundo de leitura nos depoimentos sem precisar de outra cor.
Complementar do violeta no círculo cromático: o contraste de matiz faz o acento saltar com pouca área. Por isso fica reservado a links, aos pontos que se acendem na linha das tecnologias e ao foco do teclado. Quente e de valor alto, se destaca sobre o roxo sem precisar de peso extra.
Branco tingido com a matiz do roxo, para que as superfícies claras pertençam à paleta em vez de parecerem um branco neutro recortado. Recebe o texto índigo-escuro com contraste alto e marca os botões principais sobre o fundo roxo.
Tipografia
- Títulos
- UnboundedExpandida · caixa alta
Grotesca expandida de formas geométricas e arredondadas, com caráter tecnológico. A largura ampla dá presença aos títulos em caixa alta mesmo com poucas palavras, e o desenho circular do "O" permitiu trocar a letra por um anel, que virou elemento de marca. Por ser larga, fica restrita aos títulos e não entra em textos corridos.
- Textos, botões e formulário
- Onest
Grotesca de proporções normais e aberturas generosas, desenhada para tela. O contraste de largura com a Unbounded separa título de texto sem depender só do tamanho, e o desenho aberto mantém a leitura confortável em parágrafos, rótulos e campos do formulário. A mesma família cobre texto, botões e labels.
Outros trabalhos
Ver todos os trabalhos
Tem um projeto em mente?
Me conta um pouco sobre ele.
Vamos conversar no WhatsApp (abre em nova aba)