This is a Post on a WordPress Design Blog that Talks about Super Mario Bros.

Sounds silly, I know, but here’s a nice quote on “Great products are triumphs of taste” by 37signals:

Want to build a great iPhone app? Go listen to Billie Holliday. Trying to design a piece of hardware? Visit a Frank Lloyd Wright house. Aiming to write great marketing copy? Read Aldous Huxley. Need a color scheme? Go to the museum and check out some Mark Rothko paintings.

So. Super Mario Bros.

I’ve been reading this series of interview between Satoru Iwata, the president of Nintendo and Shigeru Minamoto, the guy who created Super Mario Bros, along with other guys who contributed to the game. The interviews are a goldmine of video game design lessons, and I’m going to list some of the brilliant thoughts that go into the making of one of the best game ever, Super Mario Bros.

The real reason why Mario wears hat and overalls.

About the hat:

Iwata:
There’s absolutely no way that you would have had enough pixels, right?

Miyamoto:
Right, there weren’t enough. Before you know it, you’ve used up 8 X 8 pixels. But if you draw a nose then a moustache, you don’t really know if it’s a mouth or a moustache, and it saves pixels.

And the overalls:

Miyamoto:
[...] When Mario is running he moves his arms, but in order to make that movement easier to see, I thought it would be best to make his arms and his body different colours. So I wondered whether there was a type of outfit which was like that…

Iwata:
And that’s how you came up with overalls! (laughs)

Whatever you do, you’ll get that first mushroom.

Mario will always get that mushroom

At the time, mushroom is an item of unknown use for players. Pac Man gains power by eating the big dots, but a mushroom? What could it be? It also didn’t help that Mario’s first enemy, the Goomba, was shaped just like the mushroom.

So, to show that it is a useful and harmless item, Miyamoto designed the layout in such a way that whatever you do, you will always get that mushroom. See that pipe right there? It’s there for a reason, namely so that the mushroom bounces off and goes toward the direction of the player. They also have a video that shows it here, under point 4, “Letting Everyone Know It Was a Good Mushroom”.

Miyamoto:
Right. There was one problem, however. When you play, you encounter a Goomba right at the start and it’s shaped like a mushroom.

Iwata:
It does look very similar.

Miyamoto:
So when you hit a box and something that looks like a Goomba pops out…

Iwata:
You run away.

Miyamoto:
Right, you run away. This gave us a real headache. We needed somehow to make sure the player understood that this was something really good. That’s why we made the mushroom approach you.

On Turtles.

Ever wondered why Mario had to deal with turtles? It was originally started from Mario Bros. (a different, earlier game), where you have to hit an enemy from below to beat it:

Defeating a turtle in Mario Bros.

Miyamoto:
That’s when we thought about what kind of creature could withstand being struck from below and would eventually recover. We racked our brains thinking what we could use…

Iwata:
And that’s how you came up with the turtle! (laughs)

Miyamoto:
The turtle was the only solution! (laughs) Strike it from below and it flips over! Leave it for a while and it rights itself!

Can’t Unsee This: On Clouds and Grasses

Take a good look again at this picture.

Mario will always get that mushroom

Yup. The clouds and the grasses are the same thing, colored differently.

Nakago:
Right. That’s why we strived to make the items take up as little space as we possibly could.

[...]

Nakago:
We’d use the same image for both clouds and grass, just changing the colour.

Iwata:
The clouds and grass look like separate objects, but actually they both use the same graphical elements.

Conclusion?

To be truthful, I’m linking to the interview series simply because it’s a fascinating read in itself. You get to dive into the mind of the designers behind a truly good game that’s loved by many. If we have to draw a conclusion for all this, though, it’s that in a truly great design, everything is there for a reason.

Mario’s hat, overalls, the way they re-used the graphic for cloud and grass, they’re all there to save memory. Having turtles for enemy, it turned out, had a reason as well, a funny but perfectly logical choice. Even the very first screen of the game had a lot of thoughts put into its design.

This maybe is the key to the popularity of Super Mario Bros. even to this day. We may not realize why it’s so damn enjoyable to play, but now we know that underneath, there are a lot of thoughts, considerations and brilliant ideas put into its design.

That’s what I believe to be the best kind of design: Subtle, probably goes unnoticed by many, but quietly adds to the overall quality of a product.

And that, my friends, is why you need to read an article about Super Mario Bros. in a WordPress design and development blog.

5 Responses to “This is a Post on a WordPress Design Blog that Talks about Super Mario Bros.”

  1. Design ideas

    Great idea for post. Love it

  2. Wednesday Wordpress Round Up « Alicia Wilkerson

    [...] looking for in a WordPress Theme, check his poll out. Jason also has an interesting article about Super Mario Brothers. Strange topic, not really go check it out and see what he has to say about great [...]

  3. Amanda

    It’s amazing to see what happened behind a seemingly old and simple game.

  4. game designer

    You should put a couple of more ads on your site as you could in all likelihood make a good deal of money. This is great writing.

  5. Michael Fields

    “Aiming to write great marketing copy? Read Aldous Huxley”

    From the man who wrote “The leech’s kiss, the squid’s embrace, The prurient ape’s defiling touch: And do you like the human race? No, not much.”

    This made my day:)

Leave a Reply

Latest Links More →

Custom Shortlinks for WordPress

Have your own short domain name for the purpose of shortlinking? Here’s an easy way to combine that with your WordPress install.

The Quick Start Guide to Using Google Webmaster Tools With WordPress

GWT is a great, frequently updated features like showing you search queries volume, malware and crawl error diagnostics and links to your site. If you don’t use it yet, you probably need to. This will help you get started.

WordPress & jQuery Contact Form without a Plugin

I would recommend this either if you want more flexibility or to learn how to code a contact form.

Understanding and cleaning the pharma (spam) hack on WordPress

How to fix that hack:

This attack is very interesting because it is not visible to the normal user and the spam (generally about Viagra, Nexium, Cialis, etc) only shows up if the user agent is from Google’s crawler (googlebot). Also, the infection is a bit tricky to remove and if not done properly will keep reappearing.

Web Safe Fonts Cheat Sheet

An updated (written in April 2010), well researched, CC-licensed Web safe fonts cheat sheet, available both in low-res PNG and high-rest PDF. Even the article is useful as well.

The Nicest 2010 Child Theme You’ll See Today

The Timaru Mental Health Support Trust website, made for charity by Team USA (comprised by web superstars like Jason Santa Maria, Dan Mall, Liz Danzico and Automattic’s John Ford) during the FullCodePress competition, is actually a clever child theme of 2010.

More recap by JSM, Daniel Mall, and Liz Danzico.

WordPress 3.0 Theme Tip: The Comment Form

The simpler way to code comment form (once you understand how hooks and filters work).

Showing and hiding content with pure CSS3

I like it, I think it’s short and easy to understand.