News | May 17th 2022

AIGA Eye on Design | The Era of Rebellious Web Design Is Here

Originally published in AIGA Eye on Design

You might remember Gawker as an aughts-era blog with all the visual hallmarks of that moment’s web design trends: bright logo, white background, infinite scroll. If you were to visit Gawker today, you might not recognize it at all. Relaunched in 2021 by BDG, the digital conglomerate that started in 2013 with the women’s interest website Bustle and now comprises 13 online properties, Gawker has adopted a new look that befits its tabloid-y aspirations.

Let’s start with the logo: In the new Gawker, the upper half of its bold, black logo appears cut from the header, as if the printer ran out of ink halfway through the job. The logo sits alongside dainty serif fonts and Arial Black, giving the page a textured, almost print-like appearance. There’s something tactile about the new Gawker, and really all of BDG’s websites, where layouts seem to be inspired by music posters, collages, and the recreation of graphic scribbles and underlines, almost like someone was scribbling or inking directly onto the screen using the pencil tool on Microsoft Paint. Taken alone, those design features might not be revolutionary, but in the editorial-media landscape, where clean user interfaces, hamburger menus and dull newsletter-like formats still dominate, BDG’s sprezzatura is a little oasis on the web where things are messier, more scribbly and just a little more interesting than usual.

You can’t talk about the aesthetic of BDG group without Code and Theory, the agency that played a leading role in shaping the digital design found on BDG’s websites. Before BDG, Code and Theory developed the visual language for The Outline, the genre-defining online magazine focused on “power, culture, and future” that was founded by Joshua Topolsky. Seeking storytelling methods that were meant to cut through the digital clutter of a homogenized media landscape, Code and Theory pioneered the card format, which in the words of their own case study is “what Tinder would look like if it replaced profile pictures with premium headline cards.”

The UI was built like a version of Snapchat Discover, with each post filling up the screen with a bespoke visual message. The card system was then further developed for Input, a technology and culture site founded in 2019, and Inverse, a science and future-based publication acquired in 2020. Neither is designed with traditional homepages. Instead, readers are presented with an infinite scroll of stories, where each piece comes with a snippet—the headline, maybe a quote, or a key stat, along with some information. This vision, to varying degrees, gradually took over most of BDG’s properties.

Where Gawker feels like a refreshing throwback to the early internet, Input was inspired by old-school Risograph prints, with colorful and paint-like vibes; Inverse is meant to be its dark, cinematic twin with higher contrasts and more gradients. Bustle has bold and clean typography with clear hierarchy and big moments to show off original photography, with a warm color palette; Nylon hinges on grungy textures, graphical references like music festival posters, hand-written graphics, and bold, energetic typography. Elite Daily, by contrast, is marked by DayGlo-inspired styles and bold typography, the design system captures that luster. Romper, with its warm palette, combines the feed for dense content and spatial imagery.

Most of these websites are a rebellion from the predominance of the Bootstrap UI, with its clean, responsive designs, and to the more and more senseless diktats that digital media had to abide by in order to make a profit in the early-to-mid 2010. BDG’s aesthetic combines frustration with the limits of web 2.0 design and early-internet nostalgia.

On Topolsky’s and Code and Theory’s moodboard for The Outline, there were no news sites, no online magazines, no online versions of print magazines. “[The idea was] Let’s think of it from [the perspective of] we’re building an app or building experience for people who live on Instagram and Twitter: The main intention was to make a website feel like a product,” Topolsky explained. Topolsky’s and Code and Theory’s vision, however, did not immediately catch on. While the design was interesting from an aesthetic perspective, it did not at the time align with the reading experience people expected, and left audiences perplexed. “What always happens, and what has always happened in my experience, is that there’s this initial wave of people going like, I hate this, this is horrible,” Topolsky said. “Why do they make it like this? What is up with these colors or whatever? And then, in about six months to a year people start ripping it off.” The new BDG properties, while maintaining the core tenets of the Outline’s design, are airier and less hyper-stimulating, with color combinations that might feel safer and more readable.

Meanwhile, whether you’re booking concert tickets for a classical-music performance, browsing a grocery shopping app, looking into buying a leather jacket or perusing the landing page of a podcast where celebrities talk about the soundtrack of their life, you can be sure you will encounter a watered down version of this aesthetic. Code and Theory representatives told us that prospective clients, even outside media, often ask them to recreate that look.

What works in favor of BDG’s design is its cohesion. While each property retains its visual identity in terms of color palette, fonts, and layout, as detailed above, there’s a common thread that runs between all of the properties, and not just because they’re all sitting in the same CMS. “The Card system really is a structure that we like to look at as a blank canvas,” said Ricky Blake, design director at Code and Theory. “Yes, there’s rules to the blank canvas, but when we go to each different property, we look at how we can bend those rules to make them feel really bespoke and really custom visually to each of the properties.” From an art direction perspective, this creates a challenge: related properties should feel like cousins, not siblings. Each should retain its individuality, but speak to each other through their design. “It’s a challenge to balance that rigidness but then also see where you can break and where you can play and where you can have fun,” said Blake.

A good example of this is the so-called accordion feature that’s present on most of the sites. Blake defines it as “a visual and interactive device used to path users to curated content that is relevant and timely.” Bustle was the first site to use it, near its hero images next to the header, to suggest content that was pertaining to whatever story occupied that central position. “It became such a successful device on that site that we looked to always reimagine it or re-envision it across all of the other brands,” Blake says.” In the case of Elite Daily for example, they created a moving ticker tape animation; in the case of Nylon, the accordion is reminiscent of a wall of 90s-inspired posters, the ones you might see plastered on some construction site in Lower Manhattan. Then, for the recently acquired parenting website Scary Mommy, the design called for a cheeky, 1950s overall look and feel, which is, miraculously, not twee thanks to an asymmetrical layout and the “wheel of feels,” the site’s version of the accordion resembling the wheel of fortune.

Both Topolsky and Blake believe The Outline and later the BDG websites bring web brutalism to audiences that were not artists or graphic designers. Think web-safe colors, gradients, shadows, scribble-like graphics, and a contemporary retooling of what we tend to associate to Microsoft Word Art. “[Brutalism] is kind of taking everything that you don’t see on the internet that you still see in print or vintage design, if you will, even kind of a nod to the past, blowing it up and bringing it back on the web,” said Blake. “We wanted to really capture that essence in The Outline and basically turn current web design on its head.” The end result is a little messy, and intentionally so. “When we say brutalist, we mean maybe it’s a little bit ugly, but it’s ugly in a really beautiful and resolved way,” Blake continued.

The web BDG’s sites exist within requires a different approach than the bespoke one-off sites found on on brutalistwebsites.com. It has to be systematized, readable, and reliable for millions of visitors. “We’d like to blend the concept of art with stories, and have design that moves at the speed of news,” Topolsky said. “In order to do that, you have to build systems, you can’t just build a bespoke experience.”

This experimentation comes from seeing the internet as a medium for making (and not just showcasing) art. “I think a lot of the people involved in these sites have a deep love for the internet, and what the internet is and what the internet was,” said Jack Koloskus, lead UX/UI/visual designer at BDG Group. This affection for internet history emerges, in fact, in the case of Gawker itself, via the act of picking the quintessentially web 1.0 font Georgia for the body copy of the articles, while combining it with minimalism-friendly Arial or Arial Black for the headlines in the sidebars. Yet, to avoid making it look too quintessentially nostalgic, they included the 2020 font Etna for headlines that are close to the top of the page. “I don’t think we want to be stuck being completely nostalgic,” Koloskus continued. “If you’re only ever trying to recreate something that already happened, then you’re missing out on a lot of really good opportunities.

Says a Lot —

Latest

News — 

Code and Theory, a Stagwell (STGW) Network Company, Named Ad Age Business Transformation Agency of the Year

News — 

CampaignLive | Behavior as a prompt: Why AI’s ability to anticipate will change business forever

News — 

Code and Theory Wins Three Drum Awards For AI, Creativity, and UX with YETI and Tipico

News — 

Under Armour Launches UA Rewards with Masterclass-style Video Series, in Partnership with Code and Theory

News — 

Figma Names Code and Theory as Launch Partner in New Service Partner Program

News — 

Scout by Sutter Health™ Launches an App Focused on Resilience Building for Youth and their ‘Champions’, Built by Code and Theory

News — 

Code and Theory Network Wins Six W3 Awards

News — 

Facing the Future: A Guide to AI and Design Transformation

We Are a Technology-First Creative Agency

What We Do

Code and Theory is a strategically driven, digital-first agency that lives at the intersection of creativity and technology. We solve consumer and business problems with end-to-end solutions that flex to meet the needs of today’s ever-changing digital landscape.

Our Services

We provide a range of offerings built to support the entire ecosystem.

  • Data, Analytics and Research

    Our data-driven approach enables us to understand every aspect of end-to-end consumer journeys, and powers our work from start to finish.

  • Business & Organizational Consulting

    We work with our clients not only to define and deliver products, services and communications, but also to design the business itself.

  • Transformational Technology

    We help our clients reinvent their technical infrastructure and roadmap in order to deliver for the needs of today and tomorrow.

  • Services, Platforms & Products

    We create best-in-class platforms built around both the user and the business goals, often extending into connected physical expressions.

  • Integrated Marketing

    We deliver the right messages to new and existing customers across the entire ecosystem.

Our Offices

We have locations around the world.

Join Our Team

We're not typical, and neither are you. We're always looking to hire smart, interesting and forward-thinking people.
See All Open Positions

Code and Theory is a proud member of Stagwell Group. Stagwell is the challenger network built to transform marketing. We deliver scaled creative performance for the world’s most ambitious brands, connecting culture-moving creativity with leading-edge technology to harmonize the art and science of marketing. Led by entrepreneurs, our 13,000+ specialists in 34+ countries are unified under a single purpose: to drive effectiveness and improve business results for their clients. Join us at www.stagwellglobal.com