Building a sci-fi dashboard in less than 4 hrs

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:

  1. Find an awesome name for it and act like everything depends on it. Really important stuff.
  2. Create a simple one-page dashboard.
  3. Content does not need to make sense, it just needs to look and feel as sci-fi as possible.
  4. 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:

  1. http://sciencefictioninterfaces.tumblr.com/
  2. https://www.noteloop.com/kit/fui/movie/

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

Design inspired from the movie
Image still from the movie itself

Design

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

  1. Full page sci-fi background image
  2. Animated circles in the center of the page with a futuristic background/style
  3. Raleway font for headings with uppercase transformation and light weight
  4. Heavy use of opacity
  5. 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:

Used as a full background image with a CSS based color overlay on top of it (the overlay color section turned out really important for the 2 extra color theme variations)
It might be the Louvre Pyramid but after a few changes, a part of it served perfectly as the background image of the main circle (it reminds me of a futuristic satellite section)

After I set up the boilerplate HTML markup, I focused on creating the main animated circles. It was a task that took me about 1–1.5 hours to finish and included a lot of experimentation. Somewhere in between, I also worked on the design of the surrounding blocks.

First steps..
Getting there..
Almost finished..

The circles naturally ended up being fully animated and styled with CSS. I used various border styles and colors for each one but I found out later that some browsers can’t handle them when used along with border-radius and animations (I’m looking at you IE/Edge and Firefox). Webkit based browsers were handling it fine though, so I decided to move on considering that I didn’t have time for extensive bug hunting. Background images would be an old but safe way to go but SVG sounds more adventurous!

Later on, I finalized blocks design and started putting dummy content all around the dashboard. At the same time, I experimented a lot with styles and colors until I was fully (well, almost, the clock was ticking) satisfied.

The final dashboard design
Another color theme variation of the dashboard which I would describe as ‘vintage/futuristic’

To speed things up and add more interactivity, I used a few third party resources. Here is a nice list (lists are always nice):

  1. Bootstrap framework
    Customized version with only some vital stuff including Typography, Code, Grid System, Buttons, Responsive utilities, Progress bars
  2. Animate.css
    Really nice collection of CSS animations
  3. jQuery
    We all love to hate but somehow deep in our hearts we can’t let go! (♥)
  4. jQuery Appear
    Helped with adding animation when the elements ‘appear ’ on the screen
  5. jQuery CountTo
    Used for the live counting feature
  6. Easy Pie Chart
    It was used for the environment pie charts and for the planets section (don’t ask me why, it just seemed like the right thing to do!)
  7. Finally, let’s say I might have cheated a bit (timewise) since I also used some small code snippets from my latest dashboard project (OneUI)

These are the generic steps I’ve taken and the resources I’ve used to get there and oh my, it was a wild ride! Well, not really, but I’m happy I took some time off for a tiny side project I’ve always wanted to create!

You can have a good look at Ares dashboard live preview (remember to listen to the sci-fi music playlist) and also download it for free (don’t get discouraged by the Gumroad popup, just enter $0 for price and hit the ‘I want this’ button). Feel free to play around with the code and come up with something awesome! I hope you like it! :-)

If you would like to just say hi or let me know what do you think, you can find me on Twitter: @pixelcave