Caso de éxito
HardGamers:
del diseño de Figma a la web
Implementamos con fidelidad la nueva interfaz que diseñó Althaus® para el comparador de precios de hardware gamer de Argentina, y reestructuramos el front-end.
El proyecto
HardGamers es un comparador de precios de hardware gamer de Argentina. Reúne en un solo lugar el catálogo de más de 50 tiendas, ordena los resultados desde el precio más bajo y muestra el historial de precios de cada producto.
El desafío. El sitio iba a renovar su interfaz con un diseño nuevo de Althaus® hecho en Figma. Había que llevar cada pantalla al código sin perder detalle y, a la vez, ordenar los archivos del front-end para que sea más fácil de mantener.
Lo que hicimos. Implementamos la nueva interfaz con fidelidad al diseño de Figma sobre la base existente, que usa Node.js, Express y EJS, y reestructuramos el front-end: estilos por componente, plantillas reutilizables e íconos SVG.
Cifras tomadas del sitio en producción en noviembre de 2026.
Una interfaz fiel al diseño de Figma
Cada pantalla se llevó al código siguiendo el diseño de Althaus®, con los componentes, los espaciados y los comportamientos que pensó el equipo de diseño.
Pantalla por pantalla
Inicio, listados, ficha de producto, armador de PC, guías, outlet y ofertas se implementaron siguiendo el diseño de Figma.
Banners y carruseles
Una grilla de banners con carruseles y paginación para destacar marcas, tiendas y promociones.
Menú de categorías
Un menú desplegable con 6 grupos y 33 categorías, y un buscador siempre a mano.
Listados con filtros
Filtros por precio, orden por precio más bajo y tarjetas de producto con descuento, tienda y favoritos.
Adaptado al celular
En pantallas chicas los banners y las grillas se reordenan y el menú pasa a un ícono.
Guías, outlet y ofertas
Guías de compra, productos outlet y la sección «Bajaron de precio» con el mismo lenguaje visual.
Historial de precios en cada producto
La ficha muestra el precio actual, la tienda que lo vende y cómo cambió con el tiempo.
- Gráfico de evolución. Muestra cómo varió el precio del producto, para decidir cuándo comprar.
- Salto directo a la tienda. Un botón lleva a comprar el producto en la tienda que lo vende.
- Favoritos. Una estrella permite guardar el producto para seguirlo.
- Productos similares. Debajo se listan opciones parecidas de otras tiendas, con su precio.
Armador de PC con los precios de todas las tiendas
Armar una PC es elegir entre muchas opciones. El armador guía a la persona en tres pasos.
- Elegí cada componente. Al tocar una fila se exploran las opciones disponibles para esa parte de la PC.
- Compará y agregá. Los resultados salen ordenados por el mejor precio entre todas las tiendas del sitio.
- Guardá tu armado. Se ajustan las cantidades, se ve el total y se imprime la lista para comprar.
Reestructuración del front-end
Además de implementar el diseño, ordenamos los archivos: cada componente tiene su propia hoja de estilos y las plantillas se reutilizan entre pantallas.
Antes
public/ ├─ css/ │ └─ css.css un solo archivo └─ images/ 4 íconos SVG views/ └─ partials/ 22 plantillas
Después
public/ ├─ css/ │ ├─ css.css base y globales │ └─ components/ 17 hojas │ ├─ navbar.css │ ├─ product.css │ ├─ build.css │ └─ … └─ images/ 60 íconos SVG views/ ├─ partials/ 33 plantillas └─ components/ tarjeta y filtros
Estilos por componente
Se pasó de una única hoja de estilos a una por componente: menú, tarjeta de producto, ficha, armador, pie de página y más.
Plantillas reutilizables
Banners, carruseles, filtros, tarjetas y pie de página son plantillas EJS que se reutilizan en distintas pantallas.
Misma base, ajustes puntuales
La nueva interfaz se montó sobre las mismas rutas, API y modelos de datos, con cambios puntuales en el back-end.
Capturas del sitio
Inicio
Portada con banners, categorías y tiendas
Listado de productos
Placas de video con filtros y orden por precio
Producto
Ficha con historial de precios
Armador de PC
Pasos para elegir y comparar componentes
Tecnologías
Figma
Node.js
Express
EJS
MongoDB
RedisPreguntas frecuentes
¿Pueden implementar un diseño de Figma tal cual fue diseñado?
Sí. Tomamos el diseño de Figma que entrega el equipo de diseño y lo llevamos al código pantalla por pantalla, respetando estructura, tipografías, colores, espaciados e interacciones. En HardGamers lo hicimos con la interfaz diseñada por Althaus®.
¿Se puede renovar la interfaz de un sitio sin rehacerlo desde cero?
Sí. En HardGamers la nueva interfaz se montó sobre la misma base: se mantuvieron las rutas, la API y los modelos de datos, con ajustes puntuales en el back-end, y se rehízo la capa visual. Así se evita construir el sitio de nuevo.
¿Qué significa reestructurar el front-end?
Ordenar los archivos de la parte visual para que sea más fácil mantenerla. En HardGamers pasamos de una única hoja de estilos a una por componente, reorganizamos las plantillas en piezas reutilizables y sumamos íconos SVG.
¿Trabajan con estudios de diseño externos?
Sí. Podemos recibir el diseño de un estudio externo, como Althaus® en este caso, y encargarnos de llevarlo al código.
¿Pueden llevar al nuevo diseño herramientas complejas como un armador de PC?
Sí. En HardGamers el armador de PC se adaptó a la nueva interfaz, con sus pasos para elegir cada componente, comparar precios entre tiendas y guardar el armado.
¿La web queda preparada para verse bien en el celular?
Sí. La interfaz de HardGamers se adapta a pantallas chicas: los banners y las grillas se reordenan y el menú pasa a un ícono.
¿Desarrollan comparadores de precios y tiendas online?
Sí. HardGamers reúne el catálogo de más de 50 tiendas, ordena los resultados desde el precio más bajo y muestra el historial de cada producto. Podés ver otro caso en Black Paprika Store.
¿Tenés un diseño listo para llevar a la web?
Más sobre lo que hacemos
Otros casos de éxito que desarrollamos.
