I wanted to make the slider intuitive and easy to use. I did a little research and liked the format of the slider in Borderlands 2. It was clean, concise, and smooth. A smooth and natural slider was my main goal. I don't like having to press left or right arrows in order to raise or lower a setting so it's one of the things I wanted to avoid. The rest of this menu will also be smooth as clunky options are my worst enemy.

SLIDER FORMAT
I originally had a problem where the slider wouldn't recognize mouse over. Without mouse over, I couldn't move the Highlight Image. I tried to put a border around it because border's can check Mouse Over. But I didn't like that I needed one for Mouse Over and Mouse Exit. I tried a button behind the slider but that was deselected when you would interact with the slider. I ended up settling with a button over the slider that tells the slider what to do.

LEGIBILITY
The next problem I had was legibility. I didn't like how the previous highlight trailed off and left the slider number alone in the vast white space. So I made a new highlight. This one has clearer edges but I'm still not 100% sold on how it looks. I might go back and revisit it.
​
HIDING THE MOUSE
The last, and most recent, problem I was facing was hiding the mouse when you press down. I wanted the mouse to go away so the slider handle doesn't look so offset. I've been researching high and low but can't find anything on it. It might be a bug or just that I'm still running in editor. Not sure.

The Load Game screen is extremely similar to the New Game screen in implementation but there is a screenshot that is taken to show where the player is in the game. I had to decide what to do with the "empty" slot in the Load Game. I decided to make it non-interactable so the player has no choice/option to use it. This way, I'm preventing the player from making a mistake. When mousing over I think it looks a little weird however. I might take another go at it to lighten the text just because it looks like it might be interaceable.

The format of the "New Game" screen had to be changed a little in order to make it read well. I had to put a title telling the player what to do and a description so the difficulty settings can be named different. This also helps new players understand what is recommended by the developers. The line wasn't originally going to be implemented but I just couldn't get the title to work without it looking like another button. I tried a background, bolding, up the size, italicize but none of it clicked. The title still looked like a button. So I put a line there and I really liked how it looked. I took it off the screen to give it a little "out of the box" flavor and maybe it could animate inwards too. This also helped with the description box to keep it cohesive and readable.

I spent a lot of time fiddling with various ways to implement the Main Menu and I think I found a way that works best for me. I originally started with Unreal's buttons but quickly found that you cannot animate the image of the button without affecting the hitbox itself. So I made the image go behind the button and it moves when you hover over it. It was difficult to figure out especially because you cannot find the viewport position of a button within a vertical box (I ended up changing this on the next screens). This screen is also JUST the buttons. The background and icon are separate (which I will post about later).

Some notes to make:

• The highlight and default colors can be selected outside the blueprint
• This way is not easily scalable. If you want more or less buttons, you have to go in and change the blueprint.
• Functions like UpdateHoverImagePosition and UpdateTextColor are used in other screens as well

The Main Menu is something that is very important to me as a UI Designer. It's what gets the players excited for the game. They see the logo pop up and they immediately want to hit play game. I'm spending a lot of time working out the main menu to make it as smooth and responsive as possible.

I started out by doing some research for various main menus. I looked at how they were laid out and what sort of content they have on them. I found inspiration in games like Tomb Raider and Dishonored but also Call of Duty, Dragon Age, Fallout 4, and Mass Effect.

After doing some research on various Main Menus. I wanted to sketch out a few ideas I had about layout and orientation. Much of these sketches feature the mask as talked about during branding. I ended up liking the Call of Duty layout the best with the symbol in the center and everything pointing at it.

I then took the layout into Adobe XD to get a feel for scale and placement. It ended up looking a little like a face here but that's exactly what I wanted. The large grey box in the center represents the symbol with everything surrounding it. I also realized quickly here that a PC game wouldn't need explicit directions on how to navigate the menu. I might add it in later when I do an accessibility pass but for now it's fine.

Here is a final High-Fidelity version of the Main Menu. This is version 3 or 4 at the moment. Each version I played around with size and placement as the profile name looked a bit out of place on the right side of the screen. I also added splatters to the background to break up the white. These will parallax with movement of the mouse cursor.

The original idea I had for this project would be based around a mask. I thought having a 3D Mask float around the screen would be cool and a little eerie. So, I started out by sketching a bunch of different masks. I wanted it to be a simple oval shape but I wanted the design on the mask to be recognizable and mysterious. Like you don't know what these people are up to.

I then wanted to make a logo with this symbol. I thought a lot about what the title was going to be. I wanted a simple phrase or word that has a powerful meaning. I saw the word oath and glory somewhere and wanted to try to put the symbol into those words. I sketched out multiple different ways to incorporate the symbol into the logo. As a background, as an O, as a divider, and even as a container. I decided I liked using it as an O best. So I took the sketches into Illustrator and made some mockups. I fiddled with them enough to get to a point where I was satisfied with The Oath but Glory needed something. Either another word to go on top or a phrase to go with it. It just wasn't clicking like The Oath did. Using the symbol in The Oath gave it a little darker meaning. What was "The Oath"? Who took it? Why is there an O that kind of looks like it's dripping blood? What it a blood oath? These questions might pop up in your head when reading the title. That is why I chose The Oath. It's mystery, power, and meaning make it a remember-able and remarkable title.

I wanted to take this symbol and logo and grunge it up a bit. I wanted to give it that ancient flavor that I decided to go with for my theme. I started with the symbol. I roughed up the edges in Photoshop and placed it in the logo. This give a cohesion between the symbol and the title. It would look weird if the symbols were different between the 2. I then took "THE  ATH" into Photoshop and roughed it up as well. The lighter spot in the middle was actually an accident but I fell in love with it instantly. It gave the logo a bit of depth and made it look more than just a roughed up word. It then became a logo.