Descripción general del proyecto
En la web Shopyy de Chroma Dewy organizamos las páginas alrededor de looks de maquillaje y productos llenos de color. Primeros planos de ojos y textos de colección forman el banner; paletas y categorías conducen después a los productos. La identidad naranja, el fondo claro y las imágenes saturadas conectan exploración, comparación y fichas individuales.
| Servicios | Sector | Plataforma |
| Diseño y desarrollo web Shopyy | Belleza y cuidado personal | Shopyy |
| Necesidades del proyecto | Mercado objetivo | Estilo de diseño |
| Looks de maquillaje y exposición de productos por color | Tienda en inglés con precios en dólares estadounidenses | Identidad naranja, fondo claro e imágenes de maquillaje saturadas |
| Presupuesto del proyecto | Entregables | Plazo de entrega |
| CNY 4,500 | Inicio, estructura de categorías, fichas de producto y diseño adaptable | 7 días |
Reto de diseño
Una web de maquillaje debe mostrar los resultados y facilitar comparar colores y herramientas. Usamos primeros planos para expresar el tema y cuadrículas regulares para paletas, brochas y envases, evitando interferencias entre ambos tipos de información.
Estrategia: looks y productos llenos de color
Los primeros planos de ojos y el texto forman el banner del inicio; debajo, paletas e imágenes de categorías llevan al catálogo. El inicio orienta, las categorías comparan y las fichas explican apariencia y opciones. Navegación y enlaces conectan los niveles.
Josefin Sans organiza títulos, navegación y texto con jerarquía de tamaño, peso y ancho. Identidad naranja, fondo claro e imágenes saturadas continúan por las páginas principales. Los grupos son compactos y las secciones tienen más aire para separar imágenes, explicaciones y acciones.
Movimiento y funciones al servicio de la elección
El banner conserva flechas izquierda y derecha; las imágenes de categorías llevan a distintos catálogos. Cantidad, imágenes y descripciones agrupadas se centran en cada producto. En móvil, la navegación se recoge en un menú claro que mantiene el recorrido.
Banner: el maquillaje de ojos como primer foco
Dos primeros planos de ojos ocupan la derecha del banner y el texto temático la izquierda; el logo naranja Chroma Dewy aparece en una cabecera sencilla. Las imágenes cercanas muestran color y textura; las flechas permiten pasar a otras colecciones.
La ligereza de Josefin Sans conecta navegación y productos. El fondo claro deja respirar los colores saturados. Imagen y texto tienen zonas propias, sin cargar la primera pantalla con toda la descripción del producto.
Novedades: comparar colores en una cuadrícula
New Arrivals reúne varias columnas de paletas para comparar tonos de sombra sobre un fondo claro. Nombres y precios son breves; después aparecen imágenes de categorías como Brushes, Eyes y Lips.
Paletas del mismo tamaño y tarjetas uniformes crean orden, con espacios iguales entre categorías. El naranja identifica la marca en puntos concretos; el protagonismo cromático pertenece a los productos.
Brochas: mostrar formas y composición de los conjuntos
La categoría Makeup Brushes reúne brochas individuales y sets en una cuadrícula. Las imágenes explican primero cabezales, mangos y número de piezas, con nombres y precios debajo.
Fondo blanco y mayor separación reducen la saturación. Navegación fina y título centrado mantienen ligereza. Las herramientas del catálogo ocupan su zona sin interrumpir la comparación.
Ficha: el envase temático presenta el producto
En The Volturi, la imagen del envase rojo y negro ocupa la izquierda; nombre, precio, cantidad y descripción breve, la derecha. La imagen define la identidad visual antes de que el texto detalle el producto.
El rojo contrasta con el fondo claro. Controles de líneas finas y espacios compactos ordenan las acciones. El aire entre imagen y texto mantiene legible el tema oscuro dentro de una interfaz ligera.
Más detalles: separar información y recomendaciones
Más abajo se conservan miniaturas, reseñas y You May Also Like. El espaciado conecta las secciones y distingue información del producto actual y nuevas opciones para seguir comprando.
Las recomendaciones comparten ancho de columna. Retratos, envases y herramientas siguen sobre fondos claros. Subtítulos y espacio vertical separan grupos para continuar hacia productos de interés.
Inicio móvil: menú compacto, colección y novedades
En móvil, la navegación horizontal pasa a un acceso rojo MENU; logo y búsqueda se apilan arriba. El banner precede a New Arrivals, manteniendo el recorrido del look al producto.
Las imágenes ganan espacio en pantallas estrechas, con título y precio en vertical. La barra roja se distingue del contenido claro y permite volver a las categorías mientras se explora.
Ficha móvil: imágenes y detalles en secuencia
La ficha móvil comienza con la ruta de navegación y el envase en grande, seguidos de nombre, precio y cantidad. La imagen conserva el tema completo y las columnas se convierten en lectura continua.
Los títulos se alinean a la izquierda y saltan de línea, con separación entre precio y controles. Fondo claro, bordes finos y colores de marca conectan la ficha con las demás páginas.
Conclusión: conectar la colección con sus detalles
En Chroma Dewy, los looks y el color guían identidad naranja, fondos claros e imágenes saturadas en inicio, categorías y fichas. Las imágenes expresan el tema, el texto aclara y catálogo y opciones permiten avanzar. El móvil mantiene la secuencia para una experiencia coherente.
Planifica una web Shopyy clara para tu marca
Comparte tu sitio actual, materiales de marca y páginas necesarias. Revisaremos productos, mercado y prioridades de contenido para definir juntos páginas, diseño y funciones adecuados.
