How Video Games Influence Visual Design, Interactivity, and Originality at Mad Genius

The web is a young medium. It was only just two and a half decades ago that most of us booted up Netscape Navigator for the first time and began our journey on the World Wide Web. By comparison, radio and television have been around since the early 1900s. The oldest known newspapers date all the way back to around 1600. 

Young as the internet is, developers simply have not had the same amount of time to experiment, play and perfect their respective medium. The medium itself is constantly changing thanks to new technologies. Web pages have, since the conception of mobile browsing, turned into an amorphous goo meant to stretch and squish to accommodate varying widths from 300 to 2,000 pixels.

There is another medium that shares many similarities with the web, both in its relative youth and the ways in which improvements in technology continually push it forward: video games. 

First appearing in arcades in the early ‘70s, then quickly making its way onto home consoles and into our pockets, video games have become a multi-billion dollar industry complete with their own conferences, competitions, and theme parks.

Web designers could learn a great deal from video games. 

Game designers face many of the same challenges as website designers. However, video games have an uncanny ability to capture us in their unique and beautiful worlds and leave a lasting impact. Why is that? How can websites do the same?

Visual Design: Make It Memorable

Most of us can recall far more video games we enjoy than websites we enjoy. The reason is simple: games tend to have a distinct style. Examples of some games that came to mind are “Hollow Knight,” “Hyper Light Drifter,” and “Celeste.”

Whereas “Celeste” and “Hyper Light Drifter” take the pixel-art style approach, “Hollow Knight” utilizes a hand-drawn approach. “Celeste” makes heavy use of solid primary colors while “Hyper Light Drifter” relies on ethereal gradients, and “Hollow Knight” leans into a bleak palette of blacks and whites that convey a gothic, Burtonesque sense of melancholy. There is no mistaking any one of these games for the others. 

What about websites? We took a look at the websites of three shoe brands: Nike, Reebok, and Adidas. If we obscure the logos, can you tell which is which?

While each of these brands may have differences in styles and variations of products, what separates their online personas? At first glance of the homepage, not much. 

There is a big image with a text area on the left, and a reversed-out, all-caps sans serif font. There are also buttons. These sites have a logo area on a white nav-bar in the top left next to the same all caps-sans serif menu, rounded off by search, account, and cart icons in the top right. 

Let us say this: these do not look bad at all, but are they memorable? Distinguishable? These sites may very well be perfectly functional for the purpose they exist, but is that enough? 

Many websites (and brands) are succumbing to a lack of personality and style—it is almost a trend. The reason behind it is up for debate. Maybe there’s an over reliance on template sites like Squarespace or Weebly. Perhaps it’s just uninspired design or an aversion to risk taking. Whatever the reason, Mad Genius thinks it is a mistake, and we think we can look to video games to point us back in the right direction.

Interactivity: Make It Worthwhile

In the early days of the internet, interaction was simplistic: you hovered over a link and the mouse turned from an arrow to a pointer, and when you clicked a link, there was a flash of white and a new page. In a CSS tricks article from 2014, Miguel Perez likened navigating the web to touching a doorknob and instantly appearing on the other side of the door. Today, however, we have more tools to make navigating the web much more intuitive. So, where can we look for inspiration to meet this challenge?

Take a look at this video from the aforementioned game, “Celeste.”

In the video, the protagonist, Madeline, is collecting one of the game’s many strawberries. The strawberry goes through an entire process, from stretch to explosion to transformation to disintegration, all for the purpose of making the collection of that strawberry feel important (not to mention that incredibly satisfying sound). 

What if Madeline existed in the early internet? Would it be as satisfying? Would we feel like we accomplished anything, or are being rewarded? Doubtful.

There are over 100 strawberries hidden throughout the world in “Celeste,” each harder to reach than the last. Yet, players have spent hours and hours searching for and trying to collect all of those strawberries because they feel rewarded by the challenge—in part by that simple animation. 

What if, upon signup for an email newsletter, an animation with as much love and attention as the above strawberry were triggered? Imagine a discount received after finding a hidden item on a webpage, like the cup of coffee in Coffee News. A site’s navigation could have some clever animation woven into the design, evoking a rewarding experience each time you use it (examples of Mad Genius doing this are at Colson’s Beer Company, Gulf Coast Pharmaceuticals, and Pinelake Church).

Attention to detail is the type of thing that brings people back time and time again. It’s the little things. When you can tell someone has put their love and attention into something as small as collecting a strawberry, you can bet that the same love and attention has gone into every part of their work.

Make It Distinct

Most of the employees at Mad Genius love video games. We also believe there’s no substitute (yet) for human intention when it comes to design. Template builders have pretty site designs, but the idea of one solution that fits all doesn’t actually fit a single one. Each project presents its own unique challenges and therefore requires a unique approach. 

And creativity doesn’t take an army. Have a look at the current indie game scene for inspiration at what can be done with very small teams. “Hollow Knight,” an absolutely massive open-world game, and “Celeste” were both developed by two-person teams at Team Cherry and Matt Makes Games, respectively. “Hyper Light Drifter” was created by Heart Machine who, at the time of development, had less than ten people. 

Keep it custom. Keep it inspired.

Does Your Website Need Its Own Strawberry?

To learn more about what the game-loving creative cultivators at Mad Genius can do for you, drop us a line.