Project 3: JS-Based Interactive Graphics
Create a landing page and a series of three interactive graphics that have some clear connection to each other. For example, they could be increasingly complex versions of the same thing, three different methods for creating the same thing, or three different things created using the same tools/aesthetic.
If you choose this option, you may work with a partner. If you do, you must create a new shared repository on github for the project, and each person must make their own commits so that I can see who worked on which components. Each person should then link to the shared site from their own landing page. (I strongly recommend committing new work on a regular basis so that I can see your work over time.) Your documentation page must describe how you split the responsibilities for the project work.
Your focus should be on design and interaction, rather than text (although you should include any text necessary to enhance the appearance and/or interaction of the site). In addition to demonstrating your mastery of JavaScript, the project should be visually polished and easy to navigate/use.
Before thinking about the technical aspects of your project, take some time to consider how you would like to approach it. What kind of experience do you intend to create? How will the three interactive pages/applications relate to each other aesthetically and/or conceptually? What kind of interactivity do you want to implement?
Project Proposal
You must submit an initial project proposal, with the following components, no later than 8am on November 26:
- A concise description of the intended audience(s) and goal(s) for your site, including your expectation of how, when, and why they would be accessing your site.
- Sketches or grid-based wireframes, showing how you plan to lay out the content on each of your pages.
- A description of the type of interactive graphics that you plan to implement, how they are thematically linked, and how users will interact with them.
- If you have an idea of what JavaScript library you would like to use, you should include that information as well. (This is not required.)
- If you're working with a partner, you should clearly outline what each of your responsibilities will be on the project.
The proposal will not be graded, but failure to submit it will result in a five-point deduction from your final project. (Submitting one that is late and/or incomplete will result in a three-point deduction.)
Technical Requirements
Your landing page has to work on a mobile browser, but your individual interactive graphics do not. (However, going directly to a page that does not work in mobile should redirect and/or show an explanation for the user.)
Because the goal is for you to learn how to utilize new technologies, you may not create these graphics using p5.js. I've created a list of possible libraries for you to use, along with links to tutorials for them.
The main page must use a JavaScript-based interactive navigation component that allows the user to go to any of the major sections of the site.
- It should enhance the experience and should not feel gratuitous.
- It must be implemented on the desktop version; it is optional on the mobile version
- What you used, why you used it, how you created it, and (if you started with an example rather than writing it from scratch) how you modified it for use with your site must all be addressed on your documentation page.
Requirements for all pages:
- Use CSS grid and/or flexbox for layout
- Usable on both Chrome and Firefox at 1920x1080 and 1280x800
- Mobile version (with or without interaction) optimized for 320x568 (an iPhone 5/SE, as rendered by responsive mode)
- Validate properly for both HTML and CSS. (I use the W3C HTML and CSS validators for this. I recommend installing the Web Developer Toolbar extension for easy access to the validators within your browsers.)
- Have no more than one accessibility error in the WAVE accessibility evaluation tool.
Documentation Requirements
Your CSS and JS must be externally linked, fully commented, and well-organized.
Your documentation page must be included in the main menu for the site, and should include the following components:
- A concise description of the intended audience(s) and goal(s) for your site, including your expectation of how, when, and why they would be accessing your site. (Can be copied from proposal, or updated if it changed.)
- Sketches or grid-based wireframes, showing how you designed the grid layouts for each of your page types and placed content within them. (Can be copied from proposal, or updated if it changed.)
- A clear explanation of why you made the design decisions that you did, including your choices of images, colors, and typefaces. These should all relate back to the goal of your design.
- A full list of sources for all elements used on the site that you did not create yourself, with the exception of web-based typefaces. This includes images and code samples. If you modified the original resource, you should explain what changes you made to it (if any).
- An explanation of what you incorporated that went beyond what was covered in in-class exercises; what did you learn or build upon in order to implement your design ideas? What skills and knowledge did you bring from other classes, or from research you did into specific libraries or technologies, that you integrated into your site? (Using any JavaScript library beyond jQuery or p5.js is likely to satisfy this requirement, but only if you do more than copy an existing demo or tutorial.) IF
- If you worked with a partner, it is particularly important for you to explain in this document what each of you did to go above and beyond the basic material covered in the class. The commit history on your shared repo should support your explanation.
Grading Rubric
I will use this rubric for grading your portfolio:
| Interactive Graphics | |
| Landing page has clear introduction. | 2 |
| Landing page with interactive navigation | 2 |
| Three distinct interactive graphics, each with a connection to the theme | 6 |
| Graphics go "above and beyond" basic replication of demos or tutorials | 3 |
| Mechanics | |
| Grid +/or Flexbox Used for Responsive Page Layout | 4 |
| Works in Firefox & Chrome | 2 |
| Desktop version works at 1280x800 | 1 |
| Mobile Version works at 320x568 | 1 |
| Semantic, valid HTML | 2 |
| Well-structured, valid CSS | 2 |
| No major accessibility errors | 1 |
| Code Commenting | |
| CSS Fully Commented | 2 |
| JS Fully Commented | 2 |
| Documentation Page | |
| Goals/Audience | 1 |
| Design Decisions | 1 |
| Wireframes | 1 |
| Sources | 1 |
| Above and Beyond Explanation | 1 |
| TOTAL | 35 |
Submission and Due Date
Your proposal must be submitted to the myCourses Dropbox by 8am on Monday, November 26.
Your project should be published on GitHub and linked properly from yourgithubname.github.io/igme230/ by 8:00am on Monday, December 10. The landing page link should read "Project 3: Interactive Graphics". If you worked with a partner it should include (partnered with Partner Name) in the link as well.