Caso de estudio · Ingeniería frontend

“Integridad a través del ingenio”

Sitio de Hemaka · 2019

En Hemaka trabajé en desarrollo frontend, animación, control de calidad y soporte en producción. El sitio que ayudé a construir en 2019 muestra cómo una animación bien pensada puede seguir vigente con los años.

Rol
Desarrollo de interfaz, animación, control de calidad y soporte de producto
Tecnologías
React, Meteor.js, TypeScript, Three.js, animación SVG e interfaces adaptables a distintas pantallas
Contribución
Desarrollo frontend, ajustes en los tiempos de animación, adaptación a distintas pantallas y corrección de errores en producción.
Animación del logo piramidal de Hemaka: las piezas negras y grises se ubican en su lugar
Ir a la sección Resumen
Desafío

Llevar animaciones ambiciosas a producción.

La animación, el diseño y el comportamiento del navegador tenían que funcionar juntos. Mi aporte abarcó implementación frontend, animación, control de calidad y soporte en producción, llevando la dirección visual del equipo a interfaces que las personas pudieran usar.

Enfoque

Prototipar, revisar, publicar, repetir.

Alterné entre prototipos y desarrollo: ajusté los tiempos de las animaciones, investigué problemas de compatibilidad y de diseño, y revisé cómo se adaptaba cada interfaz a distintas pantallas. Trabajé con React, Meteor.js, TypeScript y animaciones nativas del navegador en distintos proyectos.

Enredaderas del caso Endpain creciendo alrededor del logo y la tarjeta de contenido en el sitio de Hemaka

Este recorrido por mi trabajo en Hemaka también incluye Cosmic Symbolism, un proyecto anterior para Imaginary Foundation que fue parte de mi formación.

Otro proyecto de esa época

Creado en 2014.
Sigue vigente.

Cosmic Symbolism

La dirección visual sigue siendo dinámica, vibrante y sorprendentemente actual.

En Hemaka ayudé a desarrollar esta experiencia inmersiva para el navegador cuando era desarrolladora junior. Aprendí a integrar animaciones, adaptar la experiencia a distintas pantallas y resolver las limitaciones técnicas de un proyecto en producción.

Cliente
Imaginary Foundation
Rol
Desarrolladora junior
Contribución
Implementación frontend, soporte de animación y control de calidad
Tecnologías del proyecto
Meteor.js, HTML5 Canvas 2D, CoffeeScript, JavaScript, jQuery, Underscore.js
Lo que aprendí en el camino
Animación para navegadores y Three.js
Visitar el sitio ↗

Decisiones técnicas

Saber resolver lo técnico también mejora el diseño.

La animación depende del resto de la interfaz: el estado de los componentes, el diseño, el renderizado y el contenido. Trabajé entre esas áreas, conectando el detalle visual con la resolución de errores y el soporte en producción.

Animación

Animaciones SVG, secuencias de movimiento e interacciones con tiempos y ritmos cuidados en cada detalle.

Tecnologías

React, Meteor.js y TypeScript: manejo del estado, navegación, flujo de datos y criterios para elegir una biblioteca.

Decisiones en producción

Encontrar la causa de los errores, reducir el código propenso a fallar y tomar decisiones que sigan funcionando después del lanzamiento.

Combinar roles

Pasar de desarrollo a diseño, control de calidad, comunicación con clientes y resolución de problemas sin perder el hilo del proyecto.

Resultado

De la dirección visual a un frontend funcional.

Mi trabajo conectó desarrollo frontend, animación, control de calidad y soporte. El sitio de Hemaka y Cosmic Symbolism muestran ese aporte en contexto, con el rol y las tecnologías de cada proyecto detallados arriba.

Esa experiencia me ayuda a anticipar riesgos técnicos y tomar mejores decisiones para tu proyecto.

Ver proyectos
Experiencia que fui sumando
  • Animación
  • React / TypeScript
  • Meteor.js
  • Three.js
  • Arquitectura de interfaz
  • Diseño adaptable
  • Resolución de errores
  • Trabajo con clientes
  • Soporte durante el lanzamiento

Conversemos.

Contame sobre tu proyecto, una oportunidad laboral o una idea para trabajar juntos. Te respondo dentro de un día hábil.

Uso tus datos para responder tu consulta. Web3Forms procesa los mensajes. Este sitio usa Google Analytics y registra interacciones para entender qué contenido resulta útil. También podés escribirme por email.