Diseño de interacción (UI)
Principios esenciales de una card bien diseñada
Claridad informativa
Una card debe comunicar su propósito en milisegundos. La estructura más efectiva y común es esta:
imagen → título → texto → acciones.
Estructura coherente
La consistencia es la base de un componente escalable.
Variables como sombras, bordes, radios, espaciados, tipografías y alturas mínimas deben ser definidas en el sistema de diseño para que todas las cards funcionen juntas, no como piezas aisladas.
Escaneabilidad
Una card está pensada para ser leída en serie. Cuanto más rápido pueda recorrerse, más eficiente será la experiencia:
- títulos cortos,
- descripciones concisas,
- alineación visual estable,
- elementos secundarios en posiciones predecibles.
Integración en un sistema de diseño
Para que una card forme parte de un ecosistema coherente, debe apoyarse en:
- Tokens y espaciados: Utilizar un sistema modular (4, 8, 12, 16…) asegura armonía entre componentes y mejora la mantenibilidad.
- Estilos de contenedor: El diseño debe resolver una única línea visual: ¿cards con sombra o cards con borde? Combinar ambas opciones en un mismo producto genera ruido visual.
- Estados definidos: Todo componente interactivo requiere estados: default, hover, pressed, disabled.
Sin ellos, la experiencia se vuelve inconsistente y poco predecible.
Cómo diferenciar cards clicables de cards informativas
Uno de los problemas más habituales es que el usuario no sabe si puede interactuar con la card. La solución debe ser visual y también funcional.
Cards clicables
Transmiten interactividad desde el primer vistazo:
- cursor tipo pointer,
- cambio de sombra, elevación o fondo en hover,
- microinteracciones claras en móvil.
Si una card es clicable, debe serlo completamente.
Cards no clicables
Deben evitar toda señal visual de acción:
- no aplicar hover,
- mantener sombra suave o borde ligero,
- evitar confusiones con botones internos.
Diseño de acciones internas: botones y CTAs
Los botones dentro de una card deben cumplir tres principios:
- Adecuación jerárquica: El botón debería ser secundario, salvo en cards cuya acción es el objetivo principal del flujo.
- Claridad visual: El botón debe tener estilo propio: borde, radio, padding y tipografía definidos por el sistema, nunca dependientes del contenedor.
- Accesibilidad: Dimensión mínima: 44×44 px.
Tipografía dentro de cards
El uso de texto debe generar jerarquía sin esfuerzo:
- Título: 16–20 px, semibold.
- Descripción: 14–16 px, tono neutro.
- Metainformación (etiquetas, fechas, categorías): discreta, consistente, fácilmente escaneable.
Controlar el número de líneas es esencial para mantener la armonía vertical.
Espaciado interno
Las cards mejor diseñadas no destacan por su color o sombra, sino por su equilibrio interno.
Recomendaciones habituales:
- Padding general: 16–20 px
- Entre imagen y título: 12–16 px
- Entre título y descripción: 8–12 px
- Entre descripción y acciones: 16–20 px
Este ritmo visual convierte un componente estándar en un componente profesional.
Cuando la card incluye imagen
Para medios visuales:
- Usar ratios consistentes: 16:9 o 1:1.
- Mantener los bordes superiores alineados con el radio general.
- Evitar imágenes demasiado oscuras si la card incorpora texto.
- Colocar badges o etiquetas siempre en la misma esquina.
Tipologías de cards según objetivo
- Cards de contenido: ideales para blogs, noticias y listados editoriales.
- Cards de producto: centradas en precio, rating y CTA.
- Cards funcionales o de dashboard: orientadas a métricas, estados o accesos rápidos.
- Cards de perfil/identidad: pensadas para personas, roles o contacto.
Cada tipología sigue la misma base estructural, pero cambia el peso del contenido.
Errores que un diseño profesional evita
- Sombras excesivas o inconsistentes.
- Hover exagerados.
- Tipografías mezcladas o sin jerarquía.
- Espaciado irregular.
- Cards “casi” clicables.
- Exceso de elementos dentro de un mismo contenedor.
- Alturas inestables entre cards del mismo listado.
Diferentes tipos de cards según función
Cards de contenido
- Imagen destacada
- Título
- Breve descripción
- Opcional: categoría, autor, fecha
Cards de producto
- Imagen
- Título del producto
- Precio
- Rating (reseñas)
- Acción: «Añadir al carrito»
Cards funcionales (dashboard/widgets)
- Icono
- Número o gráfico
- Texto breve
- No suelen ser clicables
Cards de perfil / identidad
- Foto
- Nombre
- Rol
- Botón de acción
Errores comunes a evitar
❌ Sombra demasiado fuerte
❌ Hover exagerado
❌ Tipografías inconsistentes
❌ Espaciado desigual
❌ Demasiada información en una sola card
❌ No diferenciar correctamente clicable vs no clicable
❌ Botones grandes que rompen la armonía
