UI Design - A Breakdown - Fallout 3/Fallout: New Vegas
Created: Thursday, 28-Sep-17 12:39:57 UTC
Recently I’ve been getting really into UI Design and I’ve always wondered what’s the best way to put together a portfolio of UI design without making small prototypes that don’t really do anything (maybe that is the best way, but it also does feel like there’s no point to the prototype if it’s only there for super basic gameplay functions).
One way I decided to do this is by creating a blog post or a series of blog posts of UI I’ve made and UI I enjoy in games that breaks down what I like/dislike about the UI.
I’ve always found that when making games I’ve always enjoyed creating and programming UI/UX, even if I’m not the best artist in the world.
Fallout 3 (Bethesda Game Studios, 2008) & Fallout: New Vegas (Obsidian Entertainment, 2010)
UI for Fallout 3 and Fallout: New Vegas are pretty much the exact same.
The HUD UI is designed to appear like the handheld computer that serves as the primary UI for the games inventory, stats, radio, etc, In the bottom left you have health and a compass that shows your direction as well as nearby points of interest nearby (Red markers are enemies, tiny green arrows are points of interest, like dungeons and settlements). In the bottom right you have Action Points (AP), the condition of your weapon and your clip and total ammo for your current gun.
The HUD stays for the entirety of the game, however there are several mods which allow the elements of the UI to disappear when not needed, such as when you are out of combat, or your gun is holstered. This was added into the default version of Fallout 4 (released in 2015 by Bethesda Game Studios). I prefer this mod for the fact it makes the game more immersive and allows for users on all platforms to be able to take beautiful screenshots without the use of cheat codes. I’m also a big fan of minimalist HUDs when it comes to massive RPGs so not having the UI constantly in your face is a bonus for me.
The Inventory UI is the handheld computer talked about earlier. As the game has a retro-futuristic 50′s aesthetic, this handheld computer (referred to as a PipBoy) has the appearance of a 1950′s esque computer terminal that is carried around on your wrist.
From here, your usual RPG elements can be accessed, plus it pauses the game temporarily. You have three tabs (Stats, Items and Data) and each of these tabs then has multiple tabs. Stats includes information on your perks, gameplay stats such as quests completed as well as other stats such as HP, Level and XP. The Items tab breaks your inventory into certain categories such as Aid, Weapons and Ammo, while Data contains your map as well as in game radios and notes that can be read anywhere without taking up inventory weight.
I personally prefer the UI design of the Pipboy from the original Fallout released in 1997. It feels clunkier and more like an old piece of technology that is around 200 years old (the game takes place roughly 200 years after the nuclear war), however the games did take a noticeable aesthetic shift when Bethesda obtained the license in 2004.
I do really like the main menu for the Bethesda fallout games. I feel it sets the tone for their Fallout games as it has fish eye lense photos that make it appear it isn’t occurring on a flatscreen monitor but on an old curved monitor, and for Fallout 3 it includes images of newspapers that give new players unfamiliar with the franchise the major events that led up to the great war, which acts as the setting for the Fallout world.
This aesthetic is included in the Options/Pause menu, a dirty fish eye lens is applied to the players view, although this does the game a weird feel in my opinion.
The addition of a “Curved CRT Monitor” makes the game less immersive and more like we’re watching a TV Show or Movie. Then again this aesthetic is continued in the games start/ending slideshow, which have the appearance of slides on an old projector.
The colour palette for the UI is by default Green for Fallout 3, which takes in place in Washington DC and the entire game generally has a green tint, while Fallout: New Vegas in the Mojave Desert surrounding Las Vegas, Nevada. As a result the UI for FNV is a dark orange in colour.
The colour of the actual text can be changed in the options menu, however to my knowledge this does not affect the tilt of the fish eye lens, only the colour of the text.
I struggled quite hard to find the name of the font used but the ingame UI font appears to be Monofonto by Typodermic fonts. This font also seems to have extended to use in the PipBoy in Fallout 4, however I couldn’t find a name of the Options Font.
I personally feel like the UI for Fallout 3 and Fallout: New Vegas fit the theme well, but there are improvements that could be made, most of which were done for Fallout 4. Although visibly showing its age, it’s a good UI and I feel a lot can be learnt from it.
Tags: Post-Mortem, UI-Breakdown