Project Overview
In this project, I created an interactive poster called “Webben og planeten vår”. The concept focuses on digital sustainability and the hidden environmental impact of everyday web use. I chose this theme because activities such as streaming, storing files, sharing data, and using online services depend on data centres that require electricity and cooling.
Techniques I Used
The poster uses SVG-based visual elements together with CSS animations. Dashed SVG paths represent digital data moving across the web, while yellow nodes use animation to suggest activity. The earth and climate icons use floating and bouncing animations to connect digital behaviour with environmental effects.
I used Sass to organize colours, typography, layout, sections, and animations. Fluid typography with clamp(), flexible layouts, and relative units help the poster adapt to different screen sizes. I also used prefers-reduced-motion so that the animations can be disabled for users who prefer less movement.
What I Learned
This project helped me understand that animation should have a purpose rather than being added only as decoration. Movement can guide the viewer through information, establish visual hierarchy, and help communicate a story.
I also gained more experience with CSS keyframe animations and learned how properties such as transform, animation-duration, animation-delay, and animation-timing-function can be combined to give different elements their own behaviour.
Challenges
One of the main challenges was balancing animation with readability. Too much movement could distract from the message, while too little movement would make the poster feel static. I therefore had to adjust the timing and movement of the different elements so that the animations supported the content.
Another challenge was maintaining responsiveness because the poster combines text, SVG graphics, icons, and animated elements. Flexible sizing and relative units helped keep the composition usable on different screen sizes.
What I Would Improve
If I continued working on this project, I would refine the transitions between the different sections and experiment with more subtle animation timing. I would also test the poster on more devices and screen sizes to improve the balance between the visual elements, animations, and text.