Inventory Button Redesign

Inventory Button

Draft

First, the sketches that were envisioned at the beginning are now drawn on paper. The idea is that it's an octagon pattern, and then fill it with colors that match the inventory interface.

Iteration

For the final button, we looked at buttons designed by other groups in the Gaming category. To maintain in-game consistency, we also styled our inventory buttons to follow their style. Because the colors in the inventory menu are mainly light yellow and different degrees of brown. So we designed the color inside the button to be light yellow, with light brown as the border and dark brown as the button's shadow.

Then, we want to give the button some effect, when the cursor touches it it will have a different shape and the player will obviously know that it is used. Because the color arrangement of the buttons is very similar to the wooden board, we thought of the broken effect.

Finally, we express the crushing effect more clearly by changing the mindset.

Finalized Button

Improved based on user test feedback from the previous sprint

---

Future Directions

The button effect design is basically completed, and may be modified and integrated in the future due to in-game changes, style changes and other reasons. However, since the current design is sufficiently complete, it may be the final version

Back to Inventory Page

Author

• Zhenyu Ding
• GitHub: @7ayuu
• Discord: 7ayuu#3089
• Slack: Zhenyu Ding