Estudio Viotti
Transformación completa de una web Bootstrap de 2022 a una plataforma editorial a medida para un estudio jurídico fundado en 1968 con más de 4.000 casos resueltos.
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 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 que establece el tono editorial antes de que cargue el contenido principal.
Stats Band Animada
Banda con tres contadores en JavaScript — 58 años de trayectoria, 4.000+ casos resueltos, 2 sedes — que impactan al hacer scroll.
Sistema de Diseño Unificado
Variables CSS globales compartidas en todas las páginas, reemplazando cuatro hojas de estilo separadas e inconsistentes.
Header con Scroll Effect
Navbar transparente que adquiere fondo sólido al hacer scroll, reemplazando el header estático de dos filas.
Páginas de Área Rediseñadas
Cada área de práctica cuenta con hero propio, sección de servicios con iconografía y formulario integrado.
Formulario con Modal
Envío directo sin redirección, con modal de agradecimiento que confirma sin abandonar la página.
Dos Sedes con Mapas
Cards diferenciadas para cada sede con mapas de Google embebidos — antes solo se mostraba una dirección sin mapa.
Tracking Consolidado
Google Tag Manager unificado en todas las páginas de área, asegurando tracking consistente en todo el sitio.
Antes del rediseño vs. después
Versión anterior (2022)
- Bootstrap 5 como base — sin sistema de diseño propio
- 4 CSS separados por página, con estilos duplicados
- Tipografía genérica en todas las páginas
- Header estático en dos filas con íconos PNG
- Sin stats ni contadores — datos enterrados en el texto
- Sin splash screen ni animaciones de entrada
- Formulario redirigía a página externa
- Solo una sede en el contacto, sin mapa
Rediseño sageDev
- CSS propio 100% a medida — sin dependencias de framework
- Sistema de diseño con variables CSS globales
- Tipografía editorial con jerarquía clara
- Header fijo con transición on-scroll
- Stats band con contadores animados
- Splash screen con identidad del estudio
- Modal de agradecimiento sin salir de la página
- Dos sedes con cards y mapas embebidos
Así se ve la web
Son capturas estáticas: la mejor forma de ver el trabajo es recorrer el sitio online.
Otros proyectos
¿Querés una web así para tu estudio?
Contame de tu estudio y te paso el presupuesto en el día.