• Ê
  • Â

5 Outline

Above is a video of how I suggest thinking about your patterns. Start with a concept/direction/codebase that you’re interested in, then be open to playing with it to find your result. I suggest using the Web Inspector.

4 Blog / Week 2: Abstract Forms   b Add comment

Leave a Reply

Modern Spice is a fairly intricate pattern where four bands of color intersect to create a total of ten different tones (four main colors plus the six blended combinations). This beautiful overlay of color on top of color recalls Anni Albers’s 1930 tablecloth design and textile (in the collection of The Museum of Modern Art), an even more intricate pattern of line and color. Within the complexity of Wright’s and Albers’s patterns is a simplicity of overall effect that befit the modern interior in 1930s Germany and 1950s America and makes them timeless even today.

Read more about it

4 Week 2: Abstract Forms   b Add comment

Leave a Reply

Screen Shot 2013-11-22 at 3.10.55 PM

I made a microsite inspired by our “Abstract Forms” assignment. All shapes are based off of shapes made by students Jiali, Phil, Saad, Sarah, Anne-Mary, Nari, Joo, and Maria.

See the site here here.

4 Blog / Week 3: Active Forms   b Add comment

Leave a Reply

í Assignment 6: Interactive animated composition

The sculpture of Alexander Calder shifts when its context changes. The term “responsive design” refers to a website’s ability to change layout and shape when seen by different sized browsers or platforms. This shift in layout takes quite a bit of planning and thought, usually with an important payoff.

This final composition asks you to create a culminating work that plays with this concept of responsiveness. Make a work that shifts and alters its experience based on the size 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.


Media query

Links about “responsive design”

b Add comment    

Leave a Reply


w CSS Solar System
September 27

í Assignment 5: Form and alter relationships
September 27

In class

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.

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.

Work with simple shapes that you make or that you pull from Assignment 3A. Each composition should allow the visitor 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

í Assignment 4: Make five patterns
September 20

Due next week

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

Code examples from class

To come

Sample properties

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

Additional examples

b Add comment    

Leave a Reply