Solar Eclipses and Space: Luna-tic Website Designs

From stellar 404s to astronaut About pages, the best in space-themed website design.

Man Looking At Moon on Dock in Whistler by JamesWheeler

Have you heard your friends and family talking about the upcoming Total Solar Eclipse? Are your co-workers endlessly Googling how to get to the nearest Eclipse party and how to get those super funky protective glasses? No? Well, you’re probably not living in North America then.

On the 21st of August something picturesque will be revealed for anyone located within the path of totality (where the moon’s shadow is visible on Earth during the eclipse). They will witness the moon completely covering the sun while a mesmerising aura of plasma will shine around it for two minutes and 36 seconds. There hasn’t been a Total Solar Eclipse since 1979 and you can tell that people are really excited about it via the latest data from Google Trends.

For the rest of us, who can’t attend Eclipse themed parties and follow the spectacular event, we’ll just have to make our own fun. That’s why we have created a list of space themed websites that will make up for the lack of viewable plasmatic auras on the sky. Who needs to witness a super cool Eclipse anyway?

Home page

Total Eclipse Weekend Columbia, SC

Even though the website design isn’t spectacular, the Total Solar Eclipse of 2017 in Columbia, South Carolina website does a good job in capturing your attention via their cute eclipse illustration header. The animation shows the moving moon that turns into a solar eclipse, which is also the website logo. Very clever.

Besides, if you were looking for those funky protective glasses, this is where you can buy them. Get on it!


4por4 Creative Agency

The about page for the spanish 4por4 creative agency is really funny. The headline reads ‘WAITING FOR NASA TO CONTACT US!’ and is followed by images of posing astronauts that represents each individual staff member. Ridiculous quotes like ‘MY BRAIN IS NOT MELTING AT ALL…’ along with the employee’s name and title is displayed when hovering over their images. It looks like this agency had a a lot of fun building their website. Maybe it’s a way of showing their visionary side. If I would hire a creative agency based on their ability to surprise, these guys would definitely get my vote!


Word Arcade

Sure, it’s just a pop-up contact form. But it’s a damn cute one! The Word Arcade website is a lightweight site filled with adorable cosmos inspired illustrations. The aim of the site is to give game developers an opportunity to make money for their creations via resources and collaborations. If you want to know more (or see another robot), simply click on the ‘Contact us’ button and watch as the pop-up form fades in, in the hands of a bot.

Coming soon

Space – Responsive Coming Soon HTML Template

Do you like the examples above but can’t be bothered building a whole new website layout just yet? Don’t worry, for $5 you can get a templated spaced themed coming soon page that will buy you some web designing time. The template includes a countdown timer, ajax subscription form and social icons that are placed over a moving astronomical animation. The video starts with a closeup on earth and then zooms out to display a galaxy of stars. Don’t mind the spelling mistake in the title stating that ‘WE ARE COME BACK SOON’, this is completely customisable.


Space Advisor

The words ‘Are you lost?’ followed by a ‘Return to earth orbit’ button makes this website a winner of all the spaced themed 404 pages, except for that the button doesn’t work. But even after having to type in the home page URL ourselves to navigate back, you realise that it was worth it. Space advisor is an interactive website which is based on the ‘Beyond Earth: The beginning of Newspace’ documentary. It takes you through a training center where you’ll be able to take four space passport tests so that you can fly around earth via the help of sounds, moving 3D images and your mobile phone. It’s a website, it’s a game, it’s an interactive experience, it’s everything a space nerd could ever ask for.

Smartest idea

Send a Sceptic to Space

This fantastic website by Friends of the Earth (an environmental group with two million members) was built as a response to concerns around world-wide political views on environmental issues. The project started with a voting for the worst mother nature offender and has since then become an interactive website where users can send the chosen offender to space. The point of sending them there is to give them a first-hand experience of the overview effect and by that, changing their view on climate change. It’s brilliant.

Even if you don’t care about climate change or the overview effect, the smooth and detailed website animation is definitely worth a visit.


In Space We Trust

The website entry is an interactive loading page which displays an astronaut floating through space based on the mouse movements. After the completed page load, we’re invited to press the arrow keys on our keyboard to scroll through animated space exploration facts in the form of text and illustrations. All done with a little help from JavaScript and the CSS3 transform property.

I’m out of space…

But if you you want to check out more space inspired websites and templates, we’ve got heaps of them just waiting to be discovered on Themeforest. Do us all a favor and make yourself an astronaut. There are several parts of the space-themed world that hasn’t been explored yet!

Looking for more? Check out this collection of space-inspired graphics and backgrounds

Nina Mujdzic

About the Author Nina Mujdzic

Nina Mujdzic is a front-end developer that writes about the latest trends on web design and development with a special interest in WordPress. You can follow her on Instagram @neendreams_.