Inspiration/ResearchI 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. Problems and SolutionsSLIDER 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. Blueprint GalleryThe 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. GalleryThe 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. Blueprints
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). BlueprintsSome notes to make:
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. InspirationI 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. Low-Fidelity WireframingAfter 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. GreyboxI 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. High-Fidelity WireframingHere 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.
I wanted to test my logo and branding skills on this project as well. A main menu and title screen would only look as good as a logo. I'm really proud of what I came up with and hope you like it too. original ideaThe 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. symbolWhile sketching the various masks, I drew one with a circle and point. I immediately liked the simplicity of it. It was harsh and bold while keeping a good silhouette. I continued to draw more and then decided on just using the symbol. I thought that removing the mask would give it more power and meaning. The symbol doesn't need anything to go with it. I made the symbol in Illustrator to see if it looked good with clean edges. I liked it very much and gave it the bright red color to make it even more harsh. logoI 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. grungificationI 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.
Since this is my personal project the theme, logo, and color palette was created completely by me. They are meant in no way to represent any real-world objects, symbols, or ideas. ThemeThe theme I chose for this UI project was a grungy, gritty style with a bit of medieval influence. I wanted the project to be something familiar to most people (Fantasy with dragons and orcs) while doing something different with the color palette and layout. Basically taking a modern spin on fantasy UI. Inspiration for the theme came from video games like inFamous, Dishonored, Dead Island, and Tomb Raider (2016). ColorsColors for this project are black and white with splashes of red. Very much influenced by Mirror's Edge, Assassin's Creed, and some Ghost in the Shell concept art by Ash Thorp. I thought it would be an interesting twist to put such a clean color palette on a theme that would normally be seen as dark and gritty. Below is the color palette I made and below that are some pictures I took influence from. TypographyThe typography used in making this UI is called Caudex. It's an open font I found online. It is considered an old style font and is easily read. There are a few letters that are a bit more extravagant then I would like (the capital Q and W for instance) but all of the other letters are nice. This font is solid in structure while keeping that medieval flavor that I wanted to get with my font. This font style is a bit out of my comfort zone since a lot of my graphic design work involves sans serif fonts.
|