Telling an untold story was a creative challenge that we wanted to take on headfirst. The excitement of the second space race has inspired us to look to the future with optimism. Through an interactive timeline written from the perspective of a hypothetical future historian looking back on the first Mars landing, we hope to remind global citizens that we are a part of a future in the making.
Our project tells the story of the Mars Landing from the perspective of 2099. So far, you can learn about what led up to the Mars landing and the rovers that were sent for the job. You will soon be able to interact with 3D models of various elements on our site.
Our web platform was built with JavaScript, Node.js, HTML5, and CSS3. We used Figma to prototype and design. Our design resources were comprised of vectors from unDraw and 3D models sourced from NASA’s 3D Models and Mars Exploration Program. We used Google’s model-viewer web component to render the models in the browser.
Due to outside obligations and time constraints, we were unable to devote as much time as we had hoped to! With the existing challenges now gone, we’re excited to continue building forth and working together to update our current MVP. Another interesting challenge was figuring out how to optimize 3D models for better web performance. Without software such as C4D, Blender, or Maya, converting .obj files to glTF/GLB was a potential rabbit hole. We were able to overcome this by finding .glb assets through NASA’s resources page.
We’re proud of our accomplishments prototyping and demonstrating collaborative teamwork for an exciting cause. Given the short time frame of approximately two days, we’re very proud of our ability to handle new frameworks and workflows in a quick and effective manner.
We learned a lot about the current state of Mars exploration, as well as a lot more about Figma and CSS.
We look forward to launching a live website detailing the full story of the 2033 Mars Landing, from rovers to rockets and everything in between. We might even edit our story to be historically accurate as the years pass by.
HTML, CSS, JavaScript, Node.js, Figma, 3D, Google Model Viewer