Layout is the positioning and arrangement of a page’s content: text, images, video, white space, menus, sidebars, and other zones. A good layout makes the page feel balanced, supports its message, and leads visitors’ eyes through the content in a useful order. section 6.7 section 6.7.1
Start by choosing a focal point—the part of the page that attracts attention first. It might be the largest, brightest, most detailed, or most surprising area. On a home page, this focal point is often called a hero and commonly uses an image or other visual to represent the site. section 6.7.1
Build a practical page layout with these checks:
- Treat empty space as part of the design. A large quiet area can balance a smaller but detailed content area, so balance does not require symmetry. section 6.7 section 6.7.1
- Vary image sizes by importance unless you are intentionally showing a catalog or thumbnails. Put the most representative image or video high on the page. section 8.5
- Keep media relevant to nearby text, add captions, and leave sufficient white space around images or video. Do not let media interfere with navigation. section 8.5
- Use a consistent placement pattern across pages, then check the result on a cellphone screen. section 8.5
Balancing a home page
Rather than dividing a page into three equal horizontal bands, combine foreground content, a background visual, and open sky or white space in unequal amounts. Contrast between the zones can create depth, provided no one area overwhelms the others. section 6.7
A predesigned template can provide a balanced starting point: retain its block positions and sizes while replacing its text and images. Review the result rather than copying blindly, since repeated templates can make pages—and sites—look too similar. section 6.7.1
Figure 8.10 Here’s GPT’s version, rearranging the images to satisfy the criteria I provided.
Compare an original home-page image arrangement with a revised version that resizes and repositions images against stated placement criteria. section 8.5
