Lines, and their structural cousin, grids, are core elements of graphic design. As any minimalist will tell you, they define visual hierarchy, are the basis for functional ratios, like the rule of thirds and the golden ratio, and provide a sense of minimalist order, functionality, and clarity to compositions.

If we zoom in on web design, though, lines are having a stylistic moment, too: narrow or bold, straight or squiggly, they’re prominent in fashion, editorial, e-commerce, media, and portfolios alike, making those websites more similar, at least in look, to wireframes than to sleek, finished products. They're also pragmatic: high-contrast linework is becoming an increasingly common tool for dividing space within an interface, both conceptually and graphically. It's a micro digital-rest-stop, providing order in the age of infinite scroll.

The use of lines and linework is in part due to the ongoing popularity of web brutalism, a style that owes its name to the similarities it shares with architectural brutalism, a mid-century movement that prized essential geometric shapes, functionality, and a stark minimalism over ornamentalism. Much like its architectural counterpart, web brutalism has a markedly bare-boned, industrial, and geometric-forward aesthetic, in which the raw elements that constitute it are fully exposed.

It’s clear that this visual style isn’t going anywhere. But the linework that embodied it is finding new, and more diffuse applications of its own.

A solve for dense content

Brutalist linework has become a welcome alternative in the realm of online media. Bloomberg was one of the earliest adopters in 2016, but the best example of how this visual language has evolved since is the news organization Semafor, which launched in 2022.

When head of design & creative Al Lucca (who previously held design leadership positions at Axios and ViacomCBS) and product designer Joey Pfifer set out to design the look of news site, they wanted to find a way out the sameness he had been witnessing in competitors: a layout consisting of the hero image, rows of content, and a menu on the left, usually expanding from a hamburger icon. “We tried to pay homage to old newspapers and the first websites, with less elaborate HTML structures,” he says of his approach.

The Semafor homepage, which uses fine, gray lines to separate items. Image: Semafor.

While some news orgs, like the New York Times and Washington Post, also utilize thumbnail images and more interactive features, like slideshows, to create a sense of visual distinction, Semafor is even more stripped down. It forgoes images below the fold (aside from tiny grayscale headshots next to writer bylines), and makes its text the main focus. “On our site, spacing is really tight, and we had to solve for that somehow. We wanted the density of content,” he continued. “That brought another sort of issue: we need organization; we need separation.”

So how do you make a content-dense page look visually distinct, rather than cluttered? The Semafor design team used fine, gray, dotted lines to separate items into a visible, grid-like formation and rendered the main art assets (clocks, a world map) in knocked-out linework as well. For sites that are chock-full of information and heavy on copy, like news outlets, lines give the user a sense of visual separation even when the margins between items are tight. “Lines are essential to good design,” says Lucca.

The high-fashion trickle-down effect

In eCommerce, lines and grids embody the zeitgeist of contemporary brands, conveying a refined, yet idiosyncratic minimalism. As independent designer Jiyoon Cha told Shaping Design for its piece on the ideas that will change web design in 2023, several formerly niche styles in fashion have had a trickle-down effect on mainstream brands. The brutalist style is one of them.

Balenciaga, which has used a linework-heavy brutalist web design since 2017, is one of this style’s forerunners. You can now spot the style on non-fashion and CPG brands like Usual Wines, Mineral, or The Neue Co. Thingtesting, a comprehensive directory of direct-to-consumer brands, makes use of sleek grids and lines on its homepage. There’s also perfume brand DS and Durga and its geometric key art, developed by an architect and perfumer duo, the trend-averse, sartorially-forward Swedish fashion brand Totême, and Gen Z favorite Dieux skincare, with a logo rendered with filigree-like linework. It uses similarly fine lines to separate content and product items throughout the site.

The way Dieux uses linework speaks to its practical benefit. Lines create a “resting place” for the eyes while we scroll, and create order in a seemingly chaotic and cramped layout. This is exemplified in the Whitney Museum website, which pays homage both to the contemporary art it houses and to the actual brutalism of its former headquarters. The site uses minimal, fine lines as a functional asset to create distinct menus and sections. These organizing characteristics make them a beloved asset in portfolios of creatives. (Related: parallax scrolling.)

A structural tool with design neutrality

This is apparent in portfolios such as the one by creative director Clem Shepherd, who used Wix to build it. “In the context of my website, lines are simply an effective way of organizing information,” says Shepherd. “My portfolio needs to demonstrate both an ability to design and to organize, and this must be reflected in the visual decisions I make in the layout of the site.”

Shepherd uses lines to clearly delineate the boundaries between each section. “Lines are so fundamental that they can be used with relative design neutrality,” he says. “They guide the viewer's eye without drawing too much attention to themselves, offering structural support with minimal visual intrusion.”

Images 1-3: portfolios by Yambo Studio head of production Clem Shepherd, designer Fanny Demier, and designer Yoonjung Chu. Images courtesy the designers.

Organization without constraint

But lines are more than scaffolding. When creative-growth acceleration company Huge Inc underwent a major redesign earlier last year, the lines of the letter H became the foundation of the homepage design: when you scroll, the H expands and contracts to create a grid-like structure. “Lines have always been a great tool for designers to find a marriage of form and function, as they simultaneously organize content while adding some simple visual interest and flow people through a page, component, or to a call to action,” says Rich Bloom, Huge’s creative director.

In all, lines and grids allow for a lot of creative and formal freedom. Says Semafor creative director Al Lucca: “Whether you work with lines or spaces, grids give you structure so you can play with them: playing also means breaking them.”