The Internet alone consumes 10% of the world’s electricity and is responsible for 4% of greenhouse gas emissions! In this context, eco-responsible web design is no longer an option. UX designers and UI designers have a key role in this approach and can act at their level!
Here are 4 ideas for an eco-designed and creative web design
Limit the number of fonts
Loading fonts on a website is very energy-intensive. Be sure to limit the number of fonts. The ideal is to use only one, two at the most, one for the title and one for the texts!
Choice is also important. It is better to use standard fonts and avoid the user loading them because web fonts add weight to the site. However, choosing system fonts reduces bandwidth usage. Among the most used default fonts we can mention Georgia, Arial, Lucida Sans, etc.
Think minimalism
Making your site less energy-intensive involves a simple, clean design that gets to the point. It’s the trend! This doesn’t mean doing without a rich design and a strong graphic identity, but rather that you shouldn’t overload your interface with media (illustrations, photos, videos). Always favor simple illustrations in SVG format rather than images and avoid using videos when it is not necessary to reduce the weight of the site and therefore its loading time.
According to Google, images represent 60% of the bytes transmitted on the web, it is advisable to use the Webp format for compression. The compressed image is ultimately of better quality with a reduced weight of approximately 40% compared to traditional formats such as JPG and PNG.
Also limit animations and “wow” effects that add nothing to the user experience (and which tend to age badly) and keep only what is really useful.
Overall, the more sober your site is, the more eco-designed it will be.
A eco-responsible web design in css
To take this idea of minimalism even further, think CSS! A design that can be done only in HTML/CSS will obviously be even lighter and will considerably reduce the number of requests because the style sheet generates a single http request while each image also generates an http request (10 images = 10 requests).
For example, instead of using an image for the background of a block, favor simple shapes. Similarly, for animations, favor those that can be done entirely in CSS.
Switch to dark mode
Websites with a black or dark background known as “Dark Mode” are not only interesting for reducing eye fatigue and offering more visual comfort to the user.
This type of design is very relevant if you want to save electricity, in fact dark colors use fewer bright pixels and therefore less light unlike light colors like white. This directly reduces the energy consumption of all terminals.
Dark mode is therefore an option to consider to make your site more eco-friendly.
Less is more
The eco-design of web interfaces takes into account many parameters ranging from design to server parameters and the quality of the source code. The UX/UI duo is central to this approach. It is this duo which, by applying principles of simplicity to the design while staging a sum of small optimizations, can initiate a virtuous circle of eco-design.
