Astronomy Picture of the Day App

For a Web Development assignment, I created a web app that would fetch the Astronomy Picture of the Day from NASA's API along with a description and a title.

Process:

The goal was to design an immersive experience that makes users feel like astronauts on a space mission, going beyond just simply displaying NASA's content.

Imagery:

Explanation Card

While ideating and referencing, I discovered a photo shoot portraying a futuristic and stylish astronaut. The cinematic color palette, combined with soft smoke and surreal lighting, created a dream-like ambience.

This was the mood I wanted for my project and I began to draw inspiration from it.

Colour Palette:

Explanation Card

Keeping in mind the darker visuals, I picked dull versions of the main colours in the astronaut images for the UI:

The mustard orange and brown would highlight primary UI elements and buttons, whereas the blues would highlight secondary actions and the super-dark greyish blue would ensure these colours stand out.

Typography:

Explanation Card

With a dark ambience and darker visuals, the typography had to be kept simple and legible.

Montserrat solved both legibility as well as appearing as a clean modern font that I felt represented an informative NASA/ space-exploration personality.

UI Elements:

Explanation Card

The UI elements were kept simple & clean to mimic a futuristic and modern look.

The Design & Highlights of the stars and date are used to bring attention to the launch controls. The Buttons & Toggles showcase hover and toggle states which are further enhanced by micro animations.

Final:

APOD Mockup

The images can be saved to a favourites section. Later, even if the user closes the browser, the favourited images will still be available when they return.

Game Mockup

Mobile:

Key Visual
Key Visual

↓↓↓
Check out the app here!
↑↑↑

Thank you for scrolling till the end.