Good Design, Bad Design Vol. 3 – Amazing and Awful Video Game Graphic Design ~ Design Doc
Articles Blog

Good Design, Bad Design Vol. 3 – Amazing and Awful Video Game Graphic Design ~ Design Doc

August 26, 2019

Hey! We’re launching a Patreon! If you would like to help support the channel,
there’s a link in the description below and at the end of the video. Thank you to all our Patreon supporters. [Music from Sonic Mania] Welcome to the 3rd Edition of Good Design
Bad Design, where we look at how games approach UI, UX, and graphic design. Things like menus, UI, camera work, color
choice, font choice, animation, character design, the presentation of information. While graphic design and art are tied to each
other, a great artist isn’t necessarily a great graphic designer. Beautiful games can still have graphic design
elements that are cumbersome, ugly, or simply incohesive with their respective games. Great graphic design and presentation is almost
never the most important part of a game’s success but it can be the little extra thing
that pushes a 9 to a 10. Oh, and one more thing before we start: these
examples aren’t necessarily paired up, but there are a few parallels you can spot. Let’s get to it! Good Design [Music from Persona 5] It’s time. Persona 5’s incredible UI is the inspiration
for this series, so it deserves its own segment. Persona 5’s UI is an excellent mix of style
and functionality. It isn’t necessarily a reinvention of anything,
instead it’s a stylish refinement of the same sort of menu systems used in other games. But the work done is SO good, it elevates
a very good JRPG into something astounding. When there are people cosplaying as your menus,
you’ve done something right. P5’s UI stands out partially because of
how well it’s tied to the game’s major themes. P5 is about thieves, will-power and rebellion. It’s full of visual motifs to match those
themes – the ransom lettering used in the main menu headers, graffiti, CG animations
of Joker swinging around between menus, and aggressive motion graphics with tons of thick
and angular shapes. The menu layouts creatively break many conventional
graphic design rules without looking ugly or compromising functionality. Individual words and letters in the headers
and subheaders of the type are ‘cohesively incohesive’ in design with a varying baseline,
type size, and deliberate misalignments. Breaking typographic rules like this can be
really easy to mess up but Masayoshi Sutou, his team and the localization team pull it
off seamlessly. The combat UI is stylish too, and it makes
the combat more engrossing. Every option in P5 can be reached by a single
button, which lets battles flow smoothly – much better than most traditional JRPG menus where
you’re scrolling and picking everything. The countless motion graphic and character
animations that play as you go through your options makes selecting your next move feel
more visceral and satisfying. The offset red silhouette that surrounds your
characters is a brilliant way to highlight your character and connect it with the framing
of the battle UI. Even if the novelty of these animations wears
off, the spectacle doesn’t get in the way, distract or slow down the action. P5’s design is both high quality and high
quantity. It goes above and beyond what it had to do. While not every game should be this upfront
with its UI, Persona 5’s graphic design is a selling point and the game wouldn’t be
as memorable without it. Bad Design There was a time that I felt that Sonic Chronicles
was a good game. I no longer feel that Sonic Chronicles is
a good game. It’s a barely passable intro to JRPGs, but
really it’s a boring slog. But we’re not here for a full on review,
I just want to dunk on the presentation. Because it’s unfinished. The hand drawn environments are nicely rendered
but they feel SO BAD to explore. They make the rough 3D models on top of them
look way worse. These bad flash animation motion comic cutscenes. Some character portraits seem like they were
designed for a different game. The portrait outlines are inconsistent with
some portraits randomly using a different outline color or just straight up not having
one. The game is built for touch screens, but the
buttons are tiny for some reason. Special moves use action commands that are
basically a poor man’s Elite Beat Agents. There’s no ‘juiciness’ to the execution either,
which makes them unsatisfying to hit on time. THESE EYES? THESE EYES!? What’s with these eyes? The presentation’s ROUGH. Yes the game’s on the DS, but that doesn’t
mean it can’t be better. Hotel Dusk, The World Ends with You, Feel
The Magic, Elite Beat Agents. These games have solid presentations despite
the limitations. Well at least Sonic Chronicles looks the way
it sounds. *dissonant audio* Good Design As much as I like the flash of P5, I also
love minimalistic UI design. The more a game can strip away, the easier
it can be to focus on what matters. If the game is still great and easy to understand
when there’s nothing left to cut, you know it’s built on a fantastic foundation. Mini Metro is a game born from minimalism. In Mini Metro, you manage a series of metro
stations through an interface inspired by Harry Beck’s London Underground Tube Map. You route out a number of colored transit
lines across stations represented by basic shapes. These stations will slowly appear over time
as either triangles, squares or circles or rare stations with unusual shapes like crosses,
stars, or wedges. As time ticks away, customers appear as tiny
shapes, and try to travel to their matching station through your train lines. Leave too many people waiting for a train,
and it’s game over. The challenge of Mini Metro is keeping your
transit lines running efficiently for as long as possible with the limited amount of trains,
transit lines, and tunnels you have to work with. Mini Metro is brilliant at conveying a lot
of information in a chaotic, time sensitive game, while keeping a minimalistic design. Key information is easy to spot yet subtle
like how the game displays the overcrowding mechanic. A misaligned customer represents the station’s
capacity limit. Any extra shapes will impatiently bounce around
as a radial time limit starts to fill up. The music is soft ambient tones and very subtle
alert sounds that warn without distracting. The iconography and typography here are as
clean as it gets and the framing always flows smoothly. The game never once cuts between the menus
and gameplay, instead it uses an assortment of pans, blurs, and zooms for its transitions. There aren’t any jarring scene changes within
the game either. There’s a constant, barely noticeable zoom
out as you play, slowly revealing more and more of the map where new stations may appear. Without noticing it, the tiny corner you started
in slowly evolves into a vast network. Mini Metro’s UI needs to be simple so things
don’t become too overwhelming as it gets more hectic as you gain new train lines and
stations. Its beautiful and recognizable aesthetic helps
players focus on what matters. It’s a high speed management based puzzle
game stripped down to its essential core. Bad Design Functional UI is important, but it’s really
a bare minimum. Better are cohesive UIs, ones that feel like
they belong only in THEIR game. Mortal Kombat X is totally solid as a game,
but its interface doesn’t match with its identity. In their recent games, Netherrealm Studios
uses a minimalist design. It’s full of elegant white graphics and
serif typefaces to create a clean and sleek design and it’s not BAD. It’s not a fundamentals problem, just a
stylistic one. The HUD during fights functions well and keeps
things focused on the action. But for a game whose brand is over the top
violence a reserved UI comes across as a little bland and is a mismatch in the context of
Mortal Kombat. It saps the game’s adrenaline a little bit,
both for players and for people watching at home. The character select menu has two rows of
portraits where everyone looks straight at the camera with a default facial expression. It says ‘School Picture Day’, not ‘Death
Tournament’. No special framing, no visual motif, just
character models showing up top. The main menu is functional, but looks like
two ideas were merged – one based around panels and another based around a simple column of
options. Like they couldn’t decide on one so they
used both. The panels show the Faction War mode, DLC,
and the Living Towers mode, with the DLC store front row center. Gross. Especially if you’ve just bought the game. It’s weird that the other two panel options
have their own spot, Faction War and Living Towers feel like they’d belong in other
submenus. But then the DLC store would be on its own. Maybe that’s worse. Some of the menu options are hard to read
as the white serif type treatments blend into the background, even with the dark gradient. There are other problems with the typeface
like in the Fighter Card menu which houses one of my typographic pet peeves: dark text
on a dark background. DUN DUN DUUUN …don’t do this…just don’t…it
doesn’t read well. These are minor issues, definitely not deal
breakers, but they do add up. Minimalism can be a great design tool but
in this case it just doesn’t mesh with what MK represents. MK9 does this a million times better. YEAH GET SOME! Good Design Nier Automata might have the strongest implementation
of diegetic UI I’ve ever seen. It’s not just that it’s a part of the game
world. The UI is weaved into Nier’s narrative and
elevates the experience to something that could only be told effectively as a GAME. Designed by Platinum’s Hisayoshi Kijima
under Yoko Taro’s direction, Automata’s UI on its surface is put together quite well. Both the main menu and the in-game UI use a
monochromatic beige color scheme that contrasts well against the browns and greys of most
of NieR’s environments. This color palette is a key part of Automata’s
visual identity and matches tonally with the game and its characters, the emotionally suppressive
YoRHa units The layout and type treatment are cold and
systematic, but the beige colors make the UI surprisingly warm to look at. An additional red-orange highlights either
critical information like new menu items or various threats like damage within the life
bar. This color scheme also matches the hacking
minigame to, as Kijima states in his developers blog, “give the game a unified visual identity”. The color scheme created some design challenges
– the use of other colors was very restricted. In order to convey information like stat changes
within weapons, Kijima had to rely on other things like transparency and thickness in
the type. Small touches like a transparent grid texture
and shading near the edges go a long way to make the menu feel less abstract and more
physical. The UI is very solid, but that’s not the amazing
part. NieR Automata is one of the few games that
use UI as a core storytelling component. The menu isn’t just an abstract interface
that’s exclusively there for the player. It is the literal OS for YOUR characters,
2B and 9S. Your settings, equipment, abilities, datalog,
and more are tied to how your characters function in universe, not as a breaking of the 4th
wall. 9S: ‘Ma’am? Are you there? Can you hear me? Uh, helloooo? Go ahead and adjust your settings so you can hear me, all right?’ My favorite part of NieR’s diegetic approach
is just how customizable it is. Every UI element is treated as a “chip”. Similar to the AP system in Kingdom Hearts,
the player is given a limited amount of space for equipping color coded chips that grant
abilities, boost stats, or more uniquely, display UI elements. Health bars, experience bars, minimaps, markers,
cooldown indicators, enemy health and level displays? Each of these can be toggled at the player’s
preference. Giving up these UI elements to open up space
for other chips gives Automata an unusual avenue to play with risk vs reward. It also ties the UI to the world and bridges
the gap between the player and the character. When characters are hurt or hit with an EMP
blast, their health bars freak out, enemies get mosaic’d out, visual filters are applied
to overwhelm and confuse your senses. Some status effects disable your UI’s functionality. NieR’s UI goes beyond just being a useful
interface and is used to great effect in its narrative. And without spoiling anything, it adds an
extra punch to key moments that couldn’t have been done in any other type of media. NieR shows just how much untapped potential
there is in the interaction between storytelling and UI. Bad Design Fable 3 is…ambitious? Let’s go with ambitious. It’s a Peter Molyneux game, so it comes with
the territory, but it’s especially true with Fable 3’s menu design. Unlike its predecessors, Fable 3’s interface
is diegetic. There isn’t a traditional menu for managing
your character and inventory, not even a simple pause menu (save for story events). Instead when you hit the start button, your
character is magically teleported to a small in-universe hub area, the Sanctuary. This is where all inventory management is
handled and it feels pointless and terrible. The Sanctuary is unnecessary and breaks the
game’s flow. Having to walk around a hub for item management
accomplishes nothing that a traditional menu couldn’t have done more effectively. It doesn’t make the game more immersive
either. It’s jarring to have this weird pocket dimension
that you can just teleport to at any time. Some games, like a lot of Zeldas, handle in-universe
menus just fine. But you don’t usually see it for a MAIN menu. The main menu is just used too frequently,
so this approach then turns the menu from something quirky to something tedious. It’s an extra step that could’ve been
resolved with a normal menu, like in Fable 2. Now don’t get me wrong, Fable 2’s menu
is no prize either but at least you could still navigate it! Some of the better diegetic menus like NieR
or Dead Space still work as more traditional menus. Fable 3 tried to be cute and took the idea
a bit too far and because of their effort, you can now get trapped in the pause menu. The sanctuary isn’t the only problem – Fable
3’s UI is bad across the board. There’s no simple mini map to help get your
bearings. The infamous sparkling trail only works SOME
of the time. The shop menus are ugly with awkward empty
space and poorly displayed items. Most interactions require you to hold the
input which both feels and looks clunky. The minigames… Pie Maker: ‘You’ll have to pay for that.’ And the Road to Rule is an overly elaborate
skill tree that wastes your time by having you run across and slowly open chests for
perks. Fable 3’s UI IS an ambitious concept but,
it’s fundamentally flawed and is only made worse by a poor execution. Where NieR Automata’s diegetic interface
is deeply tied to its core and greatly enhances both the game and story, Fable 3’s sanctuary
is clunky and ultimately adds nothing. It seems as if it was made just for the sake
of it, and while it’s admirable to try something new, the most succe ssful new ideas are not
only ambitious, but purposeful. Aim for both. [Chill vibes outro music from NieR: Automata]

Only registered users can comment.

  1. This is everything I could have wanted! A channel about Game UI Design! , as soon as I can I am donating to this patreon !!

  2. Love your channel, and I was wondering what you guys think of the Metro series and its graphic design. Specifically, how it changes between the Standard mode and Ranger mode.

  3. Another problem with the minimalistic interface of the Mortal Combat game seems to be, that the life bars are so small, they almost look like a small menu decoration. When having to concentrate on your fight, you probably cannot look at your life bar, which is too far away, too thin and too pale to see it without focusing it.

  4. This was in my recommendation but I’m glad I saw this Chanel!!! This will help me learn about designs since I’m currently majoring in graphic design.

  5. I love the UI and world design of Yoshi's Woolly World, for much the same reason as why you liked Brütal Legend's design in the first video. The gameplay mechanics aren't much different from other Yoshi titles, but the "woolly" hand-crafted theme is just so all-encompasing throughout the game. Environments, platforms, enemies, and Yoshi himself look like they were crocheted out of yarn. Coins are replaced with colorful beads. And every cloud, puff of smoke and lava plume is animated with colored cotton fluff. The theming even carries over to menu design. The title screen when you first boot up the game looks like it was hand-embroidered, and the pause menu is a square of denim, with your various "continue", "quit", etc. buttons written on little felt patches that were stitched on.

  6. Can you do SMITE’s design for the next episode? You don’t have to review the Main menu, but the from what you showed so far, the in-game design you showed in pt.2 of this series was talked over w/ the chaotic tone from your script. This really intrigues me, so can you do that next?

  7. System Shock 2 did the "menu as physical space" thing too, in its prelude. First you walk through part of a city to get to the tutorial rooms, and then you go through a series of rooms that each have three doorways at the end to choose aspects of your character build, each of which is followed by a generic pre-rendered (but just as cheap-looking) cutscene of a generic spaceship taking off.

    None of it was in any way necessary, and because they weren't going to bother modeling and animating NPCs just to populate a space that wasn't part of the game proper, it gave the impression that we were the last living human on earth or something. Other than the tutorial rooms themselves, the whole thing could have been folded into a traditional character creation menu. My best guess is that they were trying to give you some sense of having a life before the plot kicks off, like Fallout 3 did with Vault 101, but without any budget.

  8. gently slapping two-way mirror glass like jake in brooklyn 99: compare the original crash games against the n sane trilogy,, compaRE original crash games againST THE N SANE TRILOGy…. I really like what you do and I love this series!! I could yell about the graphic design in the old vs new crash for hours

  9. Perhaps I’m biased because I played Fable 3 when I was younger but I can’t really agree with you about the Sanctuary, I personally enjoyed it. There’s one part later in the game’s story where I got freaked out and I attempted to escape to the Sanctuary only to find that it was also morphed into something dark and creepy. Now that I look back on that experience I felt it was a cool detail in storytelling. Showed that even the Sanctuary couldn’t protect you from the evil that was to come. I also wasn’t really bothered by the mini games and I never got any bugs such as getting stuck in the Sanctuary but I guess I was lucky.

  10. If you need more examples of commands and text steal the screen play a strategy game by western developers.

  11. I can't help watch this and get PTSD from Fable 3's horrid UI. Why someone thought getting rid of menus, but actually having them still be in the game just in a hub you have to load into every single time you press the pause button and then walk around in to navigate and turn a quick and easy time in a menu to one of the most tedious experiences in a video game is a good idea, I'll never know.

    Edit: I posted this before I watched the video. I'm very pleased.

  12. If i were a competitive player of MK, I might be happy with the UI not being stylized TBH.

    I don't play it though, so I'm not gonna make any claims.

  13. I'm glad MKX was called into question about it's clashing identities because I never expected such a clean sleek look of text above someone's mangled face in a fatality screen. It was better suited for the Injustice games. I honestly missed the green health and red damage bars.

    Then again, horror had a weird phase of visual minimalism with some grit in their layouts as of late.

  14. An idea I had for how to use the idea of the Fable 3 menu is to put it in a sort of heist game. Whenever you press the select button, it's a flashback to the planning stages of the heist. You can talk with your co-conspiritors for hints, look at the blueprint of the place as the overhead map, choose to bring one thing or another to set-up inventory. Even then, it couldn't work as the actual main menu.

  15. I've never played a Sonic game even though the series was big when I was young. I just hated how it looked even as a kid. Everything looks just wrong, watching at a Sonic game makes me puke.

  16. It just occurred to me what the Persona 5 font reminds me of: notes of cut-and-paste letters. You know in cartoons when someone makes a threatening notes and uses letters cut out from magazines to hide their handwriting? It's like that.

  17. Do you make the voice overs for super smash Brothers? When you say 'good design' and 'bad design' you sound like the guy who calls out the fighters 😂

  18. 5:08

    You want good audio design, too? When the first note rung out after your transition, I immediately knew it was FTL: Faster than Light's theme. Unique audio cues do a lot to make actions have more weight and can add to the overall identity of a game

  19. Persona 5's UI is so good that Sakurai kept fanboying over it so many times and wouldn't shut up about it during the joker for smash interview. Lol

  20. Hey, i'm a graphic designer and i was really into game design (but still not working there … Dammit) but i want to thank you for showing all of this series because its really open my eyes and i think i will have a lot of good design material. Once again, thank you so much 🙂

  21. The only problem I have with Persona 5's UI is that it's so pretty that I have to look at every little detail before I want to carry on with the game.

  22. The Fable 3 example reminds me of this obscure SNES RPG called Terranigma. It has a pocket dimension design in its main menu complete with rooms as menus, but it's not quite as tedious since you still navigate it with a cursor. I found it very creative at the time and still kinda like it, but it totally compromised functionality and didn't benefit much from the design choice.

  23. I guess in design its sometimes about guessing how complex UI can you as an individual designer take – too much complexity and you can screw up.

  24. Sakurai even openly stated that Persona 5 inspired some of the UI design choices in smash brothers ultmate. (Side fun fact: Not only is joker going to be kn smash soon but Joker's voice actor is also the smash ultimate-and smash 4- announcer.)

  25. ugh.. prsonas ui is.. ugh,like holy shit horrible overload.. also, lol, hollowshit, what's a theme worth if the pseudo rebellious kids are basically the default anyways lol

    mortal combat.. mate thats a competitive game having a overdon UI, exotic fonts makes it harder to read for people, and in a comp game you dont want someone handicapped because they cant read the fucking ui because its so inconsistent and maybe the one fighting person doesn't have the best eyesight but like that the game gives audible pulsing sound, for example so you dont need it, but like it can be utterly distracting..
    I wont play persona because that fucking ui makes me aggressive.. (its weird inconsistency with what it states it wants to say and what it actually says is another point, my eyes finished rolling after fallout did that, I need that strain to go away first and having the game comment on how fucking fuckable sexy ann is after that first dungeon now makes me puke a bit in my mouth lol

  26. Shame P5's aesthetic was wasted on a sub-par Persona game. Hopefully they can do something GOOD with the next Persona game. The game's aesthetic and some of the gameplay is great.

    Just a shame it's Persona 3 with worse characters.

  27. You had me until your opinions about Mortal Kombat. Those font choices are perfect. They're modern, understated, and functional. This is a case where a designer NEEDED to choose function over dogmatic (or vain) adherence to motif and/or style. Otherwise, while being aesthetically more on par, the game play would likely have suffered. By definition that would have been a BAD design decision. The crispness of the font choices makes then entire UI look fresher. They needed that feeling to assist them as they refresh the brand, as well.

    In this case "less is more" rings true.

  28. I was watching volume 1 and thinking "wonder what he'd think of automata's ui"

    then right there in the suggestions, smiling emil head

  29. Thank you so much for mentioning the Fable menus! I was in love with Fable II but the very first time I opened up Fable III I knew that menu was going to drive me crazy. And it did! Still to this day I have not finished that game and instead watched a playthrough online

  30. To me Persona 5 UI seems like a terrible mess at a glance. Cannot find any useful information. Too much contrast and sharp graphics. Maybe it gets better when you stare at it for a few hours.

  31. As a graphic designer and hobbyist game developer, I am really enjoying this series! I especially like the call out of Fable 3's menu for being tedious. One core tenet I stick to religiously as a game developer is to minimize tedium. So many games (even AAA titles) just force players to trudge through so much tedium that it ruins the games for me. It's a great disrespect to a player's time to drag out the least interesting parts of the experience.

  32. I saw "what remains if edith finch" in the beginning, but now that i watched the video entirely,
    i felt click baited ;-;

  33. I know Sonic Chronicles is bad, but I'd be lying if I said I don't love the game to death. That game is my childhood. I've sunk so many hours into it, it's insane.
    I thought the game looked really cool as a kid, and I still really like some aspects of the game's aesthetic, but yeah. It's pretty terrible.

  34. I'd like to mention the usage of the pause menu in Megaman Zero 1 to 2. In Megaman zero 1, you have a very basic menu, charming, but basic, and you'd never think that this menu could be a part of narrative. Fast forward a bit to Megaman Zero 2, without spoiling much of the story, Zero ends up wandering through a desert for 2 years, so he is in pretty bad shape. The game tries to convey this in many manners, either through Zero hunching over and holding his arm or in the intro cutscene. But the best way the game managed to show the player Zero's decay was in the pause menu. If you happen to pause the game, you'll be greeted with the same menu from MMZ1, but now it's all beat up, full of sand, and even cracked and unfunctional in some parts. Seeing NieR Automata's design reminded me of it, and i still think it's one the most genius usage of menus to this day.

  35. Despite Fable 3 being unnecessary, Terranigma used to do that pretty fine 🙂 I wonder what could be the difference

  36. Great video!
    I almost cried when I saw hotel dusk… not so many people know that wonderful title (last window too)

  37. It's not enough to detract from the overall appeal of the UI, but one flaw of the P5 design that really stood out to me was the font the P5 localization team chose for their main text (e.g. dialogue)
    Not sure if I can explain it clearly, but the Japanese font for example has its stroke/line thickness be ever so slightly uneven in places, and the ends and corners are all rounded off, giving the text a very informal and subtle urban look befitting to its themes. The English font seems too clean in comparison.

  38. I am so glad someone else took these gripes with MK's ui. it always bothered me but i couldn't precisely put my finger on why, i just knew there was something wrong with it.

  39. Persona 5 really have their spirit of rebellion to the T! even their menus break the rules for a good cause!

  40. It seems hard to pull off what Persona 5 pulled off ("breaking conventional UI design rules without looking ugly"). Do you think you could give some kind of tutorial on how to do what they did?

  41. You're getting game design decisions and "graphic design" mixed up in the fable section with the sancruary stuff. Maybe also use less of a vague term than "graphic design" next time. You're mainly covering UI graphics in this video, which is just a part of it.

  42. 7:38 One of the most disppointing UI/Menu design for me was the CTR nitro fueled one. The menus are just so NOT crash bandicoot…

Leave a Reply

Your email address will not be published. Required fields are marked *