UI Designs
With my 'style' planned out, I have something to work with and continue on. From here on out, I'll be creating the other widgets in the same style as the one I just mentioned. So, this is what I've ended up with - I've been looking at the references in my last post a lot and keeping their designs in mind, while also trying to go with my own vision.
The finished Minimap:
There is a specific reason for some of the design choices here - first, the arrow is common with minimaps or compasses to represent north. The gaps in the circle, however, were directly inspired by the minimap of Elite: Dangerous, which also has gaps in the border.
The next part, I'd like to explain in more detail. Specifically, I'm now reworking the 'mech status' section of the UI. To begin with, I've grabbed a render of my 3D mech model I made when I initially started this project. This allows me to use it as a basis for creating the visual representation of the player. I used photoshop's path tool to create and mirror a copy of the mech, creating the below image.
The basis for the UI is there! However, there are some tweaks I'd like to make - specifically with the side bars. While I like the design in general, I feel that it conflicts with what I ended up for the other designs. So, I'd like to tweak that a little bit by perhaps thinning and simplifying the design. As much as I enjoy the accents, it diversifies from the main UI elements too much.
With this, we're done! Right? No. I'd like to add some extra details and decorations. I feel that some circular elements would bring the interface together and give the player a better feeling of being in a mecha environment. However, I feel some additional things can probably be added as well, which I may experiment with afterwards. However, until then, this is what I have created.
While the larger circles be invasive, the outer, static circle is at the very edge of my vision in-game. The inner circle, however, would be about the size of a 14 inch pizza 15-20 centimetres away from your eyes. Yes, that is a strange way of describing it, but it's the best I can think of. Now, there's one more element, that is going to require a lot more behind the scenes work to get working correctly, but is vitally important to the game - the targeting system!
The finished Minimap:
There is a specific reason for some of the design choices here - first, the arrow is common with minimaps or compasses to represent north. The gaps in the circle, however, were directly inspired by the minimap of Elite: Dangerous, which also has gaps in the border.
The next part, I'd like to explain in more detail. Specifically, I'm now reworking the 'mech status' section of the UI. To begin with, I've grabbed a render of my 3D mech model I made when I initially started this project. This allows me to use it as a basis for creating the visual representation of the player. I used photoshop's path tool to create and mirror a copy of the mech, creating the below image.
There was one final asset to create - the ability cooldowns. The thing is with this, I have no abilities to speak of. Just the screen space for it. Because of that, I'm not going to create specific designs, but instead create the screen space for it. With everything in place now, this is what I've ended up with it.
The basis for the UI is there! However, there are some tweaks I'd like to make - specifically with the side bars. While I like the design in general, I feel that it conflicts with what I ended up for the other designs. So, I'd like to tweak that a little bit by perhaps thinning and simplifying the design. As much as I enjoy the accents, it diversifies from the main UI elements too much.
With this, we're done! Right? No. I'd like to add some extra details and decorations. I feel that some circular elements would bring the interface together and give the player a better feeling of being in a mecha environment. However, I feel some additional things can probably be added as well, which I may experiment with afterwards. However, until then, this is what I have created.
While the larger circles be invasive, the outer, static circle is at the very edge of my vision in-game. The inner circle, however, would be about the size of a 14 inch pizza 15-20 centimetres away from your eyes. Yes, that is a strange way of describing it, but it's the best I can think of. Now, there's one more element, that is going to require a lot more behind the scenes work to get working correctly, but is vitally important to the game - the targeting system!





Comments
Post a Comment