• Ê
  • Â

5 Week 1: Concrete Forms

From PBS’ Off Book series.

4 Video / Week 1: Concrete Forms   b Add comment

Leave a Reply

Å

w “Concrete objects”, Christian Leborg
September 13

Visual Grammar

í Assignment 2: Draw found objects with CSS

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. 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
Screen Shot 2013-01-03 at 4.05.46 PM

Links

b 1    

One response to “Assignment 2: Draw found objects with CSS”

  1. John says:

    No type, no more than 2 colors, more band-aids, no cameras, no perfume bottles, no waiting until Thursday (start this weekend), collect some amazing simple objects.

Leave a Reply

í Assignment 1: Make a Scandinavian flag with CSS

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 Scandinavian Flag. The size of the flag is up to you.

Examples

  1. Exercise solution with Float
  2. Exercise solution with absolute positioning

Links

b Add comment    

Leave a Reply

Outline

  1. Syntax: declaration blocks
  2. Properties: Units, Background, Color, Margin, Padding, Border, Width, Height
  3. Classes, divs
  4. The natural flow of a page
  5. Floats and Clear
  6. multiple classes, nesting divs
  7. Absolute, Relative and Fixed Positioning (z-index)
  8. View source and Inspector

In-class examples

Wkshp 4 boxes
Wkshp 4 positioning
Divs, floats, css properties
Positioning example

CSS Basics

CSS Positioning

4 Week 1: Concrete Forms   b Add comment

Leave a Reply

Outline

  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, lists, nesting
  5. Inline elements: anchor, strong, em, img

John’s example from class

Link

Links

4 Week 1: Concrete Forms   b Add comment

Leave a Reply

( Getting setup: Add users, bios and avatars

Welcome, everyone.

    1. We’ll enter you into the WordPress system one by one.
    2. While you wait, you can set up your avatar and download Textwrangler. Use whatever image you’d like for your avatar. You’ll need to set up a wordpress.com account at gravatar.com and use your risd email address.
    3. Once you’re set-up, add a nickname (case sensitive), an optional bio and URL. Note, you may keep your identity private by choosing an avatar that isn’t a portrait.

This three-session workshop combines the tactical skills needed to structure web pages with a looser more playful compositional mindset. Students are introduced to the structural elements and properties of HTML and CSS through hands-on demos, in-class exercises and take-home assignments. Tight technical HTML drawings in week one give way to full-screen abstract compositions in week two. Week three incorporates interaction, introducing CSS3 transform, animation, and other user-controlled properties.

Although created from code, the assignments are inspired by the contemporary and historical print works of Bradbury Thomspon, Karel Martens and Paul Elliman. Paramount is that students become attuned to the vocabulary and possibilities of graphic form in the digital age. The digital age, similar to the era before in its capacity to precisely arrange or playfully experiment.

Course objectives

  1. Be introduced to HTML and CSS syntax for future projects
  2. Learn to work collaboratively in an open-source model
  3. Encourage use of the browser for experimentation
  4. Introduce both analytical and playful working methods
  5. Be introduced to instructions-based making — HTML being one of many coding methods.
  6. Be comfortable editing existing themes or websites.

Software needed

  • Textwrangler or other HTML editor
  • Safari or Chrome browser

Grading

  • The same grading criteria for your homeroom section applies here
  • Missing one class without permission fails the course
  • Although we are “wired” throughout the workshop, avoid being plugged into Facebook, email, etc.
Drawing at top: YooJin Jang, 2012
4 Week 1: Concrete Forms   b Add comment

Leave a Reply