Design de site Shopyy de camisolas: ligas e escolha de modelos na MMJerseys

Visão geral do projeto

No site Shopyy da MMJerseys, organizámos as páginas em torno das ligas e da escolha de camisolas. Navegação por ligas, entradas de catálogo e novidades ocupam níveis distintos, servindo quem procura uma equipa e quem explora modelos. Grelhas brancas, destaques vermelhos e texto preto ligam o tema, a comparação e a consulta individual.

Desafio de design

Liga, equipa, época e modelo influenciam a escolha. Clarificámos primeiro a hierarquia do catálogo, deixando imagens e opções apoiar a decisão concreta, sem concentrar categorias e descrições no mesmo nível.

Estratégia: catálogos por liga e escolha de camisolas

Separámos ligas, entradas de catálogo e novidades para servir a pesquisa por equipa e por modelo. A página inicial orienta, as categorias permitem comparar e os produtos explicam aparência e opções. Navegação e ligações unem os níveis.

Arial e Helvetica organizam títulos, navegação e texto; uma fonte condensada destaca a faixa promocional superior. Tamanho, peso e largura dos parágrafos criam hierarquia. Grelhas brancas, vermelho e preto percorrem as páginas, com informação próxima dentro dos grupos e maior espaço entre secções.

Movimento e funcionalidades: apoiar a escolha atual

Menus abrem ao passar o cursor; os produtos mantêm separadores e miniaturas de modelos. Nos detalhes seguem-se tamanhos, números e opções adicionais. Estados selecionados claros e espaçamento entre grupos ligam exploração e decisão, sem animações a competir com as camisolas.

Produtos na página inicial: comparar o aspeto antes do nome

Separadores como New Arrivals e World Cup 2026 ficam sobre a grelha, aqui com novidades. Cada cartão mostra a frente da camisola, depois nome, preço e informação adicional. Escalas semelhantes na mesma linha facilitam comparar cores e padrões.

Fundo branco e texto preto fino deixam as cores das equipas dominar. Espaço separa os separadores dos produtos, enquanto os cartões são compactos, permitindo percorrer modelos antes de ler um nome concreto.

Catálogo de ligas: equipas reduzem o leque de escolha

Na categoria Premier League, os nomes das equipas surgem como ligações acima da grelha. Título, subcategorias e controlos Refine e Sort By ocupam níveis próprios, mantendo a ordem apesar da quantidade de informação.

O vermelho fica reservado à navegação e às novidades; os produtos mantêm fundo claro. Imagens grandes e cartões de largura constante apoiam a comparação. As especificações ficam nos detalhes para não alongar os cartões com texto.

Detalhes: fotografias junto da informação de seleção

Colocámos a grande fotografia à esquerda; nome, preço, promoção e Similar Style à direita. A camisola azul e vermelha domina a imagem, com miniaturas de outros ângulos do mesmo artigo.

Parágrafos curtos e espaços agrupam a coluna direita, com uma faixa amarela como destaque local. Larguras definidas para fotografia e texto permitem verificar o aspeto enquanto se continua a escolher.

Opções: separar modelos e personalização

A fotografia e miniaturas continuam à esquerda. À direita, cartões pequenos mas alinhados mostram modelos relacionados, seguidos de tamanhos e personalização. Dividimos as decisões numa sequência em vez de um único menu longo.

As imagens pequenas têm intervalos fixos; contornos claros e espaços agrupam opções textuais. A grelha mantém a comparação organizada quando há muitos modelos. Tamanhos e números perto da informação evitam procurar entre áreas distantes.

Sobre a empresa: parágrafos curtos acrescentam contexto

Um título centrado e parágrafos breves apresentam a atividade, mantendo cabeçalho e rodapé da loja. A página acrescenta contexto e permite regressar ao catálogo pela navegação.

Tipografia sem serifa, entrelinha generosa e espaços entre parágrafos facilitam a leitura. Mantivemos preto sobre branco sem acumular banners, diferenciando a leitura institucional da escolha de produtos.

Contactos: dar posição clara à entrada de mensagens

A explicação de contacto fica no topo, com uma imagem circular azul a destacar a entrada seguinte. Espaços agrupam email, instruções e acesso para compreender os canais antes de escolher como comunicar.

A área branca mantém-se simples. A entrada azul distingue-se da navegação vermelha da loja. A página orienta o contacto; catálogo e preços permanecem nas páginas próprias.

Página inicial móvel: banners e produtos em duas colunas

Mantivemos a faixa promocional, o banner de camisolas e as novidades, adaptando a grelha à largura móvel. O banner apresenta o tema e a lista segue diretamente para os modelos.

Títulos e nomes ajustam-se à largura dos cartões e as imagens mantêm dimensão suficiente. Espaços verticais distinguem banner, separadores e produtos, preservando a ordem do conteúdo.

Produto móvel: a imagem apresenta primeiro o modelo

O telemóvel mostra primeiro a fotografia e miniaturas, depois nome, preço e promoção. As duas colunas tornam-se uma sequência vertical, dando largura a cada grupo.

A camisola mantém uma área destacada. Texto à esquerda e espaçamento controlado organizam a informação. Modelos e opções seguem pela página, ligados às imagens e aos nomes.

Síntese do design: ligar o tema aos detalhes concretos

Na MMJerseys, ligas e escolha de camisolas orientam grelhas brancas, navegação vermelha e texto preto entre página inicial, categorias e produtos. As imagens apresentam o tema, o texto explica os detalhes e os controlos apoiam a ação seguinte. O telemóvel mantém a sequência, criando uma experiência visual e de navegação coerente.

Planeie um site Shopyy claro para a sua marca

Partilhe o site atual, os materiais da marca e as páginas necessárias. Tendo em conta os produtos, o mercado-alvo e as prioridades de conteúdo, planearemos consigo as páginas, o design e as funcionalidades adequadas.