Would you like to travel to Mars? This project is a UX and UI design for a marketing, one pager website that offers Mars travel opportunities.
I find space exploration fascinating, and wanted to design a site that will give the user a taste of the awesomeness of that experience. To that end, I thought of a new way to navigate this one pager. Instead of scrolling down, we move through space and around the planet to see the different pages. Watch the video demo to view the in-site animation and interactions.
I wanted to create a vibe of 3D motion in space, and used the motion of the planet as well as the motion of the navigation spacecraft to convey that feeling. The design and interactions were created using Adobe XD, the planet and spacecraft were modeled in blender and for the demo I used Adobe After Effects.
In the desktop site the user can navigate by pressing the spacecraft or selecting a section in the navigation bar. In the mobile version of the site it is very intuitive to swipe to the side in order to move “around” the planet. The hamburger menu also offers navigation, and the spacecraft becomes a marker for the progress in the site.
I chose to exclude the “SEND ME TO MARS” button from the rest of the navigation, and made it more dominant and attractive, since it is the call to action.
To design the site to be responsive I used a responsive grid and arranged the blocks to be horizontal in the desktop site and vertical in the mobile site. Of course there are more adjustments between the two versions, like hover that becomes a press, “read more” and inner scroll.