Visão geral do projeto
No site Shopyy da StocksKick, organizámos as páginas em torno das coleções de calçado e da escolha de tamanhos. Grandes banners criam a primeira impressão, seguidos de ícones de serviço e grelhas por categoria. A interface a preto e branco, as imagens amplas e os cartões regulares ligam a exploração temática, a comparação no catálogo e a consulta individual.
| Serviços | Setor | Plataforma |
| Design e desenvolvimento de sites Shopyy | Calçado e malas | Shopyy |
| Requisitos do projeto | Mercado-alvo | Estilo de design |
| Apresentação de calçado e escolha de tamanhos | Loja em inglês, com preços em dólares americanos | Interface a preto e branco, grandes banners de calçado e cartões organizados |
| Orçamento do projeto | Entregáveis | Prazo de entrega |
| CNY 6,700 | Página inicial, estrutura de categorias, detalhes de produto, design responsivo e páginas de marca e contacto | 14 dias |
Desafio de design
Um site de calçado deve mostrar formas e cores sem dificultar a escolha do tamanho. Separámos banners, comparação de catálogo, fotografias e opções, dando espaço próprio à expressão visual e à decisão concreta.
Estratégia: apresentação de calçado e escolha de tamanhos
Grandes banners criam a primeira impressão; ícones de serviço e grelhas por categoria conduzem à seleção. A página inicial orienta, as categorias permitem comparar e as páginas de produto explicam aparência e especificações. A navegação e as ligações unem estes níveis.
Usámos Poppins em títulos, navegação e texto, com tamanho, peso e largura dos parágrafos a definir a hierarquia. Preto e branco, grandes fotografias e cartões regulares percorrem as páginas principais. Mantivemos a informação relacionada próxima e mais espaço entre secções, distinguindo imagens, descrições e ações.
Movimento e funcionalidades: apoiar a escolha atual
Os banners iniciais alternam automaticamente e as categorias do cabeçalho ligam os catálogos. Os detalhes incluem miniaturas de vários ângulos, botões de tamanho agrupados e informação expansível. Estas interações apoiam a mudança de imagem, a comparação e a leitura, mantendo uma hierarquia clara na interface a preto e branco.
Página inicial: o banner de calçado apresenta o tema
Um banner horizontal ocupa o primeiro ecrã; logótipo, pesquisa e categorias alinham-se no cabeçalho. A grande imagem e o título formam o centro visual, enquanto o enquadramento a preto e branco destaca as cores da coleção.
Títulos e navegação em Poppins mantêm formas simples. Pesquisa e ícones funcionais partilham uma linha horizontal. O primeiro ecrã dá espaço ao tema, reservando os detalhes dos produtos para as páginas seguintes.
Produtos na página inicial: separar serviços e seleção
Sob o banner, avisos de serviço e produtos conduzem da coleção aos modelos concretos. Ícones e frases curtas formam uma faixa leve; abaixo, imagens, nomes e preços consistentes organizam a comparação entre cartões.
Áreas brancas e colunas fixas reduzem distrações, com intervalos iguais entre imagens. O espaço entre títulos e cartões mantém os serviços e os produtos em grupos distintos.
Categorias: comparar formas e cores lado a lado
A grelha apresenta fotografias, nomes e preços numa ordem fixa. Demos espaço suficiente à silhueta dos sapatos para permitir uma primeira comparação visual das cores.
Texto preto, fundo claro e espaçamentos regulares entre linhas e colunas mantêm a ordem. As ferramentas do catálogo ficam separadas, permitindo restringir a escolha antes de abrir o produto e verificar tamanhos.
Produto: fotografia ampla e matriz de tamanhos
A fotografia grande do sapato vermelho fica à esquerda; título, preço e tamanhos, à direita. Botões da mesma largura formam uma matriz, com correspondência US/EU diretamente na área de seleção.
A imagem mostra forma e materiais. Na coluna direita, peso tipográfico e espaços distinguem título, preço e tamanhos. Os botões a preto e branco mantêm o foco no modelo e nas opções disponíveis.
Detalhes inferiores: vários ângulos e informação expansível
Mantivemos a imagem principal e as miniaturas abaixo. À direita continuam tamanhos, quantidade, compra e secções Detail e Customer Reviews. Ver ângulos e ler informações são tarefas adjacentes; mais abaixo surgem modelos relacionados.
As miniaturas têm dimensões pequenas e iguais. Linhas finas e símbolos de mais/menos distinguem as secções expansíveis. Espaço amplo entre imagens e texto torna legíveis as fotografias e as especificações densas.
Sobre a marca: subtítulos organizam explicações longas
A informação da marca fica numa página própria, com subtítulos para transações, produtos e serviços. Mantivemos o cabeçalho da loja e dedicámos o corpo à leitura.
O peso distingue subtítulos Poppins do texto, com espaço entre parágrafos. A divisão por temas facilita localizar informações e regressar ao catálogo pelo cabeçalho.
Contactos: horários e canais no mesmo lugar
A página apresenta horário, email e WhatsApp em sequência. A estrutura vertical simples reúne tudo na mesma área, evitando pesquisas por vários pontos do rodapé.
Texto alinhado à esquerda e espaços entre grupos facilitam a leitura. Cabeçalho e rodapé mantêm a estrutura da loja, enquanto o conteúdo privilegia texto claro e leve.
Detalhes móveis: imagem, nome e tamanhos em sequência
No telemóvel, a fotografia utiliza toda a largura, seguida de nome, preço e opções. A disposição lado a lado do computador passa a vertical, dando espaço suficiente às imagens e aos tamanhos.
Títulos claros e espaçamento ligam a imagem às informações. Os botões mantêm o preto e branco do computador. O visitante confirma primeiro o modelo e depois procura o tamanho adequado.
Síntese do design: ligar o tema aos detalhes concretos
Na StocksKick, coleções de calçado e escolha de tamanhos orientam a interface a preto e branco, os grandes banners e os cartões regulares entre página inicial, categorias e produtos. As imagens exprimem o tema, o texto esclarece detalhes e o catálogo e as opções apoiam a ação seguinte. O telemóvel mantém a sequência para 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.
