Intermediate concepts in Design & UX, page 2
CSS clamp(): Fluid Sizing Without Media Queries
CSS clamp() sets guardrails for a value, letting it scale fluidly but never going outside a min/max bound. It's ideal for responsive typography, allowing font-size to grow with the viewport. The footgun: the preferred value is ignored at extreme screen sizes.
Audience Segmentation: Stop Shouting at Everyone
Instead of one message for your entire market, audience segmentation creates tailored messages for specific subgroups. It's used in email and ads to boost relevance and profit. The footgun is over-segmenting into groups too small to be profitable.
Color Schemes: The Logic of Color Harmony
A color scheme is a logical combination of colors to achieve a goal, not just a random palette. It's used in UI design for brand consistency, in data viz to encode information, and in safety systems for high visibility.
User Interviews: Uncover Needs, Not Just Test Designs
User interviews are structured conversations to understand the 'why' behind user actions, not just 'what' they do. Use them in discovery to learn user motivations and pain points, informing personas and journey maps.
WCAG Color Contrast: A Readability Score, Not an Opinion
WCAG color contrast is a mathematical ratio ensuring text is readable for people with vision impairments. Use it for all text and UI elements. The footgun is only testing on a good monitor or forgetting that large text has a lower 3:1 requirement.
Keyword Research: Find What Users Actually Search For
Keyword research is reverse-engineering user demand. Instead of guessing, you find the exact phrases people search for. It's crucial for SEO and content strategy, ensuring your work meets real needs.
Research Hypothesis: A Testable Bet on Reality
A research hypothesis is a testable bet about user behavior, not just a guess. It frames A/B tests by turning an observation into a statement you can prove or disprove. The footgun is confusing it with a theory; a hypothesis is a starting point, not.
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.
Social Listening: Tracking Unsolicited Customer Feedback
Social listening is like being a fly on the wall, hearing what customers say when you're not asking. Marketers use it to track brand sentiment and find pain points. The footgun is just counting mentions instead of analyzing the 'why' behind them.
Screener Surveys: Your Filter for Valid User Research
A screener survey is your filter for finding the right research participants. It ensures your study includes representative users, not just anyone, by asking questions about their behaviors and demographics.
.png&w=1600&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.
Focus Groups: A Guided Conversation, Not a Survey
A focus group is like a guided dinner party for your product. You gather a small, specific group to discuss a concept, revealing qualitative insights and group dynamics that one-on-one interviews miss. It's for exploring 'why,' not measuring 'how many.'
How to Choose a UX Research Method
Map your research question to a 3D space: what people say vs. do (attitudinal vs. behavioral), and direct observation vs. indirect measurement (qual vs. quant). This helps you select the right tool, from surveys to A/B tests.
UX Sampling: Convenience vs. Probability
Convenience sampling is fast and cheap—ask whoever is easy to reach. Probability sampling is rigorous—ask a random slice of your population. Use convenience for quick usability tests, but probability for high-stakes decisions.
Controlled vs. Uncontrolled Components
A controlled component is a puppet; its parent pulls the strings via props. An uncontrolled one manages its own state. This pattern is key for coordinating siblings, like ensuring only one panel in an accordion is open.
Pilot Studies: A Dress Rehearsal for User Research
A pilot study is a dress rehearsal for your user research. You run 1-2 practice sessions to find flaws in your study design, not the product. It's crucial for remote tests or high-stakes projects.
Component-Driven Development: Build UIs Bottom-Up
Component-Driven Development (CDD) builds UIs bottom-up, like assembling a car from its engine and wheels. It's used to manage complex UIs by creating small, independent components first. The footgun is building components too coupled to app-specific logic.
Style Encapsulation with Shadow DOM
Shadow DOM creates a private DOM tree for a component, acting like a one-way mirror for CSS. This prevents style collisions in complex UIs, ensuring a button's CSS doesn't break a header.
Semantic Versioning: A Contract for Your Code's Evolution
Semantic Versioning is a contract for your code. The MAJOR.MINOR.PATCH format signals if an update is a breaking change, a new feature, or a bug fix. It's vital for managing dependencies safely. The footgun: SemVer is meaningless without a defined public API.
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.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles