New feature: Hand-drawn timelines using RoughJS

Ever since we first came across Preet Shihn's amazing hand-drawn shapes library RoughJS a few years ago, we have wanted to use it in one of our products. The sketchy-appearance lends a quirkiness and care-free feel to a user interface that we love.

At the start of this month, we found ourselves with a bit of free time. We had finished most of the key features we wanted the initial version of ChronoFlo Timeline Maker to include, and were wondering what we should turn our attention to next.

During a brain storming session, Preet's hand-drawn shape library was mentioned, and after a quick look at some of the examples on the RoughJS website, we decided our next big feature would be to use RoughJS to display timelines with a hand-drawn style.

The aim was to create two hand-drawn themes, one light and the other dark, that users could select to give their timelines a 'sketched' appearance. We also wanted to give the users the ability to control the amount of roughness via a slider, similar to the slider you can find below the timeline above.

We were not sure how long it would take us to integrate RoughJS with our event panel and timeline rendering algorithms. Unlike other timeline maker products, ChronoFlo Timeline Maker offers multiple event panel designs and numerous timeline layouts, including both horizontal and vertical formats, and even a 3d parallax-style design.

A timeline combining ChronoFlo's unique 3d view and our new Hand Drawn Dark theme.

Getting all these designs and layouts to render with a hand-drawn appearance was not going to be easy. Thankfully, RoughJS is a neat bit of software with an easy-to-understand api, and we had a proof of concept up in not too much time.

Then there was all the fiddly work of making sure that RoughJS worked with all the different timeline scenarios our software can output, bug fixing, testing, tweaking etc. About a month from initial idea to feature release. Not too bad, when you consider it was not the only thing we were working on.

And now ChronoFlo Timeline Maker boasts a feature that - as far as we are aware - no other timeline maker product on the market offers: hand drawn timelines. Big thanks to Preet and RoughJS for making this possible.

Let's now take a look at how you can take advantage of hand-drawn timelines yourself using ChronoFlo Timeline Maker. It's really easy to do.

1 Go to www.chronoflotimeline.com and log into your account. If not already logged in, click on the 'Go to my account' button.

2 Now on your account page, select a timeline to edit. If you haven't created any timelines yet, this is the time to make your first timeline. Make sure you add some content to your timeline.

3 The next step is to choose one of our hand drawn themes. You do this by clicking the options button to the right of the screen, bringing up our admin panel. Choose the 'Change the appearance of your timeline' option. Then, select 'Hand Drawn Light' or 'Hand Drawn Dark' from the Theme drop down menu. Make sure to save.

4 You now have a hand-drawn timeline to play with and wow your friends or customers with.

Expert timeline makers might want to try a few other things. The hand-drawn style looks better with some event panel designs than others. So you might want to explore the different panel designs via the 'Panel' option in the 'Timeline Appearance' section.

You can also make your own hand-drawn themes. The theme edit panel now includes a slider for roughness. Drag this to the left or right to make a theme have a messier or neater look.

Create your own hand-drawn themes using our new 'roughness' slider.

We really hope you like ChronoFlo Timeline Maker's new hand-drawn timeline feature, and can't wait to see what you create using it. Please share with us your hand-drawn timeline creations via social media or by emailing us at hello@chronoflotimeline.com.

As usual, you can keep up to date with the latest ChronoFlo Timeline Maker news and developments by following us on Twitter and Facebook. If you have any questions about our software, please email us at hello@chronoflotimeline.com.