Inventory Button Design - UQdeco2800/2022-studio-2 GitHub Wiki

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. Draft

Iteration - Final

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.
Draft Draft Draft

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.

Draft Draft Draft

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

Future Directions

The overall design of the button is basically completed, and it may be modified and integrated in the next sprint due to in-game changes and style changes. However, because 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