This personal project is based on https://filevert.fr/. It is a file sharing web application, focused on protecting the environment and using green energy for its servers.

Objectif

Create the web interface with the lowest possible energy consumption, while remaining attractive and functional, using GreenUX techniques.

What is GreenUX ?

GreenUX or eco-design is a set of principles aimed at integrating environmental considerations throughout the life of a website, from its design to its use.

• Dark mode

• One page without scroll

• Really light background image (.png, 25ko)

• System fonts (Arial)

• .svg icons (from Phosphor Icons)

• No animation (except hover)

Background image creation process

1. I used an AI image generator (MidJourney) to generate a luxuriant forest background in 1440x810px

2. Then i processed the image in Photoshop CC, to decrease the saturation to 0 and to add a 50% #000000 filter. I exported it in .jpg with maximum quality. (I don't know why, by adding this step, it divides the size of the final render by 2).

3. Finally i processed again the image in Photoshop CC, to reduce the resolution to 1280x720px, and to compress the image as maximum using "Save for the web" export feature. The settings were set to "PNG-8", "Black and white", "Pattern", and "Intertwined".

4. The result is a 25ko image !