Shop mockups — a full-screen layout drawn as Luka's general store

I'm making mockups for every screen one by one (not applying them yet). In 162 I picked option 1, the full menu, for the inventory, and this time it's the shop's turn.

Screens I built

I went with option 1, full screen. When the conversation ends, a shop screen opens with the background blurred. It's in the same family as inventory option 1.

At the top are the shop name band, a big "Buy" title, and Buy / Sell tabs. On the left is the item list with columns for item, price and owned, and you adjust the quantity (−2+) right inside the selected row. Below that is a description box. On the right are the info panel (icon, owned 2 → 4 after buying, EFFECT), a box for the total and your gold, and a big F Buy button. Key hints at the bottom: ↑↓ list, ◀▶ quantity, Q E buy/sell, F buy, Esc close.

The data is the 6 items actually sold at "Luka's General Store" (Health Potion, High Health Potion, Mana Potion, High Mana Potion, Apple, Roasted Meat). Two High Health Potions are selected, so the total is 500 G and gold goes from 12,850 to 12,350.

Option 2 packs everything into one window in the center of the screen, with the list on the left (price in G, ×owned) and info, description, quantity and total on the right, and the background only slightly darkened. I kept it.

Things I thought about

• No separate sell tab mockup. It's the same frame, just with the list switched to inventory slots and the button changed to "Sell," so there was no need for another mockup.

Next up

• Apply once every mockup is final