Alt Text: Giving Images a Voice for Everyone
Alt text gives an image a voice when it can't be seen. It's read by screen readers for accessibility and displayed if an image breaks. The footgun is writing "image of..." or leaving it blank; instead, describe the image's content and purpose.
Measuring Design System ROI: From Cost to Investment
Frame a design system not as a cost but as a force multiplier for your team's time. Calculate its ROI to show management how much money reusable components and clear standards will save.
Design System vs. Style Guide: The Parent and the Child
A Design System is the parent; a Style Guide is just one child. The system is a complete toolkit for building products, containing reusable components and code, used by large teams to maintain consistency.
The Golden Ratio in UI Design
The Golden Ratio (1.618) is a proportion from art and nature used to create visually harmonious UI. Apply it to set layout dimensions or create a typographic scale (e.g., a 26px header for 16px body text).
Modular Grid: Organizing UI with Cells, Not Just Columns
Think of a modular grid as spreadsheet cells for your UI. It extends a column grid with horizontal rows, creating a matrix of modules. It's ideal for repeating items like product cards or dashboard widgets.
Focal Point: You Can't Emphasize Everything
A focal point guides the user's eye by making one element dominant. To make something stand out, other elements must fade into the background. Use it to draw attention to a call-to-action or headline. The footgun is trying to emphasize everything at once.
Semantic Naming for Design Tokens
Don't name a token by its value (`blue-500`); name it by its job (`color.action.primary`). This decouples design intent from implementation, making systems scalable. It's key for theming and avoiding "lie" variables when designs change.
.png&w=3840&q=75)
Icon System Design: Build Once, Use Everywhere
Treat icons as reusable building blocks, not one-off graphics. A systematic setup in Figma ensures consistency and speeds up your entire design process. The footgun is skipping standardization, which creates tedious overrides and visual debt later on.
SVG: Code-Based, Infinitely Scalable Graphics
Think of SVG as HTML for graphics. It's an XML file with drawing instructions, not pixels, so images scale perfectly. It's ideal for logos and icons on responsive sites. The footgun: SVGs can contain JavaScript, posing a security risk (XSS) if not sanitized.
Rule of Thirds: Guide the Eye, Don't Just Center
Don't center your subject; place key elements along the lines or intersections of a 3x3 grid. This creates a more dynamic, visually interesting composition in photos and UI layouts. The footgun is treating it as a rigid law; sometimes centering is better.
RGB vs. HSL: Two Ways to Tell a Computer 'Color'
RGB tells a computer how to mix light (Red, Green, Blue), while HSL describes color how humans perceive it (Hue, Saturation, Lightness). Use RGB for brand colors and HSL for intuitive variations. The footgun is creating low-contrast UIs that are unreadable.
Cognitive Load: Don't Make Users Think (Too Hard)
Think of a user's brain like a computer with limited RAM; cognitive load is the processing power your UI demands. High load from cluttered interfaces slows users down, causing them to miss details or abandon tasks.
Jakob's Law: Don't Reinvent the UI Wheel
Users spend most of their time on other sites, so they expect yours to work like everything else they already know. Leverage familiar patterns for navigation, icons, and workflows.
Visual Hierarchy: Guiding the User's Eye
Visual hierarchy guides the user's eye by making important things look important. It uses contrast in size, color, and placement to create a path of importance, like a big headline versus small footer text.
Nielsen's 10 Heuristics: Rules of Thumb for UI Design
Nielsen's Heuristics are ten rules of thumb for evaluating if a design is user-friendly. Use them to spot usability issues in any interface, from apps to stovetops. The biggest mistake is treating them as strict laws, not flexible guidelines.
Design Token Transformation: One Source for All Platforms
A design token standard is a universal adapter for your style. It defines properties like color in a standard JSON format, which tools then transform into platform-specific code for iOS, Android, and web. The footgun is building bespoke transformation logic.
Reduce Time-to-Market with a Design System
A design system is a shared toolkit of pre-built UI components, not just a style guide. It lets teams build interfaces from a library of pre-coded parts, drastically cutting repetitive work. The footgun is treating it as a static document, not a living system.
A Design System Newsletter: Make Invisible Work Visible
A design system newsletter makes your team's invisible infrastructure work visible. Use it to announce component updates and share challenges, keeping stakeholders engaged.
Form Layout Best Practices
Guide users with a clear visual path, not a maze. A single-column layout with consistent spacing creates a streamlined data entry experience. Use it for everything from contact forms to complex UIs.
Component Naming: A Shared Language for UI
Think of naming conventions as a shared dictionary for your team. A name like `ButtonPrimary` should mean the same thing in Figma and in code, ensuring consistency.