# Ui-Design

## Pages

- [Affordances vs. Signifiers: The Invisible Language of Design](https://www.fernandoux.com/en/wiki/concepts/affordances-vs-signifiers/)
  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.
- [Breakpoint vs. Container Queries: Component-Based Design](https://www.fernandoux.com/en/wiki/concepts/breakpoint-vs-container-queries/)
  Learn the difference between designing for screen width (Breakpoints) and designing for container width (Container Queries), and how this revolutionizes component design.
- [Chunking in UI Flows: Intelligent Fragmentation](https://www.fernandoux.com/en/wiki/techniques/ui-flow-chunking/)
  Learn to apply chunking in your interfaces and user flows to break information into manageable blocks, reducing cognitive load and improving success rates.
- [Cognitive Load Management in UX](https://www.fernandoux.com/en/wiki/concepts/cognitive-load-management/)
  Learn to manage cognitive load in interface design to reduce user mental fatigue, improve information retention, and optimize the usability of your digital product.
- [Component API Design: Predictability and Flexibility](https://www.fernandoux.com/en/wiki/techniques/component-api-design/)
  Learn to design robust and consistent component APIs that facilitate handoff between design and development, reducing errors and accelerating product construction.
- [Component Prop Organization: Structure and Hierarchy](https://www.fernandoux.com/en/wiki/techniques/component-props-organization/)
  Learn to organize and prioritize your components' properties (props) to create a more intuitive user experience for the designers and developers consuming your design system.
- [Conflict Resolution in Collaboration: UI and UX](https://www.fernandoux.com/en/wiki/concepts/conflict-resolution/)
  Learn how to design interfaces and user flows that elegantly manage editing conflicts when multiple users work simultaneously on the same product.
- [Constraints and Auto Layout Logic in Figma](https://www.fernandoux.com/en/wiki/techniques/auto-layout-constraints/)
  Master advanced Constraints and Auto Layout logic in Figma to create responsive components and layouts that adapt perfectly to any screen size.
- [CRDT Basics for Product Designers](https://www.fernandoux.com/en/wiki/concepts/crdt-for-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.
- [Design System](https://www.fernandoux.com/en/wiki/concepts/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](https://www.fernandoux.com/en/wiki/concepts/perceived-performance-design/)
  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](https://www.fernandoux.com/en/wiki/concepts/prevention-vs-recovery-errors/)
  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](https://www.fernandoux.com/en/wiki/concepts/fittss-law/)
  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.
- [Haptic Feedback Principles: Feeling the Interface](https://www.fernandoux.com/en/wiki/concepts/haptic-feedback-principles/)
  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](https://www.fernandoux.com/en/wiki/concepts/hicks-law/)
  Learn how Hick's Law influences user decision-making and how to reduce response time by simplifying options in your digital interface.
- [Intrinsic Layout Decisions: Content vs. Boxes](https://www.fernandoux.com/en/wiki/techniques/intrinsic-layout-decisions/)
  Learn to make design decisions based on intrinsic logic to create layouts that intelligently adapt to content without relying on rigid grids.
- [Intrinsic Sizing Behavior in UI](https://www.fernandoux.com/en/wiki/concepts/intrinsic-sizing/)
  Learn how intrinsic sizing works in digital interface design to create components that intelligently adapt to their real content.
- [Latency Budgets in UX: Response Times](https://www.fernandoux.com/en/wiki/strategy/interaction-latency-budgets/)
  Learn to define and manage latency budgets in your digital product to ensure user interactions feel instantaneous and reactive.
- [Layout Decisions: Grid vs. Intrinsic](https://www.fernandoux.com/en/wiki/techniques/layout-grid-vs-intrinsic/)
  Learn to choose between a grid-based design (Grid) and a content-based design (Intrinsic) to create fluid and modern digital layouts.
- [Loading States: The Indulgent Wait in UX](https://www.fernandoux.com/en/wiki/techniques/loading-states/)
  Learn to design loading states that reduce user anxiety, communicate system progress, and improve the perceived speed of your digital product.
- [Mental Models of Undo and Redo: Time in the Interface](https://www.fernandoux.com/en/wiki/concepts/mental-models-undo-redo/)
  Learn how users perceive time travel in digital interfaces through Undo and Redo models, and how to design them for complex collaborative environments.
- [Mockups](https://www.fernandoux.com/en/wiki/artifacts/mockups/)
  A mockup is a static, high-fidelity representation of a product's interface. Unlike wireframes, mockups focus on the visual and aesthetic aspects, including colors, typography, images, and other graphic elements to simulate the final product's appearance.
- [Offline-First Flows: Designing for Disconnection](https://www.fernandoux.com/en/wiki/strategy/offline-first-flows/)
  Learn how to design applications that work offline by default, radically improving the user experience in any connectivity circumstance.
- [Optimistic Updates and Rollback UX](https://www.fernandoux.com/en/wiki/techniques/optimistic-updates-rollback/)
  Learn to design optimistic updates so your application feels instantaneous to the user, and how to manage network failures with elegant rollback experiences.
- [Real-Time Presence Modeling: Collaborative UX](https://www.fernandoux.com/en/wiki/concepts/presence-modeling/)
  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.
- [Responsive Scaling Strategies: Liquid UI](https://www.fernandoux.com/en/wiki/techniques/responsive-scaling-strategies/)
  Learn to choose and apply different responsive scaling strategies so your components and layouts adapt fluidly to any screen size.
- [Safeguards for Destructive Actions: Positive Friction](https://www.fernandoux.com/en/wiki/techniques/destructive-action-safeguards/)
  Learn to design safeguards and intentional friction mechanisms to prevent your users from accidentally performing irreversible actions in your digital product.
- [Skeleton VS Optimistic UI: Loading Strategies](https://www.fernandoux.com/en/wiki/concepts/skeleton-vs-optimistic-ui/)
  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](https://www.fernandoux.com/en/wiki/concepts/status-awareness/)
  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](https://www.fernandoux.com/en/wiki/concepts/command-pattern/)
  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 Aliasing and Inheritance Strategy](https://www.fernandoux.com/en/wiki/techniques/token-aliasing-inheritance/)
  Learn to implement a design token aliasing and inheritance strategy to create highly flexible, maintainable systems prepared for multiple themes.
- [Token Architecture (Global vs. Semantic vs. Component)](https://www.fernandoux.com/en/wiki/concepts/token-architecture/)
  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](https://www.fernandoux.com/en/wiki/concepts/token-parity/)
  Learn how to achieve design token parity across Web, iOS, and Android to ensure a consistent brand experience and accelerate multiplatform development.
- [Variables vs. Styles in Figma: Strategies and Trade-offs](https://www.fernandoux.com/en/wiki/concepts/variables-vs-styles/)
  Discover the key differences between Figma Variables and Figma Styles to decide which is best for your design system and prototyping workflows.
- [Variant Explosion Control (Wrangling Systems)](https://www.fernandoux.com/en/wiki/techniques/variant-explosion-control/)
  Learn to optimize and simplify your Figma component architecture to avoid unmanageable variant explosions and improve the performance of your design files.
- [Visual Hierarchy VS DOM Hierarchy: Accessibility](https://www.fernandoux.com/en/wiki/concepts/visual-vs-dom-hierarchy/)
  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.
- [Wireframes](https://www.fernandoux.com/en/wiki/artifacts/wireframes/)
  A wireframe is a low-fidelity visual schematic of an interface, similar to an architect's blueprint. It focuses on structure, content hierarchy, and functionality, deliberately ignoring visual elements like colors, typography, or images.


---

Source: https://www.fernandoux.com/tags/ui-design/