Final Design Style for the Save State - UQdeco2800/2022-studio-1 GitHub Wiki
Navigation / Quick Links
- Save State Design Introduction
- Primary User Group
- Justification for existence
- User test to identify location
- Save State Design – Welcome Screen
- Save State Design Gameplay screen
- Final Design Style <--You're Here
- User testing session - final design
- Appendix
We didn’t produce sketches for the icon concepts, instead once we confirmed the design direction, we started drawing them in Pixilart. The reason for that is:
- Load and Save icons are relatively easy to draw
- The primary shape of an icon has been identified
But the most important factor is that the icons belong to the system information (new game, load, save, resume, exit) meaning that they must be intuitive and easily identifiable. This is the primary reason why we didn’t introduce a completely new concept but took existing icons as inspiration in the design process. If the icon is different from its meaning the player can become confused and won’t associate it with the intended purpose, thus the entire gaming experience could be ruined for our user group.
Color Choice, shape, and contrast
As seen in the Figure 15, there are several cycles that players experience in the game. Night mode implies having a dark tone on the screen, whereas day means lots of bright areas. Choosing the right colors is important otherwise we risk losing the contrast and icons could become unnoticeable. In addition to contrast, the color palette should be different from other elements otherwise players might perceive them as equal. For instance, if we were to incorporate the same color palette as the shop (dark brown tones) then players would thing they are related. This is not our intention.
Figure 15: color palette of all icons helps users to clearly locate them on the screen despite day and night cycles
Furthermore, upon closely examining the color choices in the existing gameplay UI, we’ve noticed that bright yellow tones of the chest lock, coin and shopping bag icon stand out the most when the background changes from bright to dark. We analyzed those colors in more depth and used them to design the Save and Load icons for the gameplay.
Figure 16: Yellow or golden color palette is the most contrasting during the day and night cycles
Aside from inheriting the color palette from the surrounding elements to ensure consistent look and feel we also used the square shape with a 1px black border (as per design guidelines) to design the Load and Save icons as seen in Figure 17. As a reference we used the GitHub Wiki to ensure we don’t break any design rules. The same frame is used in other elements, such as coin or shopping bag. That way we made sure that the entire Save and Load concept looks consistent.
Figure 17: save and load icons inherit the yellow tones of the surrounding elements and are properly positioned within a 1px frame to ensure consistent look and feel in the gameplay.
In addition, we have successfully implemented the overall look and feel for the save and load icons, however, while doing so we unintentionally made the neighboring icons look different. As a result, the top right corner looked inconsistent. Because they belong to the same group of features that closely resemble each other (same meaning and relation) we had to address this issue. As seen in Figure 19, to achieve harmony in the UI, we redesigned the existing “settings” and “go back” buttons to match the overall design direction.
Figure 19: All icons in the top right corner of the gameplay inherit the same color, shape, and size
Reflection: because a new design style was introduced into the system, we need to inform other team responsible for development of a style guide. As seen in the Figure 19A, the settings and go back button are already defined as a “standard”.
Figure 19A: GitHub Wiki style guide for other designers to derive key facts about UI elements
However, considering that a new Save and Load state has been implemented, we would need to discuss design standards and develop an improved version of the style guide. Later, in the next sprints we could address issues associated with different colors – why do we need a menu that belongs to the same context in different colors? We can also fix random size of icons issue that would fit the established guidelines. Finally, we would need to discuss the overall look, for instance removing the “circle” shape of a “go back” button to match existing “square” style of the UI. All in all the style guide just as the game itself is a live organism and must be constantly updated and improved, this is especially true when a new features are introduced at such an early stage of the game development.