Diseño web Shopyy de camisetas: MMJerseys, ligas y selección de modelos

Descripción general del proyecto

Para la web Shopyy de MMJerseys organizamos las páginas alrededor de ligas y selección de camisetas. Navegación por ligas, entradas al catálogo y novedades ocupan niveles distintos, tanto para quien busca un equipo como para quien explora modelos. Cuadrículas blancas, acentos rojos y texto negro conectan colecciones, comparaciones y productos.

Reto de diseño

Liga, equipo, temporada y modelo influyen a la vez en la elección. Primero aclaramos la jerarquía del catálogo y después usamos imágenes y opciones para decisiones concretas, evitando amontonar todas las categorías y explicaciones en un nivel.

Estrategia: catálogos por liga y selección de camisetas

Navegación por ligas, accesos al catálogo y novedades se distribuyen en niveles distintos para buscar por equipo o por modelo. El inicio orienta, las categorías permiten comparar y las fichas explican apariencia y opciones. Navegación y enlaces conectan los niveles.

Arial y Helvetica organizan títulos, navegación y texto; una tipografía condensada destaca la franja promocional superior. Tamaño, peso y ancho de párrafo establecen jerarquía. Cuadrículas blancas, acentos rojos y texto negro continúan en las páginas principales, agrupando información y dejando más espacio entre secciones.

Movimiento y funciones al servicio de la elección

El catálogo usa menús desplegables al pasar el cursor; los productos conservan pestañas y miniaturas de modelos. Las fichas continúan con tallas, números y opciones adicionales. Estados seleccionados claros y espacios entre grupos conectan exploración y elección sin animaciones que compitan con las camisetas.

Productos del inicio: comparar primero la apariencia

Las pestañas New Arrivals y World Cup 2026 aparecen sobre la cuadrícula, que en esta vista muestra novedades. Cada tarjeta presenta el frente de la camiseta, después nombre, precio e información adicional. Imágenes de escala similar facilitan comparar colores y dibujos.

El fondo blanco y el texto negro fino dejan protagonismo a los colores de los equipos. Un espacio separa pestañas y productos, mientras cada tarjeta es compacta: se puede recorrer una fila antes de leer un nombre concreto.

Catálogo de ligas: los equipos acotan la búsqueda

En Premier League, los nombres de equipos forman enlaces de texto sobre los productos. Título, subcategorías y controles Refine y Sort By tienen niveles propios, manteniendo un orden claro pese a la amplitud del catálogo.

El rojo se reserva a navegación y novedades; los productos mantienen fondos claros. Imágenes grandes y tarjetas uniformes permiten comparar. Las especificaciones quedan en las fichas para no alargar el listado con demasiado texto.

Ficha: fotografía junto a la información de selección

La gran imagen de la camiseta aparece a la izquierda; a la derecha se suceden nombre, precio, promoción y enlaces Similar Style. La camiseta de rayas azules y rojas domina visualmente, con miniaturas de otros ángulos.

Párrafos cortos y espacios organizan la columna derecha; una franja amarilla destaca la promoción. Anchuras definidas para imagen y texto permiten comprobar el aspecto mientras se avanza por las opciones.

Opciones: agrupar modelos y personalización

La foto y sus miniaturas siguen a la izquierda. A la derecha, miniaturas densas pero alineadas muestran modelos relacionados, seguidos de tallas y personalización. Separamos las decisiones en una secuencia en lugar de un único desplegable largo.

Las miniaturas mantienen espacios regulares; bordes claros y aire agrupan las opciones de texto. La cuadrícula ordena muchos modelos, y talla y número quedan junto a la información del producto para evitar búsquedas entre zonas.

Página de marca: contexto en párrafos breves

Un título centrado y párrafos cortos presentan el negocio, conservando cabecera y pie. Esta página aporta contexto; después de leer, el visitante puede volver al catálogo desde la navegación.

Tipografía sans serif clara, interlineado amplio y separación de párrafos facilitan leer. Se mantiene el blanco y negro sin añadir banners de productos, con un ritmo distinto al de las páginas de selección.

Contacto: una posición clara para enviar mensajes

La información de contacto va arriba y una imagen circular azul de mensaje destaca el siguiente paso. Correo, indicaciones y acceso mantienen separación para entender los canales antes de elegir cómo comunicarse.

El área blanca continúa; el acceso azul se distingue de la navegación roja superior. La página guía el contacto, mientras catálogos y precios permanecen en sus propias páginas.

Inicio móvil: banners y productos en dos columnas

En pantallas estrechas conservamos la promoción superior, el banner de camisetas y las novedades, adaptando la cuadrícula al ancho móvil. El banner introduce el tema y la lista lleva directamente a los modelos.

Títulos y nombres se ajustan al ancho de tarjeta y las imágenes conservan tamaño suficiente. El espacio vertical separa banner, pestañas y productos para mantener el mismo orden de contenido.

Ficha móvil: la imagen presenta el modelo

El móvil muestra primero la gran foto y las miniaturas, después nombre, precio y promoción. Las dos columnas pasan a una lectura vertical con ancho suficiente para cada grupo.

La camiseta sigue siendo prominente; texto alineado a la izquierda y espacios controlados ordenan la información. Modelos y especificaciones continúan por la página, conectando imágenes, nombres y elecciones.

Conclusión: conectar la colección con sus detalles

En MMJerseys, ligas y selección de camisetas guían cuadrículas blancas, acentos rojos y texto negro en inicio, categorías y fichas. Las imágenes expresan el tema, el texto explica detalles y catálogo y opciones permiten avanzar. El móvil conserva el orden para una experiencia visual y de navegación 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.