Art for Nature Foundation

Art for Nature Foundation — Full Website Design, Build & Live Ecosystem Integration

Art for Nature Foundation, founded by internationally acclaimed artist Julian Charrière, mobilizes contemporary art as a direct force in ecological care and conservation. The foundation needed a website that would match the gravity of its mission – immersive, atmospheric, and alive – while integrating a live data and livestream feed directly from endangered ecosystems around the world.

‍

Role and scope

• Strategy, concept and visual direction

• UI/UX design

• Full Webflow development and custom code implementation

• Custom JavaScript for livestream and live data integration

• Animation and interaction design

• AI-assisted asset and content workflows

‍

Objectives

• Create an immersive digital presence that communicates the urgency and beauty of ecological care

• Integrate a live feed from real-world ecosystems, showing location, timestamp and live stream in real time

• Build custom animations that feel organic and intentional rather than decorative

• Deliver a fast, distraction-free experience that lets the mission and imagery speak

• Establish a technically solid foundation that the foundation can build on as the project grows

‍

Audience

Artists, collectors, cultural institutions, conservation organisations, scientists and the broader public who engage with contemporary art and environmental activism. They expect a level of visual and conceptual sophistication that reflects the calibre of the artists and causes involved.

‍

Approach

The site was conceived as a living document rather than a static brochure. The hero is not a designed element – it is a real-time window into a specific place on Earth, showing the exact location (e.g. Southern Amazon Rainforest, Brazil), a live timestamp and an audio-visual stream, all pulled dynamically via custom JavaScript. This single decision defines the experience: you do not browse a website about nature – you are placed inside it. The rest of the site flows from this anchor: a minimal, dark visual language that never competes with the imagery, generous white space, and text that reads as manifesto rather than marketing copy.

‍

Design highlights

• Hero / Livestream block: Real-time ecosystem stream with live location label and timestamp, custom-built via JavaScript – the site's most technically ambitious and emotionally resonant element.

• Mission section: Long-form text presented with editorial clarity – wide columns, generous leading, no sidebars or distractions.

• Imagery: Full-bleed nature photography and video throughout – coral reefs, rainforest canopies, underwater scenes – always treated as primary content, never as decoration.

• Navigation: Ultra-minimal, transparent nav that disappears into the hero, only surfacing when needed.

• Footer / Links: Clean, purposeful – direct links to Julian Charrière's practice, the Calls for Action platform and contact.

‍

Visual language

• Type: Bold, condensed uppercase for the logo and section labels – raw and urgent. A clean, editorial serif or neutral sans for body copy, giving the mission text the gravity it deserves.

• Color: Near-black backgrounds with natural imagery providing all color. No brand palette competes with the living world it represents.

• Motion: Subtle, purposeful – slow fades, soft ambient audio toggle, the quiet pulse of a live timestamp updating every second. The site feels alive without announcing itself.

‍

Interactions and custom code

The technical centrepiece of the project is the custom JavaScript livestream integration: a live ecosystem feed embedded directly in the hero, paired with a real-time location string and clock that updates continuously. This required custom embed logic, API-style data handling and careful performance tuning to ensure the stream loads cleanly without blocking the rest of the page. An ambient audio toggle allows visitors to hear the ecosystem – sound on or off, always their choice. Scroll-triggered animations bring content in gently as the user moves through the page, reinforcing the contemplative tone.

‍

Accessibility and performance

• Audio is off by default – the toggle is clearly accessible and respects user preference.

• Lazy loading for all heavy media assets ensures fast initial page load despite rich video content.

• Reduced-motion preferences respected in all scroll animations.

• Clean semantic structure for screen readers and search engines.

Outcome

A website that functions as an artwork in itself – placing the visitor in direct sensory contact with the ecosystems the foundation exists to protect. The live integration from the field into the browser is a technically original solution that no off-the-shelf tool or template could have delivered, and it communicates the foundation's mission more powerfully than any written headline.

‍

Services delivered

Full website design and development, custom JavaScript livestream and live data integration, animation and interaction design, Webflow build, AI-assisted asset workflows, ambient audio integration.

‍

Tools

Figma for design and prototyping, Webflow for development, JavaScript for custom livestream and data integration, AI tools for asset and content workflows.