Week 8

Notes

• CSS Transitions (animation)
• CSS Tricks: Animation

Animated Story Materials

• Skrollr Demo Page
• Centering Elements
• Repeating animations:
  • Animated pumpkin using Skrollr
  • Animate pumpkin using CSS
• Skrollr Scrolling Timer
• Down the Rabbit Hole
• Down the Rabbit Hole: Piece by piece breakdown
• More skrollr demos:
  • Simple Side scrolling example (Road Trip)
  • Road Trip Demo (Bells and Whistles)
  • Side Scrolling Walking Dead Tutorial
  • Side Scrolling Walking Dead Demo

Homework

Reading

• Communicating Design — Chapter 2: Diagram Basics
• Practical Guide to Information Architecture — Part 1: About information Architecture
• UX Without User Research Is Not UX
• 5 Simple UX Principles to Guide Your Product Design

Exercises

Animated Story

For next week, you should complete all of you imagery for your Animated Story project. Upload all images to your animated-story folder. Create a list of links on the story.html page for each image (asset).

Continue working on the coding of your project. Complete a rough version of your project. Come to class prepared to demonstrate your work for critique and ask any technical questions you havefor your Animated Story.

Review the Skrollr examples and demos from class to understand how to move things and transition elements on the page.

All information and deadlines about the Animated Story project are posted on the Animated Story page.

Final

Final Project Process & Setup
Your final project will have a process page at final.html. Each part of the final will result in some kind of deliverable that should be added to this page. This is where I will expect to find all the materials for your final project when I grade it.

1. Create a page called final.html
2. Make sure the final link in your class website navigation goes to the final.html page
3. Create a folder called final
4. Add any materials you have so far for your final project to this folder.
5. Upload the final.html file and final folder to your Simmons web space

All materials relating to your final project should go inside this folder and be linked to from the final.html page.

Topic Selection

Write a one paragraph explanation of your topic selection for the final project.

Add the explanation to your final.html page.