Fernando Ruiz — UX Designer, Product Designer & AI Builder on Fernando Ruiz

AI Pipelines: How I Built Systems That Work While I Sleep

Mon, 11 May 2026 00:00:00 +0000

Most people use AI to generate code, write copy, or fix their lives in a thousand small ways. You feed it something, it spits back something better or more structured. That’s fine. That’s the obvious use case. But one of the highest-value applications I’ve found for AI is building pipelines, specifically with Claude.

Claude is built for this. The model has a strong orientation toward multi-step workflows, tool use, and persistent context. And while there are other capable models out there, including some surprisingly good Chinese models, I’m going to focus on what I’ve actually been experimenting with. The results speak for themselves.

Pipelines de IA: Cómo Construí Sistemas Que Trabajan Mientras Yo Duermo

Mon, 11 May 2026 00:00:00 +0000

La mayoría de la gente usa IA para generar código, escribir copy o arreglarse la vida de mil formas. Le das de comer algo y te devuelve algo mejor o más estructurado. Eso está bien. Ese es el uso obvio. Pero una de las aplicaciones de mayor valor que he encontrado para la IA es construir pipelines, específicamente con Claude.

Claude está construido para esto. El modelo tiene una fuerte orientación hacia flujos de trabajo de múltiples pasos, uso de herramientas y contexto persistente. Y aunque hay otros modelos capaces ahí afuera, incluyendo algunos modelos chinos sorprendentemente buenos, voy a enfocarme en lo que he estado experimentando. Los resultados hablan por sí mismos.

Construí un SaaS Médico con IA. Después Me Hackearon. Acá Está el Caso de Estudio.

Thu, 23 Apr 2026 00:00:00 +0000

La primera noche que subí a producción el sistema de agendamiento médico de mi hermana, me acosté sintiéndome como un rey. A las 9am del día siguiente, el CPU de mi servidor estaba saturado al 300%, y alguien más estaba minando criptomonedas en mi hardware alquilado.

Pero esa es la mitad de la historia. Déjame retroceder.

Este es un caso de estudio sobre el SaaS que siempre quise construir, el que finalmente me encontró, y todo lo que rompí y aprendí para hacerlo funcionar. También es la historia de un Product Designer que pensaba que entendía software, y descubrió que internet es un lugar mucho más extraño y hostil de lo que cualquier archivo de Figma hubiera sugerido.

I Built a Medical SaaS With AI. Then I Got Hacked. Here's the Case Study.

Thu, 23 Apr 2026 00:00:00 +0000

The first night I deployed my sister’s medical scheduling system to production, I went to bed feeling like a king. By 9am the next morning, my server’s CPU was pinned at 300%, and someone else was mining cryptocurrency on my rented hardware.

That’s the middle of the story, though. Let me back up.

This is a case study about the SaaS I always wanted to build, the one that finally found me, and everything I broke and learned getting it to work. It’s also the story of a Product Designer who thought he understood software, and discovered the internet is a much stranger, more hostile place than any Figma file ever suggested.

Designing in Words: How AI Turned UX Designers Into Their Own Frontend Engineers

Thu, 09 Apr 2026 00:00:00 +0000

The design review went perfectly. You handed off a Figma file that was pixel-perfect: the right spacing, the right micro-interactions, the hover states, all of it. Three weeks later, the thing that shipped looked like it was built from memory by someone who saw your design once in a dream. Sound familiar?

That story has been playing on loop for the entire history of digital product design. The designer creates. The developer interprets. Something gets lost, always. Sometimes a lot. And the designer files it under “developer error” and moves on to the next project.

Diseñar en Palabras: Cómo la IA Convirtió a los Diseñadores UX en Sus Propios Frontend Engineers

Thu, 09 Apr 2026 00:00:00 +0000

El design review salió perfecto. Entregaste un archivo de Figma impoluto, el espaciado correcto, las micro-interacciones correctas, los hover states, todo. Tres semanas después, lo que se publicó parecía construido de memoria por alguien que vio tu diseño una vez en un sueño. ¿Te suena familiar?

Esa historia lleva reproduciéndose en bucle durante toda la historia del diseño de productos digitales. El diseñador crea. El desarrollador interpreta. Algo se pierde… siempre. A veces mucho. Y el diseñador lo archiva bajo “error del developer” y pasa al siguiente proyecto.

Claude Code Skills: La Capa Profesional que la Mayoría Ignora

Thu, 19 Mar 2026 00:00:00 +0000

Ya estás en Claude Code. Conoces lo básico. Has visto lo que puede hacer. Pero cada nueva sesión empieza igual: los primeros cinco minutos los pasas reexplicando tu contexto, reescribiendo los prompts que has escrito cien veces, y reestableciendo las reglas del juego antes de que empiece el trabajo real.

Esa fricción no es un problema de Claude. Es un problema de infraestructura. Y la solución es una funcionalidad que la mayoría de los usuarios pasa de largo: los Skills.

Claude Code Skills: The Professional Layer Most Users Ignore

Thu, 19 Mar 2026 00:00:00 +0000

You’re already in Claude Code. You know the basics. You’ve seen what it can do. But every new session starts the same way: you spend the first five minutes re-explaining your context, re-typing the prompts you’ve written a hundred times, and re-establishing the ground rules before any real work gets done.

That friction isn’t a Claude problem. It’s an infrastructure problem. And the fix is a feature most users walk right past: Skills.

Vibe Coding: Lo que la IA No te Va a Decir Antes de Construir tu Primera App

Sun, 15 Mar 2026 00:00:00 +0000

Hay una conversación que ocurre miles de veces al día alrededor del mundo. Va más o menos así:

“Hola Claude, necesito que me hagas una aplicación tipo YouTube pero sin errores.”

Y la [[IA]] responde feliz, genera código, y el usuario piensa que acaba de contratar un equipo de ingenieros por 20 dólares al mes. Tres semanas después, la aplicación tiene 47 bugs, nadie sabe por qué el login falla los martes y el creador no puede cambiar el color de un botón sin romper el sistema de pagos.

Vibe Coding: What AI Won't Tell You Before Building Your First App

Sun, 15 Mar 2026 00:00:00 +0000

There’s a conversation happening thousands of times a day around the world. It goes something like this:

“Hey Claude, I need you to build me a YouTube-like application but without bugs.”

And the [[AI]] responds happily, generates code, and the user thinks they’ve just hired an engineering team for $20 a month. Three weeks later, the application has 47 bugs, nobody knows why login fails on Tuesdays, and the creator can’t change a button color without breaking the payment system.

Spec-Driven Development: El fin del Vibe Coding amateur y el inicio de la ingeniería de sistemas para UX

Tue, 10 Mar 2026 00:00:00 +0000

El concepto de [[Vibe Coding]] es atractivo. Escribes en lenguaje natural, la IA escupe código, y en minutos tienes un prototipo. Funciona perfecto si estás haciendo un script de 100 líneas. Si intentas escalar eso a un producto real, el sistema colapsa.

Me reuní con Ryan Edge para desglosar exactamente cómo está utilizando agentes de [[IA]] para construir software complejo. El consenso es claro: depender de interfaces de chat para programar tiene un techo de cristal. Pierdes el contexto, la IA alucina, sobrescribe lógica existente y terminas haciendo trabajo manual para corregir a un robot.

Spec-Driven Development: The End of Amateur Vibe Coding and the Dawn of Systems Engineering for UX

Tue, 10 Mar 2026 00:00:00 +0000

The concept of [[Vibe Coding]] is appealing. You write in natural language, AI spits out code, and you have a prototype in minutes. It works perfectly for a 100-line script. Try scaling that to a real product, and the system collapses.

I sat down with Ryan Edge to break down exactly how he’s using [[AI]] agents to build complex software. The consensus is clear: relying on chat interfaces to code has a glass ceiling. You lose context, the AI hallucinates, overwrites existing logic, and you end up doing manual work to correct a robot.

Rediseño de Activación WTFast

Wed, 15 Nov 2023 00:00:00 +0000

El producto le mentía a sus propios usuarios. El diseño no arregló eso. Encontrar el bug sí. Después el diseño lo hizo sentir inevitable.

WTFast Activation Redesign

Wed, 15 Nov 2023 00:00:00 +0000

The product was quietly lying to its users. Design didn’t fix that. Finding the bug did. Then design made it feel inevitable.

Party Parrot World

Sun, 01 Oct 2023 00:00:00 +0000

Un juego social donde socializar costaba. La prueba no fue una métrica. Fue ver el Discord quedarse en silencio y a los jugadores chatear como si siempre hubieran sabido cómo.

Party Parrot World

Sun, 01 Oct 2023 00:00:00 +0000

A social game where socializing was hard. The fix wasn’t a metric. It was watching the Discord go quiet, then watching players chat like they’d always known how.

Plataforma de Esports United Gamers

Fri, 01 Sep 2023 00:00:00 +0000

Los fundadores tenían la ciencia. Yo había sido el jugador durante cinco años. Esa distancia es lo que terminaron financiando.

United Gamers Esports Platform

Fri, 01 Sep 2023 00:00:00 +0000

The founders had the science. I had been the player for five years. That gap is what they ended up funding.

A/B Testing for UX Designers

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Running controlled experiments to validate design changes—the difference between data-driven and guessing.

What is A/B Testing?

A/B testing (also called split testing) shows version A to half your users and version B to the other half. You measure which version performs better. If version B has a higher conversion rate, version B wins. It’s not about opinion; it’s about data.

A/B testing isn’t just for marketers. Designers use A/B tests to validate design decisions. Does a red button convert better than a blue button? A/B test it. Does a longer form reduce signups? A/B test it. Does highlighting the primary action increase clicks? A/B test it.

A/B Testing para Diseñadores UX

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Ejecutar experimentos controlados para validar cambios de diseño—la diferencia entre impulsado por datos y adivinación.

¿Qué es A/B Testing?

A/B testing (también llamado split testing) muestra la versión A a la mitad de tus usuarios y la versión B a la otra mitad. Mides cuál versión funciona mejor. Si la versión B tiene una tasa de conversión mayor, la versión B gana. No se trata de opinión; se trata de datos.

A/B Testing para Diseñadores UX

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Ejecutar experimentos controlados para validar cambios de diseño—la diferencia entre impulsado por datos y adivinación.

¿Qué es A/B Testing?

About Fernando Ruiz

Mon, 01 Jan 0001 00:00:00 +0000

I came to product design through architecture, content, and marketing. Three lenses on how things hold together. Here’s how that shows up in the work.

Accesibilidad en UX: Diseñando para Todos

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La Accesibilidad en UX significa diseñar productos digitales que sean utilizables por todos, incluyendo a personas con discapacidades.

¿Qué es la Accesibilidad en UX?

Considera un restaurante con escaleras pero sin rampa en la entrada. No está excluyendo deliberadamente a los usuarios en silla de ruedas, simplemente no fue diseñado pensando en ellos. Lo mismo ocurre con muchos productos digitales. Funcionan para usuarios sin discapacidad, con buena visión, audición y capacidades cognitivas estándar, pero excluyen a las personas con discapacidades a través de decisiones de diseño inconscientes.

Accessibility in UX: Designing for Everyone

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Accessibility in UX means designing digital products that are usable by everyone, including people with disabilities.

What is Accessibility in UX?

Consider a restaurant with stairs but no ramp at the entrance. It’s not deliberately excluding wheelchair users—it’s just not designed with them in mind. The same applies to many digital products. They work for able-bodied, sighted, hearing users with standard cognitive abilities, but exclude people with disabilities through unconscious design choices. Accessibility in UX means actively designing so that people with visual, hearing, motor, or cognitive disabilities can use your product with the same effectiveness as anyone else. It’s not an afterthought or a feature you add later. It’s built into design decisions from the beginning—semantic HTML, keyboard navigation, color contrast, transcripts for videos—so your product serves the widest possible audience.

Actividades de Investigación de Usuarios

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Las actividades de investigación de usuarios (UX Research) son el conjunto de métodos y técnicas que se utilizan para comprender a los usuarios, sus comportamientos, necesidades y motivaciones. Es el proceso sistemático de recopilar y analizar datos para informar el proceso de diseño y la toma de decisiones.

¿Qué son las Actividades de Investigación?

Imagina que eres un detective a punto de resolver un gran caso. No sales a la calle a interrogar gente al azar. Primero, defines el misterio ("¿Quién robó las galletas?"). Luego, identificas a tus testigos clave (participantes), preparas tu lista de preguntas (guion), decides cómo analizarás las pistas (síntesis) y finalmente presentas tus conclusiones. Un plan de investigación de UX es exactamente eso: el plan de un detective para resolver un misterio sobre los usuarios.

Actividades de Investigación de Usuarios

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué son las Actividades de Investigación?

Actualizaciones Optimistas y UX de Rollback

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Las Actualizaciones Optimistas son una técnica de diseño de interacción donde la interfaz del usuario se actualiza inmediatamente tras una acción (como dar un “Like” o enviar un mensaje), asumiendo que el servidor procesará la petición con éxito, sin esperar a su respuesta real. El Rollback es el proceso de revertir ese cambio visual si la petición acaba fallando.

El Secreto de la Velocidad en Apps Modernas

Imagina que pulsas el botón de “Me gusta” en Instagram. Si el icono de corazón no se iluminara de rojo hasta que el servidor devuelva un “OK”, la aplicación se sentiría lenta y pesada.

Actualizaciones Optimistas y UX de Rollback

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Secreto de la Velocidad en Apps Modernas

Imagina que pulsas el botón de “Me gusta” en Instagram. Si el icono de corazón no se iluminara de rojo hasta que el servidor devuelva un “OK”, la aplicación se sentiría lenta y pesada.

Affinity Mapping

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Affinity Mapping (or Affinity Diagramming) is a method used to organize a large amount of data (brainstorming ideas, interview observations, etc.) by grouping them into themes or categories based on their relationship or “affinity.” It is a collaborative way to find patterns in unstructured qualitative data.

What Is Affinity Mapping?

Imagine you have just done a month’s grocery shopping and you empty all the bags on the kitchen floor. You have a chaos of products. To put them away, you start creating groups: vegetables together, cleaning products in another pile, canned goods in another. You did not have predefined categories – you simply group things that “go together.”

Affinity Mapping

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Affinity Mapping (o Mapeo de Afinidad) es un método utilizado para organizar una gran cantidad de datos (ideas de un brainstorming, observaciones de entrevistas, etc.) agrupándolos en temas o categorías basadas en su relación o “afinidad”. Es una forma colaborativa de encontrar patrones en datos cualitativos desordenados.

¿Qué es el Affinity Mapping?

Imagina que acabas de hacer la compra de todo el mes y vacías todas las bolsas en el suelo de la cocina. Tienes un caos de productos. Para guardarlos, empiezas a crear grupos: las verduras juntas, los productos de limpieza en otro montón, las latas en otro. No tenías categorías predefinidas, simplemente agrupas las cosas que “van juntas”.

Affinity Mapping

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué es el Affinity Mapping?

Affordances and Signifiers: Making UI Self-Explanatory

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

An affordance is what an object actually invites you to do; a signifier communicates that affordance to the user.

What are Affordances and Signifiers?

Picture a door with a handle sticking out versus a flat metal plate. The handle affords pushing or pulling in specific ways—your hand and fingers have a natural interaction pattern. The flat plate affords pushing only. The affordance is the actual possibility; what the object physically invites. Now imagine those same doors without any visual distinction. You might miss the handle entirely or push when you should pull. That’s where signifiers come in—they’re the visual signals that tell users what affordances exist. Buttons in digital design have no physical affordance, so we use color, borders, and depth to signal “this is clickable.” Affordances are about possibility; signifiers are about communication.

Affordances vs Signifiers: El Lenguaje Invisible del Diseño

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Un Affordance es la relación entre un objeto y una persona: es la propiedad del objeto que permite realizar una acción (ej. un pomo permite girar). Un Signifier es la señal visual o sonora que comunica esa capacidad (ej. la forma del pomo indica qué hay que hacer con él).

El Legado de Don Norman en UX

El concepto de Affordance fue introducido originalmente por James J. Gibson en psicología perceptual, pero fue Don Norman quien lo adaptó al diseño en su libro fundamental The Design of Everyday Things. Para Norman, un buen diseño es aquel que no necesita manuales de instrucciones: el usuario sabe qué hacer con solo mirar el objeto.

Affordances vs Signifiers: El Lenguaje Invisible del Diseño

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Legado de Don Norman en UX

Affordances vs. Signifiers: The Invisible Language of Design

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

An Affordance is the relationship between an object and a person: it is the property of the object that allows an action to be performed (e.g., a handle allows turning). A Signifier is the visual or auditory signal that communicates that capability (e.g., the shape of the handle indicates what to do with it).

Don Norman’s Legacy in UX

The concept of Affordance was originally introduced by James J. Gibson in perceptual psychology, but it was Don Norman who adapted it to design in his seminal book The Design of Everyday Things. For Norman, good design is one that doesn’t need instruction manuals: the user knows what to do just by looking at the object.

Análisis Competitivo

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Un análisis competitivo es un proceso estratégico de investigación que consiste en identificar a tus competidores y evaluar sus productos, estrategias, fortalezas y debilidades. En UX, esto se enfoca en entender cómo otros resuelven problemas similares para el mismo público objetivo.

¿Qué es un Análisis Competitivo?

Imagina que quieres abrir una nueva cafetería en tu barrio. Lo primero que harías sería visitar todas las otras cafeterías de la zona. Probarías su café, mirarías sus precios, observarías el ambiente, verías qué tipo de clientes tienen y escucharías de qué se quejan o qué les encanta. No lo haces para copiarles exactamente, sino para entender el panorama: qué funciona, qué no, y dónde podría haber un hueco para que tu cafetería ofrezca algo único y mejor.

Análisis Competitivo

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué es un Análisis Competitivo?

Análisis Competitivos

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Un análisis competitivo (o benchmarking) es un proceso de investigación que consiste en identificar a tus competidores y evaluar sus productos, estrategias, fortalezas y debilidades en comparación con tu propio producto o idea.

¿Qué es un Análisis Competitivo?

Imagina que eres el entrenador de un equipo de fútbol. Antes de un partido importante, no solo entrenas a tu equipo; también estudias grabaciones de los partidos de tu rival. Analizas su estilo de juego, quiénes son sus jugadores estrella, cuáles son sus tácticas habituales y dónde cometen errores. No lo haces para copiarles, sino para preparar una contra-estrategia que explote sus debilidades y neutralice sus fortalezas.

Análisis Competitivos

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué es un Análisis Competitivo?

ARIA vs HTML Semántico: La Regla de Oro

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El HTML Semántico utiliza las etiquetas nativas del navegador (como <button>, <input>, <nav>) que ya traen accesibilidad y comportamiento integrados. ARIA (Accessible Rich Internet Applications) es un conjunto de atributos que se añaden al código para “parchear” o explicar elementos personalizados que el navegador no entiende por defecto.

La Primera Regla de ARIA

Si hay una cosa que todo diseñador y desarrollador debe recordar es la Primer Regla de ARIA:

ARIA vs HTML Semántico: La Regla de Oro

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La Primera Regla de ARIA

Si hay una cosa que todo diseñador y desarrollador debe recordar es la Primer Regla de ARIA:

ARIA vs. Semantic HTML: The Golden Rule

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Semantic HTML uses the browser’s native tags (such as <button>, <input>, <nav>) which already come with built-in accessibility and behavior. ARIA (Accessible Rich Internet Applications) is a set of attributes added to the code to “patch” or explain custom elements that the browser doesn’t understand by default.

The First Rule of ARIA

If there is one thing every designer and developer should remember, it is the First Rule of ARIA:

Arquitectura de la Información

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La Arquitectura de la Información (AI) es la práctica de decidir cómo organizar, estructurar y etiquetar el contenido de un producto digital (como un sitio web o una aplicación) de una manera que sea comprensible y permita a los usuarios encontrar la información y completar tareas de forma eficiente.

¿Qué es la Arquitectura de la Información?

Imagina que entras en un supermercado. Sabes que los productos están organizados de alguna manera: las frutas y verduras están juntas, los lácteos en otra sección, los productos de limpieza en otra. Hay pasillos con etiquetas claras que te ayudan a navegar. Sin esa organización, encontrar la leche sería una pesadilla.

Arquitectura de la Información

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué es la Arquitectura de la Información?

Arquitectura de Tokens (Global vs Semántico vs Componente)

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La arquitectura de tokens de diseño es la estructura lógica que organiza las decisiones de diseño (colores, tipografía, espaciado) en capas de abstracción. Un modelo bien diseñado permite cambiar la apariencia de todo un producto en minutos, garantizando coherencia y escalabilidad entre diseño y código.

¿Qué es la Arquitectura de Tokens?

Imagina que estás construyendo una ciudad. No quieres tener que pintar cada ladrillo de cada casa individualmente. En su lugar, defines una “paleta de materiales” (tokens globales), decides que todos los edificios públicos serán de “color institucional” (tokens semánticos) y finalmente aplicas ese color a la “puerta principal del ayuntamiento” (tokens de componente).

Arquitectura de Tokens (Global vs Semántico vs Componente)

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué es la Arquitectura de Tokens?

Atomic Design: Building UIs from the Ground Up

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Atomic design is a methodology for creating reusable component libraries by breaking interfaces into five hierarchical levels: atoms, molecules, organisms, templates, and pages.

What is Atomic Design?

Think about how chemistry works. Atoms combine to form molecules, molecules combine to form organisms. Chemistry builds complexity from simple building blocks. Atomic design applies this same logic to user interface design. An atom is the smallest unit—a button, an input field, a label. Molecules combine atoms—a search field plus a button forms a search bar. Organisms combine molecules—a header with navigation, logo, and search becomes a component. Templates show how organisms fit together; pages are templates with actual content. This hierarchy creates a shared language between designers and developers, enables consistent design systems, and makes maintenance easier. Instead of building interfaces from scratch each time, you compose interfaces from tested, reusable components.

Atomic Design: Construyendo Interfaces desde la Base

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Atomic Design (Diseño Atómico) es una metodología para crear librerías de componentes reutilizables dividiendo las interfaces en cinco niveles jerárquicos: átomos, moléculas, organismos, plantillas y páginas.

¿Qué es el Atomic Design?

Piensa en cómo funciona la química. Los átomos se combinan para formar moléculas, y las moléculas se combinan para formar organismos. La química construye complejidad a partir de bloques de construcción simples. El Atomic Design aplica esta misma lógica al diseño de interfaces de usuario.

Básicos de CRDT para Diseñadores de Producto

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Los CRDT (Conflict-free Replicated Data Types) son estructuras de datos que permiten que múltiples usuarios realicen cambios simultáneos de forma independiente y que, al sincronizarse, todos lleguen al mismo estado final automáticamente sin necesidad de una autoridad central o resolución manual de conflictos. Es la tecnología que hace posible la colaboración en tiempo real moderna.

¿Por qué el Diseñador debe saber qué es un CRDT?

Tradicionalmente, en las aplicaciones web, el servidor era “la única fuente de verdad”. Si querías cambiar algo, le pedías permiso al servidor y esperabas su respuesta de “OK”.

Básicos de CRDT para Diseñadores de Producto

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Por qué el Diseñador debe saber qué es un CRDT?

Tradicionalmente, en las aplicaciones web, el servidor era “la única fuente de verdad”. Si querías cambiar algo, le pedías permiso al servidor y esperabas su respuesta de “OK”.

Breakpoint VS Container Queries: Diseño Basado en Componentes

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Los Breakpoints (Media Queries) cambian el diseño basándose en el ancho total de la pantalla del dispositivo (Viewport). Las Container Queries cambian el diseño basándose en el espacio que tiene disponible el componente dentro de su contenedor padre.

El Cambio de Paradigma en el Diseño de Producto

Durante la última década, hemos diseñado “pantallas”: móvil, tablet y escritorio. Sin embargo, en un sistema de diseño moderno, diseñamos componentes que habitan en diferentes lugares. Un mismo componente de “Tarjeta de Producto” puede aparecer en una rejilla de 3 columnas en la página principal, o en una sola columna estrecha en una barra lateral.

Breakpoint VS Container Queries: Diseño Basado en Componentes

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Cambio de Paradigma en el Diseño de Producto

Breakpoint vs. Container Queries: Component-Based Design

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Breakpoints (Media Queries) change the design based on the total width of the device screen (Viewport). Container Queries change the design based on the space available to the component within its parent container.

The Paradigm Shift in Product Design

For the last decade, we have designed “screens”: mobile, tablet, and desktop. However, in a modern design system, we design components that live in different places. The same “Product Card” component can appear in a 3-column grid on the home page, or in a single narrow column in a sidebar.

Budget Management

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Design budget management is the process of planning, allocating, and controlling the financial resources of a design team to ensure it can operate effectively and achieve its strategic objectives. It is a key responsibility for design leaders (Leads, Managers, Directors).

What Is Budget Management?

Imagine you are the manager of a rock band. Your budget is the money you have for the year. You must decide how to use it: how much for the musicians’ salaries? How much for buying new instruments and equipment (software tools)? How much for renting a recording studio (research costs)? And how much for the tour (travel and conferences)?

Building a UX Team from Scratch

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

How to establish a UX function in an organization without UX—from first hire to mature team structure.

Starting from Scratch

Most organizations start with no UX. Engineers build features. Marketing sells them. Users struggle. Growing a UX function requires strategy, hiring, and culture change.

Phase 1: Hire First Designer (0-6 months)

Find senior designer (not junior—you need leadership)
Role: Establish UX thinking, run first user research, begin design documentation
Wins: One feature redesigned based on research

Phase 2: Build Small Team (6-18 months)

Búsqueda

Mon, 01 Jan 0001 00:00:00 +0000

Card Sorting

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Card Sorting is a user research (UX) technique that helps discover how people understand and group information. In a Card Sorting session, participants are asked to organize a series of cards, each with a concept or topic, into groups that make sense to them, and then label those groups.

What Is Card Sorting?

Imagine you give a friend a deck of 50 cards, each with the name of an animal. You ask them to sort them into piles that make sense to them. One person might create groups like “Pets,” “Jungle Animals,” and “Sea Animals.” Another might create groups like “Mammals,” “Reptiles,” and “Birds.” Neither is wrong; they simply reflect different mental models.

Card Sorting

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Card Sorting es una técnica de investigación de usuarios (UX) que ayuda a descubrir cómo las personas entienden y agrupan la información. En una sesión de Card Sorting, se les pide a los participantes que organicen una serie de tarjetas, cada una con un concepto o tema, en grupos que tengan sentido para ellos, y que luego etiqueten esos grupos.

¿Qué es el Card Sorting?

Imagina que le das a un amigo una baraja de 50 cartas, cada una con el nombre de un animal. Le pides que las ordene en montones que tengan sentido para él. Una persona podría crear grupos como “Mascotas”, “Animales de la Selva” y “Animales Marinos”. Otra podría crear grupos como “Mamíferos”, “Reptiles” y “Aves”. Ninguna de las dos es incorrecta; simplemente reflejan diferentes modelos mentales.

Card Sorting

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué es el Card Sorting?

Career Plans and Performance Evaluation

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A career plan is a structured framework that defines the competencies, skills, and responsibilities at each level of a design team. A performance evaluation is the periodic process through which a manager and a team member review the latter’s performance based on that framework, celebrate achievements, and define goals for the future.

What Are Career Plans?

Imagine you are playing a role-playing video game. Your character starts at level 1. To level up, you need to earn experience points and acquire new skills. The game shows you a “skill tree” where you can clearly see what you need to reach level 2, level 10, and what new abilities you will unlock. It also lets you choose different classes, like “warrior” or “mage.”

Carga Cognitiva: Por Qué lo Simple es Siempre Mejor

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La Carga Cognitiva es una medida del esfuerzo mental requerido para usar un producto; una menor carga cognitiva significa que es más fácil de usar.

¿Qué es la Carga Cognitiva?

Imagina que estás en un supermercado. Si los artículos están organizados lógicamente por categorías (frutas, lácteos, cereales), comprar es fácil. Tu cerebro sabe adónde ir. Pero si la tienda coloca los artículos al azar por todas partes, gastas energía mental buscando, recordando dónde viste las cosas, comparando opciones. Te frustras y te vas. La tienda desorganizada tiene una carga cognitiva alta; la organizada tiene una carga cognitiva baja.

Ceremonias de Equipo (Daily, Planning, Retros)

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Las ceremonias de equipo son una serie de reuniones recurrentes, popularizadas por metodologías ágiles como Scrum, diseñadas para estructurar el trabajo, fomentar la comunicación y promover la mejora continua. Las más comunes son la Daily Stand-up, la Sprint Planning y la Retrospectiva.

¿Qué son las Ceremonias de Equipo?

Imagina una escudería de Fórmula 1 durante una carrera. Tienen “ceremonias” muy definidas: la parada en boxes es un ritual rápido y sincronizado para revisar el estado del coche y cambiar neumáticos (la Daily Stand-up). Antes de la carrera, tienen una reunión para definir la estrategia de neumáticos y paradas (la Sprint Planning). Y después de la carrera, analizan los datos y el rendimiento para ver cómo pueden ser más rápidos la próxima vez (la Retrospectiva).

Ceremonias de Equipo (Daily, Planning, Retros)

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué son las Ceremonias de Equipo?

Chunking en los Flujos de UI: Fragmentación Inteligente

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Chunking es la técnica de dividir información compleja o flujos de usuario extensos en “pedazos” (chunks) más pequeños y lógicamente agrupados. Esto facilita que el cerebro del usuario procese, entienda y recuerde la información sin sentirse abrumado.

¿Por qué el Chunking es vital para la Memoria?

Nuestra memoria de trabajo es extremadamente limitada. Según George Miller, solo podemos mantener entre 5 y 9 elementos a la vez en nuestra mente. Si una interfaz nos presenta 20 campos de formulario o un manual de 10 pasos sin pausas, nuestro cerebro se satura y la carga cognitiva se dispara.

Chunking en los Flujos de UI: Fragmentación Inteligente

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Por qué el Chunking es vital para la Memoria?

Chunking in UI Flows: Intelligent Fragmentation

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Chunking is the technique of dividing complex information or extensive user flows into smaller, logically grouped “chunks.” This makes it easier for the user’s brain to process, understand, and remember information without feeling overwhelmed.

Why Chunking is vital for Memory?

Our working memory is extremely limited. According to George Miller, we can only hold between 5 and 9 items at once in our mind. If an interface presents us with 20 form fields or a 10-step manual without pauses, our brain becomes saturated, and cognitive load skyrockets.

Cognitive Load Management in UX

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Cognitive Load is the total amount of mental effort a user must invest to complete a task or process information in an interface. Good UX design seeks to minimize unnecessary load so that the user can focus on achieving their goal with as little friction as possible.

Types of Cognitive Load: The Sweller Model

In cognitive psychology, three types of mental load are distinguished. For a UX designer, understanding these concepts is key to creating intuitive interfaces:

Cognitive Load: Why Simpler Is Always Better

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A measure of mental effort required to use a product; lower cognitive load means easier to use.

What is Cognitive Load?

Imagine you’re at a grocery store. If items are logically organized by category (produce, dairy, cereal), shopping is easy. Your brain knows where to go. But if the store randomly places items everywhere, you spend mental energy searching, remembering where you saw things, comparing options. You get frustrated and leave. The disorganized store has high cognitive load; the organized one has low cognitive load.

Color Contrast Math: Readability and Ratio

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Color Contrast is the difference in luminosity between the text (foreground) and the background. WCAG 2.1 accessibility guidelines establish specific mathematical contrast ratios (e.g., 4.5:1) that must be met for content to be readable by as many people as possible.

Why the Designer Must Know Color Math?

Designing only for “what looks good” on your high-end 5K monitor is a dangerous trap. A large portion of the world’s population has some form of visual impairment or uses their devices under direct sunlight.

Cómo Escribir un Case Study de UX

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La estructura y narrativa que convierte trabajo de diseño en una historia convincente—la base de un portafolio de diseño fuerte.

¿Qué es un Case Study de UX?

Un case study de UX cuenta la historia de un proyecto de diseño desde el problema pasando por la solución hasta el impacto. No es una pieza de portafolio mostrando mockups bonitos. Es una narrativa explicando tu pensamiento, decisiones y resultados.

Cómo Escribir un Case Study de UX

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La estructura y narrativa que convierte trabajo de diseño en una historia convincente—la base de un portafolio de diseño fuerte.

¿Qué es un Case Study de UX?

Competitive Analysis

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A competitive analysis is a strategic research process that involves identifying your competitors and evaluating their products, strategies, strengths, and weaknesses. In UX, it focuses on understanding how others solve similar problems for the same target audience.

What Is a Competitive Analysis?

Imagine you want to open a new coffee shop in your neighborhood. The first thing you would do is visit all the other coffee shops in the area. You would try their coffee, check their prices, observe the atmosphere, see what kind of customers they have, and listen to what they complain about or love. You are not doing this to copy them exactly, but to understand the landscape: what works, what does not, and where there might be a gap for your coffee shop to offer something unique and better.

Competitive Analysis

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A competitive analysis (or benchmarking) is a research process that involves identifying your competitors and evaluating their products, strategies, strengths, and weaknesses in comparison to your own product or idea.

What Is a Competitive Analysis?

Imagine you are the coach of a soccer team. Before an important match, you do not just train your team; you also study recordings of your rival’s games. You analyze their playing style, who their star players are, what their usual tactics are, and where they make mistakes. You are not doing this to copy them, but to prepare a counter-strategy that exploits their weaknesses and neutralizes their strengths.

Component API Design: Predictability and Flexibility

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Designing a Component API consists of defining a clear entry contract (props) and behavior for elements in a design system, with the goal that they are easy to use, predictable, and maintainable for both designers and developers.

What Makes a Good Component API?

A component is not just a visual piece; it is a unit of functional logic. A well-designed API must clearly answer these three fundamental premises:

Component Prop Organization: Structure and Hierarchy

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Prop Organization consists of structuring and prioritizing a component’s properties so its use is intuitive and predictable. This reduces the cognitive load of designers in Figma and developers in code, facilitating the creation of consistent interfaces.

Why does Prop order matter?

Imagine a complex component (e.g., an Input with a label, icon, error message, and help text). If the configuration properties are disorganized, the design system user (the designer or developer) will waste time looking for how to change the icon color or text size.

Comportamiento de Intrinsic Sizing en UI

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Intrinsic Sizing es un comportamiento de diseño donde las dimensiones de un elemento (ancho o alto) son determinadas por su propio contenido (letras, imágenes, iconos) en lugar de ser forzadas por un contenedor externo con medidas fijas.

¿Qué es el Dimensionamiento Intrínseco?

Imagina que quieres meter camisas en una maleta.

Extrinsic Sizing (Extrínseco): La maleta tiene un tamaño fijo de 50x40 cm. No importa si metes 1 camisa o 20, la maleta mide lo mismo.
Intrinsic Sizing (Intrínseco): La maleta es de tela elástica y se ajusta exactamente al volumen de las camisas que metas. Si metes una camisa, es pequeña; si metes 20, se estira.

En UI, esto significa que un botón no mide “200px”, sino que mide Ancho del Texto + Paddings laterales. Si el texto cambia de “OK” a “Cancelar suscripción”, el botón se ensancha automáticamente.

Comportamiento de Intrinsic Sizing en UI

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué es el Dimensionamiento Intrínseco?

Imagina que quieres meter camisas en una maleta.

Extrinsic Sizing (Extrínseco): La maleta tiene un tamaño fijo de 50x40 cm. No importa si metes 1 camisa o 20, la maleta mide lo mismo.
Intrinsic Sizing (Intrínseco): La maleta es de tela elástica y se ajusta exactamente al volumen de las camisas que metas. Si metes una camisa, es pequeña; si metes 20, se estira.

Conciencia de Estado (State Awareness) en UI

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La Conciencia de Estado (State Awareness) es la capacidad de una interfaz para comunicar de forma clara y continua qué está ocurriendo en el sistema, en qué paso del proceso se encuentra el usuario y cuál es la condición actual de cada componente (ej. si un botón está pulsado, si un dato se está cargando o si hay un error).

¿Por qué el Usuario necesita Conciencia de Estado?

Como seres humanos, odiamos la incertidumbre. En el mundo físico, si pulsas un interruptor y la luz no se enciende, sabes que hay un fallo porque el interruptor cambió de posición físicamente. En el mundo digital, si un usuario pulsa un botón y no pasa nada visualmente en los primeros milisegundos, el usuario pulsará el botón 5 veces más, generando errores en el servidor y frustración.

Conciencia de Estado (State Awareness) en UI

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Por qué el Usuario necesita Conciencia de Estado?

Condens

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Condens is a user research repository platform and qualitative analysis tool. Like its main competitor, [[Dovetail]], it helps teams centralize, analyze, and share their research data to build continuous, accessible knowledge about their users.

What Is Condens?

Imagine you are a detective and each interview or usability test is a clue. You accumulate notes, videos, and observations. A repository like Condens is your digital investigation board: a central place where you put all the clues, connect them with red threads (tags), and discover the pattern to solve the case. It is not just a place to store files – it is a tool for building knowledge.

Condens

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Condens es una plataforma de repositorio de investigación de usuarios (Research Repository) y una herramienta de análisis cualitativo. Al igual que su principal competidor, [[Dovetail]], ayuda a los equipos a centralizar, analizar y compartir los datos de su investigación para construir un conocimiento continuo y accesible sobre sus usuarios.

¿Qué es Condens?

Imagina que eres un detective y cada entrevista o prueba de usabilidad es una pista. Acumulas notas, videos y observaciones. Un repositorio como Condens es tu tablero de investigación digital: un lugar central donde pones todas las pistas, las conectas con hilos rojos (etiquetas) y descubres el patrón para resolver el caso. No es solo un lugar para guardar archivos, es una herramienta para construir conocimiento.

Condens

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué es Condens?

Conflict Resolution in Collaboration: UI and UX

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Conflict Resolution occurs when two or more users attempt to perform contradictory actions on the same object at the same time (e.g., one deletes a paragraph while the other is editing it). In collaborative product design, our goal is for the user never to see a “Sync Error” notification if we can avoid it.

The Challenge of Multi-user Applications

In modern applications like Google Docs, Figma, or Notion, real-time collaboration is a basic feature. However, behind the magic lies extremely complex conflict resolution logic. If two people save different versions, who wins? Is anyone’s work lost?

Constraints and Auto Layout Logic in Figma

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Constraints define how elements are positioned and scaled within a static container. Auto Layout is a flexible design system that creates containers that automatically expand or contract based on their content. Together, they form the foundation of any modern responsive design in Figma.

Why are these Tools Vital?

In modern digital product design, we don’t design for a single static screen. We design for an infinite number of devices and contexts. The correct use of Constraints and Auto Layout allows you to:

Construyendo un Equipo de UX desde Cero

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Guía para establecer una función de UX en una organización que no cuenta con ella: desde la primera contratación hasta alcanzar una estructura de equipo madura.

Empezando desde Cero

La mayoría de las organizaciones comienzan sin UX. Los ingenieros construyen las funciones, marketing las vende y los usuarios sufren las consecuencias. Hacer crecer una función de UX requiere estrategia, contrataciones inteligentes y un cambio cultural.

Fase 1: Contrata al primer diseñador (0-6 meses)

Contextual Inquiry

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Observing users in their natural environment while they work—reveals context that interviews and surveys never capture.

What is Contextual Inquiry?

Contextual inquiry is a research method where you observe users in their native environment while they perform real tasks. Unlike a lab study where a user sits at a desk, contextual inquiry happens where users actually work. An accountant in their office. A chef in a kitchen. A shopper in a store.

Control de Explosión de Variantes (Wrangling Systems)

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Control de la Explosión de Variantes es el proceso de optimizar y simplificar la arquitectura de un componente para evitar un número excesivo de versiones manuales, utilizando herramientas como Component Properties y Booleanos para mantener el sistema ligero y fácil de mantener.

El Problema: El Laberinto de Variantes

Antes de las mejoras en herramientas como Figma, crear un componente simple (como un botón) con 3 tamaños, 4 variantes de color, 2 estados de icono y 5 estados de interacción (default, hover, active, focus y disabled) requería la creación manual de 120 variantes individuales (3 x 4 x 2 x 5).

Control de Explosión de Variantes (Wrangling Systems)

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Problema: El Laberinto de Variantes

Crazy 8's

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Crazy 8’s is a rapid ideation exercise, fundamental to [[Design Sprints]], in which each participant sketches eight different ideas to solve a design problem in eight minutes. The goal is to force creative thinking by going beyond the first idea (which tends to be the most obvious).

What Is Crazy 8’s?

Imagine you are in a contest where you have to generate as many ideas as possible in a very limited time. The pressure forces you not to overthink, not to judge your own ideas, and to put down whatever comes to mind first. Crazy 8’s is exactly that: an ideation sprint.

Crazy 8's

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Crazy 8’s es un ejercicio de ideación rápida, fundamental en los [[Design Sprints]], en el que cada participante esboza ocho ideas diferentes para resolver un problema de diseño en ocho minutos. El objetivo es forzar el pensamiento creativo yendo más allá de la primera idea (que suele ser la más obvia).

¿Qué es Crazy 8’s?

Imagina que estás en un concurso donde tienes que generar tantas ideas como puedas en un tiempo muy limitado. La presión te obliga a no pensar demasiado, a no juzgar tus propias ideas y a plasmar lo primero que se te viene a la mente. Crazy 8’s es exactamente eso: un sprint de ideación.

Crazy 8's

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué es Crazy 8’s?

CRDT Basics for Product Designers

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

CRDTs (Conflict-free Replicated Data Types) are data structures that allow multiple users to make simultaneous, independent changes that, when synchronized, automatically reach the same final state without the need for a central authority or manual conflict resolution. It is the technology that makes modern real-time collaboration possible.

Why the Designer should know what a CRDT is?

Traditionally, in web applications, the server was “the single source of truth.” If you wanted to change something, you asked the server for permission and waited for its “OK” response.

Cultura de Diseño

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Crear una cultura organizacional donde el Design Thinking es la norma requiere liderazgo, educación constante y un refuerzo sistemático de los valores centrados en el usuario.

¿Qué es la Cultura de Diseño?

La cultura de diseño ocurre cuando una organización piensa de forma natural en los usuarios. El diseño no está aislado en un departamento; es la forma en que todos trabajan. Los ingenieros diseñan código pensado para humanos. Los Product Managers diseñan procesos para aportar claridad. El liderazgo diseña la estrategia en torno a las necesidades del usuario.

Customer Journey Maps

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A Customer Journey Map (CJM) is a visualization of the complete story of a user’s interaction with a product or service over time and across different channels. It narrates the experience from the user’s perspective, highlighting their actions, thoughts, feelings, and pain points at each stage.

What are Customer Journey Maps?

If Personas are a photo of your user, a Customer Journey Map is a movie about them. It doesn’t focus on a single moment, but maps the entire experience of a user as they try to achieve a goal, from the moment they realize they have a need until they resolve it and beyond.

Customer Journey Maps

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Un Customer Journey Map (CJM) es una visualización de la historia completa de la interacción de un usuario con un producto o servicio a lo largo del tiempo y a través de diferentes canales. Narra la experiencia desde la perspectiva del usuario, destacando sus acciones, pensamientos, sentimientos y puntos de dolor en cada etapa.

¿Qué son los Customer Journey Maps?

Si las Personas es una foto de tu usuario, un Customer Journey Map es una película sobre él. No se enfoca en un solo momento, sino que mapea toda la experiencia de un usuario mientras intenta alcanzar un objetivo, desde que se da cuenta de que tiene una necesidad hasta que la resuelve y más allá.

Customer Journey Maps

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué son los Customer Journey Maps?

Dark Patterns: What They Are and Why to Avoid Them

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Dark patterns are deceptive design techniques that trick users into taking actions against their interests for benefit to the business.

What are Dark Patterns?

Imagine a restaurant menu designed to make expensive items look cheapest through clever formatting, confusing you into expensive orders. That’s the offline equivalent of a dark pattern. On digital products, dark patterns are design choices deliberately engineered to confuse, mislead, or trick users into actions benefiting the business at users’ expense. Hidden unsubscribe buttons, misleading continue buttons, pre-checked boxes for unwanted services, difficult-to-find privacy settings—these are dark patterns. They exploit user psychology and attention to extract value: extra purchases, data harvesting, or subscription lock-in. The distinction from poor design is intent: bad design fails to guide users clearly; dark patterns deliberately misdirect. Dark patterns generate short-term gains at massive cost to trust and long-term relationships.

Data-Driven Design Decisions

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Making data-driven design decisions is an approach that uses concrete evidence and data, both qualitative and quantitative, to inform and justify design choices, rather than relying solely on intuition, personal opinions, or aesthetic trends.

What Is Data-Driven Design?

Imagine a doctor. A good doctor does not prescribe a treatment based on “a hunch” or “what worked for another patient.” A good doctor combines different types of data: listens to your symptoms (qualitative data), orders blood tests (quantitative data), and reviews your medical history to make an informed diagnosis.

Datos Cuantitativos

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Los datos cuantitativos en UX son información numérica que mide el comportamiento y las actitudes de los usuarios. Se centran en el “cuánto”, “cuántos” o “con qué frecuencia”, y se utilizan para analizar patrones a gran escala, validar hipótesis y medir el impacto del diseño.

¿Qué son los Datos Cuantitativos?

Imagina que eres el dueño de una tienda. Los datos cuantitativos son tu informe de ventas: te dicen cuántos clientes entraron, cuántos compraron algo, y cuál fue el producto más vendido. Te dan los números, el “qué”.

Datos Cuantitativos

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué son los Datos Cuantitativos?

Decisiones de Diseño Basadas en Datos

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Tomar decisiones de diseño basadas en datos (Data-Driven Design) es un enfoque que utiliza evidencia y datos concretos, tanto cualitativos como cuantitativos, para informar y justificar las elecciones de diseño, en lugar de basarse únicamente en la intuición, las opiniones personales o las tendencias estéticas.

¿Qué es el Diseño Basado en Datos?

Imagina a un doctor. Un buen doctor no te receta un tratamiento basándose en “un presentimiento” o en “lo que le funcionó a otro paciente”. Un buen doctor combina diferentes tipos de datos: escucha tus síntomas (datos cualitativos), pide análisis de sangre (datos cuantitativos) y revisa tu historial médico para hacer un diagnóstico informado.

Decisiones de Diseño Basadas en Datos

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué es el Diseño Basado en Datos?

Decisiones de Intrinsic Layout: Contenido VS Cajas

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Las Decisiones de Intrinsic Layout son las reglas de diseño que definen cómo se posicionan y escalan los elementos de una interfaz basándose en las necesidades de su propio contenido (como el ancho del texto o el tamaño de la imagen) en lugar de ser forzados por una rejilla externa (Layout Grid).

¿Por qué el Intrinsic Layout es la mejor opción para productos dinámicos?

Históricamente, diseñamos webs con rejillas de 12 columnas. Es un sistema seguro y predecible, pero frágil. Si un nombre de usuario es demasiado largo, el diseño de la rejilla se rompe o el texto se corta.

Decisiones de Intrinsic Layout: Contenido VS Cajas

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Por qué el Intrinsic Layout es la mejor opción para productos dinámicos?

Decisiones de Layout: Grid vs Intrinsic

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Las Layout Grids son rejillas predefinidas que fuerzan los elementos a seguir una estructura rígida de columnas y distancias específicas. El Intrinsic Layout es un enfoque donde el tamaño y la posición de los elementos dependen de su contenido y su relación interna, sin depender de una cuadrícula externa.

El Dilema del Layout Moderno

En la web de principios de la década de 2010, todo se basaba en rejillas de 12 columnas. Hoy, gracias a las capacidades de Figma (Auto Layout) y de los navegadores modernos (Flexbox/CSS Grid), el diseño se está volviendo más fluido y menos dependiente de estas estructuras fijas. La pregunta clave es: ¿Cuándo debemos forzar la rejilla y cuándo debemos dejar que el contenido mande sobre el espacio?

Decisiones de Layout: Grid vs Intrinsic

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Dilema del Layout Moderno

Design Critiques

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A Design Critique is a structured team session where designers present their work in progress to receive constructive feedback from their peers. The goal is to improve the design, not to judge the designer.

What Is a Design Critique?

Imagine you are a chef creating a new dish. Before putting it on the menu, you present it to other trusted chefs. They taste it and give you their expert opinion: “The acidity of the lemon is perfect, but maybe it needs a bit more salt to bring out the flavors. Have you tried searing the fish for one less minute?”. They do not say “I do not like your dish,” but instead give you specific, professional feedback to help you improve.

Design Critiques

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Una Design Critique (o Crítica de Diseño) es una sesión de equipo estructurada donde los diseñadores presentan su trabajo en progreso para recibir feedback constructivo de sus compañeros. El objetivo es mejorar el diseño, no juzgar al diseñador.

¿Qué es una Design Critique?

Imagina que eres un chef que está creando un nuevo plato. Antes de ponerlo en el menú, lo presentas a otros chefs de confianza. Ellos lo prueban y te dan su opinión experta: “La acidez del limón está perfecta, pero quizás necesita un toque más de sal para realzar los sabores. ¿Has probado a sellar el pescado un minuto menos?”. No te dicen “no me gusta tu plato”, sino que te dan feedback específico y profesional para que lo mejores.

Design Critiques

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué es una Design Critique?

Design Culture

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Creating an organizational culture where design thinking is the default—requires leadership, education, and systematic reinforcement.

What is Design Culture?

Design culture is when an organization naturally thinks about users. Design isn’t siloed; it’s how everyone works. Engineers design code for humans. PMs design processes for clarity. Leadership designs strategy around user needs.

Design culture doesn’t happen by accident. It requires leadership commitment, continuous education, and systematic reinforcement.

One sentence punch: Design culture is when “what do users need?” becomes the default question, not the exception.**

Design Evangelism

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Design evangelism (or Design Advocacy) is the continuous process of promoting the value of user-centered design throughout an organization. It involves educating, persuading, and inspiring non-designer colleagues (engineers, product managers, marketing, sales, executives) to understand, value, and integrate design principles into their own work.

What Is Design Evangelism?

Imagine you are a nutrition expert at a company. You don’t just create a healthy menu for the cafeteria. You give talks about the benefits of good nutrition, put up informative posters, offer consultations, and encourage your colleagues to make healthier choices on their own. You don’t impose a diet; instead, you foster a culture of wellness.

Design Handoff: Figma a Desarrollo

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El proceso de comunicar decisiones de diseño a desarrolladores—handoffs claros previenen malinterpretación y reworko.

¿Qué es Design Handoff?

Design handoff es el momento en que diseños se mueven de Figma a código. Sin handoff claro, los desarrolladores interpretan diseños a su manera. Azul se convierte en un matiz diferente. El padding se adivina. Las animaciones se simplifican.

Un buen handoff responde: ¿Qué es este componente? ¿Cómo se comporta? ¿Cuáles son los estados? ¿Cuál es el espaciado? Un handoff malo son solo mockups sin documentación.

Design Handoff: Figma a Desarrollo

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El proceso de comunicar decisiones de diseño a desarrolladores—handoffs claros previenen malinterpretación y reworko.

¿Qué es Design Handoff?

Un buen handoff responde: ¿Qué es este componente? ¿Cómo se comporta? ¿Cuáles son los estados? ¿Cuál es el espaciado? Un handoff malo son solo mockups sin documentación.

Design Handoff: Figma to Development

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

The process of communicating design decisions to developers—clear handoffs prevent misinterpretation and rework.

What is Design Handoff?

Design handoff is the moment designs move from Figma to code. Without clear handoff, developers interpret designs in their own way. Blue becomes a different shade. Padding is guessed. Animations are simplified.

A good handoff answers: What is this component? How does it behave? What are the states? What’s the spacing? A bad handoff is mockups alone with no documentation.

Design Principles

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Design Principles are a set of brief, clear, and memorable guidelines that articulate the core values that should guide a team’s design work. They serve as an internal compass for making consistent, high-quality decisions, especially when there is no specific rule to apply.

What are Design Principles?

They are not prescriptive rules like “all buttons must be blue.” They are high-level values that help a team define what “good design” means for their specific product. They are the design team’s constitution.

Design Roadmap

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A Design Roadmap is a strategic artifact that visualizes the design team’s priorities and work plan over the medium and long term. It aligns design initiatives with product and business objectives and communicates to the entire organization what the design team will focus on and why.

What Is a Design Roadmap?

Imagine a subway network map. It doesn’t show every street in the city, but it does show the main lines, key stations, and important connections. It gives you an overview of how to get around the city and the major future expansion projects. A Design Roadmap is that map for your product: it doesn’t detail every task, but it does show the major initiatives and how they connect to overall objectives.

Design Specifications

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Detailed documentation that translates designs into development instructions—the bridge between design and code.

What are Design Specifications?

Design specifications are detailed documents that describe design intent precisely enough that developers can implement it without returning to designers for clarification. Specs cover everything: spacing (the button has 16px padding), colors (the primary blue is #0066FF), interactions (on hover, the button becomes 2% darker), and edge cases (disabled state shows 50% opacity).

Design Sprints

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A Design Sprint is a five-day process, with a defined step-by-step approach, for answering critical business questions through design, prototyping, and testing with real customers. It is a method for compressing months of debate and development into a single week of focused work.

What Is a Design Sprint?

Imagine you have an idea for a new product. The traditional path would be to spend months researching, designing, developing, and launching to see if people like it. A Design Sprint is like a time machine: it allows you to jump into the future and see how customers react to your finished product, but without having to build it. In just five days, you go from an idea to a realistic prototype and real user feedback.

Design Sprints

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Un Design Sprint es un proceso de cinco días, con un paso a paso definido, para responder preguntas críticas de negocio a través del diseño, el prototipado y las pruebas con clientes reales. Es un método para comprimir meses de debate y desarrollo en una sola semana de trabajo enfocado.

¿Qué es un Design Sprint?

Imagina que tienes una idea para un nuevo producto. El camino tradicional sería pasar meses investigando, diseñando, desarrollando y lanzando para ver si a la gente le gusta. Un Design Sprint es como una máquina del tiempo: te permite saltar al futuro y ver cómo los clientes reaccionan a tu producto terminado, pero sin tener que construirlo. En solo cinco días, pasas de una idea a un prototipo realista y a feedback de usuarios reales.

Design Sprints

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué es un Design Sprint?

Design Strategy and Vision

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Design Strategy (or UX Strategy) is the long-term plan that defines how the user experience will contribute to business objectives. The Design Vision is the inspiring picture of the future that the strategy aims to achieve. Together, they answer the questions: “Where do we want to go?” (Vision) and “How will we get there?” (Strategy).

What Are Design Strategy and Vision?

Imagine you are the captain of a ship. The Vision is your final destination, that paradise island you have in mind that motivates the entire crew. The Strategy is your navigation plan: the route you chart on the map, the currents you will leverage, the supplies you need, and the key ports where you will stop. Without the vision, you sail aimlessly. Without the strategy, the vision is just a dream.

Design System

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

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.

What is a Design System?

Imagine you’re building with LEGO. You don’t have to create each brick from scratch every time you build something new. You have a set of standard bricks (2x2, 2x4, etc.) that you can combine to create anything. Plus, you have an instruction manual that tells you how the pieces fit together.

Designing for Perceived Performance: Faster Than Light

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Perceived Performance is the time a user feels it takes for a system to respond, regardless of the actual speed (milliseconds) of the connection or processor. In product design, perception is reality.

Why does Perceived Performance matter?

We can have the best-optimized application in the world, but if the user stares at a blank screen for 2 seconds, they will think the app is slow.

On the contrary, an app that takes the same 2 seconds but shows a Skeleton Screen, a loading bar with a smooth animation, or interesting context messages will be perceived as much faster and more pleasant.

Diary Studies

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Asking users to document their behavior over days or weeks—captures patterns you’ll never see in a single-session study.

What is a Diary Study?

A diary study asks participants to record their actions, thoughts, and feelings over an extended period—typically days, weeks, or months. Unlike a one-hour research session, diary studies capture behavior in context, over time, as it naturally occurs.

A diary can be digital (a Google Form or custom app), paper-based (a printed log), or video-based (participants record short videos). The format varies, but the purpose is consistent: witness behavior as it happens, not as users remember it.

Diseño Centrado en el Usuario: El Fundamento de Todo

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Diseño Centrado en el Usuario (UCD) es un enfoque donde la investigación del usuario y sus necesidades impulsan cada decisión de diseño de principio a fin.

¿Qué es el Diseño Centrado en el Usuario?

Imagina construir una casa sin hablar nunca con las personas que vivirán en ella. Decides la distribución basándote en lo que tú crees que se ve bien, dónde pondrías tú la cocina y cómo organizarías tú las habitaciones. Luego tus clientes se mudan y se dan cuenta de que pusiste el dormitorio arriba pero todos en la familia tienen problemas de movilidad. Las escaleras son ahora una crisis. El diseño centrado en el usuario es lo opuesto: preguntas a las personas que usarán la casa qué necesitan realmente, y luego diseñas basándote en su realidad, no en tus suposiciones.

Diseño de APIs de Componentes: Predictibilidad y Flexibilidad

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El diseño de una API de Componentes consiste en definir un contrato claro de entrada (props) y comportamiento para los elementos de un sistema de diseño, con el objetivo de que sean fáciles de usar, predecibles y mantenibles tanto para diseñadores como para desarrolladores.

¿Qué Compone una Buena API de Componentes?

Un componente no es solo una pieza visual; es una unidad de lógica funcional. Una API bien diseñada debe responder de forma clara a estas tres premisas fundamentales:

Diseño de APIs de Componentes: Predictibilidad y Flexibilidad

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué Compone una Buena API de Componentes?

Un componente no es solo una pieza visual; es una unidad de lógica funcional. Una API bien diseñada debe responder de forma clara a estas tres premisas fundamentales:

Diseño Inclusivo vs. Diseño Accesible: Por qué ambos importan

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El diseño accesible elimina las barreras para las personas con discapacidades; el diseño inclusivo considera la gama más amplia posible de la diversidad humana desde el principio.

¿Cuál es la diferencia?

Imagina un vado en la acera: una sección inclinada de la acera para usuarios de sillas de ruedas. Técnicamente, hace que las aceras sean accesibles para personas con problemas de movilidad. Pero, tras su implementación, todo el mundo los usa: padres con carritos de bebé, repartidores con carros, personas mayores que prefieren la pendiente suave y viajeros que arrastran maletas. Los vados son accesibles, pero también son inclusivos: benefician a una población mucho más amplia que solo aquella para la que fueron diseñados.

Diseño Mobile-First: Principios y Práctica

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Diseño Mobile-First es un enfoque que prioriza el diseño para dispositivos móviles antes que para pantallas grandes, mejorando progresivamente la experiencia para resoluciones mayores.

¿Qué es el Diseño Mobile-First?

La mayoría de los productos digitales hoy en día se usan más en teléfonos que en computadoras de escritorio. Sin embargo, muchos equipos de diseño empiezan bocetando en monitores grandes y luego comprimen las funciones en las pantallas de los teléfonos como si fuera algo secundario.

Diseño para el Rendimiento Percibido: Más Rápido que la Luz

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Rendimiento Percibido es el tiempo que un usuario siente que tarda un sistema en responder, independientemente de la velocidad real (milisegundos) de la conexión o el procesador. En el diseño de producto, la percepción es la realidad.

¿Por qué importa el Rendimiento Percibido?

Podemos tener la aplicación mejor optimizada del mundo, pero si el usuario se queda mirando una pantalla en blanco durante 2 segundos, pensará que la app es lenta.

Diseño para el Rendimiento Percibido: Más Rápido que la Luz

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Por qué importa el Rendimiento Percibido?

Podemos tener la aplicación mejor optimizada del mundo, pero si el usuario se queda mirando una pantalla en blanco durante 2 segundos, pensará que la app es lenta.

Dot Voting

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A quick, visual voting technique that reveals team consensus without lengthy discussion—essential for prioritization workshops.

What is Dot Voting?

Dot voting is a rapid decision-making technique. Write ideas or features on a wall. Give each person dots (sticky dots, stickers, or markers). Each person places their dots on ideas they prefer. Most dots wins.

It’s silent. It’s democratic. It’s fast. The person with the loudest voice doesn’t dominate. Everyone’s vote counts equally.

Dot Voting

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Una técnica de votación rápida y visual que revela consenso del equipo sin discusión extensa—esencial para talleres de priorización.

¿Qué es Dot Voting?

Dot voting es una técnica rápida de toma de decisiones. Escribe ideas o características en una pared. Dale a cada persona puntos (puntos adhesivos, pegatinas o marcadores). Cada persona coloca sus puntos en ideas que prefieren. Más puntos gana.

Es silencioso. Es democrático. Es rápido. La persona con la voz más fuerte no domina. El voto de todos cuenta igualmente.

Dot Voting

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Una técnica de votación rápida y visual que revela consenso del equipo sin discusión extensa—esencial para talleres de priorización.

¿Qué es Dot Voting?

Es silencioso. Es democrático. Es rápido. La persona con la voz más fuerte no domina. El voto de todos cuenta igualmente.

Dovetail

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Dovetail is a user research platform and qualitative data repository. It helps teams organize, analyze, and collaborate on their research data (such as interview transcripts, notes, videos) to find patterns and share insights in a centralized and accessible way.

What Is Dovetail?

Imagine a library for your user knowledge. Instead of books, the shelves contain your [[User Interviews|interviews]], [[Usability Testing|test]] recordings, and survey responses. Dovetail is that library. It allows you not only to store these “books,” but also to highlight the most important passages (highlights), put sticky notes on them (tags), and then group all the notes on the same topic to write a summary (an insight).

Dovetail

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Dovetail es una plataforma de investigación de usuarios y un repositorio de datos cualitativos. Ayuda a los equipos a organizar, analizar y colaborar en los datos de su investigación (como transcripciones de entrevistas, notas, videos) para encontrar patrones y compartir insights de una manera centralizada y accesible.

¿Qué es Dovetail?

Imagina una biblioteca para el conocimiento de tus usuarios. En lugar de libros, las estanterías contienen tus [[Entrevistas de Usuario|entrevistas]], grabaciones de [[Pruebas de Usabilidad|pruebas]], y respuestas de encuestas. Dovetail es esa biblioteca. Te permite no solo almacenar estos “libros”, sino también subrayar los pasajes más importantes (highlights), ponerles notas adhesivas (tags) y luego agrupar todas las notas sobre un mismo tema para escribir un resumen (un insight).

Dovetail

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué es Dovetail?

El Command Pattern en el Diseño de Producto

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Command Pattern es un patrón de diseño de software que encapsula una solicitud o acción del usuario como un objeto independiente. En el mundo del diseño de producto, esto nos permite tratar cada acción (borrar, mover, editar, cambiar color) como una entidad que se puede almacenar, deshacer, rehacer y sincronizar a través de varios usuarios.

¿Por qué el Diseñador debe Conocer el Command Pattern?

Tradicionalmente, el diseño se centraba en el estado final de las pantallas (la foto fija). Sin embargo, los productos modernos (como Figma, Notion o Google Docs) se centran en las acciones que llevan de un estado a otro. El Command Pattern es el lenguaje técnico que permite que estas transiciones sean posibles.

El Command Pattern en el Diseño de Producto

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Por qué el Diseñador debe Conocer el Command Pattern?

El Proceso de Diseño UX: Guía de Principio a Fin

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El flujo de trabajo paso a paso que transforma un problema en una solución centrada en el usuario.

¿Qué es el Proceso de Diseño UX?

Imagina que eres un chef creando un nuevo plato para tu restaurante. No simplemente mezclas ingredientes y esperas que funcione. En cambio, entiendes qué es lo que tus comensales realmente quieren, experimentas con diferentes combinaciones de sabores, pruebas y ajustas, y finalmente lo pruebas con clientes reales antes de agregarlo al menú. Eso es esencialmente lo que hace el proceso de diseño UX: es un enfoque estructurado y metódico para entender las necesidades del usuario y resolver problemas a través del diseño.

El Proceso de Diseño UX: Guía de Principio a Fin

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El flujo de trabajo paso a paso que transforma un problema en una solución centrada en el usuario.

¿Qué es el Proceso de Diseño UX?

Empathy Maps: Understanding Users at a Deeper Level

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

An empathy map is a visual framework for understanding a user’s needs, feelings, and environment by exploring what they think, feel, see, say, do, and hear.

What is an Empathy Map?

Imagine sitting with a user for a day, observing everything they do, listening to everything they say, noticing what frustrates them, what excites them, what others influence their decisions. An empathy map is that day of observation, organized visually. You divide a page into sections: What does the user think? What do they feel? What do they see around them? What do they say to others? What actions do they take? Who influences their decisions? By systematically exploring each dimension, you move beyond assumptions into genuine understanding of what users actually need, what obstacles they face, and what drives their decisions. It’s not about data—it’s about meaning. Data tells you how many users abandoned at checkout; empathy mapping tells you why they abandoned and what would make them stay.

Encuestas de Usuario

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Una encuesta de usuario es un método de investigación, principalmente cuantitativo, que utiliza un conjunto de preguntas estandarizadas para recopilar datos de una muestra grande de usuarios. Permiten medir actitudes, satisfacción, preferencias y recopilar datos demográficos a escala.

¿Qué son las Encuestas de Usuario?

Piensa en la diferencia entre tener una conversación profunda con una persona y hacer un censo nacional. La conversación (Entrevistas de Usuario) te da una riqueza de detalles y contexto sobre una sola persona. El censo (la encuesta) te da datos estadísticos sobre miles de personas a la vez, permitiéndote ver patrones a gran escala, pero sin el detalle individual.

Encuestas de Usuario

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué son las Encuestas de Usuario?

Entrevistas de Usuario

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Una entrevista de usuario es una técnica de investigación cualitativa fundamental en UX. Consiste en una conversación uno a uno con un usuario (o potencial usuario) para obtener una comprensión profunda de sus comportamientos, metas, necesidades, motivaciones y puntos de dolor en relación con un producto o problema.

¿Qué son las Entrevistas de Usuario?

Imagina que eres un doctor. No le dices al paciente “necesitas esta medicina”, primero le preguntas “¿dónde te duele?”, “¿desde cuándo?”, “¿qué has intentado?”. Una entrevista de usuario es similar: es una conversación estructurada para diagnosticar los problemas y necesidades reales de una persona antes de intentar “recetar” una solución. No es una charla casual, es una herramienta de descubrimiento.

Entrevistas de Usuario

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué son las Entrevistas de Usuario?

Entrevistas de Usuario

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Una entrevista de usuario es una técnica de investigación cualitativa en la que un investigador hace preguntas a un usuario (o usuario potencial) para obtener una comprensión profunda de sus comportamientos, necesidades, motivaciones y puntos de dolor en relación con un problema o producto específico.

¿Qué son las Entrevistas de Usuario?

Imagina que eres un periodista preparando un documental. No le envías un cuestionario al protagonista; te sientas con él y tienes una conversación profunda. Haces preguntas abiertas para que te cuente su historia, con sus propias palabras. Quieres entender sus experiencias, sus emociones y lo que le motiva.

Entrevistas de Usuario

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué son las Entrevistas de Usuario?

Error Prevention vs. Recovery: A Forgiving Interface

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Error Prevention seeks to design the system so that the user cannot make mistakes. Error Recovery designs the way out when failure has already occurred, helping the user return to the right path without frustration.

The Forgiving Interface Paradigm

Human beings are fallible by nature: we get distracted, we make typing mistakes, or we don’t fully understand instructions. Mature UX design doesn’t blame the user for their errors but assumes they will happen and designs an ecosystem that mitigates or solves them gracefully. This concept is based on two of Jakob Nielsen’s 10 usability heuristics: #5 (Error prevention) and #9 (Help users recognize, diagnose, and recover from errors).

Especificaciones de Diseño

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Documentación detallada que traduce diseños en instrucciones de desarrollo—el puente entre diseño y código.

¿Qué son Especificaciones de Diseño?

Las especificaciones de diseño son documentos detallados que describen la intención del diseño lo suficientemente preciso para que los desarrolladores puedan implementarlo sin volver a los diseñadores para aclaración. Las especificaciones cubren todo: espaciado (el botón tiene 16px de padding), colores (el azul primario es #0066FF), interacciones (al pasar el ratón, el botón se vuelve 2% más oscuro), y casos borde (estado deshabilitado muestra 50% opacidad).

Especificaciones de Diseño

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Documentación detallada que traduce diseños en instrucciones de desarrollo—el puente entre diseño y código.

¿Qué son Especificaciones de Diseño?

Estados de Carga: La Espera Indulgente en UX

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Un Estado de Carga (Loading State) es la información visual o sonora que se muestra al usuario mientras el sistema procesa una acción (ej. cargar datos de un servidor, subir un archivo o realizar una búsqueda). Un buen diseño de carga elimina el miedo al “sistema congelado”.

¿Por qué el Estado de Carga es Crítico?

El momento en que un usuario pulsa un botón y espera una respuesta es el momento de mayor vulnerabilidad y posible frustración. Sin un estado de carga claro, el usuario no sabe si:

Estados de Carga: La Espera Indulgente en UX

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Por qué el Estado de Carga es Crítico?

El momento en que un usuario pulsa un botón y espera una respuesta es el momento de mayor vulnerabilidad y posible frustración. Sin un estado de carga claro, el usuario no sabe si:

Estrategia de Aliasing y Herencia de Tokens

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Aliasing de tokens consiste en definir un token que hace referencia a otro token en lugar de a un valor bruto (como un hexadecimal o píxeles). La Herencia es la estructura lógica que permite que las decisiones de diseño fluyan de lo más general a lo más específico, garantizando coherencia y flexibilidad total en el sistema.

¿Qué es el Aliasing de Tokens?

Imagina que quieres comprar un coche de “Color Deportivo”.

Estrategia de Aliasing y Herencia de Tokens

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué es el Aliasing de Tokens?

Imagina que quieres comprar un coche de “Color Deportivo”.

Estrategia de Tab Order: El Camino del Usuario de Teclado

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Tab Order es la secuencia exacta en la que un usuario de teclado (pulsando Tab y Shift + Tab) recorre los elementos interactivos de una interfaz. Una buena estrategia de tabulación asegura que el usuario no se pierda, no tenga que dar clics innecesarios y pueda completar sus tareas de forma rápida y lógica.

¿Por qué el Diseñador debe Decidir el Tab Order?

Aunque el orden de tabulación suele ser una consecuencia automática del orden en el código HTML (el DOM), el diseño visual puede ser mucho más complejo. Como diseñadores, a veces creamos layouts con columnas, rejillas (grids) o elementos flotantes que no siguen un orden lineal puro.

Estrategia de Tab Order: El Camino del Usuario de Teclado

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Por qué el Diseñador debe Decidir el Tab Order?

Estrategia y Visión de Diseño

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La Estrategia de Diseño (o Estrategia de UX) es el plan a largo plazo que define cómo la experiencia del usuario contribuirá a los objetivos del negocio. La Visión de Diseño es la imagen inspiradora del futuro que esa estrategia busca alcanzar. Juntas, responden a las preguntas: “¿A dónde queremos llegar?” (Visión) y “¿Cómo llegaremos allí?” (Estrategia).

¿Qué son la Estrategia y la Visión de Diseño?

Imagina que eres el capitán de un barco. La Visión es tu destino final, esa isla paradisíaca que tienes en mente y que motiva a toda la tripulación. La Estrategia es tu plan de navegación: la ruta que trazas en el mapa, las corrientes que vas a aprovechar, los suministros que necesitas y los puertos clave donde te detendrás. Sin la visión, navegas sin rumbo. Sin la estrategia, la visión es solo un sueño.

Estrategia y Visión de Diseño

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué son la Estrategia y la Visión de Diseño?

Estrategias de Escalado Responsivo: UI Líquida

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Las Estrategias de Escalado Responsivo definen cómo se comportan los elementos de una interfaz cuando el espacio disponible cambia. No es solo redimensionar cajas, sino decidir qué elementos crecen, cuáles se apilan, cuáles desaparecen y cuáles mantienen su tamaño original para garantizar la usabilidad en cualquier dispositivo.

El Reto de las Pantallas Infinitas

Hoy en día, diseñamos para un reloj inteligente (Apple Watch) de 30mm y para un monitor curvo de 49 pulgadas. No podemos diseñar una pantalla para cada ancho. Necesitamos una Estrategia de Escalado que sea líquida y resiliente.

Estrategias de Escalado Responsivo: UI Líquida

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Reto de las Pantallas Infinitas

Estrategias de Movimiento Reducido: Motion y Accesibilidad

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Movimiento Reducido es una preferencia de accesibilidad que los usuarios pueden activar en sus sistemas operativos (Windows, macOS, iOS, Android). Cuando se activa, indica a las aplicaciones que eliminen o simplifiquen las animaciones innecesarias (prefers-reduced-motion) para evitar náuseas, mareos o distracciones a personas con trastornos vestibulares o TDAH.

¿Por qué el Diseñador debe Gestionar el Movimiento?

Como diseñadores, amamos las animaciones: zooms, paralaje (parallax), rebotes y transiciones suaves. Sin embargo, para millones de personas, estas animaciones no son “bonitas”; son físicamente dolorosas. El movimiento excesivo puede causar migrañas, desorientación y malestar vestibular.

Estrategias de Movimiento Reducido: Motion y Accesibilidad

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Por qué el Diseñador debe Gestionar el Movimiento?

Estudios de Diario

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Pedir a usuarios que documenten su comportamiento durante días o semanas—captura patrones que nunca verás en un estudio de una sesión.

¿Qué es un Estudio de Diario?

Un estudio de diario pide a participantes que registren sus acciones, pensamientos y sentimientos durante un período extendido—típicamente días, semanas o meses. A diferencia de una sesión de investigación de una hora, los estudios de diario capturan comportamiento en contexto, durante el tiempo, conforme ocurre naturalmente.

Estudios de Diario

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Pedir a usuarios que documenten su comportamiento durante días o semanas—captura patrones que nunca verás en un estudio de una sesión.

¿Qué es un Estudio de Diario?

Evaluaciones Heurísticas

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Una evaluación heurística es un método de inspección de usabilidad en el que uno o varios evaluadores examinan una interfaz y la juzgan en base a un conjunto de principios de usabilidad reconocidos (las “heurísticas”). El objetivo es identificar problemas de usabilidad en el diseño.

¿Qué es una Evaluación Heurística?

Imagina que eres un crítico gastronómico que visita un restaurante. No eres un cliente normal; eres un experto que evalúa el restaurante basándose en un conjunto de criterios establecidos: calidad de los ingredientes, presentación, servicio, ambiente, etc. Al final, produces un informe con tus hallazgos.

Evaluaciones Heurísticas

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué es una Evaluación Heurística?

Evangelización del Diseño

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La evangelización del diseño (o Design Advocacy) es el proceso continuo de promover el valor del diseño centrado en el usuario en toda una organización. Se trata de educar, persuadir e inspirar a los compañeros no diseñadores (ingenieros, product managers, marketing, ventas, ejecutivos) para que entiendan, valoren e integren los principios de diseño en su propio trabajo.

¿Qué es la Evangelización del Diseño?

Imagina que eres un experto en nutrición en una empresa. No te limitas a crear un menú saludable para la cafetería. Das charlas sobre los beneficios de una buena alimentación, pones carteles informativos, ofreces consultas y animas a tus compañeros a tomar decisiones más saludables por sí mismos. No impones una dieta, sino que fomentas una cultura de bienestar.

Evangelización del Diseño

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué es la Evangelización del Diseño?

Executive Presentations

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

An executive presentation is a concise and persuasive form of communication, designed to inform senior leaders and stakeholders, influence their decision-making, and obtain their support (buy-in) for a design or product initiative.

What Is an Executive Presentation?

Imagine you are a screenwriter who has 5 minutes to sell their movie idea to a very busy Hollywood producer. You do not tell them the movie scene by scene. You tell a compelling story: the concept, the protagonist, the conflict, and why it will be a box office hit. You give an “elevator pitch” designed to capture their attention and convince them to invest in your project.

Eye Tracking

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Using eye-tracking technology to measure where users look and for how long—revealing visual attention patterns invisible to observation.

What is Eye Tracking?

Eye-tracking technology uses infrared light and cameras to measure where a user’s eyes fixate on a screen. The equipment records eye position 30-250 times per second. The result: a heatmap showing which areas attract attention and which are ignored.

Eye tracking removes guesswork. You don’t assume users see the top-right corner; you measure it. You don’t guess at attention patterns; you see exactly where eyes land and for how long.

Eye Tracking

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Usar tecnología de eye-tracking para medir dónde miran los usuarios y por cuánto tiempo—revelando patrones de atención visual invisibles.

¿Qué es Eye Tracking?

La tecnología de eye-tracking usa luz infrarroja y cámaras para medir dónde los ojos de un usuario se fijan en una pantalla. El equipo registra posición del ojo 30-250 veces por segundo. El resultado: un heatmap mostrando qué áreas atraen atención y cuáles se ignoran.

Eye Tracking

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Usar tecnología de eye-tracking para medir dónde miran los usuarios y por cuánto tiempo—revelando patrones de atención visual invisibles.

¿Qué es Eye Tracking?

FigJam

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Figma’s whiteboarding tool for collaborative ideation and synthesis—seamlessly integrated with your design files.

What is FigJam?

FigJam is Figma’s answer to collaborative whiteboarding. It’s built into Figma, meaning you can jump from a design file to a whiteboard without leaving the app. It supports real-time collaboration, voting, sticky notes, drawing, and infinite canvas.

Unlike Miro (a standalone tool), FigJam lives inside Figma. If your design system is in Figma, your ideation can happen in FigJam right next to it. Switching between design and thinking is seamless.

FigJam

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La herramienta de pizarra de Figma para ideación colaborativa y síntesis—integrada sin inconvenientes con tus archivos de diseño.

¿Qué es FigJam?

FigJam es la respuesta de Figma a la pizarra colaborativa. Está construida en Figma, lo que significa que puedes saltar de un archivo de diseño a una pizarra sin salir de la app. Apoya colaboración en tiempo real, votación, notas adhesivas, dibujo y canvas infinito.

A diferencia de Miro (herramienta independiente), FigJam vive dentro de Figma. Si tu design system está en Figma, tu ideación puede suceder en FigJam justo al lado. Cambiar entre diseño e ideación es sin inconvenientes.

FigJam

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La herramienta de pizarra de Figma para ideación colaborativa y síntesis—integrada sin inconvenientes con tus archivos de diseño.

¿Qué es FigJam?

Figma for UX Designers: A Complete Guide

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

How to use Figma for wireframing, prototyping, collaboration, and design handoff.

What is Figma?

Imagine a whiteboard that never gets full, that your entire team can draw on at the same time from anywhere in the world, and that automatically saves every change—that’s Figma. Figma is a web-based design tool that lets you create wireframes, mockups, interactive prototypes, and design systems all in one place. Unlike desktop tools like Photoshop or Illustrator, everything lives in the browser. You don’t install anything. You open a link, and your team is already there, collaborating in real-time.

Figma para Diseñadores UX: Guía Completa

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Cómo usar Figma para wireframing, prototipos, colaboración y design handoff.

¿Qué es Figma?

Imagina una pizarra que nunca se llena, en la que tu equipo completo puede dibujar al mismo tiempo desde cualquier lugar del mundo, y que automáticamente guarda cada cambio—eso es Figma. Figma es una herramienta de diseño basada en web que te permite crear wireframes, mockups, prototipos interactivos y design systems todo en un solo lugar. A diferencia de herramientas de escritorio como Photoshop o Illustrator, todo vive en el navegador. No instalas nada. Abres un enlace, y tu equipo ya está allí, colaborando en tiempo real.

Figma para Diseñadores UX: Guía Completa

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Cómo usar Figma para wireframing, prototipos, colaboración y design handoff.

¿Qué es Figma?

Fitts's Law: Reach and Ergonomics in UI

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Fitts’s Law states that the time required to reach a target depends on the distance to the target and the size of the target itself. In short for UX: Make important actions large and close.

What is Fitts’s Law (and why should you care)?

Paul Fitts, an American psychologist, formulated this law in 1954 to measure human movement. In modern interface design, Fitts’s Law is the foundation of ergonomics: if a button is too small or too far from where the cursor (or thumb) is located, the user will take longer to interact and will make more errors due to lack of precision.

Flujos Offline-First: Diseñar para la Desconexión

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La estrategia Offline-First es un enfoque de diseño y desarrollo que asume que el usuario tendrá una conexión a internet intermitente o nula en algún momento. En lugar de tratar el “Offline” como un estado de error, se trata como una característica fundamental del producto. El objetivo es que la aplicación siga funcionando siempre.

El Reto de las Aplicaciones de Producto Modernas

La mayoría de las apps web tradicionales (como Jira o Gmail) suelen romperse o mostrar un dinosaurio de Chrome cuando el Wifi se corta. En el diseño de productos digitales avanzado, como Notion, Figma o Linear, esto ya no es aceptable.

Flujos Offline-First: Diseñar para la Desconexión

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Reto de las Aplicaciones de Producto Modernas

Focus Management: Navigation without a Mouse

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Focus Management is the control of which interface element is selected at any given time to interact with it. It is the backbone of navigation for keyboard users (who press Tab), screen readers, and anyone not using a mouse.

Why the Designer Must Manage Focus?

Imagine walking into a dark room with only a flashlight. The area your flashlight illuminates is “the focus.” If you move the flashlight and, suddenly, the light disappears or jumps to the next room without sense, you’ll feel lost and frustrated.

Form Validation Timing: Reward and Rules

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Validation Timing decides exactly when we communicate to the user whether the information entered is correct or incorrect. Choosing the right moment drastically reduces flow interruption, user anxiety, and form abandonment rates.

Why Validation Timing is Everything

Filling out forms is a taxing task for the human brain. If you interrupt the user at the wrong time, you break their mental flow and create a sense of constant surveillance. Validation should not be a judgment, but a guide that helps finish the task as quickly as possible.

Foundations of the Accessibility Tree: How Machines See

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

The Accessibility Tree is a data structure generated by the browser (based on the DOM) that contains only the information relevant to assistive technologies (such as screen readers or voice dictation). It is not visual; it is a translation of your design into names, roles, states, and values.

Why the Designer should know the Accessibility Tree?

As designers, we often focus on the Visual DOM (colors, shapes, positions). However, for blind or visually impaired users, your design is only what the Accessibility Tree says it is.

Fundamentos del Accessibility Tree: Cómo Ven las Máquinas

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Accessibility Tree (Árbol de Accesibilidad) es una estructura de datos generada por el navegador (basada en el DOM) que contiene solo la información relevante para las tecnologías asistivas (como lectores de pantalla o dictado por voz). No es visual; es una traducción de tu diseño en nombres, roles, estados y valores.

¿Por qué el Diseñador debe Conocer el Árbol de Accesibilidad?

Como diseñadores, solemos centrarnos en el DOM Visual (colores, formas, posiciones). Sin embargo, para los usuarios ciegos o con discapacidad visual, tu diseño es solo lo que el Árbol de Accesibilidad dice que es.

Fundamentos del Accessibility Tree: Cómo Ven las Máquinas

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Por qué el Diseñador debe Conocer el Árbol de Accesibilidad?

Gestalt Principles for UX Designers

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Gestalt principles describe how humans naturally perceive and organize visual information into meaningful patterns and groups.

What are Gestalt Principles?

Imagine looking at a flock of birds. Your brain doesn’t process each bird as a separate element—it instantly recognizes them as a unified group moving together. That instant organization is Gestalt perception at work. Gestalt principles are the rules your users’ brains follow when they look at your interface. They explain why some layouts feel organized while others feel chaotic, even when they contain the same elements. These principles come from early 20th-century psychology research, but they’re as relevant today as ever because human perception hasn’t changed. Understanding them lets you design interfaces that feel naturally organized rather than requiring users to squint and mentally reorganize your layout.

Gestión de Carga Cognitiva en UX

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La Carga Cognitiva es la cantidad total de esfuerzo mental que un usuario debe invertir para completar una tarea o procesar información en una interfaz. Un buen diseño de UX busca minimizar la carga innecesaria para que el usuario pueda concentrarse en lograr su objetivo con el menor roce posible.

Tipos de Carga Cognitiva: El Modelo de Sweller

En psicología cognitiva, se distinguen tres tipos de carga mental. Para un diseñador de UX, entender estos conceptos es la clave para crear interfaces intuitivas:

Gestión de Carga Cognitiva en UX

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Tipos de Carga Cognitiva: El Modelo de Sweller

En psicología cognitiva, se distinguen tres tipos de carga mental. Para un diseñador de UX, entender estos conceptos es la clave para crear interfaces intuitivas:

Gestión de Foco: La Navegación sin Ratón

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La Gestión de Foco es el control de qué elemento de la interfaz está seleccionado en cada momento para interactuar con él. Es la columna vertebral de la navegación para usuarios de teclado (que pulsan Tab), lectores de pantalla y cualquier persona que no use un ratón.

¿Por qué el Diseñador debe Gestionar el Foco?

Imagina que entras en una habitación a oscuras y solo tienes una linterna. La zona que ilumina tu linterna es “el foco”. Si mueves la linterna y, de repente, la luz desaparece o salta a la habitación de al lado sin sentido, te sentirás perdido y frustrado.

Gestión de Foco: La Navegación sin Ratón

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Por qué el Diseñador debe Gestionar el Foco?

Gestión de Personas (Liderazgo de Diseño)

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La Gestión de Personas, en el contexto del diseño, es la práctica de liderar, mentorizar y apoyar a un equipo de diseñadores para que hagan el mejor trabajo de sus carreras. Implica pasar de ser un “hacedor” a ser un “multiplicador”, cuyo éxito se mide por el éxito y el crecimiento del equipo.

¿Qué es la Gestión de Personas en Diseño?

Imagina a un gran chef. En sus inicios, su éxito se medía por los platos increíbles que él mismo cocinaba. Pero cuando se convierte en el chef ejecutivo de un restaurante con estrellas Michelin, su éxito ya no depende de los platos que él cocina, sino de su habilidad para dirigir la cocina, crear un menú excepcional, y formar a otros chefs para que cocinen a un nivel de excelencia. Se convierte en un multiplicador de talento.

Gestión de Personas (Liderazgo de Diseño)

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué es la Gestión de Personas en Diseño?

Gestión de Presupuesto

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La gestión del presupuesto de diseño es el proceso de planificar, asignar y controlar los recursos financieros de un equipo de diseño para asegurar que pueda operar eficazmente y alcanzar sus objetivos estratégicos. Es una responsabilidad clave para los líderes de diseño (Leads, Managers, Directores).

¿Qué es la Gestión de Presupuesto?

Imagina que eres el manager de una banda de rock. Tu presupuesto es el dinero que tienes para el año. Debes decidir cómo usarlo: ¿cuánto para los salarios de los músicos? ¿Cuánto para comprar nuevos instrumentos y equipos (herramientas de software)? ¿Cuánto para alquilar un estudio de grabación (costes de investigación)? ¿Y cuánto para la gira (viajes y conferencias)?

Gestión de Presupuesto

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué es la Gestión de Presupuesto?

Gestionar Proyectos de Diseño

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Gestionar un proyecto de diseño implica planificar, ejecutar y supervisar todas las tareas y recursos relacionados con el diseño de un producto o funcionalidad, desde la investigación inicial hasta la entrega final a desarrollo (handoff), asegurando que se cumplan los objetivos, el cronograma y el presupuesto.

¿Qué es la Gestión de Proyectos de Diseño?

Imagina que eres el director de una película. No solo te preocupas de que la fotografía sea bonita o de que los actores lo hagan bien. Eres responsable de todo: desde el guion inicial (la estrategia), la planificación del rodaje (el plan de proyecto), la gestión del equipo y el presupuesto, hasta la postproducción y el estreno. Te aseguras de que todas las piezas se muevan de forma coordinada para crear la película a tiempo y dentro del presupuesto.

Gestionar Proyectos de Diseño

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué es la Gestión de Proyectos de Diseño?

Google Analytics

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Google Analytics (GA) is a free web analytics platform from Google that tracks and reports on website traffic. For UX designers, it is a fundamental source of [[Quantitative Data]] for understanding at scale how users find and interact with a digital product.

What Is Google Analytics?

Imagine you are the manager of a large shopping mall. Google Analytics is the security cameras and motion sensors. They don’t tell you if people liked a store, but they give you crucial data: how many people entered the mall, through which door, which aisles they walked through, which stores they spent the most time in, and at what point they turned around and left.

Google Analytics

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Google Analytics (GA) es una plataforma de analítica web gratuita de Google que rastrea e informa sobre el tráfico de un sitio web. Para los diseñadores de UX, es una fuente fundamental de [[Datos cuantitativos]] para entender a gran escala cómo los usuarios encuentran e interactúan con un producto digital.

¿Qué es Google Analytics?

Imagina que eres el gerente de un gran centro comercial. Google Analytics son las cámaras de seguridad y los sensores de movimiento. No te dicen si a la gente le gustó una tienda, pero te dan datos cruciales: cuántas personas entraron al centro comercial, por qué puerta lo hicieron, qué pasillos recorrieron, en qué tiendas pasaron más tiempo y en qué punto del recorrido se dieron la vuelta y se fueron.

Google Analytics

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué es Google Analytics?

Hablemos.

Mon, 01 Jan 0001 00:00:00 +0000

Tanto si tienes un proyecto en mente, una pregunta, o simplemente quieres saludar — siempre me alegra saber de ti.

Email

hola@fernandoux.com

Normalmente respondo en menos de 24 horas.

Haptic Feedback Principles: Feeling the Interface

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Haptic Feedback is the physical response (vibration or tactile impact) that a mobile device or wearable emits in response to a user action. It is the third communication channel, along with sight and hearing, which allows the user to “feel” that something has happened without needing to look at the screen.

Why Haptics are Critical for UX?

We live in a world full of visual distractions. Human beings have evolved to feel textures and physical responses when manipulating objects. On a smooth glass screen, we lose that sense.

Heuristic Evaluations

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A heuristic evaluation is a usability inspection method in which one or more evaluators examine an interface and judge it against a set of recognized usability principles (the “heuristics”). The goal is to identify usability problems in the design.

What Is a Heuristic Evaluation?

Imagine you are a food critic visiting a restaurant. You are not a regular customer; you are an expert who evaluates the restaurant based on a set of established criteria: ingredient quality, presentation, service, ambiance, etc. At the end, you produce a report with your findings.

Hick's Law: Decision and Response Time

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Hick’s Law states that the time it takes for a person to make a decision increases logarithmically as the number and complexity of choices increase. In UX, this translates into a golden rule: Less is faster.

What is Hick’s Law (and why should you care)?

William Edmund Hick and Ray Hyman discovered in the early 1950s that adding extra options not only slows down the user linearly but can actually paralyze them or make them feel overwhelmed (a phenomenon known as “Analysis Paralysis”).

Hotjar for UX

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A behavior analytics tool that shows where users click, scroll, and spend time—visual data about real user behavior.

What is Hotjar?

Hotjar is behavior analytics for websites. It records user sessions and creates heatmaps showing where users click, scroll, and spend time. You see actual user behavior, not guesses.

Hotjar answers: “Where do users look? Where do they click? Where do they get stuck?” Video recordings show real users struggling. Heatmaps show aggregate patterns.

Hotjar para UX

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Una herramienta de análisis de comportamiento que muestra dónde hacen clic, desplazan y pasan tiempo los usuarios—datos visuales sobre comportamiento real del usuario.

¿Qué es Hotjar?

Hotjar es análisis de comportamiento para sitios web. Graba sesiones de usuario y crea heatmaps mostrando dónde hacen clic, se desplazan y pasan tiempo los usuarios. Ves comportamiento real del usuario, no suposiciones.

Hotjar responde: “¿Dónde miran los usuarios? ¿Dónde hacen clic? ¿Dónde se quedan atrapados?” Las grabaciones de video muestran usuarios reales lucha. Los heatmaps muestran patrones agregados.

Hotjar para UX

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Una herramienta de análisis de comportamiento que muestra dónde hacen clic, desplazan y pasan tiempo los usuarios—datos visuales sobre comportamiento real del usuario.

¿Qué es Hotjar?

How to Write a UX Case Study

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

The structure and narrative that turns design work into a compelling story—the foundation of a strong design portfolio.

What is a UX Case Study?

A UX case study tells the story of a design project from problem through solution to impact. It’s not a portfolio piece showing pretty mockups. It’s a narrative explaining your thinking, decisions, and results.

A case study answers: What was the problem? Why did it matter? How did you solve it? What did you learn? A strong case study shows your process, not just your output.

Inclusive Design vs. Accessible Design: Why Both Matter

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Accessible design removes barriers for people with disabilities; inclusive design considers the broadest possible range of human diversity from the start.

What’s the Difference?

Imagine a curb cut—a sloped section of sidewalk for wheelchair users. It technically makes sidewalks accessible to people with mobility challenges. But after implementation, everyone uses them: parents pushing strollers, delivery workers pushing carts, elderly people preferring the gentle slope, and travelers pulling luggage. Curb cuts are accessible but they’re also inclusive—they benefit a much wider population than just the disability they were designed for. Accessible design specifically removes barriers for people with disabilities through standards like WCAG compliance. Inclusive design takes a broader view: during initial planning, consider the full spectrum of human difference—disabilities, cultural backgrounds, age, experience level, economic status, language—and design for that diversity from the beginning. Accessibility targets a specific population; inclusion targets everyone.

Indagación Contextual

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Observar usuarios en su ambiente natural mientras trabajan—revela contexto que las entrevistas y encuestas nunca capturan.

¿Qué es Indagación Contextual?

La indagación contextual es un método de investigación donde observas a usuarios en su ambiente nativo mientras realizan tareas reales. A diferencia de un estudio de laboratorio donde un usuario se sienta en un escritorio, la indagación contextual sucede donde los usuarios realmente trabajan. Un contador en su oficina. Un chef en una cocina. Un comprador en una tienda.

Indagación Contextual

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Observar usuarios en su ambiente natural mientras trabajan—revela contexto que las entrevistas y encuestas nunca capturan.

¿Qué es Indagación Contextual?

Information Architecture

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Information Architecture (IA) is the practice of deciding how to organize, structure, and label the content of a digital product (such as a website or application) in a way that is understandable and allows users to find information and complete tasks efficiently.

What is Information Architecture?

Imagine walking into a supermarket. You know the products are organized in some way: fruits and vegetables are together, dairy in another section, cleaning products in yet another. There are aisles with clear labels to help you navigate. Without that organization, finding the milk would be a nightmare.

Input Masking Dangers: Usability vs. Format

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Input Masking is the technique of visually forcing a data format while the user types (e.g., automatically adding hyphens in a date DD / MM / YYYY). Although it seems like a visual aid, if implemented incorrectly, it is one of the greatest sources of error, frustration, and form abandonment.

The Input Mask Dilemma

Imagine you are typing your phone number and the field decides to put parentheses and spaces for you. If you make a mistake in one number and press Backspace, the mask deletes not only the number but also the automatic space, and then re-inserts it for you. This infinite loop is the definition of a poor user experience.

Intrinsic Layout Decisions: Content vs. Boxes

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Intrinsic Layout Decisions are design rules that define how interface elements are positioned and scaled based on the needs of their own content (such as text width or image size) rather than being forced by an external grid (Layout Grid).

Why Intrinsic Layout is the best option for dynamic products?

Historically, we designed websites with 12-column grids. It’s a safe and predictable system, but fragile. If a username is too long, the grid design breaks or text is cut off.

Intrinsic Sizing Behavior in UI

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Intrinsic Sizing is a design behavior where an element’s dimensions (width or height) are determined by its own content (letters, images, icons) rather than being forced by an external container with fixed measurements.

What is Intrinsic Sizing?

Imagine you want to put shirts in a suitcase.

Extrinsic Sizing: The suitcase has a fixed size of 50x40 cm. No matter if you put in 1 shirt or 20, the suitcase measures the same.
Intrinsic Sizing: The suitcase is made of elastic fabric and adjusts exactly to the volume of the shirts you put in. If you put in one shirt, it’s small; if you put in 20, it stretches.

In UI, this means a button doesn’t measure “200px,” but rather Text Width + Lateral Paddings. If the text changes from “OK” to “Unsubscribe,” the button widens automatically.

Investigación Remota con Usuarios

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Conducir investigación de usuario sin restricciones de viaje o ubicación—rápido, escalable y accesible a participantes globales.

¿Qué es Investigación Remota con Usuarios?

La investigación remota con usuarios es observar y entrevistar a usuarios vía llamada de video, compartir pantalla o sesiones grabadas en lugar de en persona. Un participante en Tokio y un investigador en Nueva York pueden conectarse instantáneamente. No se necesita viaje. Sin restricciones de ubicación.

Investigación Remota con Usuarios

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Conducir investigación de usuario sin restricciones de viaje o ubicación—rápido, escalable y accesible a participantes globales.

¿Qué es Investigación Remota con Usuarios?

Jerarquía Visual VS Jerarquía del DOM: Accesibilidad

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La Jerarquía Visual es el orden en que un usuario ve y procesa la información en una pantalla basándose en el tamaño, color, posición y contraste. La Jerarquía del DOM (Document Object Model) es el orden en que el código HTML estructura y lee esa misma información. Alinear ambas es la clave de la accesibilidad y el SEO.

¿Por qué el Diseñador debe Conocer la Jerarquía del DOM?

Como diseñadores, solemos “dibujar” elementos en el lienzo de Figma sin preocuparnos de su orden interno. Sin embargo, para un usuario de Lector de Pantalla o de Teclado, tu diseño no es una imagen; es una lista secuencial de elementos.

Jerarquía Visual VS Jerarquía del DOM: Accesibilidad

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Por qué el Diseñador debe Conocer la Jerarquía del DOM?

Jerarquía Visual: Guiando a los Usuarios a través de tu Diseño

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La Jerarquía Visual es la disposición de los elementos de diseño para guiar la atención de los usuarios hacia la información o las acciones más importantes de forma intuitiva.

¿Qué es la Jerarquía Visual?

Entra en una tienda de comestibles y mira el mostrador. Los grandes carteles de oferta captan tu atención primero, luego los nombres específicos de los productos, luego los precios y, finalmente, los detalles más pequeños. Tu ojo sigue un camino deliberado. Eso es la jerarquía visual.

Jobs to Be Done

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Entender qué intentan lograr los usuarios (no qué característica quieren) revela oportunidades de diseño que otros pierden.

¿Qué es Jobs to Be Done?

Jobs to Be Done (JTBD) es un marco para entender la motivación del usuario. En lugar de preguntar “¿qué quieren los usuarios en un producto?”, JTBD pregunta “¿qué intenta lograr el usuario?”

Un cliente no está comprando un taladro. Está comprando la capacidad de hacer un agujero. Un cliente no está comprando una aplicación de citas. Está intentando conocer a alguien. Un cliente no está comprando una herramienta de gestión de proyectos. Está intentando organizar el trabajo de su equipo.

Jobs to Be Done

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Entender qué intentan lograr los usuarios (no qué característica quieren) revela oportunidades de diseño que otros pierden.

¿Qué es Jobs to Be Done?

Jobs to Be Done Framework

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Understanding what users are trying to accomplish (not what feature they want) reveals design opportunities others miss.

What is Jobs to Be Done?

Jobs to Be Done (JTBD) is a framework for understanding user motivation. Instead of asking “what do users want in a product?”, JTBD asks “what is the user trying to accomplish?”

A customer isn’t buying a drill. They’re buying the ability to make a hole. A customer isn’t buying a dating app. They’re trying to meet someone. A customer isn’t buying a project management tool. They’re trying to organize their team’s work.

KPIs de UX

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Un KPI (Key Performance Indicator, o Indicador Clave de Rendimiento) de UX es una métrica cuantificable que un equipo utiliza para medir y evaluar el éxito de la experiencia del usuario a lo largo del tiempo. Ayudan a los equipos a entender si sus esfuerzos de diseño están logrando los resultados deseados.

¿Qué son los KPIs de UX?

Imagina que conduces un coche. El salpicadero te da información vital: el velocímetro (velocidad), el indicador de combustible (autonomía), la temperatura del motor. No podrías conducir de forma segura o eficiente sin ellos. Los KPIs de UX son el salpicadero de tu producto: son los indicadores que te dicen si la experiencia de usuario va por buen camino o si hay problemas que necesitan tu atención.

KPIs de UX

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué son los KPIs de UX?

La Ley de Fitts: Alcance y Ergonomía en UI

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La Ley de Fitts establece que el tiempo necesario para alcanzar un objetivo depende de la distancia al objetivo y del tamaño del propio objetivo. En resumen para UX: Haz que las acciones importantes sean grandes y estén cerca.

¿Qué es la Ley de Fitts (y por qué debería importarte)?

Paul Fitts, un psicólogo estadounidense, formuló esta ley en 1954 para medir el movimiento humano. En el diseño de interfaces moderno, la Ley de Fitts es la base de la ergonomía: si un botón es demasiado pequeño o está demasiado lejos de donde se encuentra el cursor (o el pulgar), el usuario tardará más tiempo en interactuar y cometerá más errores por falta de precisión.

La Ley de Fitts: Alcance y Ergonomía en UI

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué es la Ley de Fitts (y por qué debería importarte)?

La Ley de Hick: Decisión y Tiempo de Respuesta

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La Ley de Hick establece que el tiempo que tarda una persona en tomar una decisión aumenta logarítmicamente a medida que aumenta el número y la complejidad de las opciones disponibles. En UX, esto se traduce en una regla de oro: Menos es más rápido.

¿Qué es la Ley de Hick (y por qué debería importarte)?

William Edmund Hick y Ray Hyman descubrieron a principios de la década de 1950 que añadir opciones adicionales no solo ralentiza al usuario de forma lineal, sino que puede llegar a paralizarlo o hacer que se sienta abrumado (fenómeno conocido como “Parálisis por Análisis”).

La Ley de Hick: Decisión y Tiempo de Respuesta

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué es la Ley de Hick (y por qué debería importarte)?

Latency Budgets in UX: Response Times

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A Latency Budget is the maximum time allowed (in milliseconds) for a user action to produce a visible response in the interface. It is not a technical metric; it is a design commitment to ensure experience fluidity.

Why the Designer should establish Latency Budgets?

Often, designers create complex flows and heavy interactions without considering the technical cost. If an opening animation of a menu takes 500ms and the server another 1000ms to return data, the user will feel the application is a heavy boat.

Layout Decisions: Grid vs. Intrinsic

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Layout Grids are predefined grids that force elements to follow a rigid structure of specific columns and distances. Intrinsic Layout is an approach where the size and position of elements depend on their content and internal relationship, without relying on an external grid.

The Modern Layout Dilemma

In the web of the early 2010s, everything was based on 12-column grids. Today, thanks to the capabilities of Figma (Auto Layout) and modern browsers (Flexbox/CSS Grid), design is becoming more fluid and less dependent on these fixed structures. The key question is: When should we force the grid and when should we let content rule the space?

Let's Talk.

Mon, 01 Jan 0001 00:00:00 +0000

Whether you have a project in mind, a question, or just want to say hello — I’m always happy to hear from you.

Email

hola@fernandoux.com

I usually respond within 24 hours.

Loading States: The Indulgent Wait in UX

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A Loading State is the visual or audible information shown to the user while the system processes an action (e.g., loading data from a server, uploading a file, or performing a search). Good loading design eliminates the fear of a “frozen system.”

Why Loading States are Critical

The moment a user clicks a button and waits for a response is the time of greatest vulnerability and potential frustration. Without a clear loading state, the user doesn’t know if:

Lógica de Constraints y Auto Layout en Figma

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Las Constraints definen cómo se posicionan y escalan los elementos dentro de un contenedor estático. El Auto Layout es un sistema de diseño flexible que crea contenedores que se expanden o contraen automáticamente según su contenido. Juntos, forman la base de cualquier diseño responsivo moderno en Figma.

¿Por qué son Vitales estas Herramientas?

En el diseño de productos digitales moderno, no diseñamos para una única pantalla estática. Diseñamos para una infinidad de dispositivos y contextos. El uso correcto de Constraints y Auto Layout te permite:

Lógica de Constraints y Auto Layout en Figma

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Por qué son Vitales estas Herramientas?

Lyssna

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A lightweight feedback collection tool that gathers user responses through simple links—no installations required.

What is Lyssna?

Lyssna is a feedback collection platform for designers. Paste a link to a prototype, design, or survey. Share the link. Collect user feedback. That’s it.

Unlike UserTesting or Respondent (which record full sessions), Lyssna is lightweight. Users answer questions you ask. Quick feedback. Lower cost. Faster turnaround.

One sentence punch: Lyssna is the fastest way to collect user feedback on designs—share a link, get responses in hours.**

Lyssna

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Una herramienta ligera de recolección de feedback que recopila respuestas de usuarios a través de links simples—sin instalaciones requeridas.

¿Qué es Lyssna?

Lyssna es una plataforma de recolección de feedback para diseñadores. Pega un link a un prototipo, diseño o encuesta. Comparte el link. Recopila feedback de usuario. Eso es todo.

A diferencia de UserTesting o Respondent (que graban sesiones completas), Lyssna es ligera. Los usuarios responden preguntas que haces. Feedback rápido. Costo menor. Turnaround más rápido.

Lyssna

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Una herramienta ligera de recolección de feedback que recopila respuestas de usuarios a través de links simples—sin instalaciones requeridas.

¿Qué es Lyssna?

Lyssna es una plataforma de recolección de feedback para diseñadores. Pega un link a un prototipo, diseño o encuesta. Comparte el link. Recopila feedback de usuario. Eso es todo.

A diferencia de UserTesting o Respondent (que graban sesiones completas), Lyssna es ligera. Los usuarios responden preguntas que haces. Feedback rápido. Costo menor. Turnaround más rápido.

Managing Design Projects

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Managing a design project involves planning, executing, and overseeing all tasks and resources related to the design of a product or feature, from initial research to the final handoff to development, ensuring that objectives, timeline, and budget are met.

What Is Design Project Management?

Imagine you are a movie director. You do not just worry about making the cinematography beautiful or the actors performing well. You are responsible for everything: from the initial script (the strategy), the shooting schedule (the project plan), managing the team and the budget, to post-production and the premiere. You make sure all the pieces move in a coordinated way to deliver the movie on time and within budget.

Mapas de Empatía: Entendiendo a los Usuarios a un Nivel Profundo

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Un Mapa de Empatía es un marco visual para entender las necesidades, sentimientos y entorno de un usuario explorando lo que piensa, siente, ve, dice, hace y oye.

¿Qué es un Mapa de Empatía?

Imagina sentarte con un usuario durante un día entero, observando todo lo que hace, escuchando todo lo que dice, notando qué le frustra, qué le emociona y qué otras personas influyen en sus decisiones. Un mapa de empatía es ese día de observación, organizado visualmente. Divides una página en secciones: ¿Qué piensa el usuario? ¿Qué siente? ¿Qué ve a su alrededor? ¿Qué les dice a los demás? ¿Qué acciones toma? ¿Quién influye en sus decisiones?

Mapas de Sitio

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Un diagrama jerárquico que muestra todas las páginas y cómo se relacionan—el plano antes de diseñar una sola página.

¿Qué es un Mapa de Sitio?

Un mapa de sitio es una representación visual de la estructura de un sitio web. Muestra cada página y cómo se conectan. La página de inicio se sienta en la parte superior. Las páginas de productos se ramifican hacia abajo. Las páginas de soporte se ramifican por separado. Cada página tiene un padre claro y hermanos.

Mapas de Sitio

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Un diagrama jerárquico que muestra todas las páginas y cómo se relacionan—el plano antes de diseñar una sola página.

¿Qué es un Mapa de Sitio?

Matemáticas del Contraste de Color: Legibilidad y Ratio

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Contraste de Color es la diferencia de luminosidad entre el texto (primer plano) y el fondo. Las pautas de accesibilidad WCAG 2.1 establecen ratios matemáticos de contraste específicos (ej. 4.5:1) que deben cumplirse para que el contenido sea legible por el mayor número posible de personas.

¿Por qué el Diseñador debe Conocer la Matemática del Color?

Diseñar solo por “lo que se ve bien” en tu monitor 5K de alta gama es una trampa peligrosa. Una gran parte de la población mundial tiene algún tipo de discapacidad visual o utiliza sus dispositivos bajo la luz directa del sol.

Matemáticas del Contraste de Color: Legibilidad y Ratio

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Por qué el Diseñador debe Conocer la Matemática del Color?

Maze

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Maze is a “rapid testing” platform that integrates directly with design tools like Figma, Adobe XD, and Sketch. It allows designers to quickly test their prototypes, collect feedback, and obtain quantitative usability metrics in an unmoderated fashion.

What Is Maze?

Imagine you have designed an interactive [[Prototypes|prototype]] in Figma. You want to know if people understand it, but you don’t have time to organize 5 moderated [[Usability Testing]] sessions. With Maze, you can send a link to your prototype to hundreds of people and, within hours, get an automatic report with metrics like success rate, the paths users took, and click heatmaps.

Maze

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Maze es una plataforma de “rapid testing” que se integra directamente con herramientas de diseño como Figma, Adobe XD y Sketch. Permite a los diseñadores probar sus prototipos rápidamente, recopilar feedback y obtener métricas cuantitativas de usabilidad de forma no moderada.

¿Qué es Maze?

Imagina que has diseñado un [[Prototipos|prototipo]] interactivo en Figma. Quieres saber si la gente lo entiende, pero no tienes tiempo para organizar 5 sesiones de [[Pruebas de Usabilidad]] moderadas. Con Maze, puedes enviar un enlace a tu prototipo a cientos de personas y, en cuestión de horas, obtener un informe automático con métricas como la tasa de éxito, los caminos que tomaron los usuarios y mapas de calor de clics.

Maze

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué es Maze?

Mental Models of Undo and Redo: Time in the Interface

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Mental Models of Undo and Redo are how the user understands that they can go back or forward in the history of their actions. Correct Undo design reduces user anxiety, allowing them to experiment freely with the interface without fear of making irreversible errors.

The Power of Indulgence (Forgiving UI)

The “Undo” button is the most powerful psychological safety tool in interface design. When a user knows they have a “safety net” under their feet, their cognitive load decreases and their willingness to explore new features increases dramatically. Without Undo, the user becomes conservative and fearful with every click.

Mental Models: Designing for How Users Think

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A mental model is the internal framework users build about how a system works, shaped by past experiences and expectations.

What is a Mental Model?

Think about opening a new type of door for the first time. Your brain instantly compares it to every other door you’ve encountered—you look for a handle, expect it to open in a certain direction, and assume it follows familiar push-or-pull logic. If that door works differently than your mental model predicts, you hesitate or feel confused. Mental models are exactly these internal templates that your users carry into your product. They’re built from past experiences, cultural conventions, and learned patterns. When your design aligns with how users already think the world works, they navigate with confidence.

Miro

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

An infinite digital whiteboard for collaborative design, diagramming, and team alignment—essential for distributed teams.

What is Miro?

Miro is a collaborative whiteboarding platform that works like a physical whiteboard but digital and synchronous. Multiple people can draw, write, sticky-note, and diagram simultaneously. Real-time collaboration means everyone sees updates instantly.

Miro works for user journeys, empathy mapping, site maps, brainstorming, personas, workflows, and any diagram that requires group thinking. It’s not a design tool like Figma; it’s a thinking tool for teams.

Miro

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Una pizarra digital infinita para diseño colaborativo, diagramas y alineación de equipo—esencial para equipos distribuidos.

¿Qué es Miro?

Miro es una plataforma de pizarra colaborativa que funciona como una pizarra física pero digital y síncrona. Múltiples personas pueden dibujar, escribir, agregar notas adhesivas y diagramar simultáneamente. La colaboración en tiempo real significa que todos ven actualizaciones instantáneamente.

Miro funciona para viajes de usuario, mapeamiento de empatía, mapas de sitio, brainstorming, personas, workflows y cualquier diagrama que requiera pensamiento de grupo. No es una herramienta de diseño como Figma; es una herramienta de pensamiento para equipos.

Miro

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Una pizarra digital infinita para diseño colaborativo, diagramas y alineación de equipo—esencial para equipos distribuidos.

¿Qué es Miro?

Mixpanel

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Mixpanel is an advanced product analytics platform that focuses on event tracking to understand user behavior over time. Unlike [[Google Analytics]], which is page-centric, Mixpanel is user-centric and action-centric (events), tracking what users do within an application.

What Is Mixpanel?

Imagine your product is a video game. [[Google Analytics]] would tell you how many players have entered each room of the castle. Mixpanel, on the other hand, would tell you how many times player “Link” has used the sword, how many have opened the treasure chest, and how many of those who got the sword are still playing a week later.

Mixpanel

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Mixpanel es una plataforma de analítica de producto avanzada que se centra en el seguimiento de eventos para entender el comportamiento del usuario a lo largo del tiempo. A diferencia de [[Google Analytics]] que está centrado en la página, Mixpanel está centrado en el usuario y en las acciones (eventos) que este realiza dentro de una aplicación.

¿Qué es Mixpanel?

Imagina que tu producto es un videojuego. [[Google Analytics]] te diría cuántos jugadores han entrado en cada sala del castillo. Mixpanel, en cambio, te diría cuántas veces el jugador “Link” ha usado la espada, cuántos han abierto el cofre del tesoro, y cuántos de los que consiguieron la espada siguen jugando una semana después.

Mixpanel

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué es Mixpanel?

Mobile-First Design: Principles and Practice

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Mobile-first design is an approach that prioritizes designing for mobile devices first, then progressively enhancing for larger screens.

What is Mobile-First Design?

Most digital products today are used on phones more than desktops. Yet many design teams start sketching on large monitors, then squeeze features onto phone screens like an afterthought. Mobile-first design reverses this: start with a phone-sized canvas, design for that constraint, then add complexity as screen size grows. It’s not about making phone versions work—it’s about recognizing mobile as your primary platform and desktop as an enhancement. The constraint of mobile forces clarity and focus. You can’t include every feature or overcomplicate interactions; limited screen real estate demands prioritization. What emerges is often a better product for all users.

Mockups

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

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.

What are Mockups?

If a wireframe is the blueprint of a house, a mockup is the color model or 3D render that shows how the finished house will look. It’s a static (non-interactive) design that communicates the art direction and visual design of the product.

Mockups

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

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.

¿Qué son los Mockups?

Si un wireframe es el plano de una casa, un mockup es la maqueta a color o el render 3D que muestra cómo se verá la casa terminada. Es un diseño estático (no interactivo) que comunica la dirección de arte y el diseño visual del producto.

Mockups

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué son los Mockups?

Modelado de Presencia en Tiempo Real: UX Colaborativo

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Modelado de Presencia es el conjunto de indicadores visuales y funcionales que comunican a un usuario quién más está con él en el mismo espacio digital (ej. una página de Notion o un archivo de Figma) y qué están haciendo exactamente en ese preciso momento.

La Magia de No Estar Solo: El Sentimiento de Presencia

Hace unos años, las aplicaciones eran solitarias: trabajabas, guardabas y cerrabas. Hoy, las aplicaciones de producto son multijugador. El modelado de presencia no es solo un adorno estético; es una herramienta crítica de comunicación que evita que los usuarios cometan errores (como editar el mismo objeto al mismo tiempo) y fomenta la colaboración fluida.

Modelado de Presencia en Tiempo Real: UX Colaborativo

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La Magia de No Estar Solo: El Sentimiento de Presencia

Modelo de Madurez UX

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Un marco para evaluar la madurez de UX de la organización y planificar el viaje de diseño ad-hoc a estrategia dirigida por diseño.

¿Qué es Madurez de UX?

La madurez de UX es cuán sistemáticamente una organización integra UX en la toma de decisiones. La madurez va desde Nivel 0 (sin UX) a Nivel 4 (organización dirigida por diseño).

Nivel 0: Sin pensamiento de UX. Decisiones basadas en intuición. Nivel 1: UX ad-hoc. Los diseñadores reaccionan a crisis. Sin estrategia. Nivel 2: UX emergente. Los procesos existen. Se consulta al diseño, no lidera. Nivel 3: UX estratégico. El diseño es fundacional. Las métricas guían decisiones. Nivel 4: Dirigida por diseño. La organización prioriza UX. Cada decisión es centrada en el usuario.

Modelo de Madurez UX

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Un marco para evaluar la madurez de UX de la organización y planificar el viaje de diseño ad-hoc a estrategia dirigida por diseño.

¿Qué es Madurez de UX?

La madurez de UX es cuán sistemáticamente una organización integra UX en la toma de decisiones. La madurez va desde Nivel 0 (sin UX) a Nivel 4 (organización dirigida por diseño).

Modelos Mentales de Undo y Redo: El Tiempo en la Interfaz

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Los Modelos Mentales de Undo y Redo son la forma en que el usuario entiende que puede retroceder o avanzar en el historial de sus acciones. Un diseño correcto de Undo reduce la ansiedad del usuario, permitiéndole experimentar libremente con la interfaz sin miedo a cometer errores irreversibles.

El Poder de la Indulgencia (Forgiving UI)

El botón de “Deshacer” es la herramienta de seguridad psicológica más potente en el diseño de interfaces. Cuando un usuario sabe que tiene una “red de seguridad” bajo sus pies, su carga cognitiva disminuye y su disposición a explorar nuevas funcionalidades aumenta drásticamente. Sin Undo, el usuario se vuelve conservador y temeroso ante cada clic.

Modelos Mentales de Undo y Redo: El Tiempo en la Interfaz

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Poder de la Indulgencia (Forgiving UI)

Modelos Mentales: Diseña Para Cómo Piensa el Usuario

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Un modelo mental es el marco interno que los usuarios construyen sobre cómo funciona un sistema, moldeado por experiencias pasadas y expectativas.

¿Qué es un Modelo Mental?

Piensa en abrir un tipo de puerta nuevo por primera vez. Tu cerebro instantly lo compara con todas las otras puertas que has encontrado—buscas un tirador, esperas que se abra en cierta dirección, y asumes que sigue lógica familiar de empujar-o-tirar. Si esa puerta funciona diferente que tu modelo mental predice, dudas o te confundes. Los modelos mentales son exactamente esos templates internos que tus usuarios llevan dentro de tu producto. Se construyen de experiencias pasadas, convenciones culturales, y patrones aprendidos. Cuando tu diseño se alinea con cómo los usuarios ya piensan sobre cómo funciona el mundo, navegan con confianza.

Modelos Mentales: Diseña Para Cómo Piensa el Usuario

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Un modelo mental es el marco interno que los usuarios construyen sobre cómo funciona un sistema, moldeado por experiencias pasadas y expectativas.

¿Qué es un Modelo Mental?

Notion for UX

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A documentation and knowledge base tool that centralizes UX docs, research, design systems, and team processes—your design system’s home.

What is Notion for UX?

Notion is a all-in-one workspace for documentation. Designers use it to document design systems, research findings, design specifications, and team processes. It’s not a design tool; it’s a knowledge repository.

Think of it as your design team’s wiki. Design specs live here. Personas live here. Brand guidelines live here. Research insights live here. Everything interconnected with links and databases.

Notion para UX

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Una herramienta de documentación y base de conocimiento que centraliza docs de UX, investigación, design systems y procesos de equipo—el hogar de tu sistema de diseño.

¿Qué es Notion para UX?

Notion es un workspace todo-en-uno para documentación. Los diseñadores lo usan para documentar design systems, hallazgos de investigación, especificaciones de diseño y procesos de equipo. No es una herramienta de diseño; es un repositorio de conocimiento.

Piénsalo como el wiki de tu equipo de diseño. Las especificaciones de diseño viven aquí. Las personas viven aquí. Las directrices de marca viven aquí. Los insights de investigación viven aquí. Todo interconectado con links y bases de datos.

Notion para UX

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Una herramienta de documentación y base de conocimiento que centraliza docs de UX, investigación, design systems y procesos de equipo—el hogar de tu sistema de diseño.

¿Qué es Notion para UX?

Offline-First Flows: Designing for Disconnection

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

The Offline-First strategy is a design and development approach that assumes the user will have an intermittent or null internet connection at some point. Instead of treating “Offline” as an error state, it is treated as a fundamental feature of the product. The goal is for the application to always keep working.

The Challenge of Modern Product Applications

Most traditional web apps (like Jira or Gmail) usually break or show a Chrome dinosaur when Wifi is cut. In advanced digital product design, such as Notion, Figma, or Linear, this is no longer acceptable.

Optimal Workshop

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A suite of tools for information architecture validation—card sort, tree test, and click tests reveal how users organize and find information.

What is Optimal Workshop?

Optimal Workshop is a research platform specializing in information architecture (IA). It provides three main tools: card sorting, tree testing, and first-click testing. All three measure how users organize, navigate, and find information.

Card sorting asks: “How would you organize these items?” Tree testing asks: “Can you find this item in this structure?” First-click testing asks: “Where would you click to find this item?” Each reveals different aspects of IA.

Optimal Workshop

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Un conjunto de herramientas para validación de arquitectura de información—card sort, tree test y click tests revelan cómo los usuarios organizan e encuentran información.

¿Qué es Optimal Workshop?

Optimal Workshop es una plataforma de investigación especializada en arquitectura de información (IA). Proporciona tres herramientas principales: card sorting, tree testing y first-click testing. Las tres miden cómo los usuarios organizan, navegan y encuentran información.

Card sorting pregunta: “¿Cómo organizarías estos items?” Tree testing pregunta: “¿Puedes encontrar este item en esta estructura?” First-click testing pregunta: “¿Dónde harías clic para encontrar este item?” Cada una revela aspectos diferentes de IA.

Optimal Workshop

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Un conjunto de herramientas para validación de arquitectura de información—card sort, tree test y click tests revelan cómo los usuarios organizan e encuentran información.

¿Qué es Optimal Workshop?

Optimistic Updates and Rollback UX

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Optimistic Updates are an interaction design technique where the user interface updates immediately after an action (such as giving a “Like” or sending a message), assuming the server will process the request successfully, without waiting for its actual response. Rollback is the process of reversing that visual change if the request ends up failing.

The Secret of Speed in Modern Apps

Imagine you press the “Like” button on Instagram. If the heart icon didn’t turn red until the server returned an “OK,” the application would feel slow and heavy.

Optimizar los Procesos de Diseño (DesignOps)

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Optimizar los procesos de diseño (a menudo parte de la disciplina de DesignOps) es el trabajo de analizar, estandarizar y mejorar los flujos de trabajo del equipo de diseño para aumentar la eficiencia, la calidad y el impacto. Se trata de diseñar cómo se diseña.

¿Qué es la Optimización de Procesos (DesignOps)?

Imagina un equipo de chefs de élite. Además de los chefs que cocinan (los diseñadores), hay una figura clave: el “Jefe de Cocina” o “Sous Chef”. Esta persona no cocina los platos principales, sino que se asegura de que la cocina funcione como un reloj: que los cuchillos estén afilados (herramientas), que las recetas estén estandarizadas ([[Sistema de Diseño]]), que la comunicación entre los cocineros sea fluida (rituales) y que los ingredientes lleguen a tiempo (procesos).

Optimizar los Procesos de Diseño (DesignOps)

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué es la Optimización de Procesos (DesignOps)?

Optimizing Design Processes (DesignOps)

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Optimizing design processes (often part of the DesignOps discipline) is the work of analyzing, standardizing, and improving the design team’s workflows to increase efficiency, quality, and impact. It is about designing how you design.

What Is Process Optimization (DesignOps)?

Imagine a team of elite chefs. In addition to the chefs who cook (the designers), there is a key figure: the “Head Chef” or “Sous Chef.” This person does not cook the main dishes; instead, they make sure the kitchen runs like clockwork: the knives are sharp (tools), the recipes are standardized ([[Design System]]), communication between the cooks is smooth (rituals), and the ingredients arrive on time (processes).

Organización de Props de Componentes: Estructura y Jerarquía

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La Organización de Props consiste en estructurar y priorizar las propiedades de un componente para que su uso sea intuitivo y predecible. Esto reduce la carga cognitiva de los diseñadores en Figma y de los desarrolladores en el código, facilitando la creación de interfaces consistentes.

¿Por qué importa el orden de las Props?

Imagina un componente complejo (ej. un Input con etiqueta, icono, mensaje de error y ayuda). Si las propiedades de configuración están desordenadas, el usuario del sistema de diseño (el diseñador o el desarrollador) perderá tiempo buscando cómo cambiar el color del icono o el tamaño del texto.

Organización de Props de Componentes: Estructura y Jerarquía

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Por qué importa el orden de las Props?

Paridad de Tokens en Múltiples Plataformas

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La paridad de tokens asegura que las decisiones de diseño se traduzcan de manera idéntica y precisa a través de diferentes plataformas (Web, iOS, Android, Desktop) utilizando un único sistema de origen. Esto elimina inconsistencias visuales y reduce significativamente el esfuerzo de QA.

El Desafío de la Fragmentación de Plataformas

Cada ecosistema tecnológico maneja los estilos (colores, fuentes, sombras) de forma única. Si un diseñador elige un “Azul Primario”, se enfrenta a:

Paridad de Tokens en Múltiples Plataformas

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Desafío de la Fragmentación de Plataformas

Cada ecosistema tecnológico maneja los estilos (colores, fuentes, sombras) de forma única. Si un diseñador elige un “Azul Primario”, se enfrenta a:

Patrones Oscuros (Dark Patterns): Qué son y por qué evitarlos

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Los Patrones Oscuros (Dark Patterns) son técnicas de diseño engañosas que manipulan a los usuarios para que realicen acciones en contra de sus intereses en beneficio de la empresa.

¿Qué son los Patrones Oscuros?

Imagina un menú de restaurante diseñado para que los platos más caros parezcan los más baratos mediante un formato inteligente, confundiéndote para que pidas lo más costoso. Ese es el equivalente offline de un patrón oscuro. En los productos digitales, los patrones oscuros son opciones de diseño deliberadamente diseñadas para confundir, engañar o manipular a los usuarios para que realicen acciones que beneficien al negocio a expensas de los usuarios.

Peligros del Input Masking: Usabilidad vs Formato

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Input Masking es la técnica de forzar visualmente un formato de datos mientras el usuario escribe (ej. añadir automáticamente los guiones en una fecha DD / MM / YYYY). Aunque parece una ayuda visual, si se implementa incorrectamente, es una de las mayores fuentes de error, frustración y abandono de formularios.

El Dilema de la Máscara de Entrada

Imagina que estás escribiendo tu número de teléfono y el campo decide poner paréntesis y espacios por ti. Si te equivocas en un número y pulsas retroceso (Backspace), la máscara borra no solo el número, sino también el espacio automático, y entonces te lo reinserta solo. Este bucle infinito es la definición de una mala experiencia de usuario.

Peligros del Input Masking: Usabilidad vs Formato

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Dilema de la Máscara de Entrada

People Management (Design Leadership)

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

People Management, in the context of design, is the practice of leading, mentoring, and supporting a team of designers so they can do the best work of their careers. It involves shifting from being a “doer” to being a “multiplier,” whose success is measured by the success and growth of the team.

What Is People Management in Design?

Imagine a great chef. In their early days, their success was measured by the incredible dishes they cooked themselves. But when they become the executive chef of a Michelin-starred restaurant, their success no longer depends on the dishes they cook, but on their ability to run the kitchen, create an exceptional menu, and train other chefs to cook at a level of excellence. They become a talent multiplier.

Personas

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A Persona (or User Persona) is a fictional user archetype based on real research data that represents a group of users with similar behaviors, goals, and motivations. It is used to humanize users and keep the design team focused on their needs.

What are Personas?

Imagine you’re designing a backpack. You could design it for “everyone,” but you’d probably end up with something generic that nobody loves. Instead, you could design it for “Ana, a 20-year-old university student who commutes to campus by bike, needs to carry her laptop and books, and values sustainability and style.”

Personas

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Una Persona (o User Persona) es un arquetipo de usuario ficticio, pero basado en datos reales de investigación, que representa a un grupo de usuarios con comportamientos, objetivos y motivaciones similares. Se utiliza para humanizar a los usuarios y mantener al equipo de diseño enfocado en sus necesidades.

¿Qué son las Personas?

Imagina que estás diseñando una mochila. Podrías diseñarla para “todo el mundo”, pero probablemente terminarías con algo genérico que no le encanta a nadie. En cambio, podrías diseñarla para “Ana, la estudiante universitaria de 20 años que va al campus en bicicleta, necesita llevar su portátil y libros, y valora la sostenibilidad y el estilo”.

Personas

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué son las Personas?

Planes de Carrera y Evaluación de Desempeño

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Un plan de carrera es un marco estructurado que define las competencias, habilidades y responsabilidades en cada nivel de un equipo de diseño. La evaluación de desempeño es el proceso periódico mediante el cual un manager y un miembro del equipo revisan el rendimiento de este último en base a ese marco, celebran los logros y definen metas para el futuro.

¿Qué son los Planes de Carrera?

Imagina que estás jugando a un videojuego de rol. Tu personaje empieza en el nivel 1. Para subir de nivel, necesitas ganar puntos de experiencia y adquirir nuevas habilidades. El juego te muestra un “árbol de habilidades” donde puedes ver claramente qué necesitas para llegar al nivel 2, al nivel 10, y qué nuevos poderes desbloquearás. También te permite elegir diferentes clases, como “guerrero” o “mago”.

Planes de Carrera y Evaluación de Desempeño

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué son los Planes de Carrera?

Preparación de Workshops

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La preparación de un workshop es el proceso de diseñar y planificar una sesión de trabajo colaborativa, con un objetivo claro, una agenda estructurada y una serie de actividades dinámicas, para lograr un resultado específico en un tiempo limitado.

¿Qué es la Preparación de Workshops?

Imagina que eres el anfitrión de una cena importante. No esperas a que lleguen los invitados para decidir qué vas a cocinar. Semanas antes, planificas el menú (el objetivo y las actividades), haces la lista de la compra (los materiales), preparas algunos ingredientes con antelación (la preparación previa) y organizas la mesa (el entorno). El éxito de la cena depende en un 90% de esta preparación.

Preparación de Workshops

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué es la Preparación de Workshops?

Presentaciones Ejecutivas

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Una presentación ejecutiva es una forma de comunicación concisa y persuasiva, diseñada para informar a los líderes y stakeholders de alto nivel, influir en su toma de decisiones y obtener su apoyo (buy-in) para una iniciativa de diseño o producto.

¿Qué es una Presentación Ejecutiva?

Imagina que eres un guionista que tiene 5 minutos para venderle su idea de película a un productor de Hollywood muy ocupado. No le cuentas la película escena por escena. Le cuentas una historia convincente: el concepto, el protagonista, el conflicto y por qué va a ser un éxito de taquilla. Le das un “elevator pitch” diseñado para captar su atención y convencerle de que invierta en tu proyecto.

Presentaciones Ejecutivas

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué es una Presentación Ejecutiva?

Presupuestos de Latencia en UX: Tiempos de Respuesta

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Un Presupuesto de Latencia (Latency Budget) es el tiempo máximo permitido (en milisegundos) para que una acción del usuario produzca una respuesta visible en la interfaz. No es una métrica técnica; es un compromiso de diseño para garantizar la fluidez de la experiencia.

¿Por qué el Diseñador debe establecer Presupuestos de Latencia?

A menudo, los diseñadores crean flujos complejos e interacciones pesadas sin considerar el coste técnico. Si una animación de apertura de un menú tarda 500ms y el servidor otros 1000ms en devolver los datos, el usuario sentirá que la aplicación es una barca pesada.

Presupuestos de Latencia en UX: Tiempos de Respuesta

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Por qué el Diseñador debe establecer Presupuestos de Latencia?

Prevención vs Recuperación de Errores: Una Interfaz Indulgente

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La Prevención de Errores busca diseñar el sistema para que el usuario no pueda cometer fallos. La Recuperación de Errores diseña la salida cuando el fallo ya ha ocurrido, ayudando al usuario a volver al camino correcto sin frustración.

El Paradigma de la Interfaz Indulgente (Forgiving Interface)

Los seres humanos somos falibles por naturaleza: nos distraemos, nos equivocamos al teclear o no entendemos bien las instrucciones. Un diseño de UX maduro no culpa al usuario por sus errores, sino que asume que ocurrirán y diseña un ecosistema que los mitigue o los solucione con elegancia. Este concepto se basa en dos de las 10 heurísticas de usabilidad de Jakob Nielsen: la #5 (Prevención de errores) y la #9 (Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de errores).

Prevención vs Recuperación de Errores: Una Interfaz Indulgente

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Paradigma de la Interfaz Indulgente (Forgiving Interface)

Principios de Diseño

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Los Principios de Diseño son un conjunto de directrices breves, claras y memorables que articulan los valores fundamentales que deben guiar el trabajo de diseño de un equipo. Sirven como una brújula interna para tomar decisiones consistentes y de alta calidad, especialmente cuando no hay una regla específica que aplicar.

¿Qué son los Principios de Diseño?

No son reglas prescriptivas como “todos los botones deben ser azules”. Son valores de alto nivel que ayudan a un equipo a definir qué es un “buen diseño” para su producto específico. Son la constitución del equipo de diseño.

Principios de Diseño

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué son los Principios de Diseño?

Principios de Feedback Háptico: Sentir la Interfaz

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Feedback Háptico es la respuesta física (vibración o impacto táctil) que un dispositivo móvil o un wearable emite ante una acción del usuario. Es el tercer canal de comunicación, junto a la vista y el oído, que permite que el usuario “sienta” que algo ha ocurrido sin necesidad de mirar la pantalla.

¿Por qué el Háptico es Crítico para la UX?

Vivimos en un mundo lleno de distracciones visuales. Los seres humanos hemos evolucionado para sentir texturas y respuestas físicas cuando manipulamos objetos. En una pantalla de cristal lisa, perdemos ese sentido.

Principios de Feedback Háptico: Sentir la Interfaz

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Por qué el Háptico es Crítico para la UX?

Principios de la Gestalt para Diseñadores UX

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Los Principios de la Gestalt describen cómo los seres humanos perciben y organizan de forma natural la información visual en patrones y grupos significativos.

¿Qué son los Principios de la Gestalt?

Imagina que miras una bandada de pájaros. Tu cerebro no procesa cada pájaro como un elemento separado; lo reconoce instantáneamente como un grupo unificado que se mueve en conjunto. Esa organización instantánea es la percepción de la Gestalt en funcionamiento.

Principle

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A Mac-only animation prototyping tool that makes complex animations easy—perfect for microinteractions and transitions.

What is Principle?

Principle is a Mac-only prototyping tool specialized in animations. If Figma prototyping feels limiting for animations, Principle fills the gap. It’s drag-and-drop animation creation without learning After Effects.

Principle excels at easing curves, timing, and sequencing animations. Complex animation sequences that take hours in After Effects take minutes in Principle.

One sentence punch: Principle makes animation prototyping as easy as interaction design—no animation software experience needed.**

Principle

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Una herramienta de prototipado de animación solo para Mac que hace animaciones complejas fáciles—perfecta para microinteracciones y transiciones.

¿Qué es Principle?

Principle es una herramienta de prototipado solo para Mac especializada en animaciones. Si el prototipado de Figma se siente limitante para animaciones, Principle llena el vacío. Es creación de animación drag-and-drop sin aprender After Effects.

Principle excela en curvas de easing, timing y secuenciamiento de animaciones. Secuencias de animación complejas que toman horas en After Effects toman minutos en Principle.

Principle

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Una herramienta de prototipado de animación solo para Mac que hace animaciones complejas fáciles—perfecta para microinteracciones y transiciones.

¿Qué es Principle?

Principle excela en curvas de easing, timing y secuenciamiento de animaciones. Secuencias de animación complejas que toman horas en After Effects toman minutos en Principle.

ProtoPie

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A prototyping tool for complex interactions—animations, gestures, variables, and logic without code.

What is ProtoPie?

ProtoPie is a prototyping tool designed for complex interactions that Figma’s prototyping can’t handle. Need a countdown timer? A calculator logic? Conditional flows based on user input? ProtoPie handles it.

ProtoPie works like this: import designs from Figma, add interactions through the ProtoPie editor, and share via link. No coding required. The result is an interactive prototype that feels like a real app.

ProtoPie

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Una herramienta de prototipado para interacciones complejas—animaciones, gestos, variables y lógica sin código.

¿Qué es ProtoPie?

ProtoPie es una herramienta de prototipado diseñada para interacciones complejas que el prototipado de Figma no puede manejar. ¿Necesitas un timer de cuenta regresiva? ¿Lógica de calculadora? ¿Flujos condicionales basados en entrada del usuario? ProtoPie lo maneja.

ProtoPie funciona así: importa diseños de Figma, añade interacciones a través del editor de ProtoPie y comparte vía link. Sin código requerido. El resultado es un prototipo interactivo que se siente como una aplicación real.

ProtoPie

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Una herramienta de prototipado para interacciones complejas—animaciones, gestos, variables y lógica sin código.

¿Qué es ProtoPie?

Prototipos

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Un prototipo es una simulación interactiva de un producto final que se utiliza para probar y validar conceptos de diseño antes de su desarrollo. A diferencia de los mockups (que son estáticos), los prototipos son “clicables” y permiten a los usuarios experimentar el flujo de una aplicación.

¿Qué son los Prototipos?

Si un mockup es la maqueta a color de una casa, un prototipo es una visita guiada virtual por esa maqueta. Permite abrir puertas, encender luces y moverse entre habitaciones para entender cómo se siente vivir en ella.

Prototipos

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué son los Prototipos?

Prototypes

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A prototype is an interactive simulation of a final product used to test and validate design concepts before development. Unlike mockups (which are static), prototypes are “clickable” and allow users to experience the flow of an application.

What are Prototypes?

If a mockup is the color model of a house, a prototype is a virtual guided tour through that model. It allows you to open doors, turn on lights, and move between rooms to understand what it feels like to live in it.

Pruebas con Lectores de Pantalla: El Oído del UX

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Las Pruebas con Lectores de Pantalla son el proceso de navegar e interactuar con una interfaz digital utilizando únicamente tecnologías de lectura por voz (como VoiceOver, TalkBack o NVDA). Su objetivo es verificar que la información visual se traduce correctamente a una experiencia auditiva lógica y comprensible.

¿Por qué el Diseñador debe Saber Usar un Lector de Pantalla?

Como diseñadores, solemos pensar en la accesibilidad como una lista de “checks” técnicos que debe cumplir desarrollo. Sin embargo, la accesibilidad es experiencial.

Pruebas con Lectores de Pantalla: El Oído del UX

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Por qué el Diseñador debe Saber Usar un Lector de Pantalla?

Como diseñadores, solemos pensar en la accesibilidad como una lista de “checks” técnicos que debe cumplir desarrollo. Sin embargo, la accesibilidad es experiencial.

Pruebas de Usabilidad

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Una prueba de usabilidad es un método de investigación fundamental en UX para evaluar qué tan fácil de usar es un producto. Consiste en observar a usuarios representativos mientras intentan completar tareas típicas en un prototipo o producto real para identificar dónde encuentran problemas y frustraciones.

¿Qué son las Pruebas de Usabilidad?

Imagina que diseñas las instrucciones para armar un mueble de IKEA. Crees que son perfectas. Luego, le pides a alguien que arme el mueble siguiéndolas y lo observas en silencio. Ves que se atasca en el paso 3, que intenta poner un tornillo donde no va y que termina frustrado. No estás evaluando si la persona es “inteligente” o no; estás evaluando la claridad de tus instrucciones.

Pruebas de Usabilidad

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué son las Pruebas de Usabilidad?

Pruebas de Usabilidad

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Una prueba de usabilidad es una técnica de investigación fundamental en UX donde se observa a usuarios reales utilizando un producto (o un prototipo) para identificar problemas de usabilidad, recopilar datos cualitativos y cuantitativos, y determinar la satisfacción general del participante con el producto.

¿Qué son las Pruebas de Usabilidad?

Imagina que has diseñado un nuevo abrelatas. Crees que es revolucionario. En lugar de simplemente admirarlo, se lo das a 5 personas diferentes y les pides que abran una lata mientras tú observas en silencio. Ves que tres de ellas no entienden cómo agarrarlo, que una se corta el dedo y que la quinta tarda dos minutos en abrir la lata. No estás juzgando si las personas son “torpes”; estás evaluando si tu abrelatas es fácil y seguro de usar.

Pruebas de Usabilidad

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué son las Pruebas de Usabilidad?

Quantitative Data

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Quantitative data in UX is numerical information that measures user behavior and attitudes. It focuses on the “how much,” “how many,” or “how often,” and is used to analyze patterns at a large scale, validate hypotheses, and measure the impact of design.

What Is Quantitative Data?

Imagine you own a store. Quantitative data is your sales report: it tells you how many customers came in, how many bought something, and which product sold the most. It gives you the numbers, the “what.”

Real-Time Presence Modeling: Collaborative UX

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Presence Modeling is the set of visual and functional indicators that communicate to a user who else is with them in the same digital space (e.g., a Notion page or a Figma file) and exactly what they are doing at that precise moment.

The Magic of Not Being Alone: The Feeling of Presence

A few years ago, applications were lonely: you worked, saved, and closed. Today, product applications are multiplayer. Presence modeling is not just an aesthetic ornament; it is a critical communication tool that prevents users from making mistakes (like editing the same object at the same time) and fosters fluid collaboration.

Reclutar Participantes de Investigación

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Encontrar y reclutar los usuarios correctos para investigación—la base de resultados de investigación válidos y accionables.

¿Qué es Reclutamiento de Participantes?

El reclutamiento es encontrar a las personas correctas para tu investigación. No solo usuarios cualquiera. Los usuarios correctos—usuarios que coincidan con tu demografía objetivo, tengan experiencia relevante y representen el problema que estás resolviendo.

El reclutamiento parece simple: “Pregunta a gente si participan en investigación.” Es más difícil. Tus usuarios existentes no son representativos. Tus amigos serán amables contigo. Los datos demográficos importan. El nivel de experiencia importa. Encontrar los 8 participantes correctos requiere estrategia.

Reclutar Participantes de Investigación

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Encontrar y reclutar los usuarios correctos para investigación—la base de resultados de investigación válidos y accionables.

¿Qué es Reclutamiento de Participantes?

Recruiting Research Participants

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Finding and recruiting the right users for research—the foundation of valid, actionable research results.

What is Participant Recruitment?

Recruitment is finding the right people for your research. Not just any users. The right users—users who match your target demographic, have relevant experience, and represent the problem you’re solving.

Recruiting seems simple: “Ask people to participate in research.” It’s harder. Your existing users aren’t representative. Your friends will be nice to you. Demographics matter. Experience level matters. Finding the right 8 participants requires strategy.

Red Routes

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

The top 5 user journeys your product must support flawlessly—identify these and everything else is secondary.

What are Red Routes?

Red routes are the core user journeys your product must support perfectly. The term comes from London’s Underground—red routes are the main lines that carry the most traffic. Everything else is secondary.

For an e-commerce site, red routes are: browsing products, reading reviews, adding to cart, checking out, and contacting support. Everything else (wishlists, recommendations, social sharing) is nice-to-have.

Red Routes

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Los 5 mejores viajes de usuario que tu producto debe apoyar sin falla—identifica estos y todo lo demás es secundario.

¿Qué son Red Routes?

Las red routes son los viajes de usuario principales que tu producto debe apoyar perfectamente. El término viene del Underground de Londres—las red routes son las líneas principales que llevan el tráfico más pesado. Todo lo demás es secundario.

Para un sitio de e-commerce, las red routes son: navegar productos, leer reseñas, añadir al carrito, pagar y contactar soporte. Todo lo demás (listas de deseos, recomendaciones, compartir social) es nice-to-have.

Red Routes

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Los 5 mejores viajes de usuario que tu producto debe apoyar sin falla—identifica estos y todo lo demás es secundario.

¿Qué son Red Routes?

Reduced Motion Strategies: Motion and Accessibility

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Reduced Motion is an accessibility preference that users can activate in their operating systems (Windows, macOS, iOS, Android). When activated, it tells applications to remove or simplify unnecessary animations (prefers-reduced-motion) to prevent nausea, dizziness, or distraction for people with vestibular disorders or ADHD.

Why the Designer Should Manage Motion?

As designers, we love animations: zooms, parallax, bounces, and smooth transitions. However, for millions of people, these animations are not “pretty”; they are physically painful. Excessive movement can cause migraines, disorientation, and vestibular discomfort.

Remote User Research

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Conducting user research without travel or location constraints—fast, scalable, and accessible to global participants.

What is Remote User Research?

Remote user research is observing and interviewing users via video call, screen share, or recorded sessions instead of in-person. A participant in Tokyo and a researcher in New York can connect instantly. No travel needed. No location constraints.

Remote research comes in two flavors: moderated (researcher guides the session in real-time) and unmoderated (participant records themselves). Both have trade-offs. Moderated is richer but slower. Unmoderated is faster but loses the conversational depth.

Resolución de Conflictos en Colaboración: UI y UX

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La Resolución de Conflictos ocurre cuando dos o más usuarios intentan realizar acciones contradictorias sobre el mismo objeto al mismo tiempo (ej. uno borra un párrafo mientras el otro lo está editando). En el diseño de producto colaborativo, nuestro objetivo es que el usuario nunca vea una notificación de “Error de Sincronización” si podemos evitarlo.

El Reto de las Aplicaciones Multiusuario

En aplicaciones modernas como Google Docs, Figma o Notion, la colaboración en tiempo real es una funcionalidad básica. Sin embargo, detrás de la magia hay una lógica de resolución de conflictos extremadamente compleja. Si dos personas guardan versiones diferentes, ¿quién gana? ¿Se pierde el trabajo de alguien?

Resolución de Conflictos en Colaboración: UI y UX

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Reto de las Aplicaciones Multiusuario

Responsive Scaling Strategies: Liquid UI

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Responsive Scaling Strategies define how interface elements behave when available space changes. It’s not just about resizing boxes, but deciding which elements grow, which stack, which disappear, and which maintain their original size to ensure usability on any device.

The Challenge of Infinite Screens

Today, we design for a 30mm smartwatch (Apple Watch) and a 49-inch curved monitor. We cannot design a screen for every width. We need a Scaling Strategy that is liquid and resilient.

Roadmap de Diseño

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Un Roadmap de Diseño es un artefacto estratégico que visualiza las prioridades y el plan de trabajo del equipo de diseño a medio y largo plazo. Alinea las iniciativas de diseño con los objetivos del producto y del negocio, y comunica a toda la organización en qué se centrará el equipo de diseño y por qué.

¿Qué es un Roadmap de Diseño?

Imagina el mapa de una red de metro. No muestra cada calle de la ciudad, pero sí muestra las líneas principales, las estaciones clave y las conexiones importantes. Te da una visión general de cómo moverte por la ciudad y los grandes proyectos de expansión futuros. Un Roadmap de Diseño es ese mapa para tu producto: no detalla cada tarea, pero sí las grandes iniciativas y cómo se conectan con los objetivos generales.

Roadmap de Diseño

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué es un Roadmap de Diseño?

ROI del UX

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Cómo medir y comunicar el valor empresarial de UX—esencial para el buy-in de stakeholders y asignación de presupuesto.

¿Qué es ROI del UX?

ROI (Retorno de Inversión) mide retorno financiero de inversión. ROI de UX cuantifica: “Por cada dólar que gastamos en UX, ¿cuánto ganamos?”

UX no es un centro de costos; es un centro de ganancias. Buen UX aumenta conversión, reduce costos de soporte, mejora retención. Mal UX disminuye los tres. Probando esto al liderazgo requiere métricas.

ROI del UX

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Cómo medir y comunicar el valor empresarial de UX—esencial para el buy-in de stakeholders y asignación de presupuesto.

¿Qué es ROI del UX?

ROI (Retorno de Inversión) mide retorno financiero de inversión. ROI de UX cuantifica: “Por cada dólar que gastamos en UX, ¿cuánto ganamos?”

ROI of UX

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

How to measure and communicate the business value of UX—essential for stakeholder buy-in and budget allocation.

What is ROI of UX?

ROI (Return on Investment) measures financial return from investment. UX ROI quantifies: “For every dollar we spent on UX, how much did we gain?”

UX isn’t a cost center; it’s a profit center. Good UX increases conversion, reduces support costs, improves retention. Bad UX decreases all three. Proving this to leadership requires metrics.

Safeguards for Destructive Actions: Positive Friction

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Safeguards are intentional friction mechanisms designed to prevent a user from performing irreversible actions (deleting, formatting, closing an account, or removing critical data) accidentally or impulsively. In this case, friction is an ally of the user experience.

The Power of Positive Friction

In standard interface design, we seek to remove any obstacles or friction that slows down the user. However, for destructive actions, friction is humanly necessary. Without it, a single mistaken click could erase years of user work. A good safeguard forces the brain to switch from automatic mode (“System 1”) to analytical and conscious mode (“System 2”).

Salvaguardas para Acciones Destructivas: Fricción Positiva

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Las Salvaguardas son mecanismos de fricción intencionada diseñados para evitar que un usuario realice acciones irreversibles (borrar, formatear, cerrar cuenta o eliminar datos críticos) de forma accidental o impulsiva. En este caso, la fricción es un aliado de la experiencia de usuario.

El Poder de la Fricción Positiva

En el diseño de interfaces habitual, buscamos eliminar cualquier obstáculo o fricción que ralentice al usuario. Sin embargo, en las acciones destructivas, la fricción es humanamente necesaria. Sin ella, un clic erróneo podría borrar años de trabajo del usuario. Una buena salvaguarda obliga al cerebro a pasar del modo automático (“Sistema 1”) al modo analítico y consciente (“Sistema 2”).

Salvaguardas para Acciones Destructivas: Fricción Positiva

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Poder de la Fricción Positiva

Screen Reader Testing: The Ear of UX

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Screen Reader Testing is the process of navigating and interacting with a digital interface using only voice reading technologies (such as VoiceOver, TalkBack, or NVDA). Its goal is to verify that visual information is correctly translated into a logical and understandable auditory experience.

As designers, we often think of accessibility as a technical “checklist” that development must follow. However, accessibility is experiential.

Search

Mon, 01 Jan 0001 00:00:00 +0000

Service Blueprints

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A Service Blueprint is a diagram that visualizes the relationships between different components of a service (people, processes, and objects) across the different stages of customer interaction. It’s like a [[Customer Journey Maps|Customer Journey Map]] with superpowers, as it not only shows what the customer sees, but also everything that happens “behind the curtain” to make that experience possible.

What are Service Blueprints?

Imagine that a [[Customer Journey Maps|Customer Journey Map]] is the view a diner has at a restaurant: they see the menu, talk to the waiter, receive their food. A Service Blueprint is the complete blueprint of the restaurant: it shows the diner, the waiter, but also the cooks in the kitchen, the ordering system, the suppliers who bring the ingredients, and the cleaning processes.

Service Blueprints

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Un Service Blueprint (o Blueprint de Servicio) es un diagrama que visualiza las relaciones entre diferentes componentes de un servicio (personas, procesos y objetos) en las diferentes etapas de la interacción del cliente. Es como un [[Customer Journey Maps|Customer Journey Map]] con superpoderes, ya que no solo muestra lo que ve el cliente, sino también todo lo que sucede “detrás del telón” para que esa experiencia sea posible.

¿Qué son los Service Blueprints?

Imagina que un [[Customer Journey Maps|Customer Journey Map]] es la vista que tiene un comensal en un restaurante: ve el menú, habla con el camarero, recibe su comida. Un Service Blueprint es el plano completo del restaurante: muestra al comensal, al camarero, pero también a los cocineros en la cocina, el sistema de pedidos, los proveedores que traen los ingredientes y los procesos de limpieza.

Service Blueprints

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué son los Service Blueprints?

Sistema de Diseño

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

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.

¿Qué es un Sistema de Diseño?

Imagina que estás construyendo con LEGO. No tienes que crear cada ladrillo desde cero cada vez que construyes algo nuevo. Tienes un conjunto de ladrillos estándar (2x2, 2x4, etc.) que puedes combinar para crear cualquier cosa. Además, tienes un manual de instrucciones que te dice cómo encajan las piezas.

Sistema de Diseño

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué es un Sistema de Diseño?

Site Maps

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A hierarchical diagram showing all pages and how they relate—the blueprint before you design a single page.

What is a Site Map?

A site map is a visual representation of a website’s structure. It shows every page and how they connect. The homepage sits at the top. Product pages branch down. Support pages branch separately. Each page has a clear parent and siblings.

A site map answers: “Where does this page live? What pages are at the same level? What pages are nested inside?” Without a site map, designers design pages in isolation. Pages feel disconnected. Navigation feels random.

Skeleton VS Optimistic UI: Estrategias de Carga

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Las Skeleton Screens (Pantallas de Esqueleto) son marcadores de posición grises que imitan la estructura final de la página mientras se cargan los datos. La Optimistic UI (Interfaz Optimista) es una técnica que muestra el resultado de una acción inmediatamente, asumiendo que el servidor responderá con éxito.

El Arte de la Espera: Rendimiento Percibido

En el diseño de producto moderno, la velocidad no es solo una cuestión de milisegundos reales (latencia), sino de cómo el usuario siente que el sistema está respondiendo. Ambas técnicas buscan reducir la ansiedad del usuario durante la carga, pero se aplican en momentos diferentes del flujo.

Skeleton VS Optimistic UI: Estrategias de Carga

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Arte de la Espera: Rendimiento Percibido

Skeleton VS Optimistic UI: Loading Strategies

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Skeleton Screens are gray placeholders that mimic the final structure of the page while data is loading. Optimistic UI is a technique that shows the result of an action immediately, assuming the server will respond successfully.

The Art of Waiting: Perceived Performance

In modern product design, speed is not just a matter of real milliseconds (latency), but of how the user feels the system is responding. Both techniques seek to reduce user anxiety during loading, but they are applied at different points in the flow.

Sobre Fernando Ruiz

Mon, 01 Jan 0001 00:00:00 +0000

Llegué al diseño de producto desde la arquitectura, el contenido y el marketing. Tres lentes para ver cómo se sostienen las cosas. Así se ve en el trabajo.

Status Awareness in UI

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Status Awareness (State Awareness) is an interface’s ability to clearly and continuously communicate what is happening in the system, at what step of the process the user is, and what the current condition of each component is (e.g., if a button is pressed, if data is loading, or if there is an error).

Why the User Needs Status Awareness?

As human beings, we hate uncertainty. In the physical world, if you flip a switch and the light doesn’t turn on, you know there’s a fault because the switch physically changed position. In the digital world, if a user clicks a button and nothing happens visually in the first few milliseconds, the user will click the button 5 more times, generating server errors and frustration.

Storybook

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Storybook is an open-source development tool for building, testing, and documenting UI components in isolation. It allows developers to create components in a “sandbox” environment outside the main application, making it easy to visualize all their states and collaborate with designers.

What Is Storybook?

Imagine you are building a car with LEGO pieces. Storybook is like a workshop where you can build and test each piece separately before assembling the car. You can build the engine (a complex component) and test it on its own, or you can build a simple wheel (a button) and see all its available colors and sizes, all without needing the complete car chassis.

Storybook

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Storybook es una herramienta de desarrollo de código abierto para construir, probar y documentar componentes de UI de forma aislada. Permite a los desarrolladores crear componentes en un entorno de “sandbox” fuera de la aplicación principal, lo que facilita la visualización de todos sus estados y la colaboración con los diseñadores.

¿Qué es Storybook?

Imagina que estás construyendo un coche con piezas de LEGO. Storybook es como un taller donde puedes construir y probar cada pieza por separado antes de ensamblar el coche. Puedes construir el motor (un componente complejo) y probarlo por sí solo, o puedes construir una simple rueda (un botón) y ver todos sus colores y tamaños disponibles, todo sin necesidad de tener el chasis del coche completo.

Storybook

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué es Storybook?

Strategic Workshops

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Strategic workshops are high-level collaborative work sessions, designed and facilitated by design leaders, to align a diverse group of stakeholders (product, business, and technology leaders) around a shared vision, strategy, and long-term priorities. The most common examples are [[Design Sprints]], product vision workshops, and roadmap planning workshops.

What Is a Strategic Workshop?

Imagine a summit of world leaders. They do not meet to discuss the color of flags. They meet to address complex problems like climate change or the global economy. They need an expert facilitator (like a UN diplomat) who structures the conversation, ensures all voices are heard, and guides the group toward an agreement or a joint action plan.

Tab Order Strategy: The Keyboard User's Path

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Tab Order is the exact sequence in which a keyboard user (pressing Tab and Shift + Tab) traverses an interface’s interactive elements. A good tabbing strategy ensures that the user doesn’t get lost, doesn’t have to perform unnecessary clicks, and can complete their tasks quickly and logically.

Why the Designer Should Decide the Tab Order?

Although tab order is usually an automatic consequence of the order in the HTML code (the DOM), visual design can be much more complex. As designers, we sometimes create layouts with columns, grids, or floating elements that don’t follow a pure linear order.

Team Ceremonies (Daily, Planning, Retros)

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Team ceremonies are a series of recurring meetings, popularized by agile methodologies like Scrum, designed to structure work, foster communication, and promote continuous improvement. The most common ones are the Daily Stand-up, Sprint Planning, and Retrospective.

What Are Team Ceremonies?

Imagine a Formula 1 racing team during a race. They have very defined “ceremonies”: the pit stop is a quick, synchronized ritual to check the car’s condition and change tires (the Daily Stand-up). Before the race, they have a meeting to define the tire and pit strategy (the Sprint Planning). And after the race, they analyze the data and performance to see how they can be faster next time (the Retrospective).

The Command Pattern in Product Design

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

The Command Pattern is a software design pattern that encapsulates a user request or action as an independent object. In the world of product design, this allows us to treat each action (delete, move, edit, change color) as an entity that can be stored, undone, redone, and synchronized across multiple users.

Why the Designer Should Know the Command Pattern?

Traditionally, design focused on the final state of screens (the fixed photo). However, modern products (like Figma, Notion, or Google Docs) focus on the actions that lead from one state to another. The Command Pattern is the technical language that makes these transitions possible.

The UX Design Process: An End-to-End Guide

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

The complete step-by-step workflow that transforms a problem into a user-centered solution.

What is the UX Design Process?

Imagine you’re a chef creating a new restaurant dish. You don’t just throw ingredients together and hope for the best. Instead, you understand what your diners actually want, you experiment with different flavor combinations, you taste and adjust, and finally you test it with real customers before adding it to the menu. That’s essentially what the UX design process does—it’s a structured, methodical approach to understanding user needs and solving problems through design.

Timing de Validación en Formularios: Recompensa y Reglas

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Timing de Validación decide en qué momento exacto le comunicamos al usuario si la información introducida es correcta o incorrecta. Elegir el momento adecuado reduce drásticamente la interrupción del flujo, la ansiedad del usuario y la tasa de abandono de los formularios.

¿Por qué el Momento de Validación lo es Todo?

Rellenar formularios es una tarea pesada para el cerebro humano. Si interrumpes al usuario en el momento equivocado, rompes su flujo mental (flow) y le generas una sensación de vigilancia constante. La validación no debe ser un juicio, sino una guía que ayude a terminar la tarea lo más rápido posible.

Timing de Validación en Formularios: Recompensa y Reglas

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Por qué el Momento de Validación lo es Todo?

Token Aliasing and Inheritance Strategy

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Token Aliasing consists of defining a token that refers to another token instead of a raw value (like a hexadecimal or pixels). Inheritance is the logical structure that allows design decisions to flow from the most general to the most specific, ensuring consistency and total flexibility in the system.

What is Token Aliasing?

Imagine you want to buy a car in “Sporty Color”.

Raw Value: Red #FF0000
Primitive Token (Global): brand-red -> #FF0000
Semantic Token (Alias): color-background-cta -> brand-red

In this example, color-background-cta is an alias of brand-red. If tomorrow you decide that your brand’s sporty color is Orange, you only have to change the alias reference to brand-orange, and automatically all the call-to-action (CTA) buttons in your product will update. Without aliasing, you would have had to manually search for setiap instance of the color red and change it.

Token Architecture (Global vs. Semantic vs. Component)

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Design token architecture is the logical structure that organizes design decisions (colors, typography, spacing) into layers of abstraction. A well-designed model allows you to change the appearance of an entire product in minutes, ensuring consistency and scalability between design and code.

What is Token Architecture?

Imagine you are building a city. You don’t want to have to paint every brick of every house individually. Instead, you define a “palette of materials” (global tokens), decide that all public buildings will be “institutional color” (semantic tokens), and finally apply that color to the “town hall main door” (component tokens).

Token Parity Across Multiple Platforms

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Token parity ensures that design decisions are translated identically and accurately across different platforms (Web, iOS, Android, Desktop) using a single source system. This eliminates visual inconsistencies and significantly reduces QA effort.

The Challenge of Platform Fragmentation

Each technological ecosystem handles styles (colors, fonts, shadows) uniquely. If a designer chooses a “Primary Blue,” they face:

Web: CSS/SCSS files (rem, px, hex, hsl, rgb).
iOS: Swift/SwiftUI files (Points, UIColor, Asset Catalogs, JSON).
Android: Resource XML or Jetpack Compose (dp, sp, hex ARGB).

Without a parity strategy, the same color may look slightly different or have a different name on each platform, breaking brand consistency and causing confusion among development teams.

Tree Testing

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Tree Testing is a UX research technique used to evaluate the “findability” of topics in a site or application’s Information Architecture. Users are asked to find specific locations in a simplified, text-only version of the site structure (the “tree”), without the influence of visual design or navigation.

Tree Testing

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Tree Testing es una técnica de investigación de UX que se utiliza para evaluar la “encontrabilidad” (findability) de los temas en la Arquitectura de la Información de un sitio o aplicación. Se le pide a los usuarios que encuentren ubicaciones específicas en una versión simplificada y de solo texto de la estructura del sitio (el “árbol”), sin la influencia del diseño visual o la navegación.

Tree Testing

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Usability Testing

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A usability test is a fundamental UX research method for evaluating how easy a product is to use. It consists of observing representative users as they attempt to complete typical tasks on a prototype or real product to identify where they encounter problems and frustrations.

What Is Usability Testing?

Imagine you design the instructions for assembling an IKEA piece of furniture. You think they are perfect. Then, you ask someone to assemble the furniture following them and you watch in silence. You see that they get stuck on step 3, that they try to put a screw in the wrong place, and that they end up frustrated. You are not evaluating whether the person is “smart” or not; you are evaluating the clarity of your instructions.

Usability Testing

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A usability test is a fundamental UX research technique where real users are observed using a product (or a prototype) to identify usability problems, collect qualitative and quantitative data, and determine the participant’s overall satisfaction with the product.

What Is Usability Testing?

Imagine you have designed a new can opener. You think it is revolutionary. Instead of just admiring it, you give it to 5 different people and ask them to open a can while you observe in silence. You see that three of them do not understand how to hold it, one cuts their finger, and the fifth takes two minutes to open the can. You are not judging whether the people are “clumsy”; you are evaluating whether your can opener is easy and safe to use.

Useberry

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Useberry is an unmoderated usability testing platform, very similar to [[Maze]]. It allows product teams to get quick feedback and quantitative data on prototypes, designs, and information architectures, integrating with tools like Figma, Sketch, and Adobe XD.

What Is Useberry?

Imagine you have created interactive floor plans of a house on your computer ([[Prototypes]]). You want to know if people can easily find the bathroom from the entrance, but you can’t invite 200 people to your studio to try it one by one. Useberry lets you send those floor plans to 200 people over the internet, ask them to “find the bathroom,” and returns a detailed report with the paths they took, where they got lost, and how long it took – all automatically.

Useberry

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Useberry es una plataforma de pruebas de usabilidad no moderadas, muy similar a [[Maze]]. Permite a los equipos de producto obtener feedback rápido y datos cuantitativos sobre prototipos, diseños y arquitecturas de información, integrándose con herramientas como Figma, Sketch y Adobe XD.

¿Qué es Useberry?

Imagina que has creado los planos interactivos de una casa en tu ordenador ([[Prototipos]]). Quieres saber si la gente encuentra fácilmente el baño desde la entrada, pero no puedes invitar a 200 personas a tu estudio para que lo prueben una por una. Useberry te permite enviar esos planos a 200 personas por internet, pedirles que “encuentren el baño” y te devuelve un informe detallado con los caminos que tomaron, dónde se perdieron y cuánto tardaron, todo de forma automática.

Useberry

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué es Useberry?

User Flows

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A User Flow is a diagram that visualizes the complete path a user follows through a digital product to complete a specific task. It shows the screens, actions, and decisions the user makes from start to finish.

What are User Flows?

If a wireframe is the blueprint of a room and a sitemap is the blueprint of the entire building, a User Flow is the fire evacuation route. It doesn’t show all the rooms, just the specific sequence of steps to get from point A (e.g., “being in the hallway”) to point B (e.g., “being safely outside the building”).

User Flows

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Un User Flow (Flujo de Usuario) es un diagrama que visualiza la ruta completa que sigue un usuario a través de un producto digital para completar una tarea específica. Muestra las pantallas, las acciones y las decisiones que el usuario toma de principio a fin.

¿Qué son los User Flows?

Si un wireframe es el plano de una habitación y un mapa del sitio es el plano de todo el edificio, un User Flow es la ruta de evacuación de incendios. No muestra todas las habitaciones, solo la secuencia específica de pasos para ir desde un punto A (por ejemplo, “estar en el pasillo”) a un punto B (por ejemplo, “estar a salvo fuera del edificio”).

User Flows

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué son los User Flows?

User Interviews

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A user interview is a fundamental qualitative research technique in UX. It consists of a one-on-one conversation with a user (or potential user) to gain a deep understanding of their behaviors, goals, needs, motivations, and pain points in relation to a product or problem.

What Are User Interviews?

Imagine you are a doctor. You do not tell the patient “you need this medicine” – first you ask them “where does it hurt?”, “since when?”, “what have you tried?”. A user interview is similar: it is a structured conversation to diagnose a person’s real problems and needs before trying to “prescribe” a solution. It is not a casual chat; it is a discovery tool.

User Interviews

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A user interview is a qualitative research technique in which a researcher asks a user (or potential user) questions to gain a deep understanding of their behaviors, needs, motivations, and pain points in relation to a specific problem or product.

What Are User Interviews?

Imagine you are a journalist preparing a documentary. You do not send a questionnaire to the protagonist; you sit down with them and have a deep conversation. You ask open-ended questions so they tell you their story in their own words. You want to understand their experiences, their emotions, and what motivates them.

User Research Activities

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

User research activities (UX Research) are the set of methods and techniques used to understand users, their behaviors, needs, and motivations. It is the systematic process of collecting and analyzing data to inform the design process and decision-making.

What Are Research Activities?

Imagine you are a detective about to solve a big case. You do not go out on the street and interrogate random people. First, you define the mystery (“Who stole the cookies?”). Then, you identify your key witnesses (participants), prepare your list of questions (script), decide how you will analyze the clues (synthesis), and finally present your conclusions. A UX research plan is exactly that: a detective’s plan to solve a mystery about users.

User Surveys

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A user survey is a primarily quantitative research method that uses a set of standardized questions to collect data from a large sample of users. They allow you to measure attitudes, satisfaction, preferences, and gather demographic data at scale.

What Are User Surveys?

Think about the difference between having a deep conversation with one person and conducting a national census. The conversation (User Interviews) gives you a richness of detail and context about a single person. The census (the survey) gives you statistical data about thousands of people at once, allowing you to see patterns at a large scale, but without the individual detail.

User-Centered Design: The Foundation of Everything

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

An approach where user research and user needs drive every design decision from start to finish.

What is User-Centered Design?

Imagine building a house without ever talking to the people who will live in it. You decide the layout based on what you think looks good, where you’d put the kitchen, how you’d arrange rooms. Then your clients move in and realize you put the bedroom upstairs but everyone in the family has mobility issues. The stairs are now a crisis. User-centered design is the opposite: you ask the people who’ll use the house what they actually need, then design based on their reality, not your assumptions.

UserTesting.com

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

UserTesting.com is one of the largest and most well-known user experience research platforms. It allows companies to get video feedback from real users interacting with websites, applications, prototypes, and more. Its main value proposition is its enormous participant panel, which allows you to get feedback from very specific user profiles within hours.

What Is UserTesting.com?

Imagine you need the opinion of “mothers aged 30 to 40 who live in Mexico and have purchased car insurance online in the last 6 months.” Finding these people on your own would be a titanic task. UserTesting.com is like a giant casting agency for user research. You define the exact profile you need, and they provide participants who fit that profile, record their sessions as they perform the tasks you request, and deliver the videos for you to analyze.

UserTesting.com

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

UserTesting.com es una de las plataformas de investigación de experiencia de usuario más grandes y conocidas. Permite a las empresas obtener feedback en video de usuarios reales interactuando con sitios web, aplicaciones, prototipos y más. Su principal propuesta de valor es su enorme panel de participantes, que permite obtener feedback de perfiles de usuario muy específicos en cuestión de horas.

¿Qué es UserTesting.com?

Imagina que necesitas la opinión de “madres de entre 30 y 40 años que vivan en México y hayan comprado un seguro de coche online en los últimos 6 meses”. Encontrar a estas personas por tu cuenta sería una tarea titánica. UserTesting.com es como una agencia de casting gigante para la investigación de usuarios. Tú defines el perfil exacto que necesitas, y ellos te proporcionan participantes que encajan en ese perfil, graban sus sesiones mientras realizan las tareas que tú les pides y te entregan los videos para que los analices.

UserTesting.com

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué es UserTesting.com?

UX KPIs

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A UX KPI (Key Performance Indicator) is a quantifiable metric that a team uses to measure and evaluate the success of the user experience over time. They help teams understand whether their design efforts are achieving the desired outcomes.

What Are UX KPIs?

Imagine you are driving a car. The dashboard gives you vital information: the speedometer (speed), the fuel gauge (range), the engine temperature. You could not drive safely or efficiently without them. UX KPIs are the dashboard of your product: they are the indicators that tell you whether the user experience is on track or whether there are problems that need your attention.

UX Maturity Model

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A framework for assessing organizational UX maturity and planning the journey from ad-hoc design to design-led strategy.

What is UX Maturity?

UX maturity is how systematically an organization integrates UX into decision-making. Maturity ranges from Level 0 (no UX) to Level 4 (design-driven organization).

Level 0: No UX thinking. Decisions based on gut feel. Level 1: Ad-hoc UX. Designers react to crises. No strategy. Level 2: Emerging UX. Processes exist. Design is consulted, not leading. Level 3: Strategic UX. Design is foundational. Metrics guide decisions. Level 4: Design-led. Organization prioritizes UX. Every decision is user-centered.

UX Strategy Document

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

A UX Strategy Document is an artifact that articulates the [[Strategy and Vision|design strategy and vision]] of a product or service. It connects business goals with user needs and establishes a high-level plan for how design will help close the gap between where the product is now and where it wants to be in the future.

What Is a UX Strategy Document?

Imagine you are going on a road trip across a country. You don’t just get in the car and start driving. First, you create a travel plan: you define your final destination (the vision), the route you will follow, the key stops you will make (the strategic pillars), the budget you need, and how you will know you are on the right track. A UX Strategy Document is that travel plan for your product’s user experience.

UX Strategy Document

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Un Documento de Estrategia de UX es un artefacto que articula la [[Estrategia y Visión]] de diseño de un producto o servicio. Conecta las metas del negocio con las necesidades de los usuarios, y establece un plan de alto nivel sobre cómo el diseño ayudará a cerrar la brecha entre dónde está el producto ahora y dónde quiere estar en el futuro.

¿Qué es un Documento de Estrategia de UX?

Imagina que vas a hacer un viaje por carretera a través de un país. No te subes al coche y empiezas a conducir sin más. Primero, creas un plan de viaje: defines tu destino final (la visión), la ruta que seguirás, las paradas clave que harás (los pilares estratégicos), el presupuesto que necesitas y cómo sabrás que vas por buen camino. Un Documento de Estrategia de UX es ese plan de viaje para la experiencia de usuario de tu producto.

UX Strategy Document

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué es un Documento de Estrategia de UX?

UX vs UI Design: ¿Cuál es la Diferencia?

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

UX se enfoca en cómo funciona un producto y se siente, UI se enfoca en cómo se ve visualmente.

¿Cuál es la Diferencia Entre UX y UI?

Piensa en un restaurante: el diseño UX es toda la experiencia—cómo te recibe el anfitrión, el flujo desde la entrada a la mesa, lo fácil que es navegar el menú, el ritmo entre platos, si te sientes bienvenido. El diseño UI es cómo se ve el menú físico—las fuentes, colores, diseño y composición visual que lo hacen fácil de leer y apetitoso.

UX vs UI Design: ¿Cuál es la Diferencia?

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

UX se enfoca en cómo funciona un producto y se siente, UI se enfoca en cómo se ve visualmente.

¿Cuál es la Diferencia Entre UX y UI?

UX vs UI Design: What's the Real Difference?

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

UX focuses on how a product works and feels, while UI focuses on how it looks visually.

What’s the Difference Between UX and UI?

Think of a restaurant: UX design is the entire experience—how the host greets you, the flow from entry to table, how easy the menu is to navigate, the pacing between courses, whether you feel welcome. UI design is how the physical menu looks—the fonts, colors, layout, and visual design that makes it easy to read and appetizing.

Variables vs Styles en Figma: Estrategias y Tradeoffs

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Las Variables son valores crudos y dinámicos (números, colores, strings, booleanos) que permiten crear sistemas temáticos y prototipos avanzados. Los Styles son colecciones de propiedades visuales (como gradientes, efectos o tipografías complejas) que definen la apariencia final de un elemento.

El Dilema: ¿Variables o Estilos?

Figma ha evolucionado hacia un modelo mucho más potente con la introducción de las Variables, pero los Estilos siguen siendo fundamentales en muchos flujos de trabajo. Entender el propósito y las limitaciones de cada uno de estos elementos te ayudará a construir una librería de diseño más robusta y fácil de usar.

Variables vs Styles en Figma: Estrategias y Tradeoffs

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Dilema: ¿Variables o Estilos?

Variables vs. Styles in Figma: Strategies and Trade-offs

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Variables are raw and dynamic values (numbers, colors, strings, booleans) that allow for creating themed systems and advanced prototypes. Styles are collections of visual properties (such as gradients, effects, or complex typography) that define an element’s final appearance.

The Dilemma: Variables or Styles?

Figma has evolved toward a much more powerful model with the introduction of Variables, but Styles remain fundamental in many workflows. Understanding the purpose and limitations of each of these elements will help you build a more robust and easy-to-use design library.

Variant Explosion Control (Wrangling Systems)

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Variant Explosion Control is the process of optimizing and simplifying component architecture to avoid an excessive number of manual versions, using tools like Component Properties and Booleans to keep the system lightweight and easy to maintain.

The Problem: The Variant Labyrinth

Before improvements in tools like Figma, creating a simple component (like a button) with 3 sizes, 4 color variants, 2 icon states, and 5 interaction states (default, hover, active, focus, and disabled) required the manual creation of 120 individual variants (3 x 4 x 2 x 5).

Visual Hierarchy VS DOM Hierarchy: Accessibility

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Visual Hierarchy is the order in which a user sees and processes information on a screen based on size, color, position, and contrast. DOM Hierarchy (Document Object Model) is the order in which HTML code structures and reads that same information. Aligning both is the key to accessibility and SEO.

Why the Designer Should Know the DOM Hierarchy

As designers, we often “draw” elements on the Figma canvas without worrying about their internal order. However, for a Screen Reader or Keyboard user, your design is not an image; it is a sequential list of elements.

Visual Hierarchy: Guiding Users Through Your Design

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Visual hierarchy is the arrangement of design elements to guide users’ attention toward the most important information or actions.

What is Visual Hierarchy?

Walk into a grocery store and look at the display. Massive sale signs grab your attention first, then specific product names, then prices, then smaller details. Your eye follows a deliberate path. That’s visual hierarchy. On a webpage, the same principle applies—you’re guiding users’ eyes through information in order of importance using size, color, contrast, whitespace, and position. Without hierarchy, every element competes equally for attention and the page feels chaotic. With intentional hierarchy, users instantly grasp what matters, what’s secondary, and what’s contextual. It’s the difference between an overwhelming interface and one that feels organized and approachable.

Wireframes

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

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.

What are Wireframes?

Imagine you want to build a house. Before deciding on wall colors or furniture types, you need a blueprint that defines where the rooms, doors, and windows will be. That is exactly what a wireframe is for a digital product.

Wireframes

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

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.

¿Qué son los Wireframes?

Imagina que quieres construir una casa. Antes de decidir el color de las paredes o el tipo de muebles, necesitas un plano que defina dónde estarán las habitaciones, las puertas y las ventanas. Eso es exactamente un wireframe para un producto digital.

Wireframes

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué son los Wireframes?

Workshop Preparation

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Workshop preparation is the process of designing and planning a collaborative work session, with a clear objective, a structured agenda, and a series of dynamic activities, to achieve a specific result within a limited time.

What Is Workshop Preparation?

Imagine you are the host of an important dinner. You do not wait until the guests arrive to decide what you are going to cook. Weeks in advance, you plan the menu (the objective and activities), make the shopping list (the materials), prepare some ingredients ahead of time (the pre-work), and set the table (the environment). The success of the dinner depends 90% on this preparation.

Workshops Estratégicos

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Los workshops estratégicos son sesiones de trabajo colaborativas de alto nivel, diseñadas y facilitadas por líderes de diseño, para alinear a un grupo diverso de stakeholders (líderes de producto, negocio, tecnología) en torno a la visión, la estrategia y las prioridades a largo plazo. Los ejemplos más comunes son los [[Design Sprints]], los talleres de visión de producto y los de planificación de roadmap.

¿Qué es un Workshop Estratégico?

Imagina una cumbre de líderes mundiales. No se reúnen para discutir el color de las banderas. Se reúnen para abordar problemas complejos como el cambio climático o la economía global. Necesitan un facilitador experto (como un diplomático de la ONU) que estructure la conversación, asegure que todas las voces sean escuchadas y guíe al grupo hacia un acuerdo o un plan de acción conjunto.

Workshops Estratégicos

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Qué es un Workshop Estratégico?

Zeroheight

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Zeroheight is an online platform that allows you to create, document, and maintain [[Design System]] websites in a centralized and collaborative way. It integrates directly with design tools like Figma and development tools like [[Storybook]] to create a “single source of truth” for your entire design system.

What Is Zeroheight?

Imagine your [[Design System]] is a cookbook. Figma is where you design the photos of the dishes (the visual components). [[Storybook]] is where the chefs write and test the recipes (the component code). Zeroheight is the publisher that takes those photos and recipes and publishes them in an online cookbook, beautiful and easy to use, so everyone in the “restaurant” (your company) knows how to cook the dishes consistently.

Zeroheight

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Zeroheight es una plataforma online que permite crear, documentar y mantener sitios web de [[Sistema de Diseño]] de una manera centralizada y colaborativa. Se integra directamente con herramientas de diseño como Figma y herramientas de desarrollo como [[Storybook]] para crear una “fuente única de verdad” para todo tu sistema de diseño.

¿Qué es Zeroheight?

Imagina que tu [[Sistema de Diseño]] es un libro de cocina. Figma es donde diseñas las fotos de los platos (los componentes visuales). [[Storybook]] es donde los chefs escriben y prueban las recetas (el código de los componentes). Zeroheight es la editorial que coge esas fotos y esas recetas y las publica en un libro de cocina online, bonito y fácil de usar para que todo el mundo en el “restaurante” (tu empresa) sepa cómo cocinar los platos de forma consistente.

Zeroheight

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida