I’ve been building dashboards full time for almost 4 years now but I’ve always wanted to build a futuristic one, just for the fun of it. As with every good side project (no matter how tiny or large it is), it has been postponed for ever. Eventually, I stood up and decided to just make it happen.

Of course, I immediately started feeling guilty because my decision took place during work hours but I sorted that out by setting a strict deadline to myself. I told him: “You have up to 4 hours to make it happen and then it’s over”. His response reminded me of the following meme, so we were good to go!

Goals

First, I set some generic goals:

Find an awesome name for it and act like everything depends on it. Really important stuff. Create a simple one-page dashboard. Content does not need to make sense, it just needs to look and feel as sci-fi as possible. I got only 4 hours, so I have to do the best I can in this time frame.

Music

Before even getting started (habit), I searched and found an awesome playlist on Spotify featuring sci-fi ambience music. It’s always inspiring working and listening to relaxing music in the background. The sci-fi theme in this occasion was a big plus and really helped a lot.

Name

Finding a good name for a project is often a really time consuming task for me. Thankfully, this time, it was easy. When thinking about something futuristic, my mind immediately travels into space, planets and spaceships. Having read the book “The Martian” and also watched the movie, I didn’t want to think of anything else but “Ares”. So “Ares” dashboard it is.

Inspiration

With music always playing in the background, I spent around 10-15 minutes searching for inspiration online. I found many great dashboard concepts, most of them coming from science fiction movies.

After a few Google searches, the following sites turned out to be great for inspiration:

Also, some of the images which got my attention were from the movie “The Martian” (definitely not promoting it!):

Design

I decided to start right away with the design itself because I didn’t have much time anyway. Key points:

Full page sci-fi background image Animated circles in the center of the page with a futuristic background/style Raleway font for headings with uppercase transformation and light weight Heavy use of opacity Animated elements on page load

The following wireframe will definitely help you get a better understanding of the overall idea:

Super high precision hand drawn wireframe

Starting off with the page background itself as well as with the main circle background, I decided to use some photos we offer for free over at MyPhotoPack to make the dashboard a bit more unique. The following photos were eventually used: