Minería e Institucional

Samarco

Landing pages del Acuerdo de Reparación, con UI/UX y tema WordPress en PHP

Mi rol: Diseñador UX/UI · Desarrollador Web PHP/WordPress Sénior

Contexto

Samarco necesitaba páginas para comunicar el nuevo Acuerdo de Reparación por la ruptura de la represa de Fundão. Trabajé como Diseñador UX/UI y Desarrollador Web PHP/WordPress Sénior: diseñé la interfaz de las landing pages y desarrollé todo en PHP, como tema de WordPress.

Cliente

Samarco

Categoría

Minería e Institucional

Roles

Diseñador UX/UI, Desarrollador PHP/WordPress

Tecnología

WordPress, PHP

Desafío

El tema es sensible y el público es amplio: personas afectadas, comunidades, prensa y organismos públicos, con niveles muy distintos de familiaridad con lo digital. Las páginas tenían que explicar hechos, programas y plazos con claridad y respeto, ser accesibles para todos y permitir que el equipo actualizara el contenido sin depender de un desarrollador.

Proceso

Estructura única: todas las páginas siguen el mismo orden (encabezado del tema, explicación en lenguaje simple, destacados visuales, preguntas frecuentes y canales de atención). Quien aprende a leer una página ya sabe leerlas todas.

Un color por tema: el sistema visual parte del azul marino de Samarco y le da a cada tema del acuerdo un color propio, aplicado en el encabezado, los títulos y los destacados.

Accesibilidad desde el inicio: barra con control de tamaño de fuente, alto contraste, Libras (lengua de señas brasileña) y atajos de teclado, además de la versión en inglés.

Desarrollo en PHP para WordPress: un tema propio, fiel al diseño y responsive, en el que textos, preguntas frecuentes y programas se cargan desde el panel.

Las páginas, sección por sección

Del encabezado accesible a los canales de atención, pasando por los temas del acuerdo.

01 / 08
Encabezado accesible
Antes del menú, una barra de accesibilidad con aumento de fuente, alto contraste, Libras y atajos a Contenido, Menú y Pie de página, además del cambio de idioma (PT/EN). En un tema que afecta a miles de personas, nadie puede quedar afuera.
02 / 08
Un color para cada tema
Ruptura (naranja), Acciones ambientales (azul), Reasentamiento (verde) y Aprendizajes (rosa): el mismo encabezado con el círculo de la marca y el título manuscrito, cambiando solo el color. El visitante sabe en qué tema está sin leer el menú.
03 / 08
La ruptura
La página que abre el tema cuenta los hechos en orden: qué pasó en Fundão, las acciones de emergencia y la investigación independiente, con títulos cortos y un ícono de alerta para la parte más sensible.
04 / 08
Acciones ambientales
Lo que el nuevo acuerdo prevé para la cuenca del Río Doce, con una foto del monitoreo en el río y el recorte curvo que se repite en todas las páginas, uniendo texto e imagen.
05 / 08
Reasentamiento
La entrega definitiva de Novo Bento Rodrigues y Paracatu, con la foto aérea de las casas y los números del acuerdo al lado, siempre con enlace a la información completa.
06 / 08
Indemnización
La página más buscada organiza cada programa (PIM/SPA, PID, Lucro Cesante, AFE y Novel) en tarjetas con ícono y resumen, y una alerta amarilla deja claro quién no tiene derecho, evitando dudas y frustración.
07 / 08
Preguntas frecuentes
En todas las páginas, las preguntas del tema con filtro por categoría y respuestas que se abren de a una. La duda se resuelve ahí mismo, sin necesidad de llamar.
08 / 08
Para escucharte
Toda página termina en los canales de atención: la Central de la Fundação Renova destacada y, en el pie de página, el 0800 de Samarco disponible las 24 horas, el e-mail y las redes sociales.

Sistema Visual

El azul marino de Samarco es la base de todas las páginas; cada tema del acuerdo recibe un color propio, aplicado en el encabezado, los títulos y los destacados, para orientar al visitante sin depender del menú.

Paleta

Azul Samarco

#003463

Base de todas las páginas: encabezado, tarjetas y pie de página

Naranja Ruptura

#F46A08

Página de la ruptura

Azul Ambiental

#3FC8F4

Página de acciones ambientales

Verde Reasentamiento

#8EC63F

Página de reasentamiento

Rosa Aprendizajes

#DC6A84

Página de aprendizajes

Amarillo Indemnización

#F4B02B

Página de indemnización y alertas

Aprendizaje

Al comunicar temas sensibles, la claridad es respeto. Una estructura previsible, lenguaje simple y accesibilidad de verdad hacen más por la confianza que cualquier efecto visual.

Más proyectos