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:
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:
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.
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.
To speed things up and add more interactivity, I used a few third party resources. Here is a nice list (lists are always nice):
- Bootstrap framework
Customized version with only some vital stuff including Typography, Code, Grid System, Buttons, Responsive utilities, Progress bars - Animate.css
Really nice collection of CSS animations - jQuery
We all love to hate but somehow deep in our hearts we can’t let go! (♥) - jQuery Appear
Helped with adding animation when the elements ‘appear ’ on the screen - jQuery CountTo
Used for the live counting feature - 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!) - 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. Feel free to play around with the code and come up with something awesome! I hope you like it! :-)
— About
If you are interested in what we are doing, you can check out our HQ at pixelcave.com. You can also find us on Twitter or subscribe to our news where we release handcrafted exclusive freebies and keep you up to date about our projects and articles.
