Website Design Project

NaturaLive is a concept website designed for a sustainable travel company offering wildlife tours and conservation experiences. Built with HTML5, CSS3 (Tailwind), JavaScript, and a headless CMS (Contentful), the site features a custom interactive map using Leaflet.js, a dynamic trip filter system, and a fully accessible booking modal.

The design prioritizes large hero imagery of natural landscapes, subtle glassmorphism effects, and a calm, earthy color palette derived from forest and ocean tones. Performance was optimized with lazy loading, and the layout was tested across all device sizes. A key innovation was the "impact tracker"—a live counter showing kilograms of plastic removed from oceans by booking trips, powered by a simple API simulation.

Development Process & Innovation

This project showcases end-to-end design and front-end development, with a focus on user experience and environmental messaging. The project included a comprehensive style guide, wireframes, and a high-fidelity Figma prototype before development began. The interactive map allows users to explore destinations with real-time availability, while the impact tracker creates an emotional connection between bookings and environmental conservation.

The headless CMS integration enables seamless content updates without developer intervention, making it easy for the fictional client to manage tour listings, blog posts, and conservation updates. Accessibility was a core consideration, ensuring the booking modal and navigation are keyboard-friendly and screen reader compatible.

The project demonstrates mastery of modern web technologies, thoughtful UX design, and the ability to blend aesthetic beauty with functional excellence—creating a digital experience that inspires environmental consciousness and adventure.

NEXT

Echoes of the Machine

2D Animation Character Design Storyboarding