Still at the initial stages of this project, there’s a lot of different directions to go with the design and look of this immersive website for the Apollo Space Program. At the start of any project I ensure to brainstorm different concepts and sketches down on paper first before developing them any further. This allows me to come up with several different directions so I can choose the best one. I can also determine how a layout might look on the page without having to make it in Webflow or Figma first.
I started off with the brand logo itself. I knew that this heading for the Apollo Space Program would be an essential element to get right early in the project, as it will be displayed prominently on the homepage. I experimented with different types of font styles, uppercase/lowercase, and tried to incorporate other elements such as the ’11’ or the moon replacing the O. I wanted this logo to be striking and bold, with a serious looking typeface.
This was an initial design for the homepage of my site. I wanted to incorporate space debris as animated elements that the user could interact with their mouse on a hover state or when they scroll down the page. These parallax animations will be important to make the content of the site more engaging and interactive for the user.
I sketched some intro screens that would play as the user enters the site, briefing what the site is about and establishing a mood. I’m not sure if I will keep this introduction in the final design. It could be annoying for the user if they want to get straight to the content.
I then refined the homepage of my design. The previous layout with the space debris would be too complex to implement into Webflow, and so I opted for a more effective layout with a parallax animation of the surface of the moon. As the user scrolls down the page, the foreground moon rocks will be pushed upward first, followed by the moon surface, the brand logo and the earth dipping behind it. I also introduced a navigation bar at the top that would be helpful in guiding the user to each section on the site.
Storyboard
Creating a storyboard is an important element of designing a digital product, such as an immersive site. It allows me to see all the screens laid out in sequence to emulate the user’s experience as they navigate through the site. To me it’s important to introduce each section with a title screen of its own, distinguishing the information and acting as a break or pause between the content. Breaking up the content in these chapters, will make the information more easy to digest for the user. Especially since this site will be a one page scroll.
The storyboard is a rough draft and doesn’t contain all the screens – so it’s not representative of the entire site experience. However the building blocks are there for displaying the basic content and I can work backwards from there. But I’m interested in exploring things like animation and more interactivity further in this project.