Interface e experiência de usuário para o novo site do Instituto Pro Bono, em 11 páginas.
O Instituto Pro Bono mobiliza advogados(as), escritórios e departamentos jurídicos voluntários para oferecer apoio jurídico gratuito e qualificado no Brasil, há mais de duas décadas.
O site precisa atender públicos diferentes: quem quer ser voluntário(a), quem busca atendimento, quem quer apoiar e as organizações da sociedade civil.
A Theorema desenhou a interface (UI) e a experiência do usuário (UX) do site: a estrutura de cada página, os caminhos entre elas e o sistema visual. As 11 páginas foram entregues em HTML, como base para a reconstrução em WordPress.
O site anterior organizava bem o conteúdo, mas era plano: hero simples, imagem direta, cartões limpos. O instituto trouxe duas telas de referência, Sociedade Civil e Pessoas Físicas, criadas por ele mesmo num nível de acabamento bem acima.
Em vez de tratá-las como duas páginas a copiar, li as duas como um sistema e catalogei o que se repetia: fotografias em duotone, cartões flutuando sobre o hero, formas circulares sobrepostas em traço e preenchimento, textura de papel, rótulos em pílula, ícones próprios em cada cartão, blocos de números em destaque e arcos decorativos. Onze tipos de elemento gráfico, uma tipografia dupla (serifa editorial com sans) e uma paleta curta de azuis e teal.
Isso mudou a natureza do trabalho. A parte mais cara, inventar uma linguagem visual, já estava feita. Faltava extrair as regras e aplicá-las às outras nove páginas sem que o resultado virasse carimbo. Por isso o caminho foi desenhar uma página inteira primeiro, a Faça parte, para fixar as regras, e só depois propagá-las.
Cada uma responde a uma pergunta de quem chega.
O site atende voluntários, escritórios, organizações, parceiros e apoiadores, e cada um chega com um objetivo diferente. Por isso o cabeçalho traz sempre dois botões, Seja voluntário(a) e Apoie, e a página reúne cinco perfis, cada um com uma frase e o botão da ação certa. Ninguém precisa entender a estrutura do instituto para achar o seu caminho.
Quem busca apoio jurídico quer saber o que acontece depois de pedir. A página explica em cinco etapas, da apresentação da demanda ao acompanhamento do projeto, para tirar a incerteza antes do primeiro contato.
Em vez de um formulário genérico, o contato começa por uma pergunta: qual é o motivo. São cinco opções, e a última leva às perguntas frequentes. A triagem começa na própria página, e cada pessoa segue para o fluxo certo.
As fotos são do próprio instituto e vêm de origens e cores diferentes. Um duotone azul e teal aplicado por CSS faz fotos distintas parecerem do mesmo conjunto e permite trocar uma imagem sem refazer o tratamento. Nos heros, o título senta sobre a parte escura da foto, e o contraste foi medido na imagem final.
A assinatura gráfica é o anel. Ele ecoa os dois círculos sobrepostos do símbolo do instituto e aparece nos cantos das páginas, em tamanhos e posições diferentes. Fraunces nos títulos e DM Sans no texto completam a receita: duotone, anel e serifa. A variação vem da cor de abertura, como nas referências: azul na Home, verde-petróleo em Justiça Criminal, teal em Contato.
O teal da marca é a cor mais forte do instituto e a que mais aparece em botões. Branco sobre ele chega a 2,64:1 de contraste, abaixo do mínimo de 4,5:1. Por isso o texto sobre teal é sempre o verde escuro, e o teal ganhou três variantes por função: uma para texto sobre fundo claro, outra para fundo escuro e outra para traços e ícones.
Os títulos sobre fotografia foram simulados com a imagem, o duotone e a lavagem aplicados, e o contraste foi medido ponto a ponto. O pior ponto do site ficou em 5,08:1. O menu no celular prende o foco, fecha com Esc e trava a rolagem, e as animações respeitam a preferência por movimento reduzido.
#11B1B0#096765#5ADAD7#0C8583#0A8181#164171#0D5488#E1F3F5#052B2C#0E1B2ASite responsivo, com o sistema visual documentado em variáveis de CSS. As páginas: Home, Quem somos, O que fazemos, Projetos, Atendimento a OSCs, Justiça Criminal, Amicus Pro Bono, Conhecimento, Notícias, Faça parte e Contato.
Trabalho da Theorema para o Instituto Pro Bono, em UI e UX. Desenvolvimento e publicação em produção não fazem parte do escopo atribuído à Theorema. As telas desta página são capturas do site entregue; textos e fotografias são do instituto.