OnEarth - Nature Conservation Website UI Figma Template
Product description
Build a calm, trustworthy, and impact-driven website for environmental missions with OnEarth, a nature conservation website UI template designed to help nonprofits, campaign teams, and eco-focused organizations communicate their work with clarity. Built in Figma and provided in both desktop and mobile views, it supports strong storytelling. So, visitors can understand your cause, explore active projects, and take action through donations or volunteering.
This template includes five essential pages, so you can launch a complete website structure without starting from zero. From the homepage that introduces your mission, to campaign listings and detailed project pages, every layout is created to feel structured, informative, and easy to scan.
OnEarth is also ideal for UI & UX design exploration. It uses consistent spacing, reusable components, and clean hierarchy across sections, making customization smooth whether you’re building a real conservation brand, a client demo, or a portfolio case study focused on mission-based design.
Design Layout & Style
OnEarth uses an earthy editorial layout system with nature-first visuals and soft structure, designed to feel grounded, modern, and approachable:
+ Earthy, Mission-Led Palette: Deep forest greens, warm olive tones, and clean off-whites for a natural, trustworthy feel.
+ Photo-Forward Storytelling: Large hero imagery and campaign photos support emotion and credibility.
+ Organic Section Accents: Subtle topographic/wave patterns and rounded containers add character without noise.
+ Card-Based Information Blocks: Values, campaigns, stats, and updates are organized in scannable cards.
+ Clear Typography Hierarchy: Strong headlines, readable body text, and balanced spacing improve comprehension.
+ Friendly UI Details: Soft corners, icon badges, and clean dividers keep the experience calm and modern.
+ Consistent Components & Grids: Buttons, labels, forms, tabs, and cards follow one unified system.
Ideal for
This template is built for eco brands that need trust, clarity, and action-friendly layouts:
+ Nature conservation nonprofits and foundations
+ Environmental campaigns and community programs
+ Wildlife protection and reforestation initiatives
+ Sustainability projects and NGO landing websites
+ Green startups and impact-driven organizations
+ Designers exploring mission-based websites in Figma
Key Value Propositions
OnEarth helps you present projects with structure, credibility, and a clear path to engagement:
+ Complete 5-Page Website System: A ready structure for mission, projects, and conversion flow.
+ Campaign-First Navigation: Users can browse campaigns easily and reach details without friction.
+ Story + Proof Balance: Built-in sections for values, milestones, stats, and team credibility.
+ Volunteer & Contact Ready: Clean forms and contact blocks support real engagement.
+ Responsive by Design: Desktop and mobile views are aligned for consistent UX.
+ Fast to Customize: Organized layers, reusable components, and scalable sections.
Why This Template Works for Conservation Brands
Environmental brands need a website that feels trustworthy, calm, and action-driven. OnEarth delivers that through a clean structure that helps visitors understand your mission fast, explore your impact with confidence, and take the next step without friction. The layout is built around scannable content blocks, strong hierarchy, and nature-forward visuals. So, your story stays clear even when the content gets detailed.
It also balances emotion and proof in one consistent system. Large imagery creates connection, while stats, milestones, values, and team elements reinforce credibility. With card-based sections, clear navigation patterns, and reusable components, you can keep every part of the site cohesive and easy to update. Most importantly, the conversion flow stays natural: visitors can learn, trust, and engage, whether that means donating, joining as a volunteer, or reaching out to collaborate.
Pages:
+ Homepage
+ About
+ Campaigns
+ Campaign Details
+ Contact
Features:
+ Desktop & Mobile View
+ Designed in Figma
+ Clean, Nature-Focused & Modern Interface
+ 1440px (Desktop) & 390px (Mobile)
+ Free Google Fonts Used
+ Easy to Edit & Customize
+ Organized Layers & Components
+ Vector-Based & Resizable Graphics
Please Note: All preview images are for display purposes only and are not included in the downloadable Figma file.
Free Trial
Demo mockups are intended for testing purposes only. Products downloaded under this license can only be used for display on a personal computer or for making image prints for personal use. They cannot be used for ads or other commercial purposes. Proper attribution is required, crediting Yellow Images and including the mockup web page link in your project or on your website.
Standard License
Works for small commercial and non-commercial projects. Covers projects valued at 10,000 USD or less. Allows social media posting, and digital and printed ads on local markets. Can't be used for native and web apps or games.
Enhanced License
Best for larger commercial and non-commercial projects, regardless of their estimated value. Grants unlimited rights for digital and physical ads, social media publications, broadcast, and streaming worldwide. Allows transferring the license to the purchased items to a third party.
Licenses details
Free Trial
Demo mockups are intended for testing purposes only. Products downloaded under this license can only be used for display on a personal computer or for making image prints for personal use. They cannot be used for ads or other commercial purposes. Proper attribution is required, crediting Yellow Images and including the mockup web page link in your project or on your website.
Personal
This license grants you a non-exclusive, non-transferable right to use the item for a personal, non-commercial single project. You may not sell, redistribute, or use the item in any commercial capacity. The item cannot be used in apps, websites, games, or for advertising purposes.
Commercial
This license grants limited rights to use the purchased item for a commercial or non-commercial single project with the following restrictions: a project value cap of $10,000, a limit of 5,000 physical or digital end products for sale, and up to 500,000 lifetime viewers for broadcast and streaming. The item cannot be resold, shared, or used in specific applications such as apps, games, or broadcast media.
Extended Commercial
Unlimited use within a single project. Transferable license. Commercial use without restrictions. No usage caps on products, advertisements, social media, apps, or media distribution.
Licenses details