Get nostalgic with these five websites inspired by vintage games

Take any introductory programming course and you’ll probably be asked to code a game like tic-tac-toe to test your budding coding chops. Games from the past, nostalgic bric-a-bracs that hold sentimental values from simpler days, can serve as the source of inspiration for web design. In remixing and appropriating the interactive elements of these games, designers have the opportunity to iterate using time-tested interactive elements in their work.

For this month’s Double Click, we’re focusing on sites that find affinity with games from the past—from magnetic poetry to Mad Libs. Enjoy!

Jake Dow-Smith: B-GEN-21

In this website, Jake Dow-Smith created a graphic design brief generator in collaboration with Benjamin Cain and Paul Finn for their students at Central Saint Martins, Mad Libs style . “Our intention was to encourage our students to explore the balance of chance and control in their projects by presenting them with a unique brief that they can manipulate, but with constraints that we provided,” Jake says. “We devised a system whereby the brief is formed of keywords with thousands of possible outcomes to ensure no student had the same brief.”

The tool allows you twenty changes to a template that will look familiar to any designer. A prompt to “explore,” a method to use and an audience that is described using conceptually seductive words vague enough to not give away the answer. “It was an experiment for us to run the brief using our generator. The brief has just concluded and we’ve had some exceptional responses to it from our students.” Jake adds.

The website highlights how web pages might work without familiar user interface elements like menus and buttons. “The aim was to create a minimal, functional and utilitarian web page that uses the content as the interface. With such a minimal layout the outlined keywords encourage interaction so there was no need for prompts, menus or options,” he says. “The visual language is simple and efficient, with function at its core.”

Languages and tools used:

“I’m a firm believer in the K.I.S.S. principle and this webpage is built using static HTML, jQuery and SASS.”

GT Flexa: gt-flexa.com

For their latest typeface family, GT Flexa, Lucerne-based type foundry Grilli Type worked with Informal Inquiry and Sensor station to design a dynamic website that showcases the flexibility of their typeface. “In our digital age, typefaces are changing from a collection of discrete, single styles into variable fonts covering a design space. Any point within this design space—think of different choices of width, weight, italic angle—can be used in designs, and animated from and to by using simple CSS animations and transitions,” the foundry describes. “The website had to convey this idea of a typeface as a dynamic, joyful tool that can be used to creatively show information.”

The website has a functional game of Pong that loads at the top. Left to run on its own, the two paddles glide automatically, engaging in an endless back-and-forth with a yellow ball. As the ball passes through the site title, it changes to a random state that shows off the variability of the typeface. “The header area of the website is an automated game that visitors on computers, by using the arrow keys of their keyboards, can control and try to win. Each time the Pong ball hits the site title, it animates to another random state and shows off the variety of design results,” the foundry adds.

The rest of the website contains other delectable nuggets of interactivity. “Link texts change in width on hover, headlines adjust to the viewer’s screen size, and a variety of typographic animations express the flexibility of the typeface’s design space,” describe Grilli Type. “The type tester itself, a usually very static and staid affair, is animated and shows off the design axes that make up all the typeface’s possible configurations.”

Languages and tools used:

“The site is coded in vanilla HTML, Sass, and Javascript.”

Araya Wongwan: arayaaa.com

Barcelona-based interaction and visual designer Araya Wongwan recreates a favourite from college days with magnetic poetry for her portfolio site. Users are free to drag, reorder and mix up the words that describe Araya’s practice and goal. “I absolutely love grids on the web. Coming from a research-based background, structure and organisation became second nature to me. Lately, I’ve also been super nerdy about brutalism and anti-design. I wanted to integrate the movements’ jarring, stripped down, and a little awkward aesthetics to add playfulness into my grid-based website,” Araya tells It’s Nice That.

“In my childhood home, there was a fridge covered in magnets that I was always attracted to. Most of the magnets that my parents had collected over the years are from cities and places. How and where they were arranged gave me an insight into their importance and association with each other,” she says. “My idea is that all the magnets would fall and stick to one area, formulating a sentence as a base for the visitors to play with.”

Her goal for the site was to disrupt a clean grid as users interact with each project. “Apart from having fun arranging the magnets, what fascinates me and what I think gives meaning to the experience is what is unique about each magnet. Every piece has its own stories, histories, and a special memory — I wanted to relate that to each of my projects,” she says. “The portfolio is my portable fridge where instead of places, I collect the projects I’ve worked on and let visitors interact.”

Languages and tools used:

“The website was done in a collaboration with Ankit Karnany who developed my grid obsession and the additional quirky features using Gsap, Tilt, and draggable Javascript libraries.”

Silja Walenius: siljawalenius.com

This portfolio website by Toronto-based designer Silja Walenius takes inspiration from slot machines as a way to compress information and give users a break from text-heavy introductions. As you click on the pastel-coloured arrows, the words that describe Silja changes, never settling on one fixed identity. “I wanted to showcase a lot of different skills without having a giant block of text, which is where the idea for the ‘slot machine’ effect came from,” Silja tells It’s Nice That. On her site, not only is she a coder and designer, but also a wannabe surfer, an art nerd and psychic.

As we’ve seen in previous editions of Double Click, having a portfolio website that stands out can serve as a sneak peek on a designer’s sensibilities. “My main goal with the design of the site was to keep it extremely interactive and playful. I felt like a lot of portfolio sites I was seeing online were similar, and I wanted to create something that was engaging enough to keep people exploring the site,” Silja describes. “I’m a huge fan of micro-interactions, so there are a lot of smaller elements hidden throughout.”

Languages and tools used:

“The site is entirely built with HTML, CSS and JS. I used a couple different libraries for features on the site, the most notable being Barba and gsap for page transitions.”

TeYosh Studio: ecofortuneteller.com

Coin-operated fortune-telling automatons like the palm reading Bocca della Verita were once an arcade favourite in some parts of the world. The premise was simple: the person who interacts with the machine wants to know what the future holds for them. With a press of a button, the machines glow and move with eerie delight and tell you your personal fortune. In Eco Fortune Teller, Amsterdam-based digital duo TeYosh flips this trope around and lets visitors read the fortune of the planet.

“We took tarot and fortune-telling as a new-age trend that is intended to give the answer to an individualist question: what will my future be? However, we turned this question into a more urgent one: what will the planet’s future be?” says the studio. “The games are intended to assess the consumer behavior of the user and how their consumer choices will affect the planet’s future. Will they buy fruit packed in plastic or not? Will they take a car or a bicycle?” The site was developed by London-based collaborative studio DXR who was featured in a previous edition of Double Click.

“We were inspired by the popularization of tarot reading and wanted to give it a new life, both aesthetically and conceptually,” the studio notes. The studio combines elements of occultism, nature and referenced the aggressive consumerist aesthetics of internet banners to create an overwhelming and surreal effect. The main character, the fortune teller, is a characterisation of Mother Earth and an attempt by the studio wanted to give a digital makeover to old fortune-telling machines. “Our moodboard was Zoltar meets Lil Miquela,” the studio notes.

Languages and tools used:

“The website was built with PHP, Sass, vanilla js and uses several JavaScript libraries: matter.js is used for 2D physics, tsparticles for the stars and three.js is used for the 3D scenes.”

Wix Playground is proud to support Double Click, a monthly round-up of some of the most interesting and innovative websites and digital designs out there right now. We’ll discuss minimalistic, sophisticated, and experimental websites with creatives who regularly push the limits of web design, and learn about the process that shapes their work.