Digital Brutalism:
A Dynamically Generated Collection

A website that explores Digital Brutalism, both as an aesthetic and a conceptual approach to web design. By leveraging Are.na’s API↗, the site dynamically pulls and presents content in a way that aligns with the raw, unpolished, and utilitarian nature of Brutalist web principles.

VISIT WEBSITE↗

Are.na Channel

The Are.na channel↗ was originally curated by my classmate↗, and later handed off to me to add more channel blocks and design. In total, there are 50 items in the collection.

Background

Inspired by Brutalist architecture, which emerged in the mid-20th century with stark, monolithic concrete structures, Brutalist web design↗ embraces a raw, stripped-down look that challenges modern UI/UX norms.

Falling Blocks

The falling blocks were created via matter.js↗, a JavaScript-powered 2D physics engine. The blocks emphasize the geometric and rigid nature of Brutalist design and also serve as navigation filters for the site's contents.

Pop-up Modals

The items in the collection are displayed and accessed via draggable pop-up modals that open in random positions within the screen. This disrupts conventional UI expectations, creating a chaotic, anti-design aesthetic that challenges usability.

Branding & Architecture

The wordmark and iconography utilize ASCII art, a digital equivalent of Brutalism’s construction using basic, functional elements to form stark visuals. Additionally, the menus on either side of the screen are meant to mimic Brutalist buildings.

Responsive Design

The website's functionality translates across all device sizes, maintaining its Brutalist aesthetic while ensuring accessibility. The responsiveness allows elements to shift, stack, or even overlap dynamically.