Highlighted

Looking to Hire Tutor to Teach Me How to Make Interactive Infographic

Community Beginner ,
Jun 20, 2017

Copy link to clipboard

Copied

Hello,

I've spent about 60 hours trying to figure out how to make an interactive infographic. I'll attach the sources I've used at the end of this post. I'm looking to either hire someone to show me how to do this, or get a step by step guide on how to do it. The trouble is that I don't know Javascript or coding. Is it possible to use any adobe products to make an interactive infographic without knowing how to code?

So far, I've tried to make one in Adobe Animate, but I hit a major wall when it came time to add the Javascript for interactivity. I've also tried to do it in Illustrator, saving the file as an SVG and adding the Javascript to the code. I've heard people mention making them in Muse. I'm very comfortable working in Muse, but I don't know how exactly how that would work.

For functionality, I'm looking to make an interactive infographic that can sit in the content section of a blog site and be interacted with. Something like these. I'm looking to have click states and hover states. Mainly just have things appear when objects are clicked or hovered over. Advanced animations aren't necessary, although they'd be cool if I could add them.

Here are a few questions I was hoping I could have answered.

1. Are there any products that could allow me to make an interactive infographic without knowing how to code? The interactive infographic would need to sit in the content of a blog site, similiar to these graphics.

2. Is there anyone who can teach me how to do this? I'm doing this for work so I'd pay for a tutor. It's important to mention that I don't know how to write code. Whatever you teach me would need to be bare bones in regards to coding. I'm not opposed to learning it, but I would need someone to walk me through how to do it. If you look at the examples mentioned, I only need to learn how to do that. I would like to know how to get objects to show and hide based on clicks and hovers.

3. If I were to make this in Adobe Muse, would I be able to take the infographic that I built, give it to my team's developer, and have him be able to upload the infographic to the content section of our website? It doesn't seem like Muse is capable of creating widgets or other elements that can be moved over and added to an existing web page.

Also, no, the developer on my team can't help me learn how to add the Javascript. The developers are stretched thin, so they wouldn't be able to put any time into this other than uploading a file to our website.

Thanks for any help. Sorry this message is long but I'm really determined to figure this out for my team at work.

Here are the tutorials I've gone through so far. (Maybe they'll help other people who are searching for the same solution.)

Adobe Animate CC: Interactive Animation

Learning Adobe Animate CC

Adobe Animate CC for Web Designers

Creating Interactive Infographics with Illustrator, SVG, & JS | Digital Splash Media

Lessons Learned Creating Interactive Infographics with Adobe Illustrator & Javascript | Digital Spla...

How designers can create interactive prototypes with Illustrator - Tom Germeau

https://webdesign.tutsplus.com/tutorials/adobe-illustrators-svg-interactivity-panel-explained--cms-2...

Work with SVG format in Illustrator

Design Interactive Infographics in Adobe Edge Animate — SitePoint

Views

600

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Looking to Hire Tutor to Teach Me How to Make Interactive Infographic

Community Beginner ,
Jun 20, 2017

Copy link to clipboard

Copied

Hello,

I've spent about 60 hours trying to figure out how to make an interactive infographic. I'll attach the sources I've used at the end of this post. I'm looking to either hire someone to show me how to do this, or get a step by step guide on how to do it. The trouble is that I don't know Javascript or coding. Is it possible to use any adobe products to make an interactive infographic without knowing how to code?

So far, I've tried to make one in Adobe Animate, but I hit a major wall when it came time to add the Javascript for interactivity. I've also tried to do it in Illustrator, saving the file as an SVG and adding the Javascript to the code. I've heard people mention making them in Muse. I'm very comfortable working in Muse, but I don't know how exactly how that would work.

For functionality, I'm looking to make an interactive infographic that can sit in the content section of a blog site and be interacted with. Something like these. I'm looking to have click states and hover states. Mainly just have things appear when objects are clicked or hovered over. Advanced animations aren't necessary, although they'd be cool if I could add them.

Here are a few questions I was hoping I could have answered.

1. Are there any products that could allow me to make an interactive infographic without knowing how to code? The interactive infographic would need to sit in the content of a blog site, similiar to these graphics.

2. Is there anyone who can teach me how to do this? I'm doing this for work so I'd pay for a tutor. It's important to mention that I don't know how to write code. Whatever you teach me would need to be bare bones in regards to coding. I'm not opposed to learning it, but I would need someone to walk me through how to do it. If you look at the examples mentioned, I only need to learn how to do that. I would like to know how to get objects to show and hide based on clicks and hovers.

3. If I were to make this in Adobe Muse, would I be able to take the infographic that I built, give it to my team's developer, and have him be able to upload the infographic to the content section of our website? It doesn't seem like Muse is capable of creating widgets or other elements that can be moved over and added to an existing web page.

Also, no, the developer on my team can't help me learn how to add the Javascript. The developers are stretched thin, so they wouldn't be able to put any time into this other than uploading a file to our website.

Thanks for any help. Sorry this message is long but I'm really determined to figure this out for my team at work.

Here are the tutorials I've gone through so far. (Maybe they'll help other people who are searching for the same solution.)

Adobe Animate CC: Interactive Animation

Learning Adobe Animate CC

Adobe Animate CC for Web Designers

Creating Interactive Infographics with Illustrator, SVG, & JS | Digital Splash Media

Lessons Learned Creating Interactive Infographics with Adobe Illustrator & Javascript | Digital Spla...

How designers can create interactive prototypes with Illustrator - Tom Germeau

https://webdesign.tutsplus.com/tutorials/adobe-illustrators-svg-interactivity-panel-explained--cms-2...

Work with SVG format in Illustrator

Design Interactive Infographics in Adobe Edge Animate — SitePoint

Views

601

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 20, 2017 0
Adobe Employee ,
Jun 20, 2017

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 20, 2017 0
Adobe Community Professional ,
Jun 20, 2017

Copy link to clipboard

Copied

Except Edge Animate you could get great help for websites. If you want start with Muse, this could work with no coding.

You could start with this video from Dani Beaumont: Muse Jam: Fixed Breakpoint Responsive Design - YouTube

You can get through all video tutorials right here: What's New | Adobe Muse CC

You recommend to watch this thread: Muse not redirecting to tablet version​  from here to the bottom (also the video from Dani is posted here):

Bildschirmfoto 2017-06-20 um 16.44.26.png

It is best to know what you want to achieve, who watches the website on which devices and then you could begin.

This animated items from your example shouldn`t be too difficult but it might be at a certain point that you have to go through

another application as well.

This forum is great, you get help quite quickly.

Hope this helps

Best Regards,

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 20, 2017 2
Community Beginner ,
Jun 20, 2017

Copy link to clipboard

Copied

Thanks, Uwe.

I've built a webpage on Muse before and I've been through several hours of tutorial training. I'm very familiar with it. My question is more along the lines of moving the interactive graphic I create in Muse to another site. Would I be able to take the interactive graphic I built in Muse and move it a wordpress blog article, or a page built in FatWire? (This is similiar to my comment on Ussnorway's response.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 20, 2017 0
Adobe Community Professional ,
Jun 20, 2017

Copy link to clipboard

Copied

I hope my recent answer covers this too. I have no idea if it is necessary to animate in Muse (some people say it´s good for UX) and copy this to WordPress.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 20, 2017 2
Community Beginner ,
Jun 20, 2017

Copy link to clipboard

Copied

Thanks for the reply.

So is it possible to add interactivity in Photoshop?

I know how to create graphics, I'm trying to add some interactivity to them.

Also, Edge Animate is no longer available. It's now Adobe Animate. I went through a few hours of tutorials, but the part where you add interactivity is my sticking point because I have trouble with the Javascript.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 20, 2017 0
Adobe Community Professional ,
Jun 20, 2017

Copy link to clipboard

Copied

You could do some layers in PS and create different states with layer comps - this could be then added (without layer comps) as a PS-Button into muse. I don`t know if WP allows to do that as well. PS is maybe not the best to create animations, I guess.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 20, 2017 2
Community Beginner ,
Jun 20, 2017

Copy link to clipboard

Copied

That's what I was thinking with Muse. I remember learning how to create a button with different states in Illustrator and bring it into Muse. I was thinking about that, but it still raises the question of how do I take it from Muse and give it to my developer for him to upload to my company's website.

Thanks so much for the responses, Uwe. I really appreciate your insights on this.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 20, 2017 0
Adobe Community Professional ,
Jun 20, 2017

Copy link to clipboard

Copied

You could do different animations with muse, each on a single page – your developer could grab the code (from your exported html)

and do whatever he needs to do with it.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 20, 2017 2
Community Beginner ,
Jun 20, 2017

Copy link to clipboard

Copied

Okay. I'll chat with my developer and ask him if it's something he thinks he'd be able to work with.

Thanks again,

Uwe!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 20, 2017 0
Adobe Community Professional ,
Jun 20, 2017

Copy link to clipboard

Copied

You could make the chat stronger if you provide a .muse or an exported html out of a .muse.

By that way you could save time and you also might have concrete case.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 20, 2017 2
Community Beginner ,
Jun 20, 2017

Copy link to clipboard

Copied

Good point, Uwe. I'm going to create a simple file to export and give to my developer by Friday. Thanks again for the help!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 20, 2017 0
Adobe Community Professional ,
Jun 20, 2017

Copy link to clipboard

Copied

You`re welcome .

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 20, 2017 0
Most Valuable Participant ,
Jun 20, 2017

Copy link to clipboard

Copied

mkelly108  wrote

Also, Edge Animate is no longer available. It's now Adobe Animate. I went through a few hours of tutorials, but the part where you add interactivity is my sticking point because I have trouble with the Javascript.

Edge Animate and Animate CC are different products aimed at different people;

  • Edge Animate (off the main list but still part of the standard Adobe CC sub) makes open code that can add in 'start', 'stop' and some other basic tools... it is aimed at small (one man) teams that want control over all their site

Screenshot (1092).pngScreenshot (1093).png

  • Animate CC... is template based platfrom for large groups making google adds

Animate CC is what you need if you want to get payed for making things fulltime and a solid understanding of code will prob make you the local go-to guy when people need a problem fixed... ime Animate CC made files are a %^&* to get working in Muse sites but its early days still and I assume Adobe has a team working on that.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 20, 2017 2
Most Valuable Participant ,
Jun 20, 2017

Copy link to clipboard

Copied

mkelly108  wrote

For functionality, I'm looking to make an interactive infographic that can sit in the content section of a blog site and be interacted with. Something like these. I'm looking to have click states and hover states. Mainly just have things appear when objects are clicked or hovered over. Advanced animations aren't necessary, although they'd be cool if I could add them.

thats a very sad looking graphic but you could make it in Muse... a somewhat better option would be to mix Photoshop images in

eg = map

mkelly108  wrote

Here are a few questions I was hoping I could have answered.

1. Are there any products that could allow me to make an interactive infographic without knowing how to code? The interactive infographic would need to sit in the content of a blog site, similiar to these graphics.

2. Is there anyone who can teach me how to do this? I'm doing this for work so I'd pay for a tutor. It's important to mention that I don't know how to write code. Whatever you teach me would need to be bare bones in regards to coding. I'm not opposed to learning it, but I would need someone to walk me through how to do it. If you look at the examples mentioned, I only need to learn how to do that. I would like to know how to get objects to show and hide based on clicks and hovers.

3. If I were to make this in Adobe Muse, would I be able to take the infographic that I built, give it to my team's developer, and have him be able to upload the infographic to the content section of our website? It doesn't seem like Muse is capable of creating widgets or other elements that can be moved over and added to an existing web page.

1 no not ones that google would allow for adds... you want Dreamweaver and a good Animation basics for that level

watch this ... should cover most your questions = Adobe MAX Online 2016

some Muse widget examples that don't need code are; Animations Demo - MOVE Animation Widget Pack for Adobe Muse

2. a forum is not the best place to teach and ime online learning is a waist of time but its your money

3. how long is a string... perhaps but I wouldn't think the team are using Muse so I'd assume Dreamweaver | Animate or Wordpress

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 20, 2017 2
Community Beginner ,
Jun 20, 2017

Copy link to clipboard

Copied

Haha, I agree Ussnorway. That is a sad looking graphic. But it shows the level of functionality that I need.

So if I were to create that graphic in Muse, would it have to stay on a Muse built site? Or could I somehow take that animated graphic, which was built in Muse, and put it onto something like a Wordpress blog article?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 20, 2017 0
Adobe Community Professional ,
Jun 20, 2017

Copy link to clipboard

Copied

Muse is not the right app to create graphics. If you anyway want to move to wordpress, leave Muse, and follow the advice from Ussnorway​ with Photoshop. Or Edge Animate or … any. Muse is there for creating websites.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 20, 2017 2