Midterm

1. Overview
2. Requirements
3. Example Websites
4. Deadlines
5. Grading Rubric

Overview

Your midterm project should be an informational website or web page on a topic of your choosing. You can think of this in terms of an infographic data visualization however keep in mind that your project should still function as a web page or site. There should be links as well as accessible text done in html. It is important to note that although the project is in the style of an infographic, it should not be on large graphic, rather an informational website.

You should fully cover your topic using cohesive data (text and statistics as appropriate to your topic). You should use graphics and charts to highlight points and assist in visualization get your topic. You may also want to incorporate small amounts of animation or multimedia elements. You will have to do some research for this project. All data and information should include links to your sources.

The website should be fully responsive. There is no specific requirement on the number of breakpoints, but the site should work from the iPhone 5 size up to the width of the classroom iMacs (1920px wide). This also includes all sizes in between. Make sure your site design works at each size.

Each of the two following examples demonstrate the kind of design I'm looking for. They both incorporate data and visuals to tell a story. Each page is a fully functioning responsive web page as well. Notice how the text and graphics of each site lead you through a story.

• INFOGRAPHICS + RESPONSIVE DESIGN A Perfect match
• Responsive Design: The Only Mobile Strategy That Scales

The following site is much more graphical, but still uses HTML text and functions as a longer single page website.

• SVG Infographic

The key part of this project is to think about how you can tell a story (again) with both words and images. This time there should be more focus on data.

Requirements

Your site should include the following:

• Enough content to cover your topic - The first three examples below are the approximate length I'm looking for
• Citations for all data points - You may include sources below data or use some sort of foot note system with data at the bottom. Links to the site and site name or similar are sufficient for this project.
• All text should be represented in HTML (and therefor accessible)
• All text should be proofed and free of typos and misspellings
• Responsive design that works in the range from mobile (ex: iPhone 5) to desktop (full screen on classroom iMac)
• Some sort of navigation to move between sections of your page or site
• A colophon in your footer explaining who you are and the purpose of the site
• Some incorporation of responsive image techniques
• Valid HTML

Example Websites

Below are several examples that demonstrate the type of page I'm expecting. I think that you will be able to achieve something in this realm.

• INFOGRAPHICS + RESPONSIVE DESIGN A Perfect match
• SVG Infographic Uses svg for images and simple CSS animations
• Responsive Design: The Only Mobile Strategy That Scales Responsive!
• How Meb won the Marathon by Elaina Natario (former Comm student who works for the Boston Globe)
• Scroll for your health Simple and kind of responsive

This one is actually not responsive at all, but you should look at it anyway because it's awesome.

• Every Last Drop Very nice but not responsive

Resources

Here are some resources you might find helpful:

SVG Information

• Infographics That Take Responsive Web Design To The Next Level (more for inspiration than anything else)
• Accessible SVG tips
• SVG Tips for Designers
• SVG Workflow for Designers
• SVG Files: From Illustrator to the Web

Charts and Graphs: JS Libraries

• Google Charts Handy dandy chart builder using HTML5/SVG.
• Chart.js Very pretty but a bit harder to implement
• Chartist.js

CSS and SVG Animation

• SVG Infographic Tutorial Goes with the nice svg infographic above
• Getting started with responsive infographics (TL;DR Show me a graph!)
• CSS Animation for Beginners Very good and pretty tutorial and introduction
• CSS3 Transitions, Transforms, Animation, Filters and more! Comprehensive overview with demos
• Transform Properties
• Creating Scroll-based Animations using jQuery and CSS3
• Animate.css Just add water animations. Awesome library of css animations. Just add the stylesheet and add a class to the element to animate.
• Wow.js Super easy timed animation
• Web Inspector Animation Controls

Deadlines

Grading Rubric