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](images/apod-imagery.jpg)
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](images/apod-palette.jpg)
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](images/apod-typography.jpg)
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](images/apod-uielements.jpg)
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](images/apodonmacbook.jpg)
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](images/apodpageonmacbook.jpg)
Mobile:
![Key Visual](images/apodoniphone.jpg)
![Key Visual](images/apodfavouritescreen.jpg)
Thank you for scrolling till the end.