Layout from Brief Lab

The Brief

Build a SaaS pricing page with three plans, a short FAQ section, and one dominant CTA. Compose the structure before choosing component styles.

Starter Prompts

In Pencil, design a pricing page from this brief: three pricing tiers, one FAQ block, and one primary CTA. Start by selecting a pattern and laying out section order. Keep spacing on a fixed 8/16/24 scale and annotate the intended eye path from headline to CTA.

Rubric

Lab Checklist (0/5)

Select the best-fitting layout patternDefine section order from primary to secondary contentApply a consistent spacing system across sectionsPlace one clear primary CTA in contextDocument why the chosen pattern fits the brief

Example Output

Show Example Output

Wireframe with hero, three pricing cards, FAQ section, and one highlighted CTA path annotation.

Common Mistakes

Starting with components before choosing page pattern.
Adding extra sections that dilute primary task focus.
Forgetting to validate CTA placement in scan order.

Principles Practiced

layouthierarchyspacing