Diseño y desarrollo webProyecto demostrativo
Umbral.
Una experiencia digital editorial que presenta proyectos, servicios e identidad de marca mediante una navegación cuidada.
- Qué es
- El sitio web de un estudio de arquitectura ficticio, pensado para mostrar obra y captar consultas.
- Qué incluye
- Portfolio con filtros, fichas de proyecto, galería a pantalla completa, servicios, estudio y contacto.
- Cómo está hecho
- Next.js, React, TypeScript y Tailwind CSS; estático, sin base de datos ni CMS.
Estudio ficticio desarrollado por ELiF. No es un cliente real.
00 — El encargo
Una web que se vea tan cuidada como las obras que muestra.
El problema
Un estudio de arquitectura vende criterio y sensibilidad. Un sitio genérico, con fotos chicas y una navegación confusa, transmite lo contrario y pierde consultas antes de la primera reunión.
La solución demostrada
Fotografía a gran escala, un portfolio que se filtra y se recorre, fichas de proyecto claras y un contacto directo. Todo con una identidad propia y la misma calidad en el celular.
01 — Video
La web, recorrida de punta a punta.
Del inicio al portfolio, la ficha de un proyecto con su galería, los servicios y el contacto.
Grabado sobre la aplicación real, con subtítulos. Video sin música.
02 — Portfolio
Obra primero: un portfolio que se filtra y se recorre.
Probá el filtro y abrí cualquier proyecto: así se explora la web de Umbral. Las fotografías pasan de gris a color al explorarlas.
Mostrando 6 de 6 proyectos
Las 24 fotografías son imágenes ilustrativas de terceros con dedicación CC0 (Wikimedia Commons), acreditadas en cada visor. Muestran edificios reales que no pertenecen a Umbral: el estudio, los proyectos, las ubicaciones y las superficies son ficticios.
03 — Ficha y galería
Cada proyecto, con su propia página.
Ubicación, año, superficie y descripción junto a una galería editorial. Cada foto se abre a pantalla completa y se recorre con el teclado.
Deslizá para ver la pantalla completa →
La ficha. Datos del proyecto y fotografía que ocupa todo el ancho.
Deslizá para ver la pantalla completa →
El visor. Pantalla completa, flechas del teclado y crédito de cada imagen.
Deslizá para ver la pantalla completa →
Navegación editorial. Al final de cada proyecto se propone el siguiente.
04 — Servicios y contacto
Lo que hace el estudio y cómo contactarlo.
Deslizá para ver la pantalla completa →
Servicios explicados para el cliente
Seis servicios con su alcance y el proceso de trabajo.
Estudio
Filosofía, valores y equipo (ficticio) presentados con la misma calidad.
Formulario de contacto
Validación por campo y resumen de errores. En la demo no envía datos.
05 — En el celular
La misma calidad en la palma de la mano.
Menú, proporciones de las fotos y tipografías con diseño propio para pantallas chicas.
¿Tu negocio necesita una web que represente su identidad?
Contanos qué querés mostrar y diseñamos un sitio a la altura de lo que hacés.
