“Brutalism is raw and unrefined. It defies the trends of web design ubiquity. This creativity is often expressed with characteristics like asymmetry, broken hierarchy, broken grids, big bold typography, overlapping elements, geometric shapes, solid and bright colours.” (Houk, n.d.). A key part of website usability is creating a usable experience, making sure that the information on your site and how it’s presented is accessible to your visitors. However, websites do not need to sacrifice creativity to be accessible; some sites will break accessibility standards intentionally at the cost of artistic vision. The most important message we need to consider is that “every decision we make as a designer has a measurable impact to a potential customer.” (Houk, n.d.).

An example of brutalism style architecture which began through the Bauhaus movement prior to brutalist websites. (Stewart, 2022.).

When looking at examples of brutalism sites, it is clear that these explore differences compared to regular conforming websites. The first example includes a short description at the top of the page and a call-to-action button with ‘tickets’. As a user, we can immediately tell that the purpose is a dance/music group selling tickets to their shows. The surrounding images conform a strange grid sequence of repetitive ‘X’ graphics. They overlap and extend to create a strange yet appealing one page layout. The only interactivity that is used is the tickets button which emphasises the action of purchasing tickets and explores the target audience for the group. Unfortunately there is no use of video on the site which could’ve enhanced the amount of tickets sold with examples of the music/performances. The images as previously demonstrated don’t stick to a conformed grid style which relates to the brutalism.

The mobile version of the secret friend site. As you can see, this is only somewhat responsive; it fits the elements to mobile size but has the white bar at the top which shows they haven’t accounted for the device screen size.

The text is hard to read over the lighter coloured images and consists of contrasting serif fonts. The calligraphic version is smaller than the other version of copy and is duplicated down the entire screen. The repetitive nature is unneeded but again refers back to the brutalist style. This design in particular is responsive on tablet and phones as the images are purposely squashed and this adds to the strange grid affect. When reading the short interview posted underneath the site, it is clear that the artists preferred secrecy and didn’t want to reveal their reasons for becoming brutalists. This foreshadows the site and how very little information is revealed.

http://secret-friend.xyz/ https://brutalistwebsites.com/secret-friend.xyz/

The second brutalist website example I wanted to examine is an art studio online store selling their creations. The overall style is very bold and contains eccentric graphical elements. On the landing page, there is a clear unstructured modular grid with a visual hierarchy emphasised. This is followed on every page of the site and allows the user to familiarise themselves with the work on offer. I enjoyed the mouse icon interactivity which changes when you hover over a purchasable item into a shopping basket making the use experience more enjoyable. Multiple animations are placed throughout the grid structure which supports the outrageous style. Video is demonstrated at numerous times through animation but not through actual video content. Using video would allow users to become educated on either the artists or the products. Majority of the product imagery uses plenty of white space contrasting from the informative images by being cluttered and colourful.

The responsiveness of the mobile version of the studio job site. Again, it fits the elements well however the device screen size is questionable, for example the top black bar could disappear.

Apart from the logo, the typography choices are bold and loud. The fonts change but contain throughout the same font family, and they vary on the bright colours. Every part of copy is legible and breaks up the outrageous imagery choices. Relating back to the company title, this is extremely clean and heavily contrasting of the brutalist style. There are no storytelling techniques used due to the screen being chaotic and it would be difficult for the user to focus on a primary story. Looking at part of the interview, there was an outside coding company and editor which explores the intense layout and proves the time and effort that went in to designing the carefully thought out brutalist website. The responsiveness of the site is surprisingly very good considering the numerous assets needed to load the page. It is responsive for tablet, desktop, and mobile.

https://www.studio-job.com/ https://brutalistwebsites.com/studio-job.com/

The final brutalist website design I am looking at is a photography portfolio that takes a brutalist approach and created it by himself. There are multiple grids demonstrated in individual images and portrayed in the site layout. Combined with the intense whitespace, these grids hint at the photographers style and continued aesthetic. Starting with the landing page, the interactivity is key to continue through the site. The user must click on either 1, 2, 3, or 4 to progress and retrieve his future work. After browsing the collections, it is clear that videography isn’t used which emphasises his profession and the still images contributed. Majority of slides prove a column grid that are identical when scrolling through the examples and this only slightly changes when switching through collections. The images are high quality but cannot be responsive which we’ll discuss later.

Two screenshots from the mobile site of be here now child portfolio. This proves a high quality responsive site and explores the same on the tablet screen size too.

The typography is consistent and extremely simple relating back to the plain white background and Ariel font choices. This takes the interest away from the site design so the audience can focus on the work of the artist instead. The only artistic typography used is his personal logo which again adds emphasis to the purpose of the brutalist website. The copy clearly shows captions relating to the individual collections and the final slide is descriptive of what the photographer wants to achieve. What lets the website down is the lack of responsiveness when on tablet and mobile. Unfortunately you cannot reach the interactive numbers needed to advance to the next pages without scrolling with refuses accessibility options. The fact that the creator had built the website himself makes the whole experience more personal and adds to the feel of the upcoming creativity of modern photography.

https://beherenowchild.com/about/ https://brutalistwebsites.com/beherenowchild.com/

References

Houk, R., n.d. New Brutalism and web accessibility: what you need to know. [Online]
Available at: https://uxdesign.cc/new-brutalism-and-web-accessibility-what-you-need-to-know-c0a24dfce429
[Accessed 25 October 2022].

Stewart, J., 2022. Brutalism: What Is It and Why Is It Making a Comeback?. [Online]
Available at: https://mymodernmet.com/brutalist-architecture/
[Accessed 03 November 2022].