Last year I visualized the numerous digital entities that collectively comprise my online representations. 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.
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.
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.
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.
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.
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.
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.
PROJECT RESPONSIBILITIES
Creative direction, web design, web development
LAUNCH DATE
August 2020
WEBSITE
