Sketching a website

An activity to practice recognizing and drawing parts of a website including semantics and basic CSS.

Go fullscreen: ⌃⌥F

Sketching a website

What & why

When designing websites it’s extremely helpful to plan ahead so we have a direction before writing a line of code.

Sketching the layout, determining the HTML semantics & drawing the grid will make coding more straight-forward and understandable.

Let’s get some practice planning websites by working backwards from an already complete design.

Set up

  1. Form into pairs
  2. Download the files
  3. Print “mockup.pdf” and draw with pencil
    Or do it digitally

Instructions

  1. Write semantics
    Assign each box a semantically appropriate HTML tag.

  2. Prioritize the content
    Use the grey box method, or numbering method.

  3. Determine the grid
    Plan the grid basic CSS grid code: columns, rows, areas.
    Hints on the next screen…

Grid hints

  • Keep it simple
  • Use fr units
  • Think in “areas”
  • Not everything has to be in the grid
  • More than 1 element can occupy the same area
Start

Sketching a website

An activity to practice recognizing and drawing parts of a website including semantics and basic CSS.