A Designer’s Guide To Eco-Friendly Interfaces

A Designer’s Guide To Eco-Friendly Interfaces — Smashing Magazine

Skip to main content Start reading the article Jump to list of all articles Jump to all topics9 min readUser Experience, Design, OptimizationShare on Twitter, LinkedInAbout The AuthorWith over 20 years experience in the field of user centered design, and a background in web design and development, Carrie has worked in startups through to … More about Carrie ↬Email NewsletterYour (smashing) email Weekly tips on front-end & UX.Trusted by 182,000+ folks. See User Testing Live How To Measure UX and Design Impact, 8h video + UX training Naming Design Systems with Samantha Gordashko Celebrating 10 million developers Design Patterns For AI Interfaces, 30 lessons + UX training How To Measure UX and Design Impact with Vitaly Friedman Custom Web Forms for Angular, React, & Vue. Your backend.Every high-resolution hero image, autoplay video, and complex JavaScript animation carries a cost. Sustainable UX challenges the era of “unlimited pixels” and reframes performance as responsibility. In 2026, truly sophisticated design is defined not by how much it adds, but by how thoughtfully it reduces its footprint.I’ve spent over two decades in the trenches of user experience design. I remember the transition from table-based layouts to CSS, the pivot to responsive design when the iPhone launched, and the rise of the “attention economy.” But as we navigate 2026, the industry is facing its most significant shift yet. We are moving past the era of “design at any cost” into the era of Sustainable UX.It’s not something most designers think about, including myself, until I was prompted by hearing about this as a concept. For years, we have treated the internet as an ethereal, weightless cloud. We have assumed that digital products were “green” simply because they weren’t printed on paper. I used to think that too, and before the concept of climate change emerged, it was more about saving trees.We were wrong. The cloud is a physical infrastructure, a sprawling network of data centres, undersea cables, and cooling systems that hum 24⁄7. While AI-focused data centers match the power consumption of massive aluminum smelters, their high geographic density creates an even more intense and localised environmental strain.As UX designers, we are the architects of this energy consumption. Every high-resolution hero image, every auto-playing background video, and every complex JavaScript animation we approve is a direct instruction to a processor to consume power. If we want to build a future that lasts, we must stop designing for “wow” and start designing for efficiency.Dark ModeIn the early 2000s, white backgrounds were the standard because they mimicked the familiarity of paper. However, the hardware has evolved, and our design philosophy must follow. The shift from LCD to OLED (Organic Light Emitting Diode) technology has fundamentally changed how colour impacts energy.Dark mode vs. Light mode. (Image source: Purdue University) (Large preview)The LogicUnlike traditional LCD screens, which require a backlight that is always on (even when displaying black), OLED screens illuminate each pixel individually. When a pixel is set to true black (#000000), that specific diode is turned completely off. It draws zero power.By designing interfaces that favour darker palettes, we aren’t just following a trend; we are physically reducing the energy requirement of the user’s device.“The DataThe energy savings are far from negligible. A landmark study by Purdue University in 2021, which has become the gold standard for this discussion, revealed that at 100% brightness, switching from light mode to dark mode can save an average of 39% to 47% of battery power. On a global scale, if every major app defaulted to dark mode, the reduction in grid demand would be astronomical.The Design GoalIn 2026, Dark Mode should no longer be a secondary “theme” tucked away in a settings menu. We should be designing with a “Dark-First” mentality. This doesn’t mean every site must look like The Matrix, but it does mean prioritising high-contrast dark themes as the default system-preferred state. This extends the hardware lifespan of the device and lowers the carbon footprint of every interaction.I personally prefer Light-Mode for reading, so it makes sense to have both light and dark mode options available. There are also accessibility considerations with providing both options.Image And Video OptimisationWe have become lazy designers. With high-speed 5G and fibre optics, we’ve stopped worrying about file sizes. The average mobile page weight has increased by over 500% in the last decade, largely due to unoptimized visual assets.The LogicThe “Digital Fat” of a website (those 4MB Unsplash photos and 15MB background videos) is the single largest contributor to page-load energy. Every megabyte transferred from a server to a client requires electricity for the transmission, the server’s processing, and the user’s rendering engine. When we use massive files, we are essentially “burning” energy to show a picture that could have been just as effective at a fraction of the size. Not to mention, you are also providing a better user experience with a page that loads much faster.Median page weight by content type. (Image source: HTTP Archive) (Large preview)The DataAccording to the HTTP Archive, images and video consistently account for the lion’s share of a page’s total weight. However, the shift to modern formats like AVIF and WebP can reduce image weight by up to 50% compared to JPEG, without any perceptible loss in quality.Although these formats are not as familiar to me as JPG and PNG, I am definitely looking forward to using them to reduce page size.The Design GoalI recently led a redesign for a cybersecurity platform. By implementing a “Before and After” audit, we discovered that their homepage was loading 5.5MB of data. By replacing high-res photography with SVG (Scalable Vector Graphics) art and using clever CSS gradients instead of image assets, we dropped the load to 1.2MB. That is a 78% reduction in energy load! As a designer, your first question should always be:“Do I need a photo for this, or can I achieve the same emotional resonance with code?”Intentional Motion: Cutting “Loud” AnimationsWe live in an era of “scroll-jacking” and complex 3D Parallax effects. While these might win awards on Awwwards.com, they are often ecological disasters.The LogicAnimation is not free. To render a complex animation, the device’s GPU (Graphics Processing Unit) must work at high capacity. This increases the CPU temperature, triggers cooling fans (in laptops), and drains battery rapidly. “Loud” animations that run constantly in the background or trigger massive re-paints of the browser are the energy equivalent of leaving your car idling in the driveway.Size comparison of uncompressed JPEG, PNG, WebP, and AVIF photos and text images. (Image source: Photutorial) (Large preview)The DataGoogle’s Material Design guidelines emphasize “Meaningful Motion.” They argue that animation should be used only to orient the user or provide feedback. And using WebP instead of JPEG can save 25-50% of data on a page.The Design GoalWe must adopt Meaningful Motion. If an animation doesn’t help a user complete a task or understand a hierarchy, it is a waste. We should favour CSS transitions over heavy JavaScript libraries like GSAP or Lottie where possible, as CSS is hardware-accelerated and far more efficient for the browser to calculate.As a UX designer, I can’t argue this approach. This not only helps reduce data waste but also improves UX for our users.Setting A “Data Budget” For Every ProjectIn my 20+ years of UX, the most successful projects have generally been the ones with the tightest constraints.Just as a project has a financial budget, it should also have a carbon and data budget.“The LogicA Data Budget is a hard cap on the total size of a page (e.g., “This landing page cannot exceed 1MB”). This forces the design team to make difficult, intentional choices. If you want to add a new tracking script or a fancy font weight, you have to “pay” for it by optimising or removing something else. This prevents “feature creep” from turning into “carbon creep.”The DataThe Sustainable Web Design model, developed by pioneers like Wholegrain Digital, provides a formula to calculate the CO2 per page view. The average website produces about 0.5 grams of CO2 per view. For a site with 1 million monthly views, that’s 6 metric tons of CO2 a year, equivalent to driving a car 15,000 miles.The Design GoalThe Sustainable UX ChecklistReduce ImagesQuestion the necessity of every visual and use the smallest resolution and most efficient file formats (like AVIF) to minimize data transfer.Optimise VideoEliminate auto-playing media and prioritise highly compressed, short loops to ensure energy is only spent on content the user intends to view.Limit FontsUse a maximum of two web font weights or stick to classic system fonts to remove unnecessary server requests and rendering bloat.Recycle AssetsRepurpose a single image or video multiple times using CSS filters and overlays to create visual variety without increasing the total page weight.Choose Green HostingHost your digital products on servers verified by The Green Web Foundation to ensure they are powered by renewable energy sources.Minimize Data DistanceSelect server locations geographically close to your primary audience to reduce the energy required for data to travel through physical infrastructure.Printable Green UX checklist from Mangrove Web. (Image source: Mangrove Web) (Large preview)The Business Case For Eco-friendly DesignSome might argue that “Green UX” sounds like a compromise on quality. On the contrary, it is a competitive advantage. Sustainable design is performance design.When you reduce page weight, your site loads faster. When your site loads faster, your Core Web Vitals improve. When your Core Web Vitals improve, your SEO ranking goes