fale comigo

front-end + design system

El Mago

Loja de itens de Diablo 4: seleção de servidor, filtros por tipo de item, busca, quantidade e carrinho, além de uma área de afiliados. Do protótipo interativo ao front-end em Next.js.

testar a demonstração
papel
direção e front-end
status
front-end, protótipo e styleguide
disciplinas
interfacedesign systemfront-end
stack
Next.jsTailwind CSSFigma
Mockup do El Mago: catálogo de itens de Diablo 4 e painel de afiliados em telas escuras com detalhes violeta
Mockup de apresentação. As telas originais, sem retoque, estão em # interface.

# participação

Participei do projeto e fui o diretor.

# o que construímos

Front-end em Next.js com Tailwind CSS.

Todo o protótipo interativo, o system design e o styleguide: os fluxos de catálogo e de afiliados foram desenhados e validados no Figma antes de virar código.

# protótipo interativo

Um recorte do catálogo como ele foi prototipado: troque o servidor, busque um item, ajuste a quantidade e abra o carrinho.

el-mago / itemsProtótipo · preços fictícios · sem checkout
  • Andariel Materials (x2 Shackles & x2 Doll)$2.001
  • Duriel Materials (x2 Egg & x2 Shard)$0.501
  • Malignant Heart$0.201
  • Exquisite Blood$0.101
  • Distilled Fear$0.101
  • Living Steel$0.101

# interface

Capturas e exportações originais. Clique para ver em tamanho real.

  • Catálogo de itens, exportação do Figma
  • Afiliados, exportação do Figma

Quer algo assim no seu produto?

Me chama no LinkedIn e me conta o que você está construindo.

falar no LinkedInver todos os projetos
atalhos de teclado
j k
próximo / anterior projeto
enter
abrir o projeto selecionado
esc
voltar para a lista (dentro de um case)
/
terminal
i
modo inspeção: caixas, grade e medidas
?
esta lista