You could check and refer back to our icon design planning layout through the link to our Figma collaborative workspace to view the details… ‣
<aside> 🗝️
</aside>
These drafts are organised into their designated functions as requested on our previous task completed in Semester One. To better reflect on potential adjustments before we digitalise these sketches into vector based designs, small annotations are labelled for suggestions.
<aside> 👑
</aside>
Taking the short-note reflections we annotated on the rough sketches, it further filters down the ones that we see as more suitable and simplistic than others. We decided to develop our GUI from these chosen selections above. The process is completed on Adobe Illustrator, as the software is a professional tool to create graphic and vector designs.
<aside> 🧪
</aside>
From our game proposal, in the UI & UX page section, we mentioned several game references as our initial influences for the overall designs on the user interface and desired user experience to bring. From these examples, our icons hold the characteristics of minimal and simplistic, shaded with a monochrome colour rather than mixed selection to maintain a clean appeal.
The vector icons shown displayed 2 styles that we’re interested in utilising for our designs. We wanted to experiment with either having the icons in solid or gradient colours before deciding on the final conclusion. This task was split into 6 icons that each of us will work on. This will let us create all the necessary icons in a short time and allows us to use our creativity to make the gradient icons since we didn't have a draft for that style beforehand.
Janle is in charge of…
Yao is in charge of…
Glimmering Cove
Ruins
Maroon Woods
Bellbreeze Islet
Collected Key Clues
Clue Found Notification
Settings
Travelled Map
Creatures
Homeland Prairie
Forgotten Past
Structures & Villages
When creating these icons, I made sure to use a square box as my guide so that all my icons would fit into it. I started off with creating the solid colour icon first, as it can act as the base to make the gradient version after. I had the draft as references to create the icons while I made any changes throughout the process that will result in a cleaner and more appealing icon. This resulted in some of the final icons changing dramatically from the initial drafts.
Since the style for the gradient icons on both is different, we took the one that looked visually appealing, and had Janle edit and add to Yao’s icons to match the rest of the gradient style. (shown on the right)
I developed the outlines of these icons by overlapping the rough draft as reference background. A red base colour is used to differentiate the shape form from the reference. This later got changed to black and white to experiment with the preview effects. The icons I managed had quite some amount of overlay. I thought it would be great to utilise transparent strokes, especially visible on the designs for ‘Settings Menu’ and ‘Travelled Map’.
The bottom right icon isn't featured in any of our drafts, but is kept as we both thought it could be a religious icon for added world-building. Similarly, the additional icons on the bottom right for the gradient match one are some icons that can act as an indication of the current weather. The implementation of a weather system is still uncertain, but having icons for it will ensure we are prepared for it.
We made our final choice by picking the gradient version of the icons as they would suit well as corner icons displayed on the overworld HUD as well as on the sketchbook tabs. Some image research on selected gradient icons is conducted, as we are not very knowledgeable about this style during our initial guidance for UI styles within the proposal.
The majority of the reference for the gradient form was largely from ‘Wuthering Waves’ and their skill icons. Janle added shading to any area that were thought to look aesthetically pleasing, and had these motifs on the icons by featuring additional shapes such as stars and circles that are not previously presented in the solid colour version.
List of All Icons
