Good Design, Bad Design Vol. 2 – Great & Terrible Video Game Graphic Design Examples ~ Design Doc

July 30, 2019 posted by


[Chill intro music from Persona 5] Second verse, same as the first! These are 6 more great and…not…great…examples
of graphic design in games. Just as a reminder: while graphic design might
seem like the same thing as art it’s really not. Graphic design is visual communication. It’s things like menus, UI, camera work,
color choice, font choice, animation, character design. The presentation of information. Good graphic design is a mix of usability
and style that helps you know what you need to know. Bad graphic design is anything else – style
at odds with usability, usability without style, or if you’re really unlucky, both
– making it harder to melt into a game. Good Design [Splatoon music] Splatoon is one of the most inventive shooters
in years and one of the major keys to its success is how well the designers at Nintendo
thought through the game’s use of color contrast. Splatoon relies on color contrast to guide
players to the game’s primary objective – paint the most terrain in your team’s color. As the match plays out your minimap will update
in real time, highlighting where your team is, where your opponents are fighting back,
and what still needs to be covered. Splatoon uses a few tricks from color theory
to make sure you can know all of that information with just a quick glance of the map. The key is in the color combinations of the
ink. If you’re designing a color scheme there’s
one thing that you generally want to avoid: color vibration. If there are 2 adjacent colors that are similar
in brightness, the colors can vibrate and blur at the edges. This can be a common problem with true complementary
color schemes like blue-orange, red-green, and yellow-purple. Color vibration is intense, uncomfortable
to look at, and even sometimes causing colorblind people to have trouble telling the two hues
apart. In Splatoon the two paint colors will be next
to each other all the time, just by the nature of the game. It’s unavoidable. So how does Splatoon avoid color vibration? For the colors to have a strong contrast,
the color combinations in Splatoon must be both different hues and values. Let’s see what happens if I take away the
game’s saturation. You can still tell the difference between
the two kinds of ink based on the difference in the color’s value. Some combinations contrast more than others,
but they all contrast enough to be effective. The highly contrasting colors makes it easy
to see your team’s progress, and even helps eliminate some of the need for voice chat. Even the color palette of the unpainted map
was designed carefully to work with the strong palette of the ink colors. The more washed out and neutral color palette
of the terrain contrast against the reflective and neon colored ink and makes it obvious
what is and isn’t painted. It’s clear that a lot of thought went into
the design of Splatoon’s color palette, how it impacts the moment to moment gameplay,
and how it fits into the world’s style. Bad Design Behold! Programmer menus! Yatagarasu: Attack on Cataclysm. It’s got some nice character portraits and
it is functional. But these menus? Hoo boy. Alright. Rapid fire graphic design problems. READY GO! Arcade arcade. Key config should just be in options
Grammar check your menus. This main menu has no composition, it’s
all just centered type with no framing or additional elements to support it. In the character select, all of this text
is misaligned. All of THIS text is misaligned, AND they tried
adding spaces to cover it up. ThisCh
These gorgeous character portraits make the whole thing look like a bootleg copy of a
different fighting game. Announcers are digitized photos that look
like Mortal Kombat 1. Announcer’s names overlap other pieces of
text. What is this mystery smudge? 7 fonts
[popping noises] This speech bubble doesn’t know when to
stop. [sliding noise]
The TV ran out of toner. These hit sparks look… stolen? K comma O. K COMMA O. WHAT?! This was released in 2015. Hire a graphic designer. Good Design [Music from Danganronpa] You know if you’ve seen any of my other videos,
that I love me some kinetic typography. And Danganronpa, especially Danganronpa V3
has some of the most beautiful kinetic typography out there. In a nutshell, Danganronpa is a visual novel
series similar to Zero Escape and Phoenix Wright: Ace Attorney. 16 hyper talented high school students are
forced to join a killing game where the only way to escape is to get away with murder,
or die trying. It’s high school anime Hunger Games, soaked
in a marinade of gallows humor, outlandish mysteries, and surprisingly deep characterization. Danganronpa’s presentation is striking,
especially for a visual novel. The cardboard cutout character sprites and
objects with deliberately incorrect perspective gives the game a distinct pop-up book style
but where the presentation TRULY shines is in the class trial segments. [Music from Danganronpa] Here, the surviving students must debate who
among them is the murderer. Fail, and the murderer gets away while the
innocent students are executed. This class trial concept presents a design
challenge: How do you turn a group discussion into gameplay? Danganronpa’s answer is what they call the
“Non-stop Debate”. During these debates, characters will speak
one after the other, providing their testimony and arguments for what happened, all of which
is presented in kinetic typography. It’s up to the player to see through the
chaos of the debate and literally shoot through the weaknesses in your opponent’s arguments
with your own pieces of evidence or ‘truth bullets’ in order to move the conversation
forward. Think Phoenix Wright mixed with a light-gun
game like House of the Dead. This whole series has some great presentation,
but V3 shows players this series’ style at its absolute best. I love the opening of every non-stop debate. The camera spins around everyone as your ‘truth
bullets’ load up, perfectly setting the stage. From there it jumps right into the discussion. Type comes in from all directions as characters
make their statements. The type itself is simple, bold and beautiful,
and is loaded with personality through composition and animation. Words will intersect, overlap, and fly across
the screen with key words being highlighted to help narrow down the number of options
the player must consider. This was all present in the previous games,
but V3 brings this idea further with different variations of the non-stop debate including
the even more chaotic panic debates where multiple arguments happen simultaneously,
1 on 1 debates where you refute your opponent by carefully cutting through their words,
and the splitting scrum debate where you match the arguments of the opposing sides. The composition in the scrum debate where
the cast faces off against each other in this profile shot just looks incredibly cool. Every version of the non-stop debate revolves
around the same core challenge of just finding the heart of the problem and the typography
plays well into that. It’s chaotic, but it’s not overwhelming,
and it matches thematically with the high stakes of the death game premise. Bad Design [Music from Final Fantasy VI] It can be easy to forget that Final Fantasy
VI was created for 25 year old hardware. In spite of the limitations of the SNES, FFVI
was extremely atmospheric for its time. The stormy title card. The use of Mode 7 to create that somber opening
of the Magitek armor trekking through the snowfield. The charming goofy cutscenes that would play
in the middle of boss fights,. The opera scene. FFVI embraced its 16-bit limitations in ways
that created its own personal style. Its sprite work is beautiful and the graphic
design, while not exactly a looker, did its job. Now enter the 2016 remaster. FFVI on PC is one of the worst looking remasters
PERIOD. They took a rough looking interface and made
it even uglier. The ATB bars are now bizarrely shown through
the menu panning up from the bottom. Design decisions made to work with a mobile
screen kill the experience on the PC, like these ginormous buttons that show less information
on the screen than in the original. The overly clean and basic looking typography
has no personality or tone, sticking out like a sore thumb against what’s left of the game’s
16-bit style. Even the localization got worse. The script got wordier without getting better. Even the title screen was butchered. Look at this! What’s this gradient? Where’s the drama? There’s no animation. The logo just appears. The work put into the game makes it look cheaper,
more like a ROM hack than a remastering, and it’s really tragic. FF6 is an all-time classic that deserves a
great remaster to introduce a new audience to this beautiful game. Good Design [Music from LittleBigPlanet] From the beginning, Little Big Planet has
always been about the creativity of its players. Its secret strength is how it makes a large
and complicated toolset easy to use with a console controller, and it does all this with
its ‘popit menu.’ The popit menu is your main creation tool,
used for things like character customization, decoration and of course, making levels. Little Big Planet has an extremely large amount
of options to choose from – hundreds of costume pieces, decorations, stickers, level geometry,
logic tools, cinematic tools, materials, and so on. It could have been a huge pain to sort through
all of your options but the popit menus are energetic, well organized and easy to navigate
with simple white animated iconography and clean typography. Objects are placed in a grid structure and
are sorted by category and nothing feels out of place. Materials, decorations, stickers, costumes,
and gameplay objects are all given their own section that you can flip through with the
shoulder buttons. You can hide entire sections quickly, and
get your more commonly used items in one place, so finding and sorting what you need is super
easy. All level creation, decoration, and editing
is done with the popit’s cursor. Pick your object, resize, rotate and move
it to where you want, and then just place it down. And you can even undo or redo changes with
one button press. Making the common things easy lets you pour
more time into the creative side of level design, instead of wrestling with your options. The Popit also has some really smart decisions
built in for multiplayer. Each player can use their own popit menus
without disrupting each other. The popit also shows you what other players
are doing, which lets you work together more easily. Keeping track of your cursor is easy as the
cursor itself has a string attached to your character, which lets you know who is building
what. It’s amazing how the developers of Little
Big Planet have taken level creation, something that drags down dozens of games under the
weight of its options, and makes it so seamless and easy without sacrificing the creative
freedom of its players. Bad Design Here we go again! Mario Party eiggg… yeah no it’s Battleborn. There is a lot to nitpick here but let’s
zero in on this. Battleborn has a problem with focus and how
it directs the attention of its players. Its UI elements are all very flashy, and there
are a billion of them. Battleborn is a busy looking game to begin
with – It has MOBA-style characters with crazy special attacks and tons of particle effects. Having the UI scream for attention on top
of all of that is just a bad choice. For this kind of multiplayer MOBA/shooter
hybrid the players attention needs to be on the action of the game, not the framing around
it. Battleborn’s contemporaries like Overwatch
and League of Legends understand this. They have stylish UIs, but the events within
the game are still the most important component of the visual design. In the UI for Battleborn, every element tries
to grab your attention by being as bold, vibrant and animated as possible. During big fights, your screen will be flooded
in particle effects, auras, light boxes, damage numbers, flashing indicators, cooldown indicators,
shield and health vignetting, player outlines, and status icons. Every time you get a kill, assist, or complete
an objective big or small, a fancy little animation will play in the upper left corner. All of these UI indicators pop off constantly,
and they cover a big chunk of the screen every time they play. Battleborn’s UI is so over the top that
it starts to look like one of those fake games built for a TV show. Good design is often an exercise in restraint
– just because you CAN design an element in a flashy way, doesn’t always mean you should. If there’s gonna be an animation for completing
an objective, it needs to be fast and out of the way. Important icons shouldn’t have to compete
for your attention with less important ones. Each element must harmonize with the rest
of the experience. Your UI should be a symphony, not a shouting
match. Good graphic design is not easy to make, but
understanding what goes into making it will let you appreciate their work just a little
more. [Chill vibes outro music from Borderlands
2]

100 Comments

100 Replies to “Good Design, Bad Design Vol. 2 – Great & Terrible Video Game Graphic Design Examples ~ Design Doc”

  1. Design Doc says:

    For those wondering, the Danganronpa V3 section only contains footage from the first half of chapter 1 and the non-canon demo. I tried to keep spoilers to a minimum.

  2. Seesaw Jeebus says:

    Danganronpq gives me life

  3. Doruko666 says:

    "Each element must harmonize…" while showing Zenyatta's gameplay

    I see what you did there.

  4. Cinnamon Panda says:

    Good player choice: avoid Dongaronpa V3 cuz its bad

    Bad player choice: suppport companies and not games when any company can make horrible games and kill franchises

  5. Alex Kyle says:

    DADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADADANGANRONPA!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  6. generic name says:

    Do robots have dicks?

  7. I NEED ZE MEDIC says:

    Did I see Skullgirls I click, I would really want to see you do some review on Skullgirls now

  8. Seth Hall says:

    Knock, out.

  9. Zara Yeetus says:

    “Danginronpa”

  10. the cool shoeshine says:

    I think splatoon 2 does a better job at avoiding colour vibration than splatoon 1. In splatoon 1 you had mixes like blue and orange, which led to it blurring out. Also areas and locations used to be super saturated.

  11. I couldn’t think of a name says:

    iS thAt dAngAnroNpa I sEe

  12. _Actar_ says:

    Danganronpa is a god tier design

  13. Wishtelle says:

    My favourite part of Danganronpa is the music.

    D-D-D-D-DANGANRONPA
    intense head bopping

  14. the protagonist says:

    I've never heard of this channel; I just saw Monokuma in the thumbnail and clicked.

  15. Star SpookyBooky says:

    DANGANRONPA BOYS!!!!!!!!

  16. Sweet Scribblez says:

    I only came for danganronpa.

  17. Spook_Town says:

    Listening to people talk good about Danganronpa (particularly v3) makes me feel good inside

  18. milkyshu • says:

    I can hear floral fury

  19. Fuc I dropped My Spaghetti says:

    What the frick spoilers im only at despair girls, whY aRe MaKoTo aNd HajIME In the ThIrD gAME

  20. Logiepogey07 says:

    YAY ITS DRV3

  21. Cam BDM says:

    I'm a simple man I see dangenropa I click

  22. octowry says:

    Splatoon and Danganronpa, two of my most favourite games back to back.

  23. Corvid says:

    LittleBigPlanet… ah, the nostalgy. I still have the first version lying around.

  24. great day for a big day says:

    90% danganronpa
    9% others
    1% basicaly me

  25. Gavan Tan says:

    Yay danganronpa!

  26. Oh Paige Cutie says:

    omg danganronpa!

  27. MrCh0o says:

    Monokuma got me there.

  28. Schmilk says:

    I see monokuma I monoclicka

  29. Tide Clima says:

    LBP is so well designed :3 you see the UI and it's so confortable to use it

  30. Kaknbabe Gaming says:

    Clicked because of Monokuma 😂

  31. Winter and the Ghost says:

    my sister is a fan of Hunger Games and I'm a fan of Danganronpa.
    We can both agree that they are literally 70% – 80% different.

  32. Brains for Leslie says:

    that feel when you are a graphic design student and click

  33. Lotus_ flower says:

    voice says "Bad design"
    Cuphead music starts playing
    Me:*Get's ready to RAGE*

  34. Nolmart Maridor Gimeno says:

    YASSSSS DAN GAN RON PA

  35. Kassie D says:

    WOW I’m so proud to be in the Danganronpa fandom for once ;D

  36. Adam Wood says:

    Will you talk about Danganronpa Kill/cure next?

  37. Maki Masahino says:

    Other than the design. Who agrees that the story and character design plus the soundtrack is good.

  38. trains and tortals says:

    I stayed for danganronpa and splatoon

  39. NSDominator says:

    This entire comment section is about Danganronpa, and I'm glad to see I'm not the only one obsessed with it. <3

  40. Nido Hime says:

    For a moment I thought that Final Fantasy 6 "remaster" was an RPG Maker game 😖

  41. Griffin3Coker says:

    I came for danganronpa heard persona 5 music and got hooked in. Great video!

  42. Павел Бойченко says:

    8:06 look their mouths are opened normally is that anime-style at all?!

  43. Rei Date says:

    I SEE MONOKUMA
    I c L I c C
    I L i K E

  44. Jeanette Herrera says:

    sees monokuma
    spams click

  45. Cuban Nerd says:

    Dope series. I love your take and critiques on UI design for these games.

  46. MonkeyBoyBen says:

    I am a creator in LittleBigPlanet. I wanted to design a good menu for a a project I'm working on. I didn't know what it took to design a good menu so I searched for different things talking about it. I thought that I should look at games with good menus. While searching I found this video. I find it funny how you mention good menus and say how LittleBigPlanet has one when I came from LittlebigPlanet looking for some. I feel like I want in a full circle.

  47. nicolas navarro says:

    REMAKE!!! NOT REMASTER!!!

  48. Smg065 says:

    Danganronpa's menu made me feel ill. The text moving about, with different sizes or being brought up in chunks, at odd angles or jumbled so you can misread it… It all blends together to make it hard to read. I can't make anything out of it when only one person is speaking, let alone several. It's incredibly unintuitive and hard to read, even with the text being plain white and having a fairly basic font. Even if it's supposed to recreate a hectic argumentative setting, I can't soak in any visual information before it moves away, and I struggle to do so when it sits or sways on screen because of how busy it feels.

    Moreover, I really dislike how the text looks. All of them have a gradient and outline that remind me of Mario Party 8's muddied and visually busy design, which you talked about at length in the first part of the series. Instead of it being a typographic mess, it's more sickly. The greys between the top and bottom just feel gross, and the outline is thin enough to be visible, yet just thin enough to be hard to spot. The mixture of all that along with the problems above makes this all just an eyesore to me.

    I seem to be an exception here, because everyone is gushing about the game in the comments, but I'm not the only one who thinks that design is really poor, right?

  49. Mr.Nicc/NiccB1207 says:

    "It's not art, it's visual communication".
    So… it is art?

  50. Dash Perú says:

    Auch, that remaster is just sad.

  51. speddmon says:

    I only clicked because of monokuma……

  52. Missing Legs says:

    I love how you didn't spoil the protagonist change

  53. Kuyashii X says:

    It's sad Yatagarasu's mechanics are so good, but yeah, they for sure rushed on the rest of the game, the menus, the online (if it even exists because I couldn't get it to work) and the UI are ABYSMALLY bad. I know it's hard to make fighting games, but I've seen graphics and menus in SNES games.

  54. Izabella Parker says:

    for all the danganronpa fans here like me
    we protecc our waifus/husbandos
    we attacc the Floating words
    we see a monokuma thumbnail we clicc
    we be in the nonstop debate we solve it
    we be in the mass panic debate we need to be fluenntt
    we be in the scrum debate we matcch

  55. Geoffery Williams says:

    Lol I expected Danganronpa to be a bad design. Since I hear how shitty of a game it is often from different people in different fields. No one ever has anything good to say about it usually. Glad to hear a different perspective for once lol.

  56. trollbreeder says:

    get out of my recommended

  57. HONEYPUPPO says:

    i came for danganronpa, stayed for littlebigplanet.

  58. MAKO says:

    clicked for danganronpa, stayed for splatoon

  59. Najemniczkas says:

    Came for DRV3 but happy to see LBP 🙂

  60. Dai 大 says:

    I was with you until Danganronpa.. the colors seem so dry and the unexpected PINK and YELLOW words flying everywhere!! Fighting for your attention.
    A great idea.. a poor execution.

  61. Blu Skye says:

    As a fan of BB I'm just adjusted to it, it's something that doesn't get in the way for me and all that information is actually quite useful. It looks busy and it isn't beginner friendly but I love it and I think it has a lot of style of it's own that people overlook. Lots of finite details are dismissed as a mess because not many people took the time to look closely enough and it's a shame.

  62. Tai Moya says:

    I'm ever so greatful to you. i'm learning so much from your videos. I strive to make my videos better and better. I hope to one day be really really good.

  63. gaiskerein says:

    I think for Yatagarasu it's the localization's fault, not the devs themselves.

  64. morthim says:

    the worst thing about your busy arguments is how you criticize something then move on before showing a similar thing but done right

  65. Temporal Name Null says:

    "The TV ran out of toner" HAHAHAHHAHAHA

  66. MillieThe Coyote says:

    PersONAAAAAAAAAAAAAAAAAAAAAAAAA

  67. Konichiwa! says:

    Me at 8:37: Oh look it's a youtuber picking on a rpg maker game made by some poor kid.
    Me 10 seconds later: Oh no… it's not an rpg maker game

  68. Dean Churchman says:

    This video really serves a K,O to bad UI design!

  69. Haapavuo says:

    You have so many visual novels on these videos that it gets boring. Try more FPS, strategy and racing games instead.

  70. liang yu Wu says:

    but these menues… hoo boy
    u sojiro?

  71. Megapixel says:

    I can just tell how much you know about graphic design by just looking at your videos. I don’t even need to hear what you’re saying.

  72. Crooty says:

    Looks like I'm buying Danganronpa

  73. Marek Wasik says:

    Seeing that normie splatoon game play makes me s i c k.

  74. FYX from Inferno says:

    I am a simple man. I see Monokuma in the thumbnail, I click.

  75. Lenux says:

    I don't even know what a mono-kaka is.

  76. Vince says:

    Random Person: don't know what Danganronpa is
    Monokuma: ITS PUNISHMENT TIME!!!!

  77. Ultra Sexy Chipotle says:

    Did I click cuz I saw Danganronpa? Lol no…

    yes

  78. kittiopie says:

    i love how the danganronpa fanbase is so closely knit together. anything pops up with danganronpa and we all flock to it, no matter what it is lol

    informative video btw, very interesting!

  79. Anime Gacha Girl says:

    I saw this in my recommendations and I saw Monokuma in the thumbnail and I watched this! This helped me improve in my art skills!

  80. Chaos Fiend says:

    1:00 YEAHHH

  81. Joseph Potzner says:

    Anyone else notice Maximilian dood at 3:46

  82. Lukidjano says:

    This video got me into Danganronpa

  83. Donce Fordas says:

    Borderlands ost at the end i believe

  84. Chop Gamer says:

    Hey, heads up, please don’t put major spoilers in your vids.

  85. A person says:

    I got large nostalgia waves when I saw LBP 3. I have played every good design game here and my god am I just HAPPY.

  86. A person says:

    99% of comments: Danganronpa

    1% of comments: Other

  87. Chidon0 says:

    Zero Escape has so much better dialogue than danganronpa.

  88. Jiashen Chen says:

    98%-Thumbnail
    2%-aaa Splatoon
    Me-2019

  89. Kamarko says:

    Pedo bear?

  90. rasmus degn says:

    K,O

  91. Eliane Winter says:

    Thank you so much for agreeing wholeheartedly with me on Danganronpa V3's outstanding style 😍

  92. commentspaepanion says:

    Danganronpa V3 praise, eh? Everything about that one game, independently, is surprisingly precious. Danganronpa has been full of surprises since Trigger Happy Havoc's prologue. Welcome to the production value of Japan compared to our region wholly.

  93. Reuel Ribeiro says:

    Man, typography is SO overlooked on so many games… D:

  94. SoundlessOrc808 says:

    This video was what finally pushed me over the edge into trying out the Danganronpa series. No regrets, despite the constant anxiety of wondering if my favorite characters are going to die.

  95. WEABOBOSS says:

    do one for mobas..

    good design – well.. could be league and dota?

    bad design – MOBILE FCKING LEGENDS EWWWWWW!!!!!!

  96. Pat Shelly says:

    Am I the only one that thinks Danganronpa looks putrid

  97. CayenneGaramonde says:

    Yatagarasu looks like it was made in M.U.G.E.N. or something.

  98. Arsene Lupin says:

    back in my first term, we studied human computer interaction (basically making your system accessible to users, helping them navigate the app and so on and so forth) and while i understood pretty much the gist of it all, watching your videos about good and bad design really stuck it for me. kudos!

  99. Gonzalo Silva says:

    I can't play Danganronpa 'cuss the the UI and art for the characters are such an eyesore.

  100. MjrCinnaminBun says:

    All of GearBox games sucks

Leave a Comment

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