Usa el Constructor de Tarjetas de Interfaz gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningún servidor.
Por Qué las Tarjetas Están en Todas Partes
Las tarjetas son el contenedor habitual de la web moderna. Listas de productos, artículos de blog, planes de precios, miembros de equipo y testimonios viven en tarjetas, porque una tarjeta hace bien un trabajo: agrupa una imagen, un título, una descripción corta y una acción en una sola unidad que se puede pulsar. Los usuarios exploran las tarjetas rápido, las comparan lado a lado y saben exactamente dónde pulsar. Esa facilidad de exploración explica por qué el patrón sobrevivió a una década de tendencias de diseño. La herramienta de arriba te permite diseñar una tarjeta, verla en vivo y descargarla como imagen PNG o copiar su código HTML.
El constructor mantiene la tarjeta honesta. Defines un título, una descripción, la etiqueta de un botón, un color y un estilo de imagen. La vista previa muestra la tarjeta real, no una maqueta, así que lo que ves es lo que obtienes. Cuando estés conforme, descarga un PNG para una diapositiva, una publicación social o una maqueta, o copia el HTML para tu propio sitio. La exportación a PNG usa la biblioteca html-to-image, y si esa biblioteca no puede cargarse, una exportación SVG integrada toma el relevo, así que igual obtienes una imagen.
Cómo Usar el Constructor
Empieza por las palabras. El título de una tarjeta debe ser corto, idealmente menos de seis palabras, porque los títulos largos se parten y empujan el botón hacia abajo. La descripción debe ser una frase que diga qué ofrece la tarjeta o por qué importa. Si necesitas dos frases, la tarjeta probablemente intenta hacer demasiado, y el detalle extra pertenece a la página a la que enlaza. Después escribe la etiqueta del botón como una acción: compra ahora, lee más o prueba gratis, en lugar de un vago pulsa aquí.
Después elige el color. El color del botón debe destacar sobre el fondo de la tarjeta, porque el botón es la acción y el ojo debe encontrarlo primero. Un color igual que el degradado de la imagen queda ordenado pero puede ocultar el botón, así que prueba la tarjeta de un vistazo: si el botón no es lo primero que notas después del título, refuerza el contraste. Por último, elige el estilo de imagen. Un degradado sirve para ofertas abstractas, un color sólido para diseños mínimos, y un tinte fotográfico para tarjetas sobre fotografía real.
Diseñar Tarjetas que Reciban Clics
El orden dentro de una tarjeta importa. Imagen primero, luego título, luego descripción y luego botón es el orden que los usuarios esperan, y romperlo rara vez ayuda. La imagen gana atención, el título gana interés, la descripción gana confianza, y el botón convierte esa confianza en acción. Mantén la zona de imagen generosa, alrededor de la mitad de la altura de la tarjeta, porque una franja fina de imagen parece decoración y no una foto. Mantén el relleno constante, alrededor de veinte píxeles, para que el texto no se pegue a los bordes.
La consistencia entre tarjetas importa aún más que cualquier tarjeta sola. Cuando las tarjetas de una cuadrícula tienen alturas distintas, imágenes de tamaños distintos o botones distintos, la cuadrícula se ve desordenada y los usuarios se vuelven lentos. Usa la misma longitud de título, la misma altura de imagen y el mismo estilo de botón para cada tarjeta de una fila. Si una tarjeta tiene un título mucho más largo, recórtalo para igualar a las demás en lugar de dejar que la cuadrícula se escalone.
Cuándo Usar PNG y Cuándo Usar Código
Descarga un PNG cuando la tarjeta va a un lugar donde el código no puede ir: una presentación, una publicación social, un PDF o un documento de revisión de diseño. El PNG es una foto de la tarjeta, fija y portable. Copia el HTML cuando la tarjeta va a un sitio web, porque el HTML real se mantiene nítido en cualquier tamaño de pantalla, carga rápido y permite pulsar el botón. El HTML de esta herramienta es un punto de partida: añade tu propio enlace al botón, ajusta el ancho a tu cuadrícula y adáptalo con las clases de tu sitio.
Una advertencia sobre las tarjetas PNG: el texto dentro de un PNG no se puede seleccionar, buscar ni leer con lectores de pantalla. Si la tarjeta lleva información importante en una página web, usa HTML, no una imagen. Reserva las exportaciones PNG para presentaciones y maquetas, donde la imagen es el punto.
Preguntas Frecuentes
¿Por qué mi PNG se ve borroso? La exportación dibuja la tarjeta a su tamaño en pantalla. Para una imagen más nítida, acerca la página antes de exportar, o usa la versión HTML en un sitio, donde el texto se mantiene perfectamente nítido a cualquier tamaño.
¿Puedo usar el HTML de la tarjeta en cualquier sitio? Sí. Es HTML plano con estilos en línea, así que funciona en la mayoría de las páginas. Sustituye el enlace de ejemplo por tu destino real antes de publicar.
¿Qué pasa si la descarga PNG no hace nada? La herramienta usa una exportación basada en SVG cuando la biblioteca principal no está disponible. Si ambas fallan, tu navegador puede estar bloqueando las descargas de la página; permite las descargas e inténtalo de nuevo.
Diseña una tarjeta arriba, compruébala de un vistazo y exporta la versión que encaje donde va a ir.
Herramientas relacionadas
- UI Card Component Builder (English version)
- Constructor de Barras de Navegación
- Constructor de Secciones Principales