Web Design
What this domain tests
Planning and visual decision-making: layout, hierarchy, navigation, and responsive behaviour across screen sizes.
Core rules and concepts
- Begin with user goals and a content inventory, then wireframe, mockup and prototype before coding.
- Four layout disciplines: contrast, repetition, alignment and proximity. A grid keeps columns consistent; white space groups related items.
- Visual hierarchy tells the eye what to read first, using size, weight, colour and position.
- Responsive design uses fluid grids, flexible images and media queries. Work mobile-first: base styles for small screens, then add breakpoints where the content breaks, not at fixed device widths.
- Navigation must be predictable, with clear labels and a visible current-page state. Tap targets should be at least 44 × 44 CSS pixels.
- Consistency in colour, type and components builds trust.
Worked example
A three-column desktop layout must work on a phone. Reasoning: set a fluid grid with grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)), so columns reflow without a media query. Add one breakpoint near 48em for the header, stacking the nav under the logo. Test at 320px, 768px and 1440px, and with text enlarged to 200 percent.
Traps that cost marks
Fixed pixel page widths; hover-only menus that fail on touch; shipping placeholder text; designing only at desktop size; hiding content on mobile instead of prioritising it.