What 8-Bit Video Games Can Teach Us About Design And UX

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 ;)