Web Programming 2015 » Week 3: Active Forms

Leis Ho – Assignment 6

Leis Ho — Sun, 10 May 2015 19:05:41 +0000

LeisHo_Assignment6

Drew’s Change in Relations

Drew — Fri, 08 May 2015 22:02:15 +0000

TurnDownForWhat

John — Fri, 08 May 2015 18:05:11 +0000

http://nthitz.github.io/turndownforwhatjs/

Drew’s Animation

Drew — Fri, 08 May 2015 17:19:08 +0000

“The Role of Decorative Animations in Web Design”

John — Mon, 20 Apr 2015 15:01:42 +0000

http://www.printmag.com/web-design/the-role-of-decorative-animations-in-web-design/

Design Office Fellowship site (responsive+animation)

John — Sat, 04 Apr 2015 13:11:11 +0000

http://thedesignoffice.org/fellowship15/

UI Animation Interface Library

John — Tue, 24 Mar 2015 01:04:57 +0000

http://useyourinterface.com/

Animation tools coming in Chrome

John — Tue, 24 Mar 2015 01:03:28 +0000

Assignment 6: Interactive animated composition

John — Fri, 27 Feb 2015 22:40:52 +0000

The term “responsive design” refers to a website’s ability to change layout and shape when seen on different sized browsers or platforms. This shift in layout takes quite a bit of planning and thought.

This assignment asks you to create a work that plays with this concept of responsiveness as an opportunity for animation. Make a work that shifts and alters its experience based on the viewport of the browser. You may also introduce interactivity and interactions within the browser itself. However, the focus of the assignment is the “transition” between states. How can you activate/animate/create unexpected changes in those states, as if your perspective is changing in the 3D space

Example

Links about “responsive design”

Assignment 5: Form and alter relationships

John — Fri, 27 Feb 2015 22:02:12 +0000

We’ll look at the latest in CSS3 properties, that allow animation and movement in the browser. When mixed with the event handlers of jQuery, the stabile structures can shift properties upon user interaction.

Websites today are often designed with these subtle shifts in elements. We’ll be making more drastic moves, making the animations and interactions a primary part of our experiments. Start on the below assignment after taking some time in class today to get used to how these interactive elements work.

Session 3

Complete the following exercises:

On rollover, make an element fill the screen
On click, make one element cover another element
On click, have two different (visual and actual) elements animate
Move an element back and forth across the screen

Sessions 1 and 2

Read the chapter titled “Relations” from Leborg. The author presents an extensive vocabulary of relationships. For example, the terms include: symmetry, balance, groups, coordination and distance.

Make a simple shape and allow the user to change the default relationship in some way. Choose just one type of relationship from Leborg’s chapter for each composition. More than one relationship may occur through your investigation of the one concept.

Title your compositions using the type of relationship that you’re working with. Upload your work to the website and categorize as 5: Shifts in relations.

Web Programming 2015 » Week 3: Active Forms

Leis Ho – Assignment 6

Drew’s Change in Relations

TurnDownForWhat

Drew’s Animation

“The Role of Decorative Animations in Web Design”

Design Office Fellowship site (responsive+animation)

UI Animation Interface Library

Animation tools coming in Chrome

Assignment 6: Interactive animated composition

Example

Links about “responsive design”

Assignment 5: Form and alter relationships

Session 3

Sessions 1 and 2

Examples from class

Examples of interactions

CSS Properties we’ll review

jQuery events

Sample code

Resources

Examples