lesson 01
BRUTAL BASICS
First, take a look at this 4-minute video about brutalist web designs created by TemplateMonster:
Many web design trends have emerged in recent years, but brutalism is the hottest and fastest-growing of them all. An increasing number of major brands have begun embracing brutalist aesthetics online, as the style has become increasingly mainstream. It's popularity among designers has grown so quickly, that a clear consensus of it's definition hasn't fully materialized.
Similar to the architecture it takes it's name from, brutalist web development has become two competing philosophies in one. To some it means practicality, and others audacity. Both philosphical design approaches are correct, as both fall within the creative spectrum of a distinctively crude design style.
Origins of Brutalism
Brutalism is a style of architecture that took off after World War II. Reaching its peak in the ‘50s and ‘60s, the style was a reaction to ornate, over-designed structures of preceding decades.
béton brut
French for "raw concrete".
The name comes from the French term béton brut, which means raw (or rough) concrete. Concrete is the most common material used for brutalist structures, and the raw form is enough. Embellishments are unnecessary.
je-m'en-foutisme
French for "don't-give-a-damn attitude".
Brutalist architectural styles are unconcerned with conventional standards of beauty. Instead, it uses a "je-m'en-foutisme" approach, which is a French term that roughly translates to a "don't-give-a-damn attitude". English architectural critic Reyner Banham discusses this in his 1955 essay, "On the New Brutalism". Banham summarizes brutalist architecture as "the establishing of moving relationships with raw materials". That is to say, the brutalist style is intended to invoke feelings. Brutalist buildings do indeed feel impersonal, rugged, drab, or even somewhat totalitarian and utilitarian in nature.
The end-goal of brutalist design is rawness, which is to be perceived as brutal. Although the architectural style has waned in popularity over the years, it is one that has nevertheless proven itself as being a durable and distinctive aesthetic that will continue to withstand the test of time.
[ end of lesson 01 ]
lesson 02
DESIGN DEFINED
There is no clear-cut definition in terms of brutalist design. It is the anti-conventional approach to traditional web design principles that allows for both cynical creativity and practical productivity.
C.R.U.D.E. Principles of Web Brutalism
Brutalist web design principles and characteristics can be described using the acronym CRUDE:
- Creatively Cynical Confrontation
- Raw, Rugged, Real
- Uncompromisingly Uncomfortable & Unpolished
- Develop Deliberate Dysfunction
- Extremely Exciting Engagement
In web design brutalism, traditional rules and design principles are disregarded, replaced with a CRUDE attitude toward the overall user experience.
Let's break down what it means to be CRUDE.
Creatively Cynical Confrontation
Creative contemporary designs are commonly incorporated into brutalist designs, with an added touch of confrontational cynicism. Bold and brash elements are used to convey concepts of various connotations.
Raw, Rugged, Real
Relative to raw building materials, a rugged design can be used for real projects and practical applications. Raw HTML, CSS, and javascript elements are required for a rough-hewn rendering of relatable content.
Uncompromisingly Uncomfortable & Unpolished
Unlike standard design principles, users may feel uneasy and uncomfortable under the uncompromising uncertainty of an ugly and unpolished design. Utilize unconventional approaches to undermine an understanding of unnecessary user experience.
Develop Deliberate Dysfunction
Disproportionate to delightful designs, DO deliberately develop a dysfunctional design. Disregard the disdain of distraught users by developing disruptive and destructive design elements in order to delay their discernment of the dynamic user experience.
Extremely Emphatic Engagement
Engagement should excite the user. In web brutalism, this is taken to an extreme by using emphatic elements that should encourage the user to engage with the page. Enhanced typography, graphics, media, and other elements should be designed to employ a sense of enthusiasm.
Approaches to Design Brutalism
Web brutalism can be categorized into two design approaches: Practical or Audacious. Brutalist web design is best described as being on a spectrum of design styles.
At the practical end of the spectrum, designs are more rigid and uncompromising in their usage and purpose. On the opposite end, designs take a more cynical and audacious approach. Brutalist designs can also fall somewhere in the middle, where they're a hybrid of the two extremes - a practically audacious approach. In brutalism, creativity is limitless, so ponder whether to go practical or audacious! To help you decide, let's take a more detailed look at each end of the spectrum.
[ end of lesson 02 ]
lesson 03
PRACTICAL APPROACH
The practical approach in brutalist design is the uncompromising and raw approach to creating a minimalist functional design. The practical approach can be the bare minimum, or progressively plain.
Bare Naked Minimalism
Nudists enjoy the freedom that comes with living a minimalist lifestyle. They wander about in the wild all willy-nilly, in their raw and rugged form, without the concern for outward appearance.
Likewise, bare naked minimalism encompasses only raw and rugged web elements with virtually no custom styles or functionality added. It is the least creative approach, and the rawest in terms of visual elements and overall UI/UX. It harkens back to a more primitive web, leaving very little to the imagination. Usually, only basic HTML elements, inline CSS and javascript are often used for a minimal user interface and experience.
Here are a few live examples:
Progressively Plain
Similar to bare naked minimalism, the nudist is now wearing only a plain robe, thong bikini, speedo, or just plain underwear. A little something extra is added to cover up the rawness.
The overall design is kept relatively plain, but there is still a practical user interface and layout. However, there is a slightly more creative and progressive approach to some design elements that may be used to encourage engagement. Visually, it is a step up from the bare basics, with the design intended to capture the user's attention in some subtle way. Animations, colorful graphics, and other attention-grabbing elements may be used sparingly.
A few live examples:
Within the practical approach, there is usually a rigid sense of hierarchy and structure within the design. Elemements may be both practical and progressive in their functional usage, with raw styles kept to a bare minimum. In short, practical brutalist designs are more rugged and raw than their audacious counterparts.
[ end of lesson 03 ]
lesson 04
AUDACIOUS APPROACH
The audacious approach is on the creatively cynical end of the brutalist design spectrum. Audacious designs are often characterized by confusing content and chaotic elements.
Frankly Fashionable
Looking at our nudist, raw plainness is no longer an option. The nudist is feeling frank, and now wishes to experiment with different fashions. Some styles may be brash, while others may clash.
These designs are boldly avant garde, with frank tones and fashionable themes. Visuals involve the use of bright colors, vivid graphics, and confrontational content. Some elements may overlap, contain oversized font-faces, or include bold interactive media.
A few live examples:
Artistic Audacity
Having done a little artistic experimentation, our nudist feels fully exuberant in the exploration and engagement of some wild clusterf**ks.
It's now time to go wild!
Pure artistic chaos! These designs have no clear structure at all, and visual elements can often be distracting and detrimental to establishing a sense of authenticity. The audacity of it all!
A few live examples:
The primary difference between frankly fashionable and artistic audacity designs is that the former has some form of navigation that is easier to identify than the latter. Frankly fashionable is somewhat straight-forward, whereas artistic audacity is purely chaotic.
[ end of lesson 04 ]
lesson 05
BUILD OPTIONS
Depending on your project scope and needs, there are several options for building a brutal website or app.
Build Methods
Most brutalist websites are hand-coded, due to their creative nature and simple content. However, some have large amounts of content that may need to utilize dynamic functions. There are two methods to building a brutalist website or app: static or functional builds.
Static Builds
Static builds are most ideal for simple portfolios, landing pages, or other small creative sites. These types of builds may contain some of the following characteristics:
- Fully hand-coded
- Static HTML, CSS, & javascript
- Minimal functionality
- XML- or JSON-based data
- Basic programming (PHP, Java, etc.)
For some projects, a static site generator (SSG) can be a useful tool. SSGs are lightweight tools that use raw data and a set of templates to generate static HTML websites.
Static sites are typically built and edited using a simple text editor, such as Notepad++. The finished product is deployed to a live server via an FTP client, such as FileZilla. However, the method of workflow varies, depending on the individual developer's preferences.
Functional Builds
Functional builds are most ideal for larger, more complex websites or apps. These types of projects may include blogs, advanced input forms, ecommerce, or any number of other projects that involve advanced data management and visualization. The most ideal tool to use would be a content management system (CMS). Benefits of using a CMS may include:
- Limited or no coding required
- Manageable content
- Database-driven
- Advanced functionality
- Security features
Depending on what CMS you opt to use and the complexity of your project, some advanced programming skills may be required. Some content management systems have built-in tools for editing some of the source code, such as HTML and CSS file editors. However, if coding isn't your forte, some CMSs offer built-in design tools for easy code-free theming. Some CMSs are more geared towards developers, while others are more suitable for less tech-savvy users.
CMS Search Tip
A few things to consider when choosing a CMS:
- Ease of Use (complex vs. user-friendly)
- Extendability (ability to add custom functionality)
- Cost (free or commercial)
- Licensing (open source or proprietary)
- Technology (PHP, MySQL, etc.)
- Deployment (hosted vs. on-premise)
There are hundreds of CMS solutions out there that offer various types of functionality. The search for the right CMS solution can be overwhelming. CMSGuide.info is a good place to start looking.
Build Tools & Resources
Brutalist web design has no limit on creativity, so any method of building is acceptable! For your convenience, here are a few recommended tools and resources to help you get started.
Brutalist Framework
If you are looking to use the static build method, Brutalist Framework is a useful place to start. It is a collection of CSS, javascript, HTML templates, and other files that you can use as a starting point and save time on development for your next project. It is free and open source.
BrutalistFramework.comBlueprint Grid
Created using flexbox and CSS grid, Blueprint Grid offers multiple methods for creating responsive layouts simply by applying CSS classes to elements. It is free and open source, and is included with Brutalist Framework.
BlueprintGrid.comConcrete CMS
Concrete CMS is a free open-source content management system, built with PHP & MySQL, that can be used to build complex websites and web apps. Features include:
- Multi-site management
- Modular building & templates
- Intuitive editing
- Content workflow
- Create forms & collect data
- Integrated reporting
- SEO management
- User and permission management
- Mobile optimized & responsive
- Extendable
Inconclusive Conclusion
Brutalism in web design has no real conclusive definition, due to it's crude nature and endless creative possibilities. Creativity isn't meant to be contained within a rigid precast concrete mold. There is creative freedom to be had, with no regards for standard design principles.
Brutalism can be both brash and beautiful. With brutalist design, you can have the best of both worlds! There is beauty in both the practical simplicity and the creatively chaotic and audacious design approaches. Break out and be as brutally creative as you want!
Live free! Build freely!
[ end of lesson 05 ]