El Diccionario del Diseñador/a Digital es una herramienta práctica y especializada que reúne los conceptos fundamentales y emergentes del diseño digital. Pensado para diseñadores UX/UI, redactores UX, investigadores, desarrolladores front-end y equipos de producto, este recurso ofrece definiciones claras, aplicaciones reales y ejemplos accionables para cada término.
Desde conceptos clásicos como affordance hasta metodologías como Atomic Design, pasando por herramientas de uso diario como Auto Layout en Figma, cada entrada está diseñada para ayudarte a comunicarte mejor, diseñar con más intención y tomar decisiones fundamentadas.
A/B Testing
El A/B Testing es una metodología de experimentación que compara dos versiones de una misma página, componente o contenido para determinar cuál funciona mejor en base a una métrica específica, como tasa de conversión o clics.
Aplicación práctica de A/B Testing: Se utiliza para tomar decisiones basadas en datos, especialmente en fases de optimización. Las herramientas comunes incluyen Google Optimize, Optimizely o VWO.
Ejemplo de A/B Testing: Probar dos versiones de un botón de CTA en una home page: uno con el texto «Pruébalo gratis» y otro con «Empieza ahora» para ver cuál genera más registros.
Above the fold
«Above the fold» hace referencia al contenido visible en pantalla antes de hacer scroll. Proviene del diseño editorial, y en web es crucial para captar la atención inmediata del usuario.
Aplicación práctica de above the fold: Se considera en la arquitectura de la información y jerarquía visual. El contenido clave y llamadas a la acción deben estar ubicadas en esta área.
Ejemplo de above the fold: En una landing page, incluir el valor principal del producto, una imagen ilustrativa y un CTA destacado justo al cargar la página.
Accordion (Acordeón)
Un accordion es un patrón de diseño interactivo que permite expandir o contraer secciones de contenido dentro de una misma vista. Mejora la organización y usabilidad en interfaces con información extensa.
Aplicación práctica de accordion: Se utiliza frecuentemente en secciones de preguntas frecuentes (FAQs), menús laterales o formularios complejos. Su implementación debe garantizar accesibilidad y claridad en los estados abierto/cerrado.
Ejemplo de accordion: Una lista de preguntas frecuentes donde cada pregunta actúa como encabezado que se puede hacer clic para mostrar o esconder su respuesta.
Accesibilidad
La accesibilidad en diseño digital se refiere a la creación de productos y servicios utilizables por todas las personas, incluidas aquellas con discapacidades visuales, auditivas, motrices o cognitivas. Su objetivo es eliminar barreras que impiden el acceso equitativo a la información y funcionalidades.
Aplicación práctica de accesibilidad: Se aplica durante todo el ciclo de diseño y desarrollo. Incluye buenas prácticas como contraste de colores adecuados, navegación por teclado, etiquetas semánticas y descripciones alternativas para imágenes.
Ejemplo de accesibilidad: Un formulario accesible permite navegar entre campos con la tecla Tab, tiene etiquetas asociadas a cada campo y muestra mensajes de error claros y legibles.
Adaptabilidad
La adaptabilidad describe la capacidad de una interfaz para ajustarse a diferentes dispositivos, tamaños de pantalla o contextos de uso, sin comprometer la funcionalidad o experiencia.
Aplicación práctica de adaptabilidad: Es esencial en diseño responsive y diseño centrado en el contexto. Se logra mediante rejillas fluidas, media queries, y componentes escalables.
Ejemplo de adaptabilidad: Una web de recetas que funciona correctamente tanto en pantallas de escritorio como en móviles pequeños, reorganizando los bloques de contenido según el ancho.
Affordance
El concepto de affordance describe las pistas visuales que indican cómo debe interactuar el usuario con un elemento. Fue introducido por el psicólogo James Gibson y adaptado al diseño por Don Norman.
Aplicación práctica de affordance: Se aplica al diseño de botones, enlaces o iconos que deben comunicar su funcionalidad de forma intuitiva. Ayuda a reducir errores y mejora la experiencia.
Ejemplo de affordance: Un botón con sombreado y forma rectangular que parece «presionable» comunica correctamente su affordance.
Alt text (Texto alternativo)
El texto alternativo describe el contenido de una imagen para que pueda ser interpretado por lectores de pantalla o mostrado en caso de que la imagen no cargue. Es esencial para la accesibilidad web.
Aplicación práctica de alt text: Se incluye como atributo «alt» en el código HTML de una imagen. Debe ser descriptivo, breve y relevante.
Ejemplo de alt text: Una imagen de un gráfico de barras sobre ventas trimestrales debe tener un alt text como «Gráfico que muestra el crecimiento de ventas en el segundo trimestre».
Anchor link (Enlace ancla)
Un anchor link es un enlace que dirige a una sección específica dentro de una misma página web. Mejora la navegación y puede influir positivamente en la experiencia del usuario y el posicionamiento SEO.
Aplicación práctica de anchor link: Se usa comúnmente en índices de contenido, FAQs o páginas largas. Se implementa con el atributo href y un ID en el destino.
Ejemplo de anchor link: Un menú lateral que permite saltar a secciones como «Especificaciones», «Opiniones» o «Garantía» en una ficha de producto.
Anchor text (Texto ancla)
El texto ancla es la parte visible y clicable de un enlace. Es relevante para el SEO y debe describir claramente el destino del enlace.
Aplicación práctica de anchor text: Se optimiza en estrategias de contenido web. Evita frases genéricas como “haz clic aquí” y prefiere expresiones informativas como “ver guía completa de accesibilidad”.
Ejemplo de anchor text: En un artículo de blog sobre diseño inclusivo, un enlace dentro del párrafo dice “principios de accesibilidad web”, dirigiendo a otra página con dicha información.
Antipatrones
Los antipatrones son soluciones comunes pero ineficaces que empeoran la experiencia del usuario. Suelen adoptarse por costumbre o falta de análisis, y deben evitarse en el diseño centrado en el usuario.
Aplicación práctica de antipatrones: Identificar antipatrones ayuda a mejorar productos. Algunos ejemplos incluyen formularios infinitamente largos, confirmaciones confusas o pop-ups intrusivos.
Ejemplo de antipatrones: Obligar a los usuarios a registrarse antes de ver el contenido de una web es un antipatrón que puede aumentar el abandono.
ARIA – Accessible Rich Internet Applications
ARIA es un conjunto de atributos que mejora la accesibilidad de interfaces web ricas, permitiendo que los lectores de pantalla comprendan widgets, estados y funciones que no están presentes de forma nativa en HTML.
Aplicación práctica de ARIA: Se implementa en componentes personalizados como sliders, modales o tabs, usando roles, estados y propiedades ARIA para comunicar su función.
Ejemplo de ARIA: Un menú desplegable hecho con JavaScript puede usar «aria-expanded» y «aria-controls» para indicar si está abierto o cerrado y qué contenido controla.
Art direction (Dirección de arte)
La dirección de arte en diseño digital se refiere a la estrategia visual coherente que guía el uso de colores, tipografías, imágenes y estilos para comunicar una identidad de marca clara.
Aplicación práctica de art direction: Se define en las primeras fases del diseño visual y guía la producción de interfaces, banners, ilustraciones o motion graphics. Es clave para mantener consistencia.
Ejemplo de art direction: Una app de bienestar usa tonos pasteles, ilustraciones suaves y tipografía redondeada para transmitir calma y confianza.
Atomic Design
Atomic Design es una metodología creada por Brad Frost que organiza los componentes de interfaz en cinco niveles jerárquicos: átomos, moléculas, organismos, templates y páginas. Fomenta consistencia y escalabilidad.
Aplicación práctica de Atomic Design:Se usa en diseño de sistemas para construir librerías reutilizables. Permite identificar componentes genéricos y específicos de cada producto.
Ejemplo de Atomic Design: Un botón (átomo), un campo de búsqueda con botón (molécula), y una cabecera completa (organismo) en un sistema de diseño.
Auditabilidad
La auditabilidad se refiere a la capacidad de una interfaz o sistema digital de ser evaluado, verificado y monitoreado mediante registros, métricas o documentación clara. Es esencial para productos que deben cumplir normativas o estándares.
Aplicación práctica de auditabilidad: Se considera en diseño de productos con requerimientos legales, médicos o financieros. Implica registrar eventos clave de interacción y permitir trazabilidad.
Ejemplo de auditabilidad: En una plataforma bancaria, cada transacción del usuario queda registrada con sello de tiempo y puede consultarse desde el historial de actividad.
Autenticación
La autenticación es el proceso mediante el cual un sistema verifica la identidad de una persona usuaria antes de darle acceso. Es fundamental en la seguridad de interfaces digitales.
Aplicación práctica de autenticación: Diseñar flujos de login seguros y claros, con opciones como contraseñas, autenticación en dos pasos o biometría.
Ejemplo de autenticación: Un sistema de salud digital solicita correo y contraseña, seguido de un código de verificación enviado al móvil del usuario.
Autocompletado
El autocompletado es una funcionalidad que sugiere o rellena información automáticamente a medida que la persona usuaria escribe. Mejora la velocidad y precisión al completar formularios o realizar búsquedas.
Aplicación práctica de autocompletado: Se emplea en campos de búsqueda, formularios de dirección o entradas de texto que requieren opciones previsibles. Debe implementarse con sensibilidad a la privacidad y accesibilidad.
Ejemplo de autocompletado: En una barra de búsqueda, al escribir “cam”, el sistema sugiere “cámara”, “camiseta” o “camión” según el historial o términos populares.
Auto layout
Auto layout es una funcionalidad en herramientas como Figma que permite distribuir automáticamente elementos dentro de un contenedor, adaptándose a cambios de tamaño y contenido.
Aplicación práctica de auto layout: Se usa para construir componentes responsivos y mantener consistencia visual. Permite definir márgenes, alineaciones y comportamiento flexible ante cambios.
Ejemplo de auto layout:Un botón con ícono y texto que mantiene el espaciado correcto entre ambos, incluso si se cambia el texto o el tamaño del botón.
Autofocus
El atributo autofocus en HTML permite que un campo de formulario reciba el foco de forma automática al cargar la página. Mejora la eficiencia pero puede afectar la experiencia si se usa incorrectamente.
Aplicación práctica de autofocus: Es útil en formularios breves, como búsqueda o login, para agilizar la interacción inicial.
Ejemplo de autofocus: En una página de inicio de sesión, el campo de «usuario» aparece activo apenas se carga, permitiendo escribir sin hacer clic primero.
Avatar
Un avatar es una representación gráfica, generalmente circular, que simboliza a una persona usuaria en interfaces digitales. Puede ser una imagen, iniciales o ícono.
Aplicación práctica de avatar: Se utiliza en encabezados de sesión, comentarios, chats, perfiles y listas de usuarios. Es útil para reforzar identidad y personalización en productos digitales.
Ejemplo de avatar: En una aplicación de mensajería, cada contacto muestra un avatar a la izquierda del mensaje, facilitando la identificación visual de quién envió cada uno.
Backlog de producto
Es una lista priorizada y en constante evolución de funcionalidades, mejoras y correcciones que deben desarrollarse en un producto digital. Es un artefacto clave en metodologías ágiles.
Aplicación práctica de Backlog: El equipo de diseño colabora con producto para refinar tickets de diseño, investigar antes de la implementación y definir criterios de aceptación.
Ejemplo de Backlog: «Rediseñar pantalla de perfil», «Prototipo de onboarding para nuevos usuarios», «Corregir errores en el formulario de registro».
Background (Fondo)
El background se refiere al área de fondo de una interfaz o componente, sobre la cual se disponen los elementos principales. Afecta la legibilidad, el contraste y la percepción visual del contenido.
Aplicación práctica de Background: Se utiliza para estructurar jerarquía visual, destacar o neutralizar secciones, y respetar el sistema de diseño. Puede ser sólido, con gradiente o imagen.
Ejemplo de Background: Un formulario con fondo blanco sobre un background gris claro para asegurar contraste y enfoque.
Backup
Un backup es una copia de seguridad de archivos, datos o configuraciones que permite restaurar el contenido en caso de errores, pérdida o fallos del sistema.
Aplicación práctica de Backup: En diseño digital, se aplica al guardar versiones de archivos, componentes de Figma, versiones de sistemas o documentación para evitar pérdida de trabajo.
Ejemplo de Backup: Antes de hacer un rediseño profundo, el equipo duplica el archivo maestro de Figma como respaldo.
Banner
Un banner es un elemento gráfico destacado que se utiliza para comunicar promociones, mensajes clave o guiar la atención en una interfaz digital.
Aplicación práctica de Banner: Suele estar en la parte superior de una página (hero) o en secciones intermedias. Debe ser visualmente atractivo, accesible y evitar interferir con la navegación.
Ejemplo de Banner: En una home de ecommerce, un banner anuncia «Rebajas de temporada – Hasta 50% off».
Barrido
En diseño y tecnología, el barrido es el proceso de lectura que hace un escáner o láser sobre un original (como un código de barras o imagen) para capturar información línea por línea.
Aplicación práctica de Barrido: Aunque más común en ámbitos gráficos o industriales, influye en cómo se optimizan imágenes para escaneo o lectura automática.
Ejemplo de Barrido: Un lector de códigos QR utiliza un patrón de barrido para interpretar correctamente el contenido.
Benchmarking
El benchmarking en diseño digital es el proceso de analizar productos o interfaces de la competencia o referentes del mercado para extraer aprendizajes y establecer estándares de calidad o innovación.
Aplicación práctica de Benchmarking: Se realiza al inicio del proyecto para conocer buenas prácticas, errores comunes o propuestas de valor. Ayuda a inspirar decisiones de diseño fundamentadas.
Ejemplo de Benchmarking: Un equipo UX analiza 5 apps de banca digital para entender cómo resuelven el flujo de transferencia de dinero y qué elementos de interfaz son más comunes entre ellas.
Blinn
Blinn es un modelo de sombreado en gráficos 3D que calcula cómo la luz interactúa con una superficie. Permite suavizar reflejos y definir mejor los volúmenes.
Aplicación práctica de Blinn: Se aplica en renderizados para diseño de productos, juegos o animación digital, donde se requiere simular materiales de forma realista.
Ejemplo de Blinn: Al modelar una botella en 3D, se aplica sombreado Blinn para resaltar el brillo y curvatura del cristal.
Bicolor
En diseño, bicolor hace referencia a composiciones que utilizan solo dos colores principales. Favorece la simplicidad, el contraste y una comunicación clara.
Aplicación práctica de Bicolor: Se usa en identidades visuales, ilustraciones, gráficos o interfaces donde se requiere reducir ruido visual y facilitar la comprensión.
Ejemplo de Bicolor: Un dashboard de analítica muestra datos con dos colores contrastantes: azul para positivos, rojo para negativos.
Blanking (Borrador)
En procesos editoriales y digitales, el borrador o estado de «blanking» es una versión preliminar de un diseño, texto o interfaz, aún sin finalizar ni aprobado.
Aplicación práctica de Borrador: Es clave en procesos iterativos. Permite testeo temprano, validaciones y ajustes antes del lanzamiento final.
Ejemplo de Borrador: Un equipo comparte un borrador del nuevo flujo de alta de usuario en Figma para recibir feedback del equipo de producto.
Bloquear
Bloquear es una técnica usada en diseño tipográfico o maquetación para reservar un espacio que será ocupado por un elemento aún no disponible, como una imagen o letra especial.
Aplicación práctica de Bloquear: Se utiliza en diseño editorial o de contenido automatizado. Asegura que la estructura general del diseño se mantenga aunque falten elementos.
Ejemplo de Bloquear: En un sistema automático de generación de PDFs, se bloquean espacios para nombres personalizados aún no recibidos.
Bold (Negrita)
Bold es una variante tipográfica que aplica un trazo más grueso a las letras, útil para destacar información dentro de un texto o jerarquizar títulos y botones.
Aplicación práctica de Bold: Se usa para títulos, CTAs o énfasis en frases clave. Debe aplicarse con moderación para no perder su función de contraste.
Ejemplo de Bold: En una sección de ayuda: «Importante: recuerda guardar tu progreso antes de salir.»
Borde
Un borde es la línea o contorno que delimita un elemento visual, como una tarjeta, imagen, campo de formulario o botón.
Aplicación práctica de Borde: Aporta estructura, separación o énfasis. Debe integrarse al sistema visual del producto con espaciados, radios y color definidos.
Ejemplo de Borde: Un input de formulario tiene un borde de 1px gris claro con radios suaves para mantener consistencia con los demás elementos.
Botón fantasma (Ghost button)
Es un tipo de botón con borde y fondo transparente, generalmente usado como opción secundaria para no competir visualmente con el botón primario.
Aplicación práctica de Botón fantasma: Se utiliza en interfaces limpias o minimalistas, y debe mantener buen contraste y visibilidad. Es útil para acciones no prioritarias como “Más información” o “Volver”.
Ejemplo de Botón fantasma: En una landing page, junto al botón «Registrarse ahora» aparece un botón fantasma con la opción «Saber más».
Botón primario
Es el botón más importante en una interfaz, el que contiene la acción principal esperada en una página o flujo. Debe destacar visualmente y estar alineado con los objetivos del usuario y del negocio.
Aplicación práctica de Botón primario: Se define dentro del sistema de diseño con estilo propio (color, tamaño, jerarquía) y se limita a uno por pantalla o bloque.
Ejemplo de Botón primario: En un checkout, el botón primario dice «Confirmar compra», mientras otros botones como «Atrás» o «Editar dirección» son secundarios.
Botón (Button)
Un botón es un elemento interactivo que permite al usuario ejecutar una acción, como enviar un formulario, abrir un modal o avanzar en un flujo.
Aplicación práctica de Botón: Debe tener estados definidos (normal, hover, focus, desactivado), buen contraste, tamaño adecuado para interacción táctil y texto claro.
Ejemplo de Botón: Un botón con ícono y texto que dice «Añadir al carrito» dentro de una ficha de producto.
Branding
El branding es el conjunto de elementos visuales, verbales y estratégicos que definen la identidad de una marca. Incluye nombre, logotipo, paleta de colores, tipografías, tono de voz y más.
Aplicación práctica de Branding: Afecta todo el ecosistema del producto digital: desde interfaces hasta microcopys. Debe guiarse por un manual de marca consistente.
Ejemplo de Branding: Una app de finanzas personales con tono cercano, paleta de verdes suaves, íconos redondeados y lenguaje motivacional.
Brainstorming
El brainstorming es una técnica creativa grupal usada para generar ideas de forma libre, sin filtros ni juicios iniciales. Es común en procesos de ideación en diseño.
Aplicación práctica de Brainstorming: Se aplica en talleres, sesiones de ideación o definiciones tempranas de producto. Puede hacerse con post-its físicos o herramientas digitales.
Ejemplo de Brainstorming: En un sprint de diseño, el equipo propone ideas para mejorar el onboarding de usuarios nuevos.
Breadcrumbs (Migas de pan)
Los breadcrumbs son un componente de navegación jerárquica que muestra la ubicación actual del usuario dentro de una estructura de contenidos, facilitando el retorno a niveles anteriores.
Aplicación práctica de Breadcrumbs: Se usan en sitios con arquitecturas complejas como ecommerce o webs institucionales. Mejoran la orientación y reducen la carga cognitiva.
Ejemplo de Breadcrumbs: En una tienda online: «Inicio > Electrónica > Teléfonos > Samsung».
Breakpoint
Un breakpoint es un punto de quiebre definido en una interfaz responsiva que determina cuándo el diseño debe adaptarse a un nuevo ancho de pantalla.
Aplicación práctica de Breakpoint: Se establece mediante media queries en CSS o reglas en herramientas de diseño como Figma. Ayuda a mantener la legibilidad y usabilidad en todos los dispositivos.
Ejemplo de Breakpoint: En una web, al reducir la pantalla de 1024px a 768px, el menú de navegación cambia de horizontal a un botón tipo hamburguesa.
Brillo
El brillo es un atributo visual que define cuán clara o luminosa es una superficie o componente. Afecta la visibilidad, contraste y percepción estética.
Aplicación práctica de Brillo: Se ajusta en imágenes, fondos o íconos para mantener legibilidad. También se emplea en efectos visuales, sombreado o accesibilidad visual.
Ejemplo de Brillo: En modo oscuro, los textos claros se equilibran con un fondo menos brillante para evitar fatiga visual.
BTL – Below The Line
BTL es una estrategia de marketing que utiliza acciones directas, segmentadas y de alto impacto, como activaciones, eventos o campañas digitales específicas.
Aplicación práctica de BTL: En diseño digital, se aplica en landing pages, campañas de email, microinteracciones o productos promocionales personalizados.
Ejemplo de BTL: Una fintech lanza una campaña BTL donde usuarios reciben emails personalizados con recomendaciones de ahorro y enlaces a simuladores interactivos.
Bullet points
Los bullet points (viñetas) son elementos visuales que organizan información en listas, facilitando su lectura y escaneo.
Aplicación práctica de Bullet points: Se usan en textos informativos, formularios, páginas de ayuda o onboarding. Ayudan a estructurar ideas clave de manera clara y jerárquica.
Ejemplo de Bullet points: En una sección de beneficios de producto:
- Entrega en 2 días
- Soporte 24 horas
- Garantía de devolución
Buscador
Un buscador es un componente de interfaz que permite a la persona usuaria localizar contenido dentro de un sitio o aplicación a través de un campo de texto.
Aplicación práctica de Buscador: Debe ser accesible, ofrecer autocompletado, sugerencias inteligentes y manejar errores tipográficos. Es clave en productos con mucho contenido como ecommerce, medios o bases de datos.
Ejemplo de Buscador: En una plataforma de cursos, el usuario escribe «UX» y el buscador sugiere categorías, etiquetas o cursos relacionados antes de mostrar los resultados.
Cacheo (Caching)
Caching es el proceso de almacenar datos temporalmente para que futuras solicitudes se sirvan más rápidamente. En diseño digital, mejora el rendimiento y reduce tiempos de carga en interfaces.
Aplicación práctica de Cacheo: Se aplica a imágenes, datos de navegación, fuentes y recursos de UI. Su correcta implementación mejora la experiencia del usuario, especialmente en dispositivos móviles o redes lentas.
Ejemplo de Cacheo: Una app de noticias almacena en caché las últimas noticias consultadas para que al volver a abrirla se carguen instantáneamente.
Cabecera
La cabecera es la parte superior de una página web o interfaz que contiene elementos como el logo, menú de navegación, iconos de usuario o búsqueda. Es clave en la orientación y estructura del sitio.
Aplicación práctica de Cabecera: Se diseña para ser visible y coherente en todo el sitio, con adaptabilidad móvil y accesibilidad. A menudo permanece fija en scroll.
Ejemplo de Cabecera: En un ecommerce, la cabecera incluye el logo, buscador, acceso a cuenta y carrito de compras.
Caja alta y caja baja
Caja alta se refiere al uso de letras mayúsculas y caja baja al uso de minúsculas. Afecta la jerarquía, tono y legibilidad del texto en interfaces digitales.
Aplicación práctica de Caja alta y caja baja: Se utiliza para títulos, botones o etiquetas. La caja baja favorece la lectura fluida; la alta, el énfasis.
Ejemplo de Caja alta y caja baja: Un botón puede usar caja alta para destacar la acción: «ENVIAR», mientras los campos usan caja baja: «Escribe tu nombre».
Call to Action (CTA)
Un CTA es un mensaje o elemento visual que busca motivar al usuario a realizar una acción concreta, como registrarse, comprar o suscribirse.
Aplicación práctica de CTA: Se diseña con verbos de acción claros y colocación estratégica. Suele representarse como botón o enlace destacado.
Ejemplo de CTA: En una landing page, un botón naranja con el texto «Empieza gratis» dirige al formulario de registro.
Cama de negro
La cama de negro es una técnica de impresión que utiliza un fondo completamente negro como base para resaltar colores brillantes y detalles en la superficie.
Aplicación práctica de Cama de negro: Se aplica en impresión offset o digital de alta calidad, como portadas o materiales de branding premium.
Ejemplo de Cama de negro: Un catálogo de productos de lujo se imprime con fondo negro sólido para resaltar imágenes en dorado.
Canvas (Lienzo)
Canvas es el área de trabajo digital sobre la que se diseña en herramientas como Figma, Illustrator o Photoshop. Representa el espacio editable donde se construyen y visualizan los elementos.
Aplicación práctica de Canvas: Permite organizar múltiples pantallas o componentes, definir layouts, y establecer zonas de trabajo colaborativo.
Ejemplo de Canvas: En Figma, un diseñador organiza en el canvas una serie de frames que representan el flujo completo de onboarding.
Capas
Las capas son niveles superpuestos dentro de un archivo de diseño que permiten organizar y editar elementos de manera independiente sin afectar otros.
Aplicación práctica de Capas: Se usan en herramientas como Photoshop o Figma para estructurar elementos gráficos, facilitar la edición y controlar visibilidad.
Ejemplo de Capas: Una ilustración tiene capas separadas para fondo, personajes y texto, lo que permite editar el fondo sin alterar los demás elementos.
Capitular
Una capitular es una letra inicial agrandada al inicio de un párrafo o sección, usada tradicionalmente para embellecer textos largos o destacar inicios.
Aplicación práctica de Capitular: Se emplea en diseño editorial, newsletters o presentaciones con estilo clásico o literario.
Ejemplo de Capitular: En un artículo de revista digital, el primer párrafo inicia con una gran «E» capitular decorada.
Card (Tarjeta)
Una card es un contenedor visual compacto que agrupa información relacionada. Se utiliza para organizar contenido modular en interfaces.
Aplicación práctica de Card: Común en catálogos, perfiles, dashboards o resultados de búsqueda. Debe tener una estructura clara, accesible y responsiva.
Ejemplo de Card: Una ficha de producto con imagen, nombre, precio y botón de «Agregar al carrito».
Carousel (Carrusel)
Un carousel es un componente interactivo que permite mostrar múltiples contenidos (como imágenes o tarjetas) en un mismo espacio, desplazándolos de forma horizontal o automática.
Aplicación práctica de Carousel: Se usa en homepages, portfolios o galerías. Debe ser accesible, tener navegación visible y evitar depender solo del movimiento automático.
Ejemplo de Carousel: En la portada de un ecommerce, se muestra un carrusel con banners promocionales que rotan cada 5 segundos.
Checkbox
Un checkbox es un control de formulario que permite seleccionar múltiples opciones independientes entre sí.
Aplicación práctica de Checkbox: Se emplea en encuestas, filtros o configuraciones. Debe tener etiquetas visibles, buen tamaño táctil y estados definidos.
Ejemplo de Checkbox: En un filtro de tienda, el usuario puede marcar «Talla M» y «Color azul» simultáneamente.
Chip
Un chip es un componente visual pequeño y compacto que representa información como etiquetas, filtros o elementos seleccionados.
Aplicación práctica de Chip: Se usa en inputs de múltiples selecciones, navegación por tags o resúmenes de opciones elegidas. Deben ser legibles, accesibles y tener opción de eliminación.
Ejemplo de Chip: En un campo de búsqueda avanzada, se muestran chips con los términos «UX», «Remoto» y «Junior» que el usuario puede quitar individualmente.
CIE L*a*b* (LAB Color Space)
Es un modelo de color tridimensional creado por la Comisión Internacional de Iluminación (CIE), que mide el color de forma perceptual basada en la luminosidad (L*), el eje verde-rojo (a*) y el eje azul-amarillo (b*).
Aplicación práctica de CIE L*a*b*: Se utiliza en corrección de color, calibración de monitores y diseño donde se busca precisión cromática.
Ejemplo de CIE L*a*b*: Al preparar una guía de color para impresión profesional, se convierten los valores HEX a LAB para garantizar fidelidad.
Clean UI
Clean UI se refiere a una interfaz limpia, ordenada y sin elementos innecesarios. Prioriza la legibilidad, jerarquía visual y facilidad de uso.
Aplicación práctica de Clean UI: Implica uso de espacios en blanco, tipografía clara, número limitado de colores y eliminación de ruido visual. Mejora la experiencia y comprensión.
Ejemplo de Clean UI: Una app de tareas muestra solo lo esencial: lista de pendientes, botón para añadir y filtro de fecha, sin distracciones visuales.
Clipboard
El clipboard es el portapapeles virtual del sistema operativo que permite copiar y pegar información (texto, imágenes, componentes). En diseño, se usa frecuentemente para duplicar y reutilizar elementos.
Aplicación práctica de Clipboard: Se emplea entre herramientas (Figma, Sketch, navegadores) o dentro de la misma app. Debe preservarse el formato y contexto.
Ejemplo de Clipboard: Un diseñador copia una tabla desde Excel y la pega directamente en FigJam para discutirla en equipo.
Clúster de contenidos
Un clúster de contenidos es una agrupación temática de páginas o secciones en torno a un pilar principal, optimizado para SEO y navegación estructurada.
Aplicación práctica de Clúster: Se aplica en blogs, guías o hubs de conocimiento. Mejora el posicionamiento y facilita la exploración profunda.
Ejemplo de Clúster: Una guía de accesibilidad web agrupa artículos sobre color, navegación, tipografía y testing dentro de una sección principal.
CMYK
CMYK es un modelo de color sustractivo utilizado en impresión, compuesto por Cian, Magenta, Amarillo (Yellow) y Negro (Key). Permite reproducir una amplia gama de colores sobre papel.
Aplicación práctica de CMYK: Se usa en piezas impresas como folletos, tarjetas, catálogos o packaging. Es importante convertir archivos de RGB a CMYK antes de imprimir.
Ejemplo de CMYK: Un diseñador convierte un afiche en Photoshop a CMYK para enviarlo a imprenta.
Columna
Una columna es una división vertical en un diseño que ayuda a estructurar el contenido. Forma parte de la retícula o grid de una interfaz.
Aplicación práctica de Columna: Se utiliza para crear alineación, ritmo visual y modularidad. Las interfaces responsivas suelen basarse en un sistema de 12 columnas.
Ejemplo de Columna: Un diseño de blog usa tres columnas: una para navegación lateral, otra para contenido principal y una tercera para widgets o enlaces útiles.
Collage
Un collage es una composición visual que une múltiples elementos gráficos, imágenes o texturas en una sola pieza. Se utiliza con fines creativos, narrativos o experimentales.
Aplicación práctica de Collage: Común en diseño editorial, campañas creativas o moodboards. Puede hacerse digitalmente o en formato analógico.
Ejemplo de Collage: Un moodboard de inspiración para un rediseño visual combina fotos de estilo, paletas de color y tipografías superpuestas.
Comprimido
En diseño digital, un archivo comprimido es uno que ha reducido su tamaño mediante técnicas de compresión, sin o con pérdida de calidad. Mejora la carga y optimización web.
Aplicación práctica de Comprimido: Se aplica a imágenes (JPG, WebP), videos y recursos UI. Debe equilibrarse tamaño y calidad.
Ejemplo de Comprimido: Una imagen de portada se exporta como WebP comprimido para que cargue rápido sin perder nitidez.
Condensado
Condensado es una variante tipográfica donde los caracteres son más estrechos de lo habitual. Permite incluir más texto en menos espacio.
Aplicación práctica de Condensado: Se usa en titulares, etiquetas o diseños donde se requiere ahorrar espacio sin sacrificar jerarquía visual.
Ejemplo de Condensado: En una tabla comparativa, los títulos de columna usan tipografía condensada para ajustarse al ancho.
Concept art
El concept art es una ilustración conceptual que representa ideas visuales iniciales para productos, videojuegos, películas o entornos digitales.
Aplicación práctica de Concept art: Se utiliza en fases tempranas de exploración visual. Ayuda a alinear la visión del producto con stakeholders y equipos creativos.
Ejemplo de Concept art: Un diseñador crea un concept art de una interfaz futurista para una app de realidad aumentada.
Contornear
Contornear es una técnica que consiste en aplicar un borde o trazo alrededor de un texto o figura para destacarlo del fondo o mejorar su legibilidad.
Aplicación práctica de Contornear: Se usa en banners, afiches o interfaces con fondos complejos. Debe aplicarse con sutileza para no generar ruido visual.
Ejemplo de Contornear: Un texto blanco sobre una imagen se contornea con un trazo oscuro para hacerlo legible.
Copyright
El copyright es el derecho legal que protege la autoría de obras originales, como diseños, ilustraciones, textos o interfaces.
Aplicación práctica de Copyright: En diseño digital, implica respetar derechos de autor, licencias y atribuciones de recursos visuales.
Ejemplo de Copyright: Una app incluye en su pie de página: «© 2025 Estudio XYZ. Todos los derechos reservados.»
Cortesías
En tipografía, las cortesías son signos o símbolos que acompañan al texto con fines de cortesía o formalidad, como ®, ™, © o abreviaciones como «Atte.»
Aplicación práctica de Cortesías: Se utilizan en textos legales, pie de página, branding y comunicaciones formales.
Ejemplo de Cortesías: En la ficha de producto se indica: «Nike® Air Max™ con tecnología ZoomX.»
Croma key
El croma key es una técnica audiovisual que permite reemplazar un color específico (generalmente verde) por una imagen o video diferente. Se usa en edición de video y presentaciones.
Aplicación práctica de Croma key: En diseño digital, se aplica en videos promocionales o mockups interactivos.
Ejemplo de Croma key: Un video explicativo usa croma verde detrás del presentador para superponer la interfaz de la app que se está demostrando.
Cubierta
En diseño editorial, la cubierta es la parte externa de una publicación (como una revista o libro) que incluye portada, contraportada y lomo. Es clave para la identidad visual del contenido.
Aplicación práctica de Cubierta: Se diseña con atención a jerarquía, imagen de portada, título, branding y acabado impreso.
Ejemplo de Cubierta: El diseño de una revista digital imita una cubierta impresa, con imagen central, logo, titulares y código QR.
Cuerpo de texto
El cuerpo de texto es la parte principal de un contenido escrito. Incluye los párrafos corridos que desarrollan la información o narración.
Aplicación práctica de Cuerpo de texto: Debe tener tipografía legible, interlineado adecuado, buen contraste y tamaño apropiado para la lectura en pantalla.
Ejemplo de Cuerpo de texto: Un artículo de blog usa fuente serif a 16 px con interlineado 1.5 para facilitar la lectura prolongada.
Cursor (Puntero)
El cursor o puntero es el ícono gráfico que representa la posición del ratón o método de entrada en una interfaz. Cambia según el contexto o tipo de interacción.
Aplicación práctica de Cursor: Se personaliza para indicar acciones como clic, selección de texto, carga o interacción con enlaces.
Ejemplo de Cursor: Al pasar el mouse sobre un botón, el cursor cambia a una mano para indicar que es clickeable.
Cuenta gotas
El cuenta gotas es una herramienta de selección de color que permite capturar un color exacto desde una imagen o diseño.
Aplicación práctica de Cuenta gotas: Se usa en software de diseño para igualar colores, crear paletas y mantener consistencia visual.
Ejemplo de Cuenta gotas: En Figma, el diseñador usa el cuenta gotas para igualar el color del botón con el del logo corporativo.
Diseñadora UX/UI y Especialista en Marketing Digital
Creando experiencias intuitivas y estrategias efectivas.
