Blog
Going cyberpunk and riding the vaporware: A look at retrofuturism

Going cyberpunk and riding the vaporware: A look at retrofuturism

Take a deep dive with us into retrofuturism.

Blog
Design
Going cyberpunk and riding the vaporware: A look at retrofuturism

Going cyberpunk and riding the vaporware: A look at retrofuturism

Take a deep dive with us into retrofuturism.

No items found.
Written by
Jeff Cardello

Retrofuturism, as a current design aesthetic, combines a predicted future with the past.

It’s both forward-thinking and nostalgic. It’s high-tech, painted with an intentionally low-tech brush. 

For modern-day designers, retrofuturism is a deliberate choice. But prior to the 1960s, creatives were writing, creating art, and making films that attempted to predict what was to come. Their works were never meant to be kitschy — they aimed to be prophetic. 

We can see retrofuturism in the 1927 film “Metropolis,” which portrayed the year 2026 as a dystopia inhabited by sleek metal automatons and bleak art deco skyscrapers.  It gave its audience a portal to a distant time, both beautiful and terrifying. 

The movie poster for the 1927 film "Metropolis." Here, we see the letters for Metropolis, placed on top of different buildings. The letters are red, graphic and boxy.
With a claustrophobic stack of imposing architecture and sharp geometric letterforms, this movie poster for Metropolis offers a glimpse into a frightening future. [Image source]

Retrofuturism was also seen in the science fiction books and comics popular in the 1930s-1950s. Scenes featuring bobble-headed astronauts colonizing distant planets, laser guns in hand and ready to battle alien life forms were common. They showcased the technologically-advanced world of the future, as imagined by artists. 

Even though space travel had yet to be invented, this cover from a 1930s issue of Amazing Stories gets a few things right about how it might look. [Image source]

Today, designers embrace the imagined futurism as a nostalgic look at an alternative world. Retrofuturist web designs transport users through nebula-like color schemes, otherworldly visuals, and retro computer-inspired typography — resulting in fresh and unique experiences. 

Types of retrofuturism

The gritty digitalism of cyberpunk 

While we see its roots in the science fiction of the 1960s and ‘70s, the term “cyberpunk” didn’t exist until 1980, when Bruce Bethke wrote a novel entitled Cyberpunk. 

The word is a mashup of “punk,” referring to the rebellious music movement, and “cybernetic,” which describes the mechanization of biological functions. This amalgamation of words, makes cyberpunk feel both high tech and rough around the edges.

From there, cyberpunk found its way into popular culture with films like “Blade Runner” in 1982 and “Ghost in the Shell” in 1995, along with many other anime films and manga publications. Video games like “Cyberpunk 2077” have contributed to the popularity of this aesthetic as well. In web design, its sense of anarchy and machination has really only taken off in the last few years.

Chrome, a Paris tattoo shop, fills its design with glitchy sparks, futuristic imagery, and retro computing graphics and typography for a hypnotic and cosmic-feeling user experience.
Chrome, a Paris tattoo shop, fills its design with glitchy sparks, futuristic imagery, and retro computing graphics and typography for a hypnotic and cosmic-feeling user experience.

Cyberpunk is one of the main pillars of retrofuturism. The glitches and digital artifacts often found in cyberpunk designs make viewers feel like they’re interacting with unstable technology, capable of crashing at any moment. Color schemes often feel reminiscent of dilapidated cityscapes — blues, greens, and purples dulled by layers of industrial soot. 

Cyberpunk is rough around the edges. It’s more Millenium Falcon than Starship Enterprise. There’s a sense of chaos running beneath its seemingly high-tech exterior.

The head-scratching absurdity of vaporwave

Vaporwave is an off branch of retrofuturism. It’s a bit less harsh than cyberpunk but still evokes feelings of nostalgia, drawing from the pop culture and design tropes of the 1990s. Vaporwave’s color schemes are often soft with pastels of purple, pink, and blue. Heavy-handed drop shadows and gradients along with geometric patterns such as grids and triangles are common as well. 

The album cover for 2011 album, Macintosh Plus. It features a faceless roman bust with bright neon colors in the background, a photo of the New York city skyline, and different graphics like flowers and shapes.
This 2011 album cover for Macintosh Plus, with its visual non-sequiturs, embraces the wonderful excesses of vaporwave both musically and visually. 

The Vaporwave aesthetic can be traced back to the mid-2010s, with the emergence of this namesake musical genre. With pitched down R&B samples, warped synth lines, and plodding drum machines, it represented irony without the cynicism — reveling in the sillier indulgence of the 1990s. 

The visual art of vaporwave also borrows from the cheesier aspects of pop culture and integrates the nonsensical. The album art and memes associated with this electronic music movement embraced garish color schemes and incorporated absurd visuals like out-of-place Roman statues. 

An agency website created by Behance user INGA. It shows a the head and face of a  roman sculpture split up into 4 pieces. Next to it, the heading reads "8 PM Agency Presentation."
This agency website design from Behance user I N G A tastefully brings together the building blocks of vaporwave for a modern and visually dynamic website.

In web design, vaporwave is a more lighthearted branch of retrofuturism. Rather than predict a dystopian future, it embraces the cheesier elements of 90s pop culture. However, it’s not uncommon for web designers to draw from both cyberpunk and vaporwave when creating retrofuturistic websites.  

Unleash your creativity on the web

Build completely custom, production-ready websites — or ultra-high-fidelity prototypes — without writing a line of code. Only with Webflow.

Get started for free
Unleash your creativity on the web

Build completely custom, production-ready websites — or ultra-high-fidelity prototypes — without writing a line of code. Only with Webflow.

Get started for free
Get started for free

Examples of retrofuturism

Retrofuturism isn't for everybody — and that's ok. Consider Elon Musk’s Cybertruck. Though it appears better suited for hauling around rocks on the moon than transporting your groceries across suburbia, plenty of people have put in their orders for the vehicle’s release. It’s a polarizing look, dividing people into those who find its clunky futurism silly, and those who would love to be creating it themselves. Retrofuturistic web design functions in much the same way — you’re either a fan or you just don’t get it.  

Retrofuturism won’t work for every web design. But it’s a bold aesthetic, bound to make a big impression on any website it touches. Let’s take a look at examples to show you the different ways designers are using it in their work. 

Discover Local Music

An image of the Discover Local Music site. With overlapping triangles in the background, the heading in the foreground reads "Listen. Discover. Show Up" in varying  fonts. The background is a deep purple color.

With an opening screen that looks like the introduction to a VHS workout tape,  Discover Local Music has all of the markings of vaporwave. We’re fans of the mishmash of typefaces,  neon-like tubes of purple and pink, and full unabashed embrace of the 1980s aesthetic.  

Mark Alink

An image of Mark Alink's website. It spells out "Mark Alink" as the header with space as a background.

Mark Alink is an open-source bookmark management tool. With luminous text,  swirls of stars, and dashes of blues and yellows, this site blends vaporwave with a cyberpunk influence — seen in its screen glitches and flashing cursors.

The Nifty Portal

An image of the Nifty Portal website. The site mimicks and old school poster with Portal written across as the header and different subheads graphically placed throughout.

The Nifty Portal, an NFT art project, embodies all that is cyberpunk. The top display font looks like it could be from an interplanetary corporation from the year 2200. With thin vector lines dividing up the pages, computer terminal typography, icons that blink into focus, and atmospheric background images — viewers feel like they’re staring at a computer screen far below the surface of an alien world. 

Retro 3D grid

The Retro 3D grid site, it features a grid with green lines on a black background.

Though this isn’t a full website, you’ll want to check out Retro 3D Grid. With a green that looks like it’s ripped straight from an old Apple IIe monitor, this animated grid will add a sense of retrofuturistic charm to any website that you integrate it into.

Even better,  you can clone it for free, giving you a great starting point for your own retro-tech design projects.

Lars Olson Portfolio

An image of Lars Olson's portfolio. It features a rainbow color scheme on a black background with fun graphics like a thumbs up and a pineapple. The heading reads "Lars Olson designs stuff."

Lars Olson takes up the vaporwave ethos without using any of its common design tropes. You won’t find a single Roman statue or kitschy gradient. Instead, Lars takes the tenets of vaporwave in different directions. 

Lars’s website features ridiculous visuals including a pineapple, dolphins, and 90s clip art-inspired background shapes. You’ll also find an eye-catching palette of fluorescent greens, blues, and purples.  

Ribbon Finance

Cryptocurrency site Ribbon Finance, pitches their product in an 8-bit style typeface.

An image of the Ribbon Finance site. On a simple black background, It reads "Ribbon Finance" with the subhead "Earn sustainable yield for decentralized options vaults." The CTA reads "Start Earning."

Though Ribbon Finance relishes in the nostalgia of antiquated technology, you’ll find plenty of modern embellishments. The opening has a captivating micro-interaction, opening up squares of glowing colors. This motif is found elsewhere in the design, with a hover effect that touches several elements, illuminating them with fluorescent light. 

Ribbon Finance melds the past and with what’s modern, making it the perfect distillation of retrofuturism. 

Chafik Design

An image of Chafik Design's website home page. It reads "Hi Human, I am Chafik." on a glitchy gradient background. The gradient color scheme is made up of black, purple, blue, and pink.

Data and AI Engineer Chafik combines the best of vaporwave and cyberpunk for their portfolio with elements like an alien busting dance moves in the hero section, purple and blue gradients, and glitchy text. True to the theme, Chafik claims to be “from another planet” and encourages potential clients to reach out to “make the future now.”  

Nikita Rybai portfolio

An image of Nikit Rybai's portfolio. It features the heading "True Game Changing" with the subhead "Nikita Rybai portfolio." in futuristic font.a

Nikita Rybai’s portfolio delivers an immersive cyberpunk user experience.

Though this is a more polished entry to our discussion, it still has hints of the grittier aspects of cyberpunk. The hero section has a strange configuration of blocky geometric shapes that shifts upon hover. There are also other lo-fi details like a pixelated email icon and command line-style text throughout the site. 

Take your own designs into the past and future

While many design trends favor smooth lines and refinement, retrofuturism pushes against such perfectionism. It embraces visuals that mimic blips and bugs and revels in clunky, pixelated typefaces. Retrofuturism takes what’s out of style and spins it into something new.

And that’s the beauty of web design — every designer has the power to mix and match the design trends and styles they prefer. Whatever cool new sites you’re building, we’d love to see them Made in Webflow!

Last Updated
April 11, 2022
Category