get in touch

front-end + design system

El Mago

Diablo 4 item store: server selection, filters by item type, search, quantity and cart, plus an affiliate area. From the interactive prototype to the front-end in Next.js.

try the demo
role
direction and front-end
status
front-end, prototype and styleguide
disciplines
interfacedesign systemfront-end
stack
Next.jsTailwind CSSFigma
Mockup of El Mago: Diablo 4 item catalog and affiliate panel on dark screens with violet details
Presentation mockup. The original, unretouched screens are in # interface.

# my part

I worked on the project and was its director.

# what we built

Front-end in Next.js with Tailwind CSS.

The whole interactive prototype, the system design and the styleguide: the catalog and affiliate flows were designed and validated in Figma before turning into code.

# interactive prototype

A slice of the catalog as it was prototyped: switch the server, search for an item, adjust the quantity and open the cart.

el-mago / itemsPrototype · fictitious prices · no 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

Build a cart up there. Then I’ll tell you what to notice.

# interface

Original screenshots and exports. Open one to see it at full size and browse the others without closing.

  • Item catalog, Figma export
  • Affiliates, Figma export

Want something like this in your product?

Hit me up on LinkedIn and tell me what you’re building.

talk on LinkedIn (opens in a new tab)see all projects
keyboard shortcuts
j k
next / previous project
enter
open the selected project
esc
back to the list (inside a case)
/
terminal on the home page, search on components
1–5 + enter
picks a reply in the terminal
i
inspect mode: boxes, grid and measurements
?
this list
single-key shortcuts