Sketching websites

A group activity to help understand page layout with modular CSS by sketching the pieces on paper.

Go fullscreen: ⌃⌥F

Sketching websites

Set up

  1. Form into pairs
  2. Download the files
  3. Print out the 2 pages of wireframes in the PDF
  4. Get out a pencil for marking up the paper

Determine semantics, grids & type classes

  1. Draw boxes to represent the different HTML elements
  2. Assign each box a semantically correct tag
  3. Draw lines to represent the grid rows & units
  4. Write the unit widths
  5. Write out the possible classes from the type system: like island, gutter, pad, push, etc.
Start

Sketching websites

A group activity to help understand page layout with modular CSS by sketching the pieces on paper.