El Desafío
El Estudio Viotti opera en Buenos Aires desde 1968 — un capital de trayectoria enorme que su web anterior no comunicaba. El sitio estaba construido sobre Bootstrap con CSS externo por área, sin sistema de diseño, sin identidad visual propia y con una estructura de header que apilaba logo, teléfonos y direcciones en una fila horizontal desordenada.
Un estudio con ese peso institucional merecía una presencia digital que lo reflejara: elegante, coherente, con sus credenciales en el centro de la narrativa desde el primer scroll.
La Solución
Rediseñamos la web completa desde cero — cinco páginas interconectadas, CSS propio sin frameworks, variables globales basadas en la paleta cream/dorado del logotipo, y Playfair Display como tipografía serif editorial. Cada decisión de diseño apunta a proyectar la solidez de 58 años sin parecer anticuado.
- Splash screen con logotipo: Pantalla de entrada animada sobre fondo cream con imagen de archivo en baja opacidad. Establece el tono editorial antes de que cargue el contenido principal, reforzando la identidad del estudio desde el primer segundo.
- Stats band animada con contadores: Banda oscura post-hero con tres contadores en JavaScript — 58 años de trayectoria, 4.000+ casos resueltos, 2 sedes. Datos que en la versión anterior estaban enterrados en el cuerpo del texto ahora impactan visualmente al hacer scroll.
- Sistema de diseño unificado: Variables CSS globales (gold, cream, brown, gradientes) compartidas en todas las páginas. La versión anterior tenía cuatro CSS separados por área de práctica con estilos duplicados e inconsistentes entre sí.
- Header fijo con scroll effect: Navbar transparente que adquiere fondo navy sólido al hacer scroll. Reemplaza el header estático de dos filas con logo e íconos de contacto que ocupaba altura innecesaria en la versión anterior.
- Páginas de área rediseñadas: Cada área de práctica pasó de una imagen estática con texto flotante sobre Bootstrap a una página con hero propio, sección de servicios con iconografía y formulario integrado con el mismo sistema visual del home.
- Formulario con FormSubmit + modal de agradecimiento: El formulario de contacto envía a consultas@estudioviotti.com.ar mediante FormSubmit sin redirección. Un modal de agradecimiento confirma el envío sin abandonar la página — mejora significativa respecto a la redirección externa que usaba la versión anterior.
- Dos ubicaciones con mapas embebidos: Sección de contacto con cards diferenciadas para cada sede (Gral. San Martín y Villa del Parque) e iframes de Google Maps integrados. La web anterior solo mostraba la dirección de San Martín sin mapa.
- GTM mantenido y mejorado: Google Tag Manager ya existía en la versión anterior. En el rediseño se consolidó en todas las páginas de área con el mismo container GTM-XXXXXXX, asegurando tracking consistente en todo el sitio.
- Bootstrap 5 como base — sin sistema de diseño propio
- 4 CSS separados para cada página de área, con estilos duplicados
- Tipografía Open Sans genérica en todas las páginas
- Header estático en dos filas con logo, teléfonos e íconos PNG
- Slider de imágenes con overlay oscuro como único elemento hero
- Sin stats ni contadores — los 58 años y 4.000 casos en cuerpo de texto
- Sin splash screen ni animaciones de entrada
- Formulario redirigía a página externa de agradecimiento
- Solo sede San Martín en el contacto, sin mapa
- Menú hamburguesa con checkbox hack — sin JavaScript
- Paleta inconsistente entre páginas (fondo crema, blanco y amarillo)
- CSS propio 100% a medida — sin dependencias de framework
- Sistema de diseño con variables CSS globales compartidas
- Playfair Display + DM Sans — tipografía editorial con jerarquía clara
- Header fijo con transición on-scroll, logotipo limpio
- Hero fotográfico con overlay gradient y CTAs de conversión
- Stats band con contadores animados en JavaScript
- Splash screen con identidad del estudio
- Modal de agradecimiento sin salir de la página
- Dos sedes con cards diferenciadas y mapas embebidos
- Menú móvil en JavaScript con panel deslizante
- Paleta unificada cream/gold/brown en todo el sitio
