Good Design, Bad Design – The Best & Worst of Graphic Design in Games ~ Design Doc

July 31, 2019 posted by


So, last month Persona 5 pretty much consumed
my life, and if I had just one takeaway, it would be that it has the SLICKEST UI I’VE
EVER SEEN! *Persona 5 music* MY GOD! IT’S SO DYNAMIC! SO SMOOTH! SO STYLISH! IT’S GORGEOUS! THE CHARACTER IS JUST RUNNING THROUGH THE
VICTORY SCREEN! THAT IS SO COOL! Sorry. So in honor of Persona 5, I just wanna talk
about some graphic design. To put it broadly, Graphic Design is visual
communication. Applied to games it’s your menus, UI, camera
work, color choice, font choice, animation, character design, your presentation of information. There is a lot of overlap between graphic
design and art but graphic design is about more than aesthetics. Good graphic design in a game is like a good
translator where it seamlessly and stylishly communicates to its players and makes immersing
yourself in a game a little bit easier. Bad graphic design is like a bad translation
– an obstacle, making it more of a chore to get into and taking some of the shine off
a game. I’m going to highlight some great and..
well.. terrible graphic design in games. But before we dive in, here are some rules: These examples are chosen based on a combination
of style and practicality in their design. These aren’t ranked since trying to decide
what is “THE BEST GRAPHIC DESIGN” is… well impossible… (unless it’s Persona 5)… If there is an example that you are fond of
that doesn’t make it here, post it in the comments. I’ll probably do another one of these so
it may show up there. Anyway, first up – a masterclass in communicating
game mechanics through visuals. Good Design *Mark of the Ninja music* One of the biggest challenges in many stealth
games is a lack of clarity. Too often whether you can be seen or heard
by an enemy is a mystery. It can lead to some frustrating trial and
error gameplay. A good stealth game is like a good puzzle
game – they work best when you can see all the pieces in front of you, just waiting to
be solved. Mark of the Ninja is a game with some very
intuitive UI and visual cues to tell the player everything they need to know so they can confidently
plan out their moves. In Mark of the Ninja, visibility is treated
as a binary system. You are either hidden in shadow or exposed
in light. Characters and objects in shadow are nicely
defined by white outlines and are fully colored when they’re in the light. Even your own visibility is smartly indicated
by subtle changes in lighting and blurring effects. Any area blocked by a wall is darker until
it’s within the player’s point of view. Any rooms that you are adjacent to are blurred
and clear up as you peek through vents and doors. Sound in Mark of the Ninja is just as clear-cut. As you make noise, the range of each sound
is represented by a ring. The ring’s size is dependant on the sound
itself, running will produce medium-sized rings, and louder actions like breaking objects
will make larger rings. Every one of your tools is laid out in your
HUD. They are also conveyed through icons on objects
in the environment like bells or pots. These help make your tools easy to use which
lets you focus on solving the puzzle, rather than being caught up in the game’s mechanics. It may not make the game more immersive or
even that much more stylish but Mark of the Ninja’s UI is super practical and makes
playing the game feel like second nature. Bad Design *Super Smash Bros music* Now bad graphic design doesn’t make a bad
game. Smash 4 is great but the menus? Eh… not so much. Smash 4’s main menu represents the thin
line between success and failure in graphic design. On first glance, it looks fine, like a more
colorful version of the menus from Super Smash Bros Brawl, but as you start clicking around
you’ll notice a problem. The organization of the menu is strange, which
makes navigating the menus feel clunky. The menu elements have an inconsistent look
and aside from the giant SMASH button, there’s a serious lack of visual hierarchy. The objects in the menu aren’t arranged by
their importance. The Multiplayer is the most prominent option
here as it should be but the other options are all fighting for your attention. The biggest
offender in Smash 4’s menu is riiiiiight HERE! “GAMES AND MORE” That’s the vaguest title
ever. That’s like naming the button. ‘Here’s some more stuff, I dunno.’ Now Brawl and Melee had their priorities straight. You had Single Player, VS, Online, Vault,
Options, and Data. There you go, The essential categories are
nice and organized. But in Smash 4, Single Player, Vault, and
Options are all shoved into “Games & More” Other menu items are thrown around at random. Why is Trophy Rush, a single player minigame,
not in the Stadium option with the other minigames? Why is Challenges not placed in Vault or Single
Player? Why do custom moves have to be set in a separate
menu and not just on the character select screen? WHY IS SMASH TOUR ANYWHERE?!? Smash 4’s UI issues don’t stop there. The UI in Smash Tour is chaotic and overly
flashy to the point that it makes the game harder to play. Smash 4’s sloppy design is especially strange
– the designer worked on Kirby’s Air Ride and the last two Smash Brothers games, none
of which have these problems. But with the way the menu is now it makes
finding stuff a total pain, until you just memorize it. Good Design *Brutal Legend music* Brutal Legend is a game I DESPERATELY
want to love… but I only like. It’s one of those games that seems to be
going one way, but then it becomes something else entirely and it’s just kind of ehh. Despite that, Brutal Legend has 3 really cool
things going for it. One – The main character is just Jack Black
being himself and that’s usually a good time. *Jack Black singing* DECAPITATION! Two – Exploring the open-world and seeing
Double Fine’s vision of a crazy heavy metal fantasy world is amazing. And Three – The UI absolutely NAILS its theme. Designed by Joe Kowalski, Brutal Legend’s
graphic design proudly wears its inspirations on its sleeve. The type, especially on the headers, is very
similar to the bold, angular, and gothic typefaces of logos from iconic metal bands like Iron
Maiden, Def Leppard, Motorhead, and Black Sabbath. The in-game encyclopedia is presented in a
high schooler’s notebook. The start of every mission is the cover art
of a worn out album. Every UI element, tutorial, and even certain
cutscenes use a distinct illustration style inspired by medieval and Norse woodcuts which
mesh extremely well with the heavy metal fantasy. The interface also has high contrast with
the black and white standing out nicely from the colorful landscapes. I love Brutal Legend’s UI in general, but
the real standout here is the main menu. *Intro Cutscene* “Are you sure you’re ready
for this? Because what I hold in my hand is not just
going to blow your mind. It’s going to blow your soul.” The Main Menu is an interactive FMV that goes
through a custom made gatefold album of the game itself. Every option is on a different part of the
album. New Game and Continue are in the inside cover, Chapter Select is found in the back
where you’d find the tracklist, Multiplayer is in the record sleeve and options and extras
are the record’s A and B sides respectively. This menu oozes creativity and it also makes
a few smart decisions to keep the theme from getting in the way of this menu’s usability. In the raw footage, the type isn’t actually
on the album itself – It was edited in post to allow it to be made in different languages
and the footage is sped up to keep navigation from feeling too sluggish. There is a great behind the scenes video,
which I’ll link below, that shows the designer working on the UI of the game. It goes over some of the design and editing
challenges like matching different takes or editing out little mistakes. It’s great if you’re interested in video
editing. Overall, Brutal Legend’s menu is one of
the more creative uses of FMV that I’ve ever seen in a game. Bad Design *Mario Party 8 music* Let’s just get right to it. Mario Party 8 is a total eyesore in its menu
and UI design. It’s functional – barely – but this presentation
is just… really poor. Here’s a weird thing – the main menu is
at a 16:9 aspect ratio, but the game itself is shown at a 4:3 ratio. It’s jarring and unnecessary. The typography here is some of the worst I’ve
seen. The type in the main menu items are off center. The kerning, the spacing between individual
letters, is uneven in spots, but the biggest issue here is the dump truck of different
typographic styles in the menus. Most designers would recommend keeping your
different font choices and styles down to about 2 or 3 at a time. The main menu alone has up to 5 different
fonts and type treatments. Here, here, here, here, and here. This isn’t even the worst example of this
in this game. Mario Party 8’s typography inconsistently
switches between using multiple outlines, drop shadows, and gradients for contrast. Like fonts, it’s a good idea to use these
effects sparingly on text, but instead the game likes to use ALL THREE of these effects
at once. Look at the text that appears at the start
of someone’s turn. The font here has 2 outlines, one of which
has an ugly golden gradient, and there’s also a drop shadow in between this line and
the red fill.. this is a typographic nightmare. There’s NO cohesiveness between modes either. The menus, boardgame screen, minigame screen,
and the result screen all have something unique and terrible in their type. It’s just all over the place. Good Design *Dead Space music* I can’t say I’m really into the Dead Space
series because I’m what some may call… *clears throat* a big man baby coward. But Dead Space has some nice UI. It’s almost like a direct evolution of Metroid
Prime’s helmet HUD where the UI actually exists in the world. This technique is called Diegetic UI. In Dead Space, your character’s equipment
IS the interface. The RIG system displays your health on the
spine of your character with a distinct neon color that changes as your health changes. The RIG holographic menus themselves are beautifully
laid out, organized and intuitive with clean and easy to read typography and typesetting. The neon blue is a strong contrast against
the rusty and unsaturated oranges, yellows, browns, and grays that are common in Dead
Space’s palette. I also appreciate that because the UI is physically
in front of the character, it makes sense that the game doesn’t pause when you dig
through menus – which was a pretty rare idea at the time. The holographic design is also applied to
your weapons with your ammo count placed right next to your crosshair and dotted lines and
shapes appear to explain the dismemberment mechanic. The ideas here might seem simple, and visually
it might even be a bit plain but the way Dead Space makes a seamless and useful UI blend
into its world is nothing short of masterful. Bad Design For our final bad UI entry… ugh screw it
I’m going back to Mario Party 8 because… wow. This is just all over the place. And I mean that literally! Nothing really follows a clear grid structure
which is one of the keys to good UI design. Every element here is misaligned or haphazardly
placed. Most of the submenus are weirdly framed with
these checkered backgrounds. The menu elements don’t use this framing
at all, overlapping the borders. Menu headers have this strange ornamental
design that doesn’t really relate to any of the other elements. I guess it’s supposed to go with the carnival
theme but it’s not effective. On top of that, we have this faded black bar
with instructions at the center. Character portraits are compressed and awkwardly
cropped. And there are a ton of different button shapes
and formats throughout the menus with no good rhyme or reason. I’m sure some of you are asking “What’s
the big deal? They’re just menus and interfaces. They don’t really matter once you get used
to them.” And you’re not wrong. It’s easy to ignore a bad menu.. most of the time. Even great menus like the ones in Persona
5 occasionally have the same issues as Mario Party. I mean, you gotta admit, Persona 5’s menus
are pretty busy. An interface or menu is like a bridge. A well structured one gets you to your destination
with no problem. A rickety one can get you there too, but you’ll
feel worse about it. I’ve mentioned a few basic rules, but a
UI doesn’t have to follow all of them. You need to be careful, though – each rule
that a design skips increases the risk of the design totally falling apart. Persona 5 breaks a few of these rules in service
of its overarching theme. Mario Party breaks them for no real benefits. A UI designer needs to understand the rules
and why they exist if they want to break the rules effectively. *Chill vibes outro music from Persona 5*

100 Comments

100 Replies to “Good Design, Bad Design – The Best & Worst of Graphic Design in Games ~ Design Doc”

  1. Design Doc says:

    Check out Vol. 2 right HERE: https://www.youtube.com/watch?v=-_Tx5vbnH0M
    If you're looking for more in-depth Persona 5 graphic design talk, check out Vol. 3 right HERE: https://www.youtube.com/watch?v=Uqes0CaAim0

  2. Tomáš Slavík says:

    15:23

  3. SennaTheSenna says:

    Smash Bros. Ultimate wants to say hi.

  4. No you Did not says:

    You made me want to play Persona 5 again when the outro rolled in. The Persona series' soundtrack never fails to make me nostalgic every time, the game is just amazing.

  5. Dima Abull says:

    Dude i really like your care about graphic ui designs, i myself got this feeling of importance about the games ui, but i have to say that its still a subjective stuff u know ?!!! For example we have final fantasy default incredible menu design with the even better ffxii different menu that its up to the gamer !!!!

  6. Dastardly Nun says:

    wii games hav bad ui – the documentary

  7. Amelia Gryffon says:

    What is that godliness at 1:18 and where can I play it?

  8. karsten69 says:

    When in doubt, follow KISS:

    Keep
    It
    Simple
    Stupid

  9. Pixel Pudding says:

    An ad showed up before the video starts
    It says good graphic designs are easy to make

  10. Salty Pumpkin says:

    Graphic design is my passion

  11. amanda says:

    persona 5 is literally the most beautiful game ive ever seen so u right

  12. Griffin3Coker says:

    1:57 that's the truth it's currently eating away at my life away and I love it! It's such a good game. Can I ask who's your favorite character. My personal favorite is riuji! (Idk if I spelled that right)

  13. zoiuduu says:

    it feels to much work to me this UI

  14. Thug555666 says:

    Sounds to me like he’s biased against Nintendo….

  15. jayden Pangelinan gaming says:

    Stop u r asshole

  16. Derp7oSoup xd says:

    Lethal League?

  17. James Gamer101 says:

    2 digs at Nintendo oof

  18. Orin Anthony says:

    Teasing us like that with Battleborn…

  19. Ariel Gustsack says:

    Gotta say too about P5: mapping the menu options to single button presses is a HUGE part of why I was able to play two consecutive full playthroughs back to back. That decision alone makes combat feel much smoother, and gives a nice rythm to it. It's a beautiful, elegant solution and I have a hard time going back to more traditional oriented turn based jrpg menu battles now because of it.

  20. R. cia says:

    Omg Persona 5!!!! One of the things that drew me to Persona was it's amazing graphic design. I've always been interested in graphic designer and my family must've though I was crazy when I keot going on and on about it's design lololol,,,,

  21. Casey wasey says:

    P5 is perfect

  22. kael070 says:

    i don't agree with some points in your video, but certainly the UI can make the game either hell to look at or such a beautiful work of art
    Like the menu of smash bros is hell to navigate

  23. 希ᴋɪʙᴏ says:

    That guy looks like Jablinski gaming.

  24. Arlo Steiner says:

    P5 UI is simply just cool and it wasn't mentioned but Skies of Arcadia had some incredible design too

  25. Ryan Cav says:

    Persona 5s UI has more character than anybody in kingdom hearts 3

  26. Objectively the best says:

    Poor Mario.

  27. Nam Kwok says:

    I didn't thought UI graphic design is important until i play jump force..

  28. Daoud Saeed says:

    Music: The days when mothers was still here.

  29. Benjamin Hogan says:

    graphic desgin is my passionn

  30. Mercy Fae says:

    Detroit: Become Human had amazing graphics and music.

  31. Lez Tusi says:

    Isn't it a bit unfair to judge mario party that bad without looking at their reference / inspiration? It obviously looked like a japanese tv game show, the same vibe mario party wants to show to the player. It honestly looked fine if you look it that way. Other than that, the UX is indeed bad.

  32. Temporal Name Null says:

    It's true that the typography in MP8 looks like 10 layers of Photoshop but what really angers me are those STUPID HUGE GREEN ARROWS AT THE SIDES OF THE SCREEN. THEY LOOK HORRIBLE!

  33. Cledesol says:

    I am a simple man.

    I see Persona 5, I click.

  34. Lance Puns says:

    I believe the pokemon UI is simple and, depending on how you prefer your UI, well done. I wouldn't say it's fantastic, but it's simple enough that you don't feel like you're lost.

    Dishonored has several different menus, and while the more specific menus like the weapons, ability, and main menu are all ones I'd consider good, the larger menus to get to those ones always take me a while to navigate. This could easily just be me not understanding how to navigate it, but I always felt rather lost when looking through it.

  35. PyroNapalm says:

    can I ask what the intro music is?

  36. DavidRussell323 says:

    I'm a big fan of how you even made the words "success" and "failure" at 4:35 represent their respective attributes, with "failure" having super wonky spacing hahahaha

  37. m k says:

    Persona 5 is the reason I tried to look up a video about this subject

  38. Mixed22RZ says:

    At Least The New Smash Bros Is Better

  39. Starzway says:

    I do love Trails in the Sky but I can see how the UI interferes with the game play at some points because it has led to some confusing movements whenever I entered battles sometimes.

  40. Julian Xamo says:

    I particularly hate Assassins Creed Revelations' and Assassin's Creed 3's UI, it takes so long to even open the map, absolutely awful

  41. Conner3326 says:

    I hope that little danganronpa V3 clip at the beginning wasn’t a massive spoiler….

  42. BlueHollyhock says:

    I don’t know why but this video reminds me how much GMTK videos are well organized and on point.

  43. Ahnaf plays says:

    Maybe warframe?

  44. Максим Г. says:

    Man, Mass Effect menu looks so weird compared to PC port…

  45. Zadamanim says:

    Understanding the rules and breaking them effectively is a good argument for learning music theory as well. For example, when writing music, you should use notes from a single key, unless you have a reason to break that rule.

  46. Quinn Marchese says:

    there’s an argument to be made for Smash 4. the menu system was likely made with the 3DS in mind. as it’s a touchscreen, large buttons are easier to use, and since they made the menu navigable via the dpad, it was likely just kept. i personally never saw Smash 4s menu as an issue

  47. Yoshi _ Jordan says:

    I think we can all agree, ultimate has that Persona 5 vibe in its menus.

  48. Mr. E says:

    Why is Smash Tour anywhere? That’s the best comment I’ve heard on that mode

  49. Deuxor Cl says:

    The pause and option menus should have an option of turning off joker moving around.
    after a while it feels it takes more time than it should and for basic stuff like using items its gets a little boring tbh

  50. Bruce lee1947 says:

    Jet set radio has some pretty damn cool menus.

  51. Gustavo Silveira de Azevedo says:

    Def leppard metal? How?

  52. clyde254 says:

    I actually grew up on mario party 8, but I never even realized the issues with the UI at all.

  53. Mouad El Moujaddidi says:

    That's Japan

  54. Plant says:

    Mario party 8's graphic design is so bad it's almost endearing. Almost.

  55. Dusty Coffin says:

    I got clickbaited by the persona 5 thumbnail

  56. PhantoPaw says:

    And I thought it was just my imagination that the Smash 4 Menu feels very messy and unorganised.
    Also for a graphic designer and VG lover like myself it's very interesting seeing something like this. Keep it up.

  57. SilverRainbow100 says:

    I'm glad they fixed the menu in Smash Ultimate. It's pretty stylish and dynamic as well, which could definitely be inspired by P5.

  58. spleen bag says:

    Mario Party 8's UI design definitely does look terrible, but I still love it.

  59. Tom Stewart says:

    Brutal Legend looks a lot like SSX: On Tour. A game worth looking at if you appreciate graphic design.

  60. Disk Drive says:

    I feel like the Arkham games also do stealth well, by laying things out in detective mode, and highlighting key mechanics of the room or area that you need to tackle. Sometimes Batman’s vocal cues help also, as something like, say if you pull out the batarang and attempt to throw it at a hostage taker, in an earlier level, he would remark, “if I do that, he’ll kill the hostage”, letting players know that in the future, that tactic is not recommended. It also helps when the NPCs call out, “There he is, The Bat!!” Letting players know that they’ve been spotted, giving them the chance to make a move before the enemies open fire. There’s so many ways to get through the room, and the game doesn’t baby you, guiding you on what to do, and the player is purposely forced to get creative, giving it even more credibility as a Dark Knight game. The stealth levels made me feel really good when I could scare my enemies shitless and let them know that I have complete control over the environment, without being a god.

  61. Lily Draws says:

    I'm not done playing persona 5 but so far I absolutely love it sooooo much its my favorite game

  62. Brian in a jar says:

    I didn't even know trophy rush was a thing and I've been playing smash 4 for years

  63. Damien says:

    Another Man baby coward checking in

  64. scy1192 says:

    Mario Party's menu is pretty intuitive though, while P5's is not. But of course after a few in-game months you get used to it. Speaking of RPGs I think the Pokemon series has some of the best menus in the genre, especially the GBA ones. It's super easy to follow what's going on and they're pleasant enough to look at, if a bit boring.

  65. Hato says:

    P5 ui is one of most annoing ui I ever seen. It's cool and flashy, but just can't stand watching it longer.

  66. Hascuce says:

    Illustration in brutal legend also takes alooot of inspiration from jack kirby

  67. dono dony says:

    The last of us UI you forgot. Good video though.

  68. SuperDude Taylor says:

    as someone who complains A FUCKING LOT about his co-workers not bothering to watch dates; I love this video; especially that (asmr voice) it's Persona 5

  69. multimang0steen says:

    And then all chinese knockoff mobile games has the same style, ui, icon location, mechanics etc.

  70. Samuel Ruidiaz says:

    Best game ever we need more. / dont censore our games.

  71. Izu The Fool says:

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

  72. Katherine Russell says:

    Please. You have to cover Pokémon GO. The graphic design in it… It used to have good graphic design. Now it's an awful mess of menus and options and information in weird places. It's horribly disorganized. And that's a darned shame, because all it would take to fix it is an update that changes all of the menus to actually make sense, and since it's a mobile game that's possible.

  73. Nikita Samoilenko says:

    Gorgeous is MGS and FF arts … P5 design is just ok 👌

  74. Taylor Blakeslee says:

    I cried when I played Mario party 8. It was just so ugly and nothing made sense. It seemed like a literal nightmare

  75. Random Dude says:

    Persona 5's ui is a literal EYEGASM

  76. Alfonso ST says:

    Unless it's persona 5

    Yeah, that transition you showed there is the exact reason why I'm not a huge fan of that style. Man, it's cool, it's super stylish and unique, but let me get to his menu quickly without having to see joker jump around!

  77. Akira Kurusu says:

    Ps3 XMB

  78. Somebody Dude says:

    Thank GOD ultimate had some good design

  79. ZER0 P0ST says:

    u n t o u c h a b l e

  80. Maddie W says:

    At first I was mad cause you threw shade on mass effect, and that’s my favorite game series, but then I realized “Yeah I could barely navigate mass effect one, ESPECIALLY the equipment screen”

  81. Trivia: Seesaw says:

    I really loved the UI of Nier: Automata. The effects when your character was visually damaged, the overall look and the map design are just great.

  82. CaliforniaHP says:

    Haven't even finished the video but you bashed Trails in the Sky's UI. Hell yes man!

  83. Elfy, The elf no one knows says:

    You’d showed spleen. But reviewed no spleen.

  84. Sophie Barrett-Kahn says:

    HOLLOW KNIGHT the art and design is so amazing, it is even better than persona 5. checkk it out!

  85. JJSwift HD says:

    Holy fuck. The Mario Party texts look like someone discovered every single text option in power point for the first time.

  86. Eliothebeast says:

    How did you know P5 was my favorite-

  87. RedPhoenix2m says:

    Persona 5 beats every game just because of the graphic design

    Then we have the story…

  88. Akuma Chibi says:

    Thoughts on Dante's Inferno?? Also, I'm currently Re-Re-Playing Persona 5…I love the art design and everything about the game play. I look forward to the continuation of P5~

  89. CG says:

    Epileptic: Persona 5, huh

    Persona 5: Ryuji’s all out attack

    Epileptic: AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

  90. KimmyOlaya says:

    Samurai Warriors 3 has a great UI too!

  91. Peter Gehring says:

    The first sly Cooper game has good design

  92. unkupo says:

    THE WORLD ENDS WITH YOU PLEASE

  93. Joshukaunarak says:

    The PAL version of Mario Party 8 has different and way better fonts

  94. Faran Ghahremani says:

    I would like to use this video to teach video games in my classroom. Do you have the script available anywhere? Thanks.

  95. Samwel Tan says:

    I wanna be friends with Persona 5 UI

  96. Matthew Jones says:

    I never knew about Brutal Legend, that menu just OOZES charm!

  97. Suomeksi says:

    "Good graphic design in a game is like a good translator" – the Finnish translation of video's title and description was awful, submitted a far better one. YouTube shouldn't allow for free translations by anyone, they do so much more harm than good. Translations should be a paid thing, because the quality of free is just so bad – and automated is even worse!

  98. Foxy Boy says:

    Ryuji tried his best

Leave a Comment

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