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

Objectif

Design a web interface with minimal energy consumption using GreenUX techniques, while maintaining an attractive and functional user experience. Additionally, integrate support for sponsored wallpapers.

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 lightweight 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 !