Fundación Nativa Protege — web institucional — Caso
Web institucional para una fundación ariqueña de protección a la infancia: programas, transparencia, donaciones y voluntariado, con una identidad visual propia y un logo vectorizado y animado por código.
Por Ricardo Huiscaleo — 04 oct 2026 · 5 min ── social · arica ──
── el desafío ──
La fundación no tenía presencia web propia: sus programas, su transparencia y sus campañas de donación vivían en redes sociales, lo que complicaba postular a fondos y entregar confianza a donantes corporativos que piden información verificable. Además partía sin identidad digital: el único activo era un logo en imagen, sin sistema de diseño ni una causa clara que transmitiera en segundos.
── lo que construimos ──
Construimos un sitio institucional multi-página con una identidad visual propia, derivada del logo y de los valores de la fundación (infancia + naturaleza). El foco estuvo en el UX/UI —navegación clara, secciones que cuentan la causa, portal de transparencia y canal de donaciones— y en el arte del hero: recreamos y vectorizamos el logo como SVG y lo animamos por código (hojas, figuras, partículas y seguimiento del cursor) para dar una portada memorable que ninguna plantilla entrega.
- ✓ UX/UI con sistema de diseño propio
- ✓ Logo vectorizado en SVG
- ✓ Animación del logo por código
- ✓ Portal de transparencia
- ✓ Canal de donaciones y voluntariado
- ✓ SEO local Arica
── ingeniería ──
Los obstáculos técnicos reales del proyecto y cómo los resolvimos.
- 01
El logo no existía como arte digital: lo vectorizamos
El único activo de marca era un logo en imagen (bitmap), sin capas ni vectores, que no escalaba ni se podía animar. Reconstruimos la ilustración completa como SVG: cada una de las 43 hojas, las figuras de los niños, las manos y el halo quedaron como elementos independientes y editables, con sus posiciones ajustadas junto al cliente. Eso convirtió un logo estático en un sistema de arte manipulable.
- 02
La portada, animada con código (sin video ni GIF)
En vez de incrustar un video pesado, animamos el SVG directamente: entrada escalonada de las hojas con efecto elástico, balanceo individual simulando viento no uniforme, respiración del halo, partículas generadas dinámicamente y un leve seguimiento del cursor que da vida al logo. Todo con transformaciones y opacidad —liviano, nítido a cualquier resolución y respetuoso de "prefers-reduced-motion" para quien prefiere sin animación.
- 03
UX/UI pensado para la causa, no una plantilla
Diseñamos el sitio para que un donante o un evaluador de fondos entienda la causa rápido: jerarquía clara, secciones que llevan del problema a la acción (quiénes somos → programas → impacto → cómo ayudar), tarjetas bento con códigos de color por área y una franja de cierre con llamado a la acción. Sin gradientes genéricos ni el look "hecho por IA": paleta derivada del logo y de la fundación.
- 04
Transparencia como pieza de producto
Para postular a fondos, la fundación necesita mostrar documentación. Construimos un portal de transparencia con los estatutos visibles en un visor embebido (sin salir del sitio) y los datos legales de constitución, convertidos en una sección consultable en lugar de un PDF perdido en una carpeta.
- 05
Contenido y datos reales desde el día uno
Aprovechamos la escritura de constitución para cargar datos legales verificables (fecha, notaría, repertorio, fundadora, domicilio) en lugar de textos de relleno. Lo que falta del cliente (teléfono, redes, datos bancarios, fotos) quedó marcado de forma explícita como pendiente, para no publicar información inventada.
── devops ──
Infraestructura, despliegue y operación del sistema.
- 01
Dominio y subdominio de fundación
El sitio vive en nativaprotege.com (con www) y en un subdominio de la plataforma, ambos servidos desde la misma infraestructura que el resto de los sitios. Cada superficie declara su propio contenido para no mezclarse con la plataforma base.
- 02
Rutas limpias y assets propios por sitio
Configuramos el servidor para servir URL limpias del sitio (sin prefijo en la barra de direcciones) y assets propios —favicons, iconos PWA, logo—. Resolvimos un caso donde el enrutamiento interno del servidor rompía las subpáginas: se corrigió con rutas absolutas para que cada sección cargue su contenido correcto.
- 03
Identidad hasta en el favicon
Generamos el set completo de iconos del sitio (favicons y apple-touch) a partir de la identidad, para que la pestaña, el marcador y el acceso desde el celular se vean como una institución real y no como un proyecto genérico.
- 04
Optimización para carga en terreno
El sitio se sirve como HTML estático comprimido, con assets cacheados por largo plazo y el HTML sin cache para que cada actualización tome efecto al instante. Carga rápido incluso en conexiones lentas, algo importante para visitas en terreno en Arica.
── seo & geo ──
Cómo el sitio se hace encontrar por buscadores y por asistentes de IA.
- 01
Visibilidad para una fundación local
Optimizamos el sitio para búsquedas de la causa en la zona —protección a la infancia, fundación en Arica, voluntariado y donaciones— con títulos, descripciones y estructura de URLs limpias, para que quien busca ayudar encuentre a la fundación y no solo sus redes sociales.
- 02
Canonical y dominio propio para no diluir autoridad
El sitio declara su dominio canónico propio (nativaprotege.com) en lugar de quedar bajo el de la plataforma. Así la autoridad de búsqueda se concentra en la fundación y sus páginas se indexan como institución, no como subpágina de un portafolio.
── marca ──
Identidad visual y de marca del negocio.
- 01
Sistema de diseño derivado del logo
Extraemos la paleta directamente del logo oficial y la cruzamos con los valores de la fundación (infancia y naturaleza): verdes institucionales, acentos cálidos y una familia de colores por área. Es un sistema consistente, no una colección de colores sueltos, y evita el look genérico.
- 02
El logo como pieza central de la identidad
El logo animado no es un adorno: es la portada. Al vectorizarlo y animarlo por código, la fundación tiene un activo de marca moderno y reutilizable en cualquier tamaño o superficie, que transmite su causa apenas se abre la página.
- 03
Lenguaje visual con propósito anti-genérico
Evitamos a propósito los recursos trillados (gradientes morado-azul, neón sobre oscuro, tarjetas idénticas en grid). Las tarjetas bento con tira de color superior, los contadores de impacto y el cierre cálido están pensados desde la causa, no desde una plantilla.
── resultado ──
Sede física en Calle Maqui 2649, Arica, con una web propia a la altura de sus postulaciones: transparencia consultable, campañas con canal propio y una portada con identidad que transmite la causa en segundos.