Unit 01 (Website Design Principles) focuses on clear, practical frameworks for designing or auditing pages so they convert better on desktop and mobile. It teaches usability conventions, conversion‑centered design, the Three Questions test, segment‑aware layouts, and a mobile‑first approach, then applies them through audits, landing‑page matching, and evidence‑based A/B testing.
Key frameworks
-
Design for usability: follow web conventions, create visual hierarchy, define clear areas, make clickable elements obvious, remove distractions, and format content for scanning to reduce cognitive load.
-
Conversion‑centered design: drive attention, context, clarity, congruence, credibility, closing, and continuance so each element supports a single action and minimizes friction to maximize conversions.
-
Three Questions: ensure above‑the‑fold answers what is offered, why to pick this brand, and what action to take next; use this to critique homepages and propose high‑impact changes.
-
Segments: design next steps that suit different shopper types (search vs navigation, browse vs directed, new vs returning, online vs in‑store) without cluttering the page.
Mobile and desktop
-
Mobile first: design for small screens first, then progressively enhance for larger screens, prioritizing essential content, thumb‑friendly targets, and simplified flows; adapt layouts by user context, not just screen size.
-
Ad–landing page match: align message, visuals, and intent between ads and landing pages; choose the correct landing‑page type (single product, multi product, lead gen, subscription, long copy, single purpose)
CRO practice
-
A/B and multivariate tests: iteratively test page changes (e.g., pop‑ups, placement, promos), set objectives beyond conversion rate (AOV, email value), and pick winners on total value per session.
-
Elements to decide: color scheme, buttons, images, navigation, trust symbols, video, forms, phone numbers—test meaningful changes rather than trivial tweaks.
In‑class application
-
Web design audit: teams assess a real homepage with one framework and propose three conversion‑lift changes, then compare outcomes across frameworks.
-
Project option: mobile‑first redesign exercise or a website creation/design project to translate principles into working layouts.