Cota Studio
del plano a la obra
Resumen
Una web de arquitectura construida alrededor de un gesto preciso: Casa Patio se dibuja en SVG y después revela su exterior perla y sus interiores iluminados.
La arquitectura da forma a la interfaz
Cota Studio lleva el lenguaje de un estudio de arquitectura a una experiencia digital completa. El dibujo, los materiales, la información medida y el espacio establecen una identidad antes de abrir el primer proyecto.
El trabajo reúne dirección de arte, diseño UX/UI, imágenes arquitectónicas asistidas por IA y desarrollo frontend: dos composiciones de inicio, índice y fichas de proyectos, estudio, servicios y contacto. Este caso presenta las decisiones de diseño y su implementación.
Una casa, del trazo a la luz
Casa Patio fija la dirección visual de la apertura. El SVG estructural y la imagen terminada comparten coordenadas: se trazan las líneas, hay una pausa breve y un barrido descubre hormigón perla, piedra clara, carpinterías oscuras e interiores encendidos. Un único frente mantiene alineados ambos estados.
La atmósfera es contenida. El exterior permanece neutro y el interior aporta la calidez. Con movimiento reducido se muestra directamente la imagen terminada; si no puede cargar, el dibujo sigue disponible.
Un sistema con voz arquitectónica
Superficies, tipografía, composición, componentes, imágenes y movimiento forman un mismo lenguaje visual. Estos seis estudios acompañan la secuencia del plano a la imagen.
Un recorrido que explica el trabajo
El inicio principal continúa después del alzado. La fotografía del estudio se abre y da paso a una frase; los proyectos construidos se desplazan sobre una misma rasante; Casa Bordils se desarrolla en siete pasos; y un acordeón de servicios relaciona cada etapa del encargo con su entregable. Las vistas previas de reconocimientos, los testimonios y el contacto completan el recorrido.
El segundo inicio, Fachada, ofrece una introducción en columnas y otra composición del mismo estudio. Las fichas reservan espacio para la fotografía, las decisiones espaciales y la información técnica. Las pantallas de presentación de este caso son adaptaciones editoriales al inglés del sitio en español.
La misma jerarquía, a otra escala
El alzado, la presentación y las acciones se reorganizan en pantallas estrechas. Las secuencias amplias dejan paso a una lectura continua cuando lo requieren el espacio o las preferencias de movimiento.
Un estudio de arquitectura en pantalla
Resultado navegable
Cota Studio
