An interactive website aiming to educate China’s young adults about
the Great Filter theory and explaining the gravity of our current
situation. view desktop site
The Great Filter theory says there is one or more barriers in the
process from a bare planet to a technologically advanced
civilization. If that barrier is behind us, it means we are one of
the first civilizations to reach our current level of technology.
However, if it is ahead of us, it means a global catastrophic risk
is still to come.
I created an interactive website where viewers can investigate two
possible futures. It combines the use of photo manipulation and
educational hotspots to inform people that we are at a point where
Earth’s future lies in our hands.
Because this was made to be displayed at an art gallery, it is only
configured for desktop resolutions 1080p and up, full screen mode.
Several elements were also added in order to grab the guests’
Logo was made from the sci-fi typeface Eurofighter Condensed. Colors
throughout the main site follow a space theme, and the interactive
pages have their own matching palettes: earthy tones for utopia and
grungy shades for dystopia.
A short introductory video plays upon clicking the start button on the
idle screen, which automatically appears when no movement has been
detected for 3 minutes. The video briefly explains what the Great
Filter is and serves as a hook.
Once the intro video is done playing, viewers are brought to a
After making a choice, a draggable banner featuring the chosen future
is revealed. Individual hotspots are positioned over various sources
and clicking on them uncovers information about how it affects us.
Viewers are free to switch back and forth between utopia and dystopia
using the swap icon on the bottom right.
Utopia’s imagery was heavily inspired by an envision created by
architect teams AOA and TETRA. I recreated their proposal with a few
new aspects myself, building a preview of a smart, futuristic, green
city. Dystopia was a typical apocalyptic setting, hoping to showcase a
gruesome reality we aren’t far off from.
Watch the GIF for a general process of how I created the Utopia
banner. Used assets are below.
Full sized banners by themselves. There is also a Chinese version of
the site since they’re the target audience.
Tada! Enjoy some photos taken at the opening exhibit.