Page layout is the art of manipulating a user’s attention on a page to convey meaning, sequence, and point of interaction.

Visual

Mechanisms

  • Upper-left-corner preference
  • Whitespace
  • Contrasting fonts
    • the bigger and bolder, the more important the info
  • Contrasting foreground and background colours
    • eg. putting white text on a black background
  • Positioning, alignment, and indenting
    • indented text is subordinate to whatever’s above it
  • Graphics like lines, boxes, coloured bars
    • things in a box or group go together
  • Flow
    • remember tendency to read top-to-bottom and left-to-right (at least, in the west)
    • focal point: spots your eyes can’t resist going to
      • tend to follow them from strongest to weakest
      • better pages only have a few — having too many dilutes the importance
    • meaning and context play a big part in visual flow → perceived meaning of page content will change where the user chooses to look

Placement

  • proximity: put things close together, and viewers will associate them with one another
  • similarity: if two things are the same shape, size, color, or orientation, then viewers will also associate them with each other
  • continuity: our eyes want to see continuous lines and curves formed by the alignment of smaller elements
  • closure: want to see simple closed forms, like rectangles and blobs of whitespace, that aren’t explicitly drawn for us