web-animation-19-20

Synopsis
Description
Assignment
Communication
Goals
Grade
Resources
Conduct
License

Synopsis

The course Web Animation (VID 3.2) is given at @CMDA in 2020 between 6 May and 24 May.

Course: Web Animation (VID 3.2)
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, Blok Web and Blok Tech.

Assignment

Pick a piece of artwork (poster, album cover etc.) from either the Letterform Archive or AIGA Archive and translate that to the web. You can also pitch another piece of artwork to your teacher. What happens when people hover over certain elements with their mouse? What if they press keys on their keyboard? How should the ‘static artwork’ behave on different screen sizes? First try to re-create it with web technology (html elements, svg) then add interactivity and animation and maybe you can even enhance the artwork with elements in the same graphical style as the original work.

Communication

GitHub — Main source of information, assignments, important dates, and more
Slack — General chatter and Q&A
Brightspace — Schedulers and extra information

If you have questions:

Goals

Main goals

The main goals in this course:

You can create different CSS transitions and animations to add interactivity
You can create different states with CSS pseudo-classes and transforms
You can tweak and adjust your prototype with in-browser tooling (devtools)
You can animate .SVG and know how to create scalable graphics
You can implement new CSS3 features
You understand the responsive nature of the web (screen sizes)
You understand the limitations and possibilities of web technology

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

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

This site is open source. Improve this page.