John has 35 post(s)

4 Week 2: Abstract forms    f   b 2,041       

This just in, from PBS’ Off Book series.

4 Blog    f   b 2,888       

10 PRINT is a book about a one-line Commodore 64 BASIC program, published in November 2012. Book purchases support the nonprofit organizations PLAYPOWER (to which all royalties are being donated) and The MIT Press, the book’s publisher.

Read the book as a pdf (50 MB), provided under a Creative Commons BY-NC-SA 3.0 license.

Read a review from Slate Magazine.

4 Blog / Week 2: Abstract forms    f   b 3       

B Fontana Modern Masters series

If you’re in New York, visit the Wade Guyton exhibit at the Whitney.

Exhibit information
New York Times review

4 Week 2: Abstract forms    f   b 116       

I’ve placed an edited selection of Digital Bits from Assignment 2 on an iPad in the RISD Student Triennial. You can see the results online.

And there is a mention from RISD XYZ…
Screen Shot 2013-01-03 at 4.05.46 PM

4 Blog / Week 1: Concrete forms    f   b 21       

B “Painting, Rebooted,” retrospective on Wade Guyton


B “Relations”, from Visual Grammar by Christian Leborg

    “Visual objects in a composition relate to the viewer, the format, and other elements within the composition.” -Christian Leborg

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.

This final assignment of the course asks you to work with simple shapes that you pull from Assignment 4 or new abstract shapes to construct five active compositions. 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 Assignment 6.


4 Week 3: Active forms    f   b 2       

We’ll look at the latest in CSS3 properties, that allow animation and transformation. 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.

Create a balloon using HTML and CSS. Use the same working method as you did for your digital bits. You will need more than one element to make the balloon. Inspired by the film, The Red Balloon, and by the actual balloons available in class, experiment with interactions for your balloon(s). Upload your experiments to the site and categorize as Assignment 5.

Examples from class

Examples of interactions

CSS Properties we’ll review

jQuery events

Sample code


4 Week 3: Active forms    f   b 183       

For next week, continue to work with abstract shapes in html and css. For next week, create five finished compositions using no more than 5 HTML elements. Your compositions should activate the browser window, contained either to a div or to the browser window itself. We have included examples of abstract graphic compositions from print design to inspire your thinking.

This assignment encourages you to discover form that you otherwise might not have imagined. Be open to the overly dense, and to the overly spare.

Sample code

Refer to some of these css properties to help


Work from Kasimir Malevich, Max Huber, Hendrik Wekrman, MIT Media Office

4 Week 2: Abstract forms    f   b 2,046       

Absolute positioning may be ideal for creating a drawing or a simple layout, it fails quickly when used with dynamic content and within different browsers. The web, in short, is not about control. Today’s in-class 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 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 Assignment 3 and the Workshop #.

CSS Properties from class

Code examples from class

Sample properties

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

Additional examples

Pattern examples

2×4, Knoll Textiles


4 Week 2: Abstract forms    f   b 35       

w Le macchine


B Architecture and the lost art of drawing


B Bruno Munari


B Essay by Paul Elliman in Counterprint on Karel Martens’ graphic work

Designer Paul Elliman has been collecting small found objects that resemble typographic glyphs. Whether found on the side of the road, at someone’s house or at the hardware store, the objects become silhouetted and kept at actual size. He calls the monochromatic collection of objects, “Bits”. The formal language used can be traced to photograms, a one-to-one photographic black and white copy of an object. The photogram effectively makes two dimensional and graphic any three-dimensional object.

This assignment asks you to collect objects of your own, whether in your home, around town, at RISD 2nd life, etc., and draw them using HTML and CSS. Do not choose electronics. Try a band aid, for example. With CSS3, it is possible to draw non-rectangular shapes right in the browser. You may use any foreground and any background color, but be sure to use only one color for each — thereby working with form and counterform only. You may stylize (simplify) your original object as needed, but the goal is to make a faithful copy of the object. Consider the perspective that you choose for the object. You are encouraged to sketch out your objects in your F&C course notebook first.

Make five digital bits. Create an html file for each digital bit, and upload your html files into a post on the class website. Attach the post to the category Assignment 2 and Workshop 4. Title the post with the names of your bits (if they have names).

You may make use of these CSS-drawn shapes from Ali

Bike Lock Example


4 Week 1: Concrete forms    f   b 6,316       

Choose one of the Scandinavian countries (link to other countries at the bottom) and construct its flag in two ways: using absolute positioning and using floated divs. Apply the links to both from one post assigned to assignment 1. The size of the flag is up to you.


  1. Exercise solution with Float
  2. Exercise solution with absolute positioning
  3. Recap of html/css basics
  4. Updated recap of html/css basics and boxing


4 Week 1: Concrete forms    f   b 2,653       


  1. Syntax: declaration blocks, comma separated selectors
  2. Padding, Margin, Background, Border, Width, Height
  3. Units, Colors
  4. The natural flow of a page
  5. Floats and Clear
  6. Code an 8×8 black and red checkboard
  7. Absolute, Relative and Fixed Positioning (z-index)
  8. View source and Inspector

Positioning example

Link here

CSS Basics

CSS Positioning

4 Week 1: Concrete forms    f   b 121       


  1. Browsers read HTML. HTML is structure.
  2. Collection of well-formed tags.
  3. Required elements: html, head, title, body
  4. Block elements: headers, paragraphs, nesting
  5. Inline elements: anchor, strong, em, img


4 Week 1: Concrete forms    f   b 2,274       

B Workshop Overview