Bayonetta is the first installment of the Bayonetta series. Produced by PlatinumGames in 2009. This hack-and-slash game follows a witch named Bayonetta as you try to uncover your memory and fight the forces of heaven as they attempt to stop you. As Bayonetta, you have the ability to use various guns, swords, magical hair, and conjured torture devices to defeat your enemies.
Like I said, this is the first installment of the Bayonetta series. PlatinumGames developed a second game which was released in 2014 for the WiiU. In the second game, they seemed to have updated the UI slightly. But for this post, we'll be focusing on the first game's UI. For anyone interested, there's a blog post about Bayonetta 2's UI on the PlatinumGames website written by Hisayoshi Kijima. You can find that [HERE]
There's a couple different styles in Bayonetta. But all styles follow a central theme. Witches and magic. The main menu is meant to feel a bit magical and empty. Having the vast expanse of red as the background or the little runes that fly around. While the inventory is meant to feel like a spellbook with tags that Bayonetta put there to mark important pages. The HUD is meant to have this skeuomorphic feel to it. The halo icon looks like the Halos that you pick up, your health looks like it has weight and is made of metal, and the boss health bar gets increasingly more intricate and fancy as you progress through the game. The layout doesn't have a central location (ie: left bound or centered). But that is not a problem as, due to the nature of the game, it keeps your eyes flowing around the screen so you can make sure to take in every piece of information. This constant movement of your eyes helps the dodge mechanic to shine as looking around the screen you might notice an enemy winding up for an attack that you wouldn't normally notice.
There are many different typofaces showcased in Bayonetta. From the runic A's to the out of place comic-sans-esk type in your tutorial popups. Luckily, there's no large bodies of text in the game unless you want to read about the lore of each monster. But even in these pages, the text is large and have at most 6 words per line. The primary font used in Bayonetta is an old-style font. This font has little half-serifs on the ends of letters and fancy C's and U's. It's clear and readable with a thick outline but keeps to the witch and magical style that Bayonetta strives for.
Bayonetta's color palette is a mixed bag. The primary colors are shades of brown. These can range from the dark brown of the backgrounds to the beige color of the text. Bayonetta's health uses green, probably to reinforce the fact that it's your health. The button indicators are all colors based on their real-world counterparts. The B button is red, Y button is yellow, and thumb stick is grey. The combos on the side of the loading screen are colored based on the button that is correlated to that action. The punch button is yellow (Y) and the kick button is red (B).
Bayonetta does well in the way of UX. The bulk of the problems come from navigating the inventory menu. When you open it, you start by highlighting the weapons menu. You then press B to navigate the tabs. After that you can move to other tabs. If you press B again, you highlight the Exit tab but it doesn't actually exit. You have to then confirm by pressing A. Also, it's sometimes difficult to navigate through the left/right menus on a page like the weapons and relics. I really like the idea of the crafting page. You put ingredients in and then use the thumb stick to create a concoction (in the shape of a lollipop). I like that because it an act of confirmation as well as cohesive to the witch theme (mixing a cauldron). The last note is mainly a PC issue. When exiting the game, you have to return to the main menu, press A through the title screen, scroll down to exit, press A, and confirm. It would've been nicer to skip the title screen but I'll let it slide since the game was originally released for the Xbox 360 and PS3 (which you press the home button to exit).