R5 – Websites that break the ‘rules’

What is Brutalism ?

A design approach known as “brutalism” in digital media aims to appear unpolished, careless, or bare. It resembles webpages from the early 1990s. This feature of brutalism can occasionally be seen in the form of a sparse, nearly naked HTML website with blue links and Monospace typography. (Kate Moran, 5 November 2017)

Figure 1 : Materials used in the Brutalism architecture (Reading, B. (2018)).

Figure 2 : An example of Brutalism architecture (Reading, B. (2018)).

The use of brutalism is considered as a reaction to artificiality and lightness in both architectural and digital design. Its supporters view it for being brave and honest. (Kate Moran, 5 November 2017)

Examples of Brutalism in websites

Too Much.Studio

A website that once employed brutalism to create a straightforward interactive Christmas card now features an interactive website portfolio of the creators’ works. (Brutalist Websites, n.d.) Not so much column grids are used on the Too Much.Studio website’s “Work” page to display the pieces. A mouse pointer is used to move the 3D objects on a website’s welcome page in to demonstrate interaction. There is a place where people can sketch their works of art. The website makes use of vibrant visuals and subtle movement to maintain audience attention. The majority of the interaction was created by using HTML code to modify the selected objects.

Figure 3 : TooMuch.Studio website (TooMuch.Studio, n.d.)

Figure 4 : The interactive items wouldn’t move freely when the website was converted to a mobile layout. Other little animations, however, adjusted rather well. (TooMuch.Studio, n.d.)

Johannes Strüber

According to Johannes Strüber, during the course of his job, he encountered the “brutalitic” approach. It became increasingly obvious that the provided URL serves as the foundation for the layout itself. He reasoned that his minimalist approach demonstrates his commitment to focused labour. It’s focused in a way, but it’s also playful. (Brutalist Websites, n.d.)

Figure 5 : Johannes Struber website (Johannes Strüber, n.d.).

Figure 6 : Testing responsives of Johannes Struber website (Johannes Strüber, n.d.).

Last Heavy

Figure 7 : Last Heavy website (Last Heavy, 2019).

According to Last Heavy, they were interested in developing a sort of environment for the brand that promotes exploration and discovery by presenting content in this completely overwhelming and distinctive manner. We required a website that fit our (schizophrenic) sense of design and had a particular taste for the kind of material that would help to promote and highlight their creative work.
When a user hovers their mouse over the website’s welcoming page, Last Heavy uses modular grids with minimal interactivity. Items are arranged in a modular grid as soon as the user clicks “Shop,” using brutalism while yet adhering to accessibility guidelines.

Figure 8 : Testing responsive design of Last Heavy (Last Heavy, 2019).

References

Brutalist Websites, n.d. Brutalist Websites [Online] (n.d.) Availiable at : https://brutalistwebsites.com [Accessed in 03 November 2022]

Johannes Strüber n.d. [Online] (n.d.) Availiable at: http://www.l-i-l.de/intro [Accessed in 03 November 2022]

Kayce Basques and Sofia Emelianova, Chrome Developers 2022. Simulate mobile devices with Device [Online] (n.d.) Availiable at : https://developer.chrome.com/docs/devtools/device-mode/ [Accessed in 03 November 2022]

Kate Moran, Nielsen Norman Group, 5 November 2017. Brutalism and Antidesign [Online] (n.d.) Availiable at : https://www.nngroup.com/articles/brutalism-antidesign/#:~:text=Brutalism%20in%20digital%20design%20is,Craigslist%20and%20the%20Drudge%20Report). [Accessed in 03 November 2022]

Last Heavy n.d. [Online] (n.d.) Availiable at : https://lastheavy.com [Accessed in 03 November 2022]

Reading, B. (2018) Britain’s Heritage: Brutalism. Stroud: Amberley.

TooMuch.Studio, n.d. TooMuch [Online] (n.d.) Availiable at : https://twomuch.studio [Accessed in 03 Nowever 2022]