Aerospace
A visual and educational frontier for humankind's space explorations and innovations.
Skills
UI Design
TOOLS
Adobe XD, Photoshop, Lightroom
TIMELINE
One week, Individual
Overview
Aerospace is a civil space program, leading in the field of Space exploration and innovation. The purpose of this website is designed to create a visual experience that documents the engineering achievements of our generations, generating knowledge for our solar system and the outer world that surrounds us.
Context
Visualizing the spectacle of Space explorations
After TYPOLOGY, this assignment looked to create a visual-heavy form of storytelling through interface design. The objective of Aerospace was to build an educational website while showcasing the use of animations or interactivity. I chose to experiment with a photography-heavy approach, as Typology was primarily typographic elements. I selected space exploration to spotlight celestial bodies and space technology, showcasing the amazing discoveries from humankind. My goal was to blend photography embedded as backgrounds and interactive objects with written content to foster an atmosphere for visual learning.
Note: Due to this project's need for written content, it was suggested we borrow from open domain. Although I would've redesigned NASA's Solar System Exploration page directly, the syllabus wanted to avoid copyright issues even though federal government and agency work cannot be copyrighted under United States copyright laws. Nonetheless, the content used in the designs have been cautiously paraphrased, and despite the project being titled Aerospace, these interfaces have been created with NASA and their audiences in mind.
Note: Due to this project's need for written content, it was suggested we borrow from open domain. Although I would've redesigned NASA's Solar System Exploration page directly, the syllabus wanted to avoid copyright issues even though federal government and agency work cannot be copyrighted under United States copyright laws. Nonetheless, the content used in the designs have been cautiously paraphrased, and despite the project being titled Aerospace, these interfaces have been created with NASA and their audiences in mind.
PROBLEM SPACE
Online Space-education lacks the grandeur of reality
NASA's Solar System Exploration is filled with incredible pockets of information. One of their interactive features include an explorable map where you can scale in and out to see a planet's orbit and relationship to one another within space. The bottom of these exploration pages often come equipped with a section for 'More Destinations', linking you to other celestial bodies. Although there were plenty of learning aids, there was a missing sense of grandness and scale, where even the mouse-feel of the explorable map didn't reflect the expansiveness of the universe of the sizes of the celestial bodies.
Nasa's Interactive Solar System Exploration page
NASA's More Destination footer
visualizing grandeur
To become an explorer of Space, you must go the time and distance
Since this project required some interactions, I saw a chance to combine the two features NASA has. Like any exploration missions, to conduct any form of it, there's got to be a distance travelled - but don't quote me on the technicalities! To visualize physical exploration, I wanted to map the idea of distance travelled into the transition between the planets for when people browse through the solar system. This stands in place of replicating the effects of space travel as they would do in actual time.
I initially wanted to emphasize how time consuming space travel is by representing the transition time between planets to the degree in seconds of what it would take in reality, but that was costly on user experience. Converting Astronomical Units of distance to transition time, it would take 0.4 milliseconds going from the Sun to Mercury, and a whopping 37 seconds from the Sun to Pluto. And yes, Pluto - because 1) I found a really cool photo of it, and 2) I grew up with Pluto being a planet. I will not stand for Pluto erasure!
It was also here that I learned Adobe XD's canvas space is not infinite like the universe, so really, my animated planets barely made it in with the current spacing they have. I nearly did have to omit Pluto, for design constraints, not factuality, obviously...
This carousel design allows me to encapsulate part of the grandeur of space travel through the interaction of allowing users to be in control of their travel (and learning) by being able to visualize the celestial bodies. I'm also waiting on a call from NASA any day now, as I've truly employed groundbreaking technology for paving travel between the planets so quickly.
It was also here that I learned Adobe XD's canvas space is not infinite like the universe, so really, my animated planets barely made it in with the current spacing they have. I nearly did have to omit Pluto, for design constraints, not factuality, obviously...
This carousel design allows me to encapsulate part of the grandeur of space travel through the interaction of allowing users to be in control of their travel (and learning) by being able to visualize the celestial bodies. I'm also waiting on a call from NASA any day now, as I've truly employed groundbreaking technology for paving travel between the planets so quickly.
Canvas boundaries pictured to the sides
Seamless backgrounds
Designing Space-education as endless and expansive as the universe is
Another idea I had to contribute to the visual spectacle was to create backgrounds that were seamless. As the user scrolls down the page, the background would gradually change, thus making the background's imagery play an active part in contributing to the narrative and content.
My goal of using a full-bleed background was to fully immerse the user into the environment, giving them a better sense of what it would be like to actually explore there themselves.
My goal of using a full-bleed background was to fully immerse the user into the environment, giving them a better sense of what it would be like to actually explore there themselves.
Moon exploration page
Mars exploration page
International Space Station exploration page
Reflections
Like the moon with sunlight
Although I've showed many of the existing pages above for Aerospace, I thought it would be nice to include a picture of all the interfaces created. Looking back, it was a liberating exercise to design with form taking a bigger seat over function, rather than the usual meticulous balance between the two. It's a side of the art that I don't get to experience often. Executing my idea took a detailed process to ensure that I was able to find pictures that properly depicted the environment of these planets and topics at hand.
That being said, we don't have many environmental and atmospheric pictures of planets except for Mars and the Moon. Had I tried to work this idea of integrated backgrounds with the other individual planets, it would be met with difficulty due to limited photographic options. This concept is a fun day for visual design, but not so much for experience design and development. But hey, if this was an actual NASA project, who's to say there isn't a whole team for support... and maybe even digital artists that do mean renderings!
That being said, we don't have many environmental and atmospheric pictures of planets except for Mars and the Moon. Had I tried to work this idea of integrated backgrounds with the other individual planets, it would be met with difficulty due to limited photographic options. This concept is a fun day for visual design, but not so much for experience design and development. But hey, if this was an actual NASA project, who's to say there isn't a whole team for support... and maybe even digital artists that do mean renderings!
© jeffrey chan, 2024.