IDENTIDAD DIGITAL / DISEÑO WEB
PROYECTO DE ESTUDIOAtelier Rouge
Una casa de cosmética imaginada como un universo digital completo. Retrato, color y textura abren la conversación; colección, tonos, rituales y contenido editorial la convierten en una experiencia de compra con criterio.
Exploración independiente de AsturaWeb. Diseño de una experiencia digital, sin encargo de cliente.
- SECTOR
- Belleza · E-commerce · Dirección editorial
- IDIOMA DEL DISEÑO
- Francés
- EDICIÓN
- 2026
- ALCANCE
- Identidad, UI y dirección de producción
01 / EL CONTEXTO
El deseo tiene una imagen. La compra, un recorrido.
Atelier Rouge es un concepto independiente de belleza con sensibilidad parisina. La propuesta conecta una marca aspiracional con su operativa: presentar productos, explicar sus variantes, acompañar la elección y preparar campañas desde un mismo sistema.
- Colecciones, tonos, acabados y selección guardada
- Rituales, campañas y journal conectados al catálogo
- Pedido, inventario de tonos y publicación editorial
El diseño conserva su idioma original. El relato del proyecto sigue el idioma que has elegido en AsturaWeb.
02 / EL RETO
Conservar la intensidad de una campaña de belleza sin esconder lo necesario para comprar. El tono, el acabado, el uso y la entrega deben ser tan claros como la imagen es memorable.
LA IDEA
Borgoña, marfil y negro. Una serif de contraste da voz a la marca; una retícula precisa organiza el catálogo. Primeros planos, pigmentos y objetos alternan con espacios de lectura y acciones reconocibles.
03 / MÁS ALLÁ DE LA PORTADA
Un sistema,
no solo una primera pantalla.
La portada reúne campaña, colección, ritual y journal. Cada entrada conduce a una decisión distinta: explorar un acabado, elegir un tono, aprender un gesto o volver a una selección guardada. La estrategia de contenido conecta esas entradas con productos concretos.
EL LENGUAJE DEL PROYECTO
Carácter, con criterio.
Color y materia
Borgoña profundo · marfil · negro cálido
Tipografía y jerarquía
Serif expresiva para campaña y relato; etiquetas discretas y jerarquía estable para elegir y comprar.
Imagen y movimiento
Retratos cercanos y texturas a gran escala. La dirección de movimiento propone fundidos breves y cambios de encuadre; las imágenes fijas transmiten esa intención sin cargar vídeos automáticos.
EL DESEO, CON INFORMACIÓN
Una colección.
Muchas formas de elegir.
El catálogo permite comparar familias y acabados. La ficha acerca la textura, nombra cada tono y reúne uso, entrega y siguiente paso. Las recomendaciones completan una elección, sin convertir la página en un escaparate interminable.
DE LA ELECCIÓN AL PEDIDO
El carrito conserva producto, tono, cantidad y total. La entrega y el pago se presentan como pasos definidos; la cuenta y los favoritos permiten retomar el recorrido.
04 / RESPONSIVE E INTERACCIÓN
Otra pantalla.
La misma intención.
La portada larga se desplaza dentro de un teléfono de proporciones reales. Las otras dos pantallas muestran un resumen de marca y una ficha de producto. La navegación se compacta; los tonos, el precio y la acción de compra conservan su prioridad.
UN CONTENIDO QUE ABRE CAMINOS
La imagen atrae.
El relato acompaña.
Campaña, journal y ritual tienen funciones distintas. La campaña construye la identidad; el journal permite descubrir; el ritual explica cómo combinar productos. Comparten referencias de catálogo para que inspiración y compra mantengan continuidad.
INTENCIÓN DE INTERACCIÓN
Galerías que conservan el foco, selección de tono con nombre visible y transiciones cortas entre capítulos. El movimiento acompaña la lectura y se reduce cuando la persona así lo prefiere.
DETRÁS DE LA CAMPAÑA
Una marca expresiva.
Un sistema para cuidarla.
El espacio de gestión conecta referencias, tonos y existencias con pedidos, lanzamientos y contenido. Los estados de borrador, revisión y publicación separan la preparación del momento en que una campaña llega al público.
Vista de gestión propuesta para el concepto. Los pedidos y las cantidades ilustran tareas de uso, no actividad comercial real.
- 01Preparar
Producto, variantes, imágenes y condiciones en una ficha común.
- 02Relacionar
Asociar productos a rituales, artículos y campañas.
- 03Revisar y publicar
Comprobar disponibilidad, contenido y permisos antes del lanzamiento.
DEL BRIEF AL SISTEMA
- 01Contexto
- 02Contenido
- 03Estructura
- 04Dirección visual
- 05Sistema UI
- 06Responsive
El desarrollo, las integraciones y la validación de producción forman una fase posterior, definida según el alcance real.
05 / DIRECCIÓN TÉCNICA
Preparado para pensar
en producción.
Implementación recomendada para este concepto; no describe un sitio ya desarrollado o desplegado.
Una producción podría combinar React y TypeScript con Shopify para productos, variantes, stock, pedidos y pago alojado. Un CMS estructuraría campañas, artículos y rituales vinculados a referencias del catálogo. El panel necesitaría permisos por función, previsualización y validación de publicación. La propuesta define interfaces y recorridos; no representa una tienda conectada ni ventas reales.
- React
- TypeScript
- Shopify / Commerce API
- CMS
- WebP / AVIF
- HTML semántico, teclado y contraste
- Imágenes responsive y carga progresiva
- Contenido indexable y estructura SEO
El alojamiento, la medición con consentimiento y los datos estructurados se definirían con información verificada y necesidades concretas.
HABLEMOS
Una web nueva, un rediseño o una idea que todavía no sabes cómo plantear. Escríbenos y vemos juntos qué tendría sentido hacer.
Cuéntanos
qué tienes en mente.
No necesitas saber de tecnología ni llegar con todo decidido. Cuéntanos qué haces y qué quieres mejorar. Empezamos por ahí.
Presupuesto a medida. Te proponemos una solución clara, sin compromiso.
PARA ROMPER EL HIELO
- Qué hace tu negocio
- Qué te gustaría mejorar
- Tu web actual, si la tienes