Data Visualization: Design

Simple Style Guide

Home Page: Background Colour for Home Page White, mixed with a bit of black. the font i used is 'poppins' sans-serif. and the colour of the texts is navy blue. When you hover on the links to different sections, the colour changes to light purple. With the multi-text on the middle of the page in two colours: Navy Blue and Darkish Pink. On the Right of the text there is an Image of the NASA Logo, animated to rotate and grow slighly, adding a bit of livelyness into the Website.

Well the Background colours for the Blogs, Visuals and Design Section are all the same however different from the home page. The main Background is white and in the middle is a bit of gray going into white.

Blogs Page: Well in the Blogs page, you can read from top to bottom. Each Blog has a date enteted, author name and a heading. the main colours are purple and black, but mainly black. The entire blog is situated into 2 columns. formatted by Heading then the paragraph numner and the text. then last is the refferences. At the end of the page i have a footer to show the ending of the page. the footer is dark grey since it blends in with the black and the text is in white underlined in dark pink. with Icons. when you hover over the links they pop out and the icons are highlighted. this footer is applied in all pages accept the home page.

Visuals Page: The visuals section's main thing is the two graphs. the line graph and bar graph. its the only thing different from the rest of the sections.

Colors: my Bar graph has multiple transparent colours, each date is differentiated with a different colour. the colours are red, light blue, light orange, light purple, and a bit of a darker orange.
The Line chart however only has 2 colours, light blue and light red.

Design: the design section is equipped with images of wireframes and a basic text style guide.

unmentioned Elements: I have a button that slides in the more u scroll down so it can take you back to the top since it can be tiring to scroll.

Artwork Tab Style Guide:

The NEO (Near-Earth Object) visualization artwork is an interactive and educational representation of asteroids and other objects that come close to Earth's orbit. Its primary purpose is to provide viewers with a captivating way to explore and learn about these asteroids, particularly their orbits and whether they pose a potential hazard to Earth.

This style guide outlines the design decisions made for the Near-Earth Object (NEO) Visualization application. It covers color schemes, layout considerations, font choices, and other key design elements. Each design choice has been made with the goal of enhancing user experience and facilitating clear communication of information.

Earth Color (Background): #001a33

This dark blue tone provides a visually pleasing backdrop for the visualization. It allows NEOs and information to stand out clearly.

Asteroid Colors:

Green: Non-hazardous asteroids

Red: Potentially hazardous asteroids

These colors are intuitive and provide a clear distinction between hazardous and non-hazardous NEOs.

Fonts

Font choices were made to ensure readability, consistency, and a modern aesthetic.

Font Family:

Sans-serif fonts like Arial or Helvetica were selected for their clean and modern appearance. They enhance readability and maintain a professional look.