howdy-jekyll-theme 1.0.0

data/_posts/2026-04-22-product-design-best-practices.md

@@ -0,0 +1,239 @@
+---
+layout: post
+title: "Product Design Best Practices"
+date: 2026-04-22
+category: "Tutorials"
+image: /assets/illustrations/tasks-complete.svg
+excerpt: "Professional design methodology — intentional, justified decisions that hold up to user testing."
+tags: [methodology, process, best practices, craft]
+---
+
+Don't guess. Make intentional, justified decisions.
+
+> If you showed this to 10 users tomorrow, what would they remember?
+
+## Before You Design: Discovery
+
+Never design blind. Answer these first:
+
+**What** are we building: Screen type, platform, scope
+
+**Who** is this for: Audience, technical level
+
+**What** should users do: Primary action, success metric
+
+**What** feeling to evoke: Tone, energy
+
+**What job** does this do: Help me decide, convince me, get me started
+
+**What** objections exist: Is it worth it? Is it legit? Will it work?
+
+**What** should they remember: The hook, the differentiator
+
+**Any** constraints: Brand, tech requirements, inspirations
+
+Write a design brief before you open Figma:
+
+> I'm designing a **[WHAT]** for **[WHO]** that helps them **[GOAL]** and should feel **[TONE]**.
+
+---
+
+## Research & Analysis
+
+### Research ≠ Copying the Average
+
+Research is about understanding *why* choices work, not copying *what* everyone does.
+
+- Best practices are a starting point, not a destination
+- Safe often means forgettable
+- Document your reasoning: "Most use X, but we chose Y because..."
+
+### Three Lenses
+
+**Structure:** Layout, components, information hierarchy. Common solutions to common problems.
+
+**Visual Craft:** For each strong reference, notice typography, color, spacing, details, icons, and overall vibe.
+
+**Conversion & Soul:** What's the hook in the first 3 seconds? How do they handle objections? Where's the trust? What's unique? What microcopy has personality? What would a user remember tomorrow?
+
+### Build a Steal List
+
+When you research, document specific tactics with exact details:
+
+- "Linear: 13px/20px body, -0.01em tracking, 48px section gaps, accent at 8% opacity for hover"
+- Not "Linear: clean design"
+
+---
+
+## Typography
+
+### Scale
+
+Use a consistent ratio: 1.2 (minor third) works well. Limit yourself to 6–8 sizes:
+
+| Size | Usage |
+|------|-------|
+| Display (48–64px) | Hero sections |
+| H1 (36–48px) | Page titles |
+| H2 (24–32px) | Section headers |
+| Body (16–18px) | Main content |
+| Small (13–14px) | Captions, metadata |
+| Caption (11–12px) | Fine print |
+
+### Leading
+
+Large text = tight (1.0–1.2). Body = loose (1.5–1.6).
+
+### Letter-Spacing
+
+This is the detail most designers skip. Don't:
+
+| Text Type | Letter-Spacing |
+|-----------|----------------|
+| Body (14–18px) | `0` |
+| Small text (11–13px) | `0.01–0.02em` |
+| UI labels/buttons | `0.02em` |
+| ALL CAPS | `0.06–0.1em` |
+| Large headings (32px+) | `-0.01` to `-0.02em` |
+| Display (48px+) | `-0.02` to `-0.03em` |
+
+### Rules
+
+- Line length: 50–75 characters
+- Max 2 typefaces
+- Use weights within a family before adding another font
+
+---
+
+## Color
+
+### Palette Structure
+
+**Neutrals:** 70–90% of the interface
+
+**Primary accent:** 5–10%
+
+**Semantic:** success, warning, danger
+
+**Effects:** rare, used sparingly
+
+### Working with Your Primary
+
+Pick one brand color and build a scale (50–950). Use 600 as default, 700 for hover, 800 for active states.
+
+### Contrast
+
+- 4.5:1 minimum for body text
+- 3:1 minimum for large text
+
+### Dark Theme
+
+Dark theme is not an inversion. Use `#0f0f0f` for background, not `#000`. Use `#f0f0f0` for text, not `#fff`. Build a separate neutral scale.
+
+### Tokens
+
+Name tokens by purpose (`--color-primary`), not by color (`--color-blue`). This makes rebranding painless.
+
+---
+
+## Spacing
+
+### The Scale
+
+Base unit: 4px or 8px. Everything multiplies from this.
+
+```
+4px scale:  4, 8, 12, 16, 24, 32, 48, 64, 96
+8px scale:  8, 16, 24, 32, 48, 64, 96, 128
+```
+
+### Proximity = Relationship
+
+Closer elements feel connected. Farther elements feel separate. Use spacing to communicate hierarchy and grouping.
+
+### Density
+
+Match spacing to context: dense for dashboards (8-12px padding), default for product UI (16-24px), spacious for marketing (24-32px).
+
+### Responsive
+
+Structural spacing (sections, containers) scales down 0.5-0.75x on mobile. Internal component spacing (icon-to-text, button padding) stays fixed.
+
+---
+
+## Motion
+
+Motion serves one of three purposes: **feedback** (it worked), **continuity** (where it went), or **hierarchy** (look here). If it doesn't do one of these, remove it.
+
+| Category | Duration |
+|----------|----------|
+| Instant (hover, press, toggle) | 90–150ms |
+| State change (accordion, tabs) | 160–240ms |
+| Large transition (modal, drawer) | 240–360ms |
+
+### Easing
+
+Enter = ease-out. Exit = ease-in. Change = ease-in-out.
+
+### Rules
+
+- Always support `prefers-reduced-motion`
+- No animation over 500ms in product UI
+- Never use `transition: all`
+
+---
+
+## Icons
+
+- Pick one style (outline OR solid) and stick with it
+- Geometric center ≠ visual center; arrows and chevrons need a 0.5–1px optical shift
+- Use `currentColor` by default
+- Hit area should be 44×44px minimum
+- Action icons need `aria-label`
+
+---
+
+## The Persuasion Layer
+
+Before you design, fill this out:
+
+**Hook** (first 3 seconds): Hero headline + visual
+
+**Story arc:** Problem → Solution → Proof → Action
+
+**Objection killers:** List the top 3 reasons someone would hesitate
+
+**Trust signals:** Social proof, guarantees, security badges, specifics
+
+**The memorable thing:** What will users screenshot or tell someone about?
+
+If you can't fill this out, you're designing decoration, not persuasion.
+
+---
+
+## The Soul
+
+Aim for roughly 80% proven patterns and 20% unique choices.
+
+- One bold visual choice: a color, a type treatment, an illustration style
+- Voice and personality in the copy
+- Micro-interactions that surprise
+- One detail users will remember
+
+The test: if someone screenshots your work, would they know it's from *this* product?
+
+---
+
+## Implementation Quality Gate
+
+Before shipping, check:
+
+**Functional:** Is the primary action obvious? Error states handled? Works on mobile?
+
+**Visual:** Does the squint test pass? Spacing rhythm consistent? Typography intentional?
+
+**Persuasion:** Hook in 3 seconds? Two or more trust signals? Objections addressed?
+
+**Polish:** No orphaned words? Icons aligned? Buttons consistent?
+
+Good design isn't about following rules blindly. It's about making decisions you can defend, and caring about the details that most people won't notice until they're missing.

data/_projects/atlas.md

@@ -0,0 +1,26 @@
+---
+layout: project
+title: "Atlas Design System"
+subtitle: "Creating a shared language for product teams"
+category: "Design Systems"
+year: "2024"
+image: /assets/illustrations/business-strategy.svg
+---
+
+## About Atlas
+
+Atlas is a design system built to bring consistency and speed to a growing product organization. It serves multiple teams across web and mobile, providing a shared foundation of components, tokens, and patterns.
+
+## Challenge
+
+As the team grew, every designer and developer was solving the same problems slightly differently. Buttons looked different across screens, spacing was inconsistent, and onboarding new team members took longer than it should.
+
+## Solution
+
+I built Atlas around a simple principle: make the right thing the easy thing. Starting with design tokens — colors, spacing, typography — I worked outward to create a library of flexible, well-documented components. Everything was designed in Figma and shipped as code, keeping design and engineering in sync.
+
+## Results
+
+- **Faster:** Features ship 40% faster with 60% fewer design revisions
+- **Consistent:** Design inconsistency issues dropped by 80% in audit scores
+- **Scalable:** New team members reach full productivity in 3 days instead of 3 weeks

data/_projects/luminous.md

@@ -0,0 +1,26 @@
+---
+layout: project
+title: "Luminous Brand & Marketing Site"
+subtitle: "Building a brand that grows with the product"
+category: "Brand & Web"
+year: "2022"
+image: /assets/illustrations/launch.svg
+---
+
+## About Luminous
+
+A complete brand refresh and marketing site redesign for a growing SaaS company. The project covered visual identity, web design, and a shared component library for both marketing and product teams.
+
+## Challenge
+
+The company's brand no longer reflected the quality of their product. The website felt patchwork, built over years by different hands with no cohesive direction. Every redesign conversation ended with "we should fix this, but we don't have the bandwidth."
+
+## Solution
+
+I started by defining the visual foundations — color, typography, spacing, and motion — then built a component library that both marketing and product could use. The brand language centers on clarity and warmth, using light and space to make complex ideas feel approachable.
+
+## Results
+
+- Pages load in 1.2s (down from 4.7s) with a 98 Lighthouse performance score
+- Component library adopted by all 6 product teams, reducing duplicate work by 35%
+- Brand guide referenced weekly by every team, not shelved but actually used

data/_projects/nova.md

@@ -0,0 +1,31 @@
+---
+layout: project
+title: "Nova AI Copilot"
+subtitle: "Making AI feel like a natural part of the workflow"
+category: "AI / Machine Learning"
+year: "2025"
+image: /assets/illustrations/programmer.svg
+---
+
+## About Nova
+
+Nova is an AI assistant built into a creative tool, helping users draft content, explore options, and move through repetitive tasks without leaving their flow.
+
+## Challenge
+
+AI features in creative tools often feel tacked on — a separate mode, a different interface, something you "switch to." The goal was to make AI feel like it was always there, ready when needed and invisible when not.
+
+## Solution
+
+I designed Nova as a contextual panel that surfaces suggestions based on what the user is doing right now. Instead of a chat box you talk to, it offers relevant actions inline — rewrite this heading, generate alternatives, summarize this section. Every suggestion is clearly marked as AI-generated and always editable.
+
+Design principles:
+- **Augment, don't replace:** the user stays in control
+- **Context over conversation:** suggest actions, don't require prompts
+- **Trust through transparency:** always show what's AI-generated
+
+## Results
+
+- First drafts completed in 4.2 minutes on average, 3x faster than the control group
+- 72% adoption across the user base within the first 8 weeks
+- Featured in Product Hunt's "Design Tools of the Year" roundup

data/_projects/osaka.md

@@ -0,0 +1,26 @@
+---
+layout: project
+title: "Osaka Analytics Platform"
+subtitle: "Designing data tools that people actually enjoy using"
+category: "Data Visualization"
+year: "2023"
+image: /assets/illustrations/analytics.svg
+---
+
+## About Osaka
+
+An analytics platform built for teams who need answers from their data without needing to write code or wait on a data team.
+
+## Challenge
+
+Most analytics tools force a choice: either use rigid pre-built dashboards or learn a query language. Neither works for teams that need flexibility without the learning curve.
+
+## Solution
+
+I designed Osaka around progressive complexity: start simple, go deeper when ready. The query builder uses visual blocks instead of SQL, and the dashboard system suggests chart types based on the data you're looking at. Color palettes are accessible by default, tooltips provide context without clutter, and everything works on mobile.
+
+## Results
+
+- 83% of queries completed without writing SQL
+- Dashboard creation shifted from 3-day requests to 15-minute self-service
+- Data team ticket volume for basic queries dropped by 60%

data/_sass/_base.scss

@@ -0,0 +1,181 @@
+// Howdy Jekyll Theme - Base Styles
+
+@use "variables" as *;
+
+html {
+  box-sizing: border-box;
+  scroll-behavior: smooth;
+  overflow-x: hidden;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+  -webkit-font-smoothing: inherit;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+}
+
+body {
+  background-color: var(--howdy-bg-light-gray);
+  color: var(--howdy-text-primary);
+  font-family: var(--howdy-font-primary);
+  font-size: 16px;
+  line-height: 1.4;
+}
+
+h1, h2, h3, h4, h5, h6, p, figure {
+  margin: 0;
+}
+
+input, textarea, select, button {
+  font-family: var(--howdy-font-primary);
+}
+
+a {
+  color: var(--howdy-text-secondary);
+  text-decoration: none;
+  transition: var(--howdy-transition);
+
+  &:hover {
+    color: var(--howdy-text-primary);
+  }
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+// Focus-visible — global accessible focus ring
+:focus-visible {
+  outline: 2px solid var(--howdy-accent-green);
+  outline-offset: 2px;
+}
+
+// Remove outline on focus for elements that use border/box-shadow as feedback
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible {
+  outline: 2px solid var(--howdy-accent-green);
+  outline-offset: 0;
+  border-color: var(--howdy-accent-green);
+}
+
+// Theme toggle focus ring
+.theme-toggle:focus-visible {
+  outline: 2px solid var(--howdy-accent-green);
+  outline-offset: 2px;
+}
+
+// Nav links focus ring
+.site-nav a:focus-visible {
+  outline: 2px solid var(--howdy-accent-green);
+  outline-offset: 2px;
+}
+
+// Social links focus ring — ensure ring is visible outside the container
+.social-links a:focus-visible {
+  outline: 2px solid var(--howdy-accent-green);
+  outline-offset: 2px;
+}
+
+// Share buttons focus ring
+.share-btn:focus-visible {
+  outline: 2px solid var(--howdy-accent-green);
+  outline-offset: 2px;
+}
+
+// Pagination focus ring
+.pagination-page:focus-visible {
+  outline: 2px solid var(--howdy-accent-green);
+  outline-offset: 2px;
+}
+
+// TOC links focus ring
+.toc a:focus-visible {
+  outline: 2px solid var(--howdy-accent-green);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+// Nav toggle (hamburger) focus ring
+.nav-toggle:focus-visible {
+  outline: 2px solid var(--howdy-accent-green);
+  outline-offset: 2px;
+}
+
+// FAQ details/summary focus ring
+.faq-question:focus-visible {
+  outline: 2px solid var(--howdy-accent-green);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+// Main wrapper — matches Framer root frame
+.main-container {
+  background-color: var(--howdy-bg-white);
+  width: 100%;
+  min-height: 100vh;
+  position: relative;
+  overflow-x: hidden;
+  padding: 0;
+  margin: 0;
+  transition: var(--howdy-transition);
+
+  @media (max-width: $howdy-xxl) {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  @media (max-width: $howdy-xl) {
+    max-width: 1024px;
+  }
+
+  @media (max-width: $howdy-lg) {
+    max-width: calc(100% - (var(--howdy-container-margin-lg) * 2));
+    margin: var(--howdy-container-margin-lg) auto;
+  }
+
+  @media (max-width: $howdy-md) {
+    max-width: calc(100% - (var(--howdy-container-margin-md) * 2));
+    margin: var(--howdy-container-margin-md) auto;
+  }
+
+  @media (max-width: $howdy-sm) {
+    max-width: calc(100% - (var(--howdy-container-margin-sm) * 2));
+    margin: var(--howdy-container-margin-sm) auto;
+  }
+
+  @media (max-width: $howdy-xs) {
+    max-width: calc(100% - (var(--howdy-container-margin-xs) * 2));
+    margin: var(--howdy-container-margin-xs) auto;
+  }
+}
+
+// Container fills the main wrapper
+.container {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+// Accessibility: Reduced motion support
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+
+  .logos-scroll {
+    animation: none !important;
+  }
+}