Inyección de assets de marca

Qué significa y por qué importa

Qué incluye SessDev

• Ingestión de los assets de marca provistos vía un handoff estructurado (panel de exportación de Figma, Google Drive o Notion) con una carpeta por familia de asset y un checklist de variantes y formatos requeridos.
• Validación de que cada archivo provisto cumple el formato y dimensiones requeridos antes de que comience la integración — SVG con viewBox para logos, PNG transparente en los tamaños documentados para icons, aspect ratio y presupuesto de peso correctos para imágenes OG.
• Cableado de las variantes de logo requeridas por el diseño (lockup completo, isotipo, tema claro, tema oscuro, monocromo) en header, footer y plantillas de email — un componente Image por variante, sin recortes a mano.
• Generación y cableado del bundle de favicon desde un master provisto (favicon.ico, PNGs 16/32/48, Apple touch icon 180×180, Android maskable 192/512) en el manifest de iconos y los tags head de la app.
• Cableado de las imágenes Open Graph y Twitter card provistas por el cliente (1200×630 para OG, 1200×600 para Twitter summary-large-image) en la metadata por ruta, con fallbacks sensatos para rutas que no sobreescriben.
• Setup del bundle de iconos web-app para contextos instalables — entradas en manifest.webmanifest, theme color, background color, display mode — desde iconos provistos por el cliente.
• Cableado de meta tags theme-color, msapplication-TileColor, mask-icon y Safari pinned-tab desde los valores provistos en el handoff de diseño.
• Implementación de fallbacks sensatos para variantes faltantes — si solo se provee un único logo, el slot de tema oscuro lo reusa con un filtro de inversión; si no se provee variante monocroma, el footer cae al lockup completo. Las decisiones de fallback quedan documentadas en la nota de handoff.
• Documento de handoff listando cada slot de asset, el archivo actualmente cableado, el nombre de archivo fuente recibido, y el procedimiento para intercambiar un asset más tarde sin involucrar ingeniería.

Qué queda excluido

• Diseño de logo, creación de logotipo o cualquier forma de autoría original de brand-mark.
• Creación de nuevos brand marks, sub-brand marks, marks de producto o marks de campaña.
• Retoque del artwork provisto — arreglo de kerning, ajuste de proporciones, reparación de escaneos de baja calidad, redibujado de paths.
• Reconstrucción vectorial de logos rasterizados. Si solo se provee un PNG de baja resolución, el asset se rechaza; la reconstrucción es actividad del equipo de diseño.
• Corrección de color, conversión de perfiles (CMYK a sRGB), ajuste de gamma o cualquier trabajo de color fotográfico.
• Remoción de fondo, masking, creación de canal alpha o limpieza de matte sobre imágenes provistas.
• Ilustración original, ilustraciones puntuales, mascotas, hero artwork o elementos visuales de soporte.
• Edición de fotos, compositing, retoque, beauty work o cualquier actividad de manipulación de imagen más allá de la conversión de formato.
• Producción de logo animado — composición Lottie, animación de paths SVG, intros en video o entregables de motion design.
• Autoría del sistema de marca en sí — definición de reglas de uso, clear-space, tamaños mínimos, grids do/don't o documentos de brand guidelines.
• Diseño de mascotas, diseño de personajes o cualquier autoría visual basada en persona.

Riesgos si no se define correctamente

• Artwork en formato incorrecto bloquea la integración

  Logos entregados como JPGs aplanados, icons provistos en dimensiones incorrectas, imágenes OG comprimidas por debajo del umbral de la plataforma — el artwork en formato incorrecto fuerza al equipo de diseño de vuelta al loop y ralentiza la integración. La validación de formato en el alcance lo detecta temprano; el reformateo en sí es actividad del equipo de diseño.

• Logo pixelado a escala retina o de impresión

  Un logo rasterizado provisto a 200×60 se ve nítido en un mockup y vergonzoso en un header retina a 400×120. Sin una fuente SVG o un master de alta resolución, el sitio en vivo degrada la marca en cada dispositivo. La reconstrucción está fuera de alcance; el único arreglo es un vector limpio del equipo de diseño.

• Variantes de favicon faltantes o desactualizadas

  Navegadores, barras de bookmarks, grupos de tabs del OS, unfurls de Slack, tabs de resultados de búsqueda e instaladores de PWA tiran cada uno de una variante distinta de icono. Faltar una variante produce un icono desactualizado o genérico en ese contexto y erosiona confianza. El checklist de variantes requeridas en el alcance lo previene — siempre que el equipo de diseño entregue cada variante del checklist.

• Imagen OG rota o default al compartir

  Cuando una home o artículo se comparte sin una imagen OG configurada, las plataformas sociales renderizan un crop default o ningún preview — destruyendo el click-through. Cableamos la imagen OG provista y los overrides por ruta, pero no podemos autorar la imagen en sí. Si el slot OG está vacío en el handoff, el sitio en vivo se lanza solo con un fallback.

• Problemas de transparencia o perfil de color en runtime

  Logos guardados con fondo blanco en lugar de canal alpha, PNGs en perfil CMYK, SVGs con fragmentos raster embebidos — emergen como halos, colores incorrectos o fallos de render en producción. La validación de formato los marca; corregir el archivo fuente está fuera de alcance y vuelve al equipo de diseño.

• Marca registrada y derechos sin verificar

  SessDev no verifica registro de marca, conflictos de prior-art ni derechos de terceros sobre el artwork provisto. Si el cliente provee un logo que infringe una marca registrada, esa responsabilidad permanece con el cliente y su asesor legal. Integramos lo que se entrega; no liberamos derechos.

• Asset sprawl y variantes desactualizadas

  Sin una única fuente de verdad, múltiples versiones del mismo logo terminan dispersas en header, footer, emails, social cards y PDFs — cada una sutilmente distinta. El documento de handoff en el alcance enumera cada slot y filename fuente para que los swaps sean mecánicos, pero la disciplina debe persistir post-launch. El retainer Care mantiene el inventario apretado.

Ítems de alcance relacionados

• color_token_setupLos tokens de color consumen los valores de paleta provistos junto con el bundle de marca. Los tokens se cablean aquí; la autoría de la paleta está excluida.
• typography_integrationLa integración tipográfica es la actividad hermana — cablear las tipografías y pesos provistos. Mismo principio de exclusión: integración, no autoría.
• media_infrastructureLa infraestructura de medios provee las primitivas de delivery (next/image, bindings de CDN, lazy-load) que sirven los assets de marca en producción.
• content_injectionLa inyección de contenido cubre copy junto a imágenes. Los assets de marca son imágenes; el copy sigue el handoff estructurado definido allí.
• technical_seoEl SEO técnico consume la imagen OG, favicon y metadata theme-color cableados aquí para consumo de crawlers y plataformas sociales.
• cms_blog_setupEl CMS del blog reusa los slots de assets de marca cableados aquí para imágenes de share por artículo y branding editorial.

Preguntas frecuentes

¿SessDev puede diseñar nuestro logo?

No. El diseño de logo y la autoría de brand-mark son entregables de estudio de diseño y están explícitamente fuera de alcance. SessDev cablea el logo final que tu equipo de diseño o estudio externo entregue en los formatos requeridos.

¿En qué formatos debe llegar el bundle de marca?

Logo como SVG con viewBox limpio (sin raster embebido). Master de favicon como PNG o SVG de alta resolución. App icons como PNGs transparentes en los tamaños documentados (180×180 Apple touch, 192/512 Android maskable). Imagen OG como JPG o PNG a 1200×630 bajo el presupuesto de peso de la plataforma. El checklist exacto es parte del handoff de kickoff.

¿Qué pasa si nuestro logo provisto necesita retoque?

Se devuelve a tu equipo de diseño para retoque antes de que comience la integración. SessDev no retoca, no redibuja ni corrige color sobre artwork provisto. Solo integramos archivos listos para producción.

¿Pueden diseñar nuestra imagen OG de share?

No. Cableamos la imagen OG que tu equipo de diseño provea y configuramos overrides por ruta para páginas importantes. La autoría de la imagen en sí — composición, tipografía en la card, dirección de arte — es una actividad de estudio de diseño.

¿Cuántas variantes de favicon necesitan?

El checklist cubre favicon.ico, variantes PNG a 16/32/48, Apple touch icon 180×180, Android maskable a 192 y 512, y SVG de Safari pinned-tab cuando aplica. Todo desde un único master de alta resolución provisto por tu equipo de diseño.