## Notes - [The Only 5 Web Design Skills That Actually Matter (2025) - YouTube](https://www.youtube.com/watch?v=vbFn0C-pvis) ## Typography - How to pick the right fonts - How to set up fonts ### Type Scale System 1. Font Sizes 2. Letter Spacing 3. Line-Height [TypeScale.net](https://typescale.net) #### Font Size - Base font-size: `<p> 16px` - Scale up by `1.25` ratio - `<h6> 20px` - `<h5> 25px` - ... #### Letter Spacing - p: default - h6: -0.5% - h3: -1.5% - h1: -2% #### Line-Height - P: 150% of font size - h4: 130% - h2: 110% - h1: 100% ## Layout - Beginners: drag things around until it "feels right" - Pros: use a system ### Rules - Grid System for structure - Spacing system for rhythm between elements (vertical spacing too) - Visual hierarchy to guide the eye ### Grid - 12 columns for desktop - 8 columns for tablet - 4 columns for mobile ### Spacing with 8 Point Spacing is done in multiples of 8 - 8 - 16 - 24 - 32 - 64 - 128 - 256 ### Visual Hierarchy - People don't read websites; they scan them - Layout needs to guide the eyes Guide - Use **proximity** to keep related content close to each other - Use **size** to tell users what's more important - **Contrast** (size, weight, or color) - Alignment makes clear structure, and clear structure is easy to read ## Color - Don't use MORE COLORS; use colors MORE INTENTIONALLY ### Guide - Limit palette: Use at most 2-3 colors - Each color has a job ### 60-30-10 - 60% neutrals - 30% are secondary colors - Backgrounds - Cards - Headers - Visuals - 10% accent colors - Causes things to stand out, like buttons or CTAs ### Opacity - Opacity on primary/secondary colors maintain a cohesive theme ### Prioritize Contrast - Highest contrast: 21:12 - Passable contrast: 4.5:1 (smaller text) or 3:1 (larger text) ### Find CSS Overview - Google Developer Tools - Three dots - "CSS Overview" This lists all styles: - colors - fonts - size settings ## Conversion Skills - Beginners design for looks - Pros design for ACTION ### Page Goals Options include - Buy a product - Sign up for a call - Get a lead magnet ### Strategic CTAs - Visible within seconds - Locations - One in navigation - One in hero - One every 2-3 seconds ### Trust, Clarity, and Feelings - Tip: people buy from brands the know, like, trust 1. Speak to motivations 2. Clear value 3. Social proof