Skip to content

Assignment 1: Draw found objects with CSS

John Caserta edited this page Mar 16, 2018 · 7 revisions

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 are silhouetted at actual size and placed in his project. 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 iPhones or super-common electronics. Hunt around for unique and simple forms -- like a band aid.

With CSS, 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 drawings first with where your elements will go.

Make five drawings using div tags and css classes. Create an html file for each digital bit (use the name of the object as file name), and put them into a folder called "Digital Bits" in your github repo.

Goals for the assignment

Designing websites starts with structural thinking -- blocking in shapes in the browser. It's the exact same thinking required needed to establish blocks needed to form these drawings. This process demands that you both plan your shapes in advance (by sketching) and adapt them to the reality of what you are able to code and what you see while you are coding.You will also become intimately familiar with units, css classes, positioning and floating as well.

Example code for reference

You may make use of these CSS-drawn shapes