Project Title
Where am I?
Project Date
I started and completed the first iteration of this project in August 2020, but it's a work in progress.
Project URL
Description
For a few months now, I've wanted to visualize the numerous digital entities that collectively comprise my online representations. Although this could arguably be viewed as a slightly narcissistic endeavor, I actually think it's sobering to see just how far I've extended myself into the digital realm. Over the course of a weekend in August I finally got around to designing and building a visualization I was happy with, but this is still only the first iteration of what I envision to be an ongoing project.
Design Approach
The two design elements I kept most in mind while working on this project were typography and white space. I was wary of adding additional noise in the form of shapes and decorations to the diagram, and decided to go the minimal route. Aesthetically speaking, this project follows the dark mode, typographic style I've established for the projects I post on outer-outer.space.
Design Challenges
The biggest challenges I encountered with this project both had to do with building it. At first I wasn't sure what the best way would be to create the diagram I'd designed. It's not exactly a chart, although the closest thing to it might be a network diagram of some sort, but a charting library didn't seem like the best next step.
I also considered drawing the elements with CSS, but ultimately decided to use inline SVGs and CSS Grid. The second challenge had to do with making the diagram responsive. Ultimately, I made it responsive down to around 700px, after which point I use the lack of a viewport meta-tag to cause the website to scale down proportionally to fit the size of the device.
Tools
Figma, Coda 2, MAMP, HTML & CSS
Inspiration
By far my biggest source of inspiration for this project is Yehwan Song's amazing website, in which she visualizes her creative portfolio as a series of interactive Venn diagrams. I've also been inspired by the various examples of personal media ecosystem visualizations I've come across on Twitter, although regrettably I can't seem to find any of the examples I've bookmarked.
