Evaluation
I think the project went very well. I was able to keep the theme consistent throughout the design, and incorporate many design choices from the original game, like how the World Map screen is laid out, and giving the user the option to change Advanced Settings if they want to, conforming to the "simpler is better" ideology. I also successfully used design ideas like Fitts' Law and C.R.A.P. to ensure consistency and usability throughout.
​
However, there are some parts I could certainly have planned and executed better. A big one of these is the map checkbox button, and the way the image gets bigger inside it. A good solution for this is to use a Scale Box and set it to fill vertically, and just set the size of its contents on hover, instead of what I did, where I used a Canvas Panel and just layered all the elements on top of each other in it.
And for some reason I had a second Canvas Panel that served absolutely no use. I cannot explain why I did this. Anyway, a much cleaner and more optimised hierarchy is:
- Button
- Overlay
- Scale Box
- MapImageObj
​
By utilising Overlays, I can align and pad elements a lot easier and quicker than in Canvas Panels, and they have other optimisation benefits also. Using this many Canvas Panels in one button, especially a button that is used as much as this, is not a good way to create it at all. The only advantage a Canvas Panel has over an Overlay is absolute positioning (because of the anchors) and size properties. An Overlay only has Padding, so setting the size of something like an Image needs a Size Box, which is an extra step, but is still better than using this many Canvas Panels.
​
Other elements could be improved also. These include:
-
Combo box (unfocusing when open doesn't play the unhover animation)
-
Slider (unhovering even when currently interacting plays the unhover animation)
​
The combo box could be fixed by changing when the animations are played by overriding the focus functions and playing the animations there. However that would require a bit of a rework in how it works, so I will certainly create it cleanly using that technique in the future, as well as in other elements, using the focus functions a lot more also allow for a lot smoother navigation with a controller, so it's a good idea all round.
The slider can be improved by only playing the animation after checking if the element is in use, and if it's false. But then this would create a bug where if you unhover the element while using it, then stop using it, it won't play the animation, as the requirements have not been met. So another method must be used to circumvent this. A simple check for if the user is not hovering over the element when the mouse is released fixes this, and so then we have a slider without odd looking animations.
​
I intended to work on a time schedule, however I went off it quite a bit. My planning wasn't as thorough as it should've been, so I ended up making things as I went along a lot of the time, which isn't really a bad thing, as long as those things fit with the rest of the UI. Some things didn't fit great however, like the drop downs and sliders, as I decided that that was the style for those on a whim, and so they do look a tad out of place, but it works alright. I finished the whole UI earlier than I expected, as I thought it would take the entire length of the project, but instead I finished multiple weeks before the end, leaving me to ponder this evaluation.
​
In conclusion, I am very happy with how the UI turned out. If I had known about the information stated above before starting the project, I'd say it would be almost perfect.
Target Audiences
I created a list to display which audiences I wish to reach, and will use this list to explain which platforms and how I will use them to reach those audiences to promote and get feedback on my project.
-
Long running Counter-Strike fans​
-
AAA game studios
-
UI and UX designers and programmers alike
Social Media
Firstly, I wanted to promote my work to game studios and professional UI designers and programmers. In order to do this, I researched the different ways that professionals promote their work, and which platforms they use. A big one that stands out for general game design assets is ArtStation. It has portfolio website tools to allow users to customise their portfolios to best display their work and also includes lots of options in how to show your work (i.e., videos, images, GIFs, etc.). This makes it easy to show different screens of UIs through different screenshots, and express functionality through videos or GIFs. Captions can also be added to each element, letting the user briefly describe what the element is, and explain what's happening in it. A big limiting factor with ArtStation however, is that there are limits to how much you can customise your portfolio, how long a video can be, how small an image can be, etc. Due to these limitations, you need to become a pro member to open them up, which is not feasible for me currently, so other sites need to be considered.
​
I used this website from UI Garage to find the most used websites for showcasing UI work, and chose two to analyse below.
​
A big site for UI promotion is Dribbble, another website with a made-up word, but also a website that lets users post their interfaces along with a description describing what it's about, much like ArtStation. A bit difference between ArtStation and Dribbble though is that Dribbble is catered towards User Interfaces, and ArtStation is more of a multi-purpose showcase site. This means that showcasing my interface on Dribbble will attract the attention of UI designers a lot more than ArtStation, and therefore give it more promotion than if it were one ArtStation, as if could be drowned out by the other, non-UI posts. Of course, using as many social media sites as possible to showcase my interface is the best idea, as then I get different people from different places and backgrounds to see it and give feedback on it, and also encourage non-UI designers to give their takes, as those takes will most likely be more of what an average player will say.
​
Behance is more of a graphic design showcase website than specifically a UI one, however this opens me up to the graphic design community, and since UI integrates with graphic design quite a lot, getting those people to view my work and critique it makes a lot of sense, as well as the fact that I'm not as good at the visual design part of UIs as I am at designing the layout and experience. Pointers and tips from professionals on these sites can go a long way, so it's definitely worth it to post it on here too.
The Counter-Strike Community
The best way to interact with the Counter-Strike community is through the r/GlobalOffensive subreddit, and although it's aimed at the CS:GO fanbase, it houses over 1.4 million more members than the r/counterstrike subreddit, which is also a good pick for showcasing my work. I can definitely post my UI on all the Counter-Strike-related subreddits, but Reddit has a feature where you can essentially quote another post on another subreddit, so quoting my own post from another server may be a good method of getting the UI across lots of subreddits without needing to reupload and copy and paste everything each time.
​
There is an r/GlobalOffensive Discord server too, which could also be a good choice for a showcase, however if I'm posting my UI on the subreddit, why would I post it in the Discord server also? Well the main reason would be if the post is either taken down, or doesn't get any attention, which wouldn't be great for a showcase piece of work. So having a backup like this is a good idea for if things go haywire.
​
Other possible places include:
-
The Steam Condition-Zero forums and image sites, letting me show the community directly
-
The CS:GO Steam forums (however this may be a bad idea as Steam forums, especially on large games like this, are known to be a bad place to be in, so it may not be the best idea to post my UI there)
-
Counter-Strike content creators' communities, like Discord servers and the like, as their communities will have a firm understanding of the game and so can provide quality feedback with regards to the game (not only from a UI perspective)
-
Smaller Counter-Strike-related communities, like Recovered Operations, which aims to recreate Condition-Zero in the Source engine, and is where I got some of the feedback on some screens before.
A problem with these lesser-used places (especially places related directly to Condition-Zero) is that not many people use them actively, so getting feedback in a small time-frame just isn't possible, especially with a project like this with strict deadlines.
Professional Portfolios
I researched on ArtStation for professional UI designer portfolios and found a handful:
What all of these have in common with their posts is a main video showcasing the UI, then images showcasing each screen with a short caption of what each one is. Some are more elaborate than others, but the main concept is there. I have screenshots of this project on the Screenshots page and a video above, but considering ArtStation's 60 second limit on their videos (without being a Pro member), I won't be able to fit it into a post, so instead decided to have an external link to Streamable, a video hosting site for occasions like this. It detracts from the overall post, but is worth it to ensure that people can see one continuous video of the UI. The other option is to split it up into smaller videos, but these aren't as useful because the continuity is split and therefore can be harder to follow, especially if the cuts aren't done well.
Andrii Shafetov's posts are very in-depth, and show a clear passion for the UIs he makes, as his presentation is clear and organised, using separate images as headers for sections and including detailed breakdowns of elements and how they were created. I don't have the skills to create such detailed images, and so settled for captions to explain what the screenshots are about. Andrii also links two related posts about the UI, something that I can't do because I don't have any other posts related to my UI. However, showcasing the screens and a video on the animations is enough to get the style and theme of the UI across to the user. Doing something like Andrii has done is more to do with the fun aspect of showing of a design.
Kei Mak
Chris
Kei Mak uses captions to show what's in his screenshots, showcasing some of the Blueprint logic behind the functionality of the UI. Chris doesn't do this as his is a design concept, and so isn't implemented into an engine. He also doesn't use captions under the images, just a description of the post. However, showing my Blueprints can very well help anyone viewing the page as it shows them that I know what I'm doing and I understand why I'm doing it, etc.
​
I created a new ArtStation post for the UI HERE, and now am awaiting people to view it.