how to create the interactive infographic?

[sylwiaa16055623]

Hi,

I would like to create the interactive infographic, similar to this one:

The UK Energy Consumption Guide from Evoenergy

But I am not sure where to start. I use Illustrator and Photoshop for creating static infographic but for interactive I don't really know.

Could you please advice me what software is the best to use and perhaps you know where I can find any tutorials?

Thanks a lot for any information.

Kind regards,

Sylwia

[Monika Gause · Accepted solution]

That is done with a lot of JavaScript.

Basically you will have to search for web development techniques to make this.

Applications like Adobe Muse should allow you to create the majority of this content. It might not be highly optimized code, but to get your feet wet it should do. If you want to seriously get into creating these kind of interactive web sites, then you will have to learn HTML5, CSS and JavaScript.

Graphics for this can still be creating using Illustrator and Photoshop of course.

[Eternal Warrior]

Just to add to Monika's statement - This type of Interactive infographic also uses some parallax scrolling techniques (How To Create a Parallax Scrolling Effect) but on the whole all of the javascript etc is just used to make it look animated.

Follow Monika's advice and make all the graphics as normal in Illustrator and Photoshop (Make sure you use transparent backgrounds unless you really need it) and either use Muse to get the majority of the content or get a programmer/coder to write it how you want.

Whilst you could learn the basics of HTML and CSS it would be more efficient (although perhaps not cost effective) to use either of the above suggestions.

If you really want to learn code then websites like www.codeacademy.com exist for such reasons.

[EDIT] If you want to have elements of graphics that are animated separately from the whole image i.e. like the legs of a sheep to move independently of the body and head make sure you save those elements on separate layers regardless of which programme you prefer to use.

[sylwiaa16055623]

Thanks a lot guys!  This is very helpful.

Unfortunately I don't have any experience in coding: JavaScript or HTM5, so to I guess I should start to learn coding...to be able to create an interactive info graphic.

Eternal Warrior - Thanks a lot for the link I will definitely check this site.

One more question:

Is the a Dreamweaver proper software for creating an interactive info graphic?

[Eternal Warrior]

I would use Muse instead because you don't need to know the Code... Dreamweaver is relatively useful but more focused around Code (Think of it more of as an Adobe version of Notepad or Notepad++, perhaps with some nice integrations with other adobe programmes to make it easier).

Muse is more focused on turning what you visually want - into relevant code. Whilst it's obviously designed to be less flexible than what you might achieve by coding yourself - its also for the most part less easy to mess up/break/ or cause weird **** that you aren't expecting.

Believe me... whilst I'm no seasoned coder... figuring out why stuff don't work is the bane of any true professionals life... and I often feel very sorry for my colleague who custom built and designed our companies CRM.

[macpawel]

You can easy do it with Adobe Animate, Just import your Illustrator Graphics and add some interactivity. You can use Code Snippets - and prepare similar page (Canvas) with HTML5

You can also prepare similar grapchic in InDesign and publish Online (CC version)

Pawel

[Eternal Warrior]

Or Animate - although I don't really have much experience using this... Might have to experiment with this programme...

My only point of contention however - is that code snippets can be a little confusing if your knowledge and experience of HTML5/CSS is limited.

But I suppose it depends how much the programme is able to explain/assist you in using snippets.

[sylwiaa16055623]

Thanks a lot Pawel!

That is very helpful. I do prefer to do as lees coding as it is possible

I have never used the Adobe Animate CC but I should give a try and let's hope I can create an interactive infographics with any complex issues

Thanks guys!