Wednesday 9 August 2017

The Rise of Retro Web Design

a shelf of retro items


They say, “What goes around, comes around.” And in the worlds of fashion and media, it’s never been more evident that what’s old is, quite often, new again. But more recently, web designers and notable brands have been firing up their own time machines and taking their website design back… to the future.


The rise of this modern “vintage” web design over the last few years has taken the web by storm – and for the most part, its significance has managed to slide under the radar of the average website visitor. The growth of this “digital retro” movement isn’t just reserved for individual web designers or development shops; in fact, this new approach to web design has been embraced by numerous brands, from Silicon Valley startups to the Fortune 500.


So what was the impetus for the web – the epitome of technological advancement – to suddenly “go retro” and craft design experiences that are a clear throwback to the 1960s, ‘70s, and ‘80s? To answer that question, we must first explore where the re-emergence of retro design started. Step into our DeLorean, intrepid reader, and fasten your seatbelt. Mr. Fusion has been packed with fresh banana peels, and we’re about to hit 88 miles an hour…


Fashion Forward


In the 1990s, a small group of trendsetters started treating their jeans with bleach to give them an “acid-washed” worn-down look. Soon after, they were cutting holes in those jeans and sporting Vietnam-era jackets. And of course, there was the resurrection of the T-Shirt as a casual clothing item typically reserved for sports and exercise. In just a short period of time, a completely outdated and outmoded wardrobe became the new cool. Kids around the world abandoned their modern duds for clothes and shoes that looked twenty or even thirty years old.


But it was more than that. As the trend caught on, consumers embraced the entire style of those eras, flaunting vintage ‘60s, ‘70s, and ‘80s accessories and décor. It was suddenly chic to be retro – and brands like Abercrombie & Fitch, Hollister, American Eagle, Old Navy, and more began designing entire product lines with vintage in mind.


On the surface, this fascination with “retro-mania” seems to have appeared out of thin air. But there was more happening behind the scenes that led to this tectonic shift in pop culture – and one huge, historical event that occurred at the same time and was the catalyst for revving up retro design: the birth of the Web.


Much like Doc Brown’s Flux Capacitor, the Internet was a revolutionary technology that broke barriers and accelerated everything. Within a few short years, the entire world was given the instant ability to find movies, music, clothing and TV shows online with a few mouse clicks and almost no expense. And it wasn’t just the latest and greatest trends they were searching for; kids were also watching classic films and TV shows, listening to music from the ‘60s, ‘70s and ‘80s and becoming obsessed with pop culture from the previous generation.


Despite being in the 21st century, the youth of the world had driven fashion back to an era where “peace and love” reigned supreme. This trend continued well into the 2000s and spread across fashion and into mainstream media.


Mixtapes and Movies


Music was the second industry to go retro. It began with the grunge movement in the early ‘90s – and shortly thereafter, the post-punk revival, which included bands like the White Stripes, The Strokes, the Black Keys, Interpol, the Yeah Yeah Yeahs, TV on the Radio and more. Much like fashion and clothing, the music coming from these bands was very much inspired by the pop and punk rock bands of the previous 25 years.


Film of the early ‘90s also followed the vintage trend. Quentin Tarantino, arguably one of the greatest directors of our time, is infamous for his nostalgic approach to filmmaking, weaving a unique retro style into his storytelling – most notably with the 1994 groundbreaking film Pulp Fiction. His use of period-era film production continues to permeate his filmmaking, and even a more recent production, Death Proof (a gritty, grainy romp in the vein of ‘70s grindhouse B-movies) was presented as a double feature, another staple of a bygone era.


Acclaimed director JJ Abrams explored his own childhood roots in Super8, re-creating the late ‘70s with astonishing detail while balancing the past with the visual effects of the present. The raw, reminiscent style of this film was a reflection of his influences, which included some of the most prolific directors of the ‘70s and ‘80s and their use of the Super8 medium. In 2016, Kodak launched an 8mm filmmaking initiative at CES, and directors like Steven Spielberg and Christopher Nolan embraced the effort to preserve the 50-year-old tradition that evoked the golden era of movie magic.


super 8 poster


TV GOES RETRO


The vintage trend eventually seeped into television. That ‘70s Show was perhaps the most notable, blending modern situational humor with the fashion, décor and visual sensibilities of the 1970s. Most recently, the Netflix hit series Stranger Things crystallized the early ‘80s and reflected the visual design essence of the times – from the show’s title treatment to the character wardrobe and dialogue. While Stranger Things evoked the pop culture of the time, it also successfully married it with the CGI capabilities of 2016, splicing together two worlds in a hybrid style that was both modern and retro.


stranger things poster


VINTAGE WEB DESIGN


It would seem that one of the many phenomena spawned by the forward thinking of the Internet was an obsession with the past. This pursuit of nostalgia inspired an entire generation of pop culture, creating a seismic shift toward the trends of yesteryear mixed with the technological advancements of the present and future. And as the world became retro-centric across fashion, entertainment and media, so too did the web.


Vintage web design was the next step in the vintage evolution. With websites at the center of everything, it was only logical that retro-inspired sensibilities would influence the web experience. Major brands were already leading this cultural shift, and eventually lead the leap online. Sony, Chanel, Toyota, Nike, Harley Davidson, KFC, Formula One and thousands of other brands – including banks and government agencies across the globe – have rapidly embraced a vintage approach with their web design.


channel advertisement


So what exactly is retro web design? It’s a thoughtful, intentional approach to the visual style and breadth of a website, where imagery, graphics, templates, layouts, colors, navigation, buttons, fonts, and other elements all reflect the design essence of the ‘60s, ‘70s or ‘80s.


The first sign of a truly retro website is in its photographic and illustrative features, typically evoking a period-piece look and feel. This might include the direct use or mimicking of vintage hand-painted posters, vinyl, cassette tapes, CDs or ads from another era previously reserved for print. Effects such as halftone patterns and film grain help bring the texture of these times back to life – and can be creatively integrated into the digital design realm.


Typography is equally important. The font treatment of a vintage-style website is usually an immediate giveaway of what time period it evokes. The use of retro type sets – and their accessibility as dynamic elements on a website – has made this endeavor much easier than ever. From hand-drawn fonts to distressed text that creates a “photocopied” feel, fonts are essential to capturing the vintage feel. As mentioned before, the title sequence to Stranger Things is perfect example of this treatment in action; the font styling is instantly reminiscent of a Stephen King paperback cover, and conjures the time period almost instantly.


stranger things font example


Navigation is directly impacted by both the typography and image choices of your retro style. Having a font that complements the vintage feel of the website while maintaining legibility is critical. But it’s also the general approach to the navigation; does it evoke the character of the period? Does the interaction (naming, design structure, flow) fit into the experience of the late ‘70s?


Color is also a keystone of retro web design. They range from the vibrant, saturated, high contrast neon-style of the ‘60s (think Peter Max and Woodstock) to the darker, dirtier, muted tones of the ‘70s and early ‘80s. A staple of retro web design is the pop art movement – from bright, bloated text to garish background blends. The unique combination of colors can also create a connection to a time period; for example, the early ‘90s hit Dazed and Confused reflected the evolving hippie culture with the fashion of the film: purple shirts with white jeans, brightly-colored flower patterns and more created a tapestry of time travel that was instantly cool. Vintage websites are modeling themselves after these palettes, creating more striking visual opportunities to channel the period.


Maybe one of the best examples of blending the past with the present to achieve a vintage effect has been with the Guardians of the Galaxy films. While distinctly futuristic in its substance and plot, director James Gunn has infused his galactic worlds with the DNA of the ‘70s and ‘80s – influencing his wardrobe, cinematography and color choices with remnants of old-school pulp comics. The result is a rich, vibrant universe with a soundtrack that features such bands as Fleetwood Mac and ELO. (For those of us that lived through those halcyon days, you can almost imagine yourself screaming at the Centipede screen as David Lee Roth blasts over the speakers in a frantic mall arcade…)


The Guardians franchise truly brought their vintage vision to life. As part of the film’s marketing, the printed posters, merchandise and website all evoked the feel of these eras through science fiction noir; the ultimate material expression of this was the issuing of the “Awesome Mix” soundtrack on a classic cassette. While Walkmans have long been retired, eBay was suddenly aflutter with searches for these kitsch devices – so these Mixtapes could be played.


The website is no different: from the load screen to the homepage, it feels more like a pinball machine jumping off the screen. The cassette totem is prominent, and the page artwork is bright and explosive. The imagery pays homage to Star Wars, one of the most prolific period films, and the navigation on the lower right feels like a collection of Atari games stacked on top of each other. It’s so ‘80s, Kevin bacon would be proud.


drawing of retro tape deckguardians of the galaxy design


The recent box office hit Baby Driver is another dynamite example of the synthesis of vintage trends – with the website at the center of it all. The visual backdrop evokes the texture and style of classic printmaking; the iconography and graphics are simple and stark against the retro-inspired palette. The fonts are blocky san serif faces, with the headlines featuring a stenciled, hand-rendered look. While visually vintage, the site delivers some unique animation and interactivity, as well as being mobile responsive. Baby Driver is a clear example that modern vintage has reached a tipping point: a fresh, new film created around a retro soundtrack composed of ‘70s and ‘80s hits, with a website and merchandising that all reflect a vintage visual design.


baby driver poster


IF YOU’RE GOING RETRO…


There is no “how to” primer for creating a vintage web design – and that’s the fun part. You can pick and choose different elements from different time periods and fuse them together. The one thing you’ll require to maintain continuity throughout your website is a style guide that clearly specifies your various color schemas, typography, logos, buttons, navigation, and graphics that support your vintage approach.


Most notably, if you’re considering a vintage web design, it’s critical to choose the right tools to build, manage, and host your website. That means having a progressive, feature-rich platform that gives you total design freedom – and delivers the kind of web experience that supports your vintage vision. The popular DIY website builders like SquareSpace, Wix, Weebly – and even more robust platforms like WordPress – won’t cut it in terms of web design flexibility and control. Their strict adherence to modern themes and the drag and drop WYSIWYG approach to design and content creation are too structured for the organic nature of retro. In addition, their “plug-ins for everything” model makes it next to impossible to craft a custom web design that reflects your retro goals. To maximize your creativity, look for solutions that don’t force conventions, layouts, themes or plug-ins.


Just like the “underneath” in Stranger Things, your Content Management System (CMS) can be a monstrous realm when it comes to building a vintage-style website. All of the conventions and requirements that many website builders and CMS platforms have will only serve as a hindrance. Seek out a CMS that gives you the most design freedom while providing an intuitive management interface and a sound hosting environment for your new vintage web design. This is especially important when it comes to typography and navigation.


Think the rise of vintage web design is setting? Think again. Vintage design is here to stay – and the only real change may be the time period. While retro was once defined by the late 1960s and the early 1970s, vintage trends have drifted towards the ‘80s with such film noir as the neon-bathed Kung Fury, and even down the dirty grunge road of the early 1990s. As brands respond to the movement across pop culture, you can bring elements of those eras to your web design and create a uniquely vintage journey for your visitors.


Creating a vintage web design is only limited by your imagination. You can be deeply authentic, but you can also be derivative – building your own world that evokes elements of the past and fuses them with the future. There’s no road to drive at 88mph, just a will to find beauty and opportunity in the rear view mirror.


And as the Doc says, “where we’re going, we don’t need roads…”



Source: B2C

No comments:

Post a Comment