# jzhao.xyz


.
\_.
/


# Page Layout

Last updated December 25, 2021

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