My Apollo Program Prototype
Link to prototype
From my sketches and initial ideas, I knew I wanted to focus on the Apollo flights. I chose this because it is what interested me the most and I felt like I could tell a good story this way. The flights also matched the style I wanted to go down which included blueprints of the rockets. This blog post will show my prototypes so far and my thoughts behind the design.
Typography
Typography was a big part of this project as there would be a lot of written content, therefore, it was important for this to be considered.
First, I chose the heading. I did this by experimenting with different typefaces and seeing which worked the best. These are some of my options:
From these, my favourite was the “Stick no bills” typeface which you can see below. There are many reasons I chose this over the others:
- I think it stands out and grabs the user’s attention, which is what I wanted from a heading.
- The lines through some of the letters make it unique and interesting to look at.
- The lines also give the impression that it has been stenciled which ties in with the blueprint style I am going for.
- It is legible
- It is a variable typeface which means I can use it for smaller headings etc.
I did the same when picking a body copy by trying out multiple typefaces. I made sure to use actual content I would be using instead of lorem ipsum as this would give me a better representation of what it would look like.
Of these, the one I liked the most was “Karla”. Here are some of the reasons why:
- It is a variable font. This means I can use bold or italics to make important text stand out.
- It is easy to read which is important for accessibility, especially since there is a lot of written content.
- It is a simple sans serif font. I wanted it to be simple, especially since my main heading is quite bold.
Colour
This is the colour pallet I chose for this project. I took inspiration from other colour pallets and created this. The black and white are “off” black and white as this is easier on the eyes and makes it easier for users to view the content. These are both being used for text, depending on the background colour. The black has been used as a background colour on the main page as I think it makes the blueprint stand out.
The blue is of course being used for the blueprint aspects which has been taken from the colour of actual blueprints that were used in the Apollo space program. Lastly, the yellow has been used for headings, post-it-notes, and other areas I want to stand out, like, buttons.
The prototype
I started with a basic wireframe to test how I would lay everything out:
I decided to change the background colour to make the content stand out, added typography, colour pallet, illustrations and the written content:
This is the page that users are met with when they enter the site. It has a short description of the Apollo flights to introduce the users to what the website is about. You then scroll down to a folder with a blueprint of a rocket. This is an illustration I did myself of the Saturn V rocket. Beside this, there is a summary of the most important parts of the flight. You then have the “read more” button which brings you to this page if users want to find out more about a particular flight.
The main background for this page is the same folder effect from behind the blueprint on the previous page. I like this as it makes users feel like they are opening or looking through the folder to find more information.
There are then 2 post-it-notes that give more information about the mission and some facts about it. I wanted them to look like sticky notes as it ties in with the tone of voice with the folder and blueprints. Users can then scroll down, and the background colour changes to black to add some contrast. There is an image of the crew and drop-down menus to find out more about each of them. I made sure the names were in the same order as the crew appeared in the picture so they don’t get confused.
Making it immersive
It was important to me to add some micro and macro interactions to this prototype to keep users engaged and help tell the story of the Apollo flights.
With the folder on the homepage, you can click on each number and it looks like tabs on a folder. This makes users feel like they are flicking through a real folder of blueprints like the people working for the Apollo program would have done. You can see an example below:
I also added a switch so users can click between the outline of the rocket to a filled-in one with colour. This shows users how a rocket can go from a simple outline on a blueprint to when it is fully built.
I added hover states to both my buttons. This makes it obvious to users that they can click on them. I included a dissolve animation to them, so they fade in and out smoothly when users hover over them
On the read more screen, when the users hover over a post-it note, tape appears at the top. I feel like small interactions like these keep users engaged and add to the story.
Conclusion
I am really enjoying this project so far and have loved prototyping this on Figma. I really enjoy making all the micro and macro interactions to keep users engaged. I think I have been able to tell the story of the Apollo flights and take users on a journey while learning about them.