Skip to main content
ekrupa25
ekrupa25
Participant
February 16, 2017
Answered

Using Illustrator CC to create interactive flowcharts that are converted into websites

  • February 16, 2017
  • 1 reply
  • 7329 views

I am trying to use Illustrator CC to create a one-page website that contains an interactive flowchart (decision tree).  The flowchart design and layout has been completed in Illustrator, and my goal is to replicate the way the flowcharts work on this site:  https://www.bustle.com/flowcharts.

I inquired about how the flowcharts were made, and was directed to this site that explains the process: http://flower.bustle.com/.  The website gives me the basic steps, but I need more detailed instructions.

I am very new to website design, so I am seeking additional tutorials (or at least the proper terms to use when searching the web for tutorials.)  The website I reference above uses the term, “Flowers,” to describe their interactive-flowcharts-turned-into-websites. Is "Flowers" the correct term, or is there a more precise term for these websites that contain interactive flowcharts?

Also, I need more information (detailed instructions) about the process to add nodes, choices and paths before I export the file. 

Finally, when I am ready to export the file so it can be turned into a website, what exact steps should I follow?

Is the “creation of interactive flowcharts that will be exported and turned into websites” known by a specific subject name (that I can search and find all the detailed information I seek)? 

    This topic has been closed for replies.
    Correct answer Mylenium

    Is "Flowers" the correct term

    Not by any stretch of imagination. That's just their jazzed up marketing slang. A flowchart is a flowchart. At best their stuff would count as "mindmaps", though in strict terms that would be a different thing, too. The rest is explained on their website in sufficient detail. If you have specific questions on the process, you have to ask equally specifically, not throw around generics and assume that anyone around here ever even had heard of this thing. They are not even creating web sites, just an interactive SVG, which is a whole different thing to begin with, so there cannot be any magical keywords that give you the answer at the snap of a finger. All they do is wrap your layers into the SVG based on their fixed naming scheme and then inject their interactive script code on top of it. Besides all of that I'm afraid this is simply a case of your inexperience in both worlds - AI and web design. There are no easy fixes for that nor will simply watching some video tutorial give you any understanding of the technical process. You really have to get down to the basics, beginning with what an interactive SVG actually is and what its capabilities and limitations are.

    Mylenium

    1 reply

    Mylenium
    MyleniumCorrect answer
    Legend
    February 16, 2017

    Is "Flowers" the correct term

    Not by any stretch of imagination. That's just their jazzed up marketing slang. A flowchart is a flowchart. At best their stuff would count as "mindmaps", though in strict terms that would be a different thing, too. The rest is explained on their website in sufficient detail. If you have specific questions on the process, you have to ask equally specifically, not throw around generics and assume that anyone around here ever even had heard of this thing. They are not even creating web sites, just an interactive SVG, which is a whole different thing to begin with, so there cannot be any magical keywords that give you the answer at the snap of a finger. All they do is wrap your layers into the SVG based on their fixed naming scheme and then inject their interactive script code on top of it. Besides all of that I'm afraid this is simply a case of your inexperience in both worlds - AI and web design. There are no easy fixes for that nor will simply watching some video tutorial give you any understanding of the technical process. You really have to get down to the basics, beginning with what an interactive SVG actually is and what its capabilities and limitations are.

    Mylenium

    ekrupa25
    ekrupa25Author
    Participant
    February 23, 2017

    Thank you for taking the time to address my question.  Whether you realize it or not, you have been incredibly helpful.  Your comments are very helpful.  Also, your use of the term, "interactive SVGs," has given me a starting point.  Thank you again.

    For anyone else reading this thread at some future point, I have discovered that the proper term for what I am seeking to do is "animating the viewbox." 

    To help you understand better, here is an article that contains an animated flowchart: https://css-tricks.com/interactive-data-visualization-animating-viewbox/#article-header-id-1.   The flowchart is near the end of the article.  Look for the subsection titled, “Another Demo: A Guided Infographic.” The author was kind enough to include the code for this flowchart here: http://codepen.io/sdras/pen/VjvGJM.

      C
      calving52948676
      Participant
      November 30, 2017

      Hi, I'm wanting to do the same thing for my senior class project and I'm curious to know if you've found any more information or research on animating the viewbox and adding the interactivity to the flowcharts. If so, is there anything you could point me to for getting started?

      Thanks,

      - Calvin

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices