Descripción general del proyecto
En el sitio Shopyy de StocksKick organizamos las páginas alrededor de las colecciones de calzado y la selección de tallas. Grandes banners crean la primera impresión; los iconos de servicio y las cuadrículas por categoría conducen a los modelos. La interfaz en blanco y negro, las imágenes amplias y las tarjetas ordenadas conectan la exploración de colecciones, la comparación del catálogo y la consulta de cada producto.
| Servicios | Sector | Plataforma |
| Diseño y desarrollo web Shopyy | Calzado y bolsos | Shopyy |
| Necesidades del proyecto | Mercado objetivo | Estilo de diseño |
| Presentación de colecciones y selección de tallas | Tienda en inglés con precios en dólares estadounidenses | Interfaz en blanco y negro, grandes banners de calzado y tarjetas ordenadas |
| Presupuesto del proyecto | Entregables | Plazo de entrega |
| CNY 6,700 | Inicio, estructura de categorías, fichas de producto, diseño adaptable y páginas de marca y contacto | 14 días |
Reto de diseño
Una web de calzado debe mostrar siluetas y colores sin complicar la elección de talla. Separamos banners, comparación de catálogo, fotografías y opciones para que la expresión visual y las decisiones prácticas tengan su espacio.
Estrategia: colecciones de calzado y selección de tallas
Los grandes banners crean la primera impresión y los iconos de servicio y las cuadrículas de categorías conducen a elegir modelos. El inicio orienta, las categorías permiten comparar y las fichas explican apariencia y especificaciones. La navegación conecta estos niveles.
Usamos Poppins en títulos, navegación y texto, jerarquizando mediante tamaño, peso y ancho de párrafo. La interfaz en blanco y negro, las imágenes amplias y las tarjetas regulares se mantienen en las páginas principales. La información relacionada queda agrupada, con más aire entre secciones para distinguir imágenes, explicaciones y acciones.
Movimiento y funciones al servicio de la elección
Los banners del inicio cambian automáticamente y las categorías de la cabecera enlazan los catálogos. Las fichas conservan miniaturas de varios ángulos, botones de talla agrupados e información desplegable. Estas interacciones permiten cambiar imágenes, comparar y leer detalles con una jerarquía clara en blanco y negro.
Inicio: el banner de calzado expresa la colección
Un banner horizontal protagoniza la primera pantalla, mientras logo, búsqueda y categorías mantienen una alineación ordenada. La gran imagen del calzado y el título forman el centro visual; el entorno en blanco y negro resalta los colores de la colección.
Poppins mantiene títulos y navegación limpios. Buscador e iconos comparten una línea horizontal. La primera pantalla da espacio a la colección y reserva los detalles para las páginas siguientes.
Productos del inicio: separar servicios y selección
Bajo el banner, mensajes de servicio y productos llevan del tema general a modelos concretos. Iconos y frases breves forman una franja ligera; las tarjetas inferiores usan imágenes, nombres y precios uniformes para facilitar la comparación.
El fondo blanco y las columnas fijas reducen distracciones, con intervalos iguales entre imágenes. El espacio entre títulos y tarjetas separa claramente la información de servicio y la de producto.
Categoría: comparar siluetas y colores
La categoría presenta varias columnas con fotos, nombres y precios en el mismo orden. Las siluetas ocupan suficiente espacio para comparar primero los colores visualmente.
Texto negro, fondo claro y separación regular de filas y columnas ordenan las tarjetas. Las herramientas del catálogo están separadas de los productos para acotar opciones antes de consultar tallas en cada ficha.
Ficha: fotografía amplia y matriz de tallas
La gran foto del calzado rojo aparece a la izquierda; título, precio y tallas, a la derecha. Botones del mismo ancho forman una matriz con equivalencias US y EU dentro del área de selección.
La fotografía muestra silueta y materiales; el peso tipográfico y los espacios separan título, precio y tallas. Los botones en blanco y negro mantienen el foco en el modelo y sus opciones.
Detalles inferiores: ángulos y explicaciones desplegables
La imagen principal y sus miniaturas permanecen a la izquierda; a la derecha siguen talla, cantidad, compra y las secciones Detail y Customer Reviews. Vistas y explicaciones quedan próximas, con recomendaciones de otros modelos debajo.
Las miniaturas comparten tamaño; líneas finas y signos más/menos distinguen los desplegables. Un espacio amplio entre imagen y texto permite leer las especificaciones y apreciar las fotos por separado.
Página de marca: subtítulos para textos extensos
La información de marca ocupa una página propia, con subtítulos para transacciones, productos y servicios. Conserva la cabecera de la tienda y dedica el espacio principal a la lectura.
El peso de Poppins diferencia subtítulos y párrafos, separados por espacio. Los temas permiten localizar información y volver al catálogo desde la cabecera.
Contacto: horarios y canales en un solo lugar
La página enumera horarios, correo y WhatsApp. Una estructura vertical sencilla reúne estos datos en una zona y evita buscarlos en distintas partes del pie.
El texto se alinea a la izquierda y los grupos mantienen separación. Cabecera y pie conservan la estructura comercial; el cuerpo presenta información clara y ligera.
Ficha móvil: imagen, nombre y tallas en secuencia
En móvil, la foto ocupa el ancho disponible, seguida de nombre, precio y opciones. Las columnas de escritorio pasan a una secuencia vertical para dar espacio a fotos y tallas.
Títulos claros y espaciado enlazan la imagen con la información. Los botones conservan el blanco y negro del escritorio para confirmar primero el modelo y después la talla.
Conclusión: conectar la colección con sus detalles
En StocksKick, las colecciones y las tallas guían una interfaz en blanco y negro con imágenes amplias y tarjetas ordenadas en inicio, categorías y fichas. Las imágenes expresan el tema, el texto explica detalles y el catálogo y las opciones permiten avanzar. El móvil mantiene la secuencia y 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.
