Marca e identidad + web cinematográfica a medida + SEO técnico a mano
alasservice.com
alas
- Rol
- Brand & Identity · Web Developer · SEO Técnico
- Stack
- Static siteVanilla JSVercel FunctionsView TransitionsJSON-LD
- Duración
- 2 semanas
- Estado
- En producción

01
El problema
alas es una asesoría para artistas, productores y sellos discográficos —legal, management, booking, fiscalidad, derechos y desarrollo de carrera— que entra en un sector donde la confianza y la percepción lo son todo, y donde la competencia se presenta genérica y corporativa. No había nada de partida: ni marca, ni nombre resuelto visualmente, ni identidad, ni web. El brief, en el fondo, era doble: construir desde cero una marca y una web a la altura del servicio —premium, distintiva, rápida y encontrable en Google— que convirtiera a artistas y sellos en llamadas, sin depender de un CMS, una plantilla ni un page builder que abarataran la percepción.
02
El enfoque
Antes que la web, la marca. Definí la identidad completa —el nombre como recurso visual (la minúscula, el isotipo de la "a", el sufijo ®), una paleta cálida de tinta, papel y oro, tipografía Geist y un tono de voz propio— y la condensé en un brand kit entregable. Sobre esa base construí un sitio estático 100% a medida, sin framework, sin build y sin page builder, apoyado en un sistema de diseño de tokens hechos a mano. La home es una narración cinematográfica dirigida por el scroll, y todo está montado como mejora progresiva: el contenido es siempre visible y accesible aunque el navegador no soporte las animaciones. Los leads se entregan por una función serverless propia —sin servicios de formularios de terceros y con las credenciales solo en el servidor—, y el SEO técnico y los datos estructurados están escritos a mano.
03
Qué construí
- 01Identidad de marca desde cero: naming visual (la minúscula como recurso, el isotipo de la "a", la marca ®), sistema de color (tinta #1a1410, papel #efe9dc, acento oro #d4c089), tipografía Geist/Geist Mono y dirección de arte editorial; entregada como brand kit completo (guía de estilo en PDF, logotipos en SVG y PNG, favicon e iconografía, y las fuentes)
- 02Sitio estático a medida sobre un sistema de diseño basado en design tokens, sin framework, sin build y sin page builder; HTML/CSS/JS vanilla desplegado en Vercel con URLs limpias
- 03Home cinematográfica dirigida por el scroll con animaciones nativas en CSS (animation-timeline, scroll-driven) y un cursor magnético propio (mix-blend-mode), siempre como mejora progresiva y respetando prefers-reduced-motion
- 04Página de servicios de nivel Awwwards: 12 servicios en filas interactivas, transiciones entre páginas con la View Transitions API, profundidad de hero con isotipo gigante y parallax, y micro-interacciones, con degradación elegante donde el navegador no lo soporta
- 05Captación de leads propia, sin terceros: formulario "agendar una llamada" en modal tipo card, entregado por una función serverless (Vercel Functions + SMTP con Nodemailer), con anti-spam por honeypot y credenciales solo en variables de entorno del servidor — nunca en el cliente
- 06SEO técnico escrito a mano sin plugins: títulos y meta dinámicos, canonical, robots.txt, sitemap.xml, Open Graph/Twitter Cards y JSON-LD completo (LegalService, OfferCatalog) para indexación y resultados enriquecidos; preparado y verificado en Google Search Console
- 07Rendimiento y Core Web Vitals: vídeo de fondo comprimido, carga condicional de assets, fuentes con preload, textura de grano ligera y cero dependencias de terceros
- 08Infraestructura de marca: dominio y correo corporativo (info@alasservice.com), favicon basado en el isotipo, reloj en vivo (CET) como detalle de marca y coherencia total de cabecera, pie y tipografía entre la home y servicios
04
El resultado
Una asesoría que estrena marca propia y una web a su altura: distintiva, rápida y completamente indexable, con una estética premium que la separa de la competencia corporativa del sector. Los leads llegan directos al correo del despacho, sin intermediarios ni plataformas de terceros, y el sitio se sostiene sin CMS, sin plugins y sin plantillas que lo aten. Un proyecto enviado de extremo a extremo —de la identidad al JSON-LD, del isotipo al lead— hecho a mano y no configurado.