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 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 plan out your drawings in your F&C course notebook first.
Make five drawings using div tags and css classes. Create an html file for each digital bit, and upload your html files into a post on the class website. Categorize your post to the category CSS Found Objects. Place your name in the tile of the post and the names of the objects above or as part of your link.
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.
Example code for reference
You may make use of these CSS-drawn shapes from Ali
Previous solutions
Examples from last year
Links
Interesting links to check out
