# Diseño-Ui ## Pages - [Actualizaciones Optimistas y UX de Rollback](https://www.fernandoux.com/es/wiki/techniques/optimistic-updates-rollback/) Aprenda a diseñar actualizaciones optimistas para que su aplicación se sienta instantánea al usuario, y cómo gestionar los fallos de red con experiencias de rollback elegantes. - [Actualizaciones Optimistas y UX de Rollback](https://www.fernandoux.com/es/wiki/tecnicas/optimistic-updates-rollback/) Aprenda a diseñar actualizaciones optimistas para que su aplicación se sienta instantánea al usuario, y cómo gestionar los fallos de red con experiencias de rollback elegantes. - [Affordances vs Signifiers: El Lenguaje Invisible del Diseño](https://www.fernandoux.com/es/wiki/conceptos/affordances-vs-signifiers/) Descubre la diferencia crucial entre Affordances (lo que un objeto puede hacer) y Signifiers (la señal que nos dice cómo hacerlo) para crear interfaces intuitivas y fáciles de usar. - [Affordances vs Signifiers: El Lenguaje Invisible del Diseño](https://www.fernandoux.com/es/wiki/concepts/affordances-vs-signifiers/) Descubre la diferencia crucial entre Affordances (lo que un objeto puede hacer) y Signifiers (la señal que nos dice cómo hacerlo) para crear interfaces intuitivas y fáciles de usar. - [Arquitectura de Tokens (Global vs Semántico vs Componente)](https://www.fernandoux.com/es/wiki/conceptos/arquitectura-de-tokens/) Descubre cómo estructurar una arquitectura de tokens de diseño robusta utilizando el modelo de tres capas (Global, Semántico y Componente) para crear sistemas de diseño escalables y mantenibles. - [Arquitectura de Tokens (Global vs Semántico vs Componente)](https://www.fernandoux.com/es/wiki/concepts/token-architecture/) Descubre cómo estructurar una arquitectura de tokens de diseño robusta utilizando el modelo de tres capas (Global, Semántico y Componente) para crear sistemas de diseño escalables y mantenibles. - [Básicos de CRDT para Diseñadores de Producto](https://www.fernandoux.com/es/wiki/conceptos/crdt-para-disenadores/) Descubra por qué los CRDT son la tecnología que permite aplicaciones como Figma o Notion, y cómo afectan su forma de diseñar interfaces colaborativas y offline-first. - [Básicos de CRDT para Diseñadores de Producto](https://www.fernandoux.com/es/wiki/concepts/crdt-for-designers/) Descubra por qué los CRDT son la tecnología que permite aplicaciones como Figma o Notion, y cómo afectan su forma de diseñar interfaces colaborativas y offline-first. - [Breakpoint VS Container Queries: Diseño Basado en Componentes](https://www.fernandoux.com/es/wiki/conceptos/breakpoint-vs-container-queries/) Aprenda la diferencia entre diseñar para el ancho de la pantalla (Breakpoints) y diseñar para el ancho del contenedor (Container Queries), y cómo esto revoluciona el diseño de componentes. - [Breakpoint VS Container Queries: Diseño Basado en Componentes](https://www.fernandoux.com/es/wiki/concepts/breakpoint-vs-container-queries/) Aprenda la diferencia entre diseñar para el ancho de la pantalla (Breakpoints) y diseñar para el ancho del contenedor (Container Queries), y cómo esto revoluciona el diseño de componentes. - [Chunking en los Flujos de UI: Fragmentación Inteligente](https://www.fernandoux.com/es/wiki/techniques/ui-flow-chunking/) Aprenda a aplicar el chunking en sus interfaces y flujos de usuario para fragmentar la información en bloques manejables, reduciendo la carga cognitiva y mejorando la tasa de éxito. - [Chunking en los Flujos de UI: Fragmentación Inteligente](https://www.fernandoux.com/es/wiki/tecnicas/chunking-flujos-ui/) Aprenda a aplicar el chunking en sus interfaces y flujos de usuario para fragmentar la información en bloques manejables, reduciendo la carga cognitiva y mejorando la tasa de éxito. - [Comportamiento de Intrinsic Sizing en UI](https://www.fernandoux.com/es/wiki/conceptos/intrinsic-sizing/) Aprenda cómo funciona el dimensionamiento intrínseco en el diseño de interfaces digitales para crear componentes que se adapten de forma inteligente a su contenido real. - [Comportamiento de Intrinsic Sizing en UI](https://www.fernandoux.com/es/wiki/concepts/intrinsic-sizing/) Aprenda cómo funciona el dimensionamiento intrínseco en el diseño de interfaces digitales para crear componentes que se adapten de forma inteligente a su contenido real. - [Conciencia de Estado (State Awareness) en UI](https://www.fernandoux.com/es/wiki/conceptos/conciencia-de-estado/) Aprenda a diseñar interfaces que mantengan al usuario siempre informado sobre el estado actual del sistema y de cada componente para reducir la incertidumbre y los errores. - [Conciencia de Estado (State Awareness) en UI](https://www.fernandoux.com/es/wiki/concepts/status-awareness/) Aprenda a diseñar interfaces que mantengan al usuario siempre informado sobre el estado actual del sistema y de cada componente para reducir la incertidumbre y los errores. - [Control de Explosión de Variantes (Wrangling Systems)](https://www.fernandoux.com/es/wiki/techniques/variant-explosion-control/) Aprenda a optimizar y simplificar la arquitectura de sus componentes de Figma para evitar una explosión de variantes inmanejable y mejorar el rendimiento de sus archivos de diseño. - [Control de Explosión de Variantes (Wrangling Systems)](https://www.fernandoux.com/es/wiki/tecnicas/control-explosion-variantes/) Aprenda a optimizar y simplificar la arquitectura de sus componentes de Figma para evitar una explosión de variantes inmanejable y mejorar el rendimiento de sus archivos de diseño. - [Decisiones de Intrinsic Layout: Contenido VS Cajas](https://www.fernandoux.com/es/wiki/techniques/intrinsic-layout-decisions/) Aprenda a tomar decisiones de diseño basadas en la lógica intrínseca para crear layouts que se adapten de forma inteligente al contenido sin depender de rejillas rígidas. - [Decisiones de Intrinsic Layout: Contenido VS Cajas](https://www.fernandoux.com/es/wiki/tecnicas/intrinsic-layout-decisions/) Aprenda a tomar decisiones de diseño basadas en la lógica intrínseca para crear layouts que se adapten de forma inteligente al contenido sin depender de rejillas rígidas. - [Decisiones de Layout: Grid vs Intrinsic](https://www.fernandoux.com/es/wiki/techniques/layout-grid-vs-intrinsic/) Aprenda a elegir entre un diseño basado en rejillas (Grid) y uno basado en contenido (Intrinsic) para crear layouts digitales fluidos y modernos. - [Decisiones de Layout: Grid vs Intrinsic](https://www.fernandoux.com/es/wiki/tecnicas/layout-grid-vs-intrinsic/) Aprenda a elegir entre un diseño basado en rejillas (Grid) y uno basado en contenido (Intrinsic) para crear layouts digitales fluidos y modernos. - [Diseño de APIs de Componentes: Predictibilidad y Flexibilidad](https://www.fernandoux.com/es/wiki/techniques/component-api-design/) Aprenda a diseñar APIs de componentes robustas y coherentes que faciliten el handoff entre diseño y desarrollo, reduciendo errores y acelerando la construcción de productos. - [Diseño de APIs de Componentes: Predictibilidad y Flexibilidad](https://www.fernandoux.com/es/wiki/tecnicas/diseno-apis-componentes/) Aprenda a diseñar APIs de componentes robustas y coherentes que faciliten el handoff entre diseño y desarrollo, reduciendo errores y acelerando la construcción de productos. - [Diseño para el Rendimiento Percibido: Más Rápido que la Luz](https://www.fernandoux.com/es/wiki/conceptos/perceived-performance-design/) Aprenda cómo el diseño puede hacer que su aplicación se sienta más rápida de lo que realmente es, utilizando técnicas de psicología cognitiva y trucos visuales. - [Diseño para el Rendimiento Percibido: Más Rápido que la Luz](https://www.fernandoux.com/es/wiki/concepts/perceived-performance-design/) Aprenda cómo el diseño puede hacer que su aplicación se sienta más rápida de lo que realmente es, utilizando técnicas de psicología cognitiva y trucos visuales. - [El Command Pattern en el Diseño de Producto](https://www.fernandoux.com/es/wiki/conceptos/command-pattern/) Pase de diseñar pantallas estáticas a diseñar flujos dinámicos basados en acciones encapsuladas mediante el Command Pattern, la base técnica de las interfaces modernas y colaborativas. - [El Command Pattern en el Diseño de Producto](https://www.fernandoux.com/es/wiki/concepts/command-pattern/) Pase de diseñar pantallas estáticas a diseñar flujos dinámicos basados en acciones encapsuladas mediante el Command Pattern, la base técnica de las interfaces modernas y colaborativas. - [Estados de Carga: La Espera Indulgente en UX](https://www.fernandoux.com/es/wiki/techniques/loading-states/) Aprenda a diseñar estados de carga que reduzcan la ansiedad del usuario, comuniquen el progreso del sistema y mejoren la percepción de velocidad de su producto digital. - [Estados de Carga: La Espera Indulgente en UX](https://www.fernandoux.com/es/wiki/tecnicas/estados-de-carga/) Aprenda a diseñar estados de carga que reduzcan la ansiedad del usuario, comuniquen el progreso del sistema y mejoren la percepción de velocidad de su producto digital. - [Estrategia de Aliasing y Herencia de Tokens](https://www.fernandoux.com/es/wiki/techniques/token-aliasing-inheritance/) Aprenda a implementar una estrategia de aliasing y herencia de tokens de diseño para crear sistemas altamente flexibles, mantenibles y preparados para múltiples temas. - [Estrategia de Aliasing y Herencia de Tokens](https://www.fernandoux.com/es/wiki/tecnicas/aliasing-herencia-tokens/) Aprenda a implementar una estrategia de aliasing y herencia de tokens de diseño para crear sistemas altamente flexibles, mantenibles y preparados para múltiples temas. - [Estrategias de Escalado Responsivo: UI Líquida](https://www.fernandoux.com/es/wiki/techniques/responsive-scaling-strategies/) Aprenda a elegir y aplicar diferentes estrategias de escalado responsivo para que sus componentes y layouts se adapten con fluidez a cualquier tamaño de pantalla. - [Estrategias de Escalado Responsivo: UI Líquida](https://www.fernandoux.com/es/wiki/tecnicas/estrategias-de-escalado-responsivo/) Aprenda a elegir y aplicar diferentes estrategias de escalado responsivo para que sus componentes y layouts se adapten con fluidez a cualquier tamaño de pantalla. - [Flujos Offline-First: Diseñar para la Desconexión](https://www.fernandoux.com/es/wiki/estrategia/flujos-offline-first/) Aprenda cómo diseñar aplicaciones que funcionen sin conexión a internet por defecto, mejorando radicalmente la experiencia del usuario en cualquier circunstancia de conectividad. - [Flujos Offline-First: Diseñar para la Desconexión](https://www.fernandoux.com/es/wiki/strategy/offline-first-flows/) Aprenda cómo diseñar aplicaciones que funcionen sin conexión a internet por defecto, mejorando radicalmente la experiencia del usuario en cualquier circunstancia de conectividad. - [Gestión de Carga Cognitiva en UX](https://www.fernandoux.com/es/wiki/conceptos/gestion-de-carga-cognitiva/) Aprenda a gestionar la carga cognitiva en el diseño de interfaces para reducir la fatiga mental del usuario, mejorar la retención de información y optimizar la usabilidad de su producto digital. - [Gestión de Carga Cognitiva en UX](https://www.fernandoux.com/es/wiki/concepts/cognitive-load-management/) Aprenda a gestionar la carga cognitiva en el diseño de interfaces para reducir la fatiga mental del usuario, mejorar la retención de información y optimizar la usabilidad de su producto digital. - [Jerarquía Visual VS Jerarquía del DOM: Accesibilidad](https://www.fernandoux.com/es/wiki/conceptos/visual-vs-dom-hierarchy/) Aprenda la diferencia entre lo que el usuario ve y lo que el navegador lee, y cómo alinear la jerarquía visual con el DOM para una accesibilidad impecable en su producto. - [Jerarquía Visual VS Jerarquía del DOM: Accesibilidad](https://www.fernandoux.com/es/wiki/concepts/visual-vs-dom-hierarchy/) Aprenda la diferencia entre lo que el usuario ve y lo que el navegador lee, y cómo alinear la jerarquía visual con el DOM para una accesibilidad impecable en su producto. - [La Ley de Fitts: Alcance y Ergonomía en UI](https://www.fernandoux.com/es/wiki/conceptos/ley-de-fitts/) Aprenda cómo la Ley de Fitts influye en la velocidad y precisión del movimiento del usuario para seleccionar objetivos en una interfaz digital, mejorando la ergonomía de sus diseños. - [La Ley de Fitts: Alcance y Ergonomía en UI](https://www.fernandoux.com/es/wiki/concepts/fittss-law/) Aprenda cómo la Ley de Fitts influye en la velocidad y precisión del movimiento del usuario para seleccionar objetivos en una interfaz digital, mejorando la ergonomía de sus diseños. - [La Ley de Hick: Decisión y Tiempo de Respuesta](https://www.fernandoux.com/es/wiki/conceptos/ley-de-hick/) Aprenda cómo la Ley de Hick influye en la toma de decisiones del usuario y cómo reducir el tiempo de respuesta simplificando las opciones en su interfaz digital. - [La Ley de Hick: Decisión y Tiempo de Respuesta](https://www.fernandoux.com/es/wiki/concepts/hicks-law/) Aprenda cómo la Ley de Hick influye en la toma de decisiones del usuario y cómo reducir el tiempo de respuesta simplificando las opciones en su interfaz digital. - [Lógica de Constraints y Auto Layout en Figma](https://www.fernandoux.com/es/wiki/techniques/auto-layout-constraints/) Domine la lógica avanzada de Constraints y Auto Layout en Figma para crear componentes y layouts responsivos que se adapten perfectamente a cualquier tamaño de pantalla. - [Lógica de Constraints y Auto Layout en Figma](https://www.fernandoux.com/es/wiki/tecnicas/constraints-auto-layout/) Domine la lógica avanzada de Constraints y Auto Layout en Figma para crear componentes y layouts responsivos que se adapten perfectamente a cualquier tamaño de pantalla. - [Mockups](https://www.fernandoux.com/es/wiki/artefactos/mockups/) Un mockup es una representación estática y de alta fidelidad de la interfaz de un producto. A diferencia de los wireframes, los mockups se centran en el aspecto visual y estético, incluyendo colores, tipografías, imágenes y otros elementos gráficos para simular la apariencia del producto final. - [Mockups](https://www.fernandoux.com/es/wiki/artifacts/mockups/) Un mockup es una representación estática y de alta fidelidad de la interfaz de un producto. A diferencia de los wireframes, los mockups se centran en el aspecto visual y estético, incluyendo colores, tipografías, imágenes y otros elementos gráficos para simular la apariencia del producto final. - [Modelado de Presencia en Tiempo Real: UX Colaborativo](https://www.fernandoux.com/es/wiki/conceptos/modelado-de-presencia/) Aprenda a diseñar indicadores de presencia efectivos (cursores, avatares, actividad) para que sus usuarios sientan que trabajan juntos en tiempo real dentro de su producto digital. - [Modelado de Presencia en Tiempo Real: UX Colaborativo](https://www.fernandoux.com/es/wiki/concepts/presence-modeling/) Aprenda a diseñar indicadores de presencia efectivos (cursores, avatares, actividad) para que sus usuarios sientan que trabajan juntos en tiempo real dentro de su producto digital. - [Modelos Mentales de Undo y Redo: El Tiempo en la Interfaz](https://www.fernandoux.com/es/wiki/conceptos/mental-models-undo-redo/) Aprenda cómo los usuarios perciben el viaje en el tiempo en las interfaces digitales mediante los modelos de Undo y Redo, y cómo diseñarlos para entornos colaborativos complejos. - [Modelos Mentales de Undo y Redo: El Tiempo en la Interfaz](https://www.fernandoux.com/es/wiki/concepts/mental-models-undo-redo/) Aprenda cómo los usuarios perciben el viaje en el tiempo en las interfaces digitales mediante los modelos de Undo y Redo, y cómo diseñarlos para entornos colaborativos complejos. - [Organización de Props de Componentes: Estructura y Jerarquía](https://www.fernandoux.com/es/wiki/techniques/component-props-organization/) Aprenda a organizar y priorizar las propiedades (props) de sus componentes para crear una experiencia de usuario más intuitiva para los diseñadores y desarrolladores que consumen su sistema de diseño. - [Organización de Props de Componentes: Estructura y Jerarquía](https://www.fernandoux.com/es/wiki/tecnicas/organizacion-props-componentes/) Aprenda a organizar y priorizar las propiedades (props) de sus componentes para crear una experiencia de usuario más intuitiva para los diseñadores y desarrolladores que consumen su sistema de diseño. - [Paridad de Tokens en Múltiples Plataformas](https://www.fernandoux.com/es/wiki/conceptos/paridad-de-tokens/) Aprenda cómo lograr la paridad de tokens de diseño entre Web, iOS y Android para garantizar una experiencia de marca coherente y acelerar el desarrollo multiplataforma. - [Paridad de Tokens en Múltiples Plataformas](https://www.fernandoux.com/es/wiki/concepts/token-parity/) Aprenda cómo lograr la paridad de tokens de diseño entre Web, iOS y Android para garantizar una experiencia de marca coherente y acelerar el desarrollo multiplataforma. - [Presupuestos de Latencia en UX: Tiempos de Respuesta](https://www.fernandoux.com/es/wiki/estrategia/interaction-latency-budgets/) Aprenda a definir y gestionar presupuestos de latencia en su producto digital para asegurar que las interacciones del usuario se sientan instantáneas y reactivas. - [Presupuestos de Latencia en UX: Tiempos de Respuesta](https://www.fernandoux.com/es/wiki/strategy/interaction-latency-budgets/) Aprenda a definir y gestionar presupuestos de latencia en su producto digital para asegurar que las interacciones del usuario se sientan instantáneas y reactivas. - [Prevención vs Recuperación de Errores: Una Interfaz Indulgente](https://www.fernandoux.com/es/wiki/conceptos/prevencion-vs-recuperacion-errores/) Aprenda a diseñar interfaces que prevengan los errores del usuario antes de que ocurran y que ofrezcan caminos claros de recuperación cuando el fallo es inevitable. - [Prevención vs Recuperación de Errores: Una Interfaz Indulgente](https://www.fernandoux.com/es/wiki/concepts/prevention-vs-recovery-errors/) Aprenda a diseñar interfaces que prevengan los errores del usuario antes de que ocurran y que ofrezcan caminos claros de recuperación cuando el fallo es inevitable. - [Principios de Feedback Háptico: Sentir la Interfaz](https://www.fernandoux.com/es/wiki/conceptos/principios-feedback-haptico/) Aprenda cómo el diseño de respuestas táctiles (hápticas) puede mejorar la velocidad de interacción, la accesibilidad y el deleite del usuario en sus aplicaciones móviles. - [Principios de Feedback Háptico: Sentir la Interfaz](https://www.fernandoux.com/es/wiki/concepts/haptic-feedback-principles/) Aprenda cómo el diseño de respuestas táctiles (hápticas) puede mejorar la velocidad de interacción, la accesibilidad y el deleite del usuario en sus aplicaciones móviles. - [Resolución de Conflictos en Colaboración: UI y UX](https://www.fernandoux.com/es/wiki/conceptos/resolucion-de-conflictos/) Aprenda cómo diseñar interfaces y flujos de usuario que gestionen de forma elegante los conflictos de edición cuando varios usuarios trabajan simultáneamente en el mismo producto. - [Resolución de Conflictos en Colaboración: UI y UX](https://www.fernandoux.com/es/wiki/concepts/conflict-resolution/) Aprenda cómo diseñar interfaces y flujos de usuario que gestionen de forma elegante los conflictos de edición cuando varios usuarios trabajan simultáneamente en el mismo producto. - [Salvaguardas para Acciones Destructivas: Fricción Positiva](https://www.fernandoux.com/es/wiki/techniques/destructive-action-safeguards/) Aprenda a diseñar salvaguardas y mecanismos de fricción intencionada para evitar que sus usuarios realicen acciones irreversibles de forma accidental en su producto digital. - [Salvaguardas para Acciones Destructivas: Fricción Positiva](https://www.fernandoux.com/es/wiki/tecnicas/salvaguardas-acciones-destructivas/) Aprenda a diseñar salvaguardas y mecanismos de fricción intencionada para evitar que sus usuarios realicen acciones irreversibles de forma accidental en su producto digital. - [Sistema de Diseño](https://www.fernandoux.com/es/wiki/conceptos/sistema-de-diseno/) Un Sistema de Diseño es una colección de componentes de UI reutilizables, guiada por estándares claros (principios, guías de estilo), que permite a los equipos diseñar y construir productos digitales de manera coherente y eficiente. - [Sistema de Diseño](https://www.fernandoux.com/es/wiki/concepts/design-system/) Un Sistema de Diseño es una colección de componentes de UI reutilizables, guiada por estándares claros (principios, guías de estilo), que permite a los equipos diseñar y construir productos digitales de manera coherente y eficiente. - [Skeleton VS Optimistic UI: Estrategias de Carga](https://www.fernandoux.com/es/wiki/conceptos/skeleton-vs-optimistic-ui/) Aprenda la diferencia entre Skeleton Screens y Optimistic UI, y cómo elegir la mejor estrategia de carga para mejorar el rendimiento percibido de su producto digital. - [Skeleton VS Optimistic UI: Estrategias de Carga](https://www.fernandoux.com/es/wiki/concepts/skeleton-vs-optimistic-ui/) Aprenda la diferencia entre Skeleton Screens y Optimistic UI, y cómo elegir la mejor estrategia de carga para mejorar el rendimiento percibido de su producto digital. - [Variables vs Styles en Figma: Estrategias y Tradeoffs](https://www.fernandoux.com/es/wiki/conceptos/variables-vs-styles/) Descubra las diferencias clave entre Figma Variables y Figma Styles para decidir cuál es mejor para su sistema de diseño y flujos de trabajo de prototipado. - [Variables vs Styles en Figma: Estrategias y Tradeoffs](https://www.fernandoux.com/es/wiki/concepts/variables-vs-styles/) Descubra las diferencias clave entre Figma Variables y Figma Styles para decidir cuál es mejor para su sistema de diseño y flujos de trabajo de prototipado. - [Wireframes](https://www.fernandoux.com/es/wiki/artefactos/wireframes/) Un wireframe es un esquema visual de baja fidelidad de una interfaz, similar al plano de un arquitecto. Se enfoca en la estructura, la jerarquía del contenido y la funcionalidad, ignorando deliberadamente los elementos visuales como colores, tipografías o imágenes. - [Wireframes](https://www.fernandoux.com/es/wiki/artifacts/wireframes/) Un wireframe es un esquema visual de baja fidelidad de una interfaz, similar al plano de un arquitecto. Se enfoca en la estructura, la jerarquía del contenido y la funcionalidad, ignorando deliberadamente los elementos visuales como colores, tipografías o imágenes. --- Source: https://www.fernandoux.com/tags/dise%C3%B1o-ui/