PostHole
Compose
Login
A Designer’s Guide To Eco-Friendly Interfaces
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.
- Carrie Webster
- Feb 23, 2026
- 0 comments
A Designer’s Guide To Eco-Friendly Interfaces
- 9 min read
- User Experience,
Design,
Optimization
About The Author
With 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 ↬
*Weekly tips on front-end & UX.
Trusted by 182,000+ folks.*
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 Mode
In 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.]
Dark mode vs. Light mode. (Image source: Purdue University) (Large preview)
The Logic
Unlike 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.
“
The Data
The 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 Goal
In 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 Optimisation
We 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 Logic
The “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.]
Median page weight by content type. (Image source: HTTP Archive) (Large preview)
The Data
According 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 Goal
I 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” Animations
We 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 Logic
Animation 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.]
Size comparison of uncompressed JPEG, PNG, WebP, and AVIF photos and text images. (Image source: Photutorial) (Large preview)
The Data
[...]