Wireframe de referência
Design final da interface
O Desafio
O primeiro prompt foi para criar um card de produto com os botões de adicionar ao carrinho e favoritar o item. O resto do design era livre, podendo utilizar o estilo, cor e tipografia que quisesse.
Estrutura
Para esse design, escolhi começar pelo simples. Defini a hierarquia dos elementos seguindo as Hierarchy Strips, assim, o layout do conteúdo dentro do card demonstra uma narrativa que guia o usuário a clicar no botão de ação.
Espaçamentos
Os espaçamentos foram definidos a partir da grade de 8 pontos, o que significa que todos os espaços entre elementos são múltiplos de 8.
Tipografia
Para a tipografia, escolhi a fonte Poppins, por ter uma boa variedade de pesos e ser altamente legível. Para as informações principais, pesos mais altos para definir hierarquia e puxar a atenção do usuário.
Cores
A paleta de cores é bem simples, consistindo em um tom de roxo como a cor primária e um amarelo como secundária. Os textos possuem um tom de grafite e os fundos são todos brancos.
Componentes
Os componentes consistem em um botão de ação com ícone auxiliar, um conjunto de ícones de estrela que representam as avaliações do produto e uma imagem do produto retirada do site Freepik. Os ícones de favorito e avaliação são da biblioteca Phosphor Icons, e o ícone de adicionar ao carrinho, da coleção iOS 16 Glyphs criada pela icons8.
Variantes
Durante o processo de design, criei outras versões até optar pelo design final mostrado acima, aqui estão algumas delas:
Com a escala de avaliações compacta.
Com a escala de variações compacta e chips (tags) de palavras chave.
Com a escala compacta e na canto superior, sobreposta à imagem do produto.
Com chips de palavras chave sobrepostos a imagem do produto.
Dark Mode
Fiz também uma versão em fundo invertido para representar o card no modo escuro.
