Planetary Archive
Website Development
Visualizing Science
In Graphic Design 2 (second year), we designed, built, and published a resource website while avoiding the hyper-commodified look of much of the contemporary web.
Mine shares information about the solar system as a planetarium with the user at the centre. Selecting a planet reveals detail; a control at lower left switches to a comparison of orbital speeds.
Landing page
Landing view centres the user in the solar system; planets and icons respond on hover.
Navigation menu
Top-right menu: direct access to any planet when the solar view is hard to navigate.
Planet selected
After a planet is selected, the user sees a short overview and tabs for specific topics. Each tab links to further resources on that topic.
Orbit speed comparison
Bottom-left switch compares planetary orbital periods from a bird’s-eye view.
Planets move far faster than in reality so orbits read on screen (~35 s for Earth at 60 FPS, roughly 900,000× real speed). Inner planets outpace outer ones, but ratios are compressed (Mercury vs Earth, Neptune vs Earth). Speed also varies slightly with refresh rate because motion follows animation frames.
Retrospective note: I likely misread orbital periods during build, so the mapping was inaccurate. I believed the simulation at presentation; later review showed otherwise.
Orbital speed comparison – planet selected
In orbital-speed comparison mode, selecting a planet shows its accepted orbital period as of the site’s publish date.
JavaScript snippet that renders site content (built in Cursor IDE).
Sketch ideation
I had planned to extend the sun life-cycle theme from the Game Map project in ‘Graphic Design 2’, but course instructor Chris Lange noted that this direction would leave the site with one data point: time until the sun expands, sheds its outer layers, cools, and becomes a black dwarf. The brief required a broader resource, so I pivoted to a full planetary archive.
Early sitemap of the planetary archive’s structure.
Early mockup of the overlay shown after selecting a planet.
Feedback from Professor Ali Qadeer on the informational overlay mockup.