Concepts
Core UX and product design concepts explained clearly — from mental models and affordances to cognitive load and design thinking.
Library
Accessibility in UX: Designing for Everyone
Accessibility in UX means designing digital products that are usable by everyone, including people with disabilities.
Affordances and Signifiers: Making UI Self-Explanatory
An affordance is what an object actually invites you to do; a signifier communicates that affordance to the user.
Affordances vs. Signifiers: The Invisible Language of Design
Discover the crucial difference between Affordances (what an object can do) and Signifiers (the signal that tells us how to do it) to create intuitive and easy-to-use interfaces.
ARIA vs. Semantic HTML: The Golden Rule
Understand the difference between native semantic HTML and ARIA attributes, and learn why the first rule of accessibility is to not use ARIA if a native alternative exists.
Atomic Design: Building UIs from the Ground Up
Atomic design is a methodology for creating reusable component libraries by breaking interfaces into five hierarchical levels: atoms, molecules, organisms, templates, and pages.
Breakpoint vs. Container Queries: Component-Based Design
Learn the difference between designing for screen width (Breakpoints) and designing for container width (Container Queries), and how this revolutionizes component design.
Cognitive Load Management in UX
Learn to manage cognitive load in interface design to reduce user mental fatigue, improve information retention, and optimize the usability of your digital product.
Cognitive Load: Why Simpler Is Always Better
A measure of mental effort required to use a product; lower cognitive load means easier to use.
Conflict Resolution in Collaboration: UI and UX
Learn how to design interfaces and user flows that elegantly manage editing conflicts when multiple users work simultaneously on the same product.
CRDT Basics for Product Designers
Discover why CRDTs are the technology that enables applications like Figma or Notion, and how they affect the way you design collaborative and offline-first interfaces.
Dark Patterns: What They Are and Why to Avoid Them
Dark patterns are deceptive design techniques that trick users into taking actions against their interests for benefit to the business.
Design Principles
Design Principles are a set of brief, clear, and memorable guidelines that articulate the core values that should guide a team's design work.
Design System
A Design System is a collection of reusable UI components, guided by clear standards (principles, style guides), that enables teams to design and build digital products in a coherent and efficient manner.
Designing for Perceived Performance: Faster Than Light
Learn how design can make your application feel faster than it really is, using cognitive psychology techniques and visual tricks.
Error Prevention vs. Recovery: A Forgiving Interface
Learn to design interfaces that prevent user errors before they occur and offer clear recovery paths when failure is inevitable.
Fitts's Law: Reach and Ergonomics in UI
Learn how Fitts's Law influences the speed and accuracy of user movement to select targets in a digital interface, improving the ergonomics of your designs.
Foundations of the Accessibility Tree: How Machines See
Learn what the Accessibility Tree is and why it is the foundation of how screen readers and other assistive technologies interpret your interface design.
Gestalt Principles for UX Designers
Gestalt principles describe how humans naturally perceive and organize visual information into meaningful patterns and groups.
Haptic Feedback Principles: Feeling the Interface
Learn how designing tactile (haptic) responses can improve interaction speed, accessibility, and user delight in your mobile applications.
Hick's Law: Decision and Response Time
Learn how Hick's Law influences user decision-making and how to reduce response time by simplifying options in your digital interface.
Inclusive Design vs. Accessible Design: Why Both Matter
Accessible design removes barriers for people with disabilities; inclusive design considers the broadest possible range of human diversity from the start.
Information Architecture
Information Architecture (IA) is the practice of deciding how to organize, structure, and label the content of a digital product in a way that is understandable and allows users to find information and complete tasks efficiently.
Intrinsic Sizing Behavior in UI
Learn how intrinsic sizing works in digital interface design to create components that intelligently adapt to their real content.
Mental Models of Undo and Redo: Time in the Interface
Learn how users perceive time travel in digital interfaces through Undo and Redo models, and how to design them for complex collaborative environments.
Mental Models: Designing for How Users Think
A mental model is the internal framework users build about how a system works, shaped by past experiences and expectations.
Mobile-First Design: Principles and Practice
Mobile-first design is an approach that prioritizes designing for mobile devices first, then progressively enhancing for larger screens.
Real-Time Presence Modeling: Collaborative UX
Learn to design effective presence indicators (cursors, avatars, activity) so that your users feel they are working together in real-time within your digital product.
Skeleton VS Optimistic UI: Loading Strategies
Learn the difference between Skeleton Screens and Optimistic UI, and how to choose the best loading strategy to improve the perceived performance of your digital product.
Status Awareness in UI
Learn to design interfaces that keep the user always informed about the current state of the system and each component to reduce uncertainty and errors.
The Command Pattern in Product Design
Move from designing static screens to designing dynamic flows based on encapsulated actions through the Command Pattern, the technical foundation of modern and collaborative interfaces.
Token Architecture (Global vs. Semantic vs. Component)
Discover how to structure a robust design token architecture using the three-layer model (Global, Semantic, and Component) to create scalable and maintainable design systems.
Token Parity Across Multiple Platforms
Learn how to achieve design token parity across Web, iOS, and Android to ensure a consistent brand experience and accelerate multiplatform development.
User-Centered Design: The Foundation of Everything
An approach where user research and user needs drive every design decision from start to finish.
UX vs UI Design: What's the Real Difference?
UX focuses on how a product works and feels, while UI focuses on how it looks visually.
Variables vs. Styles in Figma: Strategies and Trade-offs
Discover the key differences between Figma Variables and Figma Styles to decide which is best for your design system and prototyping workflows.
Visual Hierarchy VS DOM Hierarchy: Accessibility
Learn the difference between what the user sees and what the browser reads, and how to align visual hierarchy with the DOM for flawless accessibility in your product.
Visual Hierarchy: Guiding Users Through Your Design
Visual hierarchy is the arrangement of design elements to guide users' attention toward the most important information or actions.