Visão geral do projeto
No site Shopyy da Chroma Dewy, organizámos páginas em torno dos efeitos de maquilhagem e da exposição de cores. Grandes planos de olhos e texto temático formam o banner inicial; paletas e imagens de categorias conduzem aos produtos. Identidade laranja, fundo claro e imagens saturadas ligam tema, comparação e consulta individual.
| Serviços | Setor | Plataforma |
| Design e desenvolvimento de sites Shopyy | Beleza e Cuidados Pessoais | Shopyy |
| Requisitos do projeto | Mercado-alvo | Estilo de design |
| Temas de maquilhagem e exposição de produtos coloridos | Loja em inglês, com preços em dólares americanos | Identidade laranja, fundo claro e imagens de maquilhagem saturadas |
| Orçamento do projeto | Entregáveis | Prazo de entrega |
| CNY 4,500 | Página inicial, estrutura de categorias, detalhes de produto e design responsivo | 7 dias |
Desafio de design
O site deve transmitir o resultado da maquilhagem e facilitar a comparação de cores e ferramentas. Usámos retratos aproximados para o tema e grelhas regulares para paletas, pincéis e embalagens, evitando competição entre informações.
Estratégia: maquilhagem e exposição de cores
Grandes planos de olhos e texto formam o banner. Paletas e categorias abaixo conduzem ao catálogo. A página inicial orienta, as categorias permitem comparar e os produtos explicam aparência e especificações. Navegação e ligações unem os níveis.
Josefin Sans organiza títulos, navegação e texto; tamanho, peso e largura dos parágrafos criam hierarquia. Laranja, fundo claro e imagens saturadas percorrem as páginas. A informação fica próxima dentro dos grupos, com espaço entre secções para distinguir imagens, explicações e ações.
Movimento e funcionalidades: apoiar a escolha atual
O banner mantém setas laterais e as imagens de categorias abaixo ligam os catálogos. Quantidade, imagens e descrições agrupam-se em torno do produto. No telemóvel, a navegação recolhe a uma entrada clara, mantendo a continuidade da exploração.
Banner inicial: os olhos são o primeiro foco visual
Dois grandes planos de maquilhagem ficam à direita, texto temático à esquerda e o logótipo laranja Chroma Dewy no cabeçalho simples. Os olhos mostram cor e textura; setas permitem mudar de tema.
A leveza de Josefin Sans liga navegação e texto. O fundo claro dá espaço à maquilhagem intensa. Imagem e texto têm áreas próprias, sem concentrar toda a descrição no primeiro ecrã.
Novidades: comparar cores numa grelha regular
Organizámos New Arrivals em várias colunas de paletas, comparando cores sobre fundo claro. Nomes e preços são breves; a secção seguinte apresenta categorias como Brushes, Eyes e Lips.
Paletas do mesmo tamanho e cartões iguais criam ordem, com intervalos regulares entre categorias. O laranja identifica a marca pontualmente; as cores principais vêm dos produtos.
Pincéis: mostrar formas e composição dos conjuntos
Pincéis individuais e conjuntos partilham a grelha sob Makeup Brushes. As imagens mostram primeiro cabeças, cabos e quantidades; nomes e preços aparecem depois.
Branco e espaçamento amplo reduzem a concentração visual. Navegação fina e título centrado mantêm leveza. As ferramentas do catálogo têm lugar próprio sem interromper a comparação.
Produto: a embalagem temática introduz os detalhes
Na página The Volturi, a embalagem vermelha e preta ocupa a esquerda; nome, preço, quantidade e descrição breve ficam à direita. A imagem apresenta a identidade visual antes dos pormenores escritos.
O fundo vermelho distingue-se da página clara. Contornos finos e espaçamento compacto organizam os controlos. Espaço entre fotografia e texto permite ler o tema escuro dentro da interface leve.
Mais detalhes: separar informação complementar e recomendações
Mantivemos miniaturas, avaliações e You May Also Like abaixo. O espaçamento liga as secções, distinguindo informações do produto atual das entradas para continuar a escolher.
As recomendações usam colunas iguais. Retratos, embalagens e ferramentas continuam sobre fundo claro. Subtítulos e espaços verticais separam os grupos e permitem encontrar outros produtos de interesse.
Página inicial móvel: recolher o menu e manter tema e novidades
A navegação horizontal passa à entrada vermelha MENU, com marca e pesquisa empilhadas acima. O banner é seguido de New Arrivals, mantendo a sequência de inspiração e produtos.
Na largura reduzida, as imagens ganham espaço e nomes e preços seguem verticalmente. A barra vermelha distingue-se do conteúdo claro, permitindo regressar às categorias durante a exploração.
Produto móvel: imagens e explicações em sequência
Começamos pela navegação estrutural e pela grande fotografia da embalagem, seguindo-se nome, preço e quantidade. O tema fica completo e as duas colunas tornam-se leitura contínua.
Títulos à esquerda ajustam-se naturalmente à largura, com espaço entre preço e controlos. Fundo claro, linhas finas e cor da marca mantêm a linguagem das restantes páginas.
Síntese do design: ligar o tema aos detalhes concretos
Na Chroma Dewy, maquilhagem e cores orientam identidade laranja, fundo claro e fotografias saturadas entre página inicial, categorias e produtos. As imagens exprimem o tema, o texto explica detalhes e os controlos apoiam a etapa seguinte. O telemóvel mantém a sequência para uma experiência 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.
