Diseño Intermediate

Marca y Plantillas - Gestión de Identidad Visual del Equipo

Personaliza la identidad visual de tu organización con plantillas de tarjetas, bloqueo de campos, sistemas de diseño y directorios de equipo. Aprende cómo aplicar estándares de marca consistentes a escala.

Última actualización:

CardRender te permite construir una identidad de marca consistente en toda tu organización. Los propietarios y administradores pueden establecer estándares visuales, crear plantillas reutilizables, bloquear campos para asegurar cumplimiento y personalizar directorios de equipo que se alineen con tu guía de marca corporativa.

Marca del Workspace

La configuración de marca del workspace define la identidad visual para todas las tarjetas, directorios y páginas públicas asociadas con tu organización.

Activos de Marca

Carga y gestiona activos visuales desde Configuración del Workspace → Marca:

  • Logo: Aparece en directorios de equipo, portales de incorporación y emails del sistema. Soporta PNG, SVG o JPEG (máx. 2 MB)
  • Banner del directorio: Imagen de encabezado para directorios públicos del equipo. Tamaño recomendado 1200x300px
  • Favicon: Icono de pestaña del navegador personalizado para páginas de tarjetas (archivo .ico o PNG de 32x32px)
  • Foto de perfil predeterminada: Placeholder para nuevos miembros que aún no han cargado su foto

Los activos se almacenan en una CDN global para tiempos de carga rápidos y están disponibles en todas las tarjetas y directorios.

Paleta de Colores

Define colores primarios y secundarios que se aplican a enlaces de tarjetas, botones, fondos e íconos. CardRender soporta:

  • Códigos Hex: #3B82F6
  • Valores RGB: rgb(59, 130, 246)
  • Variables CSS personalizadas: Integra con tu sistema de diseño existente

Los colores de marca aseguran que las tarjetas se alineen con tu sitio web, presentaciones y otros activos de marketing.

Mensajería de Marca

Personaliza mensajes en toda la experiencia:

  • Tagline de la empresa: Aparece en encabezados de directorios del equipo
  • Declaración de privacidad: Texto adicional para páginas de tarjetas que explica cómo manejas datos de contactos
  • Mensaje de pie de página: Descargos de responsabilidad personalizados o CTAs al final de cada tarjeta

Plantillas de Tarjetas

Las plantillas aceleran la creación de tarjetas y aseguran consistencia en todos los miembros del equipo. Los administradores pueden crear plantillas para diferentes departamentos, roles o regiones.

Biblioteca de Plantillas

CardRender proporciona plantillas preconstruidas para casos de uso comunes:

  • Representante de Ventas: CTA de reserva de reuniones, perfiles sociales, descargas de estudios de caso
  • Atención al Cliente: Enlaces de mesa de ayuda, horarios de soporte, chat en vivo
  • Equipo Ejecutivo: Biografía, declaración de visión, enlaces de prensa

Los administradores pueden personalizar plantillas existentes o construir nuevas desde cero.

Plantillas Personalizadas

Crea una nueva plantilla desde Configuración del Workspace → Plantillas de Tarjetas:

  1. Haz clic en Nueva Plantilla
  2. Nombra la plantilla (ej., “Director de Ventas LATAM”)
  3. Configura campos predeterminados (título, teléfono, LinkedIn, etc.)
  4. Define campos personalizados específicos de la industria (ej., territorio, certificaciones, idiomas hablados)
  5. Establece el diseño (colores, fuentes, espaciado de botones)
  6. Bloquea campos que no deberían ser editables por usuarios individuales

Cuando un gerente crea una nueva tarjeta, puede seleccionar de las plantillas aprobadas, ahorrando tiempo y asegurando adherencia a la marca.

Bloqueo de Campos

Los campos bloqueados previenen que usuarios individuales hagan cambios no autorizados:

  • Logotipo de la empresa: Asegura que todos usen la imagen oficial de marca
  • Colores de marca: Previene personalización que viole guías de marca
  • Enlaces corporativos: Fuerza enlaces estandarizados (ej., página de privacidad de la empresa, URL de la mesa de ayuda)
  • Información de cumplimiento: Bloquea descargos de responsabilidad legales o avisos regulatorios

Los administradores pueden desbloquear campos para miembros específicos según sea necesario.

Firmas de Email

CardRender genera firmas de email con formato HTML que coinciden con tus tarjetas digitales. Las firmas incluyen tu foto, información de contacto, enlaces sociales y activos de marca de la empresa.

Constructor de Firmas

Los miembros pueden generar firmas desde Mi Tarjeta → Exportar → Firma de Email:

  • Formatos de exportación: HTML (para Gmail, Outlook), formato de texto enriquecido (para Apple Mail), Markdown
  • Personalización: Incluir/excluir campos específicos (teléfono, ubicación, bio)
  • Consistencia de marca: Las firmas usan colores y logotipos del workspace automáticamente

Los administradores pueden crear plantillas de firmas pre-aprobadas para aplicar en todo el equipo.

Distribución de Firmas

Los planes Enterprise soportan distribución centralizada de firmas:

  • Integración con Microsoft 365: Establece firmas en todas las cuentas del equipo a través de Exchange Online
  • Integración con Google Workspace: Empuja firmas a Gmail a través de configuración de dominio
  • API de firma: Sincroniza firmas con tu herramienta interna de gestión de email

Esto asegura que todos los miembros del equipo usen firmas actualizadas sin intervención manual.

Personalización del Directorio del Equipo

Los directorios de equipo son páginas públicas o privadas que muestran todos los miembros de la organización. Funcionan como micro-sitios con marca que compradores e invitados pueden explorar.

Opciones de Diseño

Los administradores controlan cómo se visualiza el directorio:

  • Vista de cuadrícula: Tarjetas de estilo mosaico con fotos, nombres, títulos
  • Vista de lista: Diseño de tabla compacto con búsqueda y filtros
  • Vista organizacional: Gráfico de organigrama jerárquico con relaciones de reporte

Los directorios soportan paginación y carga diferida para equipos con cientos o miles de miembros.

Configuración del Directorio

Personaliza metadatos del directorio y SEO:

  • Título de la página: “Conoce al Equipo de Acme Corp”
  • Meta descripción: Optimizada para búsqueda (aparece en resultados de Google)
  • URL personalizada: cardrender.com/acme-team o configura un dominio personalizado
  • Configuración de índice: Público (indexado por motores de búsqueda) o privado (requiere inicio de sesión)

Los directorios públicos impulsan el SEO de marca, permitiendo que tu equipo aparezca en búsquedas de nombre de la empresa + título del trabajo.

Consistencia de Marca en Toda la Organización

CardRender proporciona múltiples mecanismos para forzar estándares de marca:

  • Aprobaciones de administrador: Requiere que los administradores revisen nuevas tarjetas antes de que se publiquen
  • Validación automatizada: Marca tarjetas con imágenes de baja resolución, fondos no de marca o enlaces rotos
  • Revisiones trimestrales: Notificaciones automatizadas a gerentes para auditar tarjetas y asegurar cumplimiento
  • Analíticas de marca: Rastrea qué porcentaje de tarjetas usan plantillas aprobadas vs. diseños personalizados

Las organizaciones con requisitos estrictos de cumplimiento (ej., servicios financieros, salud) pueden habilitar el modo de “solo plantillas aprobadas” para prevenir cualquier personalización.

Integración del Sistema de Diseño

Los clientes Enterprise pueden integrar CardRender con sistemas de diseño existentes para aplicar marca programáticamente.

Integración con Figma

Sincroniza plantillas de tarjetas con tus archivos de diseño de Figma:

  1. Conecta CardRender a tu organización de Figma desde Configuración → Integraciones
  2. Selecciona marcos para convertir en plantillas de tarjetas
  3. Mapea variables de Figma a campos de CardRender (colores, fuentes, espaciado)
  4. Las actualizaciones en Figma se sincronizan automáticamente con las plantillas de tarjetas

Esto asegura que las tarjetas permanezcan consistentes con la biblioteca de tu sistema de diseño.

Variables CSS

CardRender soporta variables CSS personalizadas para alinearse con frameworks de diseño:

--brand-primary: #3B82F6;
--brand-secondary: #10B981;
--brand-accent: #F59E0B;
--font-heading: "Inter", sans-serif;
--font-body: "Inter", sans-serif;
--border-radius: 8px;

Los desarrolladores pueden definir variables en Configuración del Workspace → CSS Personalizado para aplicar estilo consistente sin editar plantillas individuales.

Mejores Prácticas

  • Define estándares de marca antes de incorporar miembros del equipo para evitar retrabajo
  • Usa plantillas para roles repetitivos (ej., equipos de ventas, soporte) para ahorrar tiempo
  • Bloquea campos que contengan información legal, regulatoria o de cumplimiento
  • Audita tarjetas trimestralmente para asegurar que permanezcan actualizadas y conforme a la marca
  • Integra la generación de firmas de email con la incorporación de nuevos empleados
  • Haz públicos los directorios de equipo para impulsar SEO orgánico y descubrimiento de marca
  • Usa variables CSS si mantienes un sistema de diseño externo (reduce duplicación de esfuerzo)