Resumen del proyecto

AutoRace.JP Fui responsable del desarrollo front-end general de una página de destino (LP) con el objetivo de anunciar y registrar las entradas para la "Campaña de Otoño (Noviembre)" de AutoRace.JP. Nuestro objetivo fue diseñar una UI/UX que transmitiera intuitivamente el atractivo de la campaña y promoviera una entrada fluida para los fanáticos de las carreras de autos y los miembros votantes.

Pila tecnológica utilizada

• HTML5
• CSS3 (Sass/SCSS)
• JavaScript (ES6+)
• jQuery
• Adobe Fonts (Fuentes web)
• Google Tag Manager (GTM)

Seleccionamos estas tecnologías para construir un entorno de desarrollo moderno y eficiente que equilibra la mantenibilidad y el rendimiento.

Diseño e implementación en los que me enfoqué

Diseño CSS con consideración de mantenibilidad y escalabilidad

Para responder rápidamente a futuras expansiones o cambios de campaña, introdujimos el concepto de BEM (MindBEM/FLOCSS) en el diseño CSS. Específicamente, los nombres de clase se separan claramente como se muestra a continuación:

• Proyecto (p-): Diseños específicos de la página (ej.: p-hero, p-courses__item)
• Componente (c-): Componentes de UI reutilizables en todo el sitio (ej.: c-button, c-card)
• Utilidad (u-): Estilos auxiliares genéricos (ej.: u-pc-hidden, u-sp-hidden)

Este diseño previene conflictos de estilo, mejora significativamente la legibilidad y reutilización del código, y logra un estilo robusto.

Implementación responsiva optimizada para dispositivos

Para ofrecer una experiencia de información óptima en todos los dispositivos, desde smartphones hasta PCs, implementamos con precisión un diseño responsivo "mobile-first".

Especialmente en el visual principal (sección hero), adoptamos el elemento <picture>. Esto permite la entrega eficiente de diferentes imágenes optimizadas para PC y smartphones, según el ancho de la pantalla del dispositivo (punto de interrupción), reduciendo la transferencia de datos innecesaria.

Consideración de la experiencia del usuario (UX) y el rendimiento

Para que los usuarios puedan alcanzar su objetivo (inscripción) sin confusión, colocamos estratégicamente los botones CTA (Llamada a la acción) en la parte superior y central de la página, asegurando un camino claro hacia la conversión.

Además, para mejorar la velocidad de visualización inicial de la página, añadimos el atributo defer a la etiqueta <script>. Con esto, cargamos y ejecutamos JavaScript de forma asíncrona sin bloquear el análisis HTML, lo que mejora la velocidad percibida por el usuario (Core Web Vitals).

Atractivo de marca a través de la tipografía

Para transmitir visualmente la confianza y el atractivo de la campaña, introdujimos fuentes web (Adobe Fonts). Implementamos una tipografía que refleja con precisión la intención del diseño, contribuyendo a mejorar la imagen de marca.