KEY TAKEAWAYS
I began this project as a novice to the vast majority of the programs I needed to complete it, and came to understand—as I learned more about the tools available to me—that there were ways to significantly simplify my workflow. Key takeaways included:
- Optimizing file size is key to a responsive website. My choice to use PNGs at first compromised performance: once I shifted to JPEGs and SVGs, the loading times, and subsequently user experience, improved significantly.
- Illustrator is not a wireframing program. Creating my initial website designs in Illustrator was doable, but much more difficult than necessary when Figma and Adobe XD were available to me. However, learning either one of these programs would have increased the number of programs I needed to learn to seven (!), so it simply wasn't possible with the time I had. But I learned for next time!
- Working linearly—completing one asset from beginning to end—is more effective than working laterally. With so many assets to complete, I was able to trial a number of working styles. I found that I had a tendency to lose my place in the process if I skipped between assets, even those that followed the same workflow.
Process
1. Ideation
When presented with the premise for this project, I became interested in presenting a visualization of data currently made available by the
Centre for Near-Earth Studies (CNEOS) and the Jet Propulsion Laboratory (JPL) about cosmic collisions, which is highly-detailed and fairly comprehensive. During my initial research, I discovered the
Earth Impact Database, which records historical evidence of ancient impacts, which shaped the scope of my project to include not only current impact statistics, but the past and future as well.
2. Research
After selecting the topic, I collated what data was available and used
Tableau to clean and compare it, creating rough, preliminary visualizations to understand what information I had to work with. At this point, I began to make decisions about the specific content I would cover: how detailed did I want to get with my visualizations? How could I consolidate a number of very different datasets into a coherent whole? At this point I made note of any data limitations and located backup data sources to validate the information I had.
3. Choosing the right tools
Once the data was selected and finalized, development began. The goal of the project was to have a fully interactive final product, and so a solution was needed that could incorporate all the aspects required: tooltips; mapping data; timeline scrubbing; incorporation of 3D models. Since I was working with a limited coding background, it was necessary to find a tool that was both robust in functionality and easy to learn from existing resources. After experimenting with a variety of options, I decided to code my interactive maps on
Observable, which was designed for information sharing and open-source problem-solving; and to host my final website on
Webflow, which offered a high level of control over both the setup and interactivity of the visuals.
3. Design and translation
A preliminary wireframe of the website was designed in Adobe Illustrator, with placeholder text and graphics. Finalized assets and text replaced placeholders as they were completed to validate the design at each stage, and the design shifted as I learned that certain representations were more successful than others. A cut animation is shown below, depicting the scale of asteroids; it was replaced by a more simplified, graphical depiction (right, 4th image).
The 2D art and graphics, as well as the 3D models/animations, were planned out and worked on concurrently. Vector art was completed on Illustrator; graphs were built using Tableau and styled in Illustrator; and 3D art was sculpted in ZBrush and animated in Cinema 4D. Rotating globes were built using 3D tools in After Effects, and images from
NASA Visible Earth.
4. Development & Troubleshooting
Once designs were finalized, I began to migrate assets to Webflow. Some elements, like the interactive maps created in Observable, required additional coding, and needed to be styled to match the design. Tooltips and micro-interactions were coded manually, and I encountered difficulty in making the website responsive to different devices and browser sizes. In the end, the visualization was optimized for Google Chrome on desktop to keep the scope of the project feasible with the time given.
.png)
.png)
.png)
.jpg)
.jpg)
