A collection of practical design principles and tips I've picked up over the years working on product design.
Before opening Figma, write down the user problem you're solving. A clear problem statement keeps the design focused and prevents feature creep.
→ Design Thinking 101 — Nielsen Norman GroupStick to multiples of 8 for all spacing and sizing. It creates visual consistency, aligns to most device grids, and makes developer handoff painless.
→ The 8-Point Grid System — Spec.fmUse no more than 4–5 font sizes in a project. A constrained type scale creates hierarchy without visual noise and keeps your UI feeling cohesive.
→ Type Scale — A Visual CalculatorEmpty states are a user's first impression. Design them with helpful guidance, illustrations, or calls to action — not just blank screens.
→ The Role of Empty States in UX — Nielsen Norman GroupReserve saturated colors for interactive elements and status indicators. Let neutral tones do the heavy lifting so accent colors carry meaning.
→ Using Color to Enhance Your Design — Nielsen Norman GroupLorem ipsum hides layout problems. Use real names, real data lengths, and edge cases early. Your design should survive the messiness of actual content.
→ Don't Make Me Think by Steve KrugCheck color contrast ratios, use semantic HTML, and ensure keyboard navigation works. Accessibility isn't a feature — it's a quality baseline.
→ Introduction to Web Accessibility — W3C WAIEvery extra element on screen competes for attention. Remove anything that doesn't directly help the user complete their task. When in doubt, simplify.
→ Minimize Cognitive Load — Nielsen Norman GroupThe words in your UI matter more than the layout. Clear, concise microcopy reduces confusion and builds trust faster than any visual polish.
→ Writing for the Web — Nielsen Norman GroupIcons should be simple and intuitive so users can understand them instantly without relying on tooltips.
→ Jakob Nielsen's usability heuristics: "Recognition rather than recall"If users must hover over an icon to understand it, the design introduces unnecessary cognitive load and slows interaction.
→ Don't Make Me Think by Steve KrugAvoid abstract or unfamiliar icons for key actions — users should not have to interpret meaning.
→ Nielsen Norman Group research on icon usabilityUse widely recognized patterns (e.g., search, menu, delete) to leverage existing mental models.
→ Consistency and standards heuristic by Jakob NielsenWhen an icon is not universally clear, pair it with a label to improve comprehension and accessibility.
→ Nielsen Norman Group — Icon Usability guidelinesTooltips should support, not replace, clarity. Relying on them for basic understanding indicates weak visual communication.
→ About Face: The Essentials of Interaction Design by Alan CooperInconsistent icon usage across screens creates confusion and reduces user trust.
→ The Design of Everyday Things by Don Norman