web-animation-18-19
Table of Contents
Synopsis
The course Web Animation is given at @CMDA in 2019 between 6 May and 24 May.
- Course: Web Animation
- Minor: Visual Interface Design (*login required)
- Course Coordinator: Danny de Vries
- Minor Coordinators: Nicole Frank and Marjolijn Ruyg
- Lecturers: Danny de Vries (@dandevri) (vid-1 and vid-2)
- SIS: HTML/CSS
- Credit: 3 ECTS
- Academic year: 2018-2019
- Period: Quarter 3 (spring)
- Programme: Communication and Multimedia Design (full time bachelor)
- Language: Dutch instructions and English resources
- Entry requirements: Admission
Description
In Web Animation we’ll create a prototype that heavily focusses on interactivity and animations using CSS animations, CSS transitions and SVG. Instead of static design and prototyping tools we’ll work straight into the browser using in-browser (dev)tools.
This course is part of the Minor Visual (Interface) Design before Ontwerpen 3 alongside Web Typography, together making up Visual Interface Design 2. In ontwerpen 3 you’ll apply your newfound web skills. We build further on knowledge acquired in Internetstandaarden, Inleiding Programmeren, and Blok Web.
Assignment
Pick a piece of work from the Phaidon Archive of Graphic Design and translate that to the web. What happens when people hover over certain elements with their mouse? What if they press keys on their keyboard? How does it behave on different screen sizes? First try to re-create it with web technologies, then add interactivity and maybe you can even enhance the artwork with elements in the same graphical style.
Communication
- GitHub — Main source of information, assignments, important dates, and more
- Examples — Example code from slides
- Moodle — Schedulers
If you have questions:
- Browse examples
- Look at the additional resources
- Ask for other students to help you
- Contact a lecturer
Goals
Main goals
The main goals in this course:
- You can create different CSS
transitionsandanimationsto add interactivity - You can create different states with CSS
pseudo-classesandtransforms - You can tweak and adjust your prototype with
in-browser tooling(devtools) - You can animate
.SVGand know to create scalable graphics - You can implement new
CSS3 features
Sub goals
In practice you’ll learn to:
- Layout and positioning with CSS (week 1)
- Use CSS transforms (week 1)
- Tweak designs with in-browser devtools (week 1)
- Work with the box model (week 1)
- Create states using transitions (week 2)
- Animate using CSS animations(week 2)
- Principles of animation with easing (week 2)
- Add interacitivity with CSS pseudo-classes (week 2)
- Animate scalable vector graphics (week 3)
- Use new CSS features (week 3)
The below table breaks down the general time needed per week.
| Week | Effort | Topic | Activities |
|---|---|---|---|
| 0 | NaN | getting started | getting started |
| 1 | 9:20h | layout | lab, lecture |
| 2 | 9:20h | animations | lab, lecture |
| 3 | 9:20h | svg | lab, lecture |
| 3 | NaN | assessment | assessment |
Schedule
Grade
| Task | Weight |
|---|---|
| Prototype (oral test) | 100% |
| Total | 100% |
if (!prototype) {
grade = 'GR'
} else if (prototype < 5.5) {
grade = 1
} else {
grade = (prototype > 5.5)
}
Programme
This course is given at Communication and Multimedia Design, a design bachelor focused on interactive digital products and services. CMD is part of the Faculty of Digital Media and Creative Industries at the Amsterdam University of Applied Sciences.
Conduct
This course has a Code of Conduct. Anyone interacting with this repository, organisation, or community is bound by it.
Staff and students of the Amsterdam University of Applied Sciences (Hogeschool van Amsterdam) are additionally bound by the Regulation Undesirable Conduct (Regeling Ongewenst Gedrag).
License
MIT © Danny de Vries, docs and images are CC-BY-4.0.