Design Fundamentals for PMs

Product managers don't need to be designers, but they do need design literacy. You need to critique mockups, give actionable feedback, and collaborate with designers without slowing them down or stepping on their expertise.

Why Design Literacy Matters

Design decisions directly impact product success. A confusing interface tanks activation. Poor visual hierarchy buries your core value proposition. Inconsistent UI erodes trust. As a PM, you own outcomes, and design is a critical lever.

The best PMs speak design fluently enough to:

• Spot usability issues in wireframes before engineering starts
• Give feedback that helps rather than frustrates designers
• Make informed trade-offs between design quality and speed
• Advocate for design system investment with stakeholders

Visual Hierarchy

Visual hierarchy guides users' eyes through a page. The bigger, bolder, and higher-contrast an element, the more attention it gets.

The Three-Second Test: When a user lands on your page, what do they see first? Second? Third? If your call-to-action is the same size as your footer text, you have a hierarchy problem.

Hierarchy Tools:

• Size: Larger elements dominate. Use size to signal importance.
• Weight: Bold text stands out. Use bold sparingly for headings and key actions.
• Color: High contrast draws attention. Use color to highlight critical actions (primary buttons).
• Whitespace: Surrounding an element with space makes it feel important.

Real example: GitHub's search bar is large, centered, and surrounded by whitespace. You know exactly what to do when you land on the homepage.

Typography

Typography is the backbone of readable interfaces. Most of your product is text, so type matters.

Type Scale: Use a consistent scale (1.25x or 1.5x ratio between sizes). Material Design uses 12px, 14px, 16px, 20px, 24px, 34px, 48px, 60px. Pick a scale and stick to it across your product.

Font Weights: Most products need three weights: Regular (400) for body text, Medium (500) for subtle emphasis, Bold (700) for headings. More weights create visual clutter.

Line Height: Body text should have 1.5x line height for readability. Headings can go tighter (1.2x). Too tight is hard to read. Too loose feels disconnected.

Font Pairing: Use one typeface for UI (sans-serif like Inter, Roboto, or SF Pro) and optionally a second for marketing (serif or distinct sans). Two fonts max. More is chaos.

Color

Color communicates meaning, creates emotion, and reinforces brand. But bad color choices make interfaces unusable.

Contrast Ratios: WCAG requires 4.5:1 contrast for body text, 3:1 for large text. This isn't optional. It's accessibility. Use a contrast checker before shipping. Light gray text on white backgrounds fails for 1 in 12 users.

Color Roles:

• Primary: Brand color, used for main actions (buttons, links)
• Secondary: Supporting actions or less critical UI
• Semantic: Red for errors, green for success, yellow for warnings, blue for info
• Neutral: Grays for text, borders, backgrounds (usually 5-7 shades)

Real example: Stripe uses a 10-shade gray palette plus purple (primary), green (success), and red (error). Simple, consistent, accessible.

Don't Rely on Color Alone: 8% of men are colorblind. Pair color with icons, labels, or patterns. A red error message should also show an error icon and clear text.

Practical Application

When reviewing designs, ask:

• Hierarchy: What's the most important thing on this screen? Does the design reflect that?
• Typography: Can I read this easily? Is the type scale consistent?
• Color: Does this pass contrast checks? Are we using color consistently?

Your job isn't to be the designer. It's to catch usability issues before they ship and to give feedback that makes the design better, not just different.