ROSSI
TiendaDiseño y desarrollo de una plataforma web para ROSSI, un taller uruguayo dedicado a la creación artesanal de piezas de cuero. El objetivo fue construir una experiencia digital que pudiera transmitir la identidad de la marca y, al mismo tiempo, funcionar como un espacio para presentar y comercializar sus productos.
La marca tiene una promesa corta —hechas para todos los días, hechas para durar— y una regla de escritura que ordenó toda la interfaz: ningún adjetivo va solo, siempre acompañado de una prueba concreta. Por eso la ficha de cada pieza no dice "premium": dice el cuero, las medidas en centímetros, el largo de la correa, cuántos bolsillos tiene y qué entra adentro.
La tienda está en línea y vende de verdad, en pesos y dentro de Uruguay. Se compra sin crear una cuenta, y se puede cerrar el pedido pagando online o coordinando por WhatsApp — dos caminos, porque el público de ROSSI no es uno solo.
- FORMATO
- Website
- ESTADO
- Released
- PROPÓSITO
- Commercial
- DIMENSIÓN
- Medium Project
- DISCIPLINAS
- Web Design · UI Design/UX Design · Interactive Design · Visual Identity
- TÉCNICAS
- Coding · Editorial
- SOFTWARE
- Figma · HTML/CSS/JAVASCRIPT · React
La paleta
Blanco, negro y tres acentos que solo aparecen para decir algo.
Casi todo el sitio es blanco roto y negro. El color no decora: entra únicamente en las etiquetas de estado, que son la información que tiene que leerse de lejos en una grilla de piezas. El arena aparece una sola vez, en el pedido que todavía se está preparando.
- #F9F9F8Blanco rotoEl fondo de todo el sitio
- #FFFFFFBlancoLas tarjetas y los bloques sobre el fondo
- #111111NegroLos títulos, el texto y los botones principales
- #888888GrisLas descripciones y los rótulos de la ficha
- #2B7A65VerdeNUEVO, OFERTA y el pedido entregado
- #D8C3A5ArenaEl pedido en preparación
La tienda
El inicio
La portada es una foto del taller a pantalla completa. Antes de ver una cartera se ve una mesa de trabajo con la tijera y el martillo: lo primero que se muestra no es una tienda, es un oficio.
Más abajo, la selección destacada. Pocas piezas y grandes — con un catálogo corto, mostrarlas apretadas sería aparentar un surtido que no existe.
El catálogo
"Colección 2026 · Piezas pensadas para durar". La cabecera va en negro pleno y ocupa media pantalla: es el único corte oscuro de un sitio que por lo demás respira en blanco.
La grilla. Cada tarjeta lleva la categoría escrita en vertical al costado, el precio y las variantes de color como puntos: tres datos que se leen sin abrir la pieza. Las etiquetas de estado —NUEVO, OFERTA, SOLD OUT— son lo único con color fuerte en la pantalla, y por eso se leen de lejos.
Los filtros se despliegan en el lugar, sin cambiar de página ni abrir un panel encima. Filtrar es afinar lo que ya estás mirando, no empezar de nuevo.
La pieza
La ficha de un producto es donde la regla de la marca se vuelve interfaz: color y acabado, materiales, medidas, detalles de la pieza y qué entra adentro. Cinco bloques de datos concretos en lugar de un párrafo de elogios. Quien compra cuero a mano quiere saber el largo de la correa.
Comprar
El checkout es un solo paso y no pide crear una cuenta: nombre, correo, teléfono y dirección, con el resumen del pedido al costado. Abajo, dos maneras de cerrar —pagar online o coordinar por WhatsApp—, porque parte del público de ROSSI prefiere hablar con alguien antes de poner una tarjeta.
Y una página entera para el taller. En una tienda de piezas hechas a mano, saber quién las hace es tanto argumento de compra como el precio.
Las reglas
Cuatro decisiones que se repiten en todas las pantallas.
Cero esquinas redondeadas
La regla de oro del sistema.
- ángulo recto
- editorial
- aire
Ni un radio en toda la interfaz: botones, tarjetas, etiquetas y campos, todos con la esquina viva. Es lo que hace que la tienda se lea como una publicación y no como una plantilla, y le pone al producto un marco que no compite con él. El otro lado de la misma decisión es el espacio en blanco, que es abundante a propósito.
El adjetivo con su prueba
La regla de escritura de la marca, aplicada a la interfaz.
- materiales
- medidas
- terminaciones
- qué entra
La marca prohíbe las palabras vacías —exclusivo, premium, lujo— salvo que vengan con un dato al lado. Eso no se resuelve escribiendo mejor: se resuelve con la estructura de la ficha, que reserva un lugar para cada prueba. La forma obliga al texto a ser concreto.
Comprar sin cuenta
Lo que se sacó del flujo original.
- invitado
- un paso
El flujo dibujado en Figma tenía login, perfil, favoritos y lista de deseados. Ninguno sobrevivió, y no por falta de tiempo: en una tienda de piezas únicas donde la mayoría compra una vez, pedir una cuenta antes de vender es poner un peaje. El carrito vive en el navegador y el pedido se cierra en una pantalla.
Una sola tipografía
Montserrat, y toda la jerarquía adentro de ella.
- Bold 68
- SemiBold 48
- Regular 16
- Light 14
Una familia para todo el sitio, con la jerarquía resuelta por peso y tamaño en vez de por una segunda fuente. Los títulos en Bold, las secciones en SemiBold, el cuerpo en Regular a 16 con interlínea de 28, y los rótulos en Light a 14 con el interletrado abierto. Sumar una tipografía de display habría dado una tienda más ruidosa, no más elegante.
Que la dueña pueda
Quién opera la tienda cuando el proyecto termina.
- precios
- stock
- fotos
Verónica cambia precios, stock y productos desde una planilla, sin tocar código ni volver a publicar el sitio. Es una decisión de diseño antes que técnica: define quién queda a cargo. Una tienda que solo el que la programó puede actualizar no está terminada.