SpyreStudios

Web Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

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

April 12, 2011 by Thomas Mrak 23 Comments

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

Commodore 64 boot screen

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

A typical afternoon on Planet Zebes

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

Megaman 3's vibrant anime inspired world

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

Mario throws a potion

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

Megaman uses the Rush Coil to reach a high platform

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

The scenic Mushroom Kingdom

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

Filed Under: Article, Design, Inspirational, Minimalism, Usability, UX

Comments

  1. CuWeSo says

    April 12, 2011 at 4:53 am

    Great Article!!

  2. DesignModo says

    April 12, 2011 at 7:35 am

    Interesting, innovative concept article for UX explanation :)

  3. Junior D'haese says

    April 12, 2011 at 8:44 am

    Nostalgia!

  4. Koen Haans says

    April 12, 2011 at 8:48 am

    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!

  5. Ramaraju Ramakanth says

    April 12, 2011 at 9:42 am

    Nice One..

  6. Rob Cubbon says

    April 13, 2011 at 12:54 pm

    Wow, this took me back to Manic Miner on the Spectrum. Great idea for an article and some clever points.

  7. John E. Thompson says

    April 14, 2011 at 2:56 am

    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!

  8. Dare says

    April 14, 2011 at 3:21 am

    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

  9. Thomas Edward Mrak says

    April 14, 2011 at 10:00 pm

    John,

    Sounds like there should be a sequel :-)

  10. Thomas Edward Mrak says

    April 14, 2011 at 10:03 pm

    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.

  11. Andy Fitter says

    April 15, 2011 at 8:47 am

    Interesting stuff.

  12. guestus says

    April 15, 2011 at 12:31 pm

    Undefined Method – http://www.undefinedmethod.com/

    Database missing? fantastic navigation to be sure……

  13. LST says

    April 16, 2011 at 11:26 pm

    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.

  14. Thomas Edward Mrak says

    April 18, 2011 at 2:45 am

    Odd, it was working when I wrote the article.

  15. Thomas Edward Mrak says

    April 18, 2011 at 3:29 am

    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.

  16. Ken says

    April 18, 2011 at 6:31 pm

    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.

  17. Oscar Martinez says

    April 18, 2011 at 9:27 pm

    Yup, nostalgia. Made me want to unbury my NES and SEGA Genesis =p

  18. TM says

    April 20, 2011 at 9:37 pm

    B is left of A on the NES controller, which I’m pretty sure was the context here.

  19. Adam says

    April 26, 2011 at 11:44 pm

    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.

  20. G.N.R.S.U says

    May 4, 2011 at 11:22 am

    learing much from here!!!

  21. Peter says

    May 5, 2011 at 9:16 pm

    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.

  22. RangpurSoft says

    May 6, 2011 at 3:19 am

    What a great article! Keep writing this type of article. I hope this kind of article help to all web developer.

    Thanks

  23. Derrick says

    May 9, 2011 at 1:18 pm

    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.

Leave a Reply

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

Please prove you're human *

Recent Posts

  • What Factors Determine the Best Digital Marketing Agency?
  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022

Archives

  • June 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022