I
Oficio.
Pocos proyectos, firmados.
Doce webs al año. Cada una pasa por la misma mano, desde la primera línea de copy hasta el último 404. Un estudio pequeño, por convicción, no por falta de recursos.
No hacemos webs.
Hacemos sitios
que aguantan el scroll.
Cada tipografía que respira, cada cursor que deja huella, cada transición que cuenta algo: están por una razón. Si un elemento no suma al conjunto, fuera. Si un cliente pide un botón rosa, se lo discutimos. El sistema pesa más que el capricho.
Pilares · Cuatro pactos
Si firmamos un proyecto, firmamos estos cuatro. Si no podemos honrarlos, el proyecto no entra. Así de sencillo.
Cuatro pilares.
Ni uno más,
ni uno menos.
Lo que viene a continuación no son valores de slide. Son las cuatro condiciones sin las cuales no arrancamos un proyecto. Léelas con el pie en el freno.
II
Sistema.
Cada decisión, justificada.
No hay capricho en el detalle. Cada tipo, cada ease, cada retículo responde a una regla escrita. Cuando algo sobra, se cae. Cuando algo falta, se debate. El sistema pesa más que el gusto.
III
Velocidad.
Días, no meses.
Una landing en diez. Una corporativa en dieciocho. Una tienda en veinticuatro. Plazos firmados antes del primer mockup. Si nos desviamos, se descuenta. El calendario es parte del contrato.
IV
Permanencia.
Tres años sin caducar.
Construimos sobre fundamentos que sobreviven al hype. Tipografía variable, animaciones nativas, componentes estables. La web que firmamos hoy sigue de pie cuando la moda gira cuatro veces.
Cuatro pactos · Ningún atajoBrío Studio — brio-studio.es
Paquetes de Brío Studio
Paquetes · Cuatro pliegos
Cuatro caminos. Un solo oficio.
01 / 04 · Landing
Paquete — Landing
Una página.El mensaje exacto.
Captura de leads o lanzamiento de producto resuelto con oficio. Una sola pieza, diseñada para convertir sin pedir permiso.
Copy + diseño sistémico
Shader o vídeo hero reactivo
Formulario brief · SEO técnico
Paquete — Corporativa
Cinco secciones.Una marca que aguanta comparación.
Home plus servicios, proyectos, estudio y contacto. Tu web convertida en el primer punto de confianza del ciclo comercial.
Home + 4 páginas completas
Blog MDX conectado · CMS opcional
Animaciones scroll + formulario brief
Paquete — Tienda online
Producto primero.Carrito después.
Catálogo bien fotografiado, checkout sin fricción y email transactional afinado. Primero el deseo, luego la compra.
Catálogo · fichas con hover 3D
Checkout Stripe · email transactional
Inventario + analítica de producto
Paquete — A medida
Sin techo.Sin plantilla. Sin miedo.
Proyectos con ambición — 3D, WebGL propio, integraciones, narrativas únicas. Primera fase de descubrimiento antes del presupuesto.
Discovery extendido · dirección de arte
Animación custom · WebGL / 3D propio
Integraciones + mantenimiento
Del brief al lanzamiento, en cinco tiempos.
24 días firmados. Uno por uno, sin giros ni sorpresas.
- 01Día 0 — 2Tiempo 01
Brief.
Sesenta minutos contigo. Nada de formularios. Salimos con la pieza escrita y el sistema de decisiones alineado.
Ventana de discovery de una hora, firmada por ambas partes. Te hacemos las preguntas que nadie te ha hecho: quién compite con tu narrativa, qué te prohíbe tu junta, qué no puedes perder. Salimos con un documento vivo de 3 páginas.
- Entregable
- Brief firmado · plan editorial · presupuesto cerrado
- Hitos
- Discovery de 60 minBrief vivo en 3 pliegosFirma y anticipo
- 02Día 2 — 5Tiempo 02
Arquitectura.
Sitemap, retícula, jerarquía. Antes de un píxel, un plano. Así no hay sorpresas en el tramo final.
Mapeamos cada ruta como si fuera una columna del edificio. Wireframes a baja fidelidad, retícula tipográfica, sistema modular de componentes. Te mandamos un plano navegable antes de abrir Figma siquiera.
- Entregable
- Wireframes interactivos · retícula · mapa de navegación
- Hitos
- Sitemap completoRetícula baseValidación del plano
- 03Día 5 — 11Tiempo 03
Diseño.
Dirección de arte y prototipo clicable. Validamos el tono entero antes de escribir una sola línea de código.
Dirección de arte, tres rutas tipográficas, sistema de color refinado, moodboard propio — no de Pinterest. Prototipo navegable en Figma con estados hover, transiciones clave y micro-copy definitivo.
- Entregable
- Prototipo alta fidelidad · sistema documentado
- Hitos
- 3 rutas de direcciónPrototipo clicableAprobación formal
- 04Día 11 — 20Tiempo 04
Build.
Código propio, componentes reutilizables, animaciones serias. Nada de builders. Todo firmado por nosotros.
Next.js + Tailwind + GSAP. Componentes propios, tipado estricto, testing de interacciones críticas. Cada animación pasa por un checklist: finalidad, duración, ease, reducción de movimiento. Deploy en Vercel con previews por cada commit.
- Entregable
- Repositorio · dashboard Vercel · dominio preparado
- Hitos
- Setup técnicoMaqueta integralQA interno de Lighthouse
- 05Día 20 — 24Tiempo 05
Entrega.
QA, auditoría Lighthouse, handoff documentado. Te vas con la web tuya, el código tuyo y el mantenimiento decidido.
Auditoría completa en cinco dispositivos, validación W3C, test a11y WCAG AA, Lighthouse ≥95. Handoff con Loom explicativos, documentación propia del sistema, plan de mantenimiento opcional a partir del segundo mes.
- Entregable
- Web publicada · documentación · plan de mantenimiento
- Hitos
- Lighthouse ≥95Auditoría a11yHandoff y mantenimiento
Proceso — Paso 01 / 05
Portfolio · 10 sectores
Diez plantillas demo funcionales, una por sector. Cada una es una landing completa con su propia idea rectora. No son capturas: se navegan.
Diez plantillas. Cada una mejor que tu referente local.
01 · GastronomíaLive
Casa Enea
Editorial gastronómico, fotos que dan hambre.
02 · InmobiliariaLive
Altamira
Editorial arquitectónico sobre blanco.
03 · Spa termalLive
Velaria
El cuerpo suspendido. Spa editorial líquido.
04 · DespachoLive
Castellán · Herrera
Editorial de alta corte. Marfil y pergamino.
05 · Hotel ruralLive
Hotel Riomoros
Slow travel cinematográfico.
06 · PerfumeríaLive
Maison Auriga
El olor que te recuerda algo. Atelier de Grasse.
07 · CreativoLive
María Osa
Brutalism editorial, blanco/negro/rojo.
08 · Mentoring estratégicoLive
Luz Beltrán
El tiempo no es lo que tienes. Es lo que decides.
09 · FitnessLive
IRON Studio
Brutalismo pálido. Hierro. Y tiempo.
10 · Distribución B2BLive
Meridiano
Catálogo comercial premium para hostelería europea.
Voces · Doble columna
Diez voces, sin retoque. La mitad son clientes. La mitad son amigos del oficio. Pasa por encima, la cinta se detiene.
Lo que dicen cuando no estamos delante.
Pasamos de una web que nos daba vergüenza a una pieza que los clientes citan en las reuniones. Brío no hizo una web, hizo un argumento de venta.
Marta ArreguiDirectora comercial · Bodega Lurra
Cumplieron plazos como si fueran una imprenta alemana. Diseñaron como si fuera una galería. Y escribieron copy como si fuera periodismo.
Mikel VargasFundador · Estudio Ventalle
Me propusieron dos cosas que iban en contra de mi brief inicial. Tenían razón las dos. Hoy son de las que más convierten.
Elena de OteroCEO · Otero Legal
El nivel de detalle es propio de otra época. Un cursor que respira, una tipografía que cambia de peso con el scroll. Cosas que nuestros competidores no saben que existen.
Javier BermejoCMO · Reverdia
Nos ahorramos un year de discusiones internas. El sistema que dejaron documentado es tan claro que hasta el CEO edita copy sin romper nada.
Sandra IturriozProduct owner · Mendia
Pasamos de una web que nos daba vergüenza a una pieza que los clientes citan en las reuniones. Brío no hizo una web, hizo un argumento de venta.
Marta ArreguiDirectora comercial · Bodega Lurra
Cumplieron plazos como si fueran una imprenta alemana. Diseñaron como si fuera una galería. Y escribieron copy como si fuera periodismo.
Mikel VargasFundador · Estudio Ventalle
Me propusieron dos cosas que iban en contra de mi brief inicial. Tenían razón las dos. Hoy son de las que más convierten.
Elena de OteroCEO · Otero Legal
El nivel de detalle es propio de otra época. Un cursor que respira, una tipografía que cambia de peso con el scroll. Cosas que nuestros competidores no saben que existen.
Javier BermejoCMO · Reverdia
Nos ahorramos un year de discusiones internas. El sistema que dejaron documentado es tan claro que hasta el CEO edita copy sin romper nada.
Sandra IturriozProduct owner · Mendia
Llegué pidiendo una landing. Me fui con una identidad de marca entera, un tono de voz escrito y tres años de hoja de ruta.
Pau NarváezDirección · Casa Nórdica
El Lighthouse nos salió a 98 en mobile. El cliente nos llamó a las tres horas del lanzamiento para subir el retainer un 40 %.
Carolina HerasHead of growth · Palmera
Otros cobran menos y hacen lo de Wix por dentro. Con Brío sabes que lo que firmas es tuyo y que lo van a defender como suyo.
Ignacio ValleSocio · Valle & Co.
Les pedimos que no se parecieran a nadie del sector. Cumplieron. Tres meses después, tres competidores nos preguntaron quién la había hecho.
Verónica LópezDirectora de marca · Ribera Mayor
La entrega fue un Loom de 9 minutos. Entendimos todo. Sin dashboard raro, sin plataforma propietaria, sin dependencia. Poesía de ingeniería.
Fernando RicoCOO · Rico Consultores
Llegué pidiendo una landing. Me fui con una identidad de marca entera, un tono de voz escrito y tres años de hoja de ruta.
Pau NarváezDirección · Casa Nórdica
El Lighthouse nos salió a 98 en mobile. El cliente nos llamó a las tres horas del lanzamiento para subir el retainer un 40 %.
Carolina HerasHead of growth · Palmera
Otros cobran menos y hacen lo de Wix por dentro. Con Brío sabes que lo que firmas es tuyo y que lo van a defender como suyo.
Ignacio ValleSocio · Valle & Co.
Les pedimos que no se parecieran a nadie del sector. Cumplieron. Tres meses después, tres competidores nos preguntaron quién la había hecho.
Verónica LópezDirectora de marca · Ribera Mayor
La entrega fue un Loom de 9 minutos. Entendimos todo. Sin dashboard raro, sin plataforma propietaria, sin dependencia. Poesía de ingeniería.
Fernando RicoCOO · Rico Consultores
Consultas · sin tapujos
Ocho preguntas que todos preguntan y casi nadie responde en claro. Aquí están, con la verdad delante.
Todo lo que nadie te cuenta en claro.
No, y es innegociable. Las diez piezas que viste en la galería son demos de capacidad, no moldes. Cada proyecto empieza en un lienzo en blanco con dirección de arte propia. Si te vale una plantilla, Framer te cobra cinco veces menos y con razón.
Sí. 10 días para una landing, 18 para una corporativa, 24 para una tienda. Si nos desviamos, descuento. El calendario está en el contrato, no en una promesa. El último año, 9 de cada 10 proyectos cerraron antes del plazo firmado.
Lo escribimos íntegro y está incluido en los cuatro paquetes. Un copy bueno vale más que una animación perfecta, así que lo tratamos como trabajo de primera línea. Tú validas, nosotros firmamos lo que se publica.
Next.js 16, React 19, Tailwind v4, GSAP Club (ScrollTrigger, SplitText, DrawSVG) y Three.js cuando el proyecto lo pide. Deploy en Vercel con previews por cada commit. Todo el código te lo entregamos en tu repositorio — no hay lock-in ni plataforma propietaria.
Hay dos rondas grandes de revisión incluidas en cada paquete. Si después de eso hay que cambiar rumbo, lo valoramos como scope adicional transparente. Nunca hemos llegado a una tercera ronda — el brief y la fase de diseño están hechos para que no pase.
Opcional, desde el segundo mes. Desde 280 €/mes: updates de dependencias, monitorización de Core Web Vitals, contenido puntual y 2 h de iteración. Si prefieres gestionarlo tú, te dejamos la documentación completa en Loom + PDF.
SEO técnico (Core Web Vitals, schema, sitemap, robots, meta) y SEO on-page (estructura, copy, enlazado interno) están incluidos. Link building y campañas de contenidos no son nuestro oficio — te recomendamos con gusto a quien lo hace bien.
Sí, en partnership cuando traen brief y timeline claros. Somos su estudio técnico y de diseño de confianza. Facturación a su nombre, NDA mutuo y condiciones de revenue share sobre la tabla.
Última palabra · Brío
Tu web actual te está costando clientes.
Tres segundos deciden si se quedan o se van. Si tu web sigue pareciéndose a las del 2015, ya sabes a qué lado caen. Entra con un brief, sal con plazo firmado.