Video games have come a long way since the era of simple pixels bouncing off one another. The Entertainment Software Association reports 58 percent of Americans play video games, showing just how much they have become a part of our day-to-day lives. Video game design is some the most cutting-edge anywhere, and Web developers and designers could learn a lot from these titles and their websites. Not only do the websites accurately reflect the titles they’re representing visually, video game websites often create a user experience that is just as fun as playing the games. Here are just a few games, their design elements, and the official websites that share these elements web developers could take a cue from.
Though the various stories in the world of Assassin’s Creed are set throughout history, a unifying use of color and style links characters from each time period. Whether the simple robes of Altaïr Ibn-La’Ahad, or the elegant finery of Ezio Auditore da Firenze, a unifying design choice for the main characters of Assassin’s Creed is the white, hooded robe with red highlights. The Animus computer system’s distinct use of geometric shapes and sharp edges gives it a cold, near-future look.
The Official Assassin’s Creed website borrows from both the look of Assassins themselves and the Animus computer system. It has a white and gray gradient highlighted with red details and buttons that look as though they were taken straight from the Animus operating system. The overall flow of color, starting with white and gray at the top, with a band of red content near the bottom, mirrors the pattern of an Assassin’s garb.
The Battlefield franchise is noted for its gritty realism, near-future aesthetic and rusty, saturated tones. The Battlefield 4 official website borrows a technical look from the in-game elements the Battlefield franchise has incorporated over the years, and feels like a technical brief from the field, with a digitized and faux lo-fi font suggesting a communication sent in the heat of battle. The bright orange color associated with the Battlefield HUD makes several appearances as a highlighting color throughout the website.
Animal Crossing: New Leaf
Animal Crossing is a simulation of a fantasy town populated with friendly animals who want nothing more than to eat fruit, collect furniture, and make their little village a better place to live. Animal Crossing has a vibrant and bright aesthetic, lots of funky asymmetrical shapes, and a friendly palate heavy with natural blues, greens, purples, and oranges that change through the seasons.
The Animal Crossing: New Leaf website is a welcoming and child-friendly webpage. Offering guided tours, opportunities to connect, and a seasonal intro page, the official Web page’s simple interface is easily navigable, familiar and friendly. The simple music that plays is fast-loading and gentle, and invokes a sense of the timelessness one can experience in the lazy days spent in Animal Crossing.
Few games are as boldly in-your-face as Borderlands 2, a blast of worn-down color and rough around the edges. The world of Pandora is full of psychos, robots, aliens, and explosions. Its flat, cartoon style mixed with its overtly stylized violence is a hallmark of the series.
The Borderlands 2 official website has clever elements, including content-side animations, embedded media “held” by characters from the game, and other surrealistic and vibrantly colored images sure to catch any visitors eye. By using a side-scrolling page element for their content, the designers of the Borderlands 2 website have captured a sense of the constant motion and action prevalent in the shattered world of the many Vault Hunters of Pandora.
Need More Video Game Inspiration?
Check out these epic video game related design posts we have cooked up in the past, sure to inspire your inner gaming geek designer in some way or another! Enjoy!