NASA

Overview

In this project, I handled both the design and development of a website using the NASA API. The website allows users to input a date, which then loads an image from space taken on that day. Users can then add the image to their favorites and create their own collection of the best shots.

Website Concept

The idea behind the website is simple and engaging.
The user selects a date from the past and clicks on the magnifying glass icon.
Thanks to the NASA API connected via JavaScript, the website retrieves a space image taken on that specific date and displays it directly on the page.

Photo and Description

After selecting a date, the website displays a space photograph taken on that day, along with a short description.
The description may include the name of a constellation, a celestial object, or a brief explanation of the image.

This feature allows users not only to see what space looked like on a specific day, but also to learn something new and interesting about the universe.

Favorites Feature

Users can add any image they like to their Favorites.
Favorite images appear at the bottom of the page in a dedicated Favorites section.

These images are also saved in the browser using local storage, so they remain available even after the user closes or refreshes the website.

This way, users can build their own personal space gallery and revisit their favorite moments from the universe anytime.

Design solutions

Color Palette Used

The following colors were used in the design of the website. They perfectly align with the themes of real estate and investment because they evoke a sense of trust, stability, and professionalism — qualities that are especially important in these industries

3C3C39

BDBBBC

DCDCDC

F5F2F2

#3C3C39 – Dark Graphite
A deep and rich color that resembles the shadows in outer space or the surface of a planet's dark side. It works well for text or headings.

#BDBBBC – Light Gray with Warm Undertones
A soft, neutral shade that creates balance. It is often used in information blocks or buttons.

#DCDCDC – Light Silvery Gray
This color resembles the surface of the Moon or atmospheric clouds at dawn. It looks great as a background fill or icon color on dark backgrounds.

#F5F2F2 – Almost White with a Slight Pinkish-Gray Tint
A very light and airy shade that is ideal for the main website background or individual sections. It adds a sense of space and lightness.

Typoghraphy

Headings – Roboto

Roboto is a modern and geometric sans-serif typeface. It offers clean lines and excellent readability. The slightly condensed letterforms create a sleek, structured look that fits perfectly with a tech or space-themed website. Roboto adds a sense of precision and professionalism to the headings.

Body Text – Helvetica Neue Medium

Helvetica Neue Medium is a classic, neutral sans-serif font. It provides smooth reading and a balanced appearance. The font works well for longer texts, descriptions, and informational sections. It pairs naturally with Roboto, bringing clarity and a touch of elegance to the overall design.

Responsitivenes

The website is responsive and adaptive, ensuring a seamless user experience across all devices. The design and functionality are optimized for:

Desktop – Full-featured layout with detailed visuals and intuitive navigation.
Tablet – Adaptive interface for easy browsing and interaction on medium-sized screens.
Mobile – Clean, simplified layout with touch-friendly elements for convenient use on smartphones.

Results

Overall, this website turned out to be an exciting and engaging project that brings a lot of joy while exploring space imagery and reveals the vastness of our universe.
The website is available at: https://vaku0004.github.io/nasa/

As an astronomy enthusiast, this project was not only a way to dive deeper into my hobby, but also a significant step forward in working with JavaScript.
Throughout the development process, I gained valuable experience with APIs, saving data in the browser, displaying stored images, and most importantly — designing a user-friendly and visually appealing website.

The web design was created to provide a visually appealing and engaging experience that captures users' attention from the first glance. Thanks to its clean and elegant layout, the website aims to inspire trust in the content and services offered.

To enhance user interaction, subtle animation effects were added, making the experience more dynamic and interactive without overwhelming users with excessive or complex information.

The website is available at the following link: https://newhorizons.framer.website.

This is a homepage-only design developed to present the visual concept and receive client approval on the brief.
The design was completed in 1 day.

To enhance user interaction, subtle animation effects were added, making the experience more dynamic and interactive without overwhelming users with excessive or complex information.

The website is available at the following link: https://newhorizons.framer.website .

This is a homepage-only design developed to present the visual concept and receive client approval on the brief.
The design was completed in 1 day.