9 Web Design Hacks — Course Notes

9 Web Design Hacks — Course Notes

Overview

These design hacks transform an average hero section into a professional, high-value design. The difference between a $500 website and a $5,000 website is thinking critically about user experience.

Hack 1: Break Up Big Chunks of Text

The Problem: Users check out immediately when they see large blocks of copy (Nielsen study findings).

The Solution:

• Aim for 50–75 characters or 600–700 pixels wide
• Add line breaks every 2–3 sentences
• Make text easy to skim

Real Examples: Apple and Figma never show massive paragraphs on screen.

Hack 2: Use Bullet Points (Designer’s Best Friend)

Why It Works: Our brains love lists. They provide clear entry points and help users process information quickly without digging through dense paragraphs.

Hack 2.1 — Level Up: Add icons to bullet points for even better organization and visual interest.

Key Mindset: Don’t just blindly put client content online. Think critically about what’s best for the user.

Hack 3: Use a Consistent Spacing System

What “Clean Design” Really Means: Elements aren’t sized and spaced randomly — there’s a method and rhythm.

The 8-Point Grid System:

• Space elements by multiples of 8 (8, 16, 24, 32, etc.)
• Use a baseline value for grouped elements (e.g., 16px)
• Double the space between separate groups (e.g., 32px)
• Keep distance between big groups similar

Example Structure:

• Within a group: 16px spacing
• Between groups: 32px spacing
• Between major sections: 104px spacing

This keeps things organized and easy to navigate.

Hack 4: Use Ratios for Line Height

What is Line Height? The distance between each line break in text.

The Ratios:

• Headers: 1:1 ratio (100px font = 100px line height)
• Paragraphs: 1:1.5 ratio (30px font = 45px line height)

Why Different? Paragraphs need more breathing room for easier reading and engagement.

Pro Tip: Check other websites using Developer Tools → Inspect → Computed tab to see their line height calculations.

Hack 5: Refine Text with Letter Spacing

The Reality: Most fonts don’t come perfect out of the box. Type designers account for every possible use case, but you can optimize for your specific layout.

General Rules:

• Display Fonts: -1px to -3px (prioritize scanability)
• Body Text: 0px/default (prioritize legibility)
• CTAs: +1px to +3px (make them clickable by slowing readers down)

Why These Values?

• Closer letters = easier to scan (headers)
• Default spacing = most legible (body)
• Wider spacing = more noticeable (CTAs)

Hack 6: Use Font Super Families

The Problem: Font pairing is hard. Drastically different character sizes and spacing make users’ eyes bounce around.

The Solution: Font super families — sets designed to work together by the same type designers.

Free Options on Google Fonts:

• Source Family (Source Sans, Source Serif, Source Code)
• Noto Family (Noto Sans, Noto Serif, Noto Slab)
• DM Family (DM Sans, DM Serif)

Benefit: Styles feel cohesive no matter the scenario.

Hack 7: Find Color Palettes with CSS Overview

Better Than Random Generators: Be intentional by studying websites you admire.

Process:

1. Create a Figma inspiration board
2. Screenshot websites you like
3. Include links to reference later
4. Categorize by typography, layout, and color

Using CSS Overview:

1. Open Developer Tools (right-click → Inspect or View → Developer Tools)
2. Click three dots → More Tools → CSS Overview
3. Capture overview to see:

• All colors used
• Color contrast ratios
• Typography and sizing

1. Export colors to Coolers
2. Save as SVG and import to Figma

Much faster than: Color picking one element at a time.

Hack 8: Be Subtle with Design Elements

Golden Rule: Content is always the star of the show.

Do:

• Use gradients
• Add soft textured backgrounds
• Apply subtle shadows
• Reference your inspiration board

Don’t:

• Over-design
• Distract with excessive animations
• Make elements compete with content

Practical Application:

• Add drop shadows to make elements stand out
• Use dotted textures for depth
• Apply radial gradients behind text to reduce competition
• Add colored gradients to corners for visual interest

Key Principle: Keep the main thing the main thing.

Hack 9: The Squint Test (Visual Hierarchy Check)

What It Is: A design school technique to check if your visual hierarchy works.

How to Do It:

1. Step back from your design
2. Squint your eyes until it’s blurry
3. Ask: What stands out?

What to Look For:

• Headlines should jump out
• Call-to-action buttons should be visible
• Important form fields should be noticeable

If things turn into a blob: Your visual hierarchy needs work.

Quick Fix: Add backgrounds or contrast to elements that are getting lost.

Before & After Transformation

Started with: An okay hero section that doesn’t grab attention

Ended with: A professional design that looks expensive

Applied:

• Broken up text chunks
• Added bullet points with icons
• Consistent 8-point spacing system
• Proper line height ratios (1:1 for headers, 1:1.5 for body)
• Refined letter spacing
• Font super family (DM Sans + DM Serif)
• Intentional color palette
• Subtle design elements (shadows, gradients, textures)
• Passed the squint test

Key Takeaways

1. Think critically about user experience, not just client requests
2. Small changes create massive professional impact
3. Systems (spacing, ratios) create cohesion
4. Subtlety beats over-design
5. Always test visual hierarchy
6. Learn from existing great designs (CSS Overview is your friend)

Remember: If you don’t quit, you win.