Web Layout and Composition

Establishing a solid structure is the first step in planning a website layout, acting as the foundation for visual elements like typography and colour. Every website generally consists of three primary sections: a header, the main content, and a footer. The header provides navigation and identity, the main content delivers the core value to the user, and the footer houses secondary information like copyright details and privacy policies. Additionally, a sidebar can be utilised for secondary content or deeper level navigation to keep the main menu clutter-free.

A critical element in this structure is the strategic use of whitespace (negative space), which should be embraced rather than feared. Whitespace creates focal points, defines relationships between items through proximity, and prevents the interface from feeling overwhelming. A design with "breathing room" is easier for users to scan and directs them through the page effectively.

Overview

1. Using a Grid — Organisational structure with columns and gutters
2. Choosing a Layout — Layout patterns and reading behaviours
3. Responsive Design — Adapting layouts across devices

---

← Back to Main Page