La web pesada que vuela: así hicimos Ára, un portafolio de arquitectura con plano interactivo, maqueta 3D y el sol real de Asunción

Un estudio de arquitectura vende algo que todavía no existe. El cliente no puede entrar a la casa, tocar el ladrillo ni pararse en el patio a las cuatro de la tarde para ver si ahí da sombra. Tiene que imaginárselo. Y casi siempre se lo imagina a partir de un PDF con renders, un perfil de Instagram o una página web con fotos lindas y un formulario.

Quisimos ver hasta dónde se puede llevar esa imaginación en una página web sin que la página se vuelva lenta. El resultado es Ára Arquitectura, un estudio ficticio de Asunción y la demo más ambiciosa que hicimos hasta hoy: portada en video, un plano interactivo de verdad, una maqueta 3D que se arma sola y un simulador de asoleamiento con el sol real de Asunción. Es una web pesada, y aun así saca 96 en PageSpeed en el celular.

Una página que dura un día

La idea que ordena todo es simple: la página es un día. Arriba, al lado del logo, hay un reloj que arranca a las 6:00 y avanza a medida que bajás. Cada sección tiene el color de su hora: la portada es el amanecer, los proyectos son la mañana, el plano es el mediodía, la maqueta es la tarde y el pie de página ya es de noche y dice "Buenas noches".

No es un adorno. Un estudio que diseña pensando en la luz tiene que poder mostrar cómo cambia la luz a lo largo del día, y la página lo cuenta mientras la recorrés.

Lo que vive el cliente, sección por sección

La portada: la casa en video

La portada es un video de la Casa Celosía, la obra principal del estudio. Hay dos versiones: una horizontal para la computadora y otra vertical para el celular, así en el teléfono no se ve un recorte raro del medio de la imagen. El texto va abajo, sobre una franja oscura, para que la parte de arriba del video quede limpia y la arquitectura sea lo primero que se ve.

Proyectos que se recorren de costado

Los seis proyectos pasan de costado mientras bajás, como un portafolio de arquitectura que se hojea. Al tocar uno, la foto se agranda hasta ocupar la pantalla y se abre su ficha: ubicación, año, metros cuadrados, una segunda foto y el texto del proyecto.

La lámina: un plano de verdad sobre la mesa

Esta es la parte que más nos costó y la que más nos gusta. Sobre una mesa de dibujo aparece una lámina completa, como las que prepara un estudio para presentar un proyecto: planta baja, planta alta, un corte, el cuadro de superficies, las referencias, la ubicación y el rótulo. No es una imagen: el plano está dibujado con código, línea por línea, a partir de las medidas de la casa. Por eso se ve nítido con cualquier zoom.

Y se puede usar:

• Vistas: la lámina entera, la planta baja, la planta alta o el corte.
• Capas: muebles, cotas, ventilación cruzada (flechas animadas que muestran por dónde corre el aire) y sol.
• Ambientes: tocás el estar, la cocina o una suite y se abre su ficha, con los metros cuadrados, una foto y para qué lado mira.

El corte con el sol: el asoleamiento, explicado

En el corte elegís el día y la hora, y el dibujo muestra por dónde entra el sol, con qué ángulo y hasta dónde llega. El 21 de junio a las 9:30, por ejemplo, el sol está bajo y la demo te dice que pasa por debajo del alero y entra 3,5 metros en el estar. En diciembre, al mediodía, el sol está a 88° y el alero de 1,20 metros no lo deja entrar.

Esto tiene nombre en arquitectura: asoleamiento. En Paraguay es una búsqueda que crece: en Google Trends, "asoleamiento en arquitectura" aparece entre las consultas relacionadas con "arquitectura" que más subieron en los últimos cinco años (+200 %), junto con "portafolio arquitectura" (+250 %) y "render arquitectura" (+150 %). Son porcentajes de interés relativo, no cantidad de búsquedas, pero muestran hacia dónde mira la gente que busca arquitectura.

La maqueta que se arma en el orden de la obra

Después del plano, la misma casa aparece en 3D y se construye mientras bajás, en el orden en que se levanta una obra: el plano en el piso, los muros, la losa, la planta alta, el techo y los aleros, la celosía y el patio. La maqueta sale de los mismos datos que el plano, así que nunca se contradicen.

El simulador de asoleamiento

Al final del recorrido de la maqueta hay un panel para probar el sol en la casa. Elegís una fecha (el 21 de diciembre, el 21 de marzo, el 21 de junio o el día de hoy), movés la hora y la maqueta proyecta la sombra real. La posición del sol se calcula con las fórmulas públicas de la NOAA para la latitud de Asunción y en hora oficial de Paraguay: el 21 de junio al mediodía, el sol está a unos 41° sobre el horizonte, hacia el norte. Con el mouse, además, se puede girar la maqueta.

Y todo lo que necesita un estudio

El resto de la página es lo que tiene que tener cualquier estudio, contado con el mismo cuidado: los materiales con los que trabajan, los servicios (proyecto, aprobación municipal, dirección de obra, reformas, interiorismo y visualización 3D), el proceso de trabajo con un sol que recorre las etapas, el equipo, los testimonios y un contacto en cuatro pasos que arma solo el mensaje de WhatsApp con el tipo de obra, el terreno, los metros y la fecha.

La ingeniería: una web pesada que saca 96 en PageSpeed

Video, 3D, un plano con más de mil elementos y animaciones en cada sección. En la teoría, todo eso hace una web lenta. Por eso la medimos en PageSpeed Insights, la herramienta de Google, en su versión para celulares (el 29 de septiembre de 2026):

• Rendimiento: 96 sobre 100. Accesibilidad: 97. Prácticas recomendadas: 100.
• El contenido principal aparece en 2,0 segundos con la conexión lenta que simula la prueba.
• Bloqueo del navegador: 0 ms. La página responde al primer toque.
• Movimiento inesperado del diseño: 0. Nada salta mientras carga.

Todo eso con unos 3,6 MB de página en el celular. En la computadora, el contenido principal aparece en medio segundo. Importa sobre todo el resultado en el celular, porque es la versión que Google usa para indexar y posicionar una web. El número puede variar un poco en cada medición, así que te invitamos a probarlo vos mismo.

Lo que hicimos para que una web así cargue rápido:

1. El 3D se descarga tarde. La maqueta no se baja al abrir la página: se pide recién cuando te acercás al plano. El que solo mira la portada no la paga.
2. Videos hechos a medida. Comprimimos cada video nosotros: 1,9 MB el horizontal y 1,2 MB el vertical, sin audio. Mientras llegan, se ve su primer cuadro como imagen.
3. Primero se pinta, después se arma. La portada aparece antes que cualquier animación. El resto de la página se prepara por partes, sección por sección, para que el navegador nunca quede trabado.
4. El plano es código, no una foto. Pesa poco, se ve perfecto en cualquier pantalla y se puede tocar.
5. Animaciones que no traban. Solo mueven y transparentan elementos, que es lo que el navegador resuelve más rápido. En nuestras pruebas, el scroll se mantuvo en 60 cuadros por segundo.
6. Casi nada de afuera. Tipografías, librerías, videos e imágenes se sirven desde nuestro propio servidor. Lo único externo es la medición de visitas, que se carga después de todo lo demás.
7. Una versión para cada persona. Si alguien tiene activado el movimiento reducido en su teléfono, ve la página quieta. Si su navegador no puede mostrar 3D, ve la página completa sin la maqueta.

Si querés ver cómo le va a tu web actual en esas mismas mediciones, probá nuestro diagnóstico gratis.

Para quién sirve esta experiencia

Ára es un estudio de arquitectura, pero la misma base sirve para cualquier negocio que venda espacios, obras o proyectos que el cliente tiene que imaginarse:

• Estudios de arquitectura: un portafolio de arquitectura interactivo, con el plano de cada obra, renders, el asoleamiento y el criterio bioclimático explicado sin jerga.
• Desarrolladoras e inmobiliarias en preventa: departamentos en pozo con la planta tipo de cada piso, qué unidad recibe sol de invierno y la maqueta del edificio que se arma antes de que exista.
• Constructoras de casas llave en mano: cada modelo de casa con su plano, sus metros y su maqueta. Más sobre el rubro en página web para constructoras en Paraguay.
• Interioristas y paisajistas: ambientes con ficha, materiales y el antes y después de cada proyecto.
• Marcas de materiales y aberturas: ladrillo, celosías, cerámicos o carpinterías con su ficha técnica, fotos y cómo se ven puestos. Para el comercio del rubro, mirá también la web para ferreterías y materiales de construcción.
• Hoteles boutique, casas de campo y espacios para eventos: lugares donde el espacio es el producto y la gente quiere recorrerlo antes de reservar.

Para quién no: una web que no es para cualquier rubro

Hay que decirlo con la misma claridad: esta experiencia no es para todos los negocios. En Ára, la gracia es recorrer con calma, dejar que las cosas se muevan, tocar el plano y probar el sol. Eso funciona cuando el cliente viene a imaginarse algo.

Pero si tu cliente viene a buscar un dato rápido (el horario de la farmacia, el precio de un producto, un turno en la clínica, el menú para pedir delivery), cada animación es un obstáculo entre él y lo que necesita. Para esos rubros hacemos webs directas y livianas, que dan la respuesta en dos segundos: como la tienda online o la clínica de nuestras demos.

La regla que usamos es esta: si tu cliente viene a buscar un dato, la web se lo tiene que dar en segundos; si viene a imaginarse algo que todavía no existe, la web puede tomarse su tiempo para mostrárselo.

Una web así tampoco se hace con cualquier material. Necesita los planos reales de las obras, buenas fotos o renders y a alguien del estudio que explique cada proyecto. Es un proyecto a medida y se cotiza según cuántas obras, planos y modelos 3D haya que armar.

Lo que es de mentira y lo que es de verdad

Ára Arquitectura no existe. El estudio, las personas, los proyectos, los testimonios y la dirección son ficticios, y la demo está configurada para no aparecer en Google. Las fotos de los proyectos y de los materiales se generaron con inteligencia artificial, y los videos de la portada se hicieron a partir de esas fotos.

Lo que sí es real es el trabajo: el diseño, el código, el plano dibujado con las medidas de la casa, la maqueta que sale de ese mismo plano, el cálculo del sol y todo lo que hicimos para que una página tan pesada cargue rápido. Abrí la demo en la computadora y en el celular, tocá los ambientes y mové el sol. Las demás están en plantillas y diseños web, y en este artículo contamos qué mirar en cada una.

Así lo pensamos en KapeDev

No hacemos animaciones por hacerlas. En Ára, cada efecto explica algo que un estudio de arquitectura necesita contar: el plano muestra cómo se vive la casa, el corte muestra por dónde entra el sol y la maqueta muestra cómo se construye. Si un efecto no explica nada, lo sacamos.

Y la velocidad no se negocia. Una web puede ser tan ambiciosa como el proyecto que muestra, siempre que se trabaje para que cargue rápido en el celular de cualquier persona. Si tenés un estudio, una desarrolladora o una marca de materiales y te imaginás tus obras en una web así, calculá una primera idea en el cotizador o escribinos: te contamos cómo adaptaríamos Ára a tus proyectos, en Asunción o en cualquier ciudad del país.

¿Tu negocio está en Asunción o el Gran Asunción? Ver páginas web en Asunción →

¿Querés calcular el impacto estimado para tu negocio? Calcular mi impacto →

¿Querés conocer el nivel de digitalización de tu negocio? Hacé tu diagnóstico gratuito →

Redactado y editado por Mathias Verón, Fundador de KapeDev.