Mineração & Institucional

Samarco

Landing pages do Acordo de Reparação, com UI/UX e tema WordPress em PHP

Meu papel: Designer UX/UI · Desenvolvedor Web PHP/WordPress Sênior

Contexto

A Samarco precisava de páginas para comunicar o novo Acordo de Reparação do rompimento da barragem de Fundão. Atuei como Designer UX/UI e Desenvolvedor Web PHP/WordPress Sênior: desenhei a interface das landing pages e desenvolvi tudo em PHP, como tema WordPress.

Cliente

Samarco

Categoria

Mineração & Institucional

Papéis

Designer UX/UI, Desenvolvedor PHP/WordPress

Tecnologia

WordPress, PHP

Desafio

O tema é sensível e o público é amplo: atingidos, comunidades, imprensa e órgãos públicos, com níveis muito diferentes de familiaridade com o digital. As páginas precisavam explicar fatos, programas e prazos com clareza e respeito, ser acessíveis a todos e permitir que a equipe atualizasse o conteúdo sem depender de desenvolvedor.

Processo

Estrutura única: todas as páginas seguem a mesma ordem (topo do tema, explicação em linguagem simples, destaques visuais, perguntas frequentes e canais de atendimento). Quem aprende a ler uma página já sabe ler todas.

Uma cor por tema: o sistema visual parte do azul-marinho da Samarco e dá a cada tema do acordo uma cor própria, aplicada no topo, nos títulos e nos destaques.

Acessibilidade desde o início: barra com controle de fonte, alto contraste, Libras e atalhos de teclado, além da versão em inglês.

Desenvolvimento em PHP para WordPress: um tema próprio, fiel ao layout e responsivo, em que textos, perguntas frequentes e programas são cadastrados pelo painel.

As páginas, dobra a dobra

Do cabeçalho acessível aos canais de atendimento, passando pelos temas do acordo.

01 / 08
Cabeçalho acessível
Antes do menu, uma barra de acessibilidade com aumento de fonte, alto contraste, Libras e atalhos para Conteúdo, Menu e Rodapé, além da troca de idioma (PT/EN). Num tema que afeta milhares de pessoas, ninguém pode ficar de fora.
02 / 08
Uma cor para cada tema
Rompimento (laranja), Ações ambientais (azul), Reassentamento (verde) e Aprendizados (rosa): o mesmo topo com o círculo da marca e o título manuscrito, mudando só a cor. O visitante sabe em que tema está sem ler o menu.
03 / 08
O rompimento
A página que abre o assunto conta os fatos em ordem: o que aconteceu em Fundão, as ações emergenciais e a investigação independente, com títulos curtos e um ícone de alerta para a parte mais sensível.
04 / 08
Ações ambientais
O que o novo acordo prevê para a bacia do Rio Doce, com foto do monitoramento no rio e o recorte curvo que se repete em todas as páginas, ligando texto e imagem.
05 / 08
Reassentamento
A entrega definitiva de Novo Bento Rodrigues e Paracatu, com a foto aérea das casas e os números do acordo ao lado, sempre com link para a informação completa.
06 / 08
Indenização
A página mais procurada organiza cada programa (PIM/SPA, PID, Lucro Cessante, AFE e Novel) em cards com ícone e resumo, e um alerta amarelo deixa claro quem não tem direito, evitando dúvida e frustração.
07 / 08
Perguntas frequentes
Em todas as páginas, as perguntas do tema com filtro por categoria e respostas que abrem uma de cada vez. A dúvida é resolvida ali, sem precisar ligar.
08 / 08
Para ouvir você
Toda página termina nos canais de atendimento: a Central da Fundação Renova em destaque e, no rodapé, o 0800 da Samarco disponível 24 horas, o e-mail e as redes sociais.

Sistema Visual

O azul-marinho da Samarco é a base de todas as páginas; cada tema do acordo ganha uma cor própria, aplicada no topo, nos títulos e nos destaques, para orientar o visitante sem depender do menu.

Paleta

Azul Samarco

#003463

Base de todas as páginas: topo, cards e rodapé

Laranja Rompimento

#F46A08

Página do rompimento

Azul Ambiental

#3FC8F4

Página de ações ambientais

Verde Reassentamento

#8EC63F

Página de reassentamento

Rosa Aprendizados

#DC6A84

Página de aprendizados

Amarelo Indenização

#F4B02B

Página de indenização e alertas

Aprendizado

Em comunicação de temas sensíveis, clareza é respeito. Uma estrutura previsível, linguagem simples e acessibilidade de verdade fazem mais pela confiança do que qualquer efeito visual.

Mais projetos