Portfolio: Animated Infographic Project

Animated Infographic Project

Students use CSS and SVG animation techniques to create an infographic-style web page. In essence this is a single page website that tells a story—almost like a comic about data and information.

Overview and Creative Brief

Objective

  • Design and construct a web page that presents data and information to the user in a graphical and animated format.
  • Write a proposal describing the topic, justification, data, and target audience for the infographic.

Description

An infographic is data and information presented in a visual and graphical format. The aim is to show data or information in a way that is easily grasped and understood by the viewer.

Traditionally, infographics are created as static graphic files for publishing on the web or in print. For this project, you will create an infographic-style web page. In essence this is a single page website. Stylistically, this is a single-page website that tells a story—almost like a comic about data and information you want your users to know about.

Each section of your infographic page will contain some animation. Animated elements can be CSS and/or SVG-based. What you decide to animate is a design choice where animation helps move the story along and can take a few forms. Some ideas to consider:

  • "Background" or accent animation: animation added to elements as a design element. For example: a sun's rays spinning or pulsing gently. This use of animation is like wasabi--a little bit goes a long way.
  • "Drawn" animated elements: for example a bar graph or pie chart that animates the growth of bars or pie segments
  • "Assembly" animated elements: elements that fade, slide, or otherwise move into place
  • "Change" elements: elements that animate from one state to another. For example: illustrating the effects of pollution on water quality might show the water changing from blue to brown.

Materials & Technology

  • Internet access and web browser
  • Text editor/word processor

Instructions

Below is a collection of articles to read and review. You are also welcome to research infographics and look for examples out on the interwebs.

The first step of this project is to decide and declare what your infographic will be about. In class, we discussed project ideas. Use these as the starting point for your creative brief.

Your creative brief should be one page and include the following:

  • Name, course name, course code, and quarter
  • Project statement
    • This is your ‘elevator speech’ describing your project. You should be able to clearly state, in one or two sentences, what your infographic page is about.
  • Justification
    • This is an explanation about why this particular data or information is important enough to you to build an infographic page about it—and also why we should care.
  • Target audience
    • Whose minds are you trying to change, persuade, or inform with this infographic? Why these people?
  • Data
    • List data and information sources you expect to use to build your infographic. List actual sources you intend to use, not general ideas of sources.

Save your brief as a PDF. To submit, upload your brief to your student host/portal and submit the URL to the PDF to this assignment’s dropbox basket in the course eCompanion shell.

Reading

Deliverable

  • PDF of Creative Brief, posted to student web hosting account. URL to Brief submitted to assignment’s eCompanion dropbox.

Grade

  • 100 points, Crafting (Animated Infographic Project)

Rubric

Write a proposal describing the topic, justification, data, and target audience for the infographic.

  • Exemplary (4): Meets and exceeds requirements. No errors.
  • Above average (3): Meets requirements. Few errors or typos.
  • Average (2): Meets requirements. Some errors or typos.
  • Below average (1): Does not meet requirements. Many errors or typos.
  • Unacceptable (0): Assignment was not submitted

Data and Narrative

Objective

  1. Identify and record data relevant to infographic.
  2. Outline (or script) narrative for presenting the data/information in the infographic.

Description

This assignment is about gathering and organizing your content for your infographic. The deliverable is two parts. The first part is an outline or ‘script’ of the narrative your infographic will tell. The second part is an outline or list of the actual data and/or information you are presenting and basing your infographic on.

Instructions

Narrative

As humans, we like to tell stories. We like to hear, read, and see stories. In fact, we are so wired for stories our brain makes up stories when just given a few random words or images

Your infographic tells a narrative, of sorts, about the data or information you are trying to convey. A narrative, for our purposes, presents a string cause and effect to the user. It starts with the basic premise or hypothesis, leads the user along a linked trail of cause and effect to the conclusion or resolution of the initial premise.

The infographic you are designing is a single web page. It will be designed for the user to scroll through as a series of sections—almost like slides in a slideshow.

Follow this basic outline to flesh out your narrative:

  • Title section
  • Hypothesis or premise the infographic addresses
  • Background/context/groundwork information that sets the stage for the premise
    • Repeat as necessary
  • Findings/insights that support or argue the case for the premise
    • Repeat as necessary
  • Conclusion to wrap everything up and tie it back to the opening premise
  • Call to action: what do you want the user to do with this new-found knowledge?

Each section (slide) is a chunk of information for your user to digest. It will be presented using illustrations, animation, and typography. Keep chunks to manageable amounts—one main idea per section/slide.

Create your outline using presentation software (i.e. PowerPoint). Each outline item should be its own slide. Keep formatting barebones and plain.

Save your narrative outline as a PDF. Upload your PDF to your student web host and submit the URL to the PDF to the assignment’s dropbox basket.

Data

This part of the assignment is listing, annotating, and citing the actual data or information you are using for your infographic. The creative brief assignment asked for sources. This assignment asks for the actual data you are referencing.

Append your list of data as a slide (or slides) at the end of your narrative outline. It should be part of the same PDF document.

Materials & Technology

  • Internet access and web browser
  • Presentation software (PowerPoint, Google Docs, Keynote, etc)

Deliverable

  • PDF of narrative outline and data, posted to student web hosting account. URL to Brief submitted to assignment’s eCompanion dropbox.

Grade

  • 100 points, Crafting (Animated Infographic Project)

Rubric

Identify and record data relevant to infographic.

  • Exemplary (4): Meets and exceeds requirements. No errors.
  • Above average (3): Meets requirements. Few errors or typos.
  • Average (2): Meets requirements. Some errors or typos.
  • Below average (1): Does not meet requirements. Many errors or typos.
  • Unacceptable (0): Assignment was not submitted

Outline (or script) narrative for presenting the data/information in the infographic.

  • Exemplary (4): Meets and exceeds requirements. No errors.
  • Above average (3): Meets requirements. Few errors or typos.
  • Average (2): Meets requirements. Some errors or typos.
  • Below average (1): Does not meet requirements. Many errors or typos.
  • Unacceptable (0): Assignment was not submitted

Visual Design & Storyboards

Objective

  1. Communicate the design concept of an animated infographic web page.

Description

This assignment is about communicating the visual design of your infographic. This includes typography, images and graphics, colors, and layout.

Materials & Technology

  • Data & Narrative outline
  • Graphics software of choice

Instructions

Your infographic will be a single-page web site. In the Data & Narrative assignment you were to create a series of slides that represented each section of content.

Using your graphics software of choice, create a design comp that demonstrates how your infographic will be displayed. Keep in mind this graphic is broken up into sections that the user scrolls through.

Be sure to spend time on this to give adequate love and attention to the design. Remember to make the narrative clear and the data understandable. This design comp can potentially be a portfolio piece in it’s own right.

Indicate on the comp what elements will be animated and how they will be animated.

Save your design comp as a PDF. Post your design comp PDF to your student portal and submit the URL to the file to this assignment’s basket in the eCompanion course dropbox.

Deliverable

  • PDF of design comp and animation notes posted to student portal. URL to file submitted to assignment eCompanion dropbox basket.

Grade

  • 100 points, Crafting (Animated Infographic Project)

Rubric

Communicate the design concept of an animated infographic web page.

  • Exemplary (4): Meets and exceeds requirements. No errors.
  • Above average (3): Meets requirements. Few errors or typos.
  • Average (2): Meets requirements. Some errors or typos.
  • Below average (1): Does not meet requirements. Many errors or typos.
  • Unacceptable (0): Assignment was not submitted

Animated Infographic

Objective

  1. Build and launch a web page that presents data and information to the user in a graphical and animated format.
  2. Demonstrate appropriate page structure semantics.
  3. Demonstrate CSS-based animation techniques.
  4. Demonstrate use of SVG graphics and animation.

Description

For this assignment, you will create the animated version of your infographic design using HTML, CSS and CSS animation, SVG and SVG animation. Some animations should be triggered by the user scrolling to a particular section.

Because this is a web page, you should also have in-page navigation as an option for the user to navigate between sections without scrolling.

At the footer of the page, you will include your list of citations for your referenced material.

Materials & Technology

  • Text editor
  • Web browser
  • Internet access

Instructions

Start with building the HTML structure of your page and fleshing out the design details. Your first goal is to get the HTML page to look more or less like your design comp. Since this isn’t a ‘typical’ web page, there is some leeway in how you approach positioning elements with your CSS. Using absolute positioning may be an appropriate option.

With the HTML and CSS in place, continue on to animating the elements you identified in your design comps. Use CSS or SVG animation as appropriate for what you are trying to do.

Finally, add the ScrollMagic functionality to trigger animation when the user scrolls into a section of your web page.

Upload your animated infographic page and supporting files to your student portal. It’s to your advantage to post your files as you work.

Submit the URL to your animated infographic to this assignment’s eCompanion dropbox basket.

Deliverable

  • Animated infographic and supporting files posted to student portal. URL to animated infographic page submitted to assignment’s eCompanion dropbox basket.

Grade

  • 100 points, Crafting (Animated Infographic Project)

Rubric

Build and launch a web page that presents data and information to the user in a graphical and animated format.

  • Exemplary (4): Meets and exceeds requirements. No errors.
  • Above average (3): Meets requirements. Few errors or typos.
  • Average (2): Meets requirements. Some errors or typos.
  • Below average (1): Does not meet requirements. Many errors or typos.
  • Unacceptable (0): Assignment was not submitted

Demonstrate appropriate page structure semantics.

  • Exemplary (4): HTML is expertly and thoroughly updated to current, web standard, semantics. Code is neat and presentable. Comments are used extensively to describe what’s going on in the code.
  • Above average (3): HTML is adequately updated to current, web standard, semantics. Code is neat and presentable. Some comments are used to describe what’s going on in the code.
  • Average (2): HTML is basically updated to current, web standard, semantics. Some HTML sectioning elements are improperly used. Few, if any, comments that describe the code are present.
  • Below average (1): HTML is poorly updated to current, web standard, semantics. It is clear there is a lack of understanding about the purpose of the different HTML sectioning elements.
  • Unacceptable (0): Assignment not turned in.

Demonstrate CSS-based animation techniques.

  • Exemplary (4): Meets and exceeds requirements. No errors.
  • Above average (3): Meets requirements. Few errors or typos.
  • Average (2): Meets requirements. Some errors or typos.
  • Below average (1): Does not meet requirements. Many errors or typos.
  • Unacceptable (0): Assignment was not submitted

Demonstrate use of SVG graphics and animation.

  • Exemplary (4): Meets and exceeds requirements. No errors.
  • Above average (3): Meets requirements. Few errors or typos.
  • Average (2): Meets requirements. Some errors or typos.
  • Below average (1): Does not meet requirements. Many errors or typos.
  • Unacceptable (0): Assignment was not submitted