• Ê
  • Â

5 Outline

Jason Fried on his Process

Neapolitan Ice Cream

B Frameworks/CMSes

Starting Points

Start Here
HTML5 Reset: Good clean starting point
HTML5 Boilerplate
Twitter Bootstrap
Skeleton: Good clean grid framework

HTML5 tags

Overview of newer HTML tags
Semantic tags in HTML5



b Add comment    

Leave a Reply

You must be logged in to post a comment.

í Assignment 6: Interactive animated composition

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


Links about “responsive design”

b Add comment    

Leave a Reply

You must be logged in to post a comment.

í Assignment 5: Form and alter relationships

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:

  1. On rollover, make an element fill the screen
  2. On click, make one element cover another element
  3. On click, have two different (visual and actual) elements animate
  4. 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.

Examples from class

Examples of interactions

CSS Properties we’ll review

jQuery events

Sample code



b Add comment    

Leave a Reply

You must be logged in to post a comment.


w CSS Solar System
Feb 27, 2015

Y Multiply is here! (Overprinting)

Simply use this declaration in your css to multiply one block element over its below contents!


With multiply Without multiply
Screen Shot 2015-02-26 at 9.57.15 AM Screen Shot 2015-02-26 at 9.57.24 AM

See the values for mix-blend-mode

b Add comment    

Leave a Reply

You must be logged in to post a comment.

í Assignment 4: Make five patterns


Absolute positioning may be ideal for creating a drawing or a simple layout, however it falters quickly when many elements start stacking up. The web, in short, is not about control. This take-home assignment asks you to take specific elements and repeat them to form a continuous pattern. The pattern may be created from the combination of floating elements and positioned elements.

Start by repeating a single element. Consider refining this first step into a single composition. Note the figure and ground relationships that emerge. Expand your work to include more layers and more shapes. Use only one color per layer.

Upload your experiments to a post on this website and categorize it under “4: CSS Patterns”.

CSS Properties from class

  • Recursive properties. (see example)
  • Combining positioning and float to layer patterns on each other (see example)

Code examples from class

Session 1

Session 2

Sample properties

Refer to some of these css properties to help
Shape reference (week 1)

Additional examples

b Add comment    

Leave a Reply

You must be logged in to post a comment.