The computer sitting at your desk is far more powerful than anything available to all but the largest businesses in the 1980s, enabling us to continue to add layer upon layer without slowing down, and possibly losing focus on why we are here in the first place – to deliver a high quality product.
One possible solution is to this is to artificially limit your design and color options the way Shigeru Miyamoto was limited by technical constraints when designing Zelda and Mario on the NES.
While some of the NES library was filler, there were many standouts that used the limitations of 8 bit technology as strengths, rather than weakness.
In this article, we’ll learn how to gain inspiration from those interactive icons of yesteryear. Let the past inspire the future!
Use Limitations Effectively
In the early to mid-80s, abstraction and creativity weren’t design choices, but were a direct result of technological constraints being put to good use.
Mario, one of gaming’s icons, has a mustache, bib overalls and inhabits a surreal landscape for creative and practical reasons. Famed designer Shigeru Miyamoto gave Mario these features not only so that we could identify Mario as Mario, but for the simple fact it was easier to animate him with a hat instead of hair, made him stand out more against the background, and show as much detail in as little space as possible.
Today, even an inexpensive personal computer from the local discount store is a graphical powerhouse. Unlike the millions of colors most modern computers can display, the NES has a hard-wired palette of 48 colors and 5 grays to draw from. Along with a 256 by 240 resolution, and 2kb of graphics memory, NES games had severe graphical limitations. 24 colors per scanline (the lines that make up the picture on analogue TVs), one background color, four tile sets of 3 colors each for building background graphics, and four tile sets of 3 colors for enemy and character sprites were all that were available to create a breathing world..
Within these seemingly insurmountable limitations, the gaming public received such diverse titles as Ninja Gaiden, Final Fantasy, Tetris, and countless others; many of which still have sequels in production.
Prepare to get retro.
Use A Lack Of Color To Create Atmosphere
The Metroid series is well known for its creepy, unnerving alien monster flick feel.
From the moment we hit the start button, we have a feeling we aren’t in Kansas any more, and are drawn into the Space Pirate base on the Planet Zebes.
Instead of going for a slick, polished 1950s chrome feel, Metroid is a spartan affair visually, like the sci-fi horror film Alien, which appears to have inspired it…
Like any good horror film, what we do not see is often more terrifying than what we do see. Enemies are placed sparingly, rooms are connected by bubble doors; the player not knowing what lies beyond. The most important aspect of the graphic design in Metroid is the use of color, or lack of it. By creating atmosphere with the absence of color, the game uses a black background to create a world shrouded in darkness and untouched by human hands, similar to the Alienhomeworld.
Complimenting the cave-like environments, creative use of tile placement creates an organic landscape with peaks and valleys similar to the real world, which is rarely flat and perfect..
This was a revolutionary approach in 1986 when the game was released. The mixture of grid-like and organic structures is an inspiration in the modern world where many adhere to convention a bit too much, or not enough..
Life Platform is a corporate-styled theme for WordPress, which, like Metroid has managed to create a compelling world with what we don’t see.
It’s Saturday Morning All Over Again
While Metroid took design cues from sci-fi horror films, Megaman 3 isn’t too far removed from resembling an episode of a 1980s Saturday Morning cartoon.
Megaman 3’s visuals are painted with bright, bold, colors. The visuals are inspired by Japanese comics and anime, which is fitting given the similarities to Osamu Tezuka’s Astroboy both in story and art direction. This is especially apparent in Capcom’s official artwork and story.
Instead of the dreary dark labyrinth of Metroid where change is a bit more subtle, graphic diversity is the name of the game here. With such locales as a mining colony on another planet , a rock quarry, and the obligatory lava level, gamers of all types could have their favorite level.
Megaman’s level layout is far more grid-like and boxier than Metroid’s. Not only does it serve the function of building a vibrant world with limited resources, the angular look only adds to the inorganic nature of the game’s cold, futuristic setting.
The game world itself is a robot…
Japanese culture including games, both past and present has invaded Western consciousness. By using Asian inspired motifs from Japanese pop culture or traditions such as Ukiyo-e, you can create a killer design for your project.
Create A World Beyond Imagination
Life is but a dream.
While most people are realists and dreamers get a bad rap, sometimes it can pay off to be unconventional and dream.
In Super Mario Brothers 2, Mario and Pals are traveling through Subcon, the world of dreams. With materializing door potions and vegetables with smiley faces on them, the game world is nothing short of surreal. This game is even less conventional than its predecessor, Super Mario Brothers.
Yes, somehow mushrooms and turtles taking over the world under the supervision of a dragon makes more sense.
A dinosaur that shoots eggs as projectiles? Really?
The lesson learned here is, the conventional rules not always need apply; it just needs to work within the context of the whole, and have great layout and control. Luckily for you, you don’t have to be an egg spitting dinosaur.
Exhibiting this surreal dream-like quality in modern web design is Creative Spaces, a website to help artists find spaces to develop, exhibit or perform their work within the Australian state of Victoria.
Show That The Powerup Is Working
Much like the foaming cleanser hocked on a late-night infomercial by an obnoxious pitchman, Megaman 3 and many other NES games change the color of their characters or modify their appearance to indicate a specific powerup is in use.
Megaman changes color when using a Robot Master weapon, while Mario grows in size after grabbing a Super Mushroom..
On the web we see this behavior most commonly with hyperlinks indicating whether we have visited the link or not, or on a menu which changes color when a mouse cursor hovers over it.
Much like an NES designer, you can come up with something that stands out AND makes it easy for the end-user to notice the status of something more readily..
A modern example of this is Burnstudios Audiotool which emulates a virtual studio environment in Flash.
Like Propellerhead Reason, Audiotool uses virtual cables to indicate how devices are connected and routed visually, rather than through menus or confusing diagrams.
How, as a designer can you show us that the powerup is working?
Show, Don’t Tell Us It’s Friendly
In Super Mario Brothers, we first learn that the mushroom is our friend at the beginning of the first level by the fact it’s nearly impossible to avoid. We also learn shortly that it can protect Mario from death when we collide with a goomba shortly there after.
Undefined Method, the homepage of a creative technologist from the UK, has more in common with a kinetic sculpture at an art exhibition than your average site. It is one of the most original navigation methods I have seen in quite awhile.
Like Super Mario Brothers, the user is drawn instinctively to towards the circle-like navigation nodes out of curiosity, and is guided by the limitation of only being able to use the site as the designer intended, causing a dance of pixels to commence when they discover this isn’t their grandfather’s portfolio site..
Unfortunately, “Our Princess is in another castle”, and this article has merely scratched the surface of the world of classic gaming and what can be gained by a modern audience from studying it.
Like all journeys, this one is ongoing. Just don’t jump too high over the flagpole by the castle ;)
Great Article!!
Interesting, innovative concept article for UX explanation :)
Nostalgia!
Great article! I have never looked at my favorite games that way, but they seem to do something “natural” for UX, what in webdesign can be a struggle sometimes. Thanks!
Nice One..
Wow, this took me back to Manic Miner on the Spectrum. Great idea for an article and some clever points.
I’m not complaining at all (great article!), but just thought I’d add…
–“Make Menu Selection Easy” like in the original Legend of Zelda.
–“Keep Directional-Specific Navigation Obvious” like in Punch-Out (B punches left, A punches right).
–“Don’t Offend Your Users” a la Custer’s Revenge
–“A Really Fun Experience Can Easily Be Destroyed by One or Two Annoying Steps” like in TMNT 2. Except that game had about a hundred annoying steps. Still, who else played it so much they almost beat it?
Yeah… I love NES. But I have to say, SNES has even more lessons. How about the menus for all the RPGs, and the way they handled really complex and confusing stats for each item? Like how when you went to a store in Final Fantasy III (aka VI), you could see the immediate stat differences (i.e. PWR+10, DEF-12). That could come in handy in, say, a shopping cart or “customize your product” interface.
Okay, I’m done geeking out. Everybody else’s turn!
Cute article. One mistake however, is assuming Super Mario 2 was a deliberate atempt to be different from the original SMB. The game is actually a reskin of a then-existing Japanese game.
http://www.mariowiki.com/Yume_Kojo:_Doki_Doki_Panic
John,
Sounds like there should be a sequel :-)
Thanks for pointing that out.
I know that the real Super Mario Brothers 2 is what The Lost Levels in Super Mario All-stars on the NES is based on.
Interesting stuff.
Undefined Method – http://www.undefinedmethod.com/
Database missing? fantastic navigation to be sure……
Fantastic article! Modern designers should always keep in mind that we can do more with less, just like these classic game designers showed.
When you mentioned Ukiyo-e, I was immediately reminded of Okami, one of the most beautiful games ever. You should take a look at it if you didn’t yet, it’s a work of art.
Odd, it was working when I wrote the article.
Okami is an awesome, yet highly underrated game.
I have not played the Wii port, which allows you to paint with the Wii Remote. But it’s far easier and far more than than with a PS2 controller.
Obvious is in the eye of the beholder. A is left of B alphabetically as well as physically on the QWERTY keyboard. The only way “A is right” would be obvious is if you were right handed and thought of A as your primary control and B as secondary.
Yup, nostalgia. Made me want to unbury my NES and SEGA Genesis =p
B is left of A on the NES controller, which I’m pretty sure was the context here.
This is a very interesting post and gave me a new perspective I hadn’t thought of before. While I am not an aesthetic designer, I am surely a lover of good designs. Your post hits home with me because I value the simplicity that good artists know how to use.
I am a musician and I know it is just as important to focus on the space between notes as well as the notes themselves. New tools and greater graphic capability is great, but they simply widen the realm of possibility – not necessarily prescribe more sophistication.
learing much from here!!!
It’s nice to know how designers and programmers have come up with variety of solutions every time they encountered problems. Though the games may look simple and basic, I know for sure that the overall making of the game wasn’t not as simple as commoners have thought. This is a great eye-opener for everyone. Nice article.
What a great article! Keep writing this type of article. I hope this kind of article help to all web developer.
Thanks
Those are the good old times games… i remember a lot of those.. like atari games.. classic.. single joystick with only 1 button, haha i just missed it so much.