Rediseño de EcoNature: del minimalismo a una interfaz glassmorphism moderna
Project Gallery
Modo oscuro y modo claro
--- Efecto parallax
--- 
La página de inicio original de EcoNature partía de una base minimalista clásica: espacio en blanco generoso, paleta de color contenida y contenido con mucho aire para respirar. Funcionaba, pero el cliente vino buscando algo que se sintiera actual: una portada con más profundidad visual y un factor “wow” para quienes donan y para quienes llegan al sitio por primera vez, sin perder la claridad y la profesionalidad que hacían que el diseño original transmitiera confianza.
Ese equilibrio se convirtió en el encargo: modernizar la interfaz con un tratamiento glassmorphism, pero manteniendo la experiencia igual de legible y igual de serena que antes.
Por qué el glassmorphism tenía sentido para esta marca
El glassmorphism, paneles translúcidos de cristal esmerilado superpuestos sobre un fondo, no es aquí solo una tendencia visual: encaja con el tema. La misión de EcoNature habla de niebla sobre bosques, agua sobre piedra, capas de tierra y agua trabajando juntas. Las tarjetas de cristal esmerilado flotando sobre fotografía a sangre de bosques de pinos entre la niebla, lagos alpinos y crestas de montaña hacen eco de esa misma idea de transparencia y superposición, así que la estética refuerza el mensaje en lugar de solo decorarlo.
Qué cambió en el rediseño
- Barra de navegación: pasó a ser un panel de cristal flotante con forma de píldora que se apoya sobre cada imagen hero, en lugar de una cabecera plana y opaca; se mantiene legible mientras deja ver la fotografía.
- Tarjetas de contenido: cada sección (la declaración de misión, el bloque del programa “Agua y Aire Limpios”, los filtros de Grupos Locales y la llamada a donar) vive ahora dentro de un panel de cristal esmerilado con desenfoque suave y bordes sutiles, reemplazando las tarjetas blancas planas del original.
- Hero centrado en la fotografía: fotografía de naturaleza a todo ancho (bosques, lagos, montañas) se convirtió en la capa base de cada sección, con la interfaz de cristal flotando encima en lugar de competir con un color de fondo sólido.
- Interruptor de tema claro y oscuro: añadí un conmutador en la barra de navegación para que toda la interfaz (paneles de cristal, tipografía y colores de acento) se adapte entre un modo claro pálido y suave y un modo oscuro verde bosque profundo, ambos manteniendo el mismo acento verde lima para botones y llamadas a la acción.
- Emparejamiento tipográfico: mantuve una tipografía serif de titulares (para preservar el tono editorial y confiable del original) acompañada de una sans-serif limpia para el cuerpo de texto, de modo que el tratamiento más decorativo de la interfaz no sacrifique la legibilidad.
- Detalles de movimiento: añadí una marquesina horizontal con las palabras clave de la misión y un carrusel deslizante en el hero, dando más ritmo a la portada sin añadir ruido visual.
El resultado
El rediseño conserva la misma jerarquía de información limpia y el tono profesional que el cliente valoraba de la versión minimalista original, y a la vez le da a la interfaz un aire más contemporáneo y de alto nivel mediante profundidad, desenfoque e imágenes superpuestas, con la flexibilidad añadida de un tema claro y oscuro que antes no existía.
Versión minimalista (original): Enlace