Principles of Website Development I — Layout, Navigation & Content

A1 — Layout, navigation and content principles

Layout patterns

Eye-tracking studies consistently find users scan pages in predictable patterns:

• F-shaped: users scan across the top, then down the left edge, reading less as they go — common on text-heavy pages (articles, search results).
• Z-shaped: eyes move top-left → top-right → diagonally down → bottom-right — common on simpler landing pages with a clear call-to-action at the end.
• Grid layout: content arranged in equal-sized blocks — common for product listings or image galleries.
• Unconventional layouts: deliberately break from these predictable scanning patterns — e.g. an asymmetric or overlapping arrangement — to create visual impact or make a brand feel distinctive. Higher risk of confusing users if overused, so used sparingly and purposefully.

Good layout also uses visual hierarchy (bigger/bolder = more important) and grouping (related items placed close together, per the Gestalt principle of proximity) to guide the eye without the user having to think about it.

Navigation types

• Sticky/fixed navigation stays visible as the user scrolls — good for long pages where users need to jump sections often.
• Vertical navigation runs down the side of the page rather than across the top — common on content-heavy sites or dashboards where there are too many sections for a single horizontal bar.
• Hamburger menu (☰ icon) hides navigation behind a tap/click — saves space on mobile, at the cost of one extra tap to reveal options.
• Logical navigation groups related pages sensibly (e.g. all "About" pages under one parent) so users always know roughly where they are.

Content types

• Written content — headings, body copy, labels.
• Visual content — images, icons, video.
• Calls-to-action (CTAs) — buttons/links designed to prompt a specific action ("Add to basket", "Sign up free").

Task

Pick a live site and log: which layout pattern it uses, what kind of navigation, and where its main calls-to-action are placed. This kind of structured review is exactly what PSAB Task 1 asks you to produce for your chosen brand.