Vídeo conceito · Mercado de capitais

ANBIMA & B3 · Congresso.

Vídeo conceito que transforma 'mercado de capitais' em formas, cores e um título que se monta.

ANBIMA & B3 · 2019 · Designer gráfico e motion (vídeo conceito)

Quadro de abertura do vídeo conceito: saguão com colunas em duotom verde e azul, título '2º Congresso Brasileiro de Mercado de Capitais' no centro e logos da ANBIMA e da B3 no rodapé. — O quadro limpo, como apareceria na tela.

O trabalho

Vídeo conceito para o 2º Congresso Brasileiro de Mercado de Capitais, evento da ANBIMA e da B3. Foi desenhado o sistema visual do vídeo — título, mosaico de fundo, paleta de cinco cores, tipografia e o quadro de abertura com as duas marcas — pra apresentar um tema árido de um jeito que uma pessoa de fora do mercado financeiro consegue acompanhar. É um trabalho conceitual: a peça foi construída como proposta de linguagem para o evento, não como entrega contratada.

O contexto

A ANBIMA (associação das instituições do mercado financeiro) e a B3 (a bolsa brasileira) organizam juntas o Congresso Brasileiro de Mercado de Capitais, encontro que reúne bancos, gestoras, reguladores e empresas que buscam capital. O público do evento é especialista, mas o material de divulgação circula muito além dele: redes sociais, telões, aberturas de painel, e-mail de convite. É aí que a comunicação costuma falhar: 'mercado de capitais' é uma expressão que, pra quem está de fora, não forma imagem nenhuma. Um vídeo de abertura precisa dar forma a essa ideia em segundos, sem gráfico de cotação nem foto de pregão — clichês que afastam quem não é do ramo. Este case é o sistema visual pensado pra esse vídeo: o que aparece na tela, em que ordem, com que cor, e como as duas marcas convivem sem que uma engula a outra.

O desafio

Três problemas ao mesmo tempo. Primeiro, tornar visível um assunto abstrato: mercado de capitais é a soma de muitos agentes trocando recursos, e isso não tem rosto. Segundo, juntar duas marcas fortes com personalidades diferentes num quadro só, sem hierarquia que ofendesse nenhuma. Terceiro, fazer tudo isso funcionar em movimento: um título que no papel é uma linha precisa se montar na tela em etapas, cada etapa legível, sem que a animação vire enfeite. E a linguagem tinha que caber tanto num quadro de vídeo quanto numa capa estática, com a mesma leitura.

Setor: Mercado de capitais · EventoPeríodo: 2019Função: Designer gráfico e motion (vídeo conceito)Ferramentas: After Effects, Illustrator, Photoshop

Como foi feito

Do problema à tela.

01
Ideia central: mercado como mosaico
Em vez de números subindo ou prédios de vidro, o fundo é um mosaico de blocos retangulares de tamanhos diferentes que se encaixam e se sobrepõem, indo do verde ao roxo. A metáfora é simples o bastante pra não precisar de legenda: muitas partes, de tamanhos diferentes, formando uma estrutura só. É o que um mercado é. Em motion, os blocos podem entrar, deslizar e empilhar — a animação explica a ideia de 'muitos agentes' sem narração.
02
Título que se monta
O nome do evento foi desenhado em camadas, pensando na ordem em que cada parte entra no vídeo. '2º Congresso Brasileiro de' em corpo pequeno e espaçado, como uma linha de contexto. 'MERCADO' grande, em peso preto. 'DE' só em contorno, pra reduzir o peso de uma preposição que ocupa o mesmo corpo. 'CAP' e 'TAIS' separados por uma barra verde — o corte da palavra cria um ponto de pausa pro olho e um gancho pra animação. Molduras em azul, amarelo e branco contornam o conjunto, cada uma com um canto aberto, sugerindo que o quadro ainda está se fechando.
03
Duas marcas, um fundo
A ANBIMA fica sobre o lado verde do mosaico e a B3 sobre o lado roxo; no centro as duas cores se misturam em tons de azul-petróleo. Os dois logos entram em branco, na mesma altura, com o mesmo respiro. A união das instituições é dita pelo fundo, não por uma ordem de leitura que colocasse uma antes da outra.
04
Paleta com função
Cinco cores, cada uma com um papel. Verde claro e roxo são as extremidades do mosaico. Azul e amarelo são as molduras do título — cores de destaque que aparecem pouco, pra que o olho vá direto onde elas estão. O segundo verde, mais fechado, é a barra que separa 'CAP' de 'TAIS' e serve de acento pequeno. Nenhuma cor compete com o texto branco, que é o que precisa ser lido.
05
Uma família, quatro pesos
Toda a tipografia é Museo Sans, do fino ao preto. Em vídeo, cada família extra é um ruído a mais pra decodificar em poucos segundos; a hierarquia aqui vem só de corpo, peso e espaçamento. O peso fino carrega o contexto, o preto carrega o nome, o contorno rebaixa o que é conector.
06
Quadro de abertura (KV)
O key visual aplica tudo isso sobre a foto de um saguão amplo com colunas e rampa, coberto por um filtro verde-azulado em duotom. A foto dá lugar e escala; o filtro tira o ruído de cor pra que o título branco e o mosaico continuem sendo os protagonistas. Os logos vão pro canto inferior direito, onde não disputam com o título.

O que melhorou no UX

6 decisões, com a tela pra provar.

01 / 06

Uma metáfora no lugar do clichê

O atrito: Comunicação de mercado financeiro quase sempre usa gráfico de linha, cifrão ou pregão. Pra quem é de fora, isso diz 'não é pra você'; pra quem é de dentro, é papel de parede.
O que a tela faz agora: O fundo é um mosaico abstrato de blocos que se encaixam, do verde ao roxo, sem nenhum símbolo financeiro. Em movimento, os blocos entram e se empilham.; Por que é melhor: A pessoa entende 'muitas partes formando uma estrutura' sem precisar saber o que é uma debênture. O mesmo fundo serve pro especialista, que não é tratado com clichê, e pro leigo, que não é expulso.

Título '2º Congresso Brasileiro de Mercado de Capitais' em letras brancas sobre um mosaico de blocos que vai do verde ao roxo; 'Mercado' grande, 'DE' só em contorno, 'CAP' separado de 'TAIS' por uma barra verde, molduras em azul e amarelo em volta. — O título como assinatura do vídeo: quatro camadas de leitura em uma frase só.

02 / 06

Título lido em etapas, não de uma vez

O atrito: '2º Congresso Brasileiro de Mercado de Capitais' são sete palavras. Em tela, jogadas de uma vez, viram um bloco que ninguém lê até o fim — e em vídeo não dá pra voltar.
O que a tela faz agora: A frase foi dividida em camadas de peso: contexto pequeno em cima, 'MERCADO' em destaque, 'DE' em contorno, 'CAPITAIS' cortado por uma barra. Cada camada é um passo possível da animação e uma unidade de leitura.; Por que é melhor: Quem vê por um segundo lê 'Mercado de Capitais'. Quem vê por três lê o nome inteiro. A ordem de entrada no vídeo é a ordem de importância, então o olho nunca precisa procurar.

03 / 06

Conector rebaixado, substantivo em destaque

O atrito: Num título todo em caixa alta e no mesmo corpo, 'DE' pesa tanto quanto 'MERCADO'. O olho tropeça numa preposição.
O que a tela faz agora: 'DE' é desenhado só em contorno, no mesmo corpo das palavras vizinhas, mas visualmente mais leve.; Por que é melhor: A frase mantém a linha e o ritmo, mas a hierarquia de leitura fica certa: substantivos cheios, conector vazado. É um recurso que funciona parado e em movimento, porque o contorno pode se preencher como transição.

04 / 06

Cores de destaque usadas pouco

O atrito: Com cinco cores disponíveis, a tentação é usar todas em tudo. O resultado é um quadro onde nada se destaca porque tudo se destaca.
O que a tela faz agora: Verde e roxo fazem o fundo; azul e amarelo aparecem só nas molduras do título, e o verde fechado só na barra que corta 'CAPITAIS'. O texto é sempre branco.; Por que é melhor: O olho vai primeiro pro que tem cor de destaque — e isso é sempre o título. Em motion, quando uma moldura amarela entra, ela está apontando pra alguma coisa, não decorando.

Prancha 'Tipo & Cores': a família Museo Sans em quatro pesos, do fino ao preto, e um cartão branco com cinco cores — verde claro #76CD52, roxo #401983, azul #008AD0, amarelo #F9AF02 e verde #87BB25. — Uma família tipográfica, cinco cores, cada uma com um papel.

05 / 06

Duas marcas sem ordem de precedência

O atrito: Evento de duas instituições costuma gerar discussão sobre qual logo vem primeiro, maior ou mais à esquerda. A solução errada cria hierarquia onde não deveria haver.
O que a tela faz agora: Os logos ficam em branco, na mesma altura, cada um sobre 'seu' lado do mosaico (verde pra ANBIMA, roxo pra B3). O encontro das cores no centro faz o papel do 'e' entre as duas.; Por que é melhor: A parceria é mostrada pelo fundo, não imposta por tamanho. Em branco, nenhum logo chega com a própria paleta brigando com a do vídeo.

06 / 06

Foto sob filtro, pra texto legível

O atrito: Foto de ambiente atrás de texto branco é receita de ilegibilidade: áreas claras da foto apagam letras inteiras.
O que a tela faz agora: O saguão do key visual é tratado em duotom verde-azul, escurecido, com o mosaico sobreposto nas bordas. A foto dá contexto e profundidade sem variação forte de luz.; Por que é melhor: O título continua com contraste alto em qualquer ponto do quadro. E a foto, ao receber as cores do sistema, parece parte da identidade em vez de uma imagem colada atrás.

Prancha com a etiqueta 'KV' e o quadro do vídeo: foto de um saguão com colunas e rampa, coberta por um filtro verde e azul, com o título do congresso no centro e os logos da ANBIMA e da B3 no canto inferior direito. — Key visual: o quadro de abertura do vídeo, com a foto do local sob o filtro de cor.

O que fica desse trabalho

Assunto abstrato pede uma metáfora visual simples e repetível; o mosaico explica 'muitas partes, uma estrutura' sem narração.
Em motion, o desenho do título já é o roteiro da animação: cada camada de peso é um passo de entrada.
Cor de destaque só destaca se for rara; azul e amarelo aparecem apenas onde o olho deve ir.
Co-branding fica mais justo quando o fundo expressa a união e os logos entram iguais, em branco.

Entregas