

{"id":10848,"date":"2021-01-20T09:36:17","date_gmt":"2021-01-20T09:36:17","guid":{"rendered":"https:\/\/blog.tubikstudio.com\/?p=10848"},"modified":"2026-05-13T15:26:57","modified_gmt":"2026-05-13T15:26:57","slug":"web-design-environment-ecology","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/web-design-environment-ecology\/","title":{"rendered":"When the Internet Goes Green: Web Design for a Planet in Crisis"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">The screen glows. You scroll. And somewhere between a hero animation and a charity CTA, something shifts\u2014you actually <\/span><i><span style=\"font-weight: 400;\">care<\/span><\/i><span style=\"font-weight: 400;\">. That&#8217;s environmental web design done right: it turns abstract planetary grief into something tangible, beautiful, and worth clicking through.<\/span><\/p>\n<h2><b>Plastic Has Never Looked This Urgent<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">The StopPlastic website does something most awareness campaigns fail at\u2014it makes you feel the weight of the problem before you&#8217;ve read a single statistic. A <a href=\"https:\/\/blog.tubikstudio.com\/contrast-in-user-interface-design?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=save_the_planet_designs&amp;source=blog\">high-contrast<\/a> color palette strips the experience down to its bones, while negative space lets the message breathe and land. Motion design carries emotional momentum through each scroll interaction, and the typographic hierarchy is built for skimmers and deep-readers alike. This is persuasive web design working at full capacity: every visual decision\u2014collage-heavy imagery, bold type, restrained color\u2014reinforces the urgency without tipping into panic. Landing page conversion principles usually belong to e-commerce; here they serve the ocean.<\/span><\/p>\n<h2><\/h2>\n<p><iframe loading=\"lazy\" title=\"Stop Plastic Web Design tubik studio\" src=\"https:\/\/player.vimeo.com\/video\/501748887?h=2c429f23b8&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"375\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe><\/p>\n<p><iframe loading=\"lazy\" title=\"Stop plastic website pages tubik studio\" src=\"https:\/\/player.vimeo.com\/video\/501749018?h=843edac1b3&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"375\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe><\/p>\n<p><iframe loading=\"lazy\" title=\"Stop plastic website design tubik\" src=\"https:\/\/player.vimeo.com\/video\/501748981?h=a59fe95efd&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"375\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe><\/p>\n<h2><\/h2>\n<h2><b>Ecotourism Looks Better With Mud on Its Boots<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">There&#8217;s a certain design challenge in selling stillness. The ecotourism website tackled it by leading with a hero illustration that feels handcrafted rather than stock\u2014lush, specific, and earned. The Discover page layers <a href=\"https:\/\/blog.tubikstudio.com\/photo-content-in-user-interfaces?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=save_the_planet_designs&amp;source=blog\">photography<\/a> with custom <a href=\"https:\/\/blog.tubikstudio.com\/big-reasons-to-apply-illustrations-in-ui-design?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=save_the_planet_designs&amp;source=blog\">illustrations<\/a>, giving users a visual language that shifts between aspiration and information without ever losing coherence.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><a href=\"https:\/\/blog.tubikstudio.com\/video-content-user-experience?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=save_the_planet_designs&amp;source=blog\">Video<\/a> integration on destination pages extends dwell time naturally, which matters for SEO signals, but more importantly, it works because the content actually earns the viewer&#8217;s attention. Meanwhile, responsive web design keeps the visual harmony intact from desktop to mobile\u2014no awkward reflows, no collapsed magic. The typography choice walks the line between decorative and readable, which on a travel site, is everything.<\/span><\/p>\n<p><iframe loading=\"lazy\" title=\"Ecotourism website home page tubik design\" src=\"https:\/\/player.vimeo.com\/video\/501873825?h=ff5c6ea36f&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"375\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe><\/p>\n<p><iframe loading=\"lazy\" title=\"Ecotourism website interactions tubik design\" src=\"https:\/\/player.vimeo.com\/video\/502126766?h=430be43588&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"375\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe><\/p>\n<p><iframe loading=\"lazy\" title=\"Eco tourism company website tubik design\" src=\"https:\/\/player.vimeo.com\/video\/502126734?h=84c9b91c5f&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"375\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-10837\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/05\/ecotourism-website-design-tubik-studio-1024x768.png\" alt=\"ecotourism website design tubik studio\" width=\"1024\" height=\"768\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/05\/ecotourism-website-design-tubik-studio-1024x768.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/05\/ecotourism-website-design-tubik-studio-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/05\/ecotourism-website-design-tubik-studio-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/05\/ecotourism-website-design-tubik-studio-150x113.png 150w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/05\/ecotourism-website-design-tubik-studio.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<h2><b>Zero Waste, Zero Clutter, Zero Apologies<\/b><\/h2>\n<p><span style=\"font-weight: 400;\"><a href=\"https:\/\/blog.tubikstudio.com\/lean-and-mean-power-of-minimalism-in-ui-design?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=save_the_planet_designs&amp;source=blog\">Minimalist<\/a> web design has become something of a clich\u00e9, but when the brand philosophy <\/span><i><span style=\"font-weight: 400;\">is<\/span><\/i><span style=\"font-weight: 400;\"> minimalism, the aesthetic becomes argument. The zero-waste lifestyle website leans into this with confidence: clean navigation, generous white space, and a product page architecture built around a single dominant image.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The little animated bird\u2014a mascot threading through transitions and loading states\u2014is the kind of UX detail that seems small until you notice its absence on lesser sites. It builds brand recognition across pages without adding visual noise. Blog layouts use split-screen presentation to make long-form content scannable, and the loading animation repurposes illustration assets rather than defaulting to a spinner. User experience design at this level feels less like interface and more like editorial craft.<\/span><\/p>\n<p><iframe loading=\"lazy\" title=\"Minimalist service page webdesign tubik\" src=\"https:\/\/player.vimeo.com\/video\/502145695?h=e0aae88fc9&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"375\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10052\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/08\/product-page-zero-waste-website-tubik-design.png\" alt=\"product page zero-waste website tubik design\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/08\/product-page-zero-waste-website-tubik-design.png 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/08\/product-page-zero-waste-website-tubik-design-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/08\/product-page-zero-waste-website-tubik-design-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/08\/product-page-zero-waste-website-tubik-design-1024x768.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2020\/08\/product-page-zero-waste-website-tubik-design-150x113.png 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><iframe loading=\"lazy\" title=\"Product page zero waste website tubik\" src=\"https:\/\/player.vimeo.com\/video\/502145630?h=88046c00fa&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"375\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe><\/p>\n<p><iframe loading=\"lazy\" title=\"Zerowaste product page color interactions tubik\" src=\"https:\/\/player.vimeo.com\/video\/502145657?h=c644a5d813&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"375\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe><\/p>\n<p><iframe loading=\"lazy\" title=\"Blog webpage design tubik\" src=\"https:\/\/player.vimeo.com\/video\/502126693?h=5bbaa81cd0&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"375\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe><\/p>\n<p><iframe loading=\"lazy\" title=\"Waste management article webpage tubik\" src=\"https:\/\/player.vimeo.com\/video\/502145722?h=12b3453047&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"375\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe><\/p>\n<h2><b>The Ocean Page That Makes a 404 Worth Finding<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Save the Oceans could have been a worthy-but-dull charity website. Instead, it commits to atmosphere from the first pixel. The <a href=\"https:\/\/blog.tubikstudio.com\/color-matters-6-tips-on-choosing-ui-colors?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=save_the_planet_designs&amp;source=blog\">color<\/a> palette\u2014deep blues with deliberate contrast\u2014doesn&#8217;t illustrate the ocean so much as <\/span><i><span style=\"font-weight: 400;\">invoke<\/span><\/i><span style=\"font-weight: 400;\"> it. Bold typography and an airy layout create the kind of visual breathing room that makes content feel important rather than crowded.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The real standout, though, is the 404 page: rather than a dead end, it becomes a continuation of the site&#8217;s emotional argument, turning a technical error into a storytelling moment. This is conversion-focused design thinking applied to purpose-driven content\u2014and it shows that nonprofit web design deserves the same craft investment as any commercial project.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8606\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/12\/save-the-oceans-website-animation-tubik-design-1.gif\" alt=\"save the oceans website animation-tubik-design\" width=\"800\" height=\"600\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-10859\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/01\/save-the-oceans-website-mobile-1024x921.png\" alt=\"save the oceans website\" width=\"1024\" height=\"921\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/01\/save-the-oceans-website-mobile-1024x921.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/01\/save-the-oceans-website-mobile-300x270.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/01\/save-the-oceans-website-mobile-768x691.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/01\/save-the-oceans-website-mobile-150x135.png 150w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/01\/save-the-oceans-website-mobile.png 1400w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-10863\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/01\/save-the-oceans-website-7-1024x607.png\" alt=\"save the oceans website\" width=\"1024\" height=\"607\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/01\/save-the-oceans-website-7-1024x607.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/01\/save-the-oceans-website-7-300x178.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/01\/save-the-oceans-website-7-768x455.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/01\/save-the-oceans-website-7-150x89.png 150w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/01\/save-the-oceans-website-7.png 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<h2><b>Sustainable Energy Has Finally Found Its Visual Language<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Alternative energy websites have long suffered from a stock-photo identity crisis\u2014endless solar panels, suspiciously green grass. This innovative energy service concept breaks the pattern with a digital illustration that sets the tone above the fold before a single word of body copy appears.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The <a href=\"https:\/\/blog.tubikstudio.com\/hero-images-in-web-design?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=save_the_planet_designs&amp;source=blog\">hero<\/a> communicates scale, technology, and community simultaneously, which is a genuinely hard brief to execute. Good UX writing in the tagline sharpens the image&#8217;s message rather than competing with it. The visual system signals that sustainable technology can look as sophisticated as any fintech product\u2014because the audience for clean energy solutions expects both credibility and vision.<\/span><\/p>\n<h2><\/h2>\n<p><iframe loading=\"lazy\" title=\"Innovative energy service website tubik\" src=\"https:\/\/player.vimeo.com\/video\/502145587?h=9c063c7609&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"375\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe><\/p>\n<h2><b>Communities Need a Homepage Too<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">The environmental protection community site solves a design problem that civic and advocacy organizations struggle with constantly: how do you look credible to businesses and emotionally resonant to individuals at the same time? The hero illustration does most of the heavy lifting, establishing tone and theme in a single composed image.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Visual hierarchy does the rest\u2014the <a href=\"https:\/\/blog.tubikstudio.com\/call-for-attention-powerful-cta-button-design?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=save_the_planet_designs&amp;source=blog\">CTA<\/a> is visible without being aggressive, the information architecture respects the reader&#8217;s intelligence, and the overall UI design feels like an organization that has its act together. Which, for a group asking businesses to trust its environmental consulting, matters enormously.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The planet has a design problem. These studios are working on it\u2014one scroll interaction at a time.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-8204\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/06\/environment_protection_community_website_tubik-1-1024x768.png\" alt=\"environment_protection_community_website_tubik\" width=\"1024\" height=\"768\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/06\/environment_protection_community_website_tubik-1.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/06\/environment_protection_community_website_tubik-1-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/06\/environment_protection_community_website_tubik-1-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/06\/environment_protection_community_website_tubik-1-150x113.png 150w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<h2><strong>Recommended Reading<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">Curious where great design thinking leads next? Read more from our collection:<\/span><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/ui-designs-for-ecommerce?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=save_the_planet_designs&amp;source=blog\">Design for Sales: 10 Creative UI Designs for Ecommerce<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/creative-web-design-for-events?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=save_the_planet_designs&amp;source=blog\">Steal the Show: Creative Web Design for Diverse Events<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/app-design-ideas?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=save_the_planet_designs&amp;source=blog\">App Design Ideas: 7 Nifty Mobile Application Design Projects<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/media-editorial-website-design?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=save_the_planet_designs&amp;source=blog\">Information Beautified: Media and Editorial Website Designs<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/ux-design-traveling?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=save_the_planet_designs&amp;source=blog\">UX Design for Traveling: Impressive Web Design Concepts<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/web-design-concepts-for-business?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=save_the_planet_designs&amp;source=blog\">23 Impressive Web Design Concepts for Various Business Objectives<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/mobile-app-design-concepts?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=save_the_planet_designs&amp;source=blog\">Mobile Design: 14 Stylish and User-Friendly App Design Concepts<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/creative-landing-page-design?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=save_the_planet_designs&amp;source=blog\">Web Design: 26 Examples of Creative Landing Pages<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/creative-ui-design-concepts-3d-graphics?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=save_the_planet_designs&amp;source=blog\">UI in Volume: 3D Graphics in Creative UI Design Concepts<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/logofolio-logo-designs?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=save_the_planet_designs&amp;source=blog\">Logofolio: 16 Logo Designs for Different Business Goals<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/wed-design-eye-catching-web-interfaces-with-bright-graphics?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=save_the_planet_designs&amp;source=blog\">9 Eye-Catching Web Interfaces with Bright Graphics<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/types-of-web-pages?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=save_the_planet_designs&amp;source=blog\">Web Design: 16 Basic Types of Web Pages<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/motion-for-mobile-creative-concepts-of-ui-animation?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=internal_traffic&amp;utm_content=save_the_planet_designs&amp;source=blog\">Motion for Mobile. 20 Creative Concepts of UI Animation<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>From plastic awareness campaigns to zero-waste shops and clean energy platforms, these six environmental websites prove that purpose-driven design can be just as craft-driven as any commercial project.<\/p>\n","protected":false},"author":10003,"featured_media":17569,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[212,532,256,533,440,537,447,538,457,548,463,589,465,590,466,479,482,485,489,491,16,502,100,504,147,515],"coauthors":[634],"class_list":["post-10848","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui_ux","tag-graphic-design","tag-web-animation","tag-interaction-design","tag-web-design","tag-tubik","tag-web-design-examples","tag-tubik-studio","tag-web-design-inspiration","tag-ui","tag-website-design","tag-ui-design-article","tag-environment","tag-ui-design-examples","tag-ecology","tag-ui-design-inspiration","tag-usability","tag-user-experience","tag-user-experience-design","tag-user-experience-examples","tag-user-interface","tag-animation","tag-ux","tag-design","tag-ux-design-article","tag-design-studio","tag-uxui"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>When the Internet Goes Green: Web Design for a Planet in Crisis<\/title>\n<meta name=\"description\" content=\"Six examples of environmental and sustainability web design done right, from StopPlastic to ecotourism, zero waste, and clean energy platforms.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tubikstudio.com\/blog\/web-design-environment-ecology\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"When the Internet Goes Green: Web Design for a Planet in Crisis\" \/>\n<meta property=\"og:description\" content=\"Six examples of environmental and sustainability web design done right, from StopPlastic to ecotourism, zero waste, and clean energy platforms.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/web-design-environment-ecology\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2021-01-20T09:36:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-13T15:26:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/01\/Copywriting-in-UI.-Words-That-Make-Design-Go-Round.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Anastasiia Lutsenko\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anastasiia Lutsenko\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/web-design-environment-ecology\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/web-design-environment-ecology\/\",\"name\":\"When the Internet Goes Green: Web Design for a Planet in Crisis\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/web-design-environment-ecology\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/web-design-environment-ecology\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/01\/Copywriting-in-UI.-Words-That-Make-Design-Go-Round.png\",\"datePublished\":\"2021-01-20T09:36:17+00:00\",\"dateModified\":\"2026-05-13T15:26:57+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/2d8ccd57b6edf253e2787561fe1e66c1\"},\"description\":\"Six examples of environmental and sustainability web design done right, from StopPlastic to ecotourism, zero waste, and clean energy platforms.\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/web-design-environment-ecology\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/web-design-environment-ecology\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/web-design-environment-ecology\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/01\/Copywriting-in-UI.-Words-That-Make-Design-Go-Round.png\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/01\/Copywriting-in-UI.-Words-That-Make-Design-Go-Round.png\",\"width\":1200,\"height\":600},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/web-design-environment-ecology\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"When the Internet Goes Green: Web Design for a Planet in Crisis\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\",\"url\":\"https:\/\/tubikstudio.com\/blog\/\",\"name\":\"Tubik Blog: Articles About Design\",\"description\":\"Tubik Studio\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/2d8ccd57b6edf253e2787561fe1e66c1\",\"name\":\"Anastasiia Lutsenko\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/d893c1e4578c8cd7a39f393978129a25\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9c0999380ab25553a4aea6cbc2224fa5f579af8ebbef2928d1d71fd4137a77a1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/9c0999380ab25553a4aea6cbc2224fa5f579af8ebbef2928d1d71fd4137a77a1?s=96&d=mm&r=g\",\"caption\":\"Anastasiia Lutsenko\"},\"description\":\"7+ years of writing content that speaks, sells, and sticks. Raised on legendary Apple commercials and allergic to mediocrity, Anastasiia writes for products, interfaces, and campaigns that refuse to be ignored.\",\"url\":\"https:\/\/tubikstudio.com\/blog\/author\/alutsenko\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"When the Internet Goes Green: Web Design for a Planet in Crisis","description":"Six examples of environmental and sustainability web design done right, from StopPlastic to ecotourism, zero waste, and clean energy platforms.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/tubikstudio.com\/blog\/web-design-environment-ecology\/","og_locale":"en_US","og_type":"article","og_title":"When the Internet Goes Green: Web Design for a Planet in Crisis","og_description":"Six examples of environmental and sustainability web design done right, from StopPlastic to ecotourism, zero waste, and clean energy platforms.","og_url":"https:\/\/tubikstudio.com\/blog\/web-design-environment-ecology\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2021-01-20T09:36:17+00:00","article_modified_time":"2026-05-13T15:26:57+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/01\/Copywriting-in-UI.-Words-That-Make-Design-Go-Round.png","type":"image\/png"}],"author":"Anastasiia Lutsenko","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Anastasiia Lutsenko","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tubikstudio.com\/blog\/web-design-environment-ecology\/","url":"https:\/\/tubikstudio.com\/blog\/web-design-environment-ecology\/","name":"When the Internet Goes Green: Web Design for a Planet in Crisis","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/web-design-environment-ecology\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/web-design-environment-ecology\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/01\/Copywriting-in-UI.-Words-That-Make-Design-Go-Round.png","datePublished":"2021-01-20T09:36:17+00:00","dateModified":"2026-05-13T15:26:57+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/2d8ccd57b6edf253e2787561fe1e66c1"},"description":"Six examples of environmental and sustainability web design done right, from StopPlastic to ecotourism, zero waste, and clean energy platforms.","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/web-design-environment-ecology\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/web-design-environment-ecology\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/web-design-environment-ecology\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/01\/Copywriting-in-UI.-Words-That-Make-Design-Go-Round.png","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2021\/01\/Copywriting-in-UI.-Words-That-Make-Design-Go-Round.png","width":1200,"height":600},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/web-design-environment-ecology\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"When the Internet Goes Green: Web Design for a Planet in Crisis"}]},{"@type":"WebSite","@id":"https:\/\/tubikstudio.com\/blog\/#website","url":"https:\/\/tubikstudio.com\/blog\/","name":"Tubik Blog: Articles About Design","description":"Tubik Studio","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/2d8ccd57b6edf253e2787561fe1e66c1","name":"Anastasiia Lutsenko","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/d893c1e4578c8cd7a39f393978129a25","url":"https:\/\/secure.gravatar.com\/avatar\/9c0999380ab25553a4aea6cbc2224fa5f579af8ebbef2928d1d71fd4137a77a1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9c0999380ab25553a4aea6cbc2224fa5f579af8ebbef2928d1d71fd4137a77a1?s=96&d=mm&r=g","caption":"Anastasiia Lutsenko"},"description":"7+ years of writing content that speaks, sells, and sticks. Raised on legendary Apple commercials and allergic to mediocrity, Anastasiia writes for products, interfaces, and campaigns that refuse to be ignored.","url":"https:\/\/tubikstudio.com\/blog\/author\/alutsenko\/"}]}},"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/10848","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/users\/10003"}],"replies":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/comments?post=10848"}],"version-history":[{"count":14,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/10848\/revisions"}],"predecessor-version":[{"id":13027,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/10848\/revisions\/13027"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/17569"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=10848"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=10848"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=10848"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=10848"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}