TRAZO BRUTO
Web corporativa realizada para el colectivo "Trazo Bruto", empleando HTML y CSS, además de JavaScript para realizar animaciones avanzadas y la creación de un formulario.
Año
2026
Duración
16 días
Categoría
Web
Servicio
Desarrollo Web
Objetivo
Crear un hogar digital propio e independiente para el estudio que superase las limitaciones de formato y efimeridad de Instagram. El propósito era diseñar una plataforma escalable que sirviera como archivo histórico y bitácora, permitiendo documentar, actualizar y dar una visibilidad estructurada a todas las actividades, proyectos y fanzines de Trazo Bruto fuera del ecosistema de las redes sociales.
Resultado
Desarrollé una plataforma web a medida construida íntegramente con HTML, CSS y JavaScript puro. Esta decisión técnica de prescindir de librerías o frameworks externos garantizó un rendimiento excepcional, tiempos de carga mínimos y un control milimétrico sobre el diseño de la interfaz. La web funciona hoy como el registro dinámico oficial del estudio, consolidando la identidad de la marca en un espacio totalmente bajo nuestro control. Para lograr una experiencia de usuario (UX) óptima, implementé varias soluciones técnicas clave:
Navegación dinámica: Para maximizar el área de lectura, el header se oculta automáticamente al hacer scroll hacia abajo y reaparece al instante al subir. La lógica incluye un umbral de activación inicial para evitar saltos accidentales y una validación de anchura de pantalla que desactiva el efecto en móviles, asegurando una interacción adaptada a cada dispositivo.
Microinteracciones magnéticas: Para elevar la calidad visual y añadir dinamismo, programé un efecto magnético en el logotipo. El algoritmo calcula en tiempo real la proximidad del cursor y, si entra en el radio de acción definido, el elemento se desplaza sutilmente hacia el ratón de forma orgánica, recuperando su posición original al alejarse.
Formulario asíncrono: En lugar de utilizar una etiqueta tradicional <form> que provoque la molesta recarga de la página al enviar los datos, enlacé los campos de entrada a un botón que dispara una función nativa (submitForm()). Esto permite validar y procesar la información en segundo plano, mejorando drásticamente la fluidez de la navegación.
